/* ============================================================
   SiteSpiker — Direct signup / login (registration.php, login.php)
   Standalone auth pages. Reuses the app's design tokens.
   ============================================================ */
:root {
    --bg-primary: #f0f2f5;
    --bg-secondary: #ffffff;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --accent: #4f6ef7;
    --accent-light: #eef1ff;
    --accent-dark: #3b56d4;
    --accent-glow: rgba(79, 110, 247, 0.25);
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --border: #e5e7eb;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.18);
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body.auth-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
    background: var(--bg-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

/* ── Auth page shell (between the site header & footer) ─────── */
.auth-page {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    background:
        radial-gradient(55% 50% at 12% 0%, var(--accent-light) 0%, rgba(238,241,255,0) 55%),
        var(--bg-primary);
}

/* ── Split: content (left) + form (right) ─────────────────── */
.auth-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
    gap: 32px;
    width: 100%;
    max-width: 1080px;
}

/* Left content / marketing panel */
.auth-intro {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #4f6ef7 0%, #6366f1 55%, #7c3aed 100%);
    color: #fff;
    padding: 40px 44px;
    box-shadow: var(--shadow-xl);
}
.auth-intro::before,
.auth-intro::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    pointer-events: none;
}
.auth-intro::before { width: 420px; height: 420px; top: -150px; right: -130px; }
.auth-intro::after  { width: 300px; height: 300px; bottom: -120px; left: -90px; background: rgba(255,255,255,0.07); }

.auth-intro-inner { position: relative; z-index: 1; max-width: 100%; }
.auth-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.15);
    padding: 6px 12px; border-radius: 999px; margin-bottom: 20px;
}
.auth-eyebrow svg { width: 15px; height: 15px; }
.auth-intro h1 {
    font-size: 2.2rem; font-weight: 750; line-height: 1.14;
    letter-spacing: -0.03em; margin-bottom: 14px;
}
.auth-intro > .auth-intro-inner > p {
    font-size: 1.02rem; color: rgba(255,255,255,0.88); line-height: 1.55;
}

.auth-points { list-style: none; margin-top: 24px; display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.auth-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; color: rgba(255,255,255,0.94); }
.auth-points .tick {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,0.2); display: grid; place-items: center; margin-top: 1px;
}
.auth-points .tick svg { width: 15px; height: 15px; }

.auth-intro-foot {
    margin-top: 34px; display: flex; align-items: center; gap: 14px;
    font-size: 0.85rem; color: rgba(255,255,255,0.85);
}
.auth-intro-foot .stars { color: #fcd34d; letter-spacing: 2px; font-size: 0.9rem; }

/* Form side */
.auth-main {
    display: flex; align-items: center; justify-content: center;
}
.auth-card {
    width: 100%; max-width: 460px;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 40px;
    animation: authRise .5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes authRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.auth-card-head { margin-bottom: 26px; }
.auth-card-head h2 { font-size: 1.6rem; font-weight: 720; letter-spacing: -0.02em; }
.auth-card-head p { color: var(--text-secondary); font-size: 0.94rem; margin-top: 6px; }

/* Mobile-only inline brand (aside hidden on small screens) */
.auth-mini-brand { display: none; align-items: center; margin-bottom: 24px; text-decoration: none; }
.auth-mini-brand-img { height: 44px; width: auto; display: block; }

/* ── Fields ──────────────────────────────────────────────────── */
.field-row { display: flex; gap: 14px; }
.field-row .field { flex: 1 1 0; min-width: 0; }
@media (max-width: 480px) { .field-row { flex-direction: column; gap: 0; } }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 7px; color: var(--text-primary); }
.field .req { color: var(--danger); }
.field-link { float: right; font-weight: 500; font-size: 0.8rem; color: var(--accent, #f26e21); text-decoration: none; }
.field-link:hover { color: var(--accent-dark, #d85f1a); text-decoration: underline; }

.input-wrap { position: relative; }
.input-wrap .lead-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--text-muted); pointer-events: none;
}
.field input {
    width: 100%;
    font: inherit; font-size: 0.95rem;
    padding: 12px 14px 12px 42px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.field input::placeholder { color: var(--text-muted); }
.field input:hover { border-color: #d1d5db; }
.field input:focus-visible,
.field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
}
.field input[aria-invalid="true"] { border-color: var(--danger); }

/* Native select styled to match text inputs */
.select-input {
    width: 100%;
    font: inherit; font-size: 0.95rem;
    padding: 12px 40px 12px 42px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text-primary);
    cursor: pointer;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.select-input:hover { border-color: #d1d5db; }
.select-input:focus-visible,
.select-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
}
.select-input[aria-invalid="true"] { border-color: var(--danger); }
.select-input:invalid { color: var(--text-muted); }
.select-caret {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--text-muted); pointer-events: none;
}

.pw-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 8px;
    color: var(--text-muted); border-radius: 8px; line-height: 0;
    transition: color var(--transition), background var(--transition);
}
.pw-toggle:hover { color: var(--text-secondary); background: var(--accent-light); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pw-toggle svg { width: 18px; height: 18px; }

.field-error { display: none; color: var(--danger); font-size: 0.8rem; margin-top: 6px; }
.field-error.show { display: block; }

/* ── Password strength ───────────────────────────────────────── */
.pw-strength { margin-top: 10px; }
.pw-bars { display: flex; gap: 6px; }
.pw-bars span {
    flex: 1; height: 5px; border-radius: 4px; background: var(--border);
    transition: background var(--transition);
}
.pw-meta { display: flex; justify-content: space-between; margin-top: 7px; font-size: 0.78rem; }
.pw-label { font-weight: 600; color: var(--text-muted); }
.pw-hint { color: var(--text-muted); }
.pw-strength[data-score="1"] .pw-bars span:nth-child(-n+1) { background: var(--danger); }
.pw-strength[data-score="2"] .pw-bars span:nth-child(-n+2) { background: var(--warning); }
.pw-strength[data-score="3"] .pw-bars span:nth-child(-n+3) { background: #eab308; }
.pw-strength[data-score="4"] .pw-bars span:nth-child(-n+4) { background: var(--success); }
.pw-strength[data-score="1"] .pw-label { color: var(--danger); }
.pw-strength[data-score="2"] .pw-label { color: var(--warning); }
.pw-strength[data-score="3"] .pw-label { color: #ca8a04; }
.pw-strength[data-score="4"] .pw-label { color: var(--success); }

/* ── Button ──────────────────────────────────────────────────── */
.btn-auth {
    width: 100%;
    font: inherit; font-size: 0.98rem; font-weight: 650;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), #6366f1);
    border: none; border-radius: var(--radius);
    padding: 13px 18px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    box-shadow: 0 4px 14px var(--accent-glow);
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.btn-auth:hover { filter: brightness(1.05); box-shadow: 0 6px 20px var(--accent-glow); }
.btn-auth:active { transform: translateY(1px); }
.btn-auth:disabled { opacity: 0.65; cursor: not-allowed; box-shadow: none; }
.btn-auth:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.btn-auth .spin {
    width: 17px; height: 17px; border: 2.5px solid rgba(255,255,255,0.45);
    border-top-color: #fff; border-radius: 50%; animation: authspin .6s linear infinite;
}
@keyframes authspin { to { transform: rotate(360deg); } }

/* ── Ghost / secondary button (resend activation) ────────────── */
.btn-auth-ghost {
    background: transparent;
    color: var(--accent-dark, var(--accent));
    border: 1.5px solid var(--border, #e2e8f0);
    box-shadow: none;
}
.btn-auth-ghost:hover {
    background: var(--accent-soft, rgba(99,102,241,0.08));
    filter: none; box-shadow: none;
}

/* ── Email-verification "check your inbox" panel ─────────────── */
.verify-sent {
    text-align: center;
    padding: 8px 0 4px;
}
.verify-sent-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; margin-bottom: 14px;
    border-radius: 50%;
    color: var(--accent, #6366f1);
    background: var(--accent-soft, rgba(99,102,241,0.1));
}
.verify-sent-icon svg { width: 28px; height: 28px; }
.verify-sent p { margin: 0 0 8px; color: var(--text-primary, #0f172a); font-size: 0.98rem; }
.verify-sent p strong { color: var(--accent-dark, var(--accent)); word-break: break-all; }
.verify-sent .verify-sub { color: var(--text-secondary, #64748b); font-size: 0.88rem; line-height: 1.55; }
.verify-resend-form { margin: 18px 0 4px; }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; border-radius: var(--radius);
    font-size: 0.88rem; margin-bottom: 20px;
}
.alert svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.alert-error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert-success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }

/* ── Footer / switch ─────────────────────────────────────────── */
.auth-alt { text-align: center; margin-top: 24px; font-size: 0.9rem; color: var(--text-secondary); }
.auth-alt a { color: var(--accent); font-weight: 600; }
.auth-alt a:hover { color: var(--accent-dark); text-decoration: underline; }

.auth-fine { text-align: center; margin-top: 18px; font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.auth-fine a { color: var(--text-secondary); text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 960px) {
    .auth-split { grid-template-columns: 1fr; max-width: 480px; gap: 24px; }
    .auth-intro { padding: 36px 32px; }
    .auth-intro h1 { font-size: 1.75rem; }
    .auth-intro .auth-points { margin-top: 20px; gap: 12px; }
    .auth-card { max-width: none; }
}
@media (max-width: 600px) {
    .auth-page { padding: 32px 16px; }
    .auth-intro { padding: 30px 26px; }
    .auth-card { padding: 30px 24px; box-shadow: var(--shadow-md); }
}
@media (max-width: 420px) {
    .auth-card { padding: 26px 18px; }
    .auth-card-head h2 { font-size: 1.4rem; }
    .auth-intro-foot { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}