/* ============================================================
   Login page — centered card over full-screen background image
   (reference UI), orange theme.
   ============================================================ */
:root {
    --lg-orange: #f0731d;
    --lg-orange-dark: #d55f0e;
}
body.login-screen {
    margin: 0;
    min-height: 100vh;
    background: url('../images/theme-assets/login/bg1.jpg') center center / cover no-repeat fixed;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.login-fade-in {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, rgba(20, 22, 28, .72), rgba(213, 95, 14, .45));
    z-index: 0;
    animation: lgFade .8s ease both;
}
@keyframes lgFade { from { opacity: 0; } to { opacity: 1; } }

.login-center {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.login-wrapper {
    width: 100%;
    max-width: 500px;
    animation: lgRise .6s ease both .15s;
}
@keyframes lgRise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
.logo-heading { text-align: center; margin-bottom: 1rem; }
.project-heading {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.login-box {
    background: #fff;
    border-radius: .9rem;
    box-shadow: 0 18px 48px rgba(0,0,0,.35);
    overflow: hidden;
}
.login-box-head {
    text-align: center;
    padding: 1.25rem 1rem .5rem 1rem;
}
.login-box-head img { max-height: 120px; width: auto; }
.content-wrap { padding: 1rem 1.75rem 1.5rem 1.75rem; }

/* inputs with leading icons */
.input-icon { position: relative; }
.input-icon > i.fa {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
    pointer-events: none;
}
.input-icon .form-control {
    padding-left: 2.4rem;
    height: 44px;
    border-radius: .5rem;
    border: 1px solid #dee2e6;
}
.input-icon .form-control:focus {
    border-color: var(--lg-orange);
    box-shadow: 0 0 0 .2rem rgba(240, 115, 29, .18);
}
.form-group { margin-bottom: 1rem; }
.password-field .toggle-eye {
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #868e96;
    cursor: pointer;
}
.otp-row { margin-bottom: .5rem; }

/* buttons */
.btn-login {
    background: linear-gradient(180deg, var(--lg-orange) 0%, var(--lg-orange-dark) 100%);
    border: 1px solid var(--lg-orange-dark);
    color: #fff !important;
    font-weight: 600;
    border-radius: .5rem;
    padding: .5rem 1.1rem;
    transition: box-shadow .2s ease, transform .15s ease;
}
.btn-login:hover, .btn-login:focus {
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(213, 95, 14, .45);
    transform: translateY(-1px);
}
.btn-resend {
    background: #008CBA;
    border: 1px solid #007ba3;
    color: #fff !important;
    border-radius: .5rem;
    margin-top: .4rem;
}
.forgot-link {
    color: var(--lg-orange-dark);
    font-weight: 600;
    text-decoration: underline;
}
.forgot-link:hover { color: var(--lg-orange); }
.login-links { margin-top: .75rem; }

.login-loader { text-align: center; padding: .5rem 0; }
.otp-info { color: #6c757d; font-size: .85rem; margin: .5rem 0 0 0; }
.display-hide { display: none; }
.alert { border-radius: .5rem; font-size: .9rem; }

.already { text-align: center; margin-top: 1rem; }
.already p { color: #f1f3f5; font-size: .8rem; text-shadow: 0 1px 6px rgba(0,0,0,.5); }

@media (max-width: 575.98px) {
    .content-wrap { padding: 1rem 1.1rem 1.25rem 1.1rem; }
}

/* PASS 12 — old wide logo + larger login box */
.login-wrapper { max-width: 500px; }
.content-wrap { padding: 1.25rem 2.25rem 1.9rem 2.25rem; }
.login-box-head { padding: 1.5rem 1rem .25rem 1rem; }
.login-box-head img { max-width: 82%; height: auto; max-height: 130px; }
.input-icon .form-control { height: 48px; }

/* PASS 12 - match base font-size + orange spinner for the login loader */
html { font-size: 80%; } /* this stylesheet only loads on the login page, so no scoping needed */
.spinner-orange {
    display: inline-block;
    width: 44px;
    height: 44px;
    border: 4px solid rgba(240, 115, 29, .25);
    border-top-color: var(--lg-orange);
    border-radius: 50%;
    animation: spinnerRotate .7s linear infinite;
}
@keyframes spinnerRotate { to { transform: rotate(360deg); } }
.login-loader { text-align: center; padding: .75rem 0; }


/* FINAL LOGIN SCALE — compact on desktop and fluid on phones */
html { font-size: 87.5%; }
.login-wrapper { width: 100%; max-width: 420px; padding-inline: .75rem; }
.login-box { border-radius: .75rem; }
.login-box-head { padding: .9rem .9rem .2rem; }
.login-box-head img { max-width: 70%; max-height: 92px; }
.content-wrap { padding: .85rem 1.4rem 1.2rem; }
.input-icon .form-control { height: 42px; }
.login-heading { font-size: 1.45rem; }
.spinner-grow-lg { width: 3.75rem !important; height: 3.75rem !important; }
.has-error label, .has-error .help-block, label.error { color: #dc3545 !important; }
.has-error .form-control { border-color: #dc3545 !important; }
.has-error .form-control:focus { box-shadow: 0 0 0 .25rem rgba(220,53,69,.22) !important; }
@media (max-width: 575.98px) {
    html { font-size: 100%; }
    .login-page, body { overflow-x: hidden; }
    .login-wrapper { max-width: 390px; padding-inline: 1rem; }
    .login-box-head img { max-width: 66%; max-height: 78px; }
    .content-wrap { padding: .8rem 1rem 1rem; }
    .input-icon .form-control { height: 42px; }
}

/* Login server-side error visibility */
.login-box .alert { display:block; position:relative; padding-right:2.5rem; }
.login-box .alert .btn-close { position:absolute; right:.65rem; top:.55rem; width:.65rem; height:.65rem; padding:.35rem; font-size:.65rem; }


/* FINAL LOGIN ALERT VISIBILITY FIX */
.login-box .alert.display-hide,
.login-page .alert.display-hide,
.alert.display-hide {
    display: none !important;
}
.login-box .alert:not(.display-hide) { display: block; }


/* FINAL LOGIN/FORGOT-PASSWORD POLISH */
.btn-resend,
.btn-resend:visited {
    background-color: var(--lg-orange) !important;
    border-color: var(--lg-orange-dark) !important;
    color: #fff !important;
}
.btn-resend:hover,
.btn-resend:focus,
.btn-resend:active,
.btn-resend.active {
    background-color: var(--lg-orange-dark) !important;
    border-color: var(--lg-orange-dark) !important;
    color: #fff !important;
    box-shadow: 0 0 0 .2rem rgba(240, 115, 29, .22) !important;
}
.input-icon {
    position: relative;
    width: 100%;
}
.input-icon > i.fa {
    z-index: 3;
    width: 1rem;
    text-align: center;
}
.input-icon .form-control {
    width: 100%;
    padding-left: 2.75rem !important;
    padding-right: .9rem;
}
.password-field .form-control {
    padding-right: 2.8rem !important;
}
.login-screen .alert[style*="display:none"] {
    display: none !important;
}
.forgot-password-screen .login-wrapper {
    max-width: 430px;
}
.forgot-password-screen .login-box-head img {
    max-width: 70%;
    max-height: 92px;
}
.forgot-password-screen .form-control {
    min-height: 42px;
}
.forgot-password-screen .login-links {
    margin-top: 1rem;
}
@media (max-width: 575.98px) {
    .otp-row > [class*="col-"] { width: 100%; }
    .otp-row .btn { margin-top: .35rem; }
    .forgot-password-screen .login-wrapper { max-width: 390px; }
}