/* ================================================================
   Auth pages — design system
   Primary: #3B82F6 | Dark: #2563EB
   Font: Rubik (headings) + Nunito Sans (body)
   ================================================================ */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* ── Page shell ─────────────────────────────────────────────── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    padding: 32px 16px;
    font-family: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
    font-size: 15px;
    color: #1e293b;
}

.auth-card-wrap {
    width: 100%;
    max-width: 448px;
}

/* ── Card ────────────────────────────────────────────────────── */
.auth-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 36px 32px;
    box-shadow:
        0 20px 60px -12px rgba(0, 0, 0, .12),
        0 4px 16px -4px rgba(0, 0, 0, .08);
}

/* ── Logo ────────────────────────────────────────────────────── */
.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Rubik', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #3B82F6;
    text-decoration: none;
    margin-bottom: 28px;
}
.auth-logo:hover { color: #2563EB; text-decoration: none; }
.auth-logo svg  { flex-shrink: 0; }

/* ── Heading block ───────────────────────────────────────────── */
.auth-heading {
    text-align: center;
    margin-bottom: 28px;
}
.auth-heading h2 {
    margin: 0 0 6px;
    font-family: 'Rubik', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
}
.auth-heading p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

/* ── Icon circle (verify / 2fa pages) ───────────────────────── */
.auth-icon-circle {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}
.auth-icon-circle span {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-icon-circle span.blue  { background: rgba(59, 130, 246, .12); color: #3B82F6; }
.auth-icon-circle span.green { background: #dcfce7; color: #16a34a; }

/* ── Alert messages ──────────────────────────────────────────── */
.auth-alert {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 18px;
    border: 1.5px solid transparent;
}
.auth-alert.error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.auth-alert.success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.auth-alert.warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* ── Form grid ───────────────────────────────────────────────── */
.auth-form { display: grid; gap: 18px; }

.auth-field { display: grid; gap: 6px; }

.auth-field label {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    letter-spacing: .01em;
}

.auth-field .field-hint {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 3px;
}

/* ── Input wrapper (icon + input + toggle) ───────────────────── */
.auth-input-wrap { position: relative; }

.auth-input-wrap svg.field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    width: 18px;
    height: 18px;
    pointer-events: none;
    flex-shrink: 0;
}

.auth-input-wrap .toggle-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    line-height: 1;
    border-radius: 6px;
}
.auth-input-wrap .toggle-eye:hover { color: #64748b; }

/* ── Input fields ────────────────────────────────────────────── */
.auth-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    color: #1e293b;
    outline: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
    line-height: 1.4;
}
.auth-input::placeholder { color: #cbd5e1; }
.auth-input:focus {
    border-color: #3B82F6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
.auth-input.no-icon { padding-left: 16px; }
.auth-input.has-toggle { padding-right: 44px; }

/* ── Inline row: remember + forgot ──────────────────────────── */
.auth-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    flex-wrap: wrap;
    gap: 8px;
}

.auth-check-label {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    color: #475569;
    user-select: none;
}
.auth-check-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #3B82F6;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Links ───────────────────────────────────────────────────── */
a.auth-link, .auth-link {
    color: #3B82F6;
    text-decoration: none;
    font-weight: 700;
}
a.auth-link:hover, .auth-link:hover {
    color: #2563EB;
    text-decoration: underline;
}

/* ── Primary gradient button ─────────────────────────────────── */
.auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(90deg, #3B82F6 0%, #2563EB 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
    line-height: 1;
}
.auth-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, .40);
    color: #ffffff;
    text-decoration: none;
}
.auth-btn:active { transform: none; }
.auth-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}
.auth-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Social / secondary button ───────────────────────────────── */
.auth-btn-social {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: border-color .15s, color .15s;
    line-height: 1;
}
.auth-btn-social:hover {
    border-color: #3B82F6;
    color: #3B82F6;
    text-decoration: none;
}
.auth-btn-social svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Outline secondary button (2fa alt options) ──────────────── */
.auth-btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 13.5px;
    color: #475569;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: background .12s, border-color .12s;
    line-height: 1;
}
.auth-btn-outline:hover { background: #f8fafc; border-color: #cbd5e1; }
.auth-btn-outline svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Divider ─────────────────────────────────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* ── Social buttons row ──────────────────────────────────────── */
.auth-socials { display: flex; gap: 12px; }

/* ── Footer text ─────────────────────────────────────────────── */
.auth-footer-text {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #64748b;
}

/* ── OTP boxes ───────────────────────────────────────────────── */
.auth-otp {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}
.auth-otp-box {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    outline: none;
    color: #1e293b;
    font-family: inherit;
    transition: border-color .15s, background .15s, box-shadow .15s;
    -moz-appearance: textfield;
    caret-color: #3B82F6;
}
.auth-otp-box:focus {
    border-color: #3B82F6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
.auth-otp-box::-webkit-outer-spin-button,
.auth-otp-box::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Resend row ──────────────────────────────────────────────── */
.auth-resend-row {
    text-align: center;
    font-size: 14px;
    color: #64748b;
    margin-top: 6px;
}
.auth-resend-row .resend-btn {
    background: none;
    border: none;
    color: #3B82F6;
    font-weight: 700;
    cursor: pointer;
    font-size: inherit;
    padding: 0;
    font-family: inherit;
}
.auth-resend-row .resend-btn:hover { text-decoration: underline; }
.auth-resend-row .resend-btn:disabled { color: #94a3b8; cursor: default; }

/* ── Terms checkbox row ──────────────────────────────────────── */
.auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    color: #475569;
    line-height: 1.5;
}
.auth-terms input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: #3B82F6;
    flex-shrink: 0;
    cursor: pointer;
}

/* ── Below-card area ─────────────────────────────────────────── */
.auth-below-card {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
}

.auth-back-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #64748b;
    text-decoration: none;
    font-weight: 600;
    transition: color .15s;
}
.auth-back-link:hover { color: #3B82F6; text-decoration: none; }
.auth-back-link svg { width: 16px; height: 16px; }

/* ── Language switcher ───────────────────────────────────────── */
.auth-lang-switcher {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.auth-lang-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
    transition: background .12s, color .12s, border-color .12s;
}
.auth-lang-link:hover { border-color: #3B82F6; color: #3B82F6; text-decoration: none; }
.auth-lang-link.is-active { background: #1e293b; border-color: #1e293b; color: #ffffff; }

/* ── Space utilities ─────────────────────────────────────────── */
.auth-space-y { display: grid; gap: 10px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    .auth-page   { padding: 16px 12px; }
    .auth-card   { padding: 28px 20px; border-radius: 20px; }
    .auth-otp-box { width: 40px; height: 50px; font-size: 18px; }
    .auth-otp    { gap: 6px; }
}