/* Shared UI Modal styles (Auth Gate / Dialog)
   Visual consistente com premium.css e styles.css, isolado para reuso. */

:root {
  --ui-brand-gold: var(--brand-gold, #f59e0b);
  --ui-surface: var(--modal-bg, #0f172a);
  --ui-surface-alt: var(--modal-bg-alt, #132032);
  --ui-border: var(--modal-border, rgba(255,255,255,.08));
  --ui-text: var(--modal-text, #e2e8f0);
  --ui-text-soft: var(--modal-text-soft, #94a3b8);
}

/* Overlay base do modal de autenticação */
.auth-gate {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2100;
  padding: 16px;
}
.auth-gate.show { display: flex; }

/* Caixa de diálogo */
.auth-dialog {
  background: var(--ui-surface);
  width: 100%;
  max-width: 520px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.auth-header { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom:1px solid var(--ui-border); }
.auth-header h2 { margin:0; font-size:16px; font-weight:800; display:flex; gap:8px; align-items:center; }
.auth-header h2 i { color: var(--ui-brand-gold); }
.auth-close { background:transparent; border:none; color:#94a3b8; font-size:22px; cursor:pointer; font-weight:700; }
.auth-close:hover{ color:#e5e7eb; }

/* Abas do dialog */
.auth-tabs { display:flex; gap:6px; background: var(--ui-surface-alt); border:1px solid var(--ui-border); border-radius:10px; padding:4px; width:fit-content; margin: 12px auto 0; }
.auth-tab { background:transparent; border:none; padding:8px 12px; border-radius:8px; cursor:pointer; color:#94a3b8; font-weight:800; letter-spacing:.3px; }
.auth-tab.active { background: linear-gradient(90deg, var(--ui-brand-gold), color-mix(in oklab, var(--ui-brand-gold) 80%, #fff)); color:#111827; box-shadow: 0 2px 10px -4px rgba(245,194,65,.35); }

.auth-body { padding: 16px; }
.auth-panel.hidden { display:none; }
.auth-actions { margin-top: 8px; }
.auth-info { font-size:12px; color:#94a3b8; margin-top:8px; }

/* Divider "ou" */
.auth-divider { display:flex; align-items:center; gap:12px; margin: 12px 0; color:#64748b; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
.auth-divider::before, .auth-divider::after { content:""; flex:1; height:1px; background: var(--ui-border); }

/* Social logins */
.auth-socials { display:grid; gap:8px; grid-template-columns: 1fr; margin-top:8px; }
.auth-social-btn { display:flex; align-items:center; gap:10px; border:1px solid var(--ui-border); background: var(--ui-surface-alt); color: var(--ui-text); border-radius:10px; padding:10px 12px; cursor:pointer; font-weight:800; }
.auth-social-btn .ico { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; }
.auth-social-btn.google { border-color: rgba(234,67,53,.35); }
.auth-social-btn.google .ico img { width:18px; height:18px; }
.auth-social-btn:hover { filter: brightness(1.03); }

/* Meta do formulário: lembrar-me e esqueci a senha */
.auth-meta { display:flex; align-items:center; justify-content:space-between; margin: 8px 0 0; }
.auth-meta .remember { display:flex; align-items:center; gap:8px; color:#94a3b8; font-size:12px; }
.auth-meta .link { color:#cbd5e1; font-size:12px; text-decoration: underline; cursor:pointer; }
.auth-meta .link:hover { color:#e2e8f0; }

/* Dicas e termos */
.form-hint { font-size:12px; color:#94a3b8; margin-top:6px; }
.auth-terms { font-size:11px; color:#64748b; margin-top:10px; }
.auth-terms a { color:#cbd5e1; text-decoration:underline; }

/* CTA / Botão primário padrão dourado (escopado ao modal de auth) */
.auth-dialog .cta, .auth-gate .cta, .auth-dialog .btn.primary, .auth-gate .btn.primary {
  background: linear-gradient(90deg, var(--ui-brand-gold), color-mix(in oklab, var(--ui-brand-gold) 80%, #fff));
  color: #111827;
  border: 1px solid color-mix(in oklab, var(--ui-brand-gold) 60%, #000);
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 14px -4px rgba(245, 158, 11, .35);
}
.auth-dialog .cta:hover, .auth-gate .cta:hover, .auth-dialog .btn.primary:hover, .auth-gate .btn.primary:hover { filter: brightness(1.07); }
.auth-dialog .cta:disabled, .auth-gate .cta:disabled, .auth-dialog .btn.primary:disabled, .auth-gate .btn.primary:disabled { opacity: .5; cursor: not-allowed; }

/* Acessibilidade */
.auth-dialog:focus-visible, .auth-close:focus-visible, .auth-tab:focus-visible, .cta:focus-visible {
  outline: 2px solid var(--ui-brand-gold);
  outline-offset: 2px;
}