/*
 * smart-form.css — visual do Formulário Smart colado nas LPs e no site.
 *
 * Carregado pelo bloco que /formularios-smart gera (`smart_form_api.gerar_embed`).
 * Mora aqui, e não num <style> dentro do bloco, para que um ajuste de visual
 * valha para todo formulário já colado sem ninguém colar de novo.
 *
 * Copia o formulário nativo da HubSpot que o site (www.distrito.me, Webflow)
 * usava em /contato-comercial (classes `wf-hs_*`, lidas em 14/10): cartão
 * branco com sombra, Red Hat Display, rótulo 500, campo com borda #dadada e
 * canto de 4px, botão preto em pílula e campos em duas colunas.
 *
 * A fonte NÃO é herdada: o `body` do site está em "Satoshi", que não é a
 * fonte do resto da página — herdar foi o que deixou o formulário com "uma
 * fonte nada a ver". `--font-family` é a variável de fonte do Webflow do
 * site; fora dele vale "Red Hat Display" se a página tiver, senão a do sistema.
 *
 * A página pode trocar qualquer cor/medida redefinindo as variáveis --sf-*
 * em `.smart-form` (ex.: `.minha-lp .smart-form{--sf-botao:#d0095f}`).
 */
.smart-form{
  --sf-fonte:var(--font-family, "Red Hat Display"), "Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sf-texto:#101010;
  --sf-texto-suave:#777;
  --sf-borda:#dadada;
  --sf-destaque:#d0095f;
  --sf-fundo:#fff;
  --sf-botao:#101010;
  --sf-botao-texto:#fff;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:20px 2rem;
  width:100%;
  max-width:700px;
  margin:0 auto;
  padding:2rem;
  border-radius:16px;
  background:var(--sf-fundo);
  box-shadow:0 2px 16px 0 rgba(0,0,0,.05);
  color:var(--sf-texto);
  font-family:var(--sf-fonte);
  font-size:1rem;
  line-height:1.5;
  text-align:left;
}
.smart-form *,.smart-form *::before,.smart-form *::after{box-sizing:border-box;}

/* Rótulo em cima do campo. Os seletores repetem `.smart-form` para vencer o
   `label{display:block;font-weight:bold;margin-bottom:5px}` do webflow.css. */
.smart-form label,.smart-form legend{
  display:flex;flex-direction:column;gap:6px;margin:0;padding:0;
  font-family:var(--sf-fonte);font-size:.95rem;font-weight:500;color:var(--sf-texto);
}
.smart-form .sf-field{min-width:0;}
.smart-form .sf-obrig{color:var(--sf-destaque);font-weight:500;}

.smart-form input,.smart-form select,.smart-form textarea{
  width:100%;min-height:44px;margin:0;padding:10px 12px;
  border:1px solid var(--sf-borda);border-radius:4px;background:#fff;
  font-family:var(--sf-fonte);font-size:1rem;font-weight:400;line-height:1.4;color:var(--sf-texto);
  box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease;
}
.smart-form textarea{min-height:96px;resize:vertical;}
.smart-form input::placeholder,.smart-form textarea::placeholder{color:#a3a3a3;opacity:1;}
.smart-form select{
  -webkit-appearance:none;appearance:none;padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.smart-form select:invalid{color:#a3a3a3;}
.smart-form select option{color:var(--sf-texto);}
.smart-form input:focus,.smart-form select:focus,.smart-form textarea:focus{
  outline:none;border-color:var(--sf-texto);box-shadow:0 0 0 3px rgba(16,16,16,.08);
}

/* Caixas (grupo de opções e aceites). */
.smart-form fieldset{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;border:0;}
.smart-form legend{margin-bottom:4px;}
.smart-form .sf-opcao,.smart-form .sf-optin{
  flex-direction:row;align-items:flex-start;gap:8px;font-weight:400;cursor:pointer;
}
.smart-form .sf-opcao{font-size:.95rem;}
.smart-form .sf-optin{font-size:.85rem;line-height:1.5;color:var(--sf-texto-suave);}
.smart-form .sf-opcao input,.smart-form .sf-optin input{
  flex-shrink:0;width:16px;height:16px;min-height:0;margin:3px 0 0;padding:0;
  accent-color:var(--sf-destaque);cursor:pointer;
}
.smart-form .sf-optin a{color:inherit;text-decoration:underline;}
.smart-form .sf-optin a:hover{color:var(--sf-destaque);}

.smart-form button{
  justify-self:start;min-height:0;margin:4px 0 0;padding:1.25rem 2.5rem;
  border:0;border-radius:200px;background:var(--sf-botao);color:var(--sf-botao-texto);
  font-family:var(--sf-fonte);font-size:1rem;font-weight:500;letter-spacing:.5px;line-height:1;
  cursor:pointer;transition:padding .4s ease,opacity .2s ease;
}
.smart-form button:hover{padding-left:3rem;padding-right:3rem;}
.smart-form button:focus-visible{outline:2px solid var(--sf-destaque);outline-offset:3px;}
.smart-form button[disabled]{opacity:.6;cursor:default;}
.smart-form button[disabled]:hover{padding-left:2.5rem;padding-right:2.5rem;}

/* Duas colunas quando cabe (o formulário antigo ia de dois em dois; a grade
   cai para uma sozinha quando a coluna da página é estreita). Grupo de caixas,
   texto longo, aceite e botão ocupam a linha toda. */
.smart-form .sf-field[data-tipo="checkboxes"],
.smart-form .sf-field:has(textarea),
.smart-form .sf-optin,
.smart-form button{grid-column:1/-1;}
@media (max-width:479px){
  .smart-form{padding:1.25rem;border-radius:12px;}
  .smart-form button{justify-self:stretch;}
}

/* Mensagem depois do envio (fica fora do <form>, no lugar dele). */
.sf-ok{
  display:none;box-sizing:border-box;width:100%;max-width:700px;margin:0 auto;padding:2rem;
  border-radius:16px;background:#fff;box-shadow:0 2px 16px 0 rgba(0,0,0,.05);
  border-left:4px solid #d0095f;color:#101010;
  font-family:var(--font-family, "Red Hat Display"), "Red Hat Display", system-ui, sans-serif;
  font-size:1.1rem;font-weight:500;line-height:1.5;
}