/* ==========================================================
   أنماط مخصصة — تكمّل Tailwind
   كل المقاسات هنا مشتقّة من نظام التصميم في includes/theme.php:
     نصف القطر  xl = .875rem · 2xl = 1.125rem · 3xl = 1.5rem
     الخطوط     2xs 11.5 · xs 12.5 · sm 13.5 · base 15 · md 16.5 · lg 18.5
   لا تُدخل مقاسًا جديدًا هنا دون إضافته إلى السلّم أولًا.
   ========================================================== */

:root {
  --r-xl:  .875rem;
  --r-2xl: 1.125rem;
  --r-3xl: 1.5rem;

  --t-2xs: .720rem;
  --t-xs:  .780rem;
  --t-sm:  .845rem;
  --t-base:.940rem;
  --t-md:  1.030rem;
  --t-lg:  1.155rem;

  --ink:   #2C4B40;
  --clay:  #D04F46;
  --cream: #EEEBEB;
  --sage:  #9DABA9;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* العناوين العربية تُقسم أفضل عند موازنة الأسطر */
h1, h2, h3 { text-wrap: balance; }
p          { text-wrap: pretty; }

/* الأرقام في الجداول والإحصاءات تصطف عموديًا */
.tabular, .js-count, [class*="tabular-nums"] { font-variant-numeric: tabular-nums; }

/* شريط التمرير */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--sage); border-radius: 99px; border: 2px solid var(--cream); }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }

/* ---------- تركيز واضح للوحة المفاتيح ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
  border-radius: var(--r-xl);
}

/* ---------- حقول النماذج ---------- */
/* مهم: إضافة ‎@tailwindcss/forms‎ تحقن قواعدها بعد هذا الملف، وقاعدتها
   ‎[type="text"]‎ لها نفس وزن ‎.fld‎ تمامًا — فتفوز بترتيب المصدر وتلغي
   الحدود ونصف القطر والمقاس. نذكر اسم العنصر ليرتفع الوزن وتثبت الأنماط.
   لا تحذفي ‎input.‎/‎select.‎/‎textarea.‎ من هذه المحدِّدات. */
.fld,
input.fld,
select.fld,
textarea.fld {
  width: 100%;
  border-radius: var(--r-xl);
  border: 1px solid rgba(44, 75, 64, 0.15);
  background-color: #fff;
  padding: .8rem 1rem;
  font-size: var(--t-base);
  line-height: 1.85;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}

.fld::placeholder,
input.fld::placeholder,
textarea.fld::placeholder { color: rgba(44, 75, 64, .32); opacity: 1; }

.fld:focus,
input.fld:focus,
select.fld:focus,
textarea.fld:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(208, 79, 70, .12);
  --tw-ring-color: transparent;
}
.fld:focus-visible { outline: none; }

textarea.fld { resize: vertical; min-height: 96px; }
select.fld   { background-image: none; padding-left: 2.5rem; }

.lbl {
  display: block;
  margin-bottom: .4rem;
  font-size: var(--t-sm);
  line-height: 1.75;
  font-weight: 700;
  color: rgba(44, 75, 64, .72);
}

/* ---------- ظهور تدريجي عند التمرير ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- الشريط المتحرك للشعارات ---------- */
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
.marquee-track { will-change: transform; }

/* ---------- التقويم ---------- */
.cal-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xl);
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color .18s, color .18s, box-shadow .18s;
}
.cal-day.avail       { background: rgba(44,75,64,.06); color: var(--ink); cursor: pointer; }
.cal-day.avail:hover { background: rgba(208,79,70,.15); color: var(--clay); }
.cal-day.off         { background: rgba(44,75,64,.02); color: rgba(44,75,64,.22); cursor: not-allowed; }
.cal-day.sel         { background: var(--clay); color: #fff; box-shadow: 0 6px 16px rgba(208,79,70,.32); }
.cal-day.empty       { visibility: hidden; }
.cal-day.today       { box-shadow: inset 0 0 0 1.5px rgba(44,75,64,.28); }

/* ---------- أزرار الفترات ---------- */
.slot-btn {
  border-radius: var(--r-xl);
  border: 1px solid rgba(44,75,64,.15);
  background: #fff;
  padding: .7rem .5rem;
  font-size: var(--t-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(44,75,64,.75);
  transition: border-color .18s, background-color .18s, color .18s;
}
.slot-btn:hover { border-color: rgba(208,79,70,.5); color: var(--clay); }
.slot-btn.sel   { background: var(--clay); border-color: var(--clay); color: #fff; }

/* ---------- خطوات الحجز ---------- */
.js-step-pill.active .js-step-num  { background: var(--clay); border-color: var(--clay); color: #fff; }
.js-step-pill.active .js-step-label{ color: var(--ink); }
.js-step-pill.done   .js-step-num  { background: var(--ink);  border-color: var(--ink);  color: var(--cream); }
.js-step-pill.done   .js-step-label{ color: rgba(44,75,64,.6); }

/* ---------- تنبيهات ---------- */
.alert-ok  { background: rgba(44,75,64,.07);  color: var(--ink); border: 1px solid rgba(44,75,64,.15); }
.alert-err { background: rgba(208,79,70,.08); color: #B23C34;    border: 1px solid rgba(208,79,70,.22); }

/* ---------- محتوى المقالات ---------- */
.article-body { font-size: var(--t-md); line-height: 1.95; color: rgba(44,75,64,.82); }
.article-body h2 { font-size: 1.560rem; line-height: 1.4;  font-weight: 800; margin: 2.2rem 0 .9rem; color: var(--ink); }
.article-body h3 { font-size: 1.300rem; line-height: 1.5;  font-weight: 700; margin: 1.8rem 0 .7rem; color: var(--ink); }
.article-body p  { margin-bottom: 1.15rem; }
.article-body ul, .article-body ol { margin: 0 1.4rem 1.15rem 0; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: .5rem; }
.article-body a  { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
.article-body img { border-radius: var(--r-3xl); margin: 1.5rem 0; max-width: 100%; height: auto; }
.article-body blockquote {
  border-right: 3px solid var(--clay);
  padding: .3rem 1.2rem;
  margin: 1.5rem 0;
  color: rgba(44,75,64,.65);
  font-family: Amiri, Georgia, serif;
  font-size: var(--t-lg);
  line-height: 1.9;
}
/* المحتوى الواسع يمرّر داخل حاويته بدل أن يمرّر الصفحة أفقيًا */
.article-body table { display: block; overflow-x: auto; max-width: 100%; }
.article-body pre   { overflow-x: auto; max-width: 100%; }

/* ---------- إتاحة ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .animate-marquee, .animate-floatY { animation: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- الطباعة ---------- */
@media print {
  header, footer, #toTop, .marquee-wrap { display: none !important; }
  body { background: #fff; }
}