/* ==========================================================================
   BOA Checkout Popup - GLASSMORPHISM & RED THEME (Global)
   ========================================================================== */

/* 1. HIDE DEFAULT ELEMENTS */
body.woocommerce-checkout .checkout-login-reminder,
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-login:not(#boa-checkout-popup .woocommerce-form-login),
body.woocommerce-checkout .xoo-ml-login-sec:not(#boa-checkout-popup .xoo-ml-login-sec) {
    position: absolute !important; opacity: 0 !important; pointer-events: none !important; height: 0 !important; overflow: hidden !important;
}

#boa-login-form-injection-zone p.form-row-first,
#boa-login-form-injection-zone p.form-row-last,
#boa-login-form-injection-zone p:has(input[id*="username"]),
#boa-login-form-injection-zone p:has(input[id*="password"]),
#boa-login-form-injection-zone .woocommerce-form-login__toggle-wrapper,
#boa-login-form-injection-zone p.remember-row,
#boa-login-form-injection-zone .woocommerce-form-login__rememberme,
#boa-login-form-injection-zone p:has(button[value="Login"]),
#boa-login-form-injection-zone button[name="login"],
#boa-login-form-injection-zone .lost_password,
#boa-checkout-popup .xoo-ml-or,
#boa-checkout-popup .woocommerce-privacy-policy-text,
.xoo-ml-low-back,
.xoo-ml-login-with-pwd-btn { display: none !important; }
.boa-hide-toggle-btn { display: none !important; }

/* ==========================================================================
   2. GLASSMORPHISM OVERLAY & POPUP BOX
   KEY FIX: .boa-popup-overlay default me display:none hai
   Sirf .boa-popup-active class lagne par display:flex hoga
   ========================================================================== */

.boa-popup-overlay { 
    display: none !important; /* ✅ DEFAULT HIDDEN — JS class se control hoga */
    position: fixed !important; 
    z-index: 999999 !important; 
    left: 0 !important; 
    top: 0 !important; 
    width: 100% !important; 
    height: 100% !important; 
    background: rgba(0, 0, 0, 0.4) !important; 
    backdrop-filter: blur(10px) !important; 
    -webkit-backdrop-filter: blur(10px) !important;
    align-items: center !important; 
    justify-content: center !important; 
    padding: 20px !important; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; 
}

/* ✅ SIRF YEH CLASS LAGNE PAR POPUP VISIBLE HOGA */
.boa-popup-overlay.boa-popup-active {
    display: flex !important;
}

.boa-popup-content { 
    background: rgba(20, 20, 20, 0.4) !important; 
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6) !important; 
    padding: 35px 30px !important; 
    border-radius: 16px !important; 
    width: 100% !important; 
    max-width: 440px !important; 
    position: relative !important; 
    color: #fff !important; 
    max-height: 90vh !important; 
    overflow-y: auto !important; 
    box-sizing: border-box !important; 
}

/* 3. TABS */
.boa-popup-tabs-nav { display: flex !important; gap: 10px !important; margin-top: 20px !important; margin-bottom: 25px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; padding-bottom: 12px !important; }
.boa-tab-nav-btn { flex: 1 !important; background: transparent !important; border: none !important; padding: 12px !important; color: #8a909d !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; border-radius: 8px !important; transition: all 0.3s ease !important; }
.boa-tab-nav-btn:hover { color: #fff !important; background: rgba(255, 255, 255, 0.05) !important; }
.boa-tab-nav-btn.active-tab { color: #fff !important; background: rgba(192, 68, 52, 0.85) !important; box-shadow: 0 4px 15px rgba(192, 68, 52, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; }

/* 4. GLASS INPUTS */
.boa-tab-panel-content .form-row, .boa-tab-panel-content p { margin-bottom: 18px !important; display: block !important; width: 100% !important; float: none !important; clear: both !important; }
.boa-tab-panel-content label, .woocommerce-account form label { color: #a0a5b0 !important; font-weight: 500 !important; font-size: 14px !important; display: block !important; margin-bottom: 6px !important; text-align: left !important; }

.boa-tab-panel-content input.input-text, 
.boa-tab-panel-content input[type="text"], 
.boa-tab-panel-content input[type="email"], 
.boa-tab-panel-content input[type="tel"],
.woocommerce-account form.login input.input-text,
.woocommerce-account form.login input[type="text"],
.woocommerce-account form.login input[type="email"],
.woocommerce-account form.login input[type="tel"],
.woocommerce-account form.register input.input-text,
.woocommerce-account form.register input[type="text"],
.woocommerce-account form.register input[type="email"],
.woocommerce-account form.register input[type="tel"] { 
    background: rgba(0, 0, 0, 0.3) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    color: #fff !important; padding: 12px !important; border-radius: 8px !important; width: 100% !important; box-sizing: border-box !important; font-size: 14px !important; height: 48px !important; line-height: 48px !important; margin: 0 !important; transition: 0.3s !important; 
}
.boa-tab-panel-content input:focus, .woocommerce-account form input:focus { border-color: rgba(192, 68, 52, 0.8) !important; box-shadow: 0 0 10px rgba(192, 68, 52, 0.2) !important; outline: none !important; }

/* 5. XOOTIX SPECIFIC OVERRIDES */
.xoo-ml-has-cc { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; width: 100% !important; box-sizing: border-box !important; margin-top: 5px !important; }
.xoo-ml-has-cc .select2-container, .xoo-ml-has-cc select.xoo-ml-phone-cc { flex: 0 0 32% !important; width: 32% !important; min-width: 32% !important; margin: 0 !important; }
.xoo-ml-has-cc .select2-selection--single { background: rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 8px !important; height: 48px !important; color: #fff !important; display: flex !important; align-items: center !important; }
.xoo-ml-has-cc .select2-selection__rendered { color: #fff !important; padding-left: 10px !important; }
.xoo-ml-regphin { flex: 1 !important; width: 65% !important; margin: 0 !important; }
.xoo-ml-inlinver-cont { position: relative !important; width: 100% !important; }
.xoo-ml-inline-verify { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; color: #528de8 !important; font-weight: bold !important; cursor: pointer !important; font-size: 13px !important; z-index: 10 !important; }



/* 6. SUBMIT BUTTONS (RED) */
#boa-checkout-popup .woocommerce-form-login, #boa-checkout-popup .woocommerce-form-register { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; display: block !important; width: 100% !important; }

 
#boa-checkout-popup button.xoo-ml-login-otp-btn, 
#boa-checkout-popup button.woocommerce-form-register__submit,
.woocommerce-account form.login .woocommerce-button,
.woocommerce-account form.register .woocommerce-Button { 
     padding: 14px !important; font-weight: bold !important; cursor: pointer !important; 
    background: #c04434 !important;
    color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 8px !important; font-size: 15px !important; text-transform: uppercase !important; margin-top: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 15px rgba(192, 68, 52, 0.3) !important; transition: all 0.3s ease !important; 
}


#boa-checkout-popup button.xoo-ml-login-otp-btn:hover, 
#boa-checkout-popup button.woocommerce-form-register__submit:hover,
.woocommerce-account form.login .woocommerce-button:hover,
.woocommerce-account form.register .woocommerce-Button:hover { 
    background: #a83a2b !important; box-shadow: 0 6px 20px rgba(192, 68, 52, 0.5) !important; transform: translateY(-2px) !important; 
}

/* Global My Account Override for XootiX Buttons to match Red */
button.xoo-ml-login-otp-btn, .xoo-ml-login-sec button[type="submit"], .xoo-ml-login-sec input[type="submit"] { background: #c04434 !important; color: #fff !important; border: none !important; border-radius: 6px !important; }
/* Login with OTP blue toggle button hide karo — auto trigger hoga */
#boa-login-form-injection-zone .xoo-ml-open-lwo-btn {
    display: none !important;
}
.xoo-ml-ioc-input input.xoo-ml-otp-input {
    background: rgba(0, 0, 0, 0.3) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    color: #fff !important; 
    padding: 12px !important; 
    border-radius: 8px !important; 
    box-sizing: border-box !important; 
    font-size: 14px !important; 
    height: 48px !important;
}