/* ============================================================
   Auth pages (login/signup) — estilos compartilhados.
   Carregado DEPOIS do Tailwind compilado da landing (styles.css).
   Centraliza o que antes era duplicado em <style> inline
   em login.html e signup.html.
   ============================================================ */

:root {
  /* Cores ausentes do build JIT da landing (convenção shadcn/ui) */
  --destructive: oklch(58% .22 27);
  --destructive-foreground: oklch(99.5% .008 50);
}

/* --- Cartão central (rounded-3xl, border-border/70, shadow-card) --- */
.auth-card {
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: 1.5rem;
  padding: 1.75rem;
  background: var(--gradient-card);
  box-shadow: var(--shadow-card);
}

/* --- Campos de formulário --- */
.auth-field--error .auth-input,
.auth-field--error .auth-input:focus {
  border-color: var(--destructive);
}
.auth-field--error .auth-input:focus {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 40%, transparent);
}

.auth-input {
  width: 100%;
  border-radius: .75rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 70%, transparent);
  padding: .5rem 1rem .5rem 2.75rem; /* pl p/ ícone à esquerda */
  font-size: .875rem;
  line-height: 1.25rem;
  color: var(--foreground);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-input::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
}
.auth-input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 40%, transparent);
}
/* Campos de senha ganham padding extra p/ o botão de olho (pr-11) */
.auth-input--password { padding-right: 2.75rem; }

.auth-label {
  display: block;
  margin-bottom: .375rem;
  font-size: .875rem;
  font-weight: 500;
}
.auth-field-icon {
  position: absolute;
  left: .875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  pointer-events: none;
}
.auth-eye-btn {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  transition: color .15s ease;
}
.auth-eye-btn:hover { color: var(--foreground); }

/* Espaço reservado p/ erro do campo — evita pulo de layout */
.auth-field-error-slot { min-height: 0; padding-top: 0; }
.auth-error {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-top: .25rem;
  font-size: .75rem;
  color: var(--destructive);
}

/* --- Banners de feedback (erro/sucesso/info) --- */
.auth-feedback-slot { min-height: 0; padding-top: .5rem; }
.auth-banner {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .25rem;
  padding: .75rem .875rem;
  border-radius: .75rem;
  border: 1px solid;
  font-size: .875rem;
}
.auth-banner--error {
  border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
  background: color-mix(in oklab, var(--destructive) 10%, transparent);
  color: var(--destructive);
}
.auth-banner--success {
  border-color: color-mix(in oklab, var(--whatsapp) 40%, transparent);
  background: color-mix(in oklab, var(--whatsapp) 10%, transparent);
  color: var(--whatsapp);
}
.auth-banner--info {
  border-color: var(--border);
  background: var(--secondary);
  color: var(--secondary-foreground);
}

/* --- Checkbox --- */
.auth-checkbox {
  height: 1rem;
  width: 1rem;
  border-radius: .25rem;
  border-color: var(--border);
  accent-color: var(--gold);
}

/* --- Botão dourado principal --- */
.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  border-radius: .75rem;
  padding: .75rem 1.25rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--primary-foreground);
  background: var(--gradient-gold);
  box-shadow: var(--shadow-gold);
  transition: transform .15s ease, opacity .15s ease;
}
.auth-btn:hover { transform: translateY(-2px); opacity: .95; }
.auth-btn:disabled { cursor: not-allowed; opacity: .7; transform: none; }

/* --- Links --- */
.auth-link { font-weight: 500; color: var(--primary); transition: opacity .15s ease; }
.auth-link:hover { opacity: .8; }

/* --- Form: espaçamento vertical entre blocos --- */
.auth-form > * + * { margin-top: .5rem; }

/* --- Spinner (Loader2) --- */
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-spin { animation: auth-spin 1s linear infinite; }

/* --- Seção de política de cookies (partial usa classes Bootstrap) --- */
#cookies {
  max-width: 28rem;
  margin: 1.25rem auto;
  padding: 0 1.25rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}
#cookies h2 { font-size: .875rem; font-weight: 600; color: var(--foreground); }