/* ==========================================================================
   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"] .mobile-drawer__account-chev,
[dir="rtl"] .mobile-drawer__quick-chev,
[dir="rtl"] .filter-pick__chev,
[dir="rtl"] .ld-icon-btn--back .icon { transform: scaleX(-1); }

/* Listing-detail gallery overlay controls + badges swap sides. */
[dir="rtl"] .ld-icon-btn--back { left: auto; right: var(--space-3); }
[dir="rtl"] .ld-icon-btn--share { right: auto; left: var(--space-3); }
[dir="rtl"] .ld-icon-btn__bubble { right: auto; left: 0; }
[dir="rtl"] .gallery__count { right: auto; left: var(--space-3); }

/* Gallery modal + full-screen viewer: flip directional chevrons and sides. */
[dir="rtl"] .ld-modal__back .icon,
[dir="rtl"] .ld-viewer__nav .icon { transform: scaleX(-1); }
[dir="rtl"] .ld-viewer__nav--prev { left: auto; right: var(--space-3); }
[dir="rtl"] .ld-viewer__nav--next { right: auto; left: var(--space-3); }

/* Trader micro-site (detail page): flip the "Back to FindMotos" arrow, and
   mirror the hero art + scrim so the name still sits over the dark side. */
[dir="rtl"] .trader-hero__back svg { transform: scaleX(-1); }
[dir="rtl"] .trader-hero__scrim {
  background:
    linear-gradient(270deg, rgba(10,18,33,0.80) 0%, rgba(10,18,33,0.42) 42%, rgba(10,18,33,0.04) 100%),
    linear-gradient(180deg, rgba(10,18,33,0) 45%, rgba(10,18,33,0.55) 100%);
}

/* The filter option-picker is a full-width bottom sheet (rises from the bottom
   in both directions, like the home make/model picker), so it needs no RTL
   left/right mirroring — its slide is vertical. */

/* 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); }