*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: #fff;
    overflow: hidden;
}

/* ─── WRAPPER ────────────────────────────────── */
.auth-wrapper {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* ─── LEFT PANEL - FIXED ─────────────────────── */
.auth-left {
    position: fixed;
    left: 0;
    top: 0;
    width: 50%;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    padding: 24px;
    z-index: 1;
}

    .auth-left .auth-bgphoto-container {
        position: absolute;
        inset: 24px;
        width: calc(100% - 48px);
        height: calc(100% - 48px);
        border-radius: 24px;
        overflow: hidden;
    }

    .auth-left .bg-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Show full width of image, position from top */
        object-position: top center;
        border-radius: 24px;
    }

    .auth-left .panel-inner {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
        padding: 48px;
    }

    .auth-left .bottom-copy {
        color: #fff;
    }

        .auth-left .bottom-copy h2 {
            font-size: clamp(1.4rem, 2.2vw, 2rem);
            font-weight: 700;
            line-height: 1.35;
            margin: 0;
            max-width: 500px;
            text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
            color: #fff;
        }

        .auth-left .bottom-copy p {
            display: none;
        }

    .auth-left .feature-pills {
        display: none;
    }

/* ─── RIGHT PANEL - SCROLLABLE ───────────────── */
.auth-right {
    position: relative;
    margin-left: 50%; /* Push right panel to the right of fixed left panel */
    width: 50%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    /* SCROLLABLE - this is the only thing that scrolls */
    overflow-y: auto;
    overflow-x: hidden;
}

    /* Logo positioned in top-right area */
    .auth-right .auth-logo-grp {
        width: 100%;
        background: #fff;
        padding: 20px 40px;
        display: flex;
        justify-content: flex-end; /* Logo on the right */
        align-items: center;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .auth-right .logo-wrap {
        display: inline-block;
    }

        .auth-right .logo-wrap img {
            height: 60px;
            max-width: 100%;
            object-fit: contain;
        }

/* Form container - uses full width */
.auth-form-card {
    background: #fff;
    box-shadow: unset;
    padding: 0 40px 48px;
    width: 100%;
    flex: 1;
}

    .auth-form-card .form-label {
        font-size: 14px;
    }

    .auth-form-card .form-control {
        font-size: 14px;
    }

    .auth-form-card h1 {
        font-size: clamp(1.5rem, 2.5vw, 2rem);
        margin-bottom: 8px;
    }

    .auth-form-card .fs-4 {
        font-size: clamp(0.875rem, 1.2vw, 1rem) !important;
    }

/* ─── EXTRA LARGE SCREENS (≥ 1600px) ─────────── */
@media (min-width: 1600px) {
    .auth-left {
        padding: 32px;
    }

        .auth-left .auth-bgphoto-container {
            inset: 32px;
            width: calc(100% - 64px);
            height: calc(100% - 64px);
        }

    .auth-right .auth-logo-grp {
        padding: 28px 60px;
    }

    .auth-form-card {
        padding: 0 60px 56px;
    }

    .auth-right .logo-wrap img {
        height: 70px;
    }
}

/* ─── LARGE SCREENS (1400px - 1599px) ────────── */
@media (min-width: 1400px) and (max-width: 1599px) {
    .auth-right .auth-logo-grp {
        padding: 24px 50px;
    }

    .auth-form-card {
        padding: 0 50px 52px;
    }

    .auth-right .logo-wrap img {
        height: 65px;
    }
}

/* ─── MEDIUM-LARGE SCREENS (1200px - 1399px) ── */
@media (min-width: 1200px) and (max-width: 1399px) {
    .auth-right .auth-logo-grp {
        padding: 20px 44px;
    }

    .auth-form-card {
        padding: 0 44px 48px;
    }

    .auth-right .logo-wrap img {
        height: 60px;
    }
}

/* ─── MEDIUM SCREENS (992px - 1199px) ────────── */
@media (min-width: 992px) and (max-width: 1199px) {
    .auth-left {
        width: 45%;
        padding: 20px;
    }

        .auth-left .auth-bgphoto-container {
            inset: 20px;
            width: calc(100% - 40px);
            height: calc(100% - 40px);
        }

        .auth-left .bg-photo {
            border-radius: 20px;
        }

    .auth-right {
        margin-left: 45%;
        width: 55%;
    }

        .auth-right .auth-logo-grp {
            padding: 16px 36px;
        }

    .auth-form-card {
        padding: 0 36px 40px;
    }

    .auth-right .logo-wrap img {
        height: 55px;
    }
}

/* ─── TABLET / MOBILE (≤ 991px) ──────────────── */
@media (max-width: 991px) {
    body {
        overflow: auto; /* Allow body scroll on mobile */
    }

    .auth-wrapper {
        flex-direction: column !important;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .auth-left {
        position: relative; /* Not fixed on mobile */
        width: 100% !important;
        height: 280px !important;
        flex-shrink: 0;
        padding: 16px;
    }

        .auth-left .auth-bgphoto-container {
            inset: 16px;
            width: calc(100% - 32px);
            height: calc(100% - 32px);
        }

        .auth-left .bg-photo {
            border-radius: 16px;
            object-position: center top;
        }

        .auth-left .panel-inner {
            padding: 24px;
            justify-content: flex-end;
        }

        .auth-left .bottom-copy h2 {
            font-size: 1.25rem;
        }

        .auth-left .bottom-copy .badge-pill {
            display: none;
        }

    .auth-right {
        position: relative;
        margin-left: 0;
        width: 100% !important;
        height: auto;
        flex: 1 1 auto;
        overflow-y: visible;
    }

        .auth-right .auth-logo-grp {
            position: relative;
            padding: 20px 20px 12px;
            justify-content: center;
        }

        .auth-right .logo-wrap img {
            height: 60px;
        }

    .auth-form-card {
        padding: 12px 20px 32px;
    }

        .auth-form-card h1 {
            font-size: 1.5rem;
        }

        .auth-form-card .fs-4 {
            font-size: 0.9rem !important;
        }
}

/* ─── SMALL PHONES (≤ 480px) ─────────────────── */
@media (max-width: 480px) {
    .auth-left {
        height: 220px !important;
        padding: 12px;
    }

        .auth-left .auth-bgphoto-container {
            inset: 12px;
            width: calc(100% - 24px);
            height: calc(100% - 24px);
        }

        .auth-left .bg-photo {
            border-radius: 14px;
        }

        .auth-left .panel-inner {
            padding: 20px;
        }

        .auth-left .bottom-copy h2 {
            font-size: 1.1rem;
        }

    .auth-right .auth-logo-grp {
        padding: 16px 16px 8px;
    }

    .auth-right .logo-wrap img {
        height: 50px;
    }

    .auth-form-card {
        padding: 8px 16px 28px;
    }

        .auth-form-card h1 {
            font-size: 1.35rem;
        }
}

/* ─── ZOOM OUT PROTECTION ────────────────────── */
@media (max-resolution: 1dppx) {
    html {
        font-size: 16px;
    }

    .auth-form-card .form-label,
    .auth-form-card .form-control,
    .auth-form-card .form-check-label,
    .auth-form-card .btn {
        font-size: 14px;
    }
}

/* ─── CUSTOM SCROLLBAR FOR RIGHT PANEL ───────── */
.auth-right::-webkit-scrollbar {
    width: 8px;
}

.auth-right::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.auth-right::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .auth-right::-webkit-scrollbar-thumb:hover {
        background: #a1a1a1;
    }