/* ============================================================
   VNA15 — CSS que o export do design não trazia.
   Formulários (erros, telefone) + correções de layout mobile.
   Partilhado pelas 10 páginas, por isso fica em cache entre elas.
   ============================================================ */

/* ── Erros de validação ─────────────────────────────────── */
.f-err { display: block; font-size: 12px; color: #ff7a7a; line-height: 1.4; }
.f-warn { display: block; font-size: 12px; color: #ffbe4d; line-height: 1.4; }
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: #ff7a7a; }
.fgroup.invalid .option-card,
.fgroup.invalid .check-row { border-color: #ff7a7a; }
.fgroup.invalid .check-row { color: #ff7a7a; }

/* ── Grupos de opções (radios/checkboxes) ───────────────── */
/* Fora do .field de propósito: `.field input` aplica padding e borda de
   caixa de texto, que num radio ficaria enorme. */
.fgroup { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Herda a cor do contexto em vez de a fixar: este componente aparece tanto no
   modal escuro do index como nos cartões brancos da pesquisa e da confirmação.
   Com uma cor fixa de tema escuro, os enunciados ficavam brancos sobre branco. */
.fgroup-label { font-size: 13px; font-weight: var(--weight-semibold); color: inherit; opacity: 0.72; }
.check-row { border: 1px solid transparent; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; }

/* ── Aviso de consentimento ─────────────────────────────── */
/* Substitui as checkboxes: o ato afirmativo passa a ser o submit. Tem de
   estar visível ANTES do botão, senão o consentimento não é informado. */
.consent-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: inherit;
  opacity: 0.72;
  text-align: center;
}
.consent-note a { color: inherit; text-decoration: underline; }

/* ── Telefone: indicativo + número ──────────────────────── */
.tel-group { display: grid; grid-template-columns: minmax(118px, auto) 1fr; gap: 10px; min-width: 0; }
.tel-group select {
  padding: 14px 10px;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 14px;
  min-width: 0;
  /* O popup do <select> é desenhado pelo sistema operativo, não pelo CSS da
     página. Sem isto, no Windows abre com fundo claro e o texto branco fica
     ilegível. Invisível no macOS/iOS — só se vê a testar em Windows. */
  color-scheme: dark;
}
.tel-group select option { background-color: #12161d; color: #e9edf5; }
@media (max-width: 460px) {
  .tel-group { grid-template-columns: 1fr; }
}

/* ── Overflow em mobile ─────────────────────────────────── */
/* Filhos de grid/flex têm min-width:auto por defeito, não 0: recusam-se a
   encolher abaixo da largura natural do conteúdo e transbordam a célula.
   Como as secções têm overflow:hidden, o corte é invisível ao
   documentElement.scrollWidth — parece que está tudo bem e não está. */
.results-grid > *,
.grid-2 > *,
.know-grid > *,
.verdade-grid > * {
  min-width: 0;
  overflow-wrap: break-word;
}

/* ── Scroll horizontal em mobile ────────────────────────── */
/* Os círculos decorativos (.glow-*) têm 380px e ficam parcialmente fora do
   ecrã por design. Algumas páginas puseram overflow:hidden no .wrap e outras
   não — nessas, os círculos empurravam a página para o lado em mobile.
   `clip` em vez de `hidden` porque `hidden` num só eixo transforma o outro
   em `auto` e cria um contentor de scroll indesejado. */
/* .wrap nas páginas do funil; .doc nas legais, que não têm .wrap. */
/* O overflow-y TEM de ser declarado. Quatro páginas (calendario, confirmacao,
   pergunta-vip, pesquisa) trazem `.wrap{overflow:hidden}` no bloco embutido,
   o que corta também na vertical: em janelas baixas o fim do cartão ficava
   inalcançável (scrollHeight 1168 contra clientHeight 1028 numa janela de
   560px) e o scrollIntoView — do estado de sucesso ou do primeiro campo por
   preencher — rolava o .wrap por dentro, escondendo o topo sem forma de o
   trazer de volta. Só `clip` no eixo x tolera `visible` no y; com `hidden` o
   outro eixo virava `auto` e nascia um scroll dentro da página. */
.wrap, .doc { overflow-x: clip; overflow-y: visible; }

/* ── CTAs lado a lado (confirmação) ─────────────────────── */
/* Os passos 2 e 3 da lista precisam cada um do seu botão: antes havia um só,
   que prometia o calendário e afinal só fazia scroll até à pesquisa. */
.cta-dupla {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}
@media (max-width: 520px) {
  .cta-dupla { flex-direction: column; }
  .cta-dupla .btn { width: 100%; }
}

/* ── Pesquisa: textarea, dica do enunciado e campo "Outro" ─ */
/* O bloco de estilos das páginas cobre `.field input` e `.field select` mas não
   `textarea` — as respostas abertas ficavam com o estilo cru do browser. */
.field textarea {
  padding: 14px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--border-on-light); background: var(--surface-light-raised);
  font-family: var(--font-sans); font-size: 15px; color: var(--text-on-light);
  width: 100%; box-sizing: border-box; min-height: 92px; resize: vertical;
}
.field textarea:focus { outline: 2px solid var(--accent-blue); outline-offset: 1px; }
.field-dark textarea {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  color: var(--text-on-dark);
}

/* "escolha única", "máximo 3", "2 a 3 frases" — a instrução, não a pergunta. */
.fgroup-hint { font-weight: 400; opacity: 0.8; }

/* O campo que o "Outro" revela vive dentro do .fgroup, fora de um .field, por
   isso não apanha o estilo dos inputs — leva-o aqui. */
.fgroup-outro {
  padding: 12px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--border-on-light); background: var(--surface-light-raised);
  font-family: var(--font-sans); font-size: 15px; color: var(--text-on-light);
  width: 100%; box-sizing: border-box;
}
.fgroup-outro:focus { outline: 2px solid var(--accent-blue); outline-offset: 1px; }

/* Ao chegar ao limite de 3, as que sobram ficam desativadas: tem de se ver. */
.option-card.disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Estado de sucesso (depois de submeter) ─────────────── */
/* Usava .glass e --text-on-dark-muted, componentes de fundo escuro. Só que as
   três páginas que mostram esta caixa (/pesquisa, /confirmacao, /pergunta-vip)
   são cartões brancos: o fundo e a borda ficavam invisíveis e a segunda linha
   dava 1.05:1 de contraste — branco sobre branco. Cinzentos neutros e cor
   herdada aguentam os dois contextos. */
.success-box {
  padding: 26px; text-align: center; border-radius: var(--radius-lg);
  border: 1px solid rgba(127, 127, 127, 0.28);
  background: rgba(127, 127, 127, 0.08);
  color: inherit;
}
.success-title { font-size: 20px; font-weight: var(--weight-bold); margin-bottom: 8px; }
.success-text { font-size: 15px; line-height: var(--lh-body); opacity: 0.72; }