/* =============================================================================
   IBTIKAR STORE — RTL OVERRIDES
   Applied when dir="rtl" (Arabic). Only overrides what CSS logical
   properties don't already handle automatically.
   ============================================================================= */

/* =============================================================================
   1. GLOBAL DIRECTION
   ============================================================================= */
[dir="rtl"] body { direction: rtl; text-align: right; }
[dir="rtl"] ul, [dir="rtl"] ol { padding-right: 0; }

/* =============================================================================
   2. NAVBAR & MEGA MENU
   ============================================================================= */
[dir="rtl"] .mega-menu-wrapper {
  transform: translateX(50%) translateY(-8px);
}
[dir="rtl"] .has-mega-menu:hover .mega-menu-wrapper,
[dir="rtl"] .mega-menu-wrapper.is-open {
  transform: translateX(50%) translateY(0);
}

[dir="rtl"] .dropdown-wrapper { inset-inline-start: auto; inset-inline-end: 0; }

/* =============================================================================
   3. MOBILE NAVIGATION
   In RTL the drawer is anchored to the logical "end" side (which maps to
   the left edge in Arabic). To slide it off-screen to the left we must use
   a negative translateX value.
   ============================================================================= */
[dir="rtl"] .mobile-nav-drawer {
  /* Position on the LEFT side for RTL */
  right: auto !important;
  left: 0 !important;
  /* Slide off-screen to the LEFT (negative X) */
  transform: translateX(calc(-100% - 40px)) !important;
}
[dir="rtl"] .mobile-nav-drawer.is-open { transform: translateX(0) !important; }

/* =============================================================================
   4. LIVE SEARCH
   ============================================================================= */
[dir="rtl"] .search-input { padding-right: 2.75rem; padding-left: 1rem; }
[dir="rtl"] .search-input-icon { right: 0.875rem; left: auto; }

/* =============================================================================
   5. PRODUCT CARDS
   ============================================================================= */
[dir="rtl"] .product-card-badges { right: 0.75rem; left: auto; }

/* =============================================================================
   6. BREADCRUMB SEPARATOR
   ============================================================================= */
[dir="rtl"] .breadcrumb-sep { transform: scaleX(-1); display: inline-block; }

/* =============================================================================
   7. ARROWS / CHEVRONS
   ============================================================================= */
[dir="rtl"] .solution-card-cta svg,
[dir="rtl"] .blog-card-link svg,
[dir="rtl"] .search-result-link svg {
  transform: scaleX(-1);
}

/* =============================================================================
   8. CART QUANTITY
   ============================================================================= */
[dir="rtl"] .qty-control { direction: ltr; }

/* =============================================================================
   9. FORM FIELDS
   ============================================================================= */
[dir="rtl"] .woocommerce-ordering select {
  background-position: left 0.75rem center;
  padding-right: 0.875rem;
  padding-left: 2.25rem;
}

/* =============================================================================
   10. WOOCOMMERCE OVERRIDES FOR RTL
   ============================================================================= */
[dir="rtl"] .woocommerce ul.products li.product { float: none !important; }
[dir="rtl"] .woocommerce div.product div.images { float: none !important; margin-right: 0 !important; margin-left: 2rem; }
[dir="rtl"] .woocommerce div.product div.summary { float: none !important; }
[dir="rtl"] .woocommerce span.onsale { left: auto !important; right: 0.75rem !important; }
[dir="rtl"] .woocommerce .flex-control-thumbs { direction: rtl; }
[dir="rtl"] .woocommerce form.cart { direction: rtl; }
[dir="rtl"] .woocommerce .cart_totals { float: none !important; text-align: right; }
[dir="rtl"] .woocommerce-cart-form .actions { direction: rtl; }
[dir="rtl"] .woocommerce-cart-form .coupon { direction: rtl; }

/* Checkout fields */
[dir="rtl"] .woocommerce-billing-fields__field-wrapper,
[dir="rtl"] .woocommerce-shipping-fields__field-wrapper { direction: rtl; }

/* =============================================================================
   11. FOOTER
   ============================================================================= */
[dir="rtl"] .footer-grid { direction: rtl; }
[dir="rtl"] .footer-bottom-inner { direction: rtl; }

/* =============================================================================
   12. ACCOUNT LAYOUT
   ============================================================================= */
[dir="rtl"] .account-layout { direction: rtl; }
[dir="rtl"] .woocommerce-orders-table--orders th,
[dir="rtl"] .woocommerce-orders-table--orders td { text-align: right; }

/* =============================================================================
   13. ON-SALE BADGE
   ============================================================================= */
[dir="rtl"] .woocommerce span.onsale { right: 0.75rem !important; left: auto !important; }

/* =============================================================================
   14. PAGINATION ARROWS
   ============================================================================= */
[dir="rtl"] .woocommerce-pagination .prev,
[dir="rtl"] .page-numbers .prev { transform: scaleX(-1); display: inline-block; }
[dir="rtl"] .woocommerce-pagination .next,
[dir="rtl"] .page-numbers .next { transform: scaleX(-1); display: inline-block; }

/* =============================================================================
   15. HERO DECORATIVE ELEMENT
   ============================================================================= */
[dir="rtl"] .hero-section::before { inset-inline-start: -10%; inset-inline-end: auto; }
[dir="rtl"] .page-hero::before { inset-inline-start: -5%; inset-inline-end: auto; }
[dir="rtl"] .cta-section::before { inset-inline-end: auto; inset-inline-start: -100px; }
[dir="rtl"] .cta-section::after { inset-inline-start: auto; inset-inline-end: -80px; }