/*
 * Auth pages (login, register, forgot/reset password, verify-email,
 * 2FA). Shared visual fixes + premium polish on top of theme.css. These
 * pages already inherit most dark-theme correctness from theme.css's
 * !important rules (card/card-header/alert/website-verification/btn-close
 * are all already tokenized there) — this file only fixes what theme.css
 * doesn't cover and adds consistent premium spacing.
 */

/* Real bug: the login/register pages' own <style> block gives .captcha-code
   a dark surface background; forgot-password's copy of that block is
   missing the background declaration entirely, so its CAPTCHA sits with
   zero contrast box directly on the near-black page. Make it authoritative
   and consistent across every auth page instead of per-page duplication. */
.captcha-code {
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm) !important;
}
.refresh-captcha {
  color: var(--color-muted) !important;
}
.refresh-captcha:hover {
  color: var(--color-ink) !important;
}

/* The stock "card-3d" tilt-on-hover (rotateY/rotateX) is a decorative
   template gimmick that also makes it disorienting to aim at inputs near
   the card edge — tilts the whole login/register form while you're
   hovering to click into it. Not consistent with a "quietly confident
   trading terminal" identity (see DESIGN.md: motion signals state change,
   never decoration). Neutralize it for auth cards specifically without
   touching the shared .card-3d rule other pages may still use. */
.auth-card.card-3d:hover .card-inner {
  transform: none !important;
  box-shadow: none !important;
}

/* Premium card treatment consistent with the rest of the site. */
.auth-card {
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: var(--radius-lg) !important;
}
.auth-card .card-header {
  padding: 28px 28px 20px !important;
}
.auth-card .card-header h4,
.auth-card .card-header h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.auth-card .card-body {
  padding: 24px 28px 28px !important;
}

.auth-header i {
  transition: transform var(--duration-base) var(--ease-out-quart);
}

/* Buttons already inherit .btn-primary from theme.css; just add the same
   confident hover-lift used sitewide so auth CTAs match dashboard/home. */
.auth-form .btn-primary,
.auth-card .btn-primary {
  transition: transform var(--duration-fast) var(--ease-out-quart), filter var(--duration-fast) var(--ease-out-quart);
}
.auth-form .btn-primary:hover,
.auth-card .btn-primary:hover {
  transform: translateY(-1px);
}

/* Password-visibility toggle button: match the input it sits next to
   instead of Bootstrap's default outline-secondary gray. */
.input-group .btn-outline-secondary {
  border-color: var(--color-border) !important;
  color: var(--color-muted) !important;
  background: transparent !important;
}
.input-group .btn-outline-secondary:hover {
  color: var(--color-ink) !important;
  background: var(--color-surface-2) !important;
}

/* Mobile: keep the card comfortably readable, not edge-to-edge. */
@media (max-width: 575px) {
  .auth-container { padding: 2rem 0 !important; }
  .auth-card .card-header { padding: 22px 20px 16px !important; }
  .auth-card .card-body { padding: 18px 20px 22px !important; }
  .captcha-image { max-width: 100%; height: auto; }
}