/*
====================================================
SERANTIO LOGIN - LUXURY STYLE
====================================================
*/


.serantio-login-box{

max-width:470px;

margin:40px auto;

background:#ffffff;

padding:50px;

border-radius:4px;

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

font-family:Poppins, Arial, sans-serif;

box-sizing:border-box;

}



/*
====================================================
LOGO
====================================================
*/


.serantio-logo{

text-align:center;

margin-bottom:40px;

}



.serantio-logo h2{

font-size:36px;

letter-spacing:8px;

font-weight:600;

margin:0;

font-family:
"Times New Roman",
serif;

color:#111;

}



.serantio-logo p{

margin-top:10px;

font-size:12px;

letter-spacing:3px;

text-transform:uppercase;

color:#777;

}




/*
====================================================
TABS
====================================================
*/


.tabs{

display:flex;

gap:12px;

margin-bottom:35px;

}



.tab{

flex:1;

padding:15px 10px;

border:none;

background:#f4f4f4;

cursor:pointer;

border-radius:2px;

font-size:12px;

letter-spacing:2px;

font-weight:600;

transition:.3s;

}



.tab:hover{

background:#e9e9e9;

}



.tab.active{

background:#000;

color:#fff;

}





/*
====================================================
PANELS
====================================================
*/


.panel{

display:none;

}



.panel.active{

display:block;

}





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


.serantio-form .field{

margin-bottom:24px;

}



.serantio-form label{

display:block;

font-size:12px;

letter-spacing:1px;

text-transform:uppercase;

margin-bottom:10px;

color:#333;

font-weight:500;

}




.serantio-form input[type="email"],
.serantio-form input[type="password"],
.serantio-form input[type="text"]{


width:100%;

height:55px;

padding:0 18px;

border:

1px solid #ddd;

border-radius:2px;

font-size:15px;

background:#fff;

color:#111;

transition:.3s;

box-sizing:border-box;

}



.serantio-form input::placeholder{

color:#999;

}



.serantio-form input:focus{

outline:none;

border-color:#000;

}





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


.password-wrapper{

position:relative;

}



.toggle-password{

position:absolute;

right:18px;

top:50%;

transform:translateY(-50%);

cursor:pointer;

font-size:17px;

user-select:none;

}





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


.options{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

font-size:13px;

}



.options label{

display:flex;

align-items:center;

gap:7px;

font-size:13px;

text-transform:none;

letter-spacing:0;

margin:0;

}



.options input{

width:auto!important;

height:auto!important;

}



.options a{

color:#111;

text-decoration:none;

border-bottom:1px solid #111;

}



.options a:hover{

opacity:.6;

}





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


.serantio-button{


width:100%;

height:58px;

background:#000;

color:#fff;

border:none;

border-radius:2px;

font-size:12px;

letter-spacing:4px;

font-weight:600;

cursor:pointer;

transition:.3s;

}



.serantio-button:hover{

background:#222;

transform:translateY(-2px);

}





/*
====================================================
TERMS
====================================================
*/


.terms{

display:flex;

align-items:center;

gap:8px;

font-size:12px!important;

letter-spacing:0!important;

text-transform:none!important;

margin-bottom:30px;

color:#555!important;

}



.terms input{

width:auto!important;

height:auto!important;

}





/*
====================================================
SOCIAL LOGIN
====================================================
*/


.social-area{

margin-top:40px;

}




.divider{

display:flex;

align-items:center;

gap:15px;

margin-bottom:25px;

color:#999;

font-size:10px;

letter-spacing:3px;

white-space:nowrap;

}



.divider:before,
.divider:after{

content:"";

height:1px;

background:#ddd;

flex:1;

}





/*
====================================================
NEXTEND SOCIAL LOGIN
====================================================
*/


.nsl-container{

width:100%!important;

}



.nsl-container-buttons{

display:flex!important;

flex-direction:column!important;

gap:12px!important;

}



.nsl-button{

width:100%!important;

height:55px!important;

border-radius:2px!important;

font-family:Poppins,Arial,sans-serif!important;

transition:.3s!important;

}



.nsl-button:hover{

transform:translateY(-2px);

}




/* Google */


.nsl-button-google{

background:#fff!important;

border:1px solid #ddd!important;

color:#111!important;

}



/* Facebook */

.nsl-button-facebook{

background:#1877f2!important;

color:#fff!important;

}



/* X / Twitter */

.nsl-button-x{

background:#000!important;

color:#fff!important;

}





/*
====================================================
WOOCOMMERCE FIX
====================================================
*/


.woocommerce form.login{

border:none;

padding:0;

margin:0;

}



.woocommerce .woocommerce-form-login button{

margin-top:0;

}





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


@media(max-width:600px){


.serantio-login-box{

margin:20px;

padding:35px 25px;

}



.serantio-logo h2{

font-size:28px;

letter-spacing:6px;

}



.options{

flex-direction:column;

align-items:flex-start;

gap:15px;

}



}