/* ==========================================================================
   Duran Baterias — fluxo de pedido ("Pedir agora")
   Usa os tokens de cor/tipografia definidos em ../css/style.css
   (--ink, --volt, --bone, --bone-2, --graphite, --white, --whatsapp...)
   ========================================================================== */

body.pedir-page{
  background: var(--ink);
  /* --display já é Montserrat (vem de ../css/style.css); aqui trocamos
     também o texto de corpo (--body, que por padrão é Roboto) para
     Montserrat, só dentro do fluxo de pedido — não mexe no site principal. */
  --body: "Montserrat", sans-serif;
  /* body inteiro como coluna flex: o cabeçalho fixo fica com a altura
     natural dele e a landing/etapa do fluxo (flex:1) preenche exatamente
     o resto da tela — isso permite centralizar o conteúdo verticalmente
     nesse espaço sem sobrar nenhum pixel de rolagem a mais por causa da
     altura do cabeçalho. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.flow-header{ flex-shrink: 0; }

/* ==========================================================================
   Landing
   ========================================================================== */
.pedir-landing{
  background:
    radial-gradient(ellipse 75% 60% at 50% 38%, rgba(140,131,114,0.5), transparent 68%),
    radial-gradient(ellipse 130% 100% at 50% 50%, transparent 30%, rgba(0,0,0,0.65) 100%),
    var(--ink);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
}
body.flow-active .pedir-landing{ display: none; }

.pedir-landing-wrap{
  max-width: 720px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 56px;
}
.pedir-landing-logo{ margin-bottom: 28px; display: inline-block; }
.pedir-landing-logo img{ height: 56px; width: auto; border-radius: 6px; }

.pedir-landing-kicker{
  font-family: var(--mono);
  color: var(--bone-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
  margin-bottom: 14px;
}
.pedir-landing-kicker span{ color: var(--volt); }

.pedir-landing-title{
  color: var(--white);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.08;
  margin-bottom: 18px;
}

.pedir-landing-sub{
  color: var(--bone-2);
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 34px;
}

.pedir-cta{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--volt);
  color: var(--ink);
  border: none;
  border-radius: 4px;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.1rem;
  padding: 18px 32px;
  box-shadow: 0 14px 30px -12px rgba(255,198,41,0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pedir-cta:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(255,198,41,0.65); }
.pedir-cta svg{ width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.4; fill: none; }

.pedir-benefits{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 30px 0 46px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.pedir-benefits-item{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--bone-2);
}
.pedir-benefits-item i{
  color: var(--volt);
  font-size: 1.3rem;
  margin-top: 3px;
  flex-shrink: 0;
}
.pedir-benefits-item h3{
  color: var(--white);
  font-size: 0.98rem;
  margin-bottom: 4px;
}
.pedir-benefits-item p{ font-size: 0.88rem; line-height: 1.5; }

@media (max-width: 720px){
  .pedir-benefits{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Cabeçalho do fluxo: badge da unidade + indicador de etapas
   ========================================================================== */
.flow-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.flow-header-inner{
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 24px;
}
.flow-logo img{ height: 36px; width: auto; border-radius: 4px; display: block; }

.flow-store-badge{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--bone-2);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
}
/* nowrap no nome: se não couber do lado de "Unidade selecionada:", o
   navegador manda o nome inteiro pra linha de baixo em vez de quebrar
   no meio dele (ex.: "Duran" numa linha e "Alvorada" sozinho na outra). */
.flow-store-badge strong{ color: var(--white); white-space: nowrap; }
.flow-store-change{
  background: rgba(255,198,41,0.14);
  color: var(--volt);
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.flow-store-change:hover{ background: rgba(255,198,41,0.24); }

.stepper{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  list-style: none;
}
.stepper-item{ display: flex; }
.stepper-sep{ color: rgba(255,255,255,0.25); font-size: 1rem; }
.stepper-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--graphite);
  font-family: var(--body);
  font-size: 0.82rem;
}
.stepper-item.is-active .stepper-btn{ color: var(--white); }
.stepper-item.is-done .stepper-btn{ color: var(--bone-2); cursor: pointer; }
.stepper-dot{
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700;
  background: rgba(255,255,255,0.08);
  color: var(--bone-2);
  flex-shrink: 0;
}
.stepper-item.is-active .stepper-dot{ background: var(--volt); color: var(--ink); }
.stepper-item.is-done .stepper-dot{ background: rgba(255,198,41,0.22); color: var(--volt); }
.stepper-label{ display: none; }

@media (min-width: 720px){
  .stepper-label{ display: inline; text-transform: uppercase; letter-spacing: 0.04em; }
}

/* ==========================================================================
   Conteúdo genérico das etapas
   ========================================================================== */
.flow-step{
  display: none;
  flex-direction: column;
  /* "safe" faz cair pro alinhamento normal (topo) quando o conteúdo é
     mais alto que a tela (ex.: lista longa de marcas) — sem isso, um
     item flex centralizado que estoura o container fica com metade de
     cima cortada/fora da tela, exigindo rolar pra cima pra ver o início. */
  justify-content: safe center;
  flex: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px 24px 80px;
  color: var(--bone);
}
/* Vazio até o fluxo começar (ver body.flow-active em js/app.js) — sem
   isso, o padding sozinho já dava altura a ele mesmo sem conteúdo,
   sobrando espaço embaixo da landing e criando uma barra de rolagem
   maior do que o necessário. */
body.flow-active .flow-step{ display: flex; }

/* Reinicia (via JS, removendo e reaplicando a classe) a cada troca de
   etapa, pra dar uma entrada suave em vez de trocar o conteúdo seco. */
.flow-fade{ animation: flowFadeIn 0.22s ease; }
@keyframes flowFadeIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

.step-head{ margin-bottom: 26px; max-width: 640px; }
.step-kicker{
  display: inline-block;
  font-family: var(--mono);
  color: var(--volt);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.step-head h1{
  color: var(--white);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin-bottom: 8px;
}
.step-head p{ color: var(--bone-2); font-size: 0.98rem; line-height: 1.55; }

.empty-hint, .dev-hint{
  color: var(--bone-2);
  font-size: 0.92rem;
  padding: 18px 0;
}
.dev-hint code{
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--mono);
}

.btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--volt);
  color: var(--ink);
  border: none;
  border-radius: 4px;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  padding: 15px 26px;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-block{ width: 100%; }
.btn-block + .btn-block{ margin-top: 10px; }

/* Botão "Continuar com essas informações" (tela de retomar pedido) —
   vermelho no hover, mais forte visualmente que o amarelo padrão pra
   reforçar que é a ação de seguir em frente. */
[data-action="resume-continue"]:hover{ background: var(--signal-2); color: var(--white); }

.btn-ghost{
  background: none;
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--bone-2);
  border-radius: 4px;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
  padding: 11px 18px;
}
.btn-ghost:hover{ border-color: var(--volt); color: var(--volt); }

/* .btn-ghost foi pensado pra ficar sobre o fundo escuro da página — por
   isso some (borda e texto quase brancos) sempre que aparece dentro de
   uma superfície clara, como o popup branco ou o modal de debug. */
.popup-card .btn-ghost,
.modal-box .btn-ghost{
  border-color: rgba(23,20,15,0.18);
  color: var(--graphite);
}
.popup-card .btn-ghost:hover,
.modal-box .btn-ghost:hover{
  border-color: var(--volt);
  color: var(--ink);
  background: rgba(255,198,41,0.08);
}
.btn-back{ margin-top: 18px; }

.field-error{
  color: var(--white);
  background: rgba(216,38,44,0.18);
  border: 1px solid rgba(216,38,44,0.4);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 6px 0 16px;
}
/* Mesma lógica das outras exceções acima: texto branco não funciona
   sobre o popup branco (endereço, CEP). */
.popup-card .field-error{ color: var(--signal-2); background: rgba(216,38,44,0.1); }

.field-success{
  color: var(--ink);
  background: rgba(37,211,102,0.14);
  border: 1px solid rgba(37,211,102,0.4);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 14px;
}


/* ==========================================================================
   Popup: casco compartilhado por marca / modelo / ano / opções / endereço
   Visual de referência: um cartão branco, limpo, título + X para fechar,
   busca com lupa e uma lista com divisores finos — nada de sombra pesada
   ou cor fora da paleta da Duran.
   ========================================================================== */
.popup-wrap{
  max-width: 620px;
  margin: 0 auto;
}

.popup-card{
  background: var(--white);
  border-radius: 18px;
  padding: 26px 26px 22px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.55);
}
@media (max-width: 600px){
  .popup-card{ padding: 20px 18px 18px; border-radius: 14px; }
}

.popup-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.popup-head-text{ min-width: 0; }
.popup-head h1{
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.32rem;
  line-height: 1.25;
}
.popup-close{
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--bone-2);
  color: var(--graphite);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.popup-close:hover{ background: var(--ink); color: var(--white); }
.popup-close svg{ width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; fill: none; }

.popup-crumbs{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.crumb{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bone-2);
  border: 1px solid rgba(23,20,15,0.12);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.8rem;
  font-family: var(--body);
  padding: 6px 12px 6px 8px;
}
.crumb svg{ width: 13px; height: 13px; stroke: var(--graphite); stroke-width: 2.2; fill: none; flex-shrink: 0; }
.crumb:hover{ background: rgba(216,38,44,0.08); border-color: var(--signal-2); color: var(--signal-2); }
.crumb:hover svg{ stroke: var(--signal-2); }
.crumb-sep{ color: rgba(23,20,15,0.25); font-size: 0.8rem; }

.popup-text{ color: var(--graphite); font-size: 0.94rem; line-height: 1.55; margin-bottom: 16px; }

.popup-card .empty-hint,
.popup-card .dev-hint{ color: var(--graphite); }
.popup-card .dev-hint code{ background: rgba(23,20,15,0.06); }

/* Busca com lupa */
.popup-search{ position: relative; margin-bottom: 12px; }
.popup-search-icon{
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  stroke: var(--graphite); stroke-width: 2; fill: none;
  pointer-events: none;
}
.popup-search input{
  width: 100%;
  background: var(--bone-2);
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 13px 14px 13px 42px;
  font-size: 0.96rem;
  font-family: var(--body);
}
.popup-search input:focus{ outline: none; border-color: var(--volt); background: var(--white); }

.popup-count{
  color: var(--graphite);
  font-size: 0.78rem;
  margin: -4px 2px 12px;
}

/* Lista com divisores finos (marca, modelo, opções) */
.popup-list{
  max-height: 50vh;
  overflow-y: auto;
  margin: 0 -8px;
}
.popup-list::-webkit-scrollbar{ width: 7px; }
.popup-list::-webkit-scrollbar-track{ background: transparent; }
.popup-list::-webkit-scrollbar-thumb{ background: var(--bone-2); border-radius: 8px; }
.popup-list::-webkit-scrollbar-thumb:hover{ background: #ddd6c4; }
.popup-list{ scrollbar-width: thin; scrollbar-color: var(--bone-2) transparent; }

.popup-row{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(23,20,15,0.08);
  padding: 13px 8px;
  text-align: left;
  border-radius: 8px;
  transition: background 0.12s ease;
}
.popup-list .popup-row:last-child{ border-bottom: none; }
.popup-row:hover{ background: rgba(255,198,41,0.1); }

.popup-row-icon{
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bone-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.popup-row-icon img{ max-width: 26px; max-height: 26px; object-fit: contain; }
.popup-row-icon-pin{ background: rgba(255,198,41,0.16); }
.popup-row-icon-pin svg{ width: 19px; height: 19px; stroke: var(--signal-2); stroke-width: 1.8; fill: none; }

.popup-row-text{
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  min-width: 0;
}
.popup-row-plain .popup-row-text{ font-weight: 500; }

.popup-row-title{ display: block; font-family: var(--display); font-weight: 800; font-size: 0.98rem; }
.popup-row-sub{ display: block; color: var(--graphite); font-weight: 500; font-size: 0.82rem; margin-top: 2px; }
.popup-row-meta{
  margin-left: auto;
  flex-shrink: 0;
  color: var(--signal-2);
  font-weight: 700;
  font-size: 0.92rem;
  text-align: right;
}

.popup-row-badge{
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(255,198,41,0.18);
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
}
.popup-row-badge-near{ background: rgba(37,211,102,0.16); color: #1a9c53; }

@media (max-width: 600px){
  /* No celular o badge (ainda mais com a distância, tipo "Perto de você
     · ≈ 850 m") não cabe do lado do endereço sem espremer o texto — desce
     pra linha de baixo, alinhado com o texto (pula a largura do ícone).
     "flex-basis: 100%" é só o truque pra forçar a quebra de linha; sem o
     "max-width: fit-content" depois, o item fica esticado nos 100% (mais
     a margem esquerda por cima disso), estourando a largura da tela —
     é o que causava o scroll lateral. O max-width garante que ele volte
     a ficar do tamanho do conteúdo, pequeno e alinhado à esquerda. */
  .popup-row{ flex-wrap: wrap; }
  .popup-row-badge{
    flex-basis: 100%;
    max-width: fit-content;
    margin-left: 60px;
    margin-top: 6px;
    font-size: 0.64rem;
    padding: 3px 8px;
  }
}

.popup-row-more{
  justify-content: center;
  margin-top: 4px;
}
.popup-row-more .popup-row-text{
  color: var(--signal-2);
  font-weight: 700;
}
.popup-row-more:hover{ background: rgba(216,38,44,0.08); }

.popup-hint-preview{
  color: var(--graphite);
  font-size: 0.85rem;
  margin: -6px 0 16px;
}

/* Ano: grade de chips dentro do mesmo casco de popup */
.year-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 2px;
}
.year-chip{
  background: var(--bone-2);
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 14px 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.year-chip:hover{ border-color: var(--volt); background: rgba(255,198,41,0.14); }

/* Campos dentro do popup (endereço) precisam de contraste pensado pra
   fundo branco, diferente do resto do checkout que fica em fundo escuro. */
.popup-card .field-label{ color: var(--graphite); }
.popup-card .field-label em{ color: rgba(23,20,15,0.45); }
.popup-card .field-hint{ color: rgba(23,20,15,0.45); }
.popup-card .field input{ background: var(--bone-2); }
.popup-card .field input:focus{ background: var(--white); }

/* O toggle "Usar endereço salvo / Novo endereço" reaproveita o mesmo
   componente do checkout (que fica em fundo escuro) — aqui, dentro do
   popup branco, precisa de cores invertidas pra não sumir. */
.popup-card .delivery-option{
  background: var(--bone-2);
  border-color: transparent;
  color: var(--graphite);
}
.popup-card .delivery-option.is-selected{
  background: rgba(255,198,41,0.16);
  border-color: var(--volt);
  color: var(--ink);
}

/* Só o campo em si fica estreito (CEP é curto) — o rótulo continua com a
   largura padrão, senão a dica de texto embaixo (mais longa que 220px)
   quebra numa linha estranha, diferente do resto dos campos. */
.field-cep input{ max-width: 220px; }
@media (max-width: 480px){
  .field-cep input{ max-width: none; }
}

/* ==========================================================================
   Etapa: checkout (resumo + formulário)
   ========================================================================== */
.checkout-grid{
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 880px){
  .checkout-grid{ grid-template-columns: 1fr; }
}

.product-summary{
  background: var(--ink-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px;
  position: sticky;
  top: 90px;
}
@media (max-width: 880px){
  .product-summary{ position: static; }
}
.product-summary-label{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-2);
  margin-bottom: 4px;
}
.product-vehicle{
  color: var(--white);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 18px;
}

.product-card{
  background: var(--bone);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  margin-bottom: 18px;
}
.product-image{
  width: 100%;
  max-width: 180px;
  height: 140px;
  object-fit: contain;
  margin: 0 auto 12px;
}
.product-model{ color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.product-specs{ color: var(--graphite); font-size: 0.88rem; margin-bottom: 8px; }
.product-price{ color: var(--signal-2); font-family: var(--display); font-weight: 800; font-size: 1.4rem; }
.product-price-consult{ color: var(--graphite); font-size: 1rem; }

.product-benefits{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.product-benefits li{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bone-2);
  font-size: 0.88rem;
  line-height: 1.4;
  text-wrap: pretty;
}
.product-benefit-icon{
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,198,41,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-benefit-icon svg{
  width: 15px; height: 15px;
  stroke: var(--volt);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.product-fineprint{ color: rgba(247,243,234,0.45); font-size: 0.76rem; line-height: 1.5; }

.checkout-form h2{
  color: var(--white);
  font-size: 1.05rem;
  margin: 26px 0 14px;
}
.checkout-form h2:first-of-type{ margin-top: 0; }

.delivery-toggle{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 6px;
}
.delivery-option{
  background: var(--ink-2);
  border: 2px solid rgba(255,255,255,0.12);
  color: var(--bone-2);
  border-radius: 10px;
  padding: 16px 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.delivery-option.is-selected{ border-color: var(--volt); color: var(--white); background: rgba(255,198,41,0.08); }

.schedule-fields{ margin: 16px 0 4px; }
.schedule-fields[hidden]{ display: none; }

.field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 480px){
  .field-row{ grid-template-columns: 1fr; }
}

.field{ display: block; margin: 0 0 16px; }
.field-label{
  display: block;
  color: var(--bone-2);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.field-label em{ color: rgba(247,243,234,0.5); font-style: normal; text-transform: none; letter-spacing: 0; }
.field input{
  width: 100%;
  background: var(--bone);
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 14px 14px;
  font-size: 1rem;
  font-family: var(--body);
}
.field input:focus{ border-color: var(--volt); outline: none; }
.field-hint{ display: block; color: rgba(247,243,234,0.5); font-size: 0.78rem; margin-top: 6px; }

/* ==========================================================================
   Etapa: endereço
   ========================================================================== */
.compact-summary{
  background: var(--ink-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 20px;
}
.compact-summary-row{ display: flex; flex-direction: column; gap: 2px; }
.compact-summary-row span{ color: var(--bone-2); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; }
.compact-summary-row strong{ color: var(--white); font-size: 0.94rem; text-wrap: pretty; }
/* Linhas com texto mais longo (endereço, veículo) ocupam a largura toda
   da grade em vez de dividir coluna com as outras — evita quebrar
   sobrando só uma palavra na linha de baixo. */
.compact-summary-row-wide{ grid-column: 1 / -1; }

/* Mesmo componente, mas usado dentro de um popup branco (tela de
   "continuar com as mesmas informações?") — precisa do contraste
   invertido, senão o texto branco some no fundo claro. */
.popup-card .compact-summary{ background: var(--bone-2); border-color: transparent; }
.popup-card .compact-summary-row span{ color: var(--graphite); }
.popup-card .compact-summary-row strong{ color: var(--ink); }

/* ==========================================================================
   Modal de debug (WhatsApp não configurado)
   ========================================================================== */
.modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 200;
}
.modal-box{
  background: var(--bone);
  color: var(--ink);
  border-radius: 14px;
  padding: 26px;
  max-width: 560px;
  width: 100%;
  max-height: 84vh;
  overflow-y: auto;
}
.modal-box h2{ font-size: 1.1rem; margin-bottom: 10px; text-transform: none; }
.modal-box p{ font-size: 0.9rem; line-height: 1.55; margin-bottom: 14px; color: var(--graphite); }
.modal-box code{ background: rgba(0,0,0,0.08); padding: 2px 6px; border-radius: 4px; font-family: var(--mono); }
.modal-message{
  background: var(--white);
  border: 1px solid var(--bone-2);
  border-radius: 8px;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 16px;
}
.modal-actions{ display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ==========================================================================
   Mobile: prioridade total
   ========================================================================== */
@media (max-width: 600px){
  .flow-header-inner{ padding: 12px 16px; gap: 12px; }
  .flow-store-badge{ order: 3; width: 100%; justify-content: space-between; }
  .stepper{ margin-left: 0; }
  .flow-step{ padding: 24px 16px 64px; }
  /* Título "Receba em até 50 minutos." (etapa de endereço) quebrava em
     duas linhas no celular — um pouco menor cabe numa linha só. */
  .popup-head h1{ font-size: 1.12rem; }
  /* "Receber em até 50 minutos" / "Agendar entrega" (etapa de checkout)
     lado a lado ficavam espremidos e quebrando texto — empilhados, cada
     um cabe numa linha. Só essa etapa: o mesmo componente reaproveitado
     em "Endereço Salvo" / "Novo endereço" (etapa de endereço) continua
     lado a lado, do jeito que já estava. */
  .checkout-form .delivery-toggle{ grid-template-columns: 1fr; }
}