/* ============================================================
   V4 Forms — layout estável e mobile-first
   ------------------------------------------------------------
   Resolve 4 problemas de UX que derrubam conversão:
     1. Form que "pula" quando a mensagem de erro aparece
     2. Form mais alto que a tela empurrando a página toda
     3. Botão de envio sumindo embaixo da dobra
     4. Form não responsivo no mobile

   Estrutura HTML esperada:
     <form class="v4-form">
       <div class="v4-form-body"> ...campos... </div>
       <div class="v4-form-footer"> <button type="submit">...</button> </div>
     </form>
   ============================================================ */

/* Casca do form: largura fluida com teto + altura travada */
.v4-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;            /* responsivo: nunca passa disso */
  margin-inline: auto;
  box-sizing: border-box;
  /* trava a altura -> não cresce empurrando a página; svh conta a barra do navegador no mobile */
  max-height: min(88vh, 680px);
  max-height: min(88svh, 680px);
}

/* Corpo rolável: a rolagem fica DENTRO do form, não vaza pra página */
.v4-form-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;               /* necessário pro flex permitir o scroll interno */
}

/* Rodapé fixo: CTA sempre visível, colado no fim do form */
.v4-form-footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  background: inherit;         /* tampa o conteúdo que rola por baixo */
}

/* Mensagem de validação com espaço SEMPRE reservado -> nada salta ao validar */
.v4-msg {
  min-height: 16px;
  font-size: 12px;
  line-height: 1.3;
  margin-top: 4px;
}

/* Mobile-first: alvos de toque confortáveis */
.v4-form input,
.v4-form select,
.v4-form button {
  min-height: 44px;            /* área de toque mínima recomendada */
  font-size: 16px;            /* evita zoom automático do iOS ao focar o campo */
  box-sizing: border-box;
}

/* Telas muito baixas (paisagem no celular): usa mais da altura disponível */
@media (max-height: 560px) {
  .v4-form { max-height: 94svh; }
}