/* Arabic + right-to-left support.

   Kept in its own file, appended after site.css, for two reasons: site.css is
   ~4,600 lines and editing it in place for direction fixes is error-prone,
   and this layer is expected to shrink as physical properties in site.css are
   converted to logical ones.

   The Arabic font is Noto Sans Arabic (SIL OFL), self-hosted in fonts/.
   Inter and Manrope carry Latin glyphs only, so Arabic had nothing to render
   with; the @font-face rules and their unicode-ranges live at the end of
   site.css. Because each face is range-limited, listing Inter first and
   Noto second lets Latin text stay in Inter while Arabic falls through to
   Noto within the same sentence. */

/* ---------- 1. fonts -------------------------------------------------- */

:root[dir="rtl"] {
  --font-b: "Inter", "Noto Sans Arabic", system-ui, sans-serif;
  --font-d: "Manrope", "Noto Sans Arabic", system-ui, sans-serif;
}

/* Arabic is a cursive script: letters join through their connecting strokes.
   letter-spacing inserts a gap at every one of those joins, which visibly
   breaks the shaping, and site.css uses tracking as heavy as .34em on display
   type. text-transform:uppercase is simply a no-op in Arabic. Both are reset
   here rather than edited out of the 35 rules that use them. */
:root[dir="rtl"] :is(h1, h2, h3, h4, h5, h6, p, span, a, li, strong, em, small,
                     div, button, label, input, textarea, select, dt, dd,
                     th, td, figcaption, blockquote, code) {
  letter-spacing: normal;
  text-transform: none;
}

/* The hero wordmark is Latin-only (Orbitron has no Arabic coverage) and is
   set as a decorative brand mark, so it stays LTR inside an RTL page. */
:root[dir="rtl"] .hero__type,
:root[dir="rtl"] .brand__mark {
  direction: ltr;
}

/* ---------- 2. text alignment ---------------------------------------- */

/* Any rule that hard-codes left/right alignment has to flip; under dir=rtl
   the default already becomes "start", so only explicit values need help. */
:root[dir="rtl"] .u-left,
:root[dir="rtl"] .rte,
:root[dir="rtl"] .prose { text-align: right; }

:root[dir="rtl"] .rte ul,
:root[dir="rtl"] .rte ol,
:root[dir="rtl"] .faq__q,
:root[dir="rtl"] .faq__a { text-align: right; }

/* Lists get their marker on the right automatically via padding, but the
   marker glyph itself needs the list to sit on the right edge. */
:root[dir="rtl"] .rte ul,
:root[dir="rtl"] .rte ol { padding-inline-start: 1.35em; }

/* ---------- 3. bidirectional text ---------- */

/* The bidi algorithm resolves a paragraph as one run, so an untranslated
   Latin string inside an RTL page gets reordered rather than merely aligned:
   "30-day free trial · Credit card required" rendered as
   "day free trial · Credit card required-30", because the leading digits are
   treated as a number and moved to the far end of the RTL line. That is not a
   cosmetic misalignment, it is scrambled copy: the trial length and the price
   stop reading as numbers.

   unicode-bidi:plaintext is the correct tool rather than isolate. Isolate
   stops a run interacting with its surroundings but still inherits the
   container direction, so a Latin-only string would still be reordered.
   Plaintext decides direction from the first strong character in the content,
   which means these elements render Latin correctly today and switch to RTL
   by themselves once the copy is actually translated, with no second pass. */
:root[dir="rtl"] .plan__note,
:root[dir="rtl"] .plan__desc,
:root[dir="rtl"] .plan__tag,
:root[dir="rtl"] .chip,
:root[dir="rtl"] .stat,
:root[dir="rtl"] .badge,
:root[dir="rtl"] .sku,
:root[dir="rtl"] .ref,
:root[dir="rtl"] .email,
:root[dir="rtl"] .machine__slot,
:root[dir="rtl"] .lead,
:root[dir="rtl"] .small,
:root[dir="rtl"] h1,
:root[dir="rtl"] h2,
:root[dir="rtl"] h3,
:root[dir="rtl"] h4,
:root[dir="rtl"] .h1,
:root[dir="rtl"] .h2,
:root[dir="rtl"] .h3 {
  unicode-bidi: plaintext;
}

/* Amounts are numbers plus a currency code and are always laid out LTR, even
   inside an Arabic sentence, because the digits and the unit must stay in that
   order. Direction is forced here rather than detected: a bare "99" has no
   strong character, so plaintext would have nothing to go on. */
:root[dir="rtl"] .plan__price,
:root[dir="rtl"] .price,
:root[dir="rtl"] .product__price {
  unicode-bidi: isolate;
  direction: ltr;
}

/* ---------- 4. icon mirroring ---------------------------------------- */

/* Directional glyphs have to point the other way. Transition arrows, the
   "next" chevrons in the machine wall and the back arrow in checkout are
   authored pointing right for an LTR reader. */
:root[dir="rtl"] .link-arrow svg,
:root[dir="rtl"] .btn svg.icon-arrow,
:root[dir="rtl"] .next-arrow { transform: scaleX(-1); }
/* ---------- 5. language switcher ------------------------------------- */

/* The switcher lives in the footer, not the header. nav__right is already
   626px wide inside a 1330px row and overflows its container at every width
   up to 1440px, so its leftmost control was already being clipped before
   Arabic existed. Adding a language button to that row would have hidden the
   colour-theme toggle to make room for it. The footer has no such pressure and
   puts the control where it stays reachable at every viewport. */
.lang--switch {
  font-weight: 600;
  white-space: nowrap;
}

.mobile-menu__lang {
  display: block;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}

/* ---------- 6. header fit -------------------------------------------- */

/* nav__right is a fixed-content group: its children cannot shrink, so when
   the row runs out of space the whole group is pushed past the viewport edge
   and clipped. Arabic nav labels are wider than their English equivalents
   (the header group measured 570px against 499px), which is what triggered
   it. Pinning the group and letting the links area absorb the slack keeps the
   cart, theme toggle and language control reachable at every width. */
.nav__right { flex: 0 0 auto; }
.nav__links { flex: 1 1 auto; min-width: 0; }

/* ---------- 7. header: language switcher, compact CTA ------------------ */

/* Flags are inline SVG data URIs rather than emoji. Windows does not render
   regional-indicator flag emoji and falls back to the bare two-letter code, so
   🇦🇪 would display as "AE" on a large share of machines. */
.flag{
  display:block; width:20px; height:14px; border-radius:2px; flex:none;
  background-size:cover; background-position:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.16) inset;
}
.flag--us{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23fff'/%3E%3Cg fill='%23B22234'%3E%3Crect y='0' width='20' height='1.54'/%3E%3Crect y='3.08' width='20' height='1.54'/%3E%3Crect y='6.15' width='20' height='1.54'/%3E%3Crect y='9.23' width='20' height='1.54'/%3E%3Crect y='12.31' width='20' height='1.69'/%3E%3C/g%3E%3Crect width='8.6' height='7.7' fill='%233C3B6E'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='1.7' cy='1.6' r='.8'/%3E%3Ccircle cx='4.3' cy='1.6' r='.8'/%3E%3Ccircle cx='6.9' cy='1.6' r='.8'/%3E%3Ccircle cx='3' cy='3.9' r='.8'/%3E%3Ccircle cx='5.6' cy='3.9' r='.8'/%3E%3Ccircle cx='1.7' cy='6.2' r='.8'/%3E%3Ccircle cx='4.3' cy='6.2' r='.8'/%3E%3Ccircle cx='6.9' cy='6.2' r='.8'/%3E%3C/g%3E%3C/svg%3E");
}
.flag--ae{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='4.67' fill='%2300713D'/%3E%3Crect y='4.67' width='20' height='4.66' fill='%23fff'/%3E%3Crect y='9.33' width='20' height='4.67' fill='%23000'/%3E%3Crect width='6' height='14' fill='%23FF0000'/%3E%3C/svg%3E");
}

.langsw{
  display:inline-flex; align-items:center; gap:2px; flex:none;
  padding:3px; border:1px solid var(--line); border-radius:999px;
  background:var(--panel);
}
.langsw__opt{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 9px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  color:var(--muted); text-decoration:none; white-space:nowrap;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.langsw__opt:hover{ color:var(--ink); }
/* Active pill grey. Deliberately its own variable rather than --brand:
   --brand (#9AA0A6) is the button grey for the whole site, and darkening that
   would repaint every primary CTA, the cart badge and the chat launcher.
   This is also a contrast win - the active label is --brand-ink (#E5E7EB), and
   the old pill sat at roughly 2.9:1 against it, which fails WCAG AA for the
   12px label. #6F767D lifts that to about 4:1. */
.langsw__active{
  background:#6F767D; color:#F2F3F4;
}
.langsw__opt.is-active{
  background:var(--langsw-active); color:var(--langsw-active-ink);
  --langsw-active:#6F767D; --langsw-active-ink:#F2F3F4;
}
/* Dark theme keeps the same step so the pill does not drift lighter again. */
:root[data-theme="dark"] .langsw__opt.is-active,
:root[data-theme="light"] .langsw__opt.is-active{
  --langsw-active:#6F767D; --langsw-active-ink:#F2F3F4;
}
/* The flag keeps its own colours on the active pill, so only the label
   inherits the brand background. */
.langsw__opt.is-active .flag{ box-shadow:0 0 0 1px rgba(255,255,255,.45) inset; }

/* 25% smaller than the .btn--sm it replaces: 40px -> 30px tall, 14px -> 11px
   type, 18px -> 12px side padding. Applied only to the header CTA so every
   other .btn--sm in the theme is untouched. */
.nav__cta{
  height:30px; padding:0 12px; font-size:11px; gap:6px; border-radius:999px;
}
.nav__cta svg{ width:14px; height:14px; }

@media (max-width:1180px){
  .langsw__t{ display:none; }
  .langsw__opt{ padding:6px; }
}
@media (max-width:900px){
  .langsw{ display:none; }  /* reachable from the mobile menu instead */
}

/* ---------- 8. floating dock (search + cart above chat) --------------- */

/* The cart FAB and the chat launcher were both pinned to the bottom-right
   corner at effectively the same coordinates, so the chat (z-index 9000) sat
   on top of the cart (z-index 1100) and the cart could not be clicked on any
   page. The two are now stacked: chat at the bottom, cart above it, search
   above that. inset-inline-* keeps the dock on the correct side in RTL. */
.cart-fab{
  inset-inline-end:22px; bottom:94px;
}
/* site.css pins .cart-fab with the physical `right`, so under RTL the logical
   inset-inline-end maps to `left` and both offsets would apply at once.
   Clearing `right` only in RTL keeps a single offset in both directions.
   Clearing it unconditionally is wrong: in LTR it would clear the very
   property inset-inline-end had just set and drop the button at its static
   position. */
:root[dir="rtl"] .cart-fab{ right:auto; }
.dock-btn--search{
  position:fixed; inset-inline-end:22px; bottom:166px; z-index:1090;
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  text-decoration:none; box-shadow:var(--sh-l);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.dock-btn--search:hover{ transform:translateY(-4px) scale(1.04); }
.dock-btn--search svg{ width:24px; height:24px; }

@media (max-width:640px){
  .cart-fab, .dock-btn--search{ width:52px; height:52px; inset-inline-end:16px; }
  .cart-fab{ bottom:84px; }
  .dock-btn--search{ bottom:148px; }
  .cart-fab svg, .dock-btn--search svg{ width:21px; height:21px; }
}

/* ---------- 9. nav fits alongside the switcher ----------------------- */

/* .nav__links is a flex item that can shrink, but its <a> children are
   white-space:nowrap, so once the language switcher took width from the
   header the links rendered past their own box and collided with the controls
   on their right.

   The collision existed on production at every width before this change
   (verified at 1600/1440/1280), because .wrap caps the header's content width:
   the link row gets a fixed ~620px budget at EVERY viewport wider than that
   cap, so 16px type with 13px side padding never fit. It therefore has to be
   the base size, not a breakpoint - the media queries below only tighten
   further as the viewport itself narrows. */
.nav__links{ gap:0; }
.nav__link{ padding:9px 9px; font-size:15px; }

@media (max-width:1360px){
  .nav__link{ padding:9px 6px; font-size:14px; }
  .nav__links{ gap:0; }
}
@media (max-width:1200px){
  .nav__link{ padding:9px 4px; font-size:13.5px; }
}
@media (max-width:1080px){
  .nav__link{ padding:9px 3px; font-size:13px; }
}