/* ==========================================================
   🌍 direction.css — RTL / LTR Fixes for Stars Academy
   ========================================================== */

/* === الإعداد العام === */
html[dir="rtl"], html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"], html[dir="ltr"] body {
  direction: ltr;
  text-align: left;
}

/* ==========================================================
   🖐 الزر العائم للبصمة & Toast
   ========================================================== */

html[dir="rtl"] .floating-fingerprint-btn {
  left: 30px;
  right: auto;
}
html[dir="ltr"] .floating-fingerprint-btn {
  right: 30px;
  left: auto;
}

html[dir="rtl"] .status-toast {
  left: 30px;
  right: auto;
  text-align: right;
}
html[dir="ltr"] .status-toast {
  right: 30px;
  left: auto;
  text-align: left;
}

/* زر التحكم */
html[dir="rtl"] .button-control {
  left: 20px;
  right: auto;
}
html[dir="ltr"] .button-control {
  right: 20px;
  left: auto;
}

html[dir="rtl"] .button-control button {
  float: left;
}
html[dir="ltr"] .button-control button {
  float: right;
}

/* ==========================================================
/* ==========================================================
   🛒 روابط السلة
   ========================================================== */

html[dir="rtl"] .cart-link {
  margin-right: auto;
  margin-left: 0;
}
html[dir="ltr"] .cart-link {
  margin-left: auto;
  margin-right: 0;
}

/* ==========================================================
   💬 الرسائل والتنبيهات
   ========================================================== */

html[dir="rtl"] .flash-messages,
html[dir="rtl"] .alert {
  text-align: right;
  direction: rtl;
}
html[dir="ltr"] .flash-messages,
html[dir="ltr"] .alert {
  text-align: left;
  direction: ltr;
}

/* ==========================================================
   📱 أزرار PWA والتنقل
   ========================================================== */

html[dir="rtl"] .pwa-navigation-container {
  left: 20px;
  right: auto;
}
html[dir="ltr"] .pwa-navigation-container {
  right: 20px;
  left: auto;
}

html[dir="rtl"] .tooltip {
  text-align: right;
}
html[dir="ltr"] .tooltip {
  text-align: left;
}

html[dir="rtl"] .tooltip::after {
  left: 50%;
  right: auto;
}
html[dir="ltr"] .tooltip::after {
  right: 50%;
  left: auto;
}

/* ==========================================================
   🦶 الفوتر (Footer)
   ========================================================== */

html[dir="rtl"] footer, html[dir="rtl"] .footer {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] footer, html[dir="ltr"] .footer {
  direction: ltr;
  text-align: left;
}

/* ==========================================================
   🧱 محتوى الصفحة
   ========================================================== */

html[dir="rtl"] .main-all-content {
  text-align: right;
}

html[dir="ltr"] .main-all-content {
  text-align: left;
}


/* ==========================================================
   📱 إصلاح مشكلات تمدد العناصر والفراغ في الجوال + RTL
   ========================================================== */

/* السماح للصفحة بعدم ظهور شريط تمرير أفقي */
html, body {
    overflow-x: hidden !important;
    width: 100%;
}

/* دعم قياس العناصر بشكل صحيح بدون التأثير على مكونات مثل Select2 */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ضمان أن العناصر الرئيسية لا تتجاوز شاشة الجوال */
nav,
.navigation,
.container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* إصلاح قسم all-program ليظهر بشكل متناسق في RTL/LTR */
#all-program,
.all-program {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* استثناء المكونات التفاعلية من max-width لأنها تحتاج تمدد حر */
.select2-container,
.select2-dropdown,
.select2-container .select2-selection,
.select2-results__options,
.dropdown-menu,
.modal,
.toast,
.tooltip {
    max-width: none !important;
}