@import url(../base/common.css);
@import url(../base/form.css);

/* SIZE/OVERLAP FIX: the page used body{overflow:hidden} + a fixed 90vh
   centered wrap. The card is taller than 90vh on common screens, so the
   centered overflow pushed the top of the card up UNDER the sticky header
   (and it could never be scrolled back into view). The page now flows
   normally below the header and scrolls when needed. */

/* ── Layout ──────────────────────────────────────────────────────── */

.login-page-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    /* fill the viewport minus the sticky header, but grow when needed */
    min-height: calc(100vh - 90px);
    padding: 2rem 0;
}

.mobile-signup-link { display: none; }

/* CENTERING FIX: the promo panel (.login-right) is no longer in the markup,
   but the container was still a 2-column grid — so the form card sat in the
   left half and read as off-centre, with rounding on its left edge only.
   Single column + full rounding + a slightly wider card on desktop. */
.login-container {
    width: 90%;
    max-width: 560px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
    z-index: 10;
    animation: fadeInUp 0.8s;
}

.login-left {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    padding: 2.5rem 2.5rem;
    border-radius: var(--radius-xl);
    border: var(--glass-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-right {
    background: var(--overlay-lg);
    backdrop-filter: var(--glass-blur);
    padding: 2.5rem 2.5rem;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    border: var(--glass-border);
    border-left: 1px solid var(--overlay-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* ── Text ────────────────────────────────────────────────────────── */

.logo {
    font-size: 1.9rem;
    font-weight: bold;
    background: linear-gradient(45deg, #fff, var(--color-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.welcome-text {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.subtitle {
    color: var(--color-text-muted);
    margin-bottom: 1.75rem;
    font-size: 1rem;
}

/* ── Password toggle ─────────────────────────────────────────────── */

.password-container { position: relative; }

.toggle-password {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
}

.toggle-password:hover { color: var(--color-gold); }

/* Eye / eye-with-slash icon swap */
.toggle-password .icon-eye-off { display: none; }
.toggle-password.is-visible .icon-eye { display: none; }
.toggle-password.is-visible .icon-eye-off { display: block; }

/* ── Remember / forgot ───────────────────────────────────────────── */

.remember-forgot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.remember-me input { width: 18px; height: 18px; cursor: pointer; }

.forgot-password {
    color: var(--color-gold);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.forgot-password:hover { text-decoration: underline; }

/* ── Login button ────────────────────────────────────────────────── */

.btn-login {
    width: 100%;
    padding: 1.1rem;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-primary);
    margin-bottom: 1.5rem;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-lg);
}

/* ── Divider ─────────────────────────────────────────────────────── */

.divider {
    text-align: center;
    margin: 1.5rem 0;
    position: relative;
}

.divider::before, .divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: var(--overlay-xl);
}

.divider::before { left: 0; }
.divider::after  { right: 0; }

.divider span {
    background: var(--overlay-sm);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* ── Social login ────────────────────────────────────────────────── */

.social-login { display: flex; gap: 1rem; }

.btn-social {
    flex: 1;
    padding: 0.9rem;
    border: var(--glass-border);
    background: var(--overlay-sm);
    color: white;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-social:hover {
    background: var(--overlay-lg);
    transform: translateY(-2px);
    border-color: var(--overlay-xl);
}

/* ── Promo panel ─────────────────────────────────────────────────── */

.promo-icon { font-size: 3.5rem; margin-bottom: 1.25rem; }

.promo-title {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.promo-description {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

.features-list {
    text-align: left;
    margin-bottom: 2rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.8rem;
    background: var(--overlay-sm);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.feature-item:hover {
    background: var(--overlay-md);
    transform: translateX(5px);
}

.feature-icon { font-size: 1.8rem; flex-shrink: 0; }

.btn-signup {
    padding: 1rem 3rem;
    background: var(--overlay-lg);
    color: white;
    border: 2px solid var(--overlay-xl);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition);
    place-self: anchor-center;
}

.btn-signup:hover {
    background: var(--overlay-xl);
    transform: translateY(-2px);
    border-color: var(--color-gold);
}

/* RESPONSIVE FIX: on mobile the welcome/promo panel is hidden entirely,
   the form panel gets full rounding, and the page becomes scrollable
   (body overflow:hidden + fixed 90vh made the form unreachable). */
@media (max-width: 968px) {
    .login-page-wrap {
        min-height: calc(100vh - 90px);
        padding: 1.5rem 0;
    }

    .login-container {
        max-width: 500px;
    }

    .login-left {
        padding: 2.5rem 1.5rem;
    }

    .login-right { display: none; }

    .mobile-signup-link {
        display: block;
        text-align: center;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--overlay-md);
        color: var(--color-text-muted);
    }

    .mobile-signup-link a {
        color: var(--color-gold);
        text-decoration: none;
        font-weight: 600;
    }

    .mobile-signup-link a:hover { text-decoration: underline; }

    .logo { font-size: 1.8rem; }
    .welcome-text { font-size: 1.6rem; }
}