/* ==========================================================
                EARNCASH AUTH SYSTEM
                FUTURISTIC GLASS DESIGN
========================================================== */



.auth-section{


    min-height:100vh;


    display:flex;


    justify-content:center;


    align-items:center;


    padding:40px;


}





.auth-container{


    width:100%;


    max-width:450px;


    display:flex;


    flex-direction:column;


    gap:25px;


}







/* ==========================
        BRAND AREA
=========================== */


.auth-brand{


    text-align:center;


}



.auth-brand h1{


    margin-top:15px;


    font-size:2.5rem;


    font-weight:800;


    background:


    linear-gradient(

        135deg,

        #4f73ff,

        #b6c9ff

    );


    -webkit-background-clip:text;


    color:transparent;


}




.auth-brand p{


    margin-top:10px;


}








/* ==========================
        GLASS FORM CARD
=========================== */


.auth-card{


    background:


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


    backdrop-filter:


    blur(30px);


    border:


    1px solid rgba(255,255,255,.8);


    border-radius:


    40px;


    padding:


    40px;


    box-shadow:


    var(--shadow-lg);


}







.auth-card h2{


    text-align:center;


    margin-bottom:25px;


}
/* ==========================================================
                INPUT SYSTEM
========================================================== */



.input-group{


    margin-bottom:20px;


    position:relative;


}





.input-group label{


    display:block;


    margin-bottom:8px;


    font-size:.9rem;


    font-weight:500;


    color:


    var(--text);


}





.input-group input{


    width:100%;


    padding:


    15px 20px;


    border-radius:


    20px;


    border:


    1px solid rgba(255,255,255,.8);


    background:


    rgba(255,255,255,.55);


    backdrop-filter:


    blur(15px);


    outline:none;


    font-family:


    var(--font-main);


    color:


    var(--text);


    transition:.3s;


}





.input-group input:focus{


    border-color:


    var(--primary);


    box-shadow:


    0 0 25px rgba(105,144,255,.25);


}







/* ==========================================================
                PASSWORD ICON
========================================================== */



.password-box{


    position:relative;


}





.password-box i{


    position:absolute;


    right:20px;


    top:50%;


    transform:


    translateY(-10%);


    cursor:pointer;


    color:


    var(--primary);


}







/* ==========================================================
                AUTH BUTTON
========================================================== */


.auth-btn{


    width:100%;


    margin-top:15px;


    border:none;


    cursor:pointer;


}








/* ==========================================================
                CHECKBOX
========================================================== */


.remember{


    display:flex;


    align-items:center;


    gap:10px;


    font-size:.9rem;


}



.remember input{


    accent-color:


    var(--primary);


}








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


.auth-link{


    text-align:center;


    margin-top:20px;


    color:


    var(--text-light);


}





.auth-link a{


    color:


    var(--primary);


    font-weight:600;


}







/* ==========================================================
                ERROR MESSAGE
========================================================== */


.auth-error{


    background:


    rgba(82,80,255,.15);


    border:


    1px solid rgba(82,80,255,.3);


    padding:


    12px;


    border-radius:


    15px;


    color:


    #365fd9;


    font-size:.9rem;


    display:none;


}








/* ==========================================================
                SUCCESS MESSAGE
========================================================== */


.auth-success{


    background:


    rgba(255,212,80,.15);


    border:


    1px solid rgba(255,212,80,.3);


    padding:


    12px;


    border-radius:


    15px;


    color:


    green;


    font-size:.9rem;


    display:none;


}







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


@media(max-width:600px){



.auth-section{


    padding:20px;


}



.auth-card{


    padding:30px 20px;


    border-radius:30px;


}



}