/* ============================================================================
   SELLIO.MA — RTL RESIDUE
   Load AFTER components.css ONLY when the document renders dir="rtl"
   (Arabic). Blade decides the link server-side, so every rule here is
   additionally guarded by [dir="rtl"] for local file previews.

   IMPORTANT: the overwhelming majority of the layout needs NO rtl sheet.
   components.css is written entirely with logical properties
   (margin-inline-*, padding-inline-*, inset-inline-start/end,
   border-inline-*, border-end-start-radius, text-align:start/end), so these
   already flip automatically under dir="rtl":
     - listing-card sale/rent badge (top-inline-start) and fav heart
       (top-inline-end) — auto-flip
     - .car-nav prev/next arrow placement, .car-count, .car-dots — auto-flip
     - .dd-menu anchoring (inset-inline-start/end:0) — auto-flip
     - toast anchoring: the fixed stack partial positions with
       inset-inline-end — auto-flip
     - wizard rail / timeline rail / stepper dot order — auto-flip
       (flex order is direction-aware)
   This file carries only the residue logical properties cannot express:
   glyph mirroring, physical flex alignment keywords, physical rotations,
   and the JS-driven carousel transform.
   ============================================================================ */

/* ---------- 1 · Directional glyphs that must mirror ---------------------- */
/* breadcrumb chevron separators (crumbs) and the "/" text separator */
[dir="rtl"] .crumbs .icon,
[dir="rtl"] .breadcrumb .sep{
  transform:scaleX(-1);
}
/* carousel arrows: their position already flipped logically — mirror the glyph */
[dir="rtl"] .car-nav.prev .icon,
[dir="rtl"] .car-nav.next .icon{
  transform:scaleX(-1);
}
/* "from → to" arrow inside the date-range control */
[dir="rtl"] .date-range .seg + .icon{
  transform:scaleX(-1);
}

/* ---------- 2 · Physical flex keyword (flex-end) on auth row ------------- */
[dir="rtl"] .auth-row{justify-content:flex-start;}

/* ---------- 3 · Physical rotations --------------------------------------- */
/* map pin: the teardrop corner is logical (border-end-start-radius) but the
   rotation that points it downward is physical — mirror the sign */
[dir="rtl"] .map-demo .pin{transform:rotate(45deg);}
[dir="rtl"] .map-demo .pin .icon{transform:rotate(-45deg);}

/* KPI ring dash-offset runs clockwise in both directions — no flip needed,
   listed here deliberately as a NO-OP anchor for future ring variants. */

/* ---------- 4 · Carousel slide transform --------------------------------- */
/* Alpine sets translateX(-N*100%) inline. CSS cannot mirror an inline
   transform, so the Alpine carousel component reads `dir` and applies the
   mirrored offset itself. This class is the documented hook for any future
   pure-CSS variant: */
[dir="rtl"] .media.carousel .slides{--carousel-dir:-1;}

/* ---------- 5 · Floating-label + trailing icon padding ------------------- */
/* already logical (padding-inline-end / inset-inline-end) — no rule needed;
   kept as a check marker, intentionally empty of overrides. */

/* ---------- 6 · Script-aware typography ---------------------------------- */
/* The --font stack (Segoe UI / system) covers Arabic; give Arabic runs a
   slightly taller line-height so diacritic stacking does not clip inside
   fixed-height chips and badges. */
[dir="rtl"] body{line-height:1.3;}
[dir="rtl"] .badge,
[dir="rtl"] .chip,
[dir="rtl"] .count-badge{line-height:1.4;}