/**
 * Custom 2FA Login Styles
 * Complete stylesheet for 2FA verification pages
 */

/* Reset and basic styles */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body.login {
    background: #061634!important;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !important;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

#login {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.login h1 {
    text-align: center !important;
    margin-bottom: 25px !important;
}

.login h1 a {
    background-image: url('/wp-content/uploads/2020/04/BULATSA_Logo_BG_GreenWhite.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 200px !important;
    height: 80px !important;
    display: block !important;
    text-indent: -9999px !important;
    outline: none !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    text-decoration: none !important;
}

.login form,
#loginform,
form[name="validate_2fa_form"] {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 15px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    padding: 30px !important;
    margin-top: 20px !important;
    border: none !important;
}

.login form p,
#loginform p,
form[name="validate_2fa_form"] p {
    margin-bottom: 16px !important;
}

.login label,
#loginform label,
form[name="validate_2fa_form"] label {
    color: #3c434a !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    display: block !important;
    margin-bottom: 6px !important;
}

/* Input field styles */
.login input[type="text"],
.login input[type="tel"],
.login input[type="number"],
#loginform input[type="text"],
#loginform input[type="tel"], 
#loginform input[type="number"],
form[name="validate_2fa_form"] input[type="text"],
form[name="validate_2fa_form"] input[type="tel"],
form[name="validate_2fa_form"] input[type="number"],
#authcode,
input[name="authcode"] {
    font-size: 24px !important;
    text-align: center !important;
    padding: 15px !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    letter-spacing: 2px !important;
    font-weight: bold !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: white !important;
    margin-bottom: 15px !important;
}

.login input[type="text"]:focus,
.login input[type="tel"]:focus,
.login input[type="number"]:focus,
#loginform input[type="text"]:focus,
#loginform input[type="tel"]:focus,
#loginform input[type="number"]:focus,
form[name="validate_2fa_form"] input:focus,
#authcode:focus,
input[name="authcode"]:focus {
    border-color: #0284c7!important;
    box-shadow: 0 0 10px rgba(30, 58, 138, 0.3) !important;
    outline: none !important;
}

/* Button styles */
.wp-core-ui .button-primary,
.login .button-primary,
#loginform .button-primary,
form[name="validate_2fa_form"] .button-primary,
input[type="submit"],
#wp-submit {
    background: #0072B9!important;
    border-color: #0072B9 !important;
    padding: 12px 30px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    width: 100% !important;
    border: none !important;
    color: white !important;
    cursor: pointer !important;
    margin-bottom: 10px !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.wp-core-ui .button-primary:hover,
.login .button-primary:hover,
#loginform .button-primary:hover,
form[name="validate_2fa_form"] .button-primary:hover,
input[type="submit"]:hover,
#wp-submit:hover {
    background: #4aaa3a!important;
    border-color: #4aaa3a !important;
}

/* Information box styles */
.custom-2fa-info,
.message,
#login_error,
.login .message {
    background: #0284c7 !important;
    border: 1px solid #0284c7 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin: 20px 0 !important;
    color: #ffffff !important;
}

/* Enhanced Resend Button Container */
.login .twofa-email-resend {
    margin-top: 15px !important;
    text-align: center !important;
}

/* WP-2FA Setup and Admin Button Styles */
.wp2fa-modal .modal__content .modal__btn,
.wp2fa-modal .modal__content .wp2fa-setup-actions .button,
.wp-2fa-configuration-form .button,
.wp-2fa-setup-wrapper .button,
.wp-2fa-form .button {
    background: #0072B9 !important;
    border: 1px solid #0072B9 !important;
    color: #ffffff !important;
    padding: 12px 30px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    box-shadow: none !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    line-height: 1 !important;
    outline: none !important;
}

.wp2fa-modal .modal__content .modal__btn:hover,
.wp2fa-modal .modal__content .wp2fa-setup-actions .button:hover,
.wp-2fa-configuration-form .button:hover,
.wp-2fa-setup-wrapper .button:hover,
.wp-2fa-form .button:hover {
    background: #4aaa3a !important;
    border-color: #4aaa3a !important;
    color: #ffffff !important;
}

/* Resend Button*/
.twofa-email-resend .button,
.twofa-email-resend input.button,
#resend-code-btn,
.login .twofa-email-resend .button,
form[name="validate_2fa_form"] .twofa-email-resend .button {
    background: #0072B9 !important;
    border: 1px solid #0072B9 !important;
    color: #ffffff !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    width: 75% !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    box-shadow: none !important;
    margin-top: 10px !important;
}

.twofa-email-resend .button:hover,
.twofa-email-resend input.button:hover,
#resend-code-btn:hover,
.login .twofa-email-resend .button:hover,
form[name="validate_2fa_form"] .twofa-email-resend .button:hover {
    background: #4aaa3a !important;
    border-color: #4aaa3a !important;
    color: #ffffff !important;
}


/* Hide the default label for authcode */
.login form p label[for="authcode"],
#loginform label[for="authcode"],
form[name="validate_2fa_form"] label[for="authcode"] {
    display: none !important;
}

/* Back to site link styling */
#backtoblog,
#backtoblog a {
    text-align: center !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

#backtoblog a:hover {
    color: #4aaa3a !important;
}

/* Message styling for custom template */
#twofa-messages div {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* Dynamic message styling */
.twofa-message {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.twofa-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.twofa-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.twofa-message.info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}