/**
 * MYO Tristate Validation - Inline Validation CSS
 * Provides visual feedback for valid, invalid, and incomplete states
 */

/* Base input styling for validation states */
.myo-tristate-invalid {
    border-color: #dc3232 !important;
    border-width: 1px !important;
    background: transparent !important;
    background-color: transparent !important;
}

.myo-tristate-valid {
    border-color: #00a32a !important;
    border-width: 1px !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Error message styling */
.myo-tristate-error {
    color: #ffffff;
    font-size: 12px;
    margin-top: 5px;
    display: block;
    line-height: 1.4;
    background: transparent !important;
    border: 1px solid #dc3232;
    padding: 8px 12px;
}

/* Container state */
.myo-tristate-has-error {
    position: relative;
}

/* Ensure error messages are visible and properly positioned */
.wapf-field-container .myo-tristate-error,
.wapf-field .myo-tristate-error {
    margin-top: 5px;
    margin-bottom: 10px;
}

/* wp-login.php forms AND WooCommerce account page: ensure auth inputs use the same validation UI */
/* LoginPress or custom themes might wrap inputs in <label> with pseudo-elements (::before, ::after) */
/* Error messages are inserted after the <label> or <p> wrapper, not directly after the input */

/* Keep all login form inputs transparent - use both properties to override shorthand */
body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"],
body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="password"],
.myo-form-wrapper input[type="text"],
.myo-form-wrapper input[type="email"],
.myo-form-wrapper input[type="password"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Override on focus as well */
body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus,
body.woocommerce-account input[type="text"]:focus,
body.woocommerce-account input[type="email"]:focus,
body.woocommerce-account input[type="password"]:focus,
.myo-form-wrapper input[type="text"]:focus,
.myo-form-wrapper input[type="email"]:focus,
.myo-form-wrapper input[type="password"]:focus {
    background: transparent !important;
    background-color: transparent !important;
}

/* WooCommerce-specific input classes - keep transparent always */
body.woocommerce-account input.woocommerce-Input,
body.woocommerce-account input.woocommerce-Input--text,
body.woocommerce-account input.woocommerce-Input--email,
body.woocommerce-account input.woocommerce-Input--password {
    background: transparent !important;
    background-color: transparent !important;
}

body.woocommerce-account input.woocommerce-Input:focus,
body.woocommerce-account input.woocommerce-Input--text:focus,
body.woocommerce-account input.woocommerce-Input--email:focus,
body.woocommerce-account input.woocommerce-Input--password:focus {
    background: transparent !important;
    background-color: transparent !important;
}

/* Override browser autofill background (Chrome/Edge) */
body.login input[type="text"]:-webkit-autofill,
body.login input[type="email"]:-webkit-autofill,
body.login input[type="password"]:-webkit-autofill,
body.login input[type="text"]:-webkit-autofill:hover,
body.login input[type="email"]:-webkit-autofill:hover,
body.login input[type="password"]:-webkit-autofill:hover,
body.login input[type="text"]:-webkit-autofill:focus,
body.login input[type="email"]:-webkit-autofill:focus,
body.login input[type="password"]:-webkit-autofill:focus,
body.woocommerce-account input[type="text"]:-webkit-autofill,
body.woocommerce-account input[type="email"]:-webkit-autofill,
body.woocommerce-account input[type="password"]:-webkit-autofill,
body.woocommerce-account input[type="text"]:-webkit-autofill:hover,
body.woocommerce-account input[type="email"]:-webkit-autofill:hover,
body.woocommerce-account input[type="password"]:-webkit-autofill:hover,
body.woocommerce-account input[type="text"]:-webkit-autofill:focus,
body.woocommerce-account input[type="email"]:-webkit-autofill:focus,
body.woocommerce-account input[type="password"]:-webkit-autofill:focus,
.myo-form-wrapper input[type="text"]:-webkit-autofill,
.myo-form-wrapper input[type="email"]:-webkit-autofill,
.myo-form-wrapper input[type="password"]:-webkit-autofill,
.myo-form-wrapper input[type="text"]:-webkit-autofill:hover,
.myo-form-wrapper input[type="email"]:-webkit-autofill:hover,
.myo-form-wrapper input[type="password"]:-webkit-autofill:hover,
.myo-form-wrapper input[type="text"]:-webkit-autofill:focus,
.myo-form-wrapper input[type="email"]:-webkit-autofill:focus,
.myo-form-wrapper input[type="password"]:-webkit-autofill:focus,
body.woocommerce-account input.woocommerce-Input:-webkit-autofill,
body.woocommerce-account input.woocommerce-Input--text:-webkit-autofill,
body.woocommerce-account input.woocommerce-Input--email:-webkit-autofill,
body.woocommerce-account input.woocommerce-Input--password:-webkit-autofill,
body.woocommerce-account input.woocommerce-Input:-webkit-autofill:hover,
body.woocommerce-account input.woocommerce-Input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* WooCommerce-specific input classes - force transparency in all states (typing, pasting, autofill) */
body.woocommerce-account input.woocommerce-Input,
body.woocommerce-account input.woocommerce-Input--text,
body.woocommerce-account input.woocommerce-Input--email,
body.woocommerce-account input.woocommerce-Input--password,
.woocommerce-form-login input.woocommerce-Input,
.woocommerce-form-login input.woocommerce-Input--text,
.woocommerce-form-login input.woocommerce-Input--email,
.woocommerce-form-login input.woocommerce-Input--password {
    background: transparent !important;
    background-color: transparent !important;
    transition: none !important;
}

body.woocommerce-account input.woocommerce-Input:focus,
body.woocommerce-account input.woocommerce-Input--text:focus,
body.woocommerce-account input.woocommerce-Input--email:focus,
body.woocommerce-account input.woocommerce-Input--password:focus,
.woocommerce-form-login input.woocommerce-Input:focus,
.woocommerce-form-login input.woocommerce-Input--text:focus,
.woocommerce-form-login input.woocommerce-Input--email:focus,
.woocommerce-form-login input.woocommerce-Input--password:focus {
    background: transparent !important;
    background-color: transparent !important;
    transition: none !important;
}

/* Chrome autofill overrides for WooCommerce inputs - using box-shadow trick */
body.woocommerce-account input.woocommerce-Input:-webkit-autofill,
body.woocommerce-account input.woocommerce-Input--text:-webkit-autofill,
body.woocommerce-account input.woocommerce-Input--email:-webkit-autofill,
body.woocommerce-account input.woocommerce-Input--password:-webkit-autofill,
.woocommerce-form-login input.woocommerce-Input:-webkit-autofill,
.woocommerce-form-login input.woocommerce-Input--text:-webkit-autofill,
.woocommerce-form-login input.woocommerce-Input--email:-webkit-autofill,
.woocommerce-form-login input.woocommerce-Input--password:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

body.woocommerce-account input.woocommerce-Input:-webkit-autofill:hover,
body.woocommerce-account input.woocommerce-Input--text:-webkit-autofill:hover,
body.woocommerce-account input.woocommerce-Input--email:-webkit-autofill:hover,
body.woocommerce-account input.woocommerce-Input--password:-webkit-autofill:hover,
.woocommerce-form-login input.woocommerce-Input:-webkit-autofill:hover,
.woocommerce-form-login input.woocommerce-Input--text:-webkit-autofill:hover,
.woocommerce-form-login input.woocommerce-Input--email:-webkit-autofill:hover,
.woocommerce-form-login input.woocommerce-Input--password:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

body.woocommerce-account input.woocommerce-Input:-webkit-autofill:focus,
body.woocommerce-account input.woocommerce-Input--text:-webkit-autofill:focus,
body.woocommerce-account input.woocommerce-Input--email:-webkit-autofill:focus,
body.woocommerce-account input.woocommerce-Input--password:-webkit-autofill:focus,
.woocommerce-form-login input.woocommerce-Input:-webkit-autofill:focus,
.woocommerce-form-login input.woocommerce-Input--text:-webkit-autofill:focus,
.woocommerce-form-login input.woocommerce-Input--email:-webkit-autofill:focus,
.woocommerce-form-login input.woocommerce-Input--password:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

body.login .myo-tristate-invalid,
body.login input.myo-tristate-invalid,
body.login input[type="email"].myo-tristate-invalid,
body.login input[type="text"].myo-tristate-invalid {
    border-color: #dc3232 !important;
    border-width: 1px !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.login .myo-tristate-invalid:focus,
body.login input.myo-tristate-invalid:focus,
body.login input[type="email"].myo-tristate-invalid:focus,
body.login input[type="text"].myo-tristate-invalid:focus {
    border-color: #dc3232 !important;
    border-width: 1px !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Extra specific selectors for login form fields to override theme styling */
body.login #user_email.myo-tristate-invalid,
body.login #user_login.myo-tristate-invalid,
body.login form#registerform input[type="email"].myo-tristate-invalid,
body.login form#loginform input[type="text"].myo-tristate-invalid,
body.login form#lostpasswordform input[type="text"].myo-tristate-invalid {
    border-color: #dc3232 !important;
    border-width: 1px !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.login #user_email.myo-tristate-invalid:focus,
body.login #user_login.myo-tristate-invalid:focus,
body.login form#registerform input[type="email"].myo-tristate-invalid:focus,
body.login form#loginform input[type="text"].myo-tristate-invalid:focus,
body.login form#lostpasswordform input[type="text"].myo-tristate-invalid:focus {
    border-color: #dc3232 !important;
    border-width: 1px !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.login .myo-tristate-valid,
body.login input.myo-tristate-valid,
body.login input[type="email"].myo-tristate-valid,
body.login input[type="text"].myo-tristate-valid {
    border-color: #00a32a !important;
    border-width: 1px !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.login .myo-tristate-valid:focus,
body.login input.myo-tristate-valid:focus,
body.login input[type="email"].myo-tristate-valid:focus,
body.login input[type="text"].myo-tristate-valid:focus {
    border-color: #00a32a !important;
    border-width: 1px !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Extra specific selectors for login form fields to override theme styling */
body.login #user_email.myo-tristate-valid,
body.login #user_login.myo-tristate-valid,
body.login form#registerform input[type="email"].myo-tristate-valid,
body.login form#loginform input[type="text"].myo-tristate-valid,
body.login form#lostpasswordform input[type="text"].myo-tristate-valid {
    border-color: #00a32a !important;
    border-width: 1px !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.login #user_email.myo-tristate-valid:focus,
body.login #user_login.myo-tristate-valid:focus,
body.login form#registerform input[type="email"].myo-tristate-valid:focus,
body.login form#loginform input[type="text"].myo-tristate-valid:focus,
body.login form#lostpasswordform input[type="text"].myo-tristate-valid:focus {
    border-color: #00a32a !important;
    border-width: 1px !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.login .myo-tristate-error {
    color: #ffffff;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    line-height: 1.5;
    background: transparent !important;
    border: 1px solid #dc3232;
    padding: 12px;
}

/* WooCommerce account page (MYO Login) - mirror login page styles */
body.woocommerce-account .myo-tristate-invalid,
body.woocommerce-account input.myo-tristate-invalid,
body.woocommerce-account input[type="email"].myo-tristate-invalid,
body.woocommerce-account input[type="text"].myo-tristate-invalid,
.myo-form-wrapper input.myo-tristate-invalid,
.myo-form-wrapper input[type="email"].myo-tristate-invalid,
.myo-form-wrapper input[type="text"].myo-tristate-invalid {
    border-color: #dc3232 !important;
    border-width: 1px !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.woocommerce-account .myo-tristate-invalid:focus,
body.woocommerce-account input.myo-tristate-invalid:focus,
body.woocommerce-account input[type="email"].myo-tristate-invalid:focus,
body.woocommerce-account input[type="text"].myo-tristate-invalid:focus,
.myo-form-wrapper input.myo-tristate-invalid:focus,
.myo-form-wrapper input[type="email"].myo-tristate-invalid:focus,
.myo-form-wrapper input[type="text"].myo-tristate-invalid:focus {
    border-color: #dc3232 !important;
    border-width: 1px !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.woocommerce-account .myo-tristate-valid,
body.woocommerce-account input.myo-tristate-valid,
body.woocommerce-account input[type="email"].myo-tristate-valid,
body.woocommerce-account input[type="text"].myo-tristate-valid,
.myo-form-wrapper input.myo-tristate-valid,
.myo-form-wrapper input[type="email"].myo-tristate-valid,
.myo-form-wrapper input[type="text"].myo-tristate-valid {
    border-color: #00a32a !important;
    border-width: 1px !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.woocommerce-account .myo-tristate-valid:focus,
body.woocommerce-account input.myo-tristate-valid:focus,
body.woocommerce-account input[type="email"].myo-tristate-valid:focus,
body.woocommerce-account input[type="text"].myo-tristate-valid:focus,
.myo-form-wrapper input.myo-tristate-valid:focus,
.myo-form-wrapper input[type="email"].myo-tristate-valid:focus,
.myo-form-wrapper input[type="text"].myo-tristate-valid:focus {
    border-color: #00a32a !important;
    border-width: 1px !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.woocommerce-account .myo-tristate-error,
.myo-form-wrapper .myo-tristate-error {
    color: #ffffff;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    line-height: 1.5;
    background: transparent !important;
    border: 1px solid #dc3232;
    padding: 12px;
}

/* Progressive Disclosure: Hide password field until email is valid */
body.woocommerce-account .woocommerce-form-login .form-row-password,
body.woocommerce-account .woocommerce-form-login p:has(#password),
body.woocommerce-account form.login .form-row-password,
body.woocommerce-account form.login p:has(#password),
.myo-form-wrapper .form-row-password,
.myo-form-wrapper p:has(#password),
body.login form#loginform p:has(#user_pass) {
    display: none;
    opacity: 0;
}

/* Show password field when email is valid */
body.woocommerce-account .woocommerce-form-login.myo-show-password .form-row-password,
body.woocommerce-account .woocommerce-form-login.myo-show-password p:has(#password),
body.woocommerce-account form.login.myo-show-password .form-row-password,
body.woocommerce-account form.login.myo-show-password p:has(#password),
.myo-form-wrapper.myo-show-password .form-row-password,
.myo-form-wrapper.myo-show-password p:has(#password),
body.login form#loginform.myo-show-password p:has(#user_pass) {
    display: block;
    animation: myo-slideDown 0.3s ease forwards;
}

/* Slide down animation for password field reveal */
@keyframes myo-slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
}

/* WooCommerce forms */
.woocommerce .myo-tristate-invalid,
.woocommerce-page .myo-tristate-invalid {
    border-color: #dc3232 !important;
    border-width: 1px !important;
}

.woocommerce .myo-tristate-valid,
.woocommerce-page .myo-tristate-valid {
    border-color: #00a32a !important;
    border-width: 1px !important;
}

.woocommerce .myo-tristate-valid:focus,
.woocommerce-page .myo-tristate-valid:focus {
    border-color: #00a32a !important;
    border-width: 1px !important;
}

.woocommerce .myo-tristate-error,
.woocommerce-page .myo-tristate-error {
    color: #ffffff;
    font-size: 12px;
    margin-top: 5px;
    display: block;
    line-height: 1.4;
    background: transparent !important;
    border: 1px solid #dc3232;
    padding: 8px 12px;
}

/* WooCommerce checkout */
.woocommerce-checkout .myo-tristate-invalid {
    border-color: #dc3232 !important;
    border-width: 1px !important;
}

.woocommerce-checkout .myo-tristate-valid {
    border-color: #00a32a !important;
    border-width: 1px !important;
}

.woocommerce-checkout .myo-tristate-valid:focus {
    border-color: #00a32a !important;
    border-width: 1px !important;
}

.woocommerce-checkout .myo-tristate-error {
    color: #ffffff;
    font-size: 12px;
    margin-top: 5px;
    display: block;
    line-height: 1.4;
    background: transparent !important;
    border: 1px solid #dc3232;
    padding: 8px 12px;
}

/* WooCommerce cart */
.woocommerce-cart .myo-tristate-invalid {
    border-color: #dc3232 !important;
    border-width: 1px !important;
}

.woocommerce-cart .myo-tristate-valid {
    border-color: #00a32a !important;
    border-width: 1px !important;
}

.woocommerce-cart .myo-tristate-valid:focus {
    border-color: #00a32a !important;
    border-width: 1px !important;
}

.woocommerce-cart .myo-tristate-error {
    color: #ffffff;
    font-size: 12px;
    margin-top: 5px;
    display: block;
    line-height: 1.4;
    background: transparent !important;
    border: 1px solid #dc3232;
    padding: 8px 12px;
}

/* WAPF specific styling */
.wapf-wrapper .myo-tristate-invalid {
    border-color: #dc3232 !important;
    border-width: 1px !important;
}

.wapf-wrapper .myo-tristate-valid {
    border-color: #00a32a !important;
    border-width: 1px !important;
}

.wapf-wrapper .myo-tristate-valid:focus {
    border-color: #00a32a !important;
    border-width: 1px !important;
}

.wapf-wrapper .myo-tristate-error {
    color: #ffffff;
    font-size: 12px;
    margin-top: 5px;
    display: block;
    line-height: 1.4;
    background: transparent !important;
    border: 1px solid #dc3232;
    padding: 8px 12px;
}

/* Product pages: visible on white/light desktop backgrounds */
.single-product .myo-tristate-error-product,
.single-product .wapf-field-container .myo-tristate-error-product,
.single-product .wapf-field .myo-tristate-error-product {
    font-size: 0.8em !important;
    line-height: 1.4 !important;
    padding: 8px 12px !important;
    background: #fff9f9 !important;
    border: 1px solid #dc3232;
    color: #0c2340 !important;
}

/* Product pages mobile: white text on dark background */
@media (max-width: 921px) {
    .single-product .myo-tristate-error-product,
    .single-product .wapf-field-container .myo-tristate-error-product,
    .single-product .wapf-field .myo-tristate-error-product {
        color: #ffffff !important;
        background: transparent !important;
        border: 1px solid #dc3232;
    }
}

/* WooCommerce single product pages: keep error helper text appropriately sized */
.single-product .wapf-field-container .myo-tristate-error,
.single-product .wapf-field .myo-tristate-error {
    font-size: 0.8em !important;
    line-height: 1.4 !important;
    padding: 8px 12px !important;
    background: transparent !important;
    border: 1px solid #dc3232;
    color: #ffffff;
}

/* Desktop: .myo-tristate-error styling - applied everywhere the class is used */
@media (min-width: 922px) {
    .myo-tristate-error,
    .wapf-field-container .myo-tristate-error,
    .wapf-field .myo-tristate-error,
    body.login .myo-tristate-error,
    body.woocommerce-account .myo-tristate-error,
    .myo-form-wrapper .myo-tristate-error,
    .woocommerce .myo-tristate-error,
    .woocommerce-page .myo-tristate-error,
    .woocommerce-checkout .myo-tristate-error,
    .woocommerce-cart .myo-tristate-error,
    .wapf-wrapper .myo-tristate-error,
    .single-product .wapf-field-container .myo-tristate-error,
    .single-product .wapf-field .myo-tristate-error {
        font-size: 0.8em !important;
        line-height: 1.4 !important;
        padding: 8px 12px !important;
        background: transparent !important;
        border: 1px solid #dc3232;
        color: #0c2340;
    }
}

/* Focus states - maintain validation border color on focus */
.myo-tristate-invalid:focus {
    border-color: #dc3232 !important;
    border-width: 1px !important;
    outline: none;
    background: transparent !important;
    background-color: transparent !important;
}

.myo-tristate-valid:focus {
    border-color: #00a32a !important;
    border-width: 1px !important;
    outline: none;
    background: transparent !important;
    background-color: transparent !important;
}

/* Accessibility improvements */
.myo-tristate-error[role="alert"] {
    /* Screen readers will announce this as an alert */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .myo-tristate-error {
        font-size: 11px;
    }
    
    body.login .myo-tristate-error {
        font-size: 13px;
        padding: 10px;
    }
}