/*
@font-face {
    font-family: 'Montserrat-Bold';
    src: url('../fonts/montserrat/Montserrat-Bold.woff2') format('woff2'), url('../fonts/montserrat/Montserrat-Bold.woff') format('woff'), url('../fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat-ExtraLight';
    src: url('../fonts/montserrat/Montserrat-ExtraLight.woff2') format('woff2'), url('../fonts/montserrat/Montserrat-ExtraLight.woff') format('woff'), url('../fonts/montserrat/Montserrat-ExtraLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat-Medium';
    src: url('../fonts/montserrat/Montserrat-Medium.woff2') format('woff2'), url('../fonts/montserrat/Montserrat-Medium.woff') format('woff'), url('../fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat-SemiBold';
    src: url('../fonts/montserrat/Montserrat-SemiBold.woff2') format('woff2'), url('../fonts/montserrat/Montserrat-SemiBold.woff') format('woff'), url('../fonts/montserrat/Montserrat-SemiBold.ttf') format('truetype');
}*/

/* DM Sans - Regular (400) */
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans/DMSans-Regular.woff2') format('woff2'), url('../fonts/DMSans/DMSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* DM Sans - Medium (500) */
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans/DMSans-Medium.woff2') format('woff2'), url('../fonts/DMSans/DMSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* DM Sans - SemiBold (600) */
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans/DMSans-SemiBold.woff2') format('woff2'), url('../fonts/DMSans/DMSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* DM Sans - Bold (700) */
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans/DMSans-Bold.woff2') format('woff2'), url('../fonts/DMSans/DMSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    /*font-family: 'Montserrat-Medium', Montserrat, sans-serif;*/
    font-family: 'DM Sans', sans-serif;
    font-weight: 400; /* Regular */
}

.main-login-page-bg {
    min-height: 100vh;
    width: 100%;
    background-color: #eef1f5;
    display: flex;
    justify-content: center;
    /* Center the card in the viewport. Because the wrapper uses min-height
       (not a fixed height) and keeps default overflow, it grows and the page
       scrolls normally if the card is ever taller than the screen, so the top
       is never clipped. */
    align-items: center;
    padding: 24px;
}

.login-main-container-bg {
    width: 100%;
    max-width: 1000px;
    min-height: 560px;
    background-color: #ffffff;
    border-radius: 28px;
    box-shadow: 0 20px 45px rgba(15, 42, 74, 0.18);
    display: flex;
    overflow: hidden;
}

/* ---------- LEFT PANEL ---------- */
.login-left-panel {
    flex: 1 1 46%;
    background: radial-gradient(120% 120% at 100% 100%, #1a3960 0%, #0f2a4a 62%);
    color: #ffffff;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.login-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .login-logo-row img {
        height: 34px;
        width: auto;
    }

.login-brand-name {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 22px;
    line-height: 1.1;
}

.login-brand-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600; /* SemiBold (600) */
    font-size: 10px;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.65);
}

.welcome-text {
    font-size: 35px;
    /* font-size: 40px;*/
    line-height: 1.15;
    /*color: #ffffff;*/
    color: var(--color-text-white);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700; /* Bold 700 */
    margin: 0 0 16px 0;
}

.hello-doc-pro-text {
    font-size: 16px;
    color: rgba(var(--color-text-white-rgb), 0.6);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400; /* Regular 500 */
    line-height: 1.5;
    margin: 0;
}

.login-divider {
    border: none;
    border-top: 1px solid rgba(var(--color-text-white-rgb), 0.18); /*rgba(255,255,255,0.18);*/
    margin: 28px 0 20px 0;
}

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

    .login-feature-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: rgba(var(--color-text-white-rgb), 0.8);
        font-family: 'DM Sans', sans-serif;
        font-weight: 400; /* Regular 400 */
        margin-bottom: 12px;
    }

    .login-feature-list i {
        color: #d9a441;
        font-size: 13px;
    }

/* ---------- RIGHT PANEL ---------- */
.login-form-container {
    flex: 1 1 54%;
    background-color: #ffffff;
    padding: 56px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .login-form-container h3 {
        color: #0f2a4a;
        font-family: 'DM Sans', sans-serif;
        font-weight: 700; /* Bold 700 */
        /*font-weight: bold;*/
        font-size: 30px;
        margin: 0 0 10px 0;
    }

.login-form-subtext {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 28px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400; /* Regular 400 */
}

.form-group {
    margin-bottom: 20px;
    position: relative;
}

    .form-group label {
        display: block;
        font-size: 13px;
        color: #1f2937;
        /*font-family: 'Montserrat-SemiBold';*/
        font-family: 'DM Sans', sans-serif;
        font-weight: 700; /* SemiBold 600 */
        margin-bottom: 6px;
    }

.form-control {
    width: 100%;
    border-radius: 12px;
    background-color: #ffffff;
    color: #1f2937;
    height: auto !important;
    border: 1px solid #dfe3e8;
    padding: 12px 14px;
    font-size: 14px;
    /*    font-family: 'Montserrat-Medium', Montserrat-Medium;*/
    font-family: 'DM Sans', sans-serif;
    font-weight: 500; /* Medium 500 */
    font-weight: 400;
}

    .form-control::placeholder {
        color: #9aa2ad;
    }

    .form-control:focus {
        outline: none;
        border-color: #5db1e6;
        box-shadow: 0 0 0 3px rgba(93,177,230,0.15);
    }

.password-toggle-text {
    position: absolute;
    right: 14px;
    top: 40px;
    cursor: pointer;
    color: #5b6472;
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600; /* SemiBold 600 */
    /*font-family: 'Montserrat-SemiBold';*/
    user-select: none;
}

.forgot-password-row {
    text-align: right;
    margin-bottom: 24px;
}

.hyperlinktext {
    font-size: 13px;
    color: #0f2a4a;
    text-decoration: none;
    /*font-family: 'Montserrat-SemiBold';*/
    font-family: 'DM Sans', sans-serif;
    font-weight: 700; /* SemiBold 600 */
}

    .hyperlinktext:hover {
        text-decoration: none;
        color: var(--color-secondary);
    }

.btn {
    width: 100% !important;
}

.btn-primary {
    width: 100% !important;
    border: none !important;
    border-radius: 16px;
    border: 1px solid rgba(10, 14, 21, 0.2) !important; /* #0A0E15 @ 20% */
    background: radial-gradient(140% 120% at 50% -20%, rgba(0, 32, 73, 0.72) 0%, #002049 100%) !important;
    color: white;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    padding: 14px;
    font-size: 14px;
    height: auto !important;
    transition: background 0.3s ease;
}

    .btn-primary:hover {
        background-image: linear-gradient(to right, #0f2a4a, #10223a) !important;
    }

    .btn-primary i {
        margin-left: 6px;
    }

@media (max-width: 900px) {
    .login-main-container-bg {
        flex-direction: column;
        min-height: auto;
    }

    .login-left-panel, .login-form-container {
        padding: 36px 28px;
    }

    .welcome-text {
        font-size: 27px;
    }
}

/* Narrow desktop windows / small laptops that still show the two columns.
   Trims the generous side padding so the form never feels cramped. */
@media (min-width: 901px) and (max-width: 1100px) {
    .login-left-panel {
        padding: 44px 36px;
    }

    .login-form-container {
        padding: 48px 44px;
    }
}

/* SHORT viewports — the real cause of the "pressed / squashed" look.
   On shorter screens (1366x768 laptops, 1080p at 125%/150% Windows scaling,
   non-maximised windows) the card must keep its DESIGNED PROPORTION, so we
   scale width and height DOWN TOGETHER instead of only collapsing the height.
   Vertical padding is trimmed at each step so the content stays balanced. */
@media (max-height: 840px) {
    .login-main-container-bg {
        max-width: 940px;
        min-height: 520px;
    }

    .login-left-panel {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .login-form-container {
        padding-top: 44px;
        padding-bottom: 44px;
    }
}

@media (max-height: 720px) {
    .login-main-container-bg {
        max-width: 880px;
        min-height: 470px;
    }

    .main-login-page-bg {
        padding: 18px;
    }

    .login-left-panel {
        padding: 32px 36px;
    }

    .login-form-container {
        padding: 36px 44px;
    }
}

@media (max-height: 600px) {
    .login-main-container-bg {
        max-width: 820px;
        min-height: 0; /* very short screens: fit content, wrapper scrolls if needed */
    }

    .main-login-page-bg {
        padding: 14px;
    }

    .login-left-panel {
        padding: 26px 30px;
    }

    .login-form-container {
        padding: 30px 40px;
    }
}

/* LARGE screens — keep the card substantial so it doesn't look small or lost
   in the middle of big / high-resolution monitors. These scale the card UP,
   preserving the same proportion. They require BOTH a wide AND a tall viewport
   so they never fight the short-screen rules above (which need max-height). */
@media (min-width: 1500px) and (min-height: 860px) {
    .login-main-container-bg {
        max-width: 1150px;
        min-height: 645px;
    }

    .login-logo-row img {
        height: 40px;
        width: auto;
    }

    .login-left-panel {
        padding: 56px 52px;
    }

    .login-form-container {
        padding: 62px 68px;
    }
}

@media (min-width: 1900px) and (min-height: 1000px) {
    .login-main-container-bg {
        max-width: 1280px;
        min-height: 710px;
    }

    .login-logo-row img {
        height: 50px;
        width: auto;
    }

    .login-left-panel {
        padding: 64px 60px;
    }

    .login-form-container {
        padding: 72px 80px;
    }

    .welcome-text {
        font-size: 38px;
    }

    .login-form-container h3 {
        font-size: 32px;
    }
}

@media (min-width: 2400px) and (min-height: 1300px) {
    .login-main-container-bg {
        max-width: 1440px;
        min-height: 800px;
    }

    .welcome-text {
        font-size: 42px;
    }

    .login-form-container h3 {
        font-size: 36px;
    }
}

/* ---------- OTP VERIFICATION SCREEN ---------- */
.otp-boxes {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
}

.otp-box {
    width: 56px;
    height: 64px;
    border-radius: 12px;
    border: 1px solid #dfe3e8;
    text-align: center;
    font-size: 22px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    color: #1f2937;
    background-color: #ffffff;
    padding: 0;
}

    .otp-box:focus {
        outline: none;
        border-color: #5db1e6;
        box-shadow: 0 0 0 3px rgba(93,177,230,0.15);
    }

    .otp-box.otp-box-error {
        border-color: #e80c4d;
    }

.otp-resend-row {
    font-size: 13px;
    color: #6b7280;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    margin-top: 18px;
}

    .otp-resend-row .hyperlinktext {
        margin-left: 4px;
        font-size: 13px;
    }

.otp-resend-confirmation {
    display: none;
    color: rgba(var(--color-text-dark-blue-rgb), 0.5); /*var(rgb(--color-text-dark-blue-rgb),0.5);*/
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    margin-top: 10px;
}

.otp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-size: 14px;
    color: #0f2a4a;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    text-decoration: underline;
}

    .otp-back-link:hover {
        color: #1051f4;
    }

    .otp-back-link i {
        font-size: 13px;
    }

@media (max-width: 500px) {
    .otp-box {
        width: 42px;
        height: 52px;
        font-size: 18px;
    }
}
/* ---------- VALIDATION / ERROR MESSAGES ---------- */
.validation-summary-errors {
    background-color: #fdecea;
    border: 1px solid #f5b5ab;
    color: #b3261e;
    border-radius: 12px;
    padding: 14px 16px 14px 44px;
    margin-bottom: 22px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    background-repeat: no-repeat;
    background-position: 14px 15px;
    background-size: 18px 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e02424' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='7.5' x2='12' y2='13'/%3E%3Ccircle cx='12' cy='16.3' r='0.9' fill='%23e02424' stroke='none'/%3E%3C/svg%3E");
}

    .validation-summary-errors ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .validation-summary-errors li {
        margin: 0;
    }

        .validation-summary-errors li + li {
            margin-top: 4px;
        }

.field-validation-error {
    display: block;
    color: #e02424;
    font-size: 12px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    margin-top: 6px;
}

.input-validation-error {
    border-color: #e02424 !important;
}

    .input-validation-error:focus {
        border-color: #e02424 !important;
        box-shadow: 0 0 0 3px rgba(224,36,36,0.12) !important;
    }


/* ---------- PASSWORD STRENGTH CHECKLIST (Set/Reset Password) ---------- */
.password-checklist {
    list-style: none;
    padding: 0;
    margin: 4px 0 24px 0;
}

.password-checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    color: #9aa2ad;
    margin-bottom: 10px;
    transition: color 0.2s ease;
}

    .password-checklist-item:last-child {
        margin-bottom: 0;
    }

    .password-checklist-item .checklist-icon {
        width: 18px;
        height: 18px;
        min-width: 18px;
        border-radius: 50%;
        border: 1.5px solid #d7dbe0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: border-color 0.2s ease;
    }

        .password-checklist-item .checklist-icon svg {
            opacity: 0;
            transition: opacity 0.2s ease;
        }

    .password-checklist-item.valid {
        color: #1f2937;
    }

        .password-checklist-item.valid .checklist-icon {
            border-color: #12b3a8;
        }

            .password-checklist-item.valid .checklist-icon svg {
                opacity: 1;
            }



/* ---------- EXPIRED / ERROR STATE PAGE (e.g. Link Expired) ---------- */
.state-page {
    text-align: center;
}

.state-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
    overflow: hidden;
}

    .state-icon svg {
        width: 28px !important;
        height: 28px !important;
        flex-shrink: 0;
    }

.state-icon-error {
    background-color: #fdecea;
}

.state-icon-success {
    background-color: #e5f9f4;
}

.state-page h3 {
    text-align: center;
}

.state-page .login-form-subtext {
    text-align: center;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

.state-actions {
    margin-top: 28px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

    .state-actions .btn-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

.state-secondary-link {
    display: block;
    margin-top: 16px;
    text-align: center;
}