/* =========================================================
   MOSMUN — Formulário de cadastro (/cadastro)
   Padrão visual Mosmun · layout e responsividade
   Desenvolvimento: GW Agência Digital

   Como usar: carregar DEPOIS de /assets/css/style.css
   <link rel="stylesheet" href="/assets/css/cadastro-mosmun.css">
   (ou colar este conteúdo no final do style.css)
   Não exige alteração no HTML do formulário.
   ========================================================= */

/* ---------- Área do formulário dentro do hero ---------- */
.hero .secao_1{
  grid-template-columns:1fr;          /* corrige: antes ficava em 2 colunas e espremia o formulário */
  justify-items:center;
  gap:0;
  padding:0 20px;
  margin-bottom:80px;                 /* respiro entre o card e o conteúdo do hero abaixo */
}

/* ---------- Card ---------- */
#formCadastroMM{
  width:100%;
  max-width:720px;
  background:#fff;
  color:var(--ink,#2B2B2E);
  border-radius:24px;
  padding:40px 40px 36px;
  box-shadow:0 30px 70px -25px rgba(31,95,29,.55),0 2px 0 rgba(255,255,255,.4) inset;
  font-family:var(--font,"Gotham","Montserrat",system-ui,sans-serif);
  text-align:left;
  position:relative;
}
#formCadastroMM::before{                /* faixa verde da marca no topo do card */
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  border-radius:24px 24px 0 0;
  background:linear-gradient(90deg,var(--green,#55AE52),var(--green-700,#2E862B));
}

/* ---------- Tabela convertida em grade ---------- */
#formCadastroMM table,
#formCadastroMM tbody,
#formCadastroMM tr,
#formCadastroMM th,
#formCadastroMM td{
  display:block;
  width:auto !important;               /* anula width="25%" / width="100%" do HTML */
  border:0;
  padding:0;
  margin:0;
  background:none;
  text-align:left;
}
#formCadastroMM table{border-collapse:collapse;border-spacing:0}

#formCadastroMM tbody{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:18px;
  row-gap:18px;
}
/* por padrão cada linha ocupa a largura toda;
   flex + flex-end mantém os campos lado a lado alinhados mesmo quando um rótulo quebra linha */
#formCadastroMM tr{
  grid-column:1 / -1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

/* campos curtos lado a lado no desktop (navegadores sem :has ficam em 1 coluna) */
#formCadastroMM tr:has(#nome_rs),
#formCadastroMM tr:has(#cnpj_cpf),
#formCadastroMM tr:has(#nome_contato),
#formCadastroMM tr:has(#telefone_contato){grid-column:auto}

/* ---------- Título principal ---------- */
#formCadastroMM th.h1b{
  font-size:clamp(1.45rem,3.2vw,2rem);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.025em;
  color:var(--ink,#2B2B2E);
  padding-bottom:6px;
}
#formCadastroMM tr:first-child::after{
  content:"Sem cartão de crédito · Instalação em minutos";
  display:block;
  margin-top:8px;
  font-size:.92rem;
  font-weight:500;
  color:var(--muted,#606062);
}

/* ---------- Subtítulos de seção ---------- */
#formCadastroMM th.h2b{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--green-700,#2E862B);
}
#formCadastroMM th.h2b::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line,#E6E9E6);
}

/* ---------- Rótulos ---------- */
#formCadastroMM th[scope="row"]:not(.h1b):not(.h2b){
  font-size:.85rem;
  font-weight:700;
  line-height:1.35;
  color:var(--navy-700,#3A3A3E);
  margin-bottom:7px;
}
#formCadastroMM td > label:empty{display:none}
#formCadastroMM th label{display:block;cursor:pointer;font:inherit;color:inherit}

/* ---------- Aceite LGPD ---------- */
#formCadastroMM .aceite-mm{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.88rem;
  line-height:1.45;
  color:var(--muted,#606062);
  cursor:pointer;
}
#formCadastroMM .aceite-mm input{
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin-top:2px;
  accent-color:var(--green-700,#2E862B);
  cursor:pointer;
}
#formCadastroMM .aceite-mm a{
  color:var(--green-700,#2E862B);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ---------- Campos ---------- */
#formCadastroMM input[type="text"],
#formCadastroMM input[type="email"],
#formCadastroMM input[type="tel"],
#formCadastroMM input[type="url"],
#formCadastroMM select{
  display:block;
  width:100%;
  min-width:0;
  height:52px;
  padding:0 16px;
  border:1.5px solid var(--line,#E6E9E6);
  border-radius:14px;
  background:#fbfcfd;
  color:var(--ink,#2B2B2E);
  font:inherit;
  font-size:.98rem;
  line-height:normal;
  transition:border-color .2s,box-shadow .2s,background .2s;
  -webkit-appearance:none;
  appearance:none;
}
#formCadastroMM input::placeholder{color:#9A9A9D;opacity:1}

#formCadastroMM input:hover,
#formCadastroMM select:hover{border-color:#cfd8cf}

#formCadastroMM input:focus,
#formCadastroMM select:focus{
  outline:none;
  border-color:var(--green,#55AE52);
  box-shadow:0 0 0 4px rgba(85,174,82,.18);
  background:#fff;
}

/* erro só depois que a pessoa interage com o campo */
#formCadastroMM input:user-invalid,
#formCadastroMM select:user-invalid{
  border-color:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.12);
}

/* seta personalizada do select */
#formCadastroMM select{
  padding-right:42px;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232E862B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
  text-overflow:ellipsis;
}

/* ---------- WhatsApp: País + DDD + Telefone na mesma linha ---------- */
#formCadastroMM td:has(> #nwa_ddi_site){
  display:grid;
  grid-template-columns:minmax(0,1.5fr) 96px minmax(0,1.5fr);
  gap:10px;
}
/* fallback sem :has */
#formCadastroMM #nwa_ddi_site,
#formCadastroMM .ddd,
#formCadastroMM .telefone{margin:0}
#formCadastroMM .ddd{text-align:center;padding:0 10px}

/* ---------- Botão ---------- */
#formCadastroMM tr:last-child th{display:none}   /* célula vazia (&nbsp;) */
#formCadastroMM tr:last-child{margin-top:8px}

#formCadastroMM .botao_form{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:56px;
  padding:15px 26px;
  border:0;
  border-radius:999px;
  background:var(--green-700,#2E862B);
  color:#fff;
  font:inherit;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 12px 28px -10px rgba(46,134,43,.7);
  transition:transform .2s,box-shadow .2s,background .2s;
  -webkit-appearance:none;
  appearance:none;
}
#formCadastroMM .botao_form:hover{
  background:var(--green-800,#1F5F1D);
  transform:translateY(-2px);
  box-shadow:0 16px 30px -12px rgba(31,95,29,.75);
}
#formCadastroMM .botao_form:active{transform:none}
#formCadastroMM .botao_form:disabled{opacity:.75;cursor:progress;transform:none}
#formCadastroMM .botao_form:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(85,174,82,.35),0 12px 28px -10px rgba(46,134,43,.7);
}
#formCadastroMM tr:last-child td::after{
  content:"🔒 Seus dados estão protegidos. Teste grátis por 15 dias, sem fidelidade.";
  display:block;
  margin-top:12px;
  text-align:center;
  font-size:.82rem;
  color:var(--muted,#606062);
}

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width:860px){
  #formCadastroMM{padding:34px 28px 30px}
}

@media (max-width:640px){
  .hero .secao_1{padding:0 14px;margin-bottom:56px}
  #formCadastroMM{
    padding:30px 20px 26px;
    border-radius:20px;
  }
  #formCadastroMM::before{border-radius:20px 20px 0 0}

  /* tudo em uma coluna */
  #formCadastroMM tbody{grid-template-columns:1fr;row-gap:16px}
  #formCadastroMM tr,
  #formCadastroMM tr:has(#nome_rs),
  #formCadastroMM tr:has(#cnpj_cpf),
  #formCadastroMM tr:has(#nome_contato),
  #formCadastroMM tr:has(#telefone_contato){grid-column:1 / -1}

  /* 16px evita o zoom automático do iPhone ao tocar no campo */
  #formCadastroMM input[type="text"],
  #formCadastroMM input[type="email"],
  #formCadastroMM input[type="tel"],
  #formCadastroMM input[type="url"],
  #formCadastroMM select{font-size:16px;height:50px}

  /* WhatsApp: país em cima, DDD + telefone embaixo */
  #formCadastroMM td:has(> #nwa_ddi_site){grid-template-columns:88px minmax(0,1fr)}
  #formCadastroMM #nwa_ddi_site{grid-column:1 / -1}
}

/* fallback do WhatsApp para navegadores sem :has */
@supports not selector(:has(a)){
  #formCadastroMM #nwa_ddi_site{margin-bottom:10px}
  #formCadastroMM .ddd{display:inline-block;width:30%;margin-right:2%}
  #formCadastroMM .telefone{display:inline-block;width:68%}
}

@media (prefers-reduced-motion:reduce){
  #formCadastroMM *{transition:none !important}
  #formCadastroMM .botao_form:hover{transform:none}
}