/* ============================================================================
   SaudiRental — layouts/rtl.css
   ARABIC ONLY. The layout loads this sheet exclusively when the culture is
   ar-EG, so a rule here NEVER applies in English.

   app.css and portal.css use CSS logical properties throughout, which means
   almost everything mirrors on its own. Only genuinely physical rules that
   Bootstrap or a browser default hard-codes belong here.
   ============================================================================ */

/* Bootstrap 5's .btn-close uses PHYSICAL margins (margin: -.5rem -.5rem -.5rem auto),
   so it does not flip under dir="rtl" and lands on the wrong side of a modal header. */
.modal-header .btn-close { margin: -.5rem auto -.5rem -.5rem; }

/* Bootstrap's dropdown caret and float utilities are physical. */
.dropdown-menu-end { --bs-position: start; }

/* DataTables draws its own layout with physical classes. */
div.dt-container .dt-layout-row { direction: rtl; }
div.dt-container .dt-paging .pagination { justify-content: flex-start; }

/* Directional icons must point the other way in Arabic. Any icon that means
   "forward" carries .dir-icon so it flips here and nowhere else. */
.dir-icon {
    display: inline-block;
    transform: scaleX(-1);
}

/* The dashboard tile chevron is both directional AND absolutely centred, so the flip
   must re-state its translate — a bare scaleX(-1) would drop the centring. */
.stat-card-go.dir-icon { transform: translateY(-50%) scaleX(-1); }

/* Mirror the supporting landing-page lighting as well as its layout, so the
   bright accents stay on the intended side in Arabic. */
.cta-band {
    background:
        radial-gradient(70% 130% at 10% 0%, rgba(103, 232, 249, .26), transparent 58%),
        linear-gradient(225deg, var(--brand-900), var(--brand-600) 60%, #0e7490);
}

/* Leaflet's zoom control and attribution are absolutely positioned in physical
   coordinates; the MAP itself stays map-standard (docs/17). */
.leaflet-control-container .leaflet-top.leaflet-left { left: auto; right: 0; }
.leaflet-control-container .leaflet-bottom.leaflet-right { right: auto; left: 0; }

/* The timeline rail is drawn with logical inset already; the connector line for a
   nested list needs its physical text-indent reset. */
.timeline ul { padding-right: 1.2rem; padding-left: 0; }