/* ═══════════════════════════════════════════════════════════════════════════
   SaleenShopper — Auth pages  (login · register · forgot · reset · verify)
   These pages render inside the standard MainLayout (header + sidebar).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Outer centering wrapper ─────────────────────────────────────────────── */
.auth-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2.5rem 1rem 3rem;
    min-height: calc(100vh - 200px); /* leaves room for header + footer */
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.auth-card {
    background: #fff;
    border-radius: 16px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.06),
        0 4px 6px -1px rgba(0,0,0,.05),
        0 12px 40px -4px rgba(0,0,0,.09);
    padding: 2.5rem 2.75rem;
    width: 100%;
    max-width: 430px;
    animation: authCardIn .35s cubic-bezier(.16,1,.3,1) both;
}

@keyframes authCardIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Card header ─────────────────────────────────────────────────────────── */
.auth-card-header {
    margin-bottom: 1.75rem;
}

.auth-card-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.auth-card-logo-mark {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-card-logo-name {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.1px;
}

.auth-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin: 0 0 .3rem;
}

.auth-card-subtitle {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.auth-alert {
    border-radius: 10px !important;
    margin-bottom: 1.1rem;
    font-size: 0.875rem !important;
}

/* ── Form spacing ────────────────────────────────────────────────────────── */
.auth-field {
    margin-bottom: 0.9rem !important;
}

/* ── Options row (remember-me + forgot) ──────────────────────────────────── */
.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -.25rem 0 1.1rem;
}

/* ── Primary button ──────────────────────────────────────────────────────── */
.auth-btn {
    height: 46px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 1.25rem !important;
    box-shadow: 0 1px 2px rgba(79,70,229,.12), 0 4px 14px rgba(79,70,229,.2) !important;
    transition: box-shadow .18s, transform .14s !important;
}

.auth-btn:hover:not(:disabled) {
    box-shadow: 0 2px 4px rgba(79,70,229,.18), 0 8px 22px rgba(79,70,229,.3) !important;
    transform: translateY(-1px);
}

/* ── OR divider ──────────────────────────────────────────────────────────── */
.auth-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.1rem;
}

.auth-or-line  { flex: 1; height: 1px; background: #e2e8f0; }
.auth-or-label { font-size: .7rem; font-weight: 600; letter-spacing: .07em; color: #94a3b8; white-space: nowrap; }

/* ── Social buttons ──────────────────────────────────────────────────────── */
.auth-social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-bottom: 1.5rem;
}

.auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    border-radius: 9px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e293b;
    transition: border-color .14s, box-shadow .14s, transform .12s;
    padding: 0 12px;
    white-space: nowrap;
}

.auth-social-btn:hover:not(:disabled) {
    border-color: #c7d2fe;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    transform: translateY(-1px);
}

.auth-social-btn:active:not(:disabled) { transform: none; }
.auth-social-btn:disabled { opacity: .5; cursor: not-allowed; }

.auth-social-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.auth-social-btn.fb { background: #1877F2; color: #fff; border-color: #1877F2; }
.auth-social-btn.ms { background: #00A4EF; color: #fff; border-color: #00A4EF; }
.auth-social-btn.tw { background: #000;    color: #fff; border-color: #000; }

.auth-social-btn.fb:hover:not(:disabled) { background: #1568d3; border-color: #1568d3; }
.auth-social-btn.ms:hover:not(:disabled) { background: #0093d6; border-color: #0093d6; }
.auth-social-btn.tw:hover:not(:disabled) { background: #1a1a1a; border-color: #1a1a1a; }

/* ── Footer switch link ──────────────────────────────────────────────────── */
.auth-switch {
    text-align: center;
    font-size: 0.84rem;
    color: #64748b;
    padding-top: .9rem;
    border-top: 1px solid #f1f5f9;
    margin-top: .1rem;
}

/* ── Availability badges ─────────────────────────────────────────────────── */
.avail-wrap { position: relative; }

.avail-badge {
    position: absolute;
    right: 14px;
    top: 28px;
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* ── Password strength ───────────────────────────────────────────────────── */
.pw-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -6px 0 .9rem;
    padding: 0 2px;
}

.pw-bars { display: flex; gap: 4px; flex: 1; }

.pw-bar {
    height: 3px;
    flex: 1;
    border-radius: 99px;
    background: #e2e8f0;
    transition: background .28s;
}

.pw-bar.pw-weak   { background: #f87171; }
.pw-bar.pw-fair   { background: #fb923c; }
.pw-bar.pw-good   { background: #60a5fa; }
.pw-bar.pw-strong { background: #4ade80; }

.pw-label { font-size: .72rem; font-weight: 600; min-width: 40px; text-align: right; }

/* ── Result / status screens ─────────────────────────────────────────────── */
.auth-result {
    text-align: center;
    padding: .5rem 0;
}

.auth-result-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.1rem;
}

.auth-result-icon.ok   { background: rgba(34,197,94,.1); }
.auth-result-icon.err  { background: rgba(239,68,68,.1); }
.auth-result-icon.info { background: rgba(99,102,241,.1); }

.auth-result h2 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.3px;
    margin: 0 0 .45rem;
}

.auth-result p {
    font-size: .875rem;
    color: #64748b;
    line-height: 1.65;
    margin: 0 0 1.4rem;
}

/* ── Loading screen ──────────────────────────────────────────────────────── */
.auth-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 0;
    color: #64748b;
    font-size: .875rem;
}