/* ──────────────────────────────────────────────────────────────────────
   Padrão visual dos formulários de lead magnet — Me Poupe!
   03/08/2026

   Arquivo ÚNICO, linkado por todas as páginas de /materiais/.
   Mexer aqui muda as 28 de uma vez — é de propósito: o formulário é o
   mesmo em todo lugar, então o estilo dele mora num lugar só.

   POR QUE TANTO !important: o CSS que veio junto do ActiveCampaign é
   escopado por ID (`#_form_433_ ._submit{...}`), e ID ganha de qualquer
   seletor de classe. Como o ID muda de página para página (_form_433_,
   _form_387_, _form_6A519211AA254_, _form_387_-lb…), não existe seletor
   de classe mais específico que sirva para todas. A sobrescrita por
   !important aqui é deliberada, e só no que precisa.

   A COR do botão continua sendo a de cada página (umas usam o roxo
   escuro, outras o verde da LP). Aqui padroniza-se só a FORMA.
   ────────────────────────────────────────────────────────────────────── */

:root {
  --mp-roxo: #6b73ff;
  --mp-roxo-escuro: #270b5e;
  --mp-borda: #d5d8e3;
  --mp-borda-foco: #6b73ff;
  --mp-texto: #1c1f2a;
  --mp-texto-suave: #3d4256;
  --mp-erro: #e40e49;
}

/* ── fonte da marca ──
   O CSS que veio do ActiveCampaign fixa `arial` no formulário, e nas paginas
   migradas ele acabava herdando IBM Plex Sans — em qualquer um dos casos ficava
   destoando do resto da página. A pilha abaixo começa pela Lato (a fonte que 38
   das 46 páginas de materiais já carregam) e cai para as outras que aparecem no
   acervo, então cada página pega a SUA fonte sem precisar de regra por página. */
form[id^="_form_"],
form[id^="_form_"] * {
  font-family: "Lato", "Libre Franklin", "Montserrat", "IBM Plex Sans",
    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* ── ritmo vertical: todo campo com o mesmo respiro ──
   16px (e não mais) porque a caixa branca que envolve o formulário tem ALTURA
   FIXA herdada do Unbounce: o que sobra embaixo do botão é o que a gente
   economiza aqui. Medido nesta página: 11px de folga antes, ~26px depois. */
form[id^="_form_"] ._form_element {
  margin: 0 0 16px !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}
form[id^="_form_"] ._form_element:last-of-type { margin-bottom: 0 !important; }

/* ── rótulos: mesmo peso, tamanho e cor, inclusive o <legend> ── */
form[id^="_form_"] ._form-label,
form[id^="_form_"] legend._form-label {
  display: block !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--mp-texto) !important;
}
form[id^="_form_"] .field-required { color: var(--mp-erro) !important; }

/* ── caixa de texto e dropdown com a MESMA caixa ── */
form[id^="_form_"] input[type="text"],
form[id^="_form_"] input[type="email"],
form[id^="_form_"] input[type="tel"],
form[id^="_form_"] select {
  width: 100% !important;
  height: 46px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 14px !important;
  font-family: inherit !important;
  /* 16px NÃO é escolha estética: abaixo disso o Safari do iPhone dá zoom
     automático ao focar o campo e desalinha a página inteira. O CSS original do
     ActiveCampaign já tinha isso no media query de celular e eu tinha quebrado
     ao padronizar em 15px. */
  font-size: 16px !important;
  line-height: 1.3 !important;
  color: var(--mp-texto) !important;
  background-color: #fff !important;
  border: 1.5px solid var(--mp-borda) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
form[id^="_form_"] input::placeholder { color: #9aa0b4 !important; opacity: 1 !important; }

/* seta própria do dropdown (appearance:none tira a nativa) */
form[id^="_form_"] select {
  padding-right: 42px !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23270b5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
}
/* enquanto ninguém escolheu, o texto fica com cara de placeholder */
form[id^="_form_"] select:invalid { color: #9aa0b4 !important; }
form[id^="_form_"] select option { color: var(--mp-texto) !important; }

/* ── foco visível: acessibilidade (navegação por teclado) ── */
form[id^="_form_"] input[type="text"]:focus,
form[id^="_form_"] input[type="email"]:focus,
form[id^="_form_"] input[type="tel"]:focus,
form[id^="_form_"] select:focus {
  border-color: var(--mp-borda-foco) !important;
  box-shadow: 0 0 0 3px rgba(107, 115, 255, 0.2) !important;
  outline: none !important;
}
form[id^="_form_"] input:user-invalid,
form[id^="_form_"] select:user-invalid {
  border-color: var(--mp-erro) !important;
}

/* ── linha do opt-in: caixa e texto alinhados pelo topo ── */
form[id^="_form_"] ._row._checkbox-radio {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  width: 100% !important;
}
form[id^="_form_"] ._row._checkbox-radio input[type="checkbox"],
form[id^="_form_"] ._row._checkbox-radio input[type="radio"] {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 1px 0 0 !important;
  accent-color: var(--mp-roxo) !important;
  cursor: pointer !important;
}
/* SÓ o span que embrulha o rótulo vira bloco. Sem o `>`, isto pegava também o
   <span class="field-required"> lá dentro do texto e jogava o asterisco
   sozinho para a linha de baixo. */
form[id^="_form_"] ._row._checkbox-radio > span { display: block !important; }
form[id^="_form_"] ._row._checkbox-radio label {
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--mp-texto-suave) !important;
  cursor: pointer !important;
}
form[id^="_form_"] ._row._checkbox-radio a {
  color: var(--mp-roxo) !important;
  text-decoration: underline !important;
}

/* ── botão: largura cheia e alvo de toque confortável no celular ── */
form[id^="_form_"] ._button-wrapper {
  width: 100% !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
}
form[id^="_form_"] ._submit {
  width: 100% !important;
  min-height: 52px !important;
  padding: 15px 18px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  border-radius: 10px !important;
  transition: filter 0.15s ease, transform 0.05s ease !important;
}
form[id^="_form_"] ._submit:hover { filter: brightness(1.12) !important; }
form[id^="_form_"] ._submit:active { transform: translateY(1px) !important; }
form[id^="_form_"] ._submit[disabled] { opacity: 0.65 !important; cursor: not-allowed !important; }

/* o formulário do lightbox herda tudo igual, só respira menos nas bordas */
form[id^="_form_"]._form_387 ._form_element { margin-bottom: 16px !important; }

/* ── seção do formulário nas páginas do LeadSites ──
   Nessas páginas o formulário vinha preso num popup `display:none` e o CTA
   apontava para `#mp-form`, âncora que nunca existiu — a página capturava
   ZERO lead. O formulário virou esta seção, com o id que o CTA já procurava. */
.mp-secao-form {
  display: block !important;
  width: 100% !important;
  padding: 48px 16px !important;
  box-sizing: border-box !important;
}
.mp-secao-form > .mp-form-card,
.mp-secao-form .ls-html-host,
.mp-secao-form > .ls-html-host {
  display: block !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 28px 24px !important;
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
}
.mp-secao-form .ls-html { display: block !important; width: 100% !important; }
/* copy que veio junto do card antigo, quando o formulário foi promovido */
.mp-form-card > .mp-form-titulo {
  margin: 0 0 18px !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  color: #1c1f2a !important;
}