/* ==========================================================================
   forms.css - Sistema generico de layout de formularios
   So ESTRUTURA (grid responsivo, agrupamentos). Sem cores/bordas/tipografia.
   A aparencia (cores, bordas, fontes) fica no CSS do site (ex.: style.css).

   ISOLAMENTO:
   TODAS as regras vivem dentro de .form-grid, e os nomes de classe usam o
   prefixo "form-" (form-field, form-field-group, form-field-options) para
   nunca colidir com .field/.field-group do flex.css, mesmo em empate de
   especificidade.

   Como usar:
     <form class="form-grid">
       <div class="form-section">Titulo da secao</div>   linha inteira
       <div class="form-field">            label + controle, linha inteira
         <label>Nome</label><input>
       </div>
       <div class="form-field col-2"> ... </div>          metade
       <div class="form-field col-3"> ... </div>          1/3
       <div class="form-field col-4"> ... </div>          1/4
       <div class="form-field col-2">                     grupo (DDD + numero)
         <label>Telefone</label>
         <div class="form-field-group">
           <input class="fg-narrow">  <input>
         </div>
       </div>
       <div class="form-field">
         <label>Bandeira</label>
         <div class="form-field-options">
           <label class="option"><input type="radio" name="brand"> Visa</label>
           <label class="option"><input type="radio" name="brand"> Amex</label>
         </div>
       </div>
       <div class="form-actions"> ...botoes... </div>     linha inteira
     </form>

   No celular todas as colunas viram largura total automaticamente;
   os .form-field-group (DDD + numero) continuam lado a lado.
   Ajuste o espacamento trocando --form-gap no .form-grid.
   ========================================================================== */

.form-grid {
  --form-gap: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--form-gap);
}
.form-grid > * {
  flex: 1 1 100%;      /* padrao: linha inteira */
  min-width: 0;
  box-sizing: border-box;
}

/* Campo: label em cima, controle embaixo */
.form-grid .form-field { display: flex; flex-direction: column; gap: .45rem; }

/* Colunas (proporcao descontando o gap) */
.form-grid .col-2 { flex: 1 1 calc(50%     - (var(--form-gap) * 1 / 2)); }
.form-grid .col-3 { flex: 1 1 calc(33.333% - (var(--form-gap) * 2 / 3)); }
.form-grid .col-4 { flex: 1 1 calc(25%     - (var(--form-gap) * 3 / 4)); }

/* Grupo de controles na mesma linha (ex.: DDD + numero, valor + moeda) */
.form-grid .form-field-group { display: flex; gap: .5rem; align-items: flex-start; }
.form-grid .form-field-group > * { flex: 1 1 auto; min-width: 0; }
.form-grid .form-field-group .fg-narrow { flex: 0 0 4.5rem; }   /* campo estreito, ex.: DDD */
.form-grid .form-field-group .fg-2 { flex: 2 1 0; }             /* pesos relativos opcionais */
.form-grid .form-field-group .fg-3 { flex: 3 1 0; }

/* Titulo / separador de secao - ocupa a linha inteira */
.form-grid .form-section { flex-basis: 100%; }

/* Linha de botoes */
.form-grid .form-actions {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

/* Controles preenchem a largura do seu conteiner */
.form-grid .form-field input,
.form-grid .form-field select,
.form-grid .form-field textarea,
.form-grid .form-field-group input,
.form-grid .form-field-group select { width: 100%; box-sizing: border-box; }

/* ============================================================
   GRUPO DE OPCOES (checkbox / radio)
   Lista de opcoes relacionadas dentro de um .form-field: lado a
   lado por padrao, ou empilhadas com .form-field-options--stack.
   ============================================================ */

.form-grid .form-field-options {
  --field-options-gap: .6rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--field-options-gap);
  align-items: center;
}

/* Empilha as opcoes (uma embaixo da outra) */
.form-grid .form-field-options--stack {
  flex-direction: column;
  align-items: flex-start;
}

/* Espacamento reduzido, para listas mais compactas */
.form-grid .form-field-options--tight {
  --field-options-gap: .35rem .75rem;
}

/* Cada opcao: input + texto lado a lado */
.form-grid .form-field-options .option {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
}

/* Sobrescreve o width:100% padrao dos controles do .form-field --
   checkbox/radio nao devem esticar */
.form-grid .form-field-options .option input {
  width: auto;
  margin: 0;
}

/* Responsivo: colunas viram largura total no celular
   (os .form-field-group permanecem em linha de proposito) */
@media (max-width: 640px) {
  .form-grid .col-2,
  .form-grid .col-3,
  .form-grid .col-4 { flex-basis: 100%; }
}