/* ===== ISY Frete (layout + tema Gravidicas) — CSS COMPLETO ===== */
.isy-frete {
  /* Paleta */
  --isy-bg: #ffffff;               /* fundo do card */
  --isy-border: #E8E6E2;           /* bege clarinho do site */
  --isy-text: #2B2B2B;             /* texto principal */
  --isy-muted: #6B5F5F;            /* texto secundário/itálico */
  --isy-accent: #C05B5B;           /* vermelho-rosé (preço/botão) */
  --isy-accent-hover: #A84A4A;     /* hover do botão */
  --isy-link: #0B5ED7;             /* link azul */
  --isy-divider: #EFE8E4;          /* divisórias suaves */

  /* Card */
  margin: 26px auto 8px;
  padding: 18px;
  border: 1px solid var(--isy-border);
  border-radius: 14px;
  background: var(--isy-bg);
  box-shadow: 0 8px 22px rgba(0,0,0,.04), 0 1px 0 rgba(0,0,0,.04);

  /* Largura controlada */
  max-width: 820px;
}

/* Força tema claro mesmo em dark-mode do site/navegador */
:where(.dark, .woodmart-dark, .color-scheme-dark, [data-scheme="dark"]) .isy-frete {
  --isy-bg: #ffffff !important;
  --isy-border: #E8E6E2 !important;
  --isy-text: #2B2B2B !important;
  --isy-muted: #6B5F5F !important;
  --isy-accent: #C05B5B !important;
  --isy-accent-hover: #A84A4A !important;
  --isy-link: #0B5ED7 !important;
  --isy-divider: #EFE8E4 !important;

  background: var(--isy-bg) !important;
  border-color: var(--isy-border) !important;
}

/* Intro */
.isy-frete__intro {
  text-align: center;
  font-style: italic;
  color: var(--isy-muted);
  margin: 0 0 14px;
}

/* Form — input + botão alinhados */
.isy-frete__form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  gap: 0;
  margin: 10px auto 6px;
  max-width: 720px;
}

.isy-frete__cep {
  min-width: 260px;
  width: 100%;
  height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--isy-border);
  border-right: 0;
  border-radius: 999px 0 0 12px;
  font-size: 16px;
  color: var(--isy-text);
  background: #fff;
  outline: none;
}

/* Destino */
.isy-frete__dest {
  text-align: left;         /* mantém alinhado com a lista */
  color: var(--isy-text);
  margin: 16px auto 10px;
  max-width: 720px;
}
.isy-frete__dest em { font-style: italic; color: var(--isy-muted); }
.isy-frete__dest .isy-frete__where { color: var(--isy-link); font-weight: 700; }

/* Lista de cotações — SEM bullets e alinhada */
.isy-frete__list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 8px auto 0 !important;
  max-width: 720px;
}

.isy-frete__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 8px;
  border-top: 1px solid var(--isy-divider);
}
.isy-frete__item:first-child { border-top: 0; }

.isy-frete__name {
  color: var(--isy-text);
  line-height: 1.35;
  flex: 1 1 auto;
  min-width: 0;             /* evita quebra estranha */
}
.isy-frete__price {
  font-weight: 800;
  color: var(--isy-accent);
  white-space: nowrap;
  margin-left: 12px;
}

.isy-hide { display: none !important; }

/* Responsivo */
@media (max-width: 640px) {
  .isy-frete__form {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .isy-frete__cep {
    border-right: 1px solid var(--isy-border);
    border-radius: 12px;
  }
  .isy-frete__btn {
    border-radius: 12px;
    width: 100%;
  }
  .isy-frete__item {
    align-items: flex-start;
  }
  .isy-frete__price {
    margin-left: 0;
  }
}


/* ===== Botão CALCULAR — fundo vermelho, texto branco, radius ===== */

/* separa input e botão (se antes estavam colados) */
.isy-frete .isy-frete__form { 
  grid-template-columns: 1fr auto; 
  gap: 12px !important; 
}

/* input volta a ter radius completo */
.isy-frete .isy-frete__cep { 
  border-right: 1px solid var(--isy-border) !important;
  border-radius: 999px !important;
}

/* estilo do botão */
.isy-frete .isy-frete__btn,
.isy-frete .isy-frete__btn.button,
.isy-frete .isy-frete__btn.alt {
  height: 48px !important;
  padding: 0 26px !important;
  background: var(--isy-accent) !important;      /* #C05B5B */
  color: #fff !important;
  border: none !important;
  border-radius: 18px !important;                 /* cantos arredondados */
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.04) !important;
  transition: transform .06s ease, background .15s ease;
}

.isy-frete .isy-frete__btn:hover,
.isy-frete .isy-frete__btn:focus {
  background: var(--isy-accent-hover) !important; /* #A84A4A */
}

.isy-frete .isy-frete__btn:active {
  transform: translateY(0.5px);
}

/* estado desabilitado (se usar depois) */
.isy-frete .isy-frete__btn:disabled {
  opacity: .6; filter: grayscale(10%);
  cursor: not-allowed;
}

.isy-frete__cep[aria-invalid="true"] {
  border-color: #d9534f !important;
  box-shadow: 0 0 0 3px rgba(217,83,79,.12);
}

/* Linha de "carregando..." mais suave */
.isy-frete__item .isy-skeleton {
  display:inline-block; height:12px; min-width:120px;
  border-radius:8px; background: #f3efed;
  animation: isyPulse 1.1s ease-in-out infinite;
}
@keyframes isyPulse {
  0% { opacity:.65; } 50% { opacity:1; } 100% { opacity:.65; }
}

/* Botão em loading */
.isy-frete__btn[data-loading="1"] {
  opacity:.85; cursor: wait;
}

/* ===== Botão em loading: spinner elegante no padrão vermelho ===== */
.isy-frete .isy-frete__btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: .95;
}
.isy-frete .isy-frete__btn.is-loading > .isy-btn-label { visibility: hidden; }
.isy-frete .isy-frete__btn.is-loading::after {
  content: "";
  position: absolute; inset: 0;
  margin: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;               /* traço branco gira */
  animation: isySpin .65s linear infinite;
}
@keyframes isySpin { to { transform: rotate(360deg); } }

/* ===== Skeleton shimmer nas linhas de frete ===== */
.isy-frete .isy-skel-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 12px 8px; border-top: 1px solid var(--isy-divider);
}
.isy-frete .isy-skel {
  display: inline-block; height: 12px; border-radius: 8px;
  background: linear-gradient(90deg, #f3efed 0%, #efe8e4 50%, #f3efed 100%);
  background-size: 200% 100%;
  animation: isyShimmer 1.1s ease-in-out infinite;
}
.isy-frete .isy-skel--name  { width: 72%; height: 14px; }
.isy-frete .isy-skel--price { width: 80px; }

@keyframes isyShimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

/* Dark-mode amistoso */
@media (prefers-color-scheme: dark) {
  .isy-frete .isy-skel {
    background: #c5bfb9;
  }
}