/* UPREV CMS login - Sky Blue + Light Purple theme */
:root {
    --navy: #112f6b;
    --ink: #20375e;
    --muted: #6c7d9d;
    --sky: #4a9cf4;
    --purple: #8660ee;
    --line: #d9e2f4;
}

* {
    box-sizing: border-box
}

html, body, form {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0
}

body {
    font-family: 'Segoe UI',Arial,sans-serif;
    color: var(--ink);
    background: #eef5ff
}

.login-page {
    width: 100%;
    min-height: 100vh;
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    background: linear-gradient(115deg,#eff7ff,#f2edff)
}

.login-left {
    position: relative;
    width: 55% !important;
    max-width: 55% !important;
    flex: 0 0 55% !important;
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient(ellipse at 80% 0%,rgba(120,190,255,.56),transparent 46%),radial-gradient(ellipse at 0% 70%,rgba(209,177,255,.40),transparent 57%),linear-gradient(140deg,#f5faff 0%,#e0efff 50%,#ece3ff 100%)
}

    .login-left:before {
        content: '';
        position: absolute;
        width: 670px;
        height: 670px;
        right: -360px;
        top: -440px;
        border-radius: 40%;
        transform: rotate(24deg);
        background: rgba(72,157,244,.14)
    }

    .login-left:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 245px;
        background: url('../images/ev-login-illustration.png') center bottom/cover no-repeat;
        pointer-events: none;
        opacity: .90
    }

.login-left-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 850px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 56px 7.5% 265px;
    display: flex;
    flex-direction: column
}

.left-brand {
    display: flex;
    align-items: center;
    gap: 16px
}

.brand-logo {
    width: 72px;
    height: 72px;
    min-width: 72px;
    padding: 9px;
    border-radius: 18px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 9px 24px rgba(67,111,184,.11);
    display: flex;
    align-items: center;
    justify-content: center
}

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

.brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0
}

    .brand-text strong {
        font-size: 22px;
        line-height: 1.2;
        color: var(--navy);
        font-weight: 800
    }

    .brand-text span {
        max-width: 280px;
        margin-top: 5px;
        font-size: 13px;
        line-height: 1.4;
        color: #627698
    }

.left-content {
    margin-top: auto;
    margin-bottom: auto;
    padding: 38px 0 24px
}

.left-kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #6578a6;
    margin-bottom: 24px
}

.left-content h1 {
    max-width: 680px;
    font-size: clamp(36px,3.5vw,58px);
    font-weight: 800;
    line-height: 1.11;
    letter-spacing: -1.7px;
    color: var(--navy);
    margin: 0 0 20px
}

    .left-content h1::first-line {
        color: var(--navy)
    }

.left-content p {
    max-width: 530px;
    font-size: 16px;
    line-height: 1.75;
    color: #52688e;
    margin: 0
}

.left-features {
    width: 100%;
    margin: 0 !important
}

    .left-features > div {
        padding-left: 0 !important;
        padding-right: 14px !important
    }

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 53px;
    color: #193c78;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35
}

.feature-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d3eaff;
    color: #438de8;
    font-size: 13px
}

.left-features > div:nth-child(2) .feature-icon, .left-features > div:nth-child(3) .feature-icon {
    background: #e3d7ff;
    color: #8059e9
}

.login-right {
    position: relative;
    width: 45% !important;
    max-width: 45% !important;
    flex: 0 0 45% !important;
    min-height: 100vh;
    padding: 45px 5% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: radial-gradient(circle at 100% 0%,rgba(181,155,255,.33),transparent 35%),linear-gradient(155deg,#eaf4ff,#f4edff 72%,#e7f6ff)
}

.login-card {
    width: 100% !important;
    max-width: 510px !important;
    margin: 0 auto !important;
    padding: clamp(28px,3.8vw,62px);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 28px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 25px 70px rgba(70,91,167,.12)
}

.login-heading {
    margin-bottom: 30px
}

    .login-heading h2 {
        font-size: clamp(30px,2.6vw,42px);
        font-weight: 800;
        letter-spacing: -1px;
        color: var(--navy);
        margin: 0 0 10px
    }

    .login-heading p {
        font-size: 15px;
        color: var(--muted);
        margin: 0;
        line-height: 1.55
    }

.form-label {
    display: block;
    margin-bottom: 8px;
    color: #17356d;
    font-size: 13px;
    font-weight: 700
}

.required {
    color: #db4b76
}

.login-input {
    min-height: 52px;
    width: 100%
}

    .login-input .input-group-text {
        width: 54px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f3f5ff;
        border: 1px solid var(--line);
        border-right: 0;
        color: #6a69d5;
        font-size: 17px;
        border-radius: 10px 0 0 10px
    }

    .login-input .form-control {
        min-height: 52px;
        border: 1px solid var(--line);
        border-radius: 0 10px 10px 0;
        padding: 12px 15px;
        color: var(--ink);
        font-size: 14px
    }

        .login-input .form-control:focus, .captcha-input:focus {
            border-color: #9a8aee;
            box-shadow: 0 0 0 .2rem rgba(135,100,238,.12);
            outline: 0
        }

        .login-input .form-control::placeholder, .captcha-input::placeholder {
            color: #95a0b8
        }

.captcha-row {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 9px;
    margin-bottom: 12px
}

.captcha-input {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    height: 52px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: white;
    font-size: 14px;
    color: var(--ink)
}

.captcha-code {
    flex: 0 0 125px;
    width: 125px;
    min-width: 125px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dedaf8;
    border-radius: 10px;
    background: repeating-linear-gradient(-45deg,#f0edff,#f0edff 6px,#faf9ff 6px,#faf9ff 12px);
    color: #263f8a;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 4px;
    user-select: none;
    overflow: hidden
}

    .captcha-code span {
        white-space: nowrap
    }

.captcha-refresh {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(125deg,#8660ee,#429ff8);
    color: white !important;
    text-decoration: none !important;
    font-size: 18px;
    transition: filter .2s
}

    .captcha-refresh:hover {
        filter: brightness(.94);
        color: white !important
    }

.btn-login {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(105deg,#9060f0,#459cf7);
    color: #fff;
    font-size: 16px;
    font-weight: 750;
    box-shadow: 0 10px 22px rgba(107,119,237,.18);
    transition: transform .2s,box-shadow .2s
}

    .btn-login:hover {
        transform: translateY(-1px);
        box-shadow: 0 13px 28px rgba(107,119,237,.28)
    }

.alert {
    display: block;
    border-radius: 10px;
    font-size: 13px;
    padding: 12px 14px;
    margin-bottom: 18px !important
}

.swal2-popup {
    border-radius: 16px !important;
    font-family: 'Segoe UI',Arial,sans-serif !important
}

.swal2-title {
    color: var(--navy) !important
}

@media(max-width:1200px) {
    .login-left-inner {
        padding: 42px 6% 245px
    }

    .login-card {
        padding: 32px
    }

    .login-right {
        padding: 32px 3% !important
    }

    .left-content h1 {
        font-size: 42px
    }
}

@media(max-width:991.98px) {
    .login-page {
        display: block !important
    }

    .login-left, .login-right {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        min-height: auto
    }

    .login-left-inner {
        min-height: 500px;
        padding: 34px 6% 195px
    }

    .login-left:after {
        height: 180px
    }

    .left-content {
        margin: 36px 0 22px;
        padding: 0
    }

        .left-content h1 {
            font-size: 40px
        }

    .login-right {
        padding: 38px 20px !important
    }

    .login-card {
        max-width: 560px !important
    }
}

@media(max-width:575.98px) {
    .login-left-inner {
        padding: 25px 20px 145px;
        min-height: 480px
    }

    .login-left:after {
        height: 130px
    }

    .brand-logo {
        width: 56px;
        height: 56px;
        min-width: 56px
    }

    .brand-text strong {
        font-size: 18px
    }

    .brand-text span {
        font-size: 11px
    }

    .left-content h1 {
        font-size: 32px
    }

    .left-content p {
        font-size: 13px
    }

    .left-kicker {
        font-size: 10px;
        letter-spacing: 2px
    }

    .feature-item {
        font-size: 11px;
        gap: 7px
    }

    .feature-icon {
        width: 28px;
        height: 28px;
        min-width: 28px
    }

    .login-right {
        padding: 25px 14px !important
    }

    .login-card {
        padding: 28px 20px;
        border-radius: 20px
    }

    .login-heading h2 {
        font-size: 30px
    }

    .captcha-code {
        flex-basis: 100px;
        width: 100px;
        min-width: 100px;
        font-size: 16px;
        letter-spacing: 2px
    }

    .captcha-refresh {
        flex-basis: 44px;
        width: 44px
    }
}



/* ===========================================================
   FINAL V10 - Unified backdrop, no duplicate artwork layers
   Desktop: 60/40 content grid; artwork spans the whole width.
   =========================================================== */
.forgot-password-row {
    text-align: center;
    margin-top: 15px;
}

.forgot-password-link {
    color: #426de8;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

    .forgot-password-link:hover {
        color: #7651e7;
        text-decoration: underline;
    }

@media (min-width:992px) {
    html, body, body > form, body > form > .container-fluid {
        height: 100%;
        min-height: 0;
    }

    .login-page {
        position: relative;
        isolation: isolate;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        background: radial-gradient(ellipse at 100% 0%,rgba(169,145,255,.37),transparent 38%), radial-gradient(ellipse at 22% 2%,rgba(143,204,255,.35),transparent 52%), linear-gradient(115deg,#eff8ff,#e6f0ff 50%,#eae4ff 100%) !important;
    }
        /* Exactly ONE image layer, attached to the page, not to either column. */
        .login-page::before {
            content: '';
            position: absolute;
            z-index: 0;
            pointer-events: none;
            left: 0;
            right: 0;
            bottom: 0;
            height: clamp(120px,23vh,215px);
            background: url('../images/ev-login-fullwidth.png') center bottom / 100% 100% no-repeat;
        }

        .login-page::after {
            content: none !important;
        }

    .login-left, .login-right {
        position: relative;
        z-index: 1;
        height: 100%;
        min-height: 0;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

        .login-left::before, .login-left::after {
            content: none !important;
            display: none !important;
        }

    .login-left {
        width: 60% !important;
        max-width: 60% !important;
        flex: 0 0 60% !important;
        overflow: visible;
    }

    .login-right {
        width: 40% !important;
        max-width: 40% !important;
        flex: 0 0 40% !important;
        padding: 16px 2.2% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .login-left-inner {
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        padding: clamp(18px,3.5vh,38px) 7.5% clamp(145px,25vh,220px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 10px;
    }

    .left-content {
        margin: 0;
        padding: 0;
    }

        .left-content h1 {
            font-size: clamp(30px,3.1vw,48px);
            margin-bottom: 10px;
            line-height: 1.12;
        }

        .left-content p {
            font-size: clamp(12px,1vw,15px);
            line-height: 1.55;
        }

    .left-kicker {
        margin-bottom: 12px;
    }

    .left-features {
        flex-shrink: 0;
        position: relative;
        z-index: 2;
        row-gap: 0 !important;
    }

    .feature-item {
        min-height: 38px;
        font-size: clamp(11px,.95vw,14px);
    }

    .feature-icon {
        width: 31px;
        height: 31px;
        min-width: 31px;
    }

    .brand-logo {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }

    .brand-text strong {
        font-size: 20px;
    }

    .login-card {
        width: 100% !important;
        max-width: none !important;
        min-height: clamp(440px,71vh,575px);
        padding: clamp(23px,2.5vw,38px) !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: rgba(255,255,255,.96) !important;
        border: 1px solid rgba(255,255,255,.85) !important;
        border-radius: 30px;
        box-shadow: 0 18px 55px rgba(76,94,173,.10);
    }

    .login-heading {
        margin-bottom: 20px;
    }

        .login-heading h2 {
            font-size: clamp(29px,2.9vw,41px);
        }

    .login-input, .login-input .form-control, .captcha-input, .captcha-code, .captcha-refresh {
        height: 46px;
        min-height: 46px;
    }

    .btn-login {
        min-height: 50px;
    }

    .form-label {
        margin-bottom: 5px;
    }

    .captcha-row {
        margin-bottom: 5px;
    }

    .login-card .mb-3 {
        margin-bottom: 12px !important;
    }

    .login-card .mt-4 {
        margin-top: 16px !important;
    }
}

@media (min-width:992px) and (max-height:740px) {
    .login-left-inner {
        padding-top: 20px;
        padding-bottom: clamp(130px,24vh,175px);
        gap: 6px;
    }

    .login-page::before {
        height: clamp(115px,23vh,175px);
    }

    .left-content h1 {
        font-size: clamp(29px,3vw,41px);
    }

    .left-kicker {
        margin-bottom: 8px;
    }

    .left-content p {
        font-size: 12px;
        line-height: 1.45;
    }

    .feature-item {
        min-height: 32px;
    }

    .feature-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .login-card {
        min-height: clamp(420px,73vh,510px);
        padding: clamp(20px,3vh,30px) !important;
    }

    .login-heading {
        margin-bottom: 15px;
    }

        .login-heading h2 {
            font-size: clamp(29px,2.8vw,37px);
        }

        .login-heading p {
            font-size: 13px;
        }

    .login-input, .login-input .form-control, .captcha-input, .captcha-code, .captcha-refresh {
        height: 42px;
        min-height: 42px;
    }

    .btn-login {
        min-height: 46px;
    }
}

@media (min-width:992px) and (max-height:560px) {
    .login-page {
        height: auto;
        min-height: 560px;
        overflow: visible;
    }

    .login-left, .login-right {
        min-height: 560px;
    }
}

@media (max-width:991.98px) {
    .login-page {
        background: linear-gradient(120deg,#e9f5ff,#ede6ff) !important;
    }

    .login-left:after {
        background-image: url('../images/ev-login-fullwidth.png') !important;
        background-size: cover !important;
    }
}


/* V11 — natural-aspect landscape, preserves sunrise and skyline.
   Uses one image layer only, no forced image stretching. */
@media (min-width:992px) {
    .login-page::before {
        background-image: url('../images/ev-login-landscape-natural.png') !important;
        background-position: center bottom !important;
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
        height: clamp(195px,36vh,330px) !important;
        opacity: 1 !important;
    }

    .login-left-inner {
        padding-bottom: clamp(160px,28vh,245px) !important;
    }

    .login-page::after, .login-left::after, .login-left::before {
        content: none !important;
        display: none !important;
    }
}

@media (min-width:992px) and (max-height:740px) {
    .login-page::before {
        height: clamp(185px,36vh,285px) !important;
    }

    .login-left-inner {
        padding-bottom: clamp(140px,26vh,200px) !important;
    }
}

@media (max-width:991.98px) {
    .login-left::after {
        background-image: url('../images/ev-login-landscape-natural.png') !important;
        background-position: center bottom !important;
        background-size: cover !important;
    }
}