/**
 * ==========================================================
 * RAGO ACCOUNT
 * FUTURISTIC REGISTER MODAL V3
 * PART-01
 * ==========================================================
*/

.rago-register-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-register-modal[hidden]{

    display:none;

}

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

.rago-register-overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at top,
        #00d4ff18,
        transparent 40%
    ),

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

    backdrop-filter:blur(16px);

}

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

.rago-register-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-register-window::-webkit-scrollbar{

    width:6px;

}

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

    background:#00d4ff55;

    border-radius:20px;

}

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

.rago-register-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-register-close:hover{

    transform:

    rotate(180deg)
    scale(1.08);

    background:#00d4ff;

    color:#06111f;

    box-shadow:

    0 0 25px rgba(
        0,
        212,
        255,
        .45
    );

}

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

.rago-register-header{

    text-align:center;

    margin-bottom:18px;

}

.rago-register-header h2{

    margin:0;

    font-size:34px;

    font-weight:800;

    color:#ffffff;

    line-height:1.1;

}

.rago-register-header p{

    margin-top:8px;

    color:#9ca9bb;

    font-size:16px;

}




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

.rago-register-options{

    display:flex;

    flex-direction:column;

    gap:12px;

}

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

.rago-register-method{

    width:100%;

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 18px;

    border-radius:14px;

    border:1px solid rgba(
        0,
        212,
        255,
        .22
    );

    background:

    linear-gradient(

        180deg,

        #101d31,

        #0d1829

    );

    color:#ffffff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.rago-register-method:hover{

    transform:

    translateY(-2px);

    border-color:#00d4ff;

    box-shadow:

    0 0 18px rgba(
        0,
        212,
        255,
        .22
    );

}

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

.rago-register-icon{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:

    linear-gradient(

        180deg,

        #163252,

        #0b1b30

    );

    font-size:20px;

    transition:.25s;

}

.rago-register-method:hover
.rago-register-icon{

    transform:scale(1.08);

    box-shadow:

    0 0 16px rgba(
        0,
        212,
        255,
        .30
    );

}

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

.rago-register-divider{

    display:flex;

    justify-content:center;

    margin:2px 0;

}

.rago-register-divider span{

    color:#75849a;

    font-size:14px;

    letter-spacing:3px;

}

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

.rago-register-footer{

    margin-top:18px;

    text-align:center;

}

.rago-register-footer p{

    color:#95a2b5;

    font-size:15px;

}

.rago-register-footer a{

    color:#00d4ff;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.rago-register-footer a:hover{

    color:#66e9ff;

}

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

@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);

    }

}

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

@media(max-width:768px){

.rago-register-modal{

padding:12px;

}

.rago-register-window{

padding:20px;

border-radius:18px;

max-width:100%;

}

.rago-register-header h2{

font-size:28px;

}

.rago-register-header p{

font-size:15px;

}

.rago-register-method{

padding:13px 16px;

font-size:16px;

}

.rago-register-icon{

width:36px;

height:36px;

font-size:18px;

}

.rago-register-close{

width:38px;

height:38px;

font-size:20px;

}

}










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

.rago-password-wrapper{
	position:relative;
	display:flex;
	align-items:center;
}

.rago-password-wrapper input{
	width:100%;
	padding-right:52px;
}

.rago-password-toggle{
	position:absolute;
	right:14px;
	top:50%;
	transform:translateY(-50%);
	width:32px;
	height:32px;
	border:none;
	background:transparent;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:18px;
	line-height:1;
	color:#7a7a7a;
	padding:0;
	transition:0.25s;
}

.rago-password-toggle:hover{
	color:#111;
}

.rago-password-toggle:focus{
	outline:none;
	box-shadow:none;
}