/*
 * MySeguros — estilo do formulário das LPs (compartilhado por / e /premium).
 *
 * Espelha o que já se faz com `lp-form.js`: uma fonte só, consumida pelas duas
 * páginas. Antes, este bloco vivia inline e DUPLICADO nos dois HTMLs — toda
 * mudança precisava ser feita duas vezes, e divergir era questão de tempo.
 *
 * CONTRATO: este arquivo é só ESTRUTURA e não conhece as variáveis de marca das
 * páginas. Tudo que muda entre standard e premium passa pelos tokens `--f-*`,
 * que cada HTML define no seu `:root`. Se você precisa de uma cor nova aqui,
 * crie um token e defina nos DOIS arquivos — não referencie `--azul`/`--ouro`.
 *
 * Carregue ANTES do <style> inline da página, para a LP poder sobrescrever sem
 * `!important` se algum dia precisar.
 */

/* ── Cartão ───────────────────────────────────────────────────────────────── */
/* `color` é obrigatório aqui, não decorativo: o cartão é uma superfície BRANCA
   que pode ser colocada dentro de qualquer seção. Na premium o `.hero` é navy
   com `color:#fff`, e sem esta linha o `<h3>` e TODOS os `.field label` herdavam
   branco — texto branco sobre cartão branco, invisível. Quem define a própria
   cor é a superfície, nunca a seção que a hospeda. */
/* `scroll-margin-top` compensa o header sticky (~68px): `go()` usa
   `scrollIntoView({block:"nearest"})`, que rola o MÍNIMO — sem esta folga o topo
   do cartão (o "Passo N de 3" e a 1ª mensagem de erro) para embaixo do header. */
.formcard{background:#fff;color:var(--f-text);border:1px solid var(--f-line);border-radius:18px;box-shadow:var(--f-card-shadow);padding:26px 24px;position:sticky;top:var(--f-card-top);scroll-margin-top:84px}
.formcard h3{font-size:20px;font-weight:700;margin-bottom:4px;font-family:var(--f-heading-font)}
.formcard .fsub{font-size:13.5px;color:var(--f-muted);margin-bottom:18px}

/* ── Progresso e rótulo de passo ──────────────────────────────────────────── */
.progress{height:6px;background:var(--f-progress-track);border-radius:999px;overflow:hidden;margin-bottom:18px}
.progress i{display:block;height:100%;background:var(--f-progress-fill);width:33%;transition:.3s;border-radius:999px}
.pstep{font-size:12px;font-weight:600;color:var(--f-accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}

/* ── Campos ───────────────────────────────────────────────────────────────── */
.field{margin-bottom:14px;scroll-margin-top:84px}
/* `.flabel` é o rótulo de um GRUPO (pills, toggle, lista de versões), que não é
   um controle único e portanto não pode usar <label for>. Mesma aparência. */
.field label,.field .flabel{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
/* 16px é OBRIGATÓRIO, não estético: abaixo disso o Safari iOS dá zoom na página
   a cada foco de campo. Com 15px o cliente levava um zoom em cada um dos 15+
   campos do passo 2, tendo de dar pinch de volta toda vez. */
.field input,.field select{width:100%;font-family:inherit;font-size:16px;padding:13px 14px;border:1.5px solid var(--f-line);border-radius:11px;outline:none;transition:.15s;background:#fff}
.field input:focus,.field select:focus{border-color:var(--f-accent-border);box-shadow:0 0 0 3px var(--f-accent-ring)}
.field input.invalid,.field select.invalid{border-color:var(--f-erro);box-shadow:0 0 0 3px rgba(217,45,32,.10)}
.frow{display:flex;gap:10px}
.frow .field{flex:1;min-width:0}
/* CEP e CPF lado a lado só sobram em tela larga. A ~360px cada um fica com
   ~131px e a máscara de CPF (14 caracteres) não cabe. Além disso os dois campos
   não são correlatos — parear campos sem relação só para poupar altura é
   justamente o que as guidelines desaconselham. */
@media(max-width:479px){
  .frow{flex-direction:column;gap:0}
}
.fhint{font-size:12.5px;color:var(--f-muted);margin-top:6px}
.ferr{font-size:12.5px;font-weight:600;color:var(--f-erro);margin-top:6px}
.ferr[hidden]{display:none}

/* ── Toggle carro/moto ────────────────────────────────────────────────────── */
.seg-toggle{display:flex;gap:10px;margin-bottom:6px}
.seg-toggle button{flex:1;min-height:44px;font-family:inherit;font-weight:600;font-size:14px;padding:12px;border:1.5px solid var(--f-line);background:#fff;border-radius:11px;cursor:pointer;color:var(--f-muted);transition:border-color .15s ease,background .15s ease,color .15s ease;display:flex;align-items:center;justify-content:center;gap:7px}
.seg-toggle button:hover{border-color:var(--f-accent-hover)}
.seg-toggle button.on{border-color:var(--f-accent-border);color:var(--f-accent);background:var(--f-accent-soft)}

/* ── Passos ───────────────────────────────────────────────────────────────── */
.step{display:none}
.step.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.formfoot{display:flex;gap:10px;margin-top:6px}
.formfoot .btn{flex:1;justify-content:center}

/* ── Lista de versões do veículo ──────────────────────────────────────────── */
/* Alvo de toque de verdade: este é o ÚNICO caminho para quem não tem a placa em
   mãos (carro 0km, recém-comprado, moto nova). Era um link de 12,5px sem padding
   — ~16px de altura, o menor alvo da página inteira. */
.linklike{display:inline-flex;align-items:center;min-height:44px;background:none;border:none;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--f-accent);cursor:pointer;padding:0;margin-top:2px;text-decoration:underline}
.vano{font-weight:500;color:var(--f-muted);text-transform:none}
.vlist{display:flex;flex-direction:column;gap:8px;max-height:236px;overflow:auto}
.vopt{display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--f-line);border-radius:11px;padding:11px 12px;cursor:pointer;transition:.15s;background:#fff}
.vopt:hover{border-color:var(--f-accent-hover)}
.vopt.on{border-color:var(--f-accent-border);background:var(--f-accent-soft)}
.vopt input{width:auto;margin-top:3px;accent-color:var(--f-accent)}
.vopt .vname{display:block;font-size:13.5px;font-weight:600;line-height:1.35}
.vopt .vmont{display:block;font-size:12px;color:var(--f-muted);margin-top:1px}

/* ── Pills sim/não ────────────────────────────────────────────────────────── */
.pills{display:flex;gap:10px}
.pills button{flex:1;min-height:44px;font-family:inherit;font-weight:600;font-size:14px;padding:11px;border:1.5px solid var(--f-line);background:#fff;border-radius:11px;cursor:pointer;color:var(--f-muted);transition:.15s}
.pills button.on{border-color:var(--f-accent-border);color:var(--f-accent);background:var(--f-accent-soft)}

/* ── Consentimento LGPD e resumo ──────────────────────────────────────────── */
.consent-row{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;font-weight:500;color:var(--f-muted);line-height:1.5;cursor:pointer}
.consent-row{min-height:44px}
.consent-row input{width:24px;height:24px;flex:0 0 24px;margin-top:1px;accent-color:var(--f-accent)}
.resumo{border:1px solid var(--f-line);border-radius:12px;padding:14px 16px;margin-bottom:14px;background:var(--f-surface-soft)}
.resumo dt{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--f-muted);margin-top:10px}
.resumo dl:first-of-type dt:first-child{margin-top:0}
.resumo dd{margin:2px 0 0;font-size:14.5px;font-weight:600;color:var(--f-text);overflow-wrap:anywhere}
/* Cabeçalho de bloco com atalho para o passo de origem: o resumo é a ÚLTIMA
   chance de corrigir (o invariante é nunca re-perguntar depois de confirmar),
   então cada grupo tem de ser editável sem voltar passo a passo. */
.resumo-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:16px;padding-top:12px;border-top:1px solid var(--f-line)}
.resumo>.resumo-cab:first-child{margin-top:0;padding-top:0;border-top:none}
.resumo-tit{font-size:12.5px;font-weight:700;color:var(--f-text)}
.resumo-editar{min-height:0;margin-top:0;font-size:12.5px}

/* ── Envio: botão travado, spinner, selo ──────────────────────────────────── */
.btn[disabled]{opacity:.65;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.secure{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--f-muted);margin-top:14px;justify-content:center}

/* ── Tela de sucesso ──────────────────────────────────────────────────────── */
.success{text-align:center;padding:14px 6px}
.success .ok{width:64px;height:64px;border-radius:50%;background:var(--f-ok-soft);display:flex;align-items:center;justify-content:center;margin:4px auto 16px}
.success .ok svg{width:30px;height:30px;stroke:var(--f-ok)}
.success h3{font-size:21px;margin-bottom:8px}
.success p{color:var(--f-muted);font-size:14.5px;margin-bottom:18px}
.statusline{font-size:13.5px;font-weight:600;color:var(--f-accent);background:var(--f-accent-soft);border-radius:10px;padding:11px 13px;margin-bottom:0!important}

/* ── Foco visível e toque ─────────────────────────────────────────────────── */
/* Os inputs trocam o outline por box-shadow no :focus, mas os BOTÕES do
   formulário dependiam do anel padrão do navegador — que some quando o CSS
   mexe em outline/border. Explicitar é mais barato que descobrir depois. */
.seg-toggle button:focus-visible,
.pills button:focus-visible,
.linklike:focus-visible,
.formfoot .btn:focus-visible,
.vopt:focus-within{outline:2px solid var(--f-accent-border);outline-offset:2px}

/* Em touch não existe hover: o estado "grudava" no último item tocado e ficava
   parecendo selecionado. `:not(.on)` para não apagar a seleção de verdade. */
@media(hover:none){
  .vopt:not(.on):hover{border-color:var(--f-line)}
  .seg-toggle button:not(.on):hover{border-color:var(--f-line)}
}

/*
 * Honeypot anti-bot. NÃO REMOVA E NÃO TROQUE POR [hidden]/display:none.
 *
 * Esta regra é a ÚNICA coisa que esconde o campo `website`. Sem ela o campo
 * fica visível, clientes reais o preenchem e `landing/routes.ts` responde
 * 202 com um protocolo falso SEM PERSISTIR NADA — o cliente vê "Cotação em
 * andamento!" e o lead evapora, sem erro em log nenhum. Bots pulam campos
 * `hidden`, mas caem num campo fora da tela; por isso é posicionamento.
 * Coberto por tripwire em landing/__tests__/lp-forms.test.ts.
 */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* ── Componentes do redesign ─────────────────────────────────────────────── */

/* Pills empilhadas: quando a opção é uma FRASE ("No dia a dia (trabalho,
   faculdade)"), lado a lado o texto quebra em 3 linhas e os dois botões ficam
   com alturas diferentes. Em coluna cada opção respira e vira alvo largo. */
.pills-col{flex-direction:column;gap:8px}
.pills-col button{text-align:left;padding:13px 14px;justify-content:flex-start}

/* Grade numérica de bônus: substitui um <select> de 11 opções que virava
   roleta no celular. Tudo visível de uma vez, um toque para escolher. */
.grade{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.grade-item{min-height:44px;font-family:inherit;font-weight:700;font-size:15px;
  border:1.5px solid var(--f-line);background:#fff;border-radius:11px;cursor:pointer;
  color:var(--f-text);transition:border-color .15s ease,background .15s ease,color .15s ease}
.grade-item:hover{border-color:var(--f-accent-hover)}
.grade-item.on{border-color:var(--f-accent-border);background:var(--f-accent-soft);color:var(--f-accent)}
.grade-item:focus-visible{outline:2px solid var(--f-accent-border);outline-offset:2px}
@media(hover:none){ .grade-item:not(.on):hover{border-color:var(--f-line)} }

/* Selo de confiança JUNTO do pedido de dados pessoais, não só no rodapé — é
   onde a ansiedade acontece, e é onde o cliente decide se digita o CPF. */
.selo-confianca{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;
  line-height:1.5;color:var(--f-muted);background:var(--f-surface-soft);
  border:1px solid var(--f-line);border-radius:11px;padding:12px 14px;margin-bottom:14px}
.selo-confianca svg{flex:0 0 18px;color:var(--f-accent);margin-top:1px}
.selo-confianca b{color:var(--f-text)}

/* Resumo em DUAS COLUNAS: empilhado, 15 pares rótulo/valor viravam uma parede
   de ~600px que ninguém lê — e o resumo existe justamente para ser conferido. */
.resumo dl{display:grid;grid-template-columns:minmax(96px,38%) 1fr;gap:2px 12px;align-items:baseline}
.resumo dt{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--f-muted);margin-top:6px}
.resumo dl:first-of-type dt:first-child{margin-top:6px}
.resumo dd{margin:6px 0 0;font-size:14px;font-weight:600}

/* O CTA final quebrava em duas linhas no cartão estreito. */
.btn-zap{font-size:15.5px;padding:15px 18px}

/* O botão flutuante de WhatsApp fica por cima dos controles do formulário no
   celular (cobria a grade de bônus). Duas razões para sumir com ele enquanto o
   cartão está em tela estreita: obstrui alvo de toque — WCAG 2.4.11, o mesmo
   defeito que o benchmark do setor tem — e é CTA concorrente no meio do funil
   de conversão. No desktop, onde não sobrepõe nada, continua. */
@media(max-width:900px){
  .zapfloat{display:none}
}