/* ===========================================
   UI INTERFERENCE FIXES — el3edad-eg.com
   Version 1.0.3
   =========================================== */

/* ── CRIT-01/02: Kill welcome bar ghost click-trap ── */
.mysticky-welcomebar-fixed,
.mysticky-welcomebar-wrapper {
  pointer-events: none !important;
}
/* Only active when truly visible */
.mysticky-welcomebar-fixed.is-sticky-visible,
.mysticky-welcomebar-fixed[style*="opacity: 1"],
.mysticky-welcomebar-wrapper.active {
  pointer-events: auto !important;
}

/* ── CRIT-02: Hamburger above welcome bar ── */
button.navbar-toggle-hamburger,
.electro-hamburger-toggle,
.hamburger {
  position: relative !important;
  z-index: 10000001 !important;
}

/* ── CRIT-04: Remove hardcoded 1440px on products grid ── */
.products-8-1,
.products-8-1.stretch-full-width,
[class*="products-8-"] {
  width: 100% !important;
  max-width: 100% !important;
}
.products-8-1 .product,
[class*="products-8-"] .product {
  position: relative !important;
  left: auto !important;
  right: auto !important;
}

/* ── CRIT-06: Fix electro-overlay click trap ── */
.electro-overlay,
.off-canvas-bg,
.site-overlay,
.yith-quick-view-overlay {
  pointer-events: none !important;
}
body.off-canvas-open .electro-overlay,
.electro-overlay.active,
.yith-quick-view-overlay.active {
  pointer-events: auto !important;
}

/* ── CRIT-07: Fix RTL cart drawer direction ── */
html[dir="rtl"] .off-canvas-cart {
  left: auto !important;
  right: 0 !important;
  transform: translate3d(290px, 0, 0) !important;
  transition: transform 0.3s ease !important;
}
html[dir="rtl"] .off-canvas-cart.open,
html[dir="rtl"] .off-canvas-cart.active {
  transform: translate3d(0, 0, 0) !important;
}

/* ── CRIT-08: Move WhatsApp widget above sticky bar ── */
#ht-ctc-chat,
.ht-ctc,
.ht-ctc-chat,
#ctc-btn {
  bottom: 75px !important;
  top: auto !important;
}

/* ── HIGH-01: Fix product card hover overflow into next row ── */
.products > li.product {
  overflow: visible;
}
.products > li.product:hover .product-inner,
.products > li.product:focus-within .product-inner {
  position: relative !important;
  z-index: 20 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  /* Do NOT use position:absolute — it causes next-row bleed */
  top: auto !important;
  left: auto !important;
}

/* ── HIGH-02: Fix 5-col grid at 1440px (lower xxl breakpoint) ── */
@media (min-width: 1400px) {
  .row-cols-xl-3.row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20% !important;
  }
  .container, .container-xl, .container-xxl {
    max-width: 1370px;
  }
}

/* ── HIGH-03: Fix sticky add-to-cart bar width on desktop ── */
.mg-wsac-fix-sticky-bar,
.mg-wsac-container,
.wsac-fixed-bar {
  width: 100% !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
}
.mg-wsac-fix-sticky-bar .mg-wsac-inner-wrap,
.mg-wsac-fix-sticky-bar .wsac-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Fix invalid "Autopx" min-height value */
.mg-height,
.mg-wsac-fix-sticky-bar [style*="Autopx"] {
  min-height: auto !important;
  position: relative !important;
}

/* ── HIGH-04: Body padding compensation for fixed elements ── */
body {
  padding-bottom: 65px !important; /* sticky cart bar height */
}
@media (max-width: 768px) {
  body {
    /* Extra padding for mobile-only fixed elements */
    padding-bottom: 65px !important;
  }
}

/* ── HIGH-05: Fix QIB quantity widget height in product cards ── */
.price-add-to-cart {
  height: auto !important;
  min-height: 44px;
}
.qib-button-wrapper .qib-button,
input.qty.qib-quantity,
.quantity .minus,
.quantity .plus {
  height: 36px !important;
  line-height: 36px !important;
}

/* ── HIGH-06: Smooth sticky header collapse ── */
.electro-navbar-primary,
#primary-nav,
.header-nav-primary {
  transition: max-height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease !important;
  overflow: hidden;
}
.header-v3.stuck .electro-navbar-primary,
.site-header.stuck .header-nav-primary {
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ── HIGH-07: Fix stock badge position outside container ── */
li.product .stock,
li.product .stock.in-stock,
li.product .stock.out-of-stock {
  position: static !important;
  top: auto !important;
  transform: none !important;
  margin-top: 4px;
  display: block;
}

/* ── HIGH-08: Fix breadcrumb overflow on mobile ── */
@media (max-width: 768px) {
  nav.woocommerce-breadcrumb,
  .woocommerce-breadcrumb {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
  }
}

/* ── HIGH-09: Fix sticky bar internal content overflow on mobile ── */
@media (max-width: 480px) {
  .mg-wsac-fix-sticky-bar .img-col-width {
    display: none !important;
  }
  .mg-wsac-fix-sticky-bar .name-col-width {
    max-width: 55% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    right: auto !important;
  }
}

/* ── HIGH-10: Fix quantity buttons overlaying product images ── */
.add-to-cart-wrap,
.loop-add-to-cart-wrap {
  position: relative !important;
  top: auto !important;
  margin-top: 8px !important;
}
.add-to-cart-wrap .qib-button-wrapper,
.loop-add-to-cart-wrap .qib-button-wrapper {
  position: static !important;
}

/* ── RTL FIXES: Badge and sidebar positioning ── */
html[dir="rtl"] .advanced-woo-labels {
  left: auto !important;
  right: 0 !important;
}
li.product .onsale,
li.product span.onsale {
  z-index: 10 !important;
}
li.product .advanced-woo-labels {
  z-index: 8 !important;
}

/* ── SCROLL TO TOP: keep above sticky bar ── */
.back-to-top-wrapper,
.back-to-top-wrapper a,
#back-to-top,
.btn.btn-secondary.rounded-cricle {
  position: fixed !important;
  bottom: 75px !important;
  top: auto !important;
  z-index: 500 !important;
}

/* ── Z-INDEX COORDINATION SCALE ── */
:root {
  --z-product-card:      10;
  --z-dropdown:         100;
  --z-sticky-bar:       200;
  --z-overlay:          300;
  --z-modal:            400;
  --z-drawer:           500;
  --z-sticky-header:    600;
  --z-announcement:     700;
  --z-whatsapp:         800;
  --z-toast:            900;
}

/* ── MOBILE: Sticky header top-bar padding ── */
@media (max-width: 991px) {
  .site-content,
  #content {
    padding-top: 0;
  }
}

/* ── WOOCOMMERCE PRODUCT GALLERY: ensure opacity 1 on load ── */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery img {
  opacity: 1 !important;
  visibility: visible !important;
}


/* ── GREEN BUTTON OVERFLOW FIX (diagnosed Sep 2026) ── */
/*
 * Root causes (three distinct mechanisms):
 *
 * 1. DESKTOP: .products>.product .price-add-to-cart is display:flex flex-direction:row
 *    with container ~152px but children total ~239px (.price ~126px + .add-to-cart-wrap ~113px).
 *    The merchant-buy-now-button (padding:15px 25px; font-size:21px; width:113px) pushes
 *    .add-to-cart-wrap beyond the container width, causing 64px horizontal bleed left
 *    into the adjacent product card (RTL layout).
 *
 * 2. MOBILE: form.cart collapses to height:0 because ALL three children float —
 *    .qib-button-wrapper floats right; .single_add_to_cart_button and
 *    .merchant-buy-now-button both float left (from ab6d974172ae9efb0ff0bd8dc2e7aa48.css
 *    rule ".products>.product .add-to-cart-wrap .button{float:left}").
 *    No clearfix/BFC on form.cart → children escape the zero-height box and drift
 *    leftward across the 2-column grid boundary (all 6 in-stock product cards affected).
 *
 * 3. GENERAL: .products>.product .add-to-cart-wrap .button has float:left (RTL, from
 *    style-rtl.css) and float:right (LTR, style.css line 19204). li.product has no
 *    overflow:hidden to clip it; HIGH-01 above explicitly sets overflow:visible.
 */

/* Fix 1 — Desktop: stack .price and .add-to-cart-wrap vertically.
   Eliminates the 87px combined-vs-152px-container horizontal overflow;
   each child now takes the full ~152px container width. */
.products > .product .price-add-to-cart {
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Fix 2 — Mobile: BFC on form.cart via overflow:hidden.
   Forces form.cart to expand to the natural stacked height (~170px) of its
   three floated children (.qib-button-wrapper, .single_add_to_cart_button,
   .merchant-buy-now-button) instead of collapsing to height:0. */
.products > .product .add-to-cart-wrap form.cart {
  overflow: hidden !important;
}

/* Fix 2b — Clearfix on form.cart (belt-and-suspenders alongside overflow:hidden).
   Avoids any box-shadow clipping that overflow:hidden could cause inside the form. */
.products > .product .add-to-cart-wrap form.cart::after {
  content: "";
  display: table;
  clear: both;
}

/* Fix 3 — All: Remove float from the theme add-to-cart button and Merchant Buy Now button.
   Overrides ab6d974172ae9efb0ff0bd8dc2e7aa48.css "float:left" and
   style.css/style-rtl.css "float:right" / "float:left" rules. */
.products > .product .add-to-cart-wrap .button,
.owl-item > .product .add-to-cart-wrap .button,
.products > .product .add-to-cart-wrap button.single_add_to_cart_button,
.products > .product .add-to-cart-wrap button.merchant-buy-now-button,
.products > .product .add-to-cart-wrap a.merchant-buy-now-button {
  float: none !important;
}

/* Fix 3b — RTL: reset ::before pseudo-element float
   (style-rtl.css sets float:left on the gray-circle arrow pseudo-element). */
html[dir="rtl"] .products > .product .add-to-cart-wrap .button::before,
html[dir="rtl"] .owl-item > .product .add-to-cart-wrap .button::before {
  float: none !important;
}

/* Fix 4 — All: Clip any remaining overflow at the li.product boundary.
   Overrides HIGH-01 overflow:visible (set for card-lift hover effect).
   Trade-off: hover translateY(-4px) box-shadow is clipped at card edge,
   but button bleed into adjacent product cards is a hard layout bug. */
ul.products > li.product,
.products > li.product {
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════
   REPLACE ARROW ICON WITH ARABIC TEXT ON ADD-TO-CART BUTTON
   Deployed: Sep 2026
   Button: button.single_add_to_cart_button inside product loop
   Fix: Force the Electro theme's "show-btn" text-mode styles
   ═══════════════════════════════════════════════════════════ */

/* Step 1: Remove the arrow/cart icon from ::before */
.products > .product .add-to-cart-wrap .button::before,
.products > .product .added_to_cart::before,
.owl-item > .product .add-to-cart-wrap .button::before,
.owl-item > .product .added_to_cart::before,
li.product .add-to-cart-wrap button.single_add_to_cart_button::before {
  display: none !important;
  content: none !important;
}

/* Step 2: Show the Arabic text ("إضافة إلى السلة") — override icon-only state */
/* Mirrors the Electro theme's own .products.show-btn styles */
li.product .add-to-cart-wrap .button,
li.product .add-to-cart-wrap .added_to_cart,
li.product .add-to-cart-wrap button.single_add_to_cart_button,
.products > li.product .add-to-cart-wrap a.button,
.owl-item > .product .add-to-cart-wrap .button {
  font-size: 13px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-indent: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 36px !important;
  padding: 0.5em 1em !important;
  border-radius: 1.4em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  float: none !important;
  background-color: #555 !important;
  border: none !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  line-height: 1.3 !important;
  margin-top: 6px !important;
}

/* Step 3: Hover state — use theme primary color */
li.product .add-to-cart-wrap .button:hover,
li.product .add-to-cart-wrap button.single_add_to_cart_button:hover {
  background-color: var(--bs-ec-primary, #f0b429) !important;
  color: #fff !important;
}

/* Step 4: Ensure form.cart doesn't hide overflow from the now-taller button */
.products > .product .add-to-cart-wrap form.cart {
  overflow: visible !important; /* revert our earlier BFC fix here — clearfix handles it */
}

/* Step 5: Ensure the add-to-cart-wrap stacks vertically below the price */
li.product .add-to-cart-wrap {
  display: block !important;
  width: 100% !important;
}

/* ── HIDE only the GRAY اشتري الان button (button inside form.cart) ── */
/* Keep the GREEN standalone <a> version visible */
li.product form.cart button.merchant-buy-now-button,
li.product form.cart .merchant-custom-buy-now-button,
.products > li.product .add-to-cart-wrap form.cart .merchant-buy-now-button {
  display: none !important;
}

/* Ensure the standalone green <a> merchant button stays green and visible */
li.product a.merchant-buy-now-button,
li.product a.merchant-custom-buy-now-button,
.products > li.product > .product-inner a.merchant-buy-now-button,
.products > li.product .product-loop-footer > a.merchant-buy-now-button {
  display: flex !important;
  background-color: rgb(123, 205, 74) !important;
  color: #fff !important;
  width: 100% !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 0.5em 1em !important;
  border-radius: 1.4em !important;
  align-items: center !important;
  justify-content: center !important;
  text-indent: 0 !important;
  margin-top: 6px !important;
}