/* MODAL */

.auth-modal{

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,0.65);

    backdrop-filter:blur(10px);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

/* BOX */

.auth-box{

    width:420px;

    background:
    #0f1f46;

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius:28px;

    padding:40px;

    position:relative;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.4);

}

/* CLOSE */

.close-auth{

    position:absolute;

    top:20px;

    right:20px;

    background:none;

    border:none;

    color:white;

    font-size:30px;

    cursor:pointer;

}

/* TABS */

.auth-tabs{

    display:flex;

    gap:15px;

    margin-bottom:35px;

}

.auth-tabs button{

    flex:1;

    padding:15px;

    border:none;

    border-radius:12px;

    background:#182d5d;

    color:white;

    cursor:pointer;

    font-size:16px;

}

.active-tab{

    background:
    linear-gradient(
        135deg,
        #0077ff,
        #33b5ff
    );

}

/* INPUTS */

.auth-box input{

    width:100%;

    padding:18px;

    margin-bottom:20px;

    border:none;

    border-radius:12px;

    background:#182d5d;

    color:white;

    font-size:15px;

}

/* BUTTON */

.auth-box button{

    width:100%;

    padding:18px;

    border:none;

    border-radius:14px;

    color:white;

    font-size:16px;

    cursor:pointer;

}

#loginBtn,
#registerBtn{

    background:
    linear-gradient(
        135deg,
        #0077ff,
        #33b5ff
    );

}

.auth-modal-divider{

    display:flex;

    align-items:center;

    gap:12px;

    margin:18px 0;

    color:#9fb0cf;

    font-size:13px;

    font-weight:600;

}

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

    content:"";

    flex:1;

    height:1px;

    background:rgba(255,255,255,0.14);

}

.auth-box .modal-google-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:#ffffff;

    color:#182033;

    border:
    1px solid rgba(255,255,255,0.18);

    font-weight:700;

}

.auth-box .modal-google-btn:hover{

    background:#eef4ff;

}

.modal-google-btn i{

    color:#ea4335;

    font-size:18px;

}