/* ========================================================================== Right-to-left overrides — loaded only when the storefront is being read in a RTL language. Kept as a separate sheet so the prototype's design system and the Buyinn theme stay byte-for-byte the layouts they were signed off as. `dir="rtl"` on already mirrors normal flow, flexbox, grid and text alignment. What follows only fixes the places where the design pins things with physical left/right offsets, which the browser cannot flip on its own. ========================================================================== */ /* --- Typography ---------------------------------------------------------- */ /* Barlow and Barlow Condensed carry no Arabic glyphs. IBM Plex Sans Arabic is a close match in tone for body copy; Cairo stands in for the condensed display face, which has no Arabic equivalent. */ [dir="rtl"] { --font-body: "IBM Plex Sans Arabic", "Barlow", system-ui, sans-serif; --font-heading: "Cairo", "Barlow Condensed", system-ui, sans-serif; } /* Condensed Latin headings are tracked tight and uppercased; neither reads well in Arabic, which has no case and needs more room to breathe. */ [dir="rtl"] .bi-title, [dir="rtl"] .bi-eyebrow, [dir="rtl"] .bi-label, [dir="rtl"] .bi-btn, [dir="rtl"] .bi-nav__link, [dir="rtl"] .bi-deptbar__link, [dir="rtl"] .bi-panel__title { text-transform: none; letter-spacing: 0; } [dir="rtl"] .bi-title { line-height: 1.35; } /* --- Pinned overlays ----------------------------------------------------- */ [dir="rtl"] .bi-badge--pinned { left: auto; right: 12px; } [dir="rtl"] .bi-product-card__wish { right: auto; left: 10px; } [dir="rtl"] .bi-tool__count { right: auto; left: -6px; } [dir="rtl"] .bi-search__clear { right: auto; left: 4px; } /* The toast stack is centred with logical properties, so RTL needs no override. */ /* --- Banners ------------------------------------------------------------- */ [dir="rtl"] .bi-banner--primary .bi-banner__body { left: auto; right: 34px; } [dir="rtl"] .bi-banner--split .bi-banner__body { right: auto; left: auto; } /* The primary banner's overlay fades from the left in LTR; mirror the ramp so the copy still sits on the opaque end of the gradient. */ [dir="rtl"] .bi-banner--primary .bi-banner__overlay { transform: scaleX(-1); } /* --- Rules and separators ------------------------------------------------ */ [dir="rtl"] .bi-step { border-left: 0; border-right: 1px solid var(--color-accent-300); padding-left: 0; padding-right: 14px; } [dir="rtl"] .bi-step--boxed { border-right: 0; padding: 24px 20px; } [dir="rtl"] .seg-opt + .seg-opt { border-left: 0; border-right: 1px solid var(--color-divider); } /* --- Text alignment ------------------------------------------------------ */ [dir="rtl"] .bi-table th, [dir="rtl"] .bi-select__option, [dir="rtl"] .bi-tile__name { text-align: right; } [dir="rtl"] .bi-reviews__bar-count { text-align: left; } /* --- Auto margins used as spacers ---------------------------------------- */ [dir="rtl"] .bi-brand__mark { margin-right: 0; margin-left: auto; } /* --- Directional iconography --------------------------------------------- */ /* Arrows point the way the eye travels, so they have to turn around — wherever they appear: inline links, buttons, carousel controls, pagination. Targeting the icon itself rather than each container means no arrow can be missed. Non-directional marks (star, heart, lock, chevron-down) are left alone. */ [dir="rtl"] .bi-icon--arrow-right, [dir="rtl"] .bi-icon--arrow-left { transform: scaleX(-1); } /* --- Numerals ------------------------------------------------------------ */ /* Prices, counts and dates stay in Western digits, which is what Gulf and Levant e-commerce overwhelmingly uses, and keeps them legible next to the Latin currency symbol. */ [dir="rtl"] .bi-price, [dir="rtl"] .bi-tool__count, [dir="rtl"] .bi-pagination { font-feature-settings: "lnum"; direction: ltr; } [dir="rtl"] .bi-price { text-align: right; } /* --- Language switch ----------------------------------------------------- */ [dir="rtl"] .bi-tool--lang { letter-spacing: 0; } /* The carousel arrows point along the reading direction, so they swap. The track itself needs nothing: a grid in an RTL container already lays out and scrolls right-to-left. */ [dir="rtl"] .bi-carousel__nav { flex-direction: row-reverse; } /* The picker hangs off the field's start edge, which logical properties already handle. Only the number itself must stay left-to-right: a phone number reads the same in Arabic, and letting it inherit RTL puts the digits in reverse. */ [dir="rtl"] .bi-phone__input { direction: ltr; text-align: right; } [dir="rtl"] .bi-phone__dial { direction: ltr; unicode-bidi: isolate; } /* * Any field whose value is not Arabic text. * * Every number here is stored with its country code — "+966501112233" — and the * leading "+" is bidi-neutral. Inherit RTL and the browser resolves it to the * opposite end of the run, so the field reads "966501112233+": the plus jumps, * and with it any impression that the form understood what was typed. * * direction fixes the ordering; text-align puts the value back on the reading * edge, which is what direction alone would have taken away. Addresses and web * addresses have the same problem for the same reason. * * By type rather than by class: these are plain inputs scattered across the * account, checkout and auth forms, and a rule that has to be remembered on * each new one is a rule that will be missed. */ [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"] { direction: ltr; text-align: right; } /* The same value once it is only being read. Isolated rather than redirected, so one number cannot reorder the Arabic sentence around it. */ [dir="rtl"] .bi-ltr { direction: ltr; unicode-bidi: isolate; text-align: right; } /* The toast countdown drains from the reading edge. transform-origin takes physical keywords, so RTL needs it said explicitly. The stack's own centring uses physical `left: 50%`, which is already correct in both directions. */ [dir="rtl"] .bi-flash__timer { transform-origin: right center; } /* The hero's photograph sits on the left in Arabic, so the wash that fades it into the ground has to run the other way. */ [dir="rtl"] .bi-hero__art::after { background: linear-gradient(to left, rgb(16, 34, 47) 0%, rgba(16, 34, 47, .82) 14%, rgba(16, 34, 47, .32) 42%, rgba(16, 34, 47, 0) 72%), linear-gradient(to bottom, rgba(16, 34, 47, .34) 0%, rgba(16, 34, 47, 0) 26%, rgba(16, 34, 47, .34) 100%); }