/* =====================================
   OATIVA CLUB LOGIN PREMIUM FINAL
===================================== */


/* RESET */

body{
    background:#f8f5ef!important;
}



/* REMOVE WORDPRESS THEME WIDTH */

.oativa-club-login{

    width:100vw!important;

    max-width:none!important;

    margin-left:calc(50% - 50vw);

}



/* MAIN */

.oativa-club-login{

    min-height:100vh;

    display:flex;

    overflow:hidden;

    background:#f8f5ef;

}



/* ============================
   LEFT IMAGE
============================ */

.club-image{

    width:55%!important;

    min-height:100vh;

    background-size:contain!important;

    background-position:center left!important;

    background-repeat:no-repeat!important;

    background-color:#0b120d;

}




/* ============================
   RIGHT LOGIN AREA
============================ */


.club-login-area{

    width:45%!important;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f8f5ef;

}





/* ============================
   LOGIN CARD
============================ */


.login-card{


    width:430px;


    background:#ffffff;


    padding:45px;


    border-radius:35px;


    box-shadow:

    0 25px 80px rgba(0,0,0,.15);


    text-align:center;


}





/* CROWN */


.login-crown{


    width:75px;


    height:75px;


    margin:auto;


    border-radius:50%;


    background:#f6edd8;


    color:#c6953d;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:40px;


}






/* TITLE */


.login-card h1{


    font-size:38px;


    margin:25px 0 10px;


    color:#123;


    font-weight:700;


}





.login-card p{


    color:#777;


    margin-bottom:30px;


}






/* LABEL */


.login-card label{


    display:block;


    text-align:left;


    font-weight:600;


    margin-top:20px;


    color:#222;


}






/* INPUT */


.oativa-input{


    height:58px;


    border:1px solid #ddd;


    border-radius:15px;


    display:flex;


    align-items:center;


    padding:0 18px;


    background:white;


}




.oativa-input span{


    font-size:20px;


}




.oativa-input input{


    width:100%;


    border:0;


    outline:none;


    font-size:16px;


    padding-left:15px;


}






/* BUTTON */


#oativa-send-otp,
#oativa-verify-otp{


    width:100%;


    height:55px;


    margin-top:25px;


    border:0;


    border-radius:14px;


    background:#c6953d;


    color:white;


    font-size:17px;


    font-weight:bold;


    cursor:pointer;


}





#oativa-send-otp:hover{


    background:#b18332;


}





#oativa-verify-otp{


    background:#064b34;


}






/* RECAPTCHA */


#recaptcha-container{


    margin-top:20px;


    display:flex;


    justify-content:center;


}







/* OTP */


#otp-area{


    margin-top:20px;


}




#otp-area input{


    width:100%;


    height:55px;


    border:1px solid #ddd;


    border-radius:12px;


    padding:15px;


    box-sizing:border-box;


    text-align:center;


    font-size:18px;


    letter-spacing:4px;


}







/* SECURITY */


.secure-login{


    margin-top:30px;


    color:#777;


    font-size:14px;


}






/* FOOTER */


.oativa-login-footer{


    width:100%;


    text-align:center;


    padding:20px;


    background:white;


    color:#555;


}







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


@media(max-width:900px){


.oativa-club-login{


    width:100%!important;


    margin-left:0;


    display:block;


}




.club-image{


    width:100%!important;


    height:350px;


    min-height:350px;


}




.club-login-area{


    width:100%!important;


    padding:25px;


}





.login-card{


    width:100%;


    padding:35px 25px;


}



.login-card h1{


    font-size:32px;


}



}




@media(max-width:480px){


.club-image{


    height:280px;


    min-height:280px;


}



.login-card{


    border-radius:25px;


}


}