.modal.loginModal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);z-index: 999;padding: 0px 20px;margin-top:0;}
.loginModal .modal-content {
    background: var(--white-text);margin: 10% auto;border-radius: 24px;padding: 20px;
    max-width: 567px;
    position: relative;
}
.loginModal .modal-content  button{ padding: 10px; margin-top: 20px; width: 100%; border-radius: 8px; font-size:18px; background-color: var(--primary-color) !important; border: none; color: var(--white-text) !important; transition: all .3s ease; border: 1px solid #231f1f; }
.password-input-field img.showing {cursor: pointer;}
.resendOtpWrap{text-align:center;}
a.resendOtp { font-size: 18px; text-align: center; margin-top: 22px; margin-bottom: 22px; color: #231F1F; text-decoration: underline; font-weight: 500; text-align: center; display: inline-block; }
.loginModal  .inputField input { width: 100%; padding: 12px; margin-bottom: 0px; border: 1px solid #E5E5E5; border-radius: 6px; }
.loginModal .secHeadingContent { text-align: center; margin-bottom: 24px; margin-top: 20px; }
.loginModal .secHeadingContent p {margin-top: 10px;font-size: 18px;}
.loginModal .close { position: absolute; right: 13px; top: -4px; cursor: pointer; font-size: 37px; }
#forgotPasswordBtn{transition:all .3s ease;}
#forgotPasswordBtn:hover{color:#F5BB01;}
.auth-form .tabs .tab.active {background-color: #231F1F;color: #fff;}
.auth-container { display: flex; max-width: 1340px; margin: 80px auto !important; border-radius: 12px; overflow: hidden; padding-left: 20px; padding-right: 20px; }
.auth-container .auth-image { flex: 1; background-image: url('/wp-content/themes/twentytwentyone-child/assets/images/login-img.webp'); background-size: contain; background-repeat: no-repeat; background-position: center; border-radius: 20px; }
.auth-container  .auth-form { flex: 1; padding: 40px; padding-right: 0; padding-top:0; }
.auth-container .tabs { display: flex; justify-content: center; margin-bottom: 20px; border: 1px solid #E5E5E5; border-radius:8px; }
.auth-container .tab { flex: 1; border-radius:8px; text-align: center; padding: 12px 0; cursor: pointer; font-weight: bold; border-bottom: 2px solid transparent; transition: 0.3s; }
.auth-container .tab.active { border-bottom: 3px solid black; color: black; }
.auth-container .form-content {display: none;}
.auth-container .form-content.active {display: block;}
body .auth-container input, .auth-container select { width: 100%; padding: 10px 12px; margin-bottom: 4px; border: 1px solid #E5E5E5; border-radius: 6px; }
.auth-container .social-login {margin-top: 20px;text-align: center;}

.auth-container .social-btn { display: block; width: 100%; padding: 10px; margin-top: 10px; border: 1px solid #ccc; border-radius: 6px; cursor: pointer; }
.auth-container .or { text-align: center; margin: 15px 0; color: #888; }

.auth-container .small-text { font-size: 20px; text-align: center; margin-top: 22px; margin-bottom: 22px; color: #231F1F; text-decoration: none !important; font-weight: 500; }
.auth-container .auth-form{padding-bottom: 0;}
.error-message{margin-bottom: 10px;font-size: 14px;}
.registration_error_message {font-size: 14px;}
.auth-container .form-content label {display: inline-block;}

@media (min-width:820px){
    .form-grid-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
}