/**
 * ==========================================================
 * RAGO ACCOUNT
 * LOGIN MODULE
 * V4 DESIGN
 * PART-01
 * ==========================================================
 */

.rago-login-modal{

    position:fixed;
    inset:0;

    z-index:999999;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:18px;

    overflow-y:auto;

    animation:ragoFade .30s ease;

}

.rago-login-modal[hidden]{

    display:none;

}

/*==================================================*/

.rago-login-overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at top,

        #00d4ff18,

        transparent 40%

    ),

    rgba(3,8,20,.82);

    backdrop-filter:blur(16px);

}

/*==================================================*/

.rago-login-window{

    position:relative;

    width:100%;

    max-width:440px;

    max-height:92vh;

    overflow:auto;

    background:

    linear-gradient(

        180deg,

        #0c1728,

        #091321

    );

    border:1px solid rgba(

        0,
        212,
        255,
        .28

    );

    border-radius:22px;

    padding:24px;

    box-shadow:

    0 20px 60px rgba(

        0,
        0,
        0,
        .55

    ),

    0 0 35px rgba(

        0,
        212,
        255,
        .14

    );

    animation:ragoPop .30s ease;

}

/*==================================================*/

.rago-login-window::-webkit-scrollbar{

    width:6px;

}

.rago-login-window::-webkit-scrollbar-thumb{

    background:#00d4ff55;

    border-radius:20px;

}

/*==================================================*/

.rago-login-close{

    position:absolute;

    top:14px;

    right:14px;

    width:42px;

    height:42px;

    border-radius:50%;

    border:1px solid rgba(

        0,
        212,
        255,
        .30

    );

    background:

    rgba(

        255,
        255,
        255,
        .06

    );

    color:#ffffff;

    font-size:22px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.30s;

}

.rago-login-close:hover{

    transform:

    rotate(180deg)
    scale(1.08);

    background:#00d4ff;

    color:#06111f;

    box-shadow:

    0 0 25px rgba(

        0,
        212,
        255,
        .45

    );

}

/*==================================================*/

.rago-login-header{

    text-align:center;

    margin-bottom:18px;

}

.rago-login-header h2{

    margin:0;

    font-size:34px;

    font-weight:800;

    color:#ffffff;

    line-height:1.1;

}

.rago-login-header p{

    margin-top:8px;

    color:#9ca9bb;

    font-size:16px;

}

















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

#rago-login-form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

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

.rago-form-group{

    display:flex;

    flex-direction:column;

}

.rago-form-group label{

    margin-bottom:8px;

    color:#ffffff;

    font-size:14px;

    font-weight:600;

}

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

.rago-form-group input{

    width:100%;

    height:48px;

    padding:0 16px;

    border-radius:12px;

    border:1px solid rgba(

        255,
        255,
        255,
        .10

    );

    background:

    linear-gradient(

        180deg,

        #111d31,

        #0d1829

    );

    color:#ffffff;

    font-size:15px;

    outline:none;

    transition:.25s;

    box-sizing:border-box;

}

.rago-form-group input::placeholder{

    color:#6f8098;

}

.rago-form-group input:focus{

    border-color:#00d4ff;

    box-shadow:

    0 0 0 4px rgba(

        0,
        212,
        255,
        .10

    );

}

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

.rago-password-wrap{

    position:relative;

}

.rago-password-wrap input{

    padding-right:55px;

}

.rago-password-toggle{

    position:absolute;

    right:12px;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    color:#00d4ff;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.rago-password-toggle:hover{

    color:#66e9ff;

}

/*==================================================
OPTIONS
==================================================*/

.rago-login-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

/*==================================================
REMEMBER
==================================================*/

.rago-remember{

    display:flex;

    align-items:center;

    gap:8px;

    color:#b9c8da;

    font-size:14px;

}

.rago-remember input{

    accent-color:#00d4ff;

}

/*==================================================
FORGOT PASSWORD
==================================================*/

.rago-forgot-password{

    color:#00d4ff;

    font-size:14px;

    text-decoration:none;

    transition:.25s;

}

.rago-forgot-password:hover{

    color:#66e9ff;

    text-decoration:none;

}

















/*==================================================
LOGIN BUTTON
==================================================*/

.rago-login-button{

    width:100%;

    height:50px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    letter-spacing:.3px;

    background:

    linear-gradient(

        180deg,

        #00d4ff,

        #00b7ff

    );

    box-shadow:

    0 0 18px rgba(

        0,
        212,
        255,
        .25

    );

    transition:.25s;

}

.rago-login-button:hover{

    transform:

    translateY(-2px);

    box-shadow:

    0 0 28px rgba(

        0,
        212,
        255,
        .35

    );

}

.rago-login-button:active{

    transform:

    scale(.98);

}

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

.rago-login-footer{

    margin-top:18px;

    text-align:center;

}

.rago-login-footer p{

    color:#95a2b5;

    font-size:15px;

}

.rago-login-footer a{

    color:#00d4ff;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.rago-login-footer a:hover{

    color:#66e9ff;

}

/*==================================================
FUTURE
==================================================*/

.rago-login-future{

    display:none;

}

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

@keyframes ragoFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes ragoPop{

    from{

        opacity:0;

        transform:

        translateY(20px)

        scale(.96);

    }

    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}

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

@media(max-width:768px){

.rago-login-modal{

padding:12px;

}

.rago-login-window{

padding:20px;

border-radius:18px;

max-width:100%;

}

.rago-login-header h2{

font-size:28px;

}

.rago-login-header p{

font-size:15px;

}

.rago-form-group input{

height:46px;

font-size:14px;

}

.rago-login-button{

height:48px;

font-size:15px;

}

.rago-login-footer{

margin-top:16px;

}

.rago-login-footer p{

font-size:14px;

}

.rago-login-close{

width:38px;

height:38px;

font-size:20px;

}

}