/* ======================================================
   UFF BHABHI
   Authentication Styles
====================================================== */

/* ======================================================
   Auth Page
====================================================== */

.auth-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
    background:
        linear-gradient(
            rgba(0,0,0,.15),
            rgba(10,10,15,.92)
        ),
        url("../images/auth/auth-bg.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

/* ======================================================
   Container
====================================================== */

.auth-container{
    width:100%;
    max-width:520px;
}

/* ======================================================
   Card
====================================================== */

.auth-card{
    width:100%;
    padding:48px;
    border-radius:24px;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    background:rgba(35,22,35,.72);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
        0 20px 60px rgba(0,0,0,.45);
}

.auth-card{

    position:relative;

    overflow:hidden;

}

.auth-card::before{

    content:"";

    position:absolute;

    top:-120px;

    left:50%;

    transform:translateX(-50%);

    width:260px;

    height:260px;

    background:rgba(224,0,108,.10);
    filter:blur(80px);

    pointer-events:none;

}

/* ======================================================
   Logo
====================================================== */

.auth-logo{
    text-align:center;
    margin-bottom:25px;
}

.auth-logo img{
    width:120px;
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
    filter:drop-shadow(0 8px 20px rgba(224,0,108,.35));
}

/* ======================================================
   Typography
====================================================== */

.auth-title{
    margin:0;
    text-align:center;
    font-size:2rem;
    font-weight:700;
    color:#fff;
}

.auth-subtitle{
    margin:12px 0 35px;
    text-align:center;
    line-height:1.7;
    color:rgba(255,255,255,.75);
    font-size:.96rem;
}


/* ======================================================
   Form
====================================================== */

.auth-form{
    margin-top:30px;
}

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

.auth-form-group label{
    display:block;
    margin-bottom:10px;
    font-size:.95rem;
    font-weight:500;
    color:rgba(255,255,255,.90);
}

/* ======================================================
   Input Group
====================================================== */

.auth-input-group{
    display:flex;
    align-items:center;
    height:62px;

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

    border:1px solid rgba(255,255,255,.16);

    border-radius:14px;

    transition:.30s ease;

    overflow:hidden;
}

.auth-input-group:hover{
    border-color:rgba(255,255,255,.28);
}

.auth-input-group:focus-within{

    border-color:var(--primary);

    box-shadow:
        0 0 0 4px rgba(224,0,108,.14);

}

/* ======================================================
   Left Icons
====================================================== */

.auth-input-group > i{

    width:58px;

    text-align:center;

    font-size:1.15rem;

    color:rgba(255,255,255,.60);

    flex-shrink:0;

}

/* ======================================================
   Input
====================================================== */

.auth-input{

    flex:1;

    height:100%;

    border:none;

    outline:none;

    background:transparent;

    color:#fff;

    font-size:1rem;

    padding-left:4px;
    
    padding-right:15px;

}

.auth-input::placeholder{

    color:rgba(255,255,255,.40);

}

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus{

    -webkit-text-fill-color:#fff;

    transition:background-color 9999s;

}

/* ======================================================
   Password Toggle
====================================================== */

.auth-password-toggle{

    width:58px;

    height:100%;

    border:none;

    background:none;

    cursor:pointer;

    color:rgba(255,255,255,.60);

    transition:.25s;

}

.auth-password-toggle:hover{

    color:#ffffff;

}


/* ======================================================
   Remember Me & Forgot Password
====================================================== */

.auth-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:24px 0 30px;

    gap:15px;

}

.remember-me{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

    user-select:none;

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

    font-size:.92rem;

}

.remember-me input{

    width:18px;

    height:18px;

    accent-color:var(--primary);

    cursor:pointer;

}

.forgot-link{

    color:var(--gold);

    font-size:.92rem;

    text-decoration:none;

    transition:.25s;

}

.forgot-link:hover{

    color:#FFD86B;

    text-decoration:underline;

}

/* ======================================================
   Login Button
====================================================== */

.auth-btn{

    width:100%;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:1rem;

    font-weight:700;

    text-decoration:none;

    transition:.30s ease;

}

.auth-btn:not(.auth-btn-secondary){

    color:#fff;

    background:linear-gradient(
        135deg,
        #FF2D8D,
        var(--primary)
    );

    box-shadow:
        0 12px 30px rgba(224,0,108,.35);

}

.auth-btn:not(.auth-btn-secondary):hover{

    transform:translateY(-2px);

    box-shadow:
        0 18px 40px rgba(224,0,108,.50);

}

.auth-btn i{

    font-size:1rem;

    transition:.25s;

}

.auth-btn:hover i{

    transform:translateX(4px);

}

/* ======================================================
   Divider
====================================================== */

.auth-divider{

    display:flex;

    align-items:center;

    margin:28px 0;

    color:rgba(255,255,255,.45);

    font-size:.85rem;

}

.auth-divider::before,
.auth-divider::after{

    content:"";

    flex:1;

    height:1px;

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

}

.auth-divider span{

    padding:0 16px;

}

/* ======================================================
   Register Button
====================================================== */

.auth-btn-secondary{

    background:transparent;

    border:1px solid rgba(255,255,255,.18);

    color:#fff;

}

.auth-btn-secondary:hover{

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

    border-color:var(--primary);

    transform:translateY(-2px);

}


/* ==========================================
   Auth Alerts
========================================== */

.auth-alert{

    width:100%;

    margin:0 0 24px;

    padding:14px 18px;

    border-radius:12px;

    font-size:.95rem;

    font-weight:500;

    border:1px solid transparent;

}

.auth-alert-danger{

    color:#FFD6D6;

    background:rgba(220,53,69,.18);

    border-color:rgba(220,53,69,.45);

}

.auth-alert-success{

    color:#D4F8D4;

    background:rgba(25,135,84,.18);

    border-color:rgba(25,135,84,.45);

}