/* ============================================================
   Dar Noora — Design 2 (galia) RTL / Arabic overrides.
   Loaded only when the locale is Arabic. The base theme mostly
   relies on default text-align (which flips with dir="rtl"), so
   this file only patches the Arabic font + the handful of places
   that hard-code a physical side (left/right) or text-align:left.
   ============================================================ */

[dir="rtl"] body,
[dir="rtl"] .header,
[dir="rtl"] .footer { font-family: 'IBM Plex Sans Arabic', 'Source Sans 3', system-ui, sans-serif; }

/* Headings/letter-spacing read oddly in Arabic — relax tracking a touch */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .eyebrow, [dir="rtl"] .edit-bar__title { letter-spacing: 0 !important; }

/* Keep the EN · AR · ₪ switcher left-to-right so it reads naturally */
[dir="rtl"] .header__toggles { direction: ltr; }

/* Action buttons (wishlist + cart) move to the opposite corner in RTL */
[dir="rtl"] .editcard__actions { right: auto; left: 14px; }

/* Mega menu / drawer / card / portrait copy align to the right */
[dir="rtl"] .mega__col,
[dir="rtl"] .mega__col ul,
[dir="rtl"] .drawer__nav,
[dir="rtl"] .editcard__body,
[dir="rtl"] .portrait,
[dir="rtl"] .footer__col,
[dir="rtl"] .footer__brand { text-align: right; }

[dir="rtl"] .footer__social { justify-content: flex-start; }

/* Lists: drop the default left padding so bullets/indent sit on the right */
[dir="rtl"] .mega__col ul,
[dir="rtl"] .drawer__nav,
[dir="rtl"] .footer__col ul { padding-right: 0; padding-left: 0; list-style: none; }

/* --- Blocks that carry an inline text-align:left / physical side in the blade --- */
[dir="rtl"] .banner__body {
    left: auto !important;
    right: var(--gutter) !important;
    text-align: right !important;
}
[dir="rtl"] .hero__vidctrl {
    right: auto !important;
    left: var(--gutter) !important;
}
[dir="rtl"] .newsletter__copy {
    text-align: right !important;
}
[dir="rtl"] .newsletter__form {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Promo-banner zoom + general images stay correct (no flip needed) */
[dir="rtl"] .hero__scroll { left: auto; right: 50%; transform: translateX(50%); }

/* Hero prev/next arrows.
   .hero__nav is a flex row, so under dir="rtl" the buttons already reverse
   and land in the right places — prev on the right, next on the left. What
   does NOT flip is the icon inside each button: prev keeps fa-arrow-left and
   next keeps fa-arrow-right, so the pair reads "→ ←" and both point the wrong
   way for right-to-left content. Mirror the glyphs so prev points right
   (= back) and next points left (= forward). */
[dir="rtl"] .hero__nav button i { transform: scaleX(-1); }

/* Same problem on the press/"In the Media" carousel (.section--tight). .vips__arrows is a
   flex row, so the buttons themselves already swap sides under dir="rtl" — prev ends up on
   the right, next on the left — but the icons inside do not, leaving the pair reading
   "→ ←" with both pointing the wrong way. Mirror them so prev points right (= back) and
   next points left (= forward). The scroll direction is handled in galia.js. */
[dir="rtl"] .vips__arrows button i { transform: scaleX(-1); }