/* ==========================================================================
   FindMotos — RTL / Arabic overrides
   Loaded ONLY when the document is Arabic (dir="rtl"), so it never affects the
   English LTR layout. Phase 1 = Arabic webfont. Direction-flip overrides
   (drawer side, select arrow, chevrons, etc.) are added in a later phase.
   ========================================================================== */

/* Swap the base font to Cairo for Arabic — DM Sans has no Arabic glyphs.
   Redefining the token cascades to body, inputs and buttons (which use
   var(--font-base) / font: inherit). */
[dir="rtl"] {
  --font-base: "Cairo", "Segoe UI", Tahoma, sans-serif;
}

/* ── Direction flips ─────────────────────────────────────────────────────
   Flexbox/grid inline axes mirror automatically under dir=rtl; these rules
   handle the things that DON'T auto-flip: absolute offsets, the <select>
   arrow, slide-in panels, directional icons, and explicit text-align:left. */

/* Native <select> arrow → left side, pad the opposite side. */
[dir="rtl"] .select {
  background-position: left var(--space-4) center;
  padding-right: var(--space-4);
  padding-left: var(--space-7);
}

/* Card corner badges swap sides. */
[dir="rtl"] .badge { left: auto; right: var(--space-3); }
[dir="rtl"] .badge--corner-right { right: auto; left: var(--space-3); }

/* Directional chevrons (back arrows, filter-row chevron, drawer language arrow)
   point the other way. */
[dir="rtl"] .back-btn .icon,
[dir="rtl"] .mobile-drawer__lang-arrow,
[dir="rtl"] .filter-pick__chev { transform: scaleX(-1); }

/* Mobile filter slide-in panel comes from the left. */
[dir="rtl"] .option-picker {
  right: auto;
  left: 0;
  transform: translateX(-100%);
  box-shadow: 4px 0 20px rgba(26, 35, 48, 0.16);
}
[dir="rtl"] .option-picker.is-open { transform: translateX(0); }

/* The mobile nav is now a bottom sheet (rises from the bottom, full width), so
   it needs no left/right mirroring — its slide is vertical in both directions.
   The hamburger button keeps its EN-left / AR-right position via header flow. */
@media (max-width: 980px) {
  /* Drawer "View Profile" arrow points the reading direction — flip it in RTL. */
  [dir="rtl"] .mobile-drawer__profile-link::after { content: " ←"; }

  /* Side drawer is anchored to the start edge (right in RTL) via
     inset-inline-start. translateX is physical, so the closed/off-screen state
     must push it the other way — out to the right. Because this rule ties on
     specificity with .mobile-drawer.is-open and is loaded later, the open
     state must be re-asserted here or the drawer stays off-screen. */
  [dir="rtl"] .mobile-drawer { transform: translateX(100%); }
  [dir="rtl"] .mobile-drawer.is-open { transform: translateX(0); }
}

/* Hero: the heading/search are left-aligned via explicit text-align in LTR,
   which doesn't auto-flip — right-align them, and flip the side-shading
   gradient so the dark side sits under the (now right-aligned) text. Desktop
   only; mobile hero is centred + uses a vertical gradient already. */
@media (min-width: 760px) {
  [dir="rtl"] .hero__inner,
  [dir="rtl"] .hero h1,
  [dir="rtl"] .hero p { text-align: right; }
  [dir="rtl"] .hero--with-image {
    background-image:
      linear-gradient(270deg, rgba(26,35,48,0.72) 0%, rgba(26,35,48,0.48) 50%, rgba(26,35,48,0.24) 100%),
      var(--hero-image);
  }
}

/* The mobile hero centres its content, so the search-field label inherits
   text-align:center — but the RTL input/placeholder is right-aligned, leaving
   the label visually off. Right-align the label at all widths to match. */
[dir="rtl"] .hero__search .field label { text-align: right; }

/* ── Users dashboard area ────────────────────────────────────────────────
   The .dash grid, sidebar tab strip, spec-grids and forms mirror automatically
   under dir=rtl; these handle the things that don't: absolutely-positioned
   manage-card image overlays and the directional "→" card-action arrow. */
[dir="rtl"] .manage-status { left: auto; right: var(--space-3); }
[dir="rtl"] .manage-card__price { left: auto; right: var(--space-3); }
[dir="rtl"] .dash-card__action .icon { transform: scaleX(-1); }