/* اجعل المحاذاة الافتراضية تعتمد على الإتجاه */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="ltr"] body { direction: ltr; text-align: left; }

/* الروابط والنصوص العامة */
html[dir="rtl"] a, 
html[dir="rtl"] p, 
html[dir="rtl"] li, 
html[dir="rtl"] h1, 
html[dir="rtl"] h2, 
html[dir="rtl"] h3, 
html[dir="rtl"] h4, 
html[dir="rtl"] h5, 
html[dir="rtl"] h6 { text-align: right; }

html[dir="ltr"] a, 
html[dir="ltr"] p, 
html[dir="ltr"] li, 
html[dir="ltr"] h1, 
html[dir="ltr"] h2, 
html[dir="ltr"] h3, 
html[dir="ltr"] h4, 
html[dir="ltr"] h5, 
html[dir="ltr"] h6 { text-align: left; }

/* لو عندك عناصر محتاجة مسافات جانبية */
.spaced { margin-inline: 12px; }

/* قواعد بديلة للـ left/right القديمة (لا تلمس كودك الأصلي، بس نكسرها هنا): */
[dir="rtl"] .pull-left, [dir="rtl"] .float-left { float: inline-start !important; }
[dir="rtl"] .pull-right, [dir="rtl"] .float-right { float: inline-end !important; }
[dir="ltr"] .pull-left, [dir="ltr"] .float-left { float: inline-start !important; }
[dir="ltr"] .pull-right, [dir="ltr"] .float-right { float: inline-end !important; }

/* أي عنصر كان متموضع left/right: نعدّله بمنطقية */
[dir="rtl"] .pos-left  { left: auto !important; right: auto !important; inset-inline-start: 0 !important; }
[dir="rtl"] .pos-right { right: auto !important; left: auto !important; inset-inline-end: 0 !important; }
[dir="ltr"] .pos-left  { left: auto !important; right: auto !important; inset-inline-start: 0 !important; }
[dir="ltr"] .pos-right { right: auto !important; left: auto !important; inset-inline-end: 0 !important; }

/* الشريط السفلي للرابط النشط في قوائمك — كان left:0.
   هنستخدم inset-inline-start عشان يقلب تلقائي */
.pc-nav ul li a.active::after,
.mob-nav ul li a.active::after{
  left: auto; right: auto;                 /* نلغي القديم */
  inset-inline-start: 0;                   /* البديل المنطقي */
}

/* القوائم: خليك دائماً على start/end بدل left/right */
.pc-nav ul, .mob-nav ul { justify-content: flex-start; gap: 25px; }

/* أي أيقونات سهم تحتاج عكس:
   مثال: لو بتستخدم FontAwesome لأسهم التنقل */
[dir="rtl"] .icon-next { transform: scaleX(-1); }
[dir="rtl"] .icon-prev { transform: scaleX(1);  }
[dir="ltr"] .icon-next { transform: scaleX(1);  }
[dir="ltr"] .icon-prev { transform: scaleX(-1); }

/* عناصر مطلقة داخل حاويات (Badges/Underlines/Tooltips) */
.dir-underline-start { left: auto; right: auto; inset-inline-start: 0; }
.dir-underline-end   { left: auto; right: auto; inset-inline-end: 0; }

/* جداول ونماذج: خليك على start/end */
table th, table td, label { text-align: start; }

/* لو عندك RTL/LTR محتوى مخصص */
[dir="rtl"] .ltr-only { display: none !important; }
[dir="ltr"] .rtl-only { display: none !important; }

/* معالجة بسيطة للـ slides/Carousels لو بتعتمد اتّجاه */
[dir="rtl"] .is-carousel { direction: rtl; }
[dir="ltr"] .is-carousel { direction: ltr; }