/* ============================================================
   SCRAP GROUP — Arabic / RTL layer
   Applied only when document root has dir="rtl" (set by setLang()).
   Kept intentionally narrow: fix text direction, mirror the small
   handful of directional elements, and let the rest of the site's
   existing layout keep working. Anything that would visibly break
   in RTL gets an explicit override here rather than a blanket
   transform on the whole page.
   ============================================================ */
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
  font-family: 'Cairo', 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .hero-wordmark,
html[dir="rtl"] .sh em,
html[dir="rtl"] .stg,
html[dir="rtl"] .h-badge,
html[dir="rtl"] .eyebrow {
  font-family: 'Cairo', 'Tajawal', Georgia, serif !important;
  letter-spacing: 0 !important;
}
/* Numbers, prices, and IDs stay LTR embedded in RTL text so 2.75 SAR reads correctly */
html[dir="rtl"] .p-pr,
html[dir="rtl"] .co-total-v,
html[dir="rtl"] .hero-stat-value,
html[dir="rtl"] code,
html[dir="rtl"] .review-stars,
html[dir="rtl"] .rating-inline-stars {
  direction: ltr;
  unicode-bidi: isolate;
}
/* Store filter row should flow right-to-left */
html[dir="rtl"] .fils,
html[dir="rtl"] .h-btns,
html[dir="rtl"] .actions {
  flex-direction: row-reverse;
}
/* Nav links/right-cluster order: a `dir="rtl"` flex container already
   mirrors its main axis for free (first DOM child renders on the
   visual right) — that's the whole trick for correct RTL nav order.
   An older unconditional `.nav-links{flex-direction:row-reverse}`
   rule in site-base.css (plus a since-removed RTL-only copy for
   `.nav-right`) then flipped it a SECOND time, cancelling the
   mirroring back out to plain left-to-right DOM order. That's why
   "Home" was rendering on the far left next to the language cluster
   instead of on the right next to the logo, and why the lang/CTA/
   kebab cluster was showing kebab-first instead of kebab-last.
   Forcing plain `row` (not row-reverse) here restores the free
   mirroring in both languages. */
.nav-links,
.nav-right {
  flex-direction: row !important;
}
/* Nav bar rebuild (both languages): .nav-links used to be absolutely
   positioned and centered on the WHOLE nav bar via left:50% + a
   translateX transform, entirely independent of how much room
   .nav-right actually needed — the source of every nav overlap bug
   this round (language buttons colliding with Founders/Apply, RTL
   mirroring fighting margin-left:auto, the narrow-desktop collision).
   The request is specifically to keep ONLY the nav-links (Home/
   Founders/.../Apply) centered, while the language switcher, Discord
   CTA, and kebab stay in their own cluster — not grouped together.
   The robust way to center one flex item without it being able to
   overlap its siblings is to give it flex-grow so it fills exactly
   the leftover space between the logo and .nav-right (never more,
   never less), then center its own content inside that space. That
   makes overlap structurally impossible instead of something to
   patch with magic numbers every time the language switcher's width
   changes. The old high-specificity `html body .X{...!important}`
   position rules (legacy-critical.css, mobile.css, luxury.css) are
   matched here so this can actually override them regardless of
   load order — a plain `.nav-links{...}` selector can't outrank
   `html body .nav-links{...}`. */
html body .nav-links {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  max-width: none !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
}
html body .nav-right {
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}
.logo {
  flex: 0 0 auto !important;
}
/* Store card price row: keep price aligned to the visual end */
html[dir="rtl"] .p-ft {
  flex-direction: row-reverse;
}
/* Mobile hamburger overlay slides in from the right in RTL */
html[dir="rtl"] .mob a {
  text-align: center;
}
/* Footer column labels align right */
html[dir="rtl"] .ft-col,
html[dir="rtl"] .subs-body {
  text-align: right;
}
/* Text alignment inside cards/forms flips */
html[dir="rtl"] .p-nm,
html[dir="rtl"] .p-ds,
html[dir="rtl"] .p-cat,
html[dir="rtl"] .fl,
html[dir="rtl"] .co-item-body,
html[dir="rtl"] .co-lines dt,
html[dir="rtl"] .review-body,
html[dir="rtl"] .subs-note {
  text-align: right;
}
html[dir="rtl"] .co-lines dd,
html[dir="rtl"] .review-date {
  text-align: left;
}
/* Language switcher: keep it as an LTR-isolated pill so EN/ع
   render in a stable left-to-right order regardless of page dir,
   with no letter-spacing weirdness inherited from the luxury theme.
   Also brighten + enlarge the label — the theme's default 10px
   muted-gray + wide letter-spacing made a 2-character label nearly
   unreadable, and each button now carries a flag icon (GB/SA) so
   the language is identifiable at a glance even before reading.
   The outer .lang-switch box used to draw its own border AND each
   .lang-btn drew its own border, producing a visible "box inside a
   box" — two concentric purple rectangles — that read as an unstyled
   glitch next to the single seamless nav-cta pill beside it. Strip
   the outer wrapper down to a plain flex row (no border/background/
   padding of its own) and let each button carry its own pill, same
   convention as nav-cta and the kebab button. */
.lang-switch {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  gap: 6px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.lang-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #c8ccd6 !important;
  padding: 7px 10px !important;
  min-width: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}
.lang-btn.is-on,
.lang-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}
.lang-flag {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 2px !important;
  flex: 0 0 auto !important;
}
.lang-code {
  line-height: 1 !important;
}
/* Hero: chrome-theme.css injects a hardcoded English subtitle
   ('The Private House of Digital Craftsmanship') via ::after under
   the wordmark. Swap it to Arabic when the page is in RTL. */
html[dir="rtl"] #heroWordmark::after {
  content: 'الدار الرقمية الخاصة للحرفة والابتكار' !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-family: 'Cairo', 'Tajawal', system-ui, sans-serif !important;
}
/* Hero wordmark ('بلا حدود') looks best a touch smaller than the
   English 'BEYOND LIMITS' cap-heavy sizing — Arabic glyphs have
   more ink so 133px felt oversized in the earlier screenshot.
   Selector matches chrome-theme.css specificity (html body #home). */
html[dir="rtl"] .hero-wordmark,
html[dir="rtl"] #heroWordmark,
html[dir="rtl"] body #home .hero-wordmark {
  font-size: clamp(56px, 8vw, 108px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}
/* Nav Discord CTA: the pill uses a tight max-width on desktop that
   truncates 'دخول' + the ⌁ arrow. Give it just enough room to breathe. */
html[dir="rtl"] .nav-cta {
  letter-spacing: 0 !important;
  font-size: 12px !important;
  padding: 10px 16px !important;
  max-width: none !important;
}
/* Apply section card ('نموذج التقديم'): the decorative 'S' seal is
   absolutely positioned to the top-right corner for LTR. In RTL the
   text also starts from the right, so they collide. Move the seal
   to the top-left corner in RTL and leave text room via padding.
   Selectors match luxury.css '#apply .abox' specificity (0-1-1-0). */
html[dir="rtl"] #apply .abox .ab-seal {
  right: auto !important;
  left: 26px !important;
}
html[dir="rtl"] #apply .abox {
  padding-right: 34px !important;
  padding-left: 96px !important;
}
html[dir="rtl"] #apply .abox .ab-kicker,
html[dir="rtl"] #apply .abox .ab-title {
  text-align: right !important;
}
/* NOTE: the narrow-desktop hamburger-fallback hack that used to live
   here (hiding .nav-links between 901-1220px) is obsolete now that
   nav-links and nav-right share a single `.nav-group` flex container
   (see the nav bar rebuild rules above) — that alone gives enough
   room down to ~905px, right where the real mobile menu breakpoint
   (900px) already takes over. Verified live at 905/950/1000/1152px
   with no overlap before removing the fallback. */