/**
 * rtl-overrides.css — RTL Mirror Layer for Sport Tafsil (Arabic site)
 * ------------------------------------------------------------------
 * This is the canonical right-to-left mirror stylesheet for sporttafsil.com.
 * The S1 page templates load this file AFTER the per-page inline <style> block,
 * so every rule here is intentionally specific to `[dir="rtl"]` and is allowed
 * to override the physical (left/right) properties that the EN component CSS and
 * page-inline styles use.
 *
 * Strategy:
 *   1. Prefer CSS logical properties (inset-inline, margin-inline, padding-inline,
 *      text-align:start/end) so flex/grid auto-reverse handles most mirroring.
 *   2. Provide explicit [dir="rtl"] fallbacks for the concrete component classes
 *      used by the EN industry/landing pages (.hero__*, .yhero__*, .bcrumb__*,
 *      .sc/.scg, .pm-row, .stp-*, .pp/.pn, .svc/.svg-grid, .ft/.ft__*, .cc/.cs,
 *      .lw, .mrm, .pgtoc, .dm-* nav/dropdown, topbar).
 *   3. Mirror only DIRECTIONAL icons/arrows. NEVER flip logos or product images.
 *   4. Keep numbers / Latin codes / phone / email LTR inside RTL text via bdi/.ltr.
 *
 * Base palette context (for reference): emerald #047857, dark #03593F,
 * secondary #1A1A1A, gold accent #D4AF37.
 */

/* ========== 0. Global direction + text alignment ========== */
html[dir="rtl"],
html[dir="rtl"] body,
[dir="rtl"] {
  text-align: start;
}

[dir="rtl"] body {
  direction: rtl;
}

/* Latin / numeric isolation so codes, prices, phone, SKU stay LTR inside RTL */
[dir="rtl"] bdi,
[dir="rtl"] .ltr,
bdi,
.ltr {
  unicode-bidi: isolate;
  direction: ltr;
}

/* Generic helpers: any element using these utility classes flips alignment */
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* ========== 1. Breadcrumb ========== */
[dir="rtl"] .bcrumb__list {
  direction: rtl;
  /* flex auto-reverses children under rtl; keep visual reading right→left */
  flex-direction: row;
}
[dir="rtl"] .bcrumb__item {
  flex-direction: row;
}
/* Mirror the "/" separator so it leans the right way; content stays neutral */
[dir="rtl"] .bcrumb__item:not(:first-child)::before {
  /* slash separator is visually symmetric, but ensure it sits on start side */
  margin-inline-end: 0;
}

/* ========== 2. Page TOC ========== */
[dir="rtl"] .pgtoc {
  direction: rtl;
}
[dir="rtl"] .pgtoc__box {
  text-align: start;
}
[dir="rtl"] .pgtoc__list {
  direction: rtl;
}

/* ========== 3. Navigation / topbar / dropdowns (.dm-*) ========== */
/* Top-level nav: flex auto-flips logo<->menu; reinforce direction */
[dir="rtl"] .dm-container,
[dir="rtl"] .dm-nav,
[dir="rtl"] .dm-menu {
  direction: rtl;
}
/* Convert physical margins used by EN menu to logical so spacing mirrors */
[dir="rtl"] .dm-logo {
  margin-right: 0;
  margin-inline-end: 30px;
}
[dir="rtl"] .dm-nav-item,
[dir="rtl"] .dm-nav-link {
  /* .dm-nav already uses flex gap:8px (direction-agnostic) — do NOT add per-item
     margin in RTL: 6 items x 20px ~= 120px bloat that overflowed the nav left (CTA at -113). */
  margin-left: 0;
  margin-inline-start: 0;
}
/* .dm-nav physical margin-left:20px -> logical; allow shrink so the row never overflows the viewport */
[dir="rtl"] .dm-nav {
  margin-left: 0;
  margin-inline-start: 20px;
  min-width: 0;
}
[dir="rtl"] .dm-dropdown-toggle .bi,
[dir="rtl"] .dm-dropdown-toggle i {
  margin-left: 0;
  margin-inline-start: 6px;
}
/* Dropdown menu alignment: open from the start (right) edge under RTL */
[dir="rtl"] .dm-dropdown-menu {
  left: auto;
  right: 0;
  inset-inline-start: 0;
  text-align: start;
}
[dir="rtl"] .dm-dropdown-item {
  text-align: start;
}
/* Mobile toggle floats to the start side */
[dir="rtl"] .dm-mobile-toggle {
  float: left;
}
[dir="rtl"] .dm-cta-button {
  margin-left: 0;
  margin-inline-start: 20px;
}

/* Topbar */
[dir="rtl"] .topbar,
[dir="rtl"] [class*="topbar"] {
  direction: rtl;
  text-align: start;
}

/* ========== 4. Hero two-column layouts (.hero__*, .yhero__*) ========== */
[dir="rtl"] .hero__in,
[dir="rtl"] .yhero__in,
[dir="rtl"] .cyh__in {
  direction: rtl;
  /* grid/flex columns auto-reverse; copy now sits on the right */
}
[dir="rtl"] .hero__cp,
[dir="rtl"] .hero__ct,
[dir="rtl"] .yhero__cp,
[dir="rtl"] .yhero__ct {
  text-align: start;
}
[dir="rtl"] .yhero__stats {
  direction: rtl;
}
[dir="rtl"] .yhero__deco {
  /* decorative element: mirror its horizontal offset */
  left: auto;
  right: 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* ========== 5. Cards / lists / grids ========== */
[dir="rtl"] .scg,
[dir="rtl"] .sc,
[dir="rtl"] .svg-grid,
[dir="rtl"] .svc,
[dir="rtl"] .cs,
[dir="rtl"] .cc,
[dir="rtl"] .lw,
[dir="rtl"] .lw__grid,
[dir="rtl"] .mrm,
[dir="rtl"] .pn,
[dir="rtl"] .pp,
[dir="rtl"] .service-evidence-grid,
[dir="rtl"] .service-proof-grid,
[dir="rtl"] .service-proof-grid--reverse {
  direction: rtl;
}
[dir="rtl"] .sc,
[dir="rtl"] .sc__bd,
[dir="rtl"] .sc__h,
[dir="rtl"] .sc__de,
[dir="rtl"] .svc__h,
[dir="rtl"] .svc__de,
[dir="rtl"] .cc__id,
[dir="rtl"] .lw__c,
[dir="rtl"] .pn__t,
[dir="rtl"] .pn__m {
  text-align: start;
}
/* List indentation flips to the start side */
[dir="rtl"] ul,
[dir="rtl"] ol,
[dir="rtl"] .svc__bul,
[dir="rtl"] .service-proof-list,
[dir="rtl"] .sc__tags,
[dir="rtl"] .pn__tags {
  padding-left: 0;
  padding-inline-start: 1.25rem;
  text-align: start;
}
[dir="rtl"] .service-proof-list,
[dir="rtl"] .sc__tags,
[dir="rtl"] .pn__tags {
  padding-inline-start: 0;
}
/* Card hover/list rows keep gap behavior; just ensure flex direction */
[dir="rtl"] .service-proof-list li {
  flex-direction: row;
}

/* ========== 6. pm-row alternating media rows ========== */
[dir="rtl"] .pm-row,
[dir="rtl"] .pm-row__rows {
  direction: rtl;
}
[dir="rtl"] .pm-row__bd,
[dir="rtl"] .pm-row__h,
[dir="rtl"] .pm-row__de {
  text-align: start;
}
/* If EN uses --flip to swap media/copy order, it still works under rtl
   because the base order is reversed; no extra rule needed. */

/* ========== 7. Tables (.ft__tbl and generic) ========== */
[dir="rtl"] table,
[dir="rtl"] .ft__tbl {
  direction: rtl;
}
[dir="rtl"] th,
[dir="rtl"] td,
[dir="rtl"] .ft__tbl th,
[dir="rtl"] .ft__tbl td {
  text-align: start; /* first column now on the right */
}

/* ========== 8. Step / progress bars (.stp-*, .pp, .pn) ========== */
[dir="rtl"] .stp-bar,
[dir="rtl"] .stp-foot,
[dir="rtl"] .pp,
[dir="rtl"] .pn {
  direction: rtl;
}
[dir="rtl"] .stp-dot__t,
[dir="rtl"] .stp-dot__l,
[dir="rtl"] .stp-dot__c {
  text-align: start;
}

/* ========== 9. Footer (.ft, .ft-*, .ft__*) ========== */
[dir="rtl"] .ft,
[dir="rtl"] .ft-container,
[dir="rtl"] .ft-grid,
[dir="rtl"] .ft-column,
[dir="rtl"] .ft-links,
[dir="rtl"] .ft-contact,
[dir="rtl"] .ft-contact-list,
[dir="rtl"] .ft-company,
[dir="rtl"] .ft-bottom,
[dir="rtl"] .ft__meta,
[dir="rtl"] .ft__tbl {
  direction: rtl;
  text-align: start;
}
[dir="rtl"] .ft-social-icons {
  direction: rtl;
}

/* ========== 10. Buttons / CTA arrows & directional icons ========== */
/* Generic arrow helper: any decorative arrow in a CTA flips horizontally */
[dir="rtl"] .icon-arrow,
[dir="rtl"] .btn [aria-hidden="true"].icon-arrow,
[dir="rtl"] .sc__lk .icon-arrow,
[dir="rtl"] .cc__lk .icon-arrow,
[dir="rtl"] .svc__lk .icon-arrow {
  transform: scaleX(-1);
  display: inline-block;
}
/* Bootstrap-icons directional glyphs: mirror under RTL */
[dir="rtl"] .bi-arrow-right,
[dir="rtl"] .bi-arrow-left,
[dir="rtl"] .bi-chevron-right,
[dir="rtl"] .bi-chevron-left,
[dir="rtl"] .bi-arrow-right-short,
[dir="rtl"] .bi-arrow-left-short,
[dir="rtl"] .bi-caret-right-fill,
[dir="rtl"] .bi-caret-left-fill {
  display: inline-block;
  transform: scaleX(-1);
}
/* CTA link arrows that are plain text glyphs (→ / ←) inside link components */
[dir="rtl"] .sc__lk,
[dir="rtl"] .cc__lk,
[dir="rtl"] .svc__lk,
[dir="rtl"] .lw__c .lw__cap {
  text-align: start;
}

/* SAFETY: never flip brand logos or product/photo imagery */
[dir="rtl"] .dm-logo img,
[dir="rtl"] .ft-logo img,
[dir="rtl"] img.no-flip,
[dir="rtl"] .sc__im img,
[dir="rtl"] .pm-row__im img,
[dir="rtl"] .service-proof-media img,
[dir="rtl"] .service-evidence-card img {
  transform: none;
}

/* ========== 11. Misc directional offsets commonly used inline ========== */
/* Convert common inline physical positioning to logical when authors used it */
[dir="rtl"] .pgtoc__box,
[dir="rtl"] .card,
[dir="rtl"] .sec {
  text-align: start;
}