/* =========================================================================
   FG Academy — Auth Pages Stylesheet
   =========================================================================
   Styles specific to the guest auth layout (login, register, forgot/reset
   password, confirm password, verify email): a premium split-screen
   layout with a dark navy brand panel on the left and the form on the
   right. The password show/hide toggle lives in style.css instead, since
   it's shared with the Apply page's account-creation fields.
   ========================================================================= */

.auth-layout {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.auth-layout__panel {
    position: relative;
    display: none;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    background: linear-gradient(160deg, #020817 0%, #071331 35%, #0b1f4d 70%, #102a63 100%);
}

.auth-layout__glow {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 9999px;
    filter: blur(70px);
}

.auth-layout__glow--teal {
    top: -6rem;
    right: -5rem;
    height: 20rem;
    width: 20rem;
    background: radial-gradient(circle, rgba(45, 212, 191, .35), transparent 70%);
}

.auth-layout__glow--violet {
    bottom: -7rem;
    left: -6rem;
    height: 22rem;
    width: 22rem;
    background: radial-gradient(circle, rgba(124, 58, 237, .32), transparent 70%);
}

.auth-layout__headline {
    max-width: 22rem;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}

.auth-layout__subtext {
    margin-top: .75rem;
    max-width: 22rem;
    font-size: .875rem;
    line-height: 1.6;
    color: rgb(201 219 255);
}

.auth-layout__perks {
    margin-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

.auth-layout__perk {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #fff;
}

.auth-layout__perk-icon {
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: #fff;
    background: var(--perk-color, #0047ff);
    box-shadow: 0 6px 14px -4px var(--perk-color, #0047ff);
}

.auth-layout__perk-icon svg {
    height: .875rem;
    width: .875rem;
}

.auth-layout__perk-icon--blue {
    --perk-color: #0047ff;
}

.auth-layout__perk-icon--violet {
    --perk-color: #7c3aed;
}

.auth-layout__perk-icon--teal {
    --perk-color: #0d9488;
}

.auth-layout__footnote {
    font-size: .75rem;
    color: rgb(148 163 184);
}

.auth-layout__form {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: #f8fafc;
}

.auth-layout__mobile-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 2rem;
}

.auth-layout__back {
    display: block;
    margin-top: 1.5rem;
    text-align: center;
    font-size: .875rem;
    font-weight: 600;
    color: rgb(100 130 220);
}

.auth-layout__back:hover {
    color: rgb(0 71 255);
}

@media (min-width: 1024px) {
    .auth-layout {
        flex-direction: row;
    }

    .auth-layout__panel {
        display: flex;
        width: 44%;
    }

    .auth-layout__form {
        width: 56%;
    }

    .auth-layout__mobile-brand {
        display: none;
    }
}