/* ==========================================================================
   auth-core.css
   Shared styles for auth pages (login, register, password reset, etc).
   Only includes selectors actually used across the auth flow.
   Page-only selectors (role selector, password strength meter, benefit
   list) have been moved to auth-register.css since login.html doesn't
   use them.
   ========================================================================== */

:root {
    /* Brand palette */
    --bm-ink-indigo: #17204A;
    --bm-ink-indigo-2: #232C5C;
    --bm-royal-violet: #5B3E96;
    --bm-royal-violet-2: #7457B8;
    --bm-boon-gold: #E8A33D;
    --bm-boon-gold-2: #F4C067;
    --bm-mint: #2FBF9F;
    --bm-paper: #F7F6F2;
    --bm-paper-2: #FFFFFF;
    --bm-ink: #22262F;
    --bm-ink-soft: #565B6B;
    --bm-ink-faint: #8A8FA0;
    --bm-line: #E7E4DC;
    --bm-line-soft: #EFEDE6;
    --bm-danger: #D9534F;

    /* Semantic roles */
    --bm-bg: var(--bm-paper);
    --bm-surface: var(--bm-paper-2);
    --bm-text: var(--bm-ink);
    --bm-text-muted: var(--bm-ink-soft);
    --bm-text-faint: var(--bm-ink-faint);
    --bm-primary: var(--bm-ink-indigo);
    --bm-accent: var(--bm-royal-violet);
    --bm-gold: var(--bm-boon-gold);
    --bm-mint-main: var(--bm-mint);

    /* Type */
    --font-display: "Fraunces", "Georgia", serif;
    --font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "Courier New", monospace;

    /* Radius + shadow */
    --bm-radius-sm: 10px;
    --bm-radius-md: 16px;
    --bm-radius-lg: 24px;
    --bm-radius-pill: 999px;
    --bm-shadow-sm: 0 2px 8px rgba(23, 32, 74, 0.06);
    --bm-shadow-md: 0 8px 24px rgba(23, 32, 74, 0.09);
    --bm-shadow-lg: 0 20px 48px rgba(23, 32, 74, 0.14);
    --bm-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: var(--bm-bg);
    color: var(--bm-text);
    font-size: 15.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--bm-ink-indigo);
    letter-spacing: -0.01em;
}

.text-accent { color: var(--bm-accent) !important; }
.text-gold { color: var(--bm-gold) !important; }
.text-muted-soft { color: var(--bm-text-muted) !important; }

a { color: var(--bm-accent); text-decoration: none; }
a:hover { color: var(--bm-ink-indigo); }

:focus-visible {
    outline: 2.5px solid var(--bm-royal-violet);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Eyebrow label */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bm-royal-violet);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.eyebrow::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--bm-gold);
    display: inline-block;
}

/* ---------- Node-field brand motif (background texture) ---------- */
.node-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.node-field svg { width: 100%; height: 100%; }
.node-dot { fill: var(--bm-boon-gold); }
.node-dot.violet { fill: var(--bm-royal-violet-2); }
.node-line { stroke: rgba(247, 246, 242, 0.18); stroke-width: 1; }

/* ---------- Progress ring (used in login's float card) ---------- */
.progress-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring circle.track { stroke: var(--bm-line-soft); fill: none; }
.progress-ring circle.value {
    stroke: var(--bm-gold);
    fill: none;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease;
}

/* ---------- Brand mark (logo lockup) ---------- */
.bm-brand { align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.bm-brand small {
    display: block;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    margin-top: 2px;
}
.bm-brand-mark { width: 30px; height: 30px; flex-shrink: 0; }
.bm-brand-mark svg { width: 100%; height: 100%; }

/* ---------- Auth shell layout ---------- */
.auth-body { min-height: 100vh; background: var(--bm-paper-2); }

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.auth-visual {
    position: relative;
    overflow: hidden;
    background: linear-gradient(165deg, var(--bm-ink-indigo) 0%, #241a4d 55%, var(--bm-royal-violet) 100%);
    padding: 3rem;
    display: flex;
    align-items: center;
}

.auth-visual-content {
    position: relative;
    z-index: 1;
    max-width: 460px;
    margin: 0 auto;
}

.auth-float-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    border-radius: var(--bm-radius-md);
    padding: 0.85rem 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #fff;
    max-width: 320px;
}

.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    background: var(--bm-paper-2);
}

.auth-form-wrap { width: 100%; max-width: 420px; }

.auth-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--bm-ink-indigo);
    margin-bottom: 0.4rem;
}

.auth-link-sm {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bm-royal-violet);
}

.auth-input-group { position: relative; display: flex; align-items: center; }

.auth-input-group i:first-child {
    position: absolute;
    left: 0.9rem;
    color: var(--bm-text-faint);
    font-size: 0.95rem;
    pointer-events: none;
}

.auth-input {
    padding: 0.65rem 0.9rem 0.65rem 2.5rem;
    border: 1.5px solid var(--bm-line);
    border-radius: var(--bm-radius-sm);
    background: var(--bm-paper);
    font-size: 0.9rem;
    width: 100%;
}

.auth-input:focus {
    border-color: var(--bm-royal-violet);
    box-shadow: 0 0 0 3px rgba(91, 62, 150, 0.12);
    background: var(--bm-surface);
}

.auth-toggle-visibility {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--bm-text-faint);
    font-size: 0.95rem;
    padding: 0.2rem;
}
.auth-toggle-visibility:hover { color: var(--bm-royal-violet); }

/* Primary CTA button */
.btn-bm-primary {
    background: var(--bm-ink-indigo);
    border: 1.5px solid var(--bm-ink-indigo);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: var(--bm-radius-sm);
    transition: var(--bm-transition);
}
.btn-bm-primary:hover {
    background: var(--bm-royal-violet);
    border-color: var(--bm-royal-violet);
    color: #fff;
}

/* Social sign-in buttons */
.btn-auth-social {
    border: 1.5px solid var(--bm-line);
    background: var(--bm-surface);
    color: var(--bm-ink);
    font-weight: 700;
    font-size: 0.83rem;
    border-radius: var(--bm-radius-sm);
    padding: 0.62rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    transition: var(--bm-transition);
}
.btn-auth-social i { font-size: 1rem; }
.btn-auth-social:hover {
    border-color: var(--bm-royal-violet);
    background: var(--bm-paper);
    color: var(--bm-ink-indigo);
}

/* Divider with centered label */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--bm-text-faint);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bm-line);
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-visual { display: none; }
    .auth-form-panel { padding: 2.5rem 1.25rem; }
}

.input-icon-wrap {
  position: relative;
}

.input-icon-left {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa1ac;
  font-size: 1rem;
  pointer-events: none;
}

.input-icon-wrap .form-control {
  padding-left: 2.75rem;
}

.btn-toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  color: #9aa1ac;
  cursor: pointer;
  line-height: 1;
}

.btn-toggle-password:hover {
  color: #555;
}

.btn-toggle-password:focus {
  outline: none;
}


.auth-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-group input {
  width: 100%;
  padding-left: 2.5rem;
  padding-right: 2.75rem;
}

.auth-input-group > i {
  position: absolute;
  left: 0.85rem;
  color: #9a9a9a;
  pointer-events: none;
  font-size: 0.95rem;
}

.auth-toggle-visibility {
  position: absolute;
  right: 0.65rem;
  border: none;
  background: transparent;
  color: #8a8a8a;
  padding: 0.25rem;
  line-height: 1;
  cursor: pointer;
}

.auth-toggle-visibility:hover {
  color: #444;
}

.auth-toggle-visibility:focus {
  outline: none;
  box-shadow: none;
}


.auth-benefit-list { list-style: none; padding: 0; margin: 0; }
.auth-benefit-list li {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;

}
.auth-benefit-list i { color: var(--bm-boon-gold-2); font-size: 1.05rem; flex-shrink: 0; }