/* Formulário de captura, PADRÃO DO SITE. Vale para /aces, /live e /sd.
   Carregue depois do CSS da página: aqui é o acabamento comum, e cada página
   continua dona das próprias cores pelos tokens.

   O que motivou: a mensagem de erro herdava sublinhado de link e aparecia como
   um link vermelho quebrado embaixo do formulário. Erro precisa parecer aviso,
   não parecer defeito. */

/* ── campos ───────────────────────────────────────────────────────────── */

/* Escala de espaçamento do formulário. Três degraus só, para o ritmo ser
   previsível: dentro do campo, entre campos, e antes da ação.
   O botão precisa do degrau maior: colado no último campo ele lê como se fosse
   parte do campo, e foi o que aconteceu na modal da /live. */
:where(form, .lmodal) {
  --f-interno: .4rem;   /* rótulo para o input */
  --f-campo:   .95rem;  /* um campo para o outro */
  --f-acao:    1.5rem;  /* último campo para o botão */
}

/* O espaço entre campos vem do `gap` do formulário, nunca de margem no campo.
   Com os dois, a /aces somava 14px do gap com 15px da margem e dava 30px, o
   dobro das outras. Uma fonte só de espaçamento, e as três páginas batem. */
#lform, form.lform { display: flex; flex-direction: column; gap: var(--f-campo); }
.lfield { display: flex; flex-direction: column; gap: var(--f-interno); min-width: 0; margin-top: 0; }
.lrow { gap: var(--f-campo); }

.lfield label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-body-m, rgba(243, 243, 243, .62));
}

.lfield input,
.lphone > input {
  width: 100%;
  padding: .78rem .85rem;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  background: rgba(255, 255, 255, .03);
  color: var(--text-high, #F3F3F3);
  font: inherit;
  font-size: 1rem;  /* 16px: abaixo disso o Safari do iPhone da zoom ao focar o campo, e quase todo o trafego vem de link de WhatsApp no celular */
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.lfield input::placeholder,
.lphone > input::placeholder { color: rgba(255, 255, 255, .3); }

.lfield input:hover,
.lphone > input:hover { border-color: rgba(255, 255, 255, .2); }

.lfield input:focus,
.lphone > input:focus {
  outline: none;
  border-color: rgba(255, 160, 26, .65);
  box-shadow: 0 0 0 3px rgba(255, 160, 26, .13);
  background: rgba(255, 255, 255, .05);
}

/* Campo com problema: a borda avisa ANTES de a pessoa ler a mensagem. */
.lfield input[aria-invalid="true"],
.lphone.erro > input {
  border-color: rgba(255, 106, 76, .7);
  box-shadow: 0 0 0 3px rgba(255, 106, 76, .12);
}

/* ── mensagem de erro ─────────────────────────────────────────────────── */

.lerr,
.lform-err {
  display: none;
  align-items: flex-start;
  gap: .5rem;
  margin: calc(var(--f-acao) - var(--f-campo)) 0 0;
  padding: .6rem .75rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 106, 76, .3);
  background: rgba(255, 106, 76, .09);
  color: #ffb4a0;
  font-size: .86rem;
  line-height: 1.45;
  text-decoration: none;   /* herdava sublinhado e virava link quebrado */
  min-height: 0;
}
.lerr:not(:empty), .lform-err:not(:empty) { display: flex; }
.lerr[hidden], .lform-err[hidden] { display: none; }
.lerr::before, .lform-err::before {
  content: '!';
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .06rem;
  border-radius: 50%;
  background: rgba(255, 106, 76, .22);
  color: #ffd0c4;
  font-size: .72rem;
  font-weight: 800;
}

/* Sucesso usa a mesma caixa, com o verde do sistema. */
.lerr.ok, .lform-err.ok {
  border-color: rgba(110, 231, 154, .3);
  background: rgba(110, 231, 154, .09);
  color: #a8e6bd;
}
.lerr.ok::before, .lform-err.ok::before { content: '✓'; background: rgba(110, 231, 154, .22); color: #d5f5e0; }

/* ── botão ────────────────────────────────────────────────────────────── */

.lform-acao { margin-top: var(--f-acao); }
/* O gap do formulário já dá o degrau de campo; aqui só a diferença até o de ação. */
form .shiny-cta,
form button[type="submit"],
.lmodal form .shiny-cta { margin-top: calc(var(--f-acao) - var(--f-campo)); }
/* Com erro na tela, a caixa já cria o respiro: o botão não soma outro. */
.lerr:not(:empty) + .shiny-cta,
.lerr:not(:empty) + button[type="submit"],
.lform-err:not([hidden]) + .shiny-cta,
.lform-err:not([hidden]) + button[type="submit"] { margin-top: 0; }
/* O seletor de país precisa de folga do campo: colados leem como um controle só. */
.lphone { gap: .55rem; }

form button[disabled] { cursor: progress; opacity: .72; }

/* ── rodapé do formulário ─────────────────────────────────────────────── */

.lnote {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  /* fallback obrigatório: `--f-campo` só existe dentro de `form`/`.lmodal`, e a nota
     também aparece solta (embaixo do CTA do card). Sem o fallback a declaração fica
     inválida fora do form e a margem some, colando a nota no botão. */
  margin: var(--f-campo, 1.15rem) 0 0;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text-body-m, rgba(243, 243, 243, .58));
}

@media (prefers-reduced-motion: reduce) {
  .lfield input, .lphone > input { transition: none; }
}