/* ===== LOGIN PAGE ===== */
/* The left branding panel is sticky (see .login-left below) so it stays put
   while the form column scrolls, then travels with the section once the form
   reaches its end. flex-start is required for that - stretch would make the
   panel as tall as the section and leave it nothing to stick within.
   68px is the height of the sticky navbar, so the panel parks just beneath it. */
.login-section {
    min-height: calc(100vh - 68px);
    display: flex;
    align-items: flex-start;
}

/* ===== LEFT SECTION (BRANDING) ===== */
/* Uses the site's Trippal navy (--trippal-dark / --trippal-navy) rather than the
   old #001f4d / #003d7a blues, so the panel matches the about/contact/blog pages. */
.login-left {
    flex: 1;
    background: #0A1556;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    position: sticky;
    top: 68px;
    /* min-height, not height: the panel fills the visible area but is allowed to
       grow when its content is taller than the viewport, otherwise the pill and
       the last feature item get clipped on shorter screens. */
    min-height: calc(100vh - 68px);
}

.login-left-decoration {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: rgba(255, 127, 20, 0.1);
    border-radius: 50%;
}

.login-left-content {
    position: relative;
    z-index: 2;
    padding: 70px;
}

/* Weight 600 and --trippal-white, matching .about-hero-title / .story-title
   on the other pages. */
.login-left-title {
    font-size: 42px;
    font-weight: 600;
    line-height: 1.3;
    color: #FFFBF8;
    margin-bottom: 20px;
    font-family: 'Sora', sans-serif;
}

/* 75% white, the same muted-on-navy tone used by .mv-desc on the about page. */
.login-left-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #F9F6F1CC;
    margin-bottom: 30px;
    opacity: 0.9;
    line-height: 1.6;
}

.login-left-features {
    margin-bottom: 30px;
}

.login-left-features-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
}

.login-left-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.login-left-feature-item {
    margin-bottom: 10px;
    font-size: 14px;
}

.login-left-feature-item:last-child {
    margin-bottom: 0;
}

.login-left-feature-icon {
    color: #FF7F14;
    margin-right: 10px;
}

.login-left-footer {
    font-size: 12px;
    opacity: 0.7;
    border: 1px solid #FF7F1466;
    border-radius: 25px;
    position: relative;
    z-index: 2;
}

/* ===== RIGHT SECTION (FORM) ===== */
.login-right {
    flex: 1;
    background: white;
    padding: 60px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-right-inner {
    width: 100%;
    max-width: 400px;
}

/* ===== RESPONSIVE ===== */
/* Tablet: 768px - 991px - keep both sections */
@media (max-width: 991px) {
    .login-left {
        padding: 30px;
    }

    .login-left-title {
        font-size: 32px;
    }

    .login-right {
        padding: 40px 30px;
    }
}

/* Mobile: below 768px - hide left section, full-width form */
@media (max-width: 767px) {
    .login-section {
        min-height: calc(100vh - 60px);
    }

    .login-left {
        display: none;
    }

    .login-right {
        flex: 1;
        width: 100%;
        padding: 30px 20px;
    }

    .login-right-inner {
        max-width: 100%;
    }
}

/* Small Mobile: below 576px - tighter padding */
@media (max-width: 576px) {
    .login-section {
        min-height: calc(100vh - 50px);
    }

    .login-right {
        padding: 24px 16px;
    }
}