/*=========================================================
AUTH PREMIUM UI
Part 1/5
=========================================================*/

:root{

    --auth-primary:#D4A017;
    --auth-primary-dark:#B88709;

    --auth-bg:#FFFFFF;

    --auth-card:#FDFDFD;

    --auth-border:#E6E8EC;

    --auth-text:#1E293B;

    --auth-muted:#6B7280;

    --auth-success:#16A34A;

    --auth-radius:20px;

    --auth-shadow:
        0 20px 45px rgba(15,23,42,.08);

    --auth-transition:.28s cubic-bezier(.4,0,.2,1);

}

/*=========================================================
STEP ANIMATION
=========================================================*/

.auth-step{

    animation:authFade .28s ease;

}

@keyframes authFade{

    from{

        opacity:0;

        transform:translateX(25px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.auth-step.hide{

    animation:authHide .22s ease;

}

@keyframes authHide{

    from{

        opacity:1;

    }

    to{

        opacity:0;

        transform:translateX(-25px);

    }

}

/*=========================================================
BACK BUTTON
=========================================================*/

.auth-back{

    display:inline-flex;

    align-items:center;

    gap:8px;

    border:none;

    background:none;

    color:var(--auth-muted);

    font-weight:600;

    padding:0;

    transition:var(--auth-transition);

}

.auth-back:hover{

    color:var(--auth-primary);

}

.auth-back i{

    font-size:20px;

}

/*=========================================================
TITLE
=========================================================*/

.auth-title{

    margin-bottom:28px;

}

.auth-title-icon{

    width:56px;

    height:56px;

    border-radius:50%;

    background:#FFF8E5;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--auth-primary);

    font-size:26px;

    margin-bottom:18px;

}

.auth-title h2{

    font-size:40px;

    font-weight:700;

    color:var(--auth-text);

    margin-bottom:10px;

}

.auth-title p{

    color:var(--auth-muted);

    line-height:1.7;

}

/*=========================================================
INPUT ICON
=========================================================*/

.auth-input-icon{

    position:absolute;

    top:50%;

    left:18px;

    transform:translateY(-50%);

    font-size:20px;

    color:#94A3B8;

    pointer-events:none;

}

/*=========================================================
PASSWORD TOGGLE
=========================================================*/

.auth-password-toggle{

    position:absolute;

    right:16px;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    color:#94A3B8;

    transition:.2s;

}

.auth-password-toggle:hover{

    color:var(--auth-primary);

}

/*=========================================================
LOGIN METHOD CARDS
=========================================================*/

.auth-option-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 20px;

    border:1px solid #E8ECF2;

    border-radius:18px;

    background:#FFF;

    cursor:pointer;

    transition:all .25s ease;

    margin-bottom:16px;

    overflow:hidden;

}

.auth-option-card:hover{

    border-color:#D4A017;

    transform:translateY(-2px);

    box-shadow:0 14px 35px rgba(15,23,42,.08);

}

.auth-option-card input{

    display:none;

}

.auth-option-card:has(input:checked){

    border-color:#D4A017;

    background:#FFFCF3;

    box-shadow:0 12px 30px rgba(212,160,23,.12);

}

.auth-option-icon{

    width:56px;

    height:56px;

    flex-shrink:0;

    border-radius:16px;

    background:#F8FAFC;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    color:#D4A017;

    transition:.25s;

}

.auth-option-card:hover .auth-option-icon{

    background:#FFF6D9;

}

.auth-option-content{

    flex:1;

}

.auth-option-content h6{

    margin:0 0 5px;

    font-size:17px;

    font-weight:700;

    color:#1E293B;

}

.auth-option-content small{

    color:#64748B;

    font-size:13px;

}

.auth-option-check{

    color:#D4A017;

    font-size:22px;

    opacity:0;

    transition:.25s;

}

.auth-option-card:has(input:checked) .auth-option-check{

    opacity:1;

}

.auth-option-card.disabled{

    opacity:.55;

    cursor:not-allowed;

}

/*=========================================================
BUTTONS
=========================================================*/

.btn-auth{

    height:58px;

    border:none;

    border-radius:16px;

    background:linear-gradient(135deg,#D4A017,#B8860B);

    color:#FFF;

    font-weight:700;

    font-size:16px;

    transition:.25s;

    box-shadow:0 12px 30px rgba(212,160,23,.25);

}

.btn-auth:hover{

    color:#FFF;

    transform:translateY(-2px);

    box-shadow:0 18px 40px rgba(212,160,23,.35);

}

.btn-auth:disabled{

    opacity:.65;

    cursor:not-allowed;

    transform:none;

}

.btn-auth .spinner-border{

    width:18px;

    height:18px;

}

/*=========================================================
BADGES
=========================================================*/

.auth-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:999px;

    background:#F8FAFC;

    color:#475569;

    font-weight:600;

    font-size:13px;

}

.auth-badge i{

    color:#16A34A;

}

/*=========================================================
LINKS
=========================================================*/

.auth-link{

    color:#B8860B;

    font-weight:600;

    text-decoration:none;

}

.auth-link:hover{

    color:#8F6906;

    text-decoration:none;

}

/*=========================================================
OTP SCREEN
=========================================================*/

.auth-channel-list{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin:28px 0;

}

.auth-channel{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 18px;

    background:#FAFBFC;

    border:1px solid #ECEFF3;

    border-radius:16px;

    transition:.25s;

}

.auth-channel:hover{

    border-color:#D4A017;

    background:#FFFDF7;

}

.auth-channel-icon{

    width:52px;

    height:52px;

    border-radius:14px;

    background:#FFF7DD;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#D4A017;

    font-size:22px;

    flex-shrink:0;

}

.auth-channel-content{

    flex:1;

}

.auth-channel-title{

    font-size:13px;

    color:#94A3B8;

    margin-bottom:4px;

}

.auth-channel-value{

    font-size:15px;

    font-weight:700;

    color:#1E293B;

}

/*=========================================================
OTP INPUTS
=========================================================*/

.otp-section{

    margin-top:34px;

}

.otp-section label{

    display:block;

    margin-bottom:18px;

    font-size:14px;

    font-weight:700;

    color:#334155;

}

.otp-wrapper{

    display:flex;

    justify-content:center;

    gap:14px;

}

.otp-input{

    width:60px;

    height:60px;

    border-radius:18px;

    border:2px solid #E5E7EB;

    background:#FFF;

    text-align:center;

    font-size:28px;

    font-weight:700;

    color:#111827;

    transition:.22s;

    box-shadow:0 8px 20px rgba(15,23,42,.05);

    outline:none;

    padding:0;

}

.otp-input:hover{

    border-color:#E0C15A;

}

.otp-input:focus{

    border-color:#D4A017;

    box-shadow:

        0 0 0 4px rgba(212,160,23,.14),

        0 12px 26px rgba(15,23,42,.08);

    transform:translateY(-2px);

}

/*=========================================================
OTP TIMER
=========================================================*/

.otp-timer{

    margin-top:24px;

    text-align:center;

    color:#64748B;

    font-size:14px;

}

#otpTimer{

    color:#D4A017;

    font-weight:700;

    margin-left:6px;

}

.otp-resend{

    border:none;

    background:none;

    color:#D4A017;

    font-weight:700;

    transition:.2s;

}

.otp-resend:hover{

    color:#B8860B;

}

.otp-resend:disabled{

    opacity:.5;

    cursor:not-allowed;

}

/*=========================================================
OTP FOOTER
=========================================================*/

.otp-note{

    margin-top:24px;

    text-align:center;

    color:#64748B;

    font-size:13px;

    line-height:1.7;

}

.otp-note i{

    color:#16A34A;

    margin-right:6px;

}

/*=========================================================
ERROR / SUCCESS
=========================================================*/

.auth-error{

    margin-top:14px;

    padding:12px 16px;

    border-radius:14px;

    background:#FEF2F2;

    color:#B91C1C;

    border:1px solid #FECACA;

    font-size:14px;

}

.auth-success{

    margin-top:14px;

    padding:12px 16px;

    border-radius:14px;

    background:#F0FDF4;

    color:#15803D;

    border:1px solid #BBF7D0;

    font-size:14px;

}

/*=========================================================
GLASS POPUP
=========================================================*/

.custom-modal .modal-dialog{

    max-width:1100px;

}

.custom-modal .modal-content{

    border:none;

    border-radius:28px;

    overflow:hidden;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    box-shadow:
        0 30px 80px rgba(15,23,42,.18);

}

.custom-modal .modal-body{

    padding:0;

}

.custom-modal .btn-close{

    position:absolute;

    top:18px;

    right:18px;

    z-index:20;

    background:#FFF;

    border-radius:50%;

    opacity:1;

    box-shadow:0 10px 20px rgba(0,0,0,.08);

}

/*=========================================================
LOGIN POPUP
=========================================================*/

.login-popup{

    min-height:640px;

    background:#FFF;

}

.login-popup .col-lg-6{

    min-height:640px;

}

.login-banner{

    position:relative;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        radial-gradient(circle at top,#FFF9E8,#F8FAFC);

}

.login-banner::before{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(212,160,23,.08);

    filter:blur(30px);

}

.login-banner img{

    position:relative;

    z-index:2;

    max-width:88%;

    transition:.35s;

}

.login-banner:hover img{

    transform:translateY(-6px);

}

/*=========================================================
FORM
=========================================================*/

.form-control{

    transition:.25s;

}

.form-control:hover{

    border-color:#D8B64A;

}

.form-control:focus{

    border-color:#D4A017;

    box-shadow:

        0 0 0 4px rgba(212,160,23,.12);

}

/*=========================================================
LOADING
=========================================================*/

.auth-loading{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(8px);

    z-index:100;

}

.auth-loading .spinner-border{

    width:46px;

    height:46px;

    color:#D4A017;

}

/*=========================================================
TRANSITIONS
=========================================================*/

.fade-enter{

    animation:fadeEnter .25s ease;

}

@keyframes fadeEnter{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.slide-left{

    animation:slideLeft .30s ease;

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(35px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*=========================================================
FOCUS RING
=========================================================*/

*:focus-visible{

    outline:none;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media (max-width:991.98px){

    .custom-modal .modal-dialog{

        max-width:96%;

        margin:1rem auto;

    }

    .login-popup{

        min-height:auto;

    }

    .login-popup .col-lg-6{

        min-height:auto;

    }

    .login-banner{

        min-height:280px;

        border-radius:0;

    }

    .login-banner img{

        max-width:60%;

    }

    .login-popup h2{

        font-size:34px;

    }

    .auth-title h2{

        font-size:34px;

    }

    .p-5{

        padding:2rem !important;

    }

}

/*=========================================================
MOBILE
=========================================================*/

@media (max-width:767.98px){

    .custom-modal .modal-dialog{

        margin:.75rem;

    }

    .custom-modal .modal-content{

        border-radius:22px;

    }

    .login-banner{

        min-height:220px;

    }

    .login-banner img{

        max-width:72%;

    }

    .login-popup h2{

        font-size:28px;

    }

    .auth-title h2{

        font-size:28px;

    }

    .auth-title p{

        font-size:14px;

    }

    .auth-option-card{

        padding:14px;

        gap:14px;

    }

    .auth-option-icon{

        width:48px;

        height:48px;

        font-size:20px;

        border-radius:14px;

    }

    .auth-option-content h6{

        font-size:15px;

    }

    .otp-wrapper{

        gap:10px;

    }

    .otp-input{

        width:52px;

        height:52px;

        font-size:22px;

        border-radius:14px;

    }

    .btn-auth{

        height:54px;

        border-radius:14px;

    }

}

/*=========================================================
SMALL DEVICES
=========================================================*/

@media (max-width:420px){

    .p-5{

        padding:1.25rem !important;

    }

    .login-banner{

        min-height:180px;

    }

    .login-banner img{

        max-width:80%;

    }

    .auth-option-card{

        padding:12px;

    }

    .auth-option-icon{

        width:42px;

        height:42px;

        font-size:18px;

    }

    .otp-input{

        width:46px;

        height:46px;

        font-size:20px;

    }

}

/*=========================================================
UTILITY
=========================================================*/

.auth-hidden{

    display:none !important;

}

.auth-visible{

    display:block !important;

}

.auth-shadow{

    box-shadow:0 18px 45px rgba(15,23,42,.10);

}

.auth-rounded{

    border-radius:20px;

}

.auth-transition{

    transition:all .25s ease;

}

/*=========================================================
PREMIUM EFFECTS
=========================================================*/

::selection{

    background:#D4A017;

    color:#FFF;

}

html{

    scroll-behavior:smooth;

}

button,
input,
a{

    transition:all .25s ease;

}

button:active{

    transform:scale(.98);

}

.login-popup img{

    user-select:none;

    -webkit-user-drag:none;

}

.auth-option-card,
.auth-channel,
.otp-input,
.btn-auth{

    will-change:transform;

}