/* ===========================================================================
   ثريو — طبقة الصقل المشتركة بين النسخ الخمس
   لا تفرض أي لون أو خط أو حدود: كل نسخة تحتفظ باتجاهها الفني كاملًا.
   وظيفتها معالجة ما تتركه المتصفحات على حالها الافتراضي داخل تخطيط RTL.
   =========================================================================== */

/* --- حقول التاريخ وقوائم الاختيار ---------------------------------------
   المتصفح يرسم عناصره الأصلية (أيقونة التقويم، سهم القائمة) في الجهة
   المعاكسة داخل RTL. نعيد ضبطها لتقع في نهاية الحقل، وتبقى الأرقام تُقرأ
   من اليسار إلى اليمين كما هي طبيعتها.                                   */

input[type="date"],
select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;            /* سفاري على iOS يضيف استدارة غير مقصودة */
  cursor: pointer;
  font: inherit;
}

/* كروم يفرض direction:ltr على حقول التاريخ ولا يقبل تجاوزه، فيرتدّ زر
   التقويم الأصلي إلى يمين الحقل — أي إلى بداية السطر في تخطيط عربي وملاصقًا
   للأرقام. لذا نخفي الزر الأصلي ونرسم أيقونة في نهاية الحقل، وتبقى القيمة
   محاذية لليمين لتصطف مع تسميتها العربية فوقها. والنقر على الحقل كله يفتح
   التقويم (polish.js) فلا نفقد وظيفة بإخفاء الزر. */
input[type="date"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-inline-end: 2.4rem !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23242a1b' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left .85rem center !important;
  background-size: 15px 15px !important;
}
[dir="ltr"] input[type="date"] {
  text-align: left;
  background-position: right .85rem center !important;
}

input[type="date"]::-webkit-datetime-edit { text-align: right; }
[dir="ltr"] input[type="date"]::-webkit-datetime-edit { text-align: left; }

/* الزر الأصلي يبقى فعّالًا وظيفيًا لكنه غير مرئي */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 0;
  margin: 0;
  padding: 0;
}

/* على الخلفيات الداكنة تُقلب الأيقونة إلى الفاتح — يضبطها polish.js تلقائيًا */
input[type="date"][data-tone="light"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23f5f1e8' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E") !important;
}

/* سهم القائمة: نرسمه بأنفسنا ليرث لون النص ويقف في نهاية الحقل.
   نستخدم !important لأن كل نسخة تكتب background مختصرًا داخل style. */
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23242a1b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left .85rem center !important;
  background-size: 11px 7px !important;
  padding-inline-end: 2.1rem;
}
[dir="ltr"] select { background-position: right .85rem center !important; }

/* على الخلفيات الداكنة يُقلب السهم إلى الفاتح — يضبطه polish.js تلقائيًا */
select[data-tone="light"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23f5f1e8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* حقل التاريخ كله قابل للنقر لفتح التقويم — لا أيقونة صغيرة فقط */
input[type="date"][data-full-picker] { cursor: pointer; }

/* --- إبراز التركيز لمستخدمي لوحة المفاتيح ------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- رابط تخطّي إلى المحتوى -------------------------------------------- */
.thrio-skip {
  position: fixed;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 9999;
  padding: .7rem 1.15rem;
  background: #242a1b;
  color: #f5f1e8;
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  font-size: .9rem;
  text-decoration: none;
  transition: top .18s ease;
}
.thrio-skip:focus { top: 1rem; color: #f5f1e8; }

/* --- شبكة أمان الحركة ---------------------------------------------------
   عناصر يخفيها GSAP قبل أن يظهرها عند التمرير. لو تعثّرت الحركة لأي سبب،
   يتدخّل polish.js ويضيف هذا الصنف فيعود العنصر ظاهرًا بلا قفزة.        */
[data-line].thrio-rescued,
[data-reveal].thrio-rescued {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .45s ease, transform .45s ease;
}

/* --- احترام تفضيل تقليل الحركة ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-line], [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- الخريطة: إطار لطيف أثناء التحميل أو تعذّر الاتصال ------------------ */
.thrio-map-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  padding: 1.5rem;
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(36, 42, 27, .62);
  background:
    repeating-linear-gradient(45deg, rgba(36,42,27,.035) 0 10px, transparent 10px 20px),
    rgba(36, 42, 27, .045);
}