/* rtl.css — right-to-left overrides, loaded only on Arabic (/ar/) pages. The attribute already flips flex/grid flow and text direction; this file fixes the physical (left/right) spacing and alignment the base sheet sets. */ [dir="rtl"] body { text-align: right; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] p, [dir="rtl"] li { text-align: right; } /* lists indent on the correct side */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.15em; padding-left: 0; } /* keep Latin runs (prices, phone, brand, times) rendering left-to-right inline */ [dir="rtl"] .price, [dir="rtl"] [data-price], [dir="rtl"] .fc-card__price, [dir="rtl"] .product-card__price, [dir="rtl"] .money, [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: embed; display: inline-block; } /* header: language switcher gap on the correct side */ [dir="rtl"] .lang-switch { margin-left: .6rem; margin-right: 0; } /* eyebrows / labels keep their letter-spacing but align right */ [dir="rtl"] .eyebrow, [dir="rtl"] .section-title, [dir="rtl"] .footer__col h4 { text-align: right; } /* forms read right-to-left */ [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; } [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { direction: ltr; text-align: right; } /* footer + contact blocks */ [dir="rtl"] .footer__col, [dir="rtl"] .footer__contact, [dir="rtl"] .footer__brand { text-align: right; } /* breadcrumbs / inline separators flip naturally under rtl; nudge chevrons */ [dir="rtl"] .breadcrumb svg, [dir="rtl"] .btn svg { transform: scaleX(-1); } /* cards: the accent rail and media stay put (flex/grid mirror automatically); just ensure inner text aligns right */ [dir="rtl"] .fc-card, [dir="rtl"] .product-card, [dir="rtl"] .card, [dir="rtl"] .col-card { text-align: right; } /* off-screen / off-canvas elements: flip to the RTL side so they don't spill out the right edge (the base sheet hides them on the left via physical left/transform) */ [dir="rtl"] .skip-link { left: auto; right: -999px; } [dir="rtl"] .mobile-nav { transform: translateX(-100%); } [dir="rtl"] .mobile-nav.is-open { transform: translateX(0); } [dir="rtl"] body, [dir="rtl"] html { overflow-x: clip; }