/* .auth-left{padding:50px}.auth-right{min-height:500px;align-items:center;justify-content:center;background:#F6FFF8}.auth-left h2{font-weight:700}.auth-left .form-control{height:55px;border-radius:10px}.auth-left .btn{height:55px;border-radius:10px}.login-popup{min-height:520px}.login-banner{background:#F4FFF9;height:100%;display:flex;align-items:center;justify-content:center;border-radius:0 16px 16px 0}.login-popup h2{font-weight:700}.login-popup .form-control{height:55px;border-radius:10px}#btn-login-continue{height:55px;border-radius:10px}.auth-container{padding:40px}.auth-step{min-height:420px}.otp-wrapper{display:flex;justify-content:center;gap:12px;margin:20px 0}.otp-input{width:55px;height:55px;border:1px solid #d9d9d9;border-radius:10px;text-align:center;font-size:24px;font-weight:600;outline:none;padding-left:0!important}.otp-input:focus{border-color:#c49b2d} */

/* ==========================================================================
   Production Login UI
   ========================================================================== */

:root{
    --auth-radius:24px;
    --auth-border:rgba(255,255,255,.55);
    --auth-shadow:0 30px 70px rgba(17,24,39,.18);
    --auth-bg:rgba(255,255,255,.88);
    --auth-primary:#b8860b;
    --auth-primary-dark:#8f6906;
}

.login-popup{
    min-height:640px;
    display:flex;
    border-radius:var(--auth-radius);
    overflow:hidden;
    background:var(--auth-bg);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border:1px solid var(--auth-border);
    box-shadow:var(--auth-shadow);
    transition:.35s ease;
}

.login-popup .row{
    width:100%;
    min-height:640px;
}

.login-popup h2{
    font-size:32px;
    font-weight:700;
    line-height:1.15;
    margin-bottom:12px;
    color:#1f2937;
}

.login-popup p{
    color:#6b7280;
    line-height:1.7;
}

.login-popup .form-group{
    margin-bottom:22px;
}

.login-popup .form-label{
    font-weight:600;
    margin-bottom:8px;
    color:#374151;
}

.login-popup .form-control{
    height:58px;
    border-radius:14px;
    border:1px solid #d9dee7;
    box-shadow:none;
    transition:.25s;
    padding:0 18px;
}

.login-popup .form-control:focus{
    border-color:var(--auth-primary);
    box-shadow:0 0 0 4px rgba(184,134,11,.12);
}

.login-popup .btn{
    height:58px;
    border:none;
    border-radius:14px;
    font-weight:600;
    background:linear-gradient(135deg,var(--auth-primary),var(--auth-primary-dark));
    color:#fff;
    transition:.25s;
}

.login-popup .btn:hover{
    transform:translateY(-2px);
}

.login-banner{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#f7fff5,#eefaf4);
}

.login-banner img{
    max-width:88%;
    max-height:560px;
}

.auth-step{
    min-height:500px;
    animation:authFade .28s ease;
}

@keyframes authFade{
    from{opacity:0;transform:translateX(20px);}
    to{opacity:1;transform:translateX(0);}
}

.otp-wrapper{
    display:flex;
    justify-content:center;
    gap:14px;
    margin:26px 0;
}

.otp-input{
    width:60px;
    height:60px;
    border:1px solid #d7dce2;
    border-radius:16px;
    background:#fff;
    font-size:28px;
    font-weight:700;
    text-align:center;
    padding:0;
    transition:.25s;
    box-shadow:0 10px 25px rgba(15,23,42,.06);
}

.otp-input:focus{
    border-color:var(--auth-primary);
    box-shadow:0 0 0 4px rgba(184,134,11,.14),
               0 10px 25px rgba(15,23,42,.10);
}

.auth-back{
    border:none;
    background:none;
    color:#6b7280;
    font-weight:600;
    margin-bottom:18px;
}

.auth-back:hover{
    color:#111827;
}

.otp-note{
    text-align:center;
    color:#6b7280;
    margin-top:18px;
    font-size:13px;
}

#btnVerifyOTP{
    height:58px;
    border-radius:14px;
}

/* ===============================
   PASSWORD SETUP
================================== */

.auth-password-actions{

    display:flex;
    gap:12px;
    margin-top:28px;

}

.auth-password-actions .btn{

    flex:1;
    height:52px;
    border-radius:14px;
    font-size:15px;
    font-weight:600;

}

#btnSkipPassword{

    background:#fff;
    border:1px solid #d8d8d8;
    color:#444;

}

#btnSkipPassword:hover{

    background:#f8f8f8;

}

#btnSavePassword{

    background:linear-gradient(
        90deg,
        #D79B00,
        #F0B000
    );

    border:none;
    color:#fff;

}

#btnSavePassword:hover{

    filter:brightness(.96);

}

#auth-step-6 .form-control{

    height:54px;
    border-radius:14px;

}

#auth-step-6 .form-label{

    font-weight:600;
    margin-bottom:8px;

}

#auth-step-6 h2{

    font-size:42px;

}

#auth-step-6 p{

    line-height:1.7;

}

.auth-password-actions{
    display:flex;
    gap:12px;
}

@media (max-width:991.98px){

    .login-popup,
    .login-popup .row{
        min-height:auto;
    }

    .login-banner{
        min-height:260px;
        border-radius:0;
    }

    .login-popup h2{
        font-size:34px;
    }

    .col-lg-6.p-5{
        padding:32px !important;
    }
}

@media (max-width:575.98px){

    .col-lg-6.p-5{
        padding:22px !important;
    }

    .login-popup h2{
        font-size:28px;
    }

    .otp-wrapper{
        gap:10px;
    }

    .otp-input{
        width:52px;
        height:52px;
        font-size:22px;
    }
}