/* ==========================================================================
   auth.css — login / registration screen
   Desktop: sliding two-panel card.  Mobile: single stacked card with a toggle.
   ========================================================================== */

body.auth {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px;
    background:
        radial-gradient(60% 70% at 15% 10%, rgba(37,99,235,.35), transparent 60%),
        radial-gradient(55% 65% at 85% 85%, rgba(14,165,233,.28), transparent 65%),
        linear-gradient(135deg, #0b1224 0%, #131f3d 55%, #0b1224 100%);
}

.auth-shell { width: 100%; max-width: 960px; }

.auth-brand {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-bottom: 20px;
}
.auth-brand .brand-name { color: #fff; }
.auth-brand .brand-tag { color: #94a3b8; }

.auth-card {
    position: relative; overflow: hidden;
    background: var(--card); border-radius: 24px; box-shadow: var(--shadow-lg);
    min-height: 560px;
}

/* ---- form panels ---- */

.auth-panel {
    position: absolute; top: 0; height: 100%; width: 50%; left: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px; text-align: center;
    transition: transform .6s ease-in-out, opacity .5s ease-in-out;
}
.auth-panel form { width: 100%; max-width: 330px; text-align: left; }
.auth-panel h2 { font-size: 27px; margin-bottom: 6px; text-align: center; }
.auth-panel .sub { font-size: 13.5px; color: var(--muted); margin-bottom: 22px; text-align: center; }

.auth-panel.register { opacity: 0; z-index: 1; pointer-events: none; }
.auth-panel.login    { opacity: 1; z-index: 2; }

.auth-card.show-register .auth-panel.login    { transform: translateX(-100%); opacity: 0; pointer-events: none; }
.auth-card.show-register .auth-panel.register { transform: translateX(-100%); opacity: 1; z-index: 5; pointer-events: auto; }

/* ---- sliding cover ---- */

.auth-cover {
    position: absolute; top: 0; left: 0; width: 50%; height: 100%; z-index: 100;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    border-radius: 0 150px 150px 0;
    transition: left .6s ease-in-out, width .6s ease-in-out, border-radius .6s ease-in-out;
}
.auth-cover.covering   { left: 0; width: 100%; border-radius: 24px; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
.auth-cover.parked-right { left: 50%; width: 50%; border-radius: 150px 0 0 150px; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
.auth-cover.parked-left  { left: 0;   width: 50%; border-radius: 0 150px 150px 0;  background: linear-gradient(135deg, #203159 0%, #284fb9 100%); }

.auth-overlay {
    position: absolute; top: 0; height: 100%; width: 50%; z-index: 110;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px; text-align: center; color: #fff;
    opacity: 0; pointer-events: none;
    transition: opacity .6s ease-in-out, transform .6s ease-in-out;
}
.auth-overlay.for-login    { left: 0;   transform: translateX(-20px); }
.auth-overlay.for-register { left: 50%; transform: translateX(20px); }
.auth-overlay.visible { opacity: 1; transform: translateX(0); pointer-events: auto; }

.auth-overlay h2 { color: #fff; font-size: 30px; margin-bottom: 8px; }
.auth-overlay p { font-size: 13.5px; color: #dbeafe; margin-bottom: 24px; }
.auth-overlay .btn {
    background: transparent; border: 2px solid #fff; color: #fff;
    border-radius: var(--radius-pill); padding: 10px 40px;
}
.auth-overlay .btn:hover { background: #fff; color: #1e3a8a; }

/* ---- shared bits ---- */

.auth-switch { display: none; text-align: center; font-size: 14px; color: var(--muted); margin-top: 18px; }
.auth-switch button { color: var(--blue); font-weight: 600; }

.auth-note { text-align: center; color: #94a3b8; font-size: 12.5px; margin-top: 18px; }

/* ---------- mobile: one stacked card, no sliding ---------- */

@media (max-width: 860px) {
    .auth-card { min-height: 0; padding: 28px 22px; border-radius: 18px; }
    .auth-cover, .auth-overlay { display: none; }

    .auth-panel {
        position: static; width: 100%; height: auto; padding: 0;
        transform: none !important; transition: none;
    }
    .auth-panel.register { display: none; opacity: 1; pointer-events: auto; }
    .auth-panel.login    { display: flex; }

    .auth-card.show-register .auth-panel.register { display: flex; opacity: 1; }
    .auth-card.show-register .auth-panel.login    { display: none; }

    .auth-panel form { max-width: 100%; }
    .auth-switch { display: block; }
}

/* ui.js adds .has-footer to every page — keep the auth screen centred anyway */
body.auth.has-footer {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}