@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins-regular-webfont.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins-medium-webfont.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins-bold-webfont.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html body,
.mainbg,
.mainbg * {
    font-family: 'Poppins', sans-serif !important;
}

/* Preserve icon fonts after applying Poppins to the authentication UI. */
.mainbg .fa,
.mainbg .fas {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.mainbg .far {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 400 !important;
}

.mainbg .fab {
    font-family: "Font Awesome 5 Brands" !important;
}

/* Complete left-side artwork replacing the former individual promo elements. */
.login-promo-image {
    display: block;
    width: min(100%, 560px);
    height: auto;
    max-height: calc(100vh - 72px);
    object-fit: contain;
    filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.18));
}

@media only screen and (max-width: 1280px) {
    .login-promo-image {
        width: min(100%, 500px);
    }
}

@media only screen and (max-width: 1024px) {
    .login-promo-image {
        width: min(100%, 430px);
    }
}

/* Keep the desktop composition stable when browser zoom changes the CSS viewport. */
@media only screen and (min-width: 680px) {
    .mainbg {
        position: fixed;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .login-split-wrapper {
        position: absolute;
        inset: 0;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(300px, 1.15fr) minmax(350px, 0.85fr);
    }

    .login-right-panel,
    .login-left-panel {
        width: auto;
        min-width: 0;
        height: 100vh;
        height: 100dvh;
        padding: clamp(20px, 4vw, 56px);
        display: flex;
        order: initial;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .login-right-panel {
        justify-content: center;
    }

    .login-left-panel {
        justify-content: flex-start;
    }

    .login-right-inner {
        max-width: 560px;
    }

    .login-left-inner {
        max-width: 500px;
    }

    .login-promo-image {
        width: min(100%, 560px);
        max-height: min(78dvh, 620px);
    }

    .login-card {
        width: 100%;
        padding: clamp(22px, 3.2vh, 36px) clamp(24px, 2.8vw, 36px);
        border-radius: clamp(18px, 2vw, 26px);
        animation: none;
        box-sizing: border-box;
    }
}

@media only screen and (min-width: 680px) and (max-height: 760px) {
    .login-left-panel,
    .login-right-panel {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .brand-logo-area {
        margin-bottom: 12px;
    }

    .brand-logo-img {
        height: 48px;
    }

    .welcome-heading {
        margin-bottom: 3px;
        font-size: 20px;
    }

    .welcome-subtext {
        margin-bottom: 16px;
        font-size: 12px;
    }

    .new-form-group {
        margin-bottom: 11px;
    }

    .new-form-input {
        height: 42px;
    }

    .login-meta-row {
        margin: 5px 0 15px;
    }

    .btn-login-main,
    .btn-signup-link {
        height: 43px;
    }

    .login-footer-note {
        margin-top: 10px;
    }
}

@media only screen and (max-width: 679px) {
    .login-right-panel {
        display: none;
    }

    .login-left-panel {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 24px 16px;
    }

    .login-card {
        animation: none;
    }
}

/* Shared secondary authentication form styling. */
.auth-form-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-form-actions .btn-login-main {
    margin-bottom: 12px;
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #D32F2F;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.auth-back-link:hover,
.auth-back-link:focus {
    color: #BA2929;
    text-decoration: underline;
}

.new-form-input:disabled {
    color: #6f7680;
    background: rgba(243, 244, 246, 0.9);
    border-color: #e3e5e8;
    cursor: not-allowed;
    opacity: 1;
}

.password-strength-message {
    margin-top: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    line-height: 1.4;
}