/* ===== RTL overrides for Arabic pages ===== */
/* Loaded after site.css. Flexbox/grid rows already auto-mirror under dir="rtl";
   these rules only fix physical (left/right) properties that don't. */

:root{
 --fd:"Cairo","Caros","Segoe UI",system-ui,sans-serif;
 --fb:"Cairo","Caros","Segoe UI",system-ui,sans-serif;
}
body{direction:rtl;text-align:right}

.skip{left:auto;right:12px}
.caret{margin-left:0;margin-right:5px}
.sc-row .rr{margin-left:0;margin-right:auto}
.fpop.prodpop li .pm{margin-left:0;margin-right:auto}
.rcard .badge{margin-left:0;margin-right:auto}
.fbub .fpop{left:auto;right:0}
.fpop::after{left:auto;right:24px}
.ncard{text-align:right;padding:14px 44px 14px 15px}
.ncard .chk{left:auto;right:14px}
.story-body{left:auto;right:40px;text-align:right}
@media(max-width:720px){.story-body{left:auto;right:22px}}
.story-media .sm-tag{left:auto;right:28px}
.splitsec .sp-text .shead{text-align:right}
.pcard::after{left:auto;right:0}
.pcard:hover .plink svg{transform:translateX(-4px)}
.totop{right:auto;left:22px}
.fa{left:auto;right:-28px}
.fb{right:auto;left:-26px}
.hero-visual .fa{right:-6px;left:auto}
.hero-visual .fb{left:-6px;right:auto}

/* directional icons: mirror arrows/chevrons so they point the reading-forward way */
.rflow .ar,.plink svg,.out svg,.jn svg,.modnote svg{transform:scaleX(-1)}