@import url('/login/premium-login.css');

/* =========================================================
   LOGIN BUTTON CONSISTENCY
   Keep the desktop login button visually consistent
   with the mobile login button.
========================================================= */

.login-button {
    min-height: 46px;
    padding: 1rem;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
}

/* The large duplicate Zenith title on the login hero is unnecessary
   because the academy branding is already present in the navbar. */
.login-title {
    display: none !important;
}

/* =========================================================
   MOBILE LOGIN LAYOUT FIX
========================================================= */

@media (max-width: 900px) {
    html,
    body {
        min-height: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .login {
        width: 100%;
        height: auto;
        min-height: 100dvh;
        max-height: none;
        overflow: visible;
        padding: 74px .7rem 1rem;
    }

    .login-content {
        width: min(100%, 34rem);
        height: auto;
        max-height: none;
        margin: 0 auto;
        gap: .55rem;
        overflow: visible;
    }

    /* Keep the title block fully visible at the top. */
    .login-info {
        order: 1;
        padding: 0;
        margin: 0;
        flex: 0 0 auto;
    }

    .login-info .login-label {
        margin-bottom: .35rem;
        font-size: .5rem;
        letter-spacing: .2rem;
    }

    .login-info h2 {
        margin: 0;
        font-size: clamp(1.65rem, 8vw, 2.35rem);
        line-height: .86;
        letter-spacing: .015rem;
    }

    .login-info p {
        max-width: 20rem;
        margin: .5rem auto 0;
        font-size: .58rem;
        line-height: 1.35;
    }

    .login-info p::after {
        width: 2rem;
        height: 1px;
        margin: .45rem auto 0;
    }

    .divider {
        order: 2;
        width: 3rem;
        height: 1px;
        min-height: 1px;
        margin: .05rem auto;
    }

    .login-card {
        order: 3;
        width: 100%;
        padding: .85rem;
        border-radius: 9px;
    }

    .login-card-header {
        margin-bottom: .8rem;
    }

    .login-card-header h2 {
        font-size: 1rem;
        letter-spacing: .15rem;
    }

    .login-card-header p {
        margin-top: .25rem;
        font-size: .6rem;
    }

    .login-form .input-group {
        margin-bottom: .55rem;
    }

    .login-form .input-group label {
        margin-bottom: .25rem;
        font-size: .5rem;
        letter-spacing: .12rem;
    }

    .login-form .input-group input {
        height: 2.35rem;
        padding: 0 .7rem;
        font-size: .72rem;
    }

    .login-options {
        margin: .1rem 0 .65rem;
        font-size: .56rem;
    }

    .login-card .login-button {
        min-height: 2.45rem;
        padding: .65rem;
        font-size: .59rem;
        letter-spacing: .12rem;
    }

    .login-footer {
        margin-top: .75rem;
        padding-top: .7rem;
    }

    .registration-prompt {
        margin-bottom: .55rem;
    }

    .registration-prompt-label {
        font-size: .53rem;
        letter-spacing: .12rem;
    }

    .registration-prompt p {
        margin-top: .2rem;
        font-size: .53rem;
        line-height: 1.35;
    }

    .registration-option {
        padding: .38rem 0;
    }

    .registration-option small {
        font-size: .53rem;
    }

    .registration-option a {
        font-size: .54rem;
        letter-spacing: .055rem;
    }
}

@media (max-width: 560px) {
    .login {
        padding: 72px .5rem .7rem;
    }

    .login-content {
        gap: .45rem;
    }

    .login-info h2 {
        font-size: clamp(1.55rem, 8.5vw, 2.1rem);
    }

    .login-info p {
        font-size: .56rem;
    }

    .login-card {
        padding: .75rem;
    }

    .login-card-header {
        margin-bottom: .65rem;
    }

    .login-card-header h2 {
        font-size: .95rem;
    }

    .login-form .input-group input {
        height: 2.25rem;
    }

    .login-card .login-button {
        min-height: 2.3rem;
    }

    .login-footer {
        margin-top: .6rem;
        padding-top: .55rem;
    }

    .registration-option {
        padding: .32rem 0;
    }
}

@media (max-width: 560px) and (max-height: 760px) {
    .login {
        padding-top: 68px;
    }

    .login-content {
        gap: .35rem;
    }

    .login-info .login-label {
        margin-bottom: .2rem;
        font-size: .46rem;
    }

    .login-info h2 {
        font-size: 1.5rem;
        line-height: .84;
    }

    .login-info p {
        margin-top: .35rem;
        font-size: .52rem;
    }

    .login-info p::after {
        margin-top: .3rem;
    }

    .login-card {
        padding: .65rem;
    }

    .login-card-header {
        margin-bottom: .5rem;
    }

    .login-card-header h2 {
        font-size: .88rem;
    }

    .login-card-header p {
        font-size: .54rem;
    }

    .login-form .input-group {
        margin-bottom: .42rem;
    }

    .login-form .input-group input {
        height: 2.1rem;
    }

    .login-options {
        margin-bottom: .5rem;
    }

    .login-card .login-button {
        min-height: 2.15rem;
    }

    .login-footer {
        margin-top: .45rem;
        padding-top: .4rem;
    }

    .registration-prompt {
        margin-bottom: .35rem;
    }

    .registration-prompt p {
        display: none;
    }

    .registration-option {
        padding: .25rem 0;
    }
}