/* ==========================================================================
   RTL overrides — loaded LAST, only on Arabic pages (dir="rtl").

   The reference design ships rtl.css / rtl-v2..v4.css that mirror the
   original sections, but:
     * `home.css` loads AFTER them (it's emitted via @section Styles), so any
       directional rule there clobbers the mirroring;
     * several sections were added after the design (the banks-installments
       card slider, the rebuilt header chrome, the products-slider, the
       size-guide modal) and the reference RTL files never knew about them.

   This file flips just the directional (left/right) properties for those
   elements so the whole layout — not only the text — mirrors in Arabic.
   It is scoped under [dir="rtl"] and loaded only for AR, so LTR is never
   touched.
   ========================================================================== */

/* ---- Floating WhatsApp widget: move to the left edge in RTL ---- */
[dir="rtl"] .wa-float { right: auto !important; left: 22px; }
@media (max-width: 768px) {
    [dir="rtl"] .wa-float { right: auto !important; left: 16px; }
}
[dir="rtl"] .wa-channels { align-items: flex-start; }

/* ---- Banks installments slider: swap the prev/next arrows + flip chevrons ---- */
[dir="rtl"] .banks-installments .bi-prev { left: auto; right: 0; }
[dir="rtl"] .banks-installments .bi-next { right: auto; left: 0; }
/* (icon flip is already handled in banks-installments.css via [dir=rtl] .bi-prev i / .bi-next i) */

/* ---- Header chrome ---- */
/* Search field: the magnifier sits on the correct side automatically because
   the design uses fl/order, but make the suggestions panel align to the
   start edge. */
[dir="rtl"] .search-suggest { left: auto; right: 0; text-align: right; }
[dir="rtl"] .sug-item { text-align: right; }
/* Dropdown panels open from the start edge in RTL. */
[dir="rtl"] .dropdown-panel,
[dir="rtl"] .cart-popup,
[dir="rtl"] .profile-popup { left: auto; right: 0; text-align: right; }
[dir="rtl"] .dropdown-item { text-align: right; }
/* Cart line: image on the right, then name, then price, remove on the left.
   dir="rtl" + plain `row` already flows the first child (image) to the right;
   the earlier `row-reverse` double-flipped it (image to the LEFT). */
[dir="rtl"] .cart-line { flex-direction: row !important; text-align: right; }
[dir="rtl"] .cart-total { margin-right: 6px; margin-left: 0; }
/* Mirror the whole header row in RTL. dir="rtl" ALREADY flows a flex row
   right-to-left (logo at the right, actions at the left); rtl-v2.css wrongly
   added flex-direction:row-reverse which double-flipped it back to LTR (logo on
   the left). Force plain `row` so the natural RTL flow wins. */
[dir="rtl"] .header-main { flex-direction: row !important; }
[dir="rtl"] .header-actions { flex-direction: row !important; }
/* Top bar — same double-flip: rtl.css/rtl-v2.css set the row to row-reverse on top of
   dir=rtl, pushing the location to the LEFT. Force plain row so the blocks read
   right-to-left: location (right) → email → social → language (far left). */
[dir="rtl"] .topbar .container { flex-direction: row !important; }
[dir="rtl"] .topbar-left { flex-direction: row !important; }
[dir="rtl"] .topbar-left .social-block { flex-direction: row !important; }

/* ---- Products slider (product-card-v3) ----
   The reference rtl-v3.css sets `.product-card-v3 { direction:rtl }` AND
   `flex-direction:row-reverse` on the inner rows. Those two together cancel
   out and flow the rows LEFT-to-RIGHT again (e.g. the ThinQ/Auto-Clean/
   feature icons read LTR). Force the rows back to plain `row` so the
   card's `direction:rtl` flows everything right-to-left: labels first
   (rightmost), then chips/swatches/buttons running leftward. */
[dir="rtl"] .product-card-v3 .pv3-features,
[dir="rtl"] .product-card-v3 .pv3-capacity,
[dir="rtl"] .product-card-v3 .pv3-color,
[dir="rtl"] .product-card-v3 .pv3-actions { flex-direction: row !important; }
[dir="rtl"] .product-card-v3 .pv3-info { text-align: right; }
/* Sizing-guide link sits at the far (left) end of the capacity row. */
[dir="rtl"] .product-card-v3 .pv3-capacity .pv3-sizing { margin-inline-start: auto; margin-inline-end: 0; }
/* "Forward" arrows inside the card / hero / view-all buttons point RTL. */
[dir="rtl"] .pv3-actions .btn .fa-arrow-right,
[dir="rtl"] .view-all .btn .fa-arrow-right,
[dir="rtl"] .hero-actions .fa-arrow-right { transform: scaleX(-1); }
/* (Products-slider nav arrow positioning is left to rtl-v3 / rtl-v4.css.) */

/* ---- Product detail page ---- */
[dir="rtl"] .pd-quick-actions { left: auto; right: 16px; }
[dir="rtl"] .sizing-link { margin-left: 0; margin-right: auto; }
[dir="rtl"] .cta-row .btn .fa-arrow-right,
[dir="rtl"] .cta-row .btn .fa-arrow-left { transform: scaleX(-1); }

/* ---- Banks badges + section heads stay centred (no flip needed) ---- */
[dir="rtl"] .bi-badges { direction: rtl; }

/* ---- Generic: any inline arrow icon that points "forward" flips so it
        points the RTL reading direction. ---- */
[dir="rtl"] .btn .fa-arrow-right { transform: scaleX(-1); }

/* ==========================================================================
   RTL FLOW CORRECTIONS — exhaustive audit pass.

   ROOT CAUSE (confirmed across rtl.css / rtl-v2..v4.css): those files added
   `flex-direction: row-reverse` to flex ROWS for RTL. But `dir="rtl"` ALREADY
   flows a flex row right-to-left, so row-reverse DOUBLE-FLIPS them back to LTR.
   Every rule below forces plain `row` so the row mirrors correctly in Arabic.
   Scoped to [dir="rtl"] + loaded last, so EN is never touched.
   ========================================================================== */

/* ---- Global grid + nav rows (hero, checkout, blog, register, account,
        product-detail two-column, contact). The footer .row is a CSS grid
        (storefront-responsive.css) so flex-direction is a no-op there. ---- */
[dir="rtl"] .row { flex-direction: row !important; }
[dir="rtl"] .main-nav .container,
[dir="rtl"] .nav-list { flex-direction: row !important; }

/* ---- Top bar info / socials rows ---- */
[dir="rtl"] .topbar-left .info-item,
[dir="rtl"] .topbar-info,
[dir="rtl"] .topbar-socials { flex-direction: row !important; }

/* ---- Newsletter, feature strip, WhatsApp channels ---- */
[dir="rtl"] .newsletter-form { flex-direction: row !important; }
[dir="rtl"] .features-v2 .feature-item { flex-direction: row !important; }
[dir="rtl"] .wa-float .wa-channel { flex-direction: row !important; }

/* ---- Hero call-to-action rows ---- */
[dir="rtl"] .hero-actions,
[dir="rtl"] .hero-slide-text .hero-actions { flex-direction: row !important; }

/* ---- Product detail + shop rows ---- */
[dir="rtl"] .product-options-row,
[dir="rtl"] .chips-row,
[dir="rtl"] .product-features,
[dir="rtl"] .cta-row,
[dir="rtl"] .qty-row,
[dir="rtl"] .product-card .product-actions,
[dir="rtl"] .filter-block,
[dir="rtl"] .gallery-thumbs,
[dir="rtl"] .gallery-dots,
[dir="rtl"] .banks-grid,
[dir="rtl"] .tab-nav,
[dir="rtl"] .toolbar,
[dir="rtl"] .contact-card { flex-direction: row !important; }

/* ---- Header dropdown items + search suggestions (icon then text) ---- */
[dir="rtl"] .dropdown-panel a.dropdown-item,
[dir="rtl"] .search-suggest a.sug-item { flex-direction: row !important; }

/* ---- Cart PAGE product cell ---- */
[dir="rtl"] .cart-product { flex-direction: row !important; }

/* ==========================================================================
   CART-MINI popup — order inside each line must read, right-to-left:
   image (right) → product name → price / qty → remove (left).
   ========================================================================== */
[dir="rtl"] .cart-popup .cart-line { flex-direction: row !important; text-align: right !important; }
[dir="rtl"] .cart-popup .cart-line .cl-info,
[dir="rtl"] .cart-popup .cart-line .cl-info h5,
[dir="rtl"] .cart-popup .cart-line .cl-info small,
[dir="rtl"] .cart-popup .cart-line .cl-price { text-align: right !important; }
[dir="rtl"] .cart-popup h4 { text-align: right !important; }
[dir="rtl"] .cart-popup .cart-popup-actions { flex-direction: row !important; }

/* ==========================================================================
   MEGA-MENU ("كل الفئات" drawer) — head + each category row must read
   right-to-left, and the expand chevron points the RTL direction.
   ========================================================================== */
[dir="rtl"] .mega-menu .mega-head { flex-direction: row !important; text-align: right !important; }
[dir="rtl"] .mega-menu .mega-cat > a { flex-direction: row !important; text-align: right !important; }
[dir="rtl"] .mega-menu .mega-cat > a i.fa-chevron-right { transform: scaleX(-1); }
[dir="rtl"] .mega-menu .mega-cat.open > a i.fa-chevron-right { transform: scaleX(-1) rotate(-90deg) !important; }
[dir="rtl"] .mega-menu .mega-sub a,
[dir="rtl"] .mega-menu .mega-body { text-align: right !important; }

/* ==========================================================================
   ARROWS — ONE mechanism. Markup always emits `fa-arrow-right`; in RTL the CSS
   flips it so it points LEFT (the forward/reading direction). Back arrows use
   `fa-arrow-left` and must stay pointing left (never flipped).
   ========================================================================== */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-right-long { transform: scaleX(-1) !important; }
[dir="rtl"] .fa-arrow-left { transform: none !important; }
[dir="rtl"] .pagination .fa-chevron-left,
[dir="rtl"] .pagination .fa-chevron-right { transform: scaleX(-1) !important; }

/* ---- Banks slider nav arrows ----
   The AR markup already uses direction-correct arrows (prev = arrow-right on the
   right edge, next = arrow-left on the left edge). Neutralize the global arrow
   scaleX flip on these so they don't double-flip — otherwise both pointed left. */
[dir="rtl"] .banks-installments .bi-nav i { transform: none !important; }

/* ---- Features strip on phones ----
   Match the English layout exactly (icon ABOVE centered text). The desktop
   `[dir=rtl] .features-v2 .feature-item { flex-direction: row !important }` above
   was leaking into mobile and overriding home.css's column layout for Arabic. */
@media (max-width: 768px) {
  [dir="rtl"] .features-v2.features-v3 .feature-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* ---- Logical-property spacing fixes ---- */
[dir="rtl"] .opt-label { margin-right: 0 !important; margin-inline-start: 6px !important; }
[dir="rtl"] .filters .check-list a[href*="/shop/"] { padding-left: 0 !important; padding-right: 16px !important; }