/* Raging Salads — rs-rtl.css: the Arabic site. rs-i18n.js sets <html lang="ar" dir="rtl"> before the page renders.
   Loaded after styles.css and rs-ordering.css on every page; every rule here is scoped to Arabic, so English is untouched.

   Type: Bebas Neue, Geist and JetBrains Mono have no Arabic, so every font stack falls through to Cairo
   (assets/fonts/fonts.css). Arabic letters join, so no letter-spacing (it breaks the joins) and no italics (Cairo has
   none, and a slanted fake looks broken). Display text, set in Bebas's tall caps in English, gets a heavy Cairo
   weight and room for Arabic's ascenders and descenders instead.

   Layout: flex and grid already follow the writing direction. The rules below flip what styles.css and
   rs-ordering.css wrote as left / right (the drawer, tags, corners, banners), and turn "go" arrows around. */

/* ---------------------------------------------------------------- type */
html[lang="ar"] { font-synthesis: none;
  /* JetBrains Mono's wide spaces open huge gaps between Arabic words: mono labels use Geist + Cairo in Arabic */
  --mono: "Geist", "Cairo", system-ui, sans-serif; }
html[lang="ar"] *, html[lang="ar"] *::before, html[lang="ar"] *::after { letter-spacing: 0 !important; }
html[lang="ar"] :is(em, i, .italic, .script) { font-style: normal; }
html[lang="ar"] body { line-height: 1.7; }

/* every element styles.css / rs-ordering.css sets in var(--display) or var(--script) */
html[lang="ar"] :is(.display, .script, .italic, .nav-links a, .nav-cta, .cart-pill, .hero-sub .script-inline, .btn-primary, .btn-ghost,
  .marquee-track, .filter-chip, .menu-card .name, .process-step h3, .sourcing-visual .script-overlay, .sourcing-list .row .name,
  .quote-block .q, .loc .city, .foot-grid li a, .news button, .drawer header h3, .drawer-row .info .nm, .drawer-empty h4, .drawer-empty p,
  .drawer footer .checkout, .featured-head h2, .feat-add, .feat .name, .chefs-card .name, .chefs-note-body .quote,
  .chefs-note-body .sig .scribble, .rs-btn, .rs-fs > legend, .rs-pill span, .rs-store-name, .rs-where-l, .menu-card .add.build,
  .rs-sheet .rs-head h3, .rs-choice legend, .rs-sheet .checkout) {
  font-weight: 800;
}
/* headings: Bebas runs at line-height 0.9–1; Arabic needs room above and below the line */
html[lang="ar"] :is(h2.display, .featured-head h2, .feat .name, .menu-card .name, .process-step h3, .loc .city, .drawer header h3,
  .drawer-empty h4, .rs-sheet .rs-head h3, .chefs-card .name, .quote-block .q, .sourcing-visual .script-overlay, .chefs-note-body .quote) {
  line-height: 1.3;
}
html[lang="ar"] .menu-card .name { font-size: 25px; }
/* section headings: Bebas fills 11vw in tall caps; Cairo at that size wraps one word a line */
html[lang="ar"] h2.display { font-size: clamp(40px, 6.6vw, 108px); line-height: 1.15; }
html[lang="ar"] .quote-block .q { line-height: 1.35; }
html[lang="ar"] .featured-head h2 { font-size: clamp(40px, 6.6vw, 108px); line-height: 1.15; }
html[lang="ar"] .loc .city { font-size: clamp(26px, 2.5vw, 38px); }
html[lang="ar"] .chefs-note-body .quote { font-weight: 600; }
/* labels set in small mono caps read better a size up in Arabic */
html[lang="ar"] :is(.menu-card .tag, .sourcing-list .row .meta, .hero-stat .lbl, .process-step .tick, .ticker-band .lbl) { font-size: max(1.15em, 11px); }
html[lang="ar"] .menu-card .size-add .size-l { font-size: 13px; }
html[lang="ar"] .rs-choice .rs-rule { font-size: 12px; font-weight: 500; }
html[lang="ar"] :is(.eyebrow, .foot-h, .foot-bottom, .section-head .num) { font-size: max(1em, 13px); }
/* the brand in the hero, the megaword and the footer: ريجنج سالادز (Cairo; SplitText keeps Arabic as whole words) */
html[lang="ar"] :is(.hero-h1, .megaword, .foot-megabrand) { line-height: 1.15 !important; font-weight: 900; }
html[lang="ar"] .hero-h1 { text-align: right; }

/* numbers, prices, order numbers: always left to right inside Arabic text; a typed phone number or email too, kept on
   the right like the rest of the form (the Arabic placeholder reads right to left until something is typed) */
html[dir="rtl"] :is(.price, .price-big, .rs-orderno, .counter, .rs-opt-price) { unicode-bidi: isolate; }
html[dir="rtl"] :is(input[type="tel"], input[type="email"]):not(:placeholder-shown) { direction: ltr; text-align: right; }

/* ---------------------------------------------------------------- arrows: "go" points the way Arabic reads */
/* the homepage (#root, React) mirrors its arrow spans here; the static pages swap the character in their text instead
   (rs-i18n-pages.js), so they are left alone */
html[dir="rtl"] #root :is(.arrow, .rs-arrow) { display: inline-block; transform: scaleX(-1); }
html[dir="rtl"] #root :is(.btn-primary, .btn-ghost):hover .arrow { transform: scaleX(-1) translateX(4px); }

/* ---------------------------------------------------------------- page chrome */
html[dir="rtl"] .skip-link { left: auto; right: 16px; }
html[dir="rtl"] .nav-links a::after { left: auto; right: 0; }
html[dir="rtl"] .scroll-progress { transform-origin: 100% 50%; }
/* mirrored with `scale`, not `transform`: the heroMarkFloat animation owns transform and would undo it */
html[dir="rtl"] .hero-mark { right: auto; left: 6%; scale: -1 1; }
html[dir="rtl"] .hero-stamps { right: auto; left: 40px; }
html[dir="rtl"] .hero-stamps .stamp:nth-child(2) { margin-right: 0; margin-left: 24px; }
html[dir="rtl"] .hero-stamps .tape { margin-right: 0; margin-left: 8px; }
html[dir="rtl"] .hero-side-meta { left: auto; right: 10px; }
html[dir="rtl"] .sticker { right: auto; left: 32px; }
html[dir="rtl"] .section-watermark { right: auto; left: -10px; }
/* the marquee scrolls the same way in both languages; each phrase still reads right to left */
html[dir="rtl"] .marquee { direction: ltr; }
html[dir="rtl"] .marquee-track > * { direction: rtl; unicode-bidi: isolate; }

/* ---------------------------------------------------------------- menu */
html[dir="rtl"] .menu-grid { border-left: 0; border-right: 1px solid var(--line); }
html[dir="rtl"] .menu-card { border-right: 0; border-left: 1px solid var(--line); }
html[dir="rtl"] .menu-card .tag { right: auto; left: 20px; }

/* ---------------------------------------------------------------- sections */
html[dir="rtl"] .process-step h3 .script { margin-left: 0; margin-right: 6px; }
html[dir="rtl"] .sourcing-visual .corner { left: auto; right: 20px; }
html[dir="rtl"] .sourcing-visual .corner.br { right: auto; left: 20px; }
html[dir="rtl"] .sourcing-visual .script-overlay { text-align: left; }
html[dir="rtl"] .sourcing-list .row .meta { text-align: left; }
html[dir="rtl"] .featured-head .right .sub { text-align: left; }
html[dir="rtl"] .feat .price-big { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .chefs-note-body .quote .openq { margin-right: 0; margin-left: 4px; }
html[dir="rtl"] .foot-megabrand em { margin-left: 0; margin-right: 0.18em; }   /* ريجنج سالادز reads right to left */
@media (max-width: 1100px) and (min-width: 801px) {
  html[dir="rtl"] .sourcing-list .row .meta { text-align: right; }
}
@media (max-width: 640px) {
  html[lang="ar"] .menu-card .name { font-size: 19px; }
  html[lang="ar"] .feat .name { font-size: 32px; }
  html[lang="ar"] .feat .price-big { font-size: 26px; }
  html[dir="rtl"] .sourcing-list .row .meta, html[dir="rtl"] .featured-head .right .sub { text-align: right; }
  html[dir="rtl"] .sourcing-visual .corner { right: 14px; }
  html[dir="rtl"] .sourcing-visual .corner.br { left: 14px; }
}

/* ---------------------------------------------------------------- bag / checkout: the drawer opens from the left */
html[dir="rtl"] .drawer { right: auto; left: 0; transform: translateX(-100%); border-left: 0; border-right: 1px solid var(--olive); }
html[dir="rtl"] .drawer.on { transform: translateX(0); }
html[dir="rtl"] .rs-banner { border-left: 0; border-right: 3px solid var(--olive); }
html[dir="rtl"] .rs-banner.warn { border-right-color: var(--rs-ink); }
html[dir="rtl"] .rs-banner.error { border-right-color: var(--rs-error); }
html[dir="rtl"] .rs-banner.info { border-right-color: var(--olive-soft); }
html[dir="rtl"] .rs-x { margin-right: 0; margin-left: -12px; }
/* the honeypot sits off screen to the left in English; in Arabic that would make the page scroll sideways */
html[dir="rtl"] .rs-hp { left: auto; right: -10000px; }
html[dir="rtl"] .rs-fs > legend { float: right; }
html[dir="rtl"] .rs-fs > legend + * { clear: right; }
html[dir="rtl"] .rs-field select { padding-right: 0; padding-left: 28px; background-position: left 4px center; }
html[dir="rtl"] .rs-sum li.has-problem span:last-child { text-align: left; }

/* ---------------------------------------------------------------- the switch, while the Arabic is not public yet
   (SWITCH_PUBLIC in rs-i18n.js): English visitors don't see it; ?lang=ar still works */
html.rs-switch-hidden :is(.lang-toggle, [data-rs-lang-toggle]) { display: none !important; }