/* =========================================================
   Kenvic WordPress Login / WP 2FA Branding
   ========================================================= */

/* Default WordPress login / WP 2FA page */
body.login {
    background: #f6f8fb !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Blue top bar to make it closer to your site */
body.login::before {
    content: "Call Kenvic: 1-888-939-6996";
    display: block;
    width: 100%;
    height: 42px;
    line-height: 42px;
    background: #426284;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

/* Login container */
body.login #login {
    width: 430px !important;
    max-width: calc(100% - 32px) !important;
    padding-top: 120px !important;
}

/* Replace WordPress logo with Kenvic logo */
body.login h1 a {
    background-image: url("/wp-content/uploads/2022/04/logo-new.png") !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    width: 220px !important;
    height: 72px !important;
    margin-bottom: 24px !important;
}

/* Main 2FA form card */
body.login form {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10) !important;
    padding: 32px 34px !important;
}

/* Text inside the 2FA card */
body.login form,
body.login form p,
body.login label {
    color: #1f2937 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

/* Important note text */
body.login strong {
    color: #111827 !important;
}

/* Labels */
body.login label {
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

/* Input fields */
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login input[type="number"],
body.login input.input {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    min-height: 46px !important;
    font-size: 18px !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

/* Input focus */
body.login input:focus {
    border-color: #426284 !important;
    box-shadow: 0 0 0 3px rgba(66, 98, 132, 0.18) !important;
    outline: none !important;
}

/* Trusted device checkbox: keep it native and easy to click. */
body.login #remember_device,
body.login input[type="checkbox"]#remember_device {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static !important;
    vertical-align: -3px !important;
}

body.login label[for="remember_device"] {
    cursor: pointer !important;
    display: inline !important;
    font-weight: 600 !important;
    vertical-align: middle !important;
}

/* Primary button: Log In */
body.login .button-primary,
body.login #wp-submit,
.wp-core-ui .button-primary {
    background: #426284 !important;
    border-color: #426284 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    min-height: 44px !important;
    padding: 0 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Primary hover */
body.login .button-primary:hover,
body.login #wp-submit:hover,
.wp-core-ui .button-primary:hover {
    background: #314d6a !important;
    border-color: #314d6a !important;
}

/* Secondary button: Resend Code */
body.login .button:not(.button-primary),
.wp-core-ui .button:not(.button-primary) {
    border-color: #426284 !important;
    color: #426284 !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    min-height: 44px !important;
    padding: 0 22px !important;
    font-weight: 700 !important;
}

/* Secondary hover */
body.login .button:not(.button-primary):hover,
.wp-core-ui .button:not(.button-primary):hover {
    background: #f1f5f9 !important;
    border-color: #314d6a !important;
    color: #314d6a !important;
}

/* Bottom links */
body.login #nav,
body.login #backtoblog {
    text-align: center !important;
    margin-top: 18px !important;
}

body.login #nav a,
body.login #backtoblog a {
    color: #426284 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
    color: #314d6a !important;
    text-decoration: underline !important;
}

/* Login errors / messages */
body.login .message,
body.login .notice,
body.login #login_error {
    border-left: 4px solid #426284 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

/* WooCommerce My Account page login/register */
.woocommerce-account form.login,
.woocommerce-account form.register,
.woocommerce-account form.woocommerce-form-login {
    border-radius: 10px !important;
}

.woocommerce-account button.button {
    background: #426284 !important;
    border-color: #426284 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.woocommerce-account button.button:hover {
    background: #314d6a !important;
    border-color: #314d6a !important;
}

/* Mobile */
@media (max-width: 480px) {
    body.login::before {
        font-size: 13px;
        height: 38px;
        line-height: 38px;
    }

    body.login #login {
        width: 100% !important;
        padding-top: 95px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    body.login form {
        padding: 24px !important;
        border-radius: 12px !important;
    }

    body.login h1 a {
        width: 190px !important;
        height: 60px !important;
    }
}

/* =========================================================
   Kenvic 2FA Custom Text
   ========================================================= */

body.login .kenvic-2fa-intro {
    margin-bottom: 22px !important;
}

body.login .kenvic-2fa-intro h2 {
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    color: #1f2937 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

body.login .kenvic-2fa-intro p {
    margin: 0 0 10px 0 !important;
    color: #1f2937 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

body.login .kenvic-2fa-intro .kenvic-2fa-help {
    margin-top: 12px !important;
    padding: 12px 14px !important;
    background: #f6f8fb !important;
    border-left: 4px solid #426284 !important;
    border-radius: 6px !important;
    color: #111827 !important;
}

body.login .kenvic-2fa-intro .kenvic-2fa-help strong {
    color: #111827 !important;
    font-weight: 700 !important;
}

body.login .kenvic-2fa-twilio-resend {
    clear: both !important;
    margin: 8px 0 0 !important;
}