/* =========================================================
   styles.css — نظام تصميم موحّد | Unified design system
   نموذج تصوري من Framework — ليس مشروع عميل

   كل قواعد الاتجاه بالخصائص المنطقية ليعمل الملف نفسه في RTL و LTR.
   All directional rules use logical properties: one sheet serves RTL and LTR.
   ========================================================= */

/* ---------- 1. الرموز التصميمية | Design tokens ---------- */
:root {
  /* الهوية | Brand */
  --rose:        #C99A9A;
  --rose-deep:   #B07E7E;
  --rose-dark:   #96686A;
  --rose-soft:   #F3E4E1;
  --rose-tint:   #FBF3F1;
  --nude:        #B98C7A;
  --gold:        #C9A24B;
  --gold-soft:   #E7C9A9;
  --gold-tint:   #FAF2E6;

  /* الأسطح | Surfaces */
  --bg:          #FFFFFF;
  --bg-soft:     #FAF6F2;
  --bg-soft-2:   #F7F1EC;
  --line:        #EDE2DC;
  --line-soft:   #F5EDE8;

  /* النصوص | Text */
  --ink:         #3A2E2A;
  --ink-2:       #4E3F39;
  --muted:       #6B5D57;
  --muted-2:     #8A7C74;
  --faint:       #B3A69E;

  --danger:      #B4534F;
  --danger-soft: #FCF2F1;
  --ok:          #6E8F72;

  /* الخطوط — تتبدّل مع اللغة | Fonts — swapped by language
     العربية عائلة واحدة بوزنين. لم يُستخدم Reem Kufi للعناوين رغم شيوع اقتراحه،
     لأن معاينته أظهرت ضعف قراءته الشديد في عناوين البطاقات الصغيرة.
     Arabic uses one family in two weights. Reem Kufi was evaluated for headings and
     rejected: its legibility collapses at card-heading sizes. */
  --font-body: 'Tajawal', system-ui, -apple-system, sans-serif;
  --font-head: 'Tajawal', system-ui, -apple-system, sans-serif;

  /* الزوايا الناعمة | Soft radii */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  /* ظلال دافئة ناعمة | Soft warm shadows */
  --sh-xs: 0 1px 3px rgba(58, 46, 42, .04);
  --sh-sm: 0 3px 10px rgba(58, 46, 42, .06);
  --sh-md: 0 8px 24px rgba(58, 46, 42, .08);
  --sh-lg: 0 18px 44px rgba(58, 46, 42, .11);
  --sh-xl: 0 30px 70px rgba(58, 46, 42, .15);

  /* المسافات | Spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px;

  --wrap: 1220px;
  --nav-h: 78px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .18s var(--ease);
  --t: .3s var(--ease);
  --t-slow: .45s var(--ease);
}

html[lang="en"] {
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Cormorant Garamond', Georgia, serif;
}

/* ---------- 2. إعادة الضبط | Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* سمة hidden يجب أن تغلب أي قاعدة display في الملف.
   بدون !important كان `.btn{display:inline-flex}` و`.notice{display:flex}`
   يتجاوزان قاعدة المتصفح، فتظهر أزرار المعالج المخفية ويمكن تخطّي الخطوات.
   The hidden attribute must beat any author display rule. Without this,
   .btn/.notice overrode the UA rule and "hidden" wizard buttons stayed
   clickable — letting a user skip the entire flow. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* scroll-padding-top يمنع الشريط الثابت من حجب العنصر المُمرَّر إليه.
     بدونه، كل scrollIntoView (خطوات الحجز، الترقيم، روابط المرساة) يضع
     الهدف عند y=0 أي خلف الشريط تماماً.
     Without this, every scrollIntoView (wizard steps, pagination, anchors)
     lands the target at y=0 — entirely behind the sticky header. */
  scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html[lang="en"] body { line-height: 1.72; }

h1, h2, h3, h4, h5 {
  margin: 0 0 .5em;
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.35;
}
h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem); line-height: 1.22; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.4rem); }
h3 { font-size: clamp(1.12rem, 1rem + .6vw, 1.45rem); }
h4 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 700; }
/* Cormorant خط رفيع بطبعه، فيحتاج وزناً أثقل وحجماً أكبر قليلاً في الإنجليزية */
html[lang="en"] h1, html[lang="en"] h2 { font-weight: 600; letter-spacing: -.005em; }
html[lang="en"] h1 { font-size: clamp(2.3rem, 1.5rem + 3.1vw, 4rem); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--rose-dark); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--nude); }

img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--rose-soft); color: var(--ink); }

/* ---------- 3. أدوات | Utilities ---------- */
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: 16px; top: -100px; z-index: 300;
  background: var(--rose-dark); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm); transition: top var(--t);
}
.skip-link:focus { top: 0; color: #fff; }

.section { padding-block: clamp(52px, 7vw, 96px); }
.section--soft { background: var(--bg-soft); }
.section--tint { background: var(--rose-tint); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 600; letter-spacing: .1em;
  color: var(--nude); margin-bottom: 14px; text-transform: uppercase;
}
.eyebrow::before, .eyebrow::after {
  content: ''; width: 22px; height: 1px; background: var(--gold-soft); flex: none;
}
.eyebrow::after { display: none; }
html[lang="ar"] .eyebrow { letter-spacing: normal; text-transform: none; font-size: .88rem; }

.section-head { max-width: 640px; margin-bottom: var(--s6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::after { display: block; }
.section-head p { color: var(--muted); font-size: 1.03rem; margin: 0; }

.head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6);
}
.head-row .section-head { margin-bottom: 0; }

.rule { width: 60px; height: 1px; background: var(--gold-soft); margin-block: var(--s4); }
.rule--center { margin-inline: auto; }

/* ---------- 4. الأزرار | Buttons ---------- */
.btn {
  --bg: var(--rose-dark); --fg: #fff; --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  padding: 13px 28px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  line-height: 1.4; min-height: 50px;
  /* normal لا nowrap: على الشاشات الضيقة يلفّ النص بدل أن يفيض خارج الحاوية */
  white-space: normal; text-align: center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { background: var(--rose-deep); color: #fff; box-shadow: var(--sh-md); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--gold { --bg: var(--gold); --fg: #fff; }
.btn--gold:hover { background: var(--nude); }

.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line); }
.btn--ghost:hover { background: var(--rose-tint); color: var(--rose-dark); border-color: var(--rose-soft); }

.btn--soft { --bg: var(--rose-tint); --fg: var(--rose-dark); }
.btn--soft:hover { background: var(--rose-soft); color: var(--rose-dark); }

.btn--white { --bg: #fff; --fg: var(--rose-dark); }
.btn--white:hover { background: var(--rose-tint); color: var(--rose-dark); }

.btn--outline-white { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.55); }
.btn--outline-white:hover { background: rgba(255,255,255,.15); color: #fff; border-color: #fff; }

.btn--lg { padding: 16px 36px; font-size: 1rem; min-height: 58px; }
.btn--sm { padding: 9px 20px; font-size: .875rem; min-height: 42px; }
.btn--block { width: 100%; }

/* ---------- 5. الشريط التصريحي العلوي | Top disclosure bar ---------- */
.topbar {
  background: var(--rose-dark); color: #fff; font-size: .82rem;
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; min-height: 44px; padding-block: 6px;
}
.topbar__note { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
.topbar__note svg { width: 15px; height: 15px; color: var(--gold-soft); flex: none; }
.topbar__right { display: flex; align-items: center; gap: var(--s5); }
.topbar__contact { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.9); }
.topbar__contact svg { width: 14px; height: 14px; }
.topbar__contact:hover { color: #fff; }
@media (max-width: 860px) { .topbar__contact { display: none; } }

.lang-switch {
  display: inline-flex; border: 1px solid rgba(255,255,255,.34);
  border-radius: var(--r-pill); overflow: hidden; flex: none;
}
.lang-switch button {
  padding: 5px 15px; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: rgba(255,255,255,.78); min-height: 30px;
  font-family: 'Inter', system-ui, sans-serif;
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-switch button:hover { color: #fff; }
.lang-switch button[aria-pressed="true"] { background: #fff; color: var(--rose-dark); }

/* ---------- 6. التنقّل | Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.95);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--t);
}
.nav.is-stuck { box-shadow: var(--sh-sm); }
.nav .wrap { display: flex; align-items: center; gap: var(--s5); min-height: var(--nav-h); }

.logo { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.logo__mark {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 50%; color: #fff;
  background: linear-gradient(140deg, var(--rose), var(--nude));
}
.logo__mark svg { width: 22px; height: 22px; }
.logo__text { display: flex; flex-direction: column; line-height: 1.2; }
.logo__name { font-family: var(--font-head); font-weight: 700; font-size: 1.14rem; color: var(--ink); }
html[lang="en"] .logo__name { font-size: 1.34rem; }
.logo__sub {
  font-size: .62rem; color: var(--muted-2); font-family: var(--font-body);
}
/* التباعد الحرفي والأحرف الكبيرة أسلوب لاتيني — تباعد الأحرف يكسر اتصال الحروف العربية
   letter-spacing/uppercase is a Latin stylistic device — it breaks Arabic letter joining */
html[lang="en"] .logo__sub {
  letter-spacing: .18em; text-transform: uppercase; font-family: 'Inter', sans-serif;
}

.nav__links { display: flex; align-items: center; gap: 2px; margin-inline-end: auto; }
.nav__links a {
  display: block; padding: 9px 14px; border-radius: var(--r-pill);
  color: var(--ink-2); font-weight: 500; font-size: .93rem;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__links a:hover { color: var(--rose-dark); background: var(--rose-tint); }
.nav__links a[aria-current="page"] { color: var(--rose-dark); font-weight: 700; background: var(--rose-tint); }

.nav__actions { display: flex; align-items: center; gap: var(--s3); flex: none; }
.nav__burger { display: none; }

.icon-btn {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink); border: 1px solid var(--line); background: #fff;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { background: var(--rose-tint); border-color: var(--rose-soft); }
.icon-btn svg { width: 21px; height: 21px; }

@media (max-width: 1140px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .nav__cta { display: none; }
}

/* قائمة الجوال | Mobile menu */
.mobile-menu {
  /* overflow:hidden يمنع اللوحة المزاحة من توسيع عرض المستند وهي مغلقة
     Clips the translated-off panel so it cannot widen the document while closed */
  overflow: hidden;
  position: fixed; inset: 0; z-index: 200; background: rgba(58,46,42,.42);
  backdrop-filter: blur(3px); opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(340px, 88vw); background: #fff; padding: var(--s5);
  overflow-y: auto; display: flex; flex-direction: column; gap: var(--s4);
  transform: translateX(var(--menu-out)); transition: transform var(--t-slow);
}
/* اللوحة مثبّتة على inset-inline-end — الحافة اليسرى في RTL واليمنى في LTR —
   فتنزلق خارجاً نحو حافتها هي. عكس الإشارة يجعلها تعبر الشاشة بكاملها.
   Pinned to inset-inline-end: the LEFT edge in RTL, the RIGHT edge in LTR.
   It must slide out toward that same edge; inverting the sign makes it sweep across. */
html[dir="rtl"] .mobile-menu__panel { --menu-out: -100%; }
html[dir="ltr"] .mobile-menu__panel { --menu-out: 100%; }
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 2px; }
.mobile-menu__links a {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500;
  transition: background var(--t-fast);
}
.mobile-menu__links a:hover { background: var(--bg-soft); }
.mobile-menu__links a[aria-current="page"] { background: var(--rose-tint); color: var(--rose-dark); font-weight: 700; }
.mobile-menu__links svg { width: 19px; height: 19px; color: var(--muted-2); flex: none; }

/* ---------- 7. البطل | Hero ---------- */
.hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(80,52,48,.86) 0%, rgba(96,64,58,.72) 48%, rgba(120,86,74,.42) 100%);
}
html[dir="ltr"] .hero__bg::after {
  background: linear-gradient(260deg, rgba(80,52,48,.86) 0%, rgba(96,64,58,.72) 48%, rgba(120,86,74,.42) 100%);
}
.hero__inner { padding-block: clamp(60px, 9vw, 120px); }
.hero__copy { max-width: 660px; }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--gold-soft); }
.hero__lead { font-size: clamp(1.02rem, .96rem + .4vw, 1.2rem); color: rgba(255,255,255,.88); max-width: 540px; }
.hero .eyebrow { color: var(--gold-soft); }
.hero .eyebrow::before, .hero .eyebrow::after { background: var(--gold-soft); }
.hero__actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }

/* ---------- 8. الحجز السريع | Quick booking widget ---------- */
.quickbook {
  background: #fff; border-radius: var(--r-xl); padding: var(--s5);
  box-shadow: var(--sh-xl); margin-top: var(--s7); color: var(--ink-2);
}
.quickbook__title { font-weight: 700; color: var(--ink); margin-bottom: var(--s4); display: flex; align-items: center; gap: 9px; }
.quickbook__title svg { width: 20px; height: 20px; color: var(--rose-dark); }
.quickbook__fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s3); align-items: end; }
@media (max-width: 760px) { .quickbook__fields { grid-template-columns: 1fr; } }

/* ---------- 9. البطاقات | Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); box-shadow: var(--sh-xs);
}

/* بطاقة خدمة | Service card */
.grid-services { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.scard {
  position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.scard:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--rose-soft); }
.scard__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-soft-2); }
.scard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--ease); }
.scard:hover .scard__media img { transform: scale(1.06); }
.scard__badge {
  position: absolute; top: 12px; inset-inline-start: 12px;
  background: var(--gold); color: #fff; font-size: .74rem; font-weight: 700;
  padding: 5px 13px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 5px;
}
.scard__badge svg { width: 13px; height: 13px; }
.scard__body { padding: var(--s5); flex: 1; display: flex; flex-direction: column; }
.scard__cat { font-size: .78rem; color: var(--nude); font-weight: 600; margin-bottom: 4px; }
.scard__title { font-size: 1.16rem; margin-bottom: 8px; }
.scard p { color: var(--muted); font-size: .92rem; margin-bottom: var(--s4); flex: 1; }
.scard__meta {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding-top: var(--s3); border-top: 1px solid var(--line-soft);
  font-size: .86rem; color: var(--muted); margin-bottom: var(--s4);
}
.scard__meta span { display: inline-flex; align-items: center; gap: 6px; }
.scard__meta svg { width: 15px; height: 15px; color: var(--faint); }
.scard__meta b { color: var(--rose-dark); font-weight: 700; }
.scard__foot { display: flex; gap: 8px; }
.scard__foot .btn { flex: 1; }
/* رابط ممتد: البطاقة كاملة هدف نقر واحد.
   بلا transform على الزر، وإلا صار هو الكتلة الحاوية وانكمش الغطاء إلى حدوده.
   Stretched link. No transform on the button itself, or it becomes the containing
   block and the overlay collapses to the button's own box. */
.scard__foot .btn--details::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.scard__foot .btn:hover { transform: none; }
.scard__foot .btn--book { position: relative; z-index: 2; }

/* ---------- 10. المزايا | Features ---------- */
.grid-3 { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
.feature { text-align: center; padding: var(--s5) var(--s4); }
.feature__icon {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto var(--s4);
  background: var(--rose-tint); color: var(--rose-dark);
  display: grid; place-items: center; transition: background var(--t), color var(--t);
}
.feature:hover .feature__icon { background: var(--rose); color: #fff; }
.feature__icon svg { width: 28px; height: 28px; }
.feature h4 { margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: .93rem; margin: 0; }

.feature--row { display: flex; gap: var(--s4); text-align: start; padding: 0; }
.feature--row .feature__icon { margin: 0; flex: none; width: 52px; height: 52px; }
.feature--row .feature__icon svg { width: 24px; height: 24px; }

/* ---------- 11. الإحصائيات | Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.stat { text-align: center; padding: var(--s5) var(--s3); }
.stat__icon { color: var(--gold); margin-bottom: 10px; display: grid; place-items: center; }
.stat__icon svg { width: 28px; height: 28px; }
.stat__num {
  font-family: var(--font-head); font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem);
  font-weight: 700; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat__label { font-size: .92rem; color: var(--muted); }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 12. مقسّم صورة/نص | Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 68px); align-items: center; }
.split__media { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--sh-lg); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

.pullquote {
  border-inline-start: 2px solid var(--gold-soft); padding-inline-start: var(--s5);
  margin-block: var(--s5); font-family: var(--font-head);
  font-size: clamp(1.12rem, 1rem + .7vw, 1.45rem); line-height: 1.65; color: var(--ink);
}
.pullquote cite { display: block; font-family: var(--font-body); font-size: .87rem; font-style: normal; color: var(--muted-2); margin-top: 10px; }

/* ---------- 13. الأفاتار النائب | Placeholder avatar ---------- */
.avatar {
  position: relative; display: grid; place-items: center; overflow: hidden; flex: none;
  background: linear-gradient(145deg, var(--rose), var(--nude));
  color: #fff; font-family: var(--font-head); font-weight: 700; line-height: 1;
}
.avatar::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(72% 62% at 30% 20%, rgba(255,255,255,.26), transparent 62%);
}
.avatar__initials { position: relative; z-index: 2; letter-spacing: .06em; }
.avatar__glyph {
  /* توسيط هندسي بحت: left + translateX(-50%) صحيح في الاتجاهين.
     الصيغة المنطقية مع translateX(50%) تعمل في RTL فقط وتقذف الرمز خارج الإطار في LTR.
     Pure geometric centring — correct in both directions. */
  position: absolute; z-index: 1; bottom: -15%; left: 50%;
  transform: translateX(-50%); width: 68%; height: 68%;
  color: #fff; opacity: .16; stroke-width: 1.3;
}
.avatar--sm   { width: 48px; height: 48px; border-radius: 50%; font-size: .84rem; }
.avatar--md   { width: 108px; height: 108px; border-radius: 50%; font-size: 1.7rem; }
.avatar--tile { width: 100%; height: 100%; font-size: clamp(2rem, 1rem + 4vw, 3.2rem); }

/* ---------- 14. بطاقة طبيبة | Doctor card ---------- */
.grid-team { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.dcard {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.dcard:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); border-color: var(--rose-soft); }
.dcard__media { aspect-ratio: 1/1; }
.dcard__body { padding: var(--s5); flex: 1; display: flex; flex-direction: column; text-align: center; }
.dcard__name { font-family: var(--font-head); font-size: 1.16rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
html[lang="en"] .dcard__name { font-size: 1.32rem; }
.dcard__title { font-size: .85rem; color: var(--nude); font-weight: 600; margin-bottom: var(--s3); }
.dcard__rating { display: inline-flex; align-items: center; gap: 5px; justify-content: center; font-size: .86rem; color: var(--muted); margin-bottom: var(--s3); }
.dcard__rating svg { width: 15px; height: 15px; color: var(--gold); fill: currentColor; }
.dcard__tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: var(--s4); }
.dcard__foot { margin-top: auto; }
.dcard__foot .btn { width: 100%; }
.dcard__foot .btn::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.dcard__foot .btn:hover { transform: none; }

.tag {
  display: inline-block; padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--bg-soft); color: var(--muted); font-size: .76rem; font-weight: 500;
  border: 1px solid var(--line-soft);
}
.tag--rose { background: var(--rose-tint); color: var(--rose-dark); border-color: var(--rose-soft); }
.tag--gold { background: var(--gold-tint); color: var(--nude); border-color: rgba(201,162,75,.28); }
a.tag { padding-block: 8px; }

/* ---------- 15. الباقات | Packages ---------- */
.grid-packages { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.pkg {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.pkg:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); }
.pkg.is-featured { border-color: var(--gold); box-shadow: var(--sh-md); }
.pkg__media { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-soft-2); }
.pkg__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pkg:hover .pkg__media img { transform: scale(1.05); }
.pkg__badge {
  position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2;
  background: var(--gold); color: #fff; font-size: .74rem; font-weight: 700;
  padding: 5px 14px; border-radius: var(--r-pill);
}
.pkg__body { padding: var(--s5); flex: 1; display: flex; flex-direction: column; }
.pkg__name { font-size: 1.24rem; margin-bottom: 6px; }
.pkg__desc { color: var(--muted); font-size: .92rem; margin-bottom: var(--s4); }
.pkg__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--s4); flex-wrap: wrap; }
.pkg__price b { font-family: var(--font-head); font-size: 1.7rem; color: var(--rose-dark); font-variant-numeric: tabular-nums; }
.pkg__price del { color: var(--faint); font-size: .95rem; }
.pkg__price span { font-size: .85rem; color: var(--muted-2); }
.pkg__list { display: grid; gap: 10px; margin-bottom: var(--s5); flex: 1; }
.pkg__list li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--ink-2); }
.pkg__list svg { width: 17px; height: 17px; color: var(--gold); flex: none; margin-top: 4px; }

/* ---------- 16. مقارنة قبل/بعد | Before / After compare ---------- */
.grid-gallery { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.compare {
  position: relative; aspect-ratio: 4/3; border-radius: var(--r-lg);
  overflow: hidden; user-select: none; touch-action: pan-y;
  background: var(--bg-soft-2); cursor: ew-resize;
}
.compare__panel { position: absolute; inset: 0; }
.compare__panel svg { width: 100%; height: 100%; display: block; }
/* اللوحة العليا تُقصّ أفقياً بمقدار موضع المقبض | Top panel is clipped to the handle position */
.compare__panel--after { clip-path: inset(0 0 0 var(--pos, 50%)); }
html[dir="rtl"] .compare__panel--after { clip-path: inset(0 var(--pos, 50%) 0 0); }
.compare__label {
  position: absolute; bottom: 12px; z-index: 3;
  background: rgba(58,46,42,.68); color: #fff; backdrop-filter: blur(4px);
  font-size: .74rem; font-weight: 600; padding: 5px 13px; border-radius: var(--r-pill);
}
.compare__label--before { inset-inline-start: 12px; }
.compare__label--after  { inset-inline-end: 12px; }
.compare__handle {
  position: absolute; inset-block: 0; z-index: 4;
  left: var(--pos, 50%); width: 3px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.28);
  transform: translateX(-50%);
}
.compare__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; box-shadow: var(--sh-md); color: var(--rose-dark);
}
.compare__grip svg { width: 22px; height: 22px; }
.compare__range {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0; direction: ltr;
}
.gallery-item__note { font-size: .88rem; color: var(--muted); margin-top: 10px; display: flex; align-items: center; gap: 7px; }
.gallery-item__note svg { width: 15px; height: 15px; color: var(--gold); flex: none; }

/* ---------- 17. سلايدر الآراء | Testimonials ---------- */
.tslider__track {
  display: flex; gap: var(--s5); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s4); scroll-behavior: smooth; scrollbar-width: none;
}
.tslider__track::-webkit-scrollbar { display: none; }
.tcard {
  flex: 0 0 min(420px, 86%); scroll-snap-align: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); display: flex; flex-direction: column;
}
.tcard__stars { display: flex; gap: 2px; color: var(--gold); margin-bottom: var(--s3); }
.tcard__stars svg { width: 16px; height: 16px; fill: currentColor; }
.tcard__text { font-size: 1rem; color: var(--ink-2); flex: 1; line-height: 1.9; }
.tcard__who { display: flex; align-items: center; gap: 12px; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
.tcard__name { font-weight: 700; color: var(--ink); line-height: 1.4; }
.tcard__role { font-size: .84rem; color: var(--muted-2); }
.slider-nav { display: flex; gap: 8px; }

/* ---------- 18. النماذج | Forms ---------- */
.field {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 13px 16px; font-size: .95rem; background: #fff; color: var(--ink);
  min-height: 50px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-tint); }
select.field {
  appearance: none; cursor: pointer; padding-inline-end: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A7C74' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
html[dir="rtl"] select.field { background-position: left 15px center; padding-inline-end: 16px; padding-inline-start: 42px; }
textarea.field { min-height: 130px; resize: vertical; line-height: 1.7; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.form-row { display: flex; flex-direction: column; gap: 7px; }
.form-row--full { grid-column: 1 / -1; }
.form-row label { font-size: .875rem; font-weight: 600; color: var(--ink); }
.form-row .req { color: var(--danger); }
.form-error { font-size: .82rem; color: var(--danger); min-height: 1.1em; display: flex; align-items: center; gap: 5px; }
.form-error svg { width: 14px; height: 14px; flex: none; }
.field.is-invalid { border-color: var(--danger); background: var(--danger-soft); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.form-success {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--rose-tint); border: 1px solid var(--rose-soft);
  border-radius: var(--r-md); padding: var(--s4); margin-top: var(--s4);
}
.form-success[hidden] { display: none; }
.form-success svg { width: 24px; height: 24px; color: var(--rose-dark); flex: none; }
.form-success b { display: block; color: var(--ink); }
.form-success p { font-size: .9rem; color: var(--muted); margin: 2px 0 0; }

.checkbox { display: flex; align-items: flex-start; gap: 11px; font-size: .9rem; color: var(--muted); cursor: pointer; }
.checkbox input { width: 19px; height: 19px; accent-color: var(--rose-dark); flex: none; margin-top: 3px; cursor: pointer; }

/* بطاقات اختيار | Selectable option cards */
.choice-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.choice {
  display: flex; align-items: center; gap: 12px; padding: 15px;
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff;
  text-align: start; min-height: 66px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.choice:hover { border-color: var(--rose); }
.choice[aria-pressed="true"] { border-color: var(--rose-dark); background: var(--rose-tint); }
.choice__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--rose-tint); color: var(--rose-dark); display: grid; place-items: center; flex: none; }
.choice[aria-pressed="true"] .choice__icon { background: var(--rose-dark); color: #fff; }
.choice__icon svg { width: 20px; height: 20px; }
.choice b { display: block; font-size: .93rem; font-weight: 600; color: var(--ink); }
.choice span { font-size: .8rem; color: var(--muted-2); }

/* ---------- 19. معالج الحجز | Booking wizard ---------- */
.steps { display: flex; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s6); position: relative; }
.steps::before {
  content: ''; position: absolute; inset-inline: 22px; top: 21px; height: 2px;
  background: var(--line); z-index: 0;
}
.step { position: relative; z-index: 1; text-align: center; flex: 1; }
.step__dot {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 8px;
  display: grid; place-items: center; background: #fff; border: 2px solid var(--line);
  color: var(--muted-2); font-weight: 700; font-size: .92rem;
  transition: background var(--t), border-color var(--t), color var(--t);
  font-variant-numeric: tabular-nums;
}
.step__label { font-size: .8rem; color: var(--muted-2); font-weight: 500; }
.step[aria-current="step"] .step__dot { background: var(--rose-dark); border-color: var(--rose-dark); color: #fff; }
.step[aria-current="step"] .step__label { color: var(--rose-dark); font-weight: 700; }
.step.is-done .step__dot { background: var(--gold); border-color: var(--gold); color: #fff; }
.step.is-done .step__label { color: var(--ink-2); }
.step__dot svg { width: 20px; height: 20px; }
@media (max-width: 600px) { .step__label { display: none; } }

.wizard-panel[hidden] { display: none; }
.wizard-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line-soft); }

/* التقويم | Calendar */
.cal { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
.cal__month { font-weight: 700; color: var(--ink); }
/* minmax(0,1fr) يسمح للعمود بالانكماش دون حد أدنى ضمني.
   بـ 1fr وحدها، ومع aspect-ratio:1 + min-height على الخانة، كانت الخانة
   تفرض عرضاً أكبر من عمودها فتتراكب الخانات فوق بعضها على الشاشات الضيقة
   وتلتقط النقر بدل جارتها.
   With plain 1fr, aspect-ratio + min-height forced each cell wider than its
   track, so cells overlapped on narrow screens and stole each other's taps. */
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal__dow { text-align: center; font-size: .74rem; color: var(--muted-2); font-weight: 600; padding-bottom: 6px; }
.cal__day {
  min-width: 0; height: 44px; border-radius: var(--r-sm); border: 1px solid transparent;
  display: grid; place-items: center; font-size: .9rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums; transition: background var(--t-fast), color var(--t-fast);
}
/* على الشاشات الضيقة تُقلَّص الحشوات لتبقى الخانة عريضة بما يكفي للنقر */
@media (max-width: 430px) {
  .cal { padding: 12px; }
  .cal__grid { gap: 3px; }
  .cal__day { font-size: .84rem; }
}
.cal__day:hover:not(:disabled) { background: var(--rose-tint); }
.cal__day:disabled { color: var(--faint); cursor: not-allowed; opacity: .55; }
.cal__day[aria-pressed="true"] { background: var(--rose-dark); color: #fff; font-weight: 700; }
.cal__day--empty { visibility: hidden; }

/* شبكة الأوقات | Time slots */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(104px, 100%), 1fr)); gap: 10px; }
.slot {
  padding: 12px 8px; border-radius: var(--r-sm); border: 1.5px solid var(--line);
  background: #fff; font-size: .9rem; font-weight: 600; color: var(--ink-2); min-height: 48px;
  font-variant-numeric: tabular-nums; transition: all var(--t-fast);
}
.slot:hover:not(:disabled) { border-color: var(--rose); color: var(--rose-dark); }
.slot[aria-pressed="true"] { background: var(--rose-dark); border-color: var(--rose-dark); color: #fff; }
.slot:disabled { background: var(--bg-soft); color: var(--faint); cursor: not-allowed; text-decoration: line-through; }

.review-list { display: grid; gap: 0; }
.review-list div {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: .93rem;
}
.review-list dt { color: var(--muted); }
.review-list dd { margin: 0; font-weight: 600; color: var(--ink); text-align: end; }
.review-total { display: flex; justify-content: space-between; padding-top: var(--s4); margin-top: var(--s3); border-top: 2px solid var(--rose-soft); }
.review-total dt { font-weight: 700; color: var(--ink); }
.review-total dd { margin: 0; font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; color: var(--rose-dark); }

.booking-code {
  display: inline-block; font-family: 'Inter', monospace; font-size: 1.3rem; font-weight: 700;
  letter-spacing: .16em; color: var(--rose-dark); background: var(--rose-tint);
  padding: 12px 26px; border-radius: var(--r-sm); margin-block: var(--s4);
}

/* ---------- 20. الأكورديون | Accordion ---------- */
.accordion { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.acc-item + .acc-item { border-top: 1px solid var(--line-soft); }
.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 18px var(--s5); text-align: start; font-weight: 600; font-size: 1rem; color: var(--ink);
  min-height: 62px; transition: background var(--t-fast);
}
.acc-trigger:hover { background: var(--bg-soft); }
.acc-trigger[aria-expanded="true"] { color: var(--rose-dark); background: var(--rose-tint); }
.acc-icon {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--rose-dark);
  transition: transform var(--t), background var(--t), color var(--t);
}
.acc-icon svg { width: 16px; height: 16px; }
.acc-trigger[aria-expanded="true"] .acc-icon { transform: rotate(180deg); background: var(--rose-dark); color: #fff; border-color: var(--rose-dark); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t); }
.acc-panel > div { overflow: hidden; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel p { padding: 0 var(--s5) 20px; color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- 21. رأس الصفحة الداخلي | Page header ---------- */
.page-head {
  background: linear-gradient(140deg, var(--rose-tint), var(--bg-soft));
  padding-block: var(--s7); border-bottom: 1px solid var(--line-soft);
}
.page-head h1 { margin-bottom: 10px; }
.page-head p { color: var(--muted); margin: 0; max-width: 640px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted-2); margin-bottom: 14px; flex-wrap: wrap; }
.crumbs a { color: var(--muted-2); }
.crumbs a:hover { color: var(--rose-dark); }
.crumbs svg { width: 13px; height: 13px; opacity: .6; }
html[dir="ltr"] .crumbs svg { transform: rotate(180deg); }

/* ---------- 22. تخطيطات المحتوى | Content layouts ---------- */
.with-side { display: grid; grid-template-columns: 1fr 340px; gap: var(--s6); align-items: start; }
@media (max-width: 1000px) { .with-side { grid-template-columns: 1fr; } }
.sticky-side { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: var(--s4); }
@media (max-width: 1000px) { .sticky-side { position: static; } }

.checklist { display: grid; gap: 12px; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; font-size: .96rem; color: var(--ink-2); }
.checklist svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 5px; }

.numbered { display: grid; gap: var(--s4); counter-reset: step; }
.numbered li { display: flex; gap: var(--s4); counter-increment: step; }
.numbered li::before {
  content: counter(step); flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--rose-tint); color: var(--rose-dark); display: grid; place-items: center;
  font-weight: 700; font-size: .95rem;
}
.numbered h4 { margin-bottom: 3px; }
.numbered p { color: var(--muted); font-size: .93rem; margin: 0; }

/* ---------- 23. الفلاتر | Filters ---------- */
.filter-bar { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-bottom: var(--s5); }
.chip {
  padding: 10px 20px; border-radius: var(--r-pill); border: 1px solid var(--line);
  font-size: .88rem; font-weight: 500; color: var(--muted); background: #fff;
  min-height: 42px; display: inline-flex; align-items: center; gap: 7px;
  transition: all var(--t-fast);
}
.chip svg { width: 16px; height: 16px; }
.chip:hover { border-color: var(--rose); color: var(--rose-dark); }
.chip[aria-pressed="true"] { background: var(--rose-dark); border-color: var(--rose-dark); color: #fff; font-weight: 600; }

.search-box { position: relative; flex: 1; min-width: 220px; }
.search-box input { padding-inline-start: 46px; }
.search-box svg {
  position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--muted-2); pointer-events: none;
}

.empty { text-align: center; padding: clamp(48px, 8vw, 80px) var(--s4); background: var(--bg-soft); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.empty__icon { width: 66px; height: 66px; margin: 0 auto var(--s4); border-radius: 50%; background: #fff; color: var(--faint); display: grid; place-items: center; box-shadow: var(--sh-sm); }
.empty__icon svg { width: 30px; height: 30px; }
.empty p { color: var(--muted); margin: 0; }

/* ---------- 24. الخريطة | Map ---------- */
.map-box { height: 380px; border-radius: var(--r-lg); overflow: hidden; z-index: 0; background: var(--bg-soft-2); }
.leaflet-container { font-family: var(--font-body) !important; }
.leaflet-popup-content { font-family: var(--font-body); margin: 12px 14px; }
html[dir="rtl"] .leaflet-popup-content { direction: rtl; text-align: right; }
.leaflet-popup-content b { display: block; color: var(--ink); margin-bottom: 2px; }
.leaflet-control-zoom a { width: 40px !important; height: 40px !important; line-height: 40px !important; font-size: 20px !important; }
.leaflet-popup-close-button { width: 38px !important; height: 38px !important; font-size: 22px !important; padding: 0 !important; }

/* ---------- 25. معلومات التواصل | Contact info ---------- */
.info-item { display: flex; gap: 14px; padding-block: var(--s4); border-bottom: 1px solid var(--line-soft); }
.info-item:last-child { border-bottom: 0; padding-bottom: 0; }
.info-item__icon { width: 46px; height: 46px; border-radius: 50%; background: var(--rose-tint); color: var(--rose-dark); display: grid; place-items: center; flex: none; }
.info-item__icon svg { width: 21px; height: 21px; }
.info-item b { display: block; color: var(--ink); font-size: .94rem; }
.info-item span { font-size: .92rem; color: var(--muted); }
.info-item a { font-size: .92rem; color: var(--muted); display: inline-block; padding-block: 8px; }
.info-item a:hover { color: var(--rose-dark); }

/* ---------- 26. قسم الدعوة | CTA band ---------- */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl);
  padding: clamp(36px, 5vw, 68px); color: #fff;
  background: linear-gradient(140deg, var(--rose-deep), var(--nude));
}
.cta-band::before {
  content: ''; position: absolute; z-index: -1; inset-inline-end: -80px; top: -100px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 66%);
}
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: rgba(255,255,255,.86); margin: 0; max-width: 520px; }
.cta-band__actions { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* ---------- 27. التذييل | Footer ---------- */
.footer { background: #3A2E2A; color: rgba(255,255,255,.72); padding-top: var(--s8); margin-top: var(--s7); }
.footer a { color: rgba(255,255,255,.72); }
.footer a:hover { color: var(--gold-soft); }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: var(--s6); padding-bottom: var(--s7); }
.footer__about p { font-size: .92rem; margin-top: var(--s4); max-width: 330px; }
.footer .logo__name { color: #fff; }
.footer .logo__sub { color: rgba(255,255,255,.45); }
.footer h4 { color: #fff; font-size: .96rem; margin-bottom: var(--s4); font-family: var(--font-body); }
.footer__list { display: flex; flex-direction: column; gap: 11px; font-size: .91rem; }
.footer__list a { display: inline-flex; align-items: center; gap: 8px; }
.footer__list svg { width: 15px; height: 15px; opacity: .6; flex: none; }

.newsletter { display: flex; gap: 8px; margin-top: var(--s3); }
.newsletter input {
  flex: 1; min-width: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #fff; border-radius: var(--r-pill); padding: 12px 18px; font-size: .9rem; min-height: 48px;
}
.newsletter input::placeholder { color: rgba(255,255,255,.42); }
.newsletter input:focus { outline: none; border-color: var(--gold-soft); background: rgba(255,255,255,.12); }
.newsletter__msg { font-size: .85rem; color: var(--gold-soft); margin-top: 10px; min-height: 1.2em; }

.socials { display: flex; gap: 10px; margin-top: var(--s4); }
.socials a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.socials a:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); }
.socials svg { width: 18px; height: 18px; }

/* لافتة داخل المحتوى | In-page notice — منفصل عن .disclaimer المحجوز للتذييل */
.notice {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--line); border-inline-start: 3px solid var(--gold);
  border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 28px;
  font-size: .89rem; color: var(--muted); background: var(--gold-tint);
}
.notice svg { width: 18px; height: 18px; color: var(--nude); flex: none; margin-top: 4px; }

/* إشعار طبي | Medical disclaimer */
.disclaimer {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid rgba(255,255,255,.16); border-inline-start: 3px solid var(--gold-soft);
  border-radius: var(--r-md); padding: 14px 18px; margin-bottom: var(--s5);
  font-size: .86rem; color: rgba(255,255,255,.74);
}
.disclaimer svg { width: 18px; height: 18px; color: var(--gold-soft); flex: none; margin-top: 4px; }

/* الشريط التصريحي السفلي | Bottom disclosure bar */
.bottombar { border-top: 1px solid rgba(255,255,255,.1); background: #2C2320; padding-block: var(--s4); }
.bottombar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-size: .84rem; }
.bottombar__note {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: #fff;
  background: var(--rose-dark); padding: 7px 18px; border-radius: var(--r-pill);
}
.bottombar__note svg { width: 15px; height: 15px; flex: none; }
.bottombar__copy { color: rgba(255,255,255,.5); }

@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; gap: var(--s5); } }

/* ---------- 28. الظهور التدريجي | Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

body.is-switching { opacity: .55; transition: opacity .12s linear; }