/* static/css/i18n_ltr.css
 * =============================================================================
 * طبقة اتجاه LTR — تنشط فقط على الصفحات الإنجليزية (html[dir="ltr"]).
 * -----------------------------------------------------------------------------
 * التصميم الأساس مبنيّ فيزيائياً بالعربية (RTL): الشريط الجانبي يمين، وحشوة
 * الجسم يمنى. هذه الطبقة تعكس الإطار البنيوي الحامل فقط (الجسم، الشريط الجانبي،
 * أزرار إغلاق النوافذ، واتجاه النوافذ) ليقرأ الإنجليزي طبيعياً يساراً←يميناً.
 * تُحمَّل بعد بقية الأوراق فتتفوّق عليها بالترتيب دون !important إلا حيث لزم
 * لمجاراة تجاوزات media الأصلية. الضبط الدقيق لكل مكوّن (شارات، أسهم) تحسينٌ
 * لاحق يتبع الحاجة.
 * =========================================================================== */

/* الجذر واتجاه الكتابة العام */
html[dir="ltr"] body {
  direction: ltr;
  /* تبديل حشوة الشريط الجانبي من اليمين إلى اليسار (الأساس 61px) */
  padding-right: 0;
  padding-left: 61px;
}

/* الشريط الجانبي: من اليمين إلى اليسار + عكس الحدّ الفاصل */
html[dir="ltr"] .khaliq-sidebar {
  right: auto;
  left: 0;
  border-left: none;
  border-right: var(--glass-border);
}

/* النوافذ المنبثقة: إعادة الاتجاه للإنجليزية + نقل زر الإغلاق إلى اليمين */
html[dir="ltr"] .donate-modal-content,
html[dir="ltr"] .contact-modal-content {
  direction: ltr;
}
html[dir="ltr"] .donate-modal-close,
html[dir="ltr"] .contact-modal-close {
  left: auto;
  right: 12px;
}

/* حاويات المحتوى الرئيسة تتبع اتجاه الصفحة */
html[dir="ltr"] .container,
html[dir="ltr"] main,
html[dir="ltr"] header,
html[dir="ltr"] footer {
  direction: ltr;
}

/* قوائم النصّ: عكس الحشوة الاستهلالية من اليمين إلى اليسار */
html[dir="ltr"] ul {
  padding-right: 0;
  padding-left: 1.5em;
}

/* منسدلة اختيار المدينة تتبع الاتجاه الإنجليزي */
html[dir="ltr"] .cp-dropdown,
html[dir="ltr"] .cp-dropdown-inner {
  direction: ltr;
}

/* مربع بحث المدن: الأساس RTL (direction صريح + أيقونة يمين + زرّ إغلاق يسار) —
   يُعكس كاملاً كي يبدأ النصّ والنصّ المؤقّت يساراً (كان «...Search for a city»). */
html[dir="ltr"] .cp-search-input {
  direction: ltr;
}
html[dir="ltr"] .cp-search-icon {
  right: auto;
  left: 12px;
}
html[dir="ltr"] .cp-close-btn {
  left: auto;
  right: 4px;
}

/* أسهم تنقّل «اليوم»: تنعكس أفقياً لتشير للاتجاه الصحيح في LTR
   (السابق ← يسار، التالي → يمين). */
html[dir="ltr"] .today-nav .fa-angle-right,
html[dir="ltr"] .today-nav .fa-angle-left {
  transform: scaleX(-1);
}

/* ————————————————— إصلاحات إضافية للاتجاه الإنجليزي ————————————————— */

/* (1) الشريط العلوي: النصوص الإنجليزية أعرض من العربية. نُبقيه متوسّطاً (كالعربي)
   لكن بـ«safe center» حتى لا يُقصّ الطرف الأيسر حين لا يتّسع؛ مع تمرير أفقي عند
   الحاجة وتصغير طفيف للفجوة والخط، فيتوسّط إن اتّسع ويُمرَّر بلا قصٍّ إن لم يتّسع. */
html[dir="ltr"] .topbar-grid {
  justify-content: safe center;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 10px;
  width: 96%;
}
html[dir="ltr"] .topbar-grid .slot:not(:where(.slot-city)) {
  font-size: 0.92em;
}
/* العرض المتوسّط: التفافٌ لا تمرير (نظير القاعدة في topbar.css). */
@media (min-width: 701px) and (max-width: 1100px) {
  html[dir="ltr"] .topbar-grid {
    justify-content: center;
    overflow: visible;
  }
}

/* (2) بطاقة تقاويم «اليوم»: القيمة تُحاذى لطرف الصفّ المقابل للتسمية.
   في RTL القيمة يساراً (بعيدة عن التسمية يميناً)؛ في LTR يجب أن تُحاذى يميناً
   لتبتعد عن التسمية (يساراً) بدل أن تلتصق بها. */
html[dir="ltr"] .khaliq-info-box .tc-value {
  text-align: right;
}

/* (3) أسهم تنقّل الشهر: الأيقونات ثابتة (السابق=chevron-right)، فتنعكس دلالتها
   في LTR. نقلبها أفقياً ليصير السابق ← يسار والتالي → يمين. */
html[dir="ltr"] .cm-nav-arrow i {
  transform: scaleX(-1);
}


/* ————————————————————— نقاط الاستجابة (تُطابق media الأصلية) ————————————————————— */
/* حشوة الجسم الفعّالة في العربية (padding-right): 61px فوق 900px؛ 45px حتى 481px
   (responsive.css — الأخير تحميلاً بين قواعد !important المتساوية)؛ 0 على الجوال ≤480px
   (الشريط درجٌ فوق المحتوى — sidebar.css). نعكسها هنا حرفياً إلى padding-left. */
@media (max-width: 900px) {
  html[dir="ltr"] body {
    padding-right: 0 !important;
    padding-left: 45px !important;
  }
}
@media (max-width: 480px) {
  html[dir="ltr"] body {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  /* الدرج: الشريط على اليسار في الإنجليزية، فيُخفى بإزاحته يساراً خارج الشاشة
     (sidebar.css يزيحه يميناً لأنه على اليمين في العربية — فيبقى ظاهراً هنا بدون هذه القاعدة). */
  html[dir="ltr"] .khaliq-sidebar {
    transform: translateX(-100%);
    box-shadow: 10px 0 36px rgba(20, 30, 50, 0.30);
  }
  html[dir="ltr"] .khaliq-sidebar.is-open {
    transform: translateX(0);
  }
  /* زرّ فتح الدرج في جهة الدرج نفسه: الزاوية العليا اليسرى (sidebar.css: اليمنى للعربية). */
  html[dir="ltr"] .khaliq-nav-toggle {
    right: auto;
    left: 8px;
  }
}