/* ================================================================
   AUTH — extras das telas de cadastro/login/senha.

   Complementa (nunca substitui) o gosession.css: aqui ficam só os
   componentes exclusivos dos formulários de autenticação — o bloco de
   endereço com CEP e as linhas de campos lado a lado.

   Mobile-first: a base é uma coluna só (375px); a partir de 420px os
   pares (número/complemento, cidade/UF) ganham duas colunas.
   Todas as cores vêm dos tokens do design system — nada hardcoded.
   ================================================================ */

/* Bloco de campos agrupados (ex.: "Endereço") */
.auth-card .form-section {
  border: none;
  border-top: 1px solid var(--border);
  margin: 22px 0 14px;
  padding: 18px 0 0;
  min-width: 0;
}
.auth-card .form-section > legend {
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.auth-card .form-section-hint {
  margin: 2px 0 14px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Par de campos lado a lado. Mobile: empilhado. */
.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 12px;
}
@media (min-width: 420px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  /* Cidade ocupa o espaço; UF é só a sigla. */
  .field-row--city { grid-template-columns: 1fr 88px; }
}

/* Feedback de consulta do CEP: enquanto busca, o campo fica "ocupado". */
.field input[aria-busy='true'] {
  background-image: linear-gradient(90deg, transparent, rgba(29, 184, 160, 0.14), transparent);
  background-size: 220% 100%;
  animation: gs-cep-loading 1s linear infinite;
}
@keyframes gs-cep-loading {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .field input[aria-busy='true'] { animation: none; }
}