/* ============================================================
   qasr — قالب «قَصر» (VIP)
   قصر فرنسي بحدائق مشذّبة وورد أبيض، من لوحتَي كرار. جدار ورد
   أبيض ينشقّ عن النور (فيلمه) ثم يذوب النور إلى اللوحة.
   حجر عاجي × مريمي × أردوازي × شمبانيا على ورق دافئ.
   كل الزخرفة SVG — تكبر بلا تكسّر وتتبدّل ألوانها بمتغيّر واحد.
   ============================================================ */

:root {
  /* ── الحجر والورق (واجهة القصر والممرّ) ── */
  --ivory: #fbf9f3;
  --paper: #f6f2ea;
  --stone-100: #f0e8d9;
  --stone-300: #e1d5bf;
  --stone-500: #c9b89a;
  --sand: #ecd9c3;

  /* ── المريمي (السياج والأشجار) ── */
  --sage-200: #d6d8c3;
  --sage-400: #a3a98c;
  --sage-600: #7c8466;
  --sage-800: #52593f;

  /* ── الأردوازي (أسطح القصر وبدلة العريس) ── */
  --slate-300: #9ea3ad;
  --slate-500: #5b616c;
  --slate-700: #3b414b;

  /* ── الشمبانيا (زخرفة الواجهة الحجرية) ── */
  --champ-200: #efe2c0;
  --champ-500: #b9a06b;
  --champ-700: #8d7646;

  --ink: #3b414b;
  --ink-soft: #78808a;

  --shadow: 0 18px 40px -22px rgba(59, 65, 75, .38);
  --hair: 1px solid rgba(185, 160, 107, .42);
}

*, *::before, *::after { box-sizing: border-box; }

/* عنصر عليه سمة hidden يبقى مخفياً مهما أعطاه صنفُه display —
   بدونها يظهر زرّ الخرائط وصندوق التواصل فارغَين على دعوات بلا رابط ولا رقم */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* overflow-x:hidden لا clip — clip يكسر العناصر الثابتة على سفاري iOS */
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Amiri", Georgia, serif;
  font-size: 17px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; height: 100%; }

/* أرضية الصفحة: سماء باهتة أعلى، مريمي عند الأطراف، رمل الممرّ أسفل —
   طبقة سالبة فلا تطلي النص */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* نصف القطر × آخر محطة ≤ ٥٠٪ فلا تُقصّ الهالة عند حافّة الصندوق */
    radial-gradient(60% 34% at 8% 4%, rgba(163, 169, 140, .30) 0%, rgba(163, 169, 140, 0) 46%),
    radial-gradient(54% 30% at 94% 16%, rgba(214, 216, 195, .52) 0%, rgba(214, 216, 195, 0) 46%),
    radial-gradient(58% 32% at 4% 64%, rgba(163, 169, 140, .18) 0%, rgba(163, 169, 140, 0) 46%),
    radial-gradient(62% 34% at 52% 98%, rgba(236, 217, 195, .62) 0%, rgba(236, 217, 195, 0) 46%),
    linear-gradient(180deg, #fbf9f3 0%, #f6f2ea 40%, #f3eee3 100%);
}

img, svg { max-width: 100%; }

/* ════════════════════════════════════════════════════════════
   الدخولية (البوابة)
   ════════════════════════════════════════════════════════════ */
#gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  cursor: pointer;
  background: #e9e2cf;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.gate__bgposter {
  position: absolute;
  inset: 0;
  background: url("/templates/qasr/assets/entrance-poster.jpg") center/cover no-repeat;
  transform: scale(1.04);
}
.gate__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
#gate.is-playing .gate__vid { opacity: 1; }
/* الجدار الأبيض ساطع: حجاب مريمي داكن أسفله يحمل نصّ التلميح،
   ويذوب حين يبدأ الفيلم كي يبقى النور نقيّاً */
.gate__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(40, 46, 34, .22) 0%, rgba(40, 46, 34, 0) 26%, rgba(40, 46, 34, 0) 52%, rgba(40, 46, 34, .70) 100%);
  transition: opacity 1.6s ease;
}
#gate.is-playing .gate__veil { opacity: 0; }
/* توهّج أبيض يطغى على آخر الفيلم — منه تُولد الواجهة */
.gate__bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 44%, #fffef8 0%, #fdf9ee 40%, rgba(251, 246, 232, .96) 100%);
  transition: opacity .9s ease;
}
#gate.is-bloom .gate__bloom { opacity: 1; }

.gate__hint {
  position: absolute;
  inset-inline: 0;
  bottom: max(7vh, 46px);
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-inline: 22px;
  text-align: center;
  transition: opacity .45s ease;
}
#gate.is-playing .gate__hint { opacity: 0; pointer-events: none; }

.gate__load { display: grid; justify-items: center; gap: 8px; width: min(240px, 62vw); }
.gate__load-txt { font-size: .82rem; color: rgba(251, 249, 243, .92); text-shadow: 0 1px 10px rgba(30, 36, 24, .7); }
.gate__load-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: rgba(251, 249, 243, .3);
  overflow: hidden;
}
.gate__load-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--champ-500), var(--champ-200));
  transition: width .3s ease;
}

/* التلميح والزخرفة لا يظهران قبل جاهزية الفيديو */
.gate__hint-orn, .gate__hint-ar, .gate__hint-sub { opacity: 0; transition: opacity .5s ease; }
#gate.is-ready .gate__load { display: none; }
#gate.is-ready .gate__hint-orn,
#gate.is-ready .gate__hint-ar,
#gate.is-ready .gate__hint-sub { opacity: 1; }

.gate__hint-orn { width: 148px; filter: drop-shadow(0 2px 6px rgba(30, 36, 24, .5)); }
.gate__hint-orn svg { display: block; width: 100%; height: auto; }
.gate__hint-ar {
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: 1.36rem;
  color: #fdfcf8;
  text-shadow: 0 2px 16px rgba(30, 36, 24, .92), 0 0 40px rgba(30, 36, 24, .6);
  animation: breathe 3.4s ease-in-out infinite;
}
.gate__hint-sub {
  font-size: .82rem;
  color: rgba(253, 252, 248, .86);
  text-shadow: 0 2px 12px rgba(30, 36, 24, .85);
}
@keyframes breathe { 0%, 100% { opacity: .84; } 50% { opacity: 1; } }

/* ════════════════════════════════════════════════════════════
   البتلات المتساقطة (وحزم اللمس)
   ════════════════════════════════════════════════════════════ */
#petals {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
/* #petals يسبق #site في الـDOM فلا ينفع محدّد الشقيق — الكشف يزيل body.locked */
body:not(.locked) #petals { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   الظهور المتدرّج
   ════════════════════════════════════════════════════════════ */
.creveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.creveal.is-visible { opacity: 1; transform: none; }

.rv { opacity: 0; transform: translateY(14px); }
#site.opened .rv { animation: rvIn 1.1s cubic-bezier(.22, .8, .3, 1) forwards; }
#site.opened .hero__welcome { animation-delay: .5s; }
#site.opened .hero__names { animation-delay: .8s; }
#site.opened .hero__date { animation-delay: 1.15s; }
#site.opened .hero__scroll { animation-delay: 1.55s; }
#site.rv-done .rv { opacity: 1; transform: none; animation: none; }
@keyframes rvIn { to { opacity: 1; transform: none; } }

/* ════════════════════════════════════════════════════════════
   الواجهة
   ════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: space-between;
  padding: max(8vh, 56px) 20px max(5vh, 34px);
  overflow: hidden;
  isolation: isolate;
}
/* اللوحة: تميل مع الجهاز/الفأرة عبر --tx/--ty (يضبطها السكربت) */
.hero__art {
  position: absolute;
  inset: -6%;
  z-index: -3;
  background: url("/templates/qasr/assets/hero.jpg") 50% 42% / cover no-repeat;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1.02);
  transition: transform 2.6s cubic-bezier(.2, .7, .3, 1), filter 2.4s ease;
  will-change: transform;
}
/* بعد استقرار اللوحة تتبع الميل بسرعة */
#site.is-live .hero__art { transition: transform .35s ease-out; }
/* حالة «الوصول من النور»: تصل اللوحة مغمورةً بالضوء ومكبَّرة ثم تهدأ */
#site.hero-pre .hero__art { transform: scale(1.16); filter: brightness(1.65) contrast(.82) saturate(.7); }

/* أشعة شمس من أعلى اللوحة تخبو بعد الدخول وتبقى خيطاً خفيفاً */
.hero__rays { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; opacity: 0; }
#site.opened .hero__rays { animation: raysLife 8s ease-out forwards; }
@keyframes raysLife { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: .3; } }
.hero__rays i {
  position: absolute;
  top: -24vh;
  left: 50%;
  width: 22vw;
  height: 150vh;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 250, 230, .78) 0%, rgba(255, 250, 230, .22) 46%, rgba(255, 250, 230, 0) 76%);
  filter: blur(7px);
  mix-blend-mode: screen;
}
.hero__rays i:nth-child(1) { transform: translateX(-50%) rotate(-24deg); animation: raySway 9s ease-in-out infinite; }
.hero__rays i:nth-child(2) { width: 15vw; transform: translateX(-50%) rotate(-3deg); animation: raySway 11s ease-in-out -4s infinite; }
.hero__rays i:nth-child(3) { transform: translateX(-50%) rotate(20deg); animation: raySway 10s ease-in-out -2s infinite; }
@keyframes raySway { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* الحجاب: عاجيّ أعلى الشاشة (خلف الأسماء بين الأشجار) وأسفلها (خلف
   التاريخ فوق الممرّ والفستان) — فالأردوازي يبقى مقروءاً على اللوحة الفاتحة */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(251, 249, 243, .78) 0%, rgba(251, 249, 243, .46) 16%, rgba(251, 249, 243, 0) 34%,
      rgba(251, 249, 243, 0) 66%, rgba(246, 242, 234, .42) 82%, rgba(246, 242, 234, .9) 100%);
}

.hero__top { display: grid; justify-items: center; gap: 8px; align-content: start; }

.hero__welcome {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: .98rem;
  color: var(--slate-700);
  text-shadow: 0 0 12px rgba(255, 255, 255, .95), 0 1px 18px rgba(255, 255, 255, .8);
  max-width: 30ch;
  text-align: center;
}
.hero__welcome-orn {
  flex: 0 0 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champ-500));
}
.hero__welcome-orn:last-child { background: linear-gradient(270deg, transparent, var(--champ-500)); }

.hero__names {
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-weight: 700;
  /* لا letter-spacing مع «رقعة» — يُسقط حرفاً من الكلمة على بعض الأجهزة */
  font-size: clamp(2.5rem, 12.5vw, 4.2rem);
  line-height: 1.36;
}
/* الاسمان بأردوازي القصر، وهالة بيضاء تفصلهما عن أغصان الأشجار خلفهما */
.hero__name {
  color: var(--slate-700);
  text-shadow:
    0 0 2px rgba(255, 255, 255, .9),
    0 0 16px rgba(255, 255, 255, .95),
    0 2px 30px rgba(255, 255, 255, .85);
}
.hero__amp { flex: 0 0 42px; height: 42px; filter: drop-shadow(0 3px 10px rgba(59, 65, 75, .35)); }
.hero__amp svg { display: block; width: 100%; height: 100%; }

.hero__bottom { display: grid; justify-items: center; gap: 12px; }
.hero__date { display: grid; justify-items: center; gap: 8px; width: 100%; }
.hero__date-line {
  width: min(200px, 56vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champ-500), transparent);
}
.hero__date-ar {
  margin: 0;
  text-align: center;
  font-size: 1rem;
  color: var(--slate-700);
  text-shadow: 0 0 12px rgba(255, 255, 255, .95), 0 1px 18px rgba(255, 255, 255, .85);
  max-width: 32ch;
}
.hero__scroll {
  margin: 0;
  font-size: .78rem;
  color: var(--slate-500);
  text-shadow: 0 0 10px rgba(255, 255, 255, .9);
  animation: floaty 2.6s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { transform: translateY(0); opacity: .76; } 50% { transform: translateY(6px); opacity: 1; } }

/* ════════════════════════════════════════════════════════════
   ألوان مكتبة الـSVG
   ════════════════════════════════════════════════════════════ */
/* ظلّ خفيف تحت الوردة البيضاء يفصلها عن الورق الفاتح */
.wr__shade { fill: rgba(82, 89, 63, .10); }
.wr__outer path { fill: url(#gPetal); stroke: rgba(120, 112, 92, .34); stroke-width: .8; stroke-linejoin: round; }
.wr__inner path { fill: url(#gPetalIn); stroke: rgba(120, 112, 92, .28); stroke-width: .7; stroke-linejoin: round; }
.wr__heart { fill: #efe2b4; stroke: rgba(150, 130, 80, .35); stroke-width: .6; }
.wr__dots circle { fill: #cdb56e; }

.bud__sepal { fill: url(#gLeaf); }
.bud__petal { fill: url(#gPetal); stroke: rgba(120, 112, 92, .3); stroke-width: .8; }
.bud__petal2 { fill: url(#gPetalIn); opacity: .9; }
.bud__fold { fill: none; stroke: #b7ab8c; stroke-width: 1.4; opacity: .5; }

.leaf__blade { fill: url(#gLeaf); stroke: var(--sage-800); stroke-width: .8; stroke-opacity: .4; }
.leaf__rib { fill: none; stroke: var(--sage-800); stroke-width: 1; opacity: .5; }
.leaf__vein { fill: none; stroke: var(--sage-800); stroke-width: .7; opacity: .34; }

.sprig__stem { fill: none; stroke: var(--sage-600); stroke-width: 2.4; stroke-linecap: round; opacity: .9; }

.orn__stroke { fill: none; stroke: var(--champ-500); stroke-width: 1.5; stroke-linecap: round; opacity: .78; }

/* تمايل هادئ للأغصان */
.breathe { transform-box: fill-box; transform-origin: 50% 0; animation: swayA 7s ease-in-out infinite; }
.breathe--b { animation-duration: 8.4s; animation-delay: -2.2s; }
@keyframes swayA { 0%, 100% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.3deg); } }

/* ════════════════════════════════════════════════════════════
   الأقسام
   ════════════════════════════════════════════════════════════ */
.sec { padding: 58px 20px; max-width: 640px; margin-inline: auto; text-align: center; position: relative; }

.sec__title { margin: 0 0 8px; font-weight: 400; }
.sec__title-main {
  display: inline-block;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: clamp(1.5rem, 6.4vw, 2rem);
  line-height: 1.7;
  /* شمبانيا الواجهة الحجرية — العميق أولاً كي يُقرأ على ورق فاتح */
  background: linear-gradient(180deg, #8d7646 0%, #b9a06b 52%, #dcc79a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sec__title::after {
  content: "";
  display: block;
  width: 82px;
  height: 1px;
  margin: 8px auto 0;
  background: linear-gradient(90deg, transparent, var(--champ-500), transparent);
}

/* ── قنطرة كرار: تاج وعتبة صورتان، والجانبان شريط يتكرّر مع النص ── */
/* أرضية اللوحة الكريمية (#fefaf3) هي أرضية القسم كلّه، تذوب من ورق الصفحة
   وإليه ضمن حشوة القسم قبل بداية اللوحة وبعد نهايتها — فلا يظهر للّوحة
   مستطيل ولا حدّ، وكأنها مرسومة على الصفحة */
.invite {
  max-width: none;
  padding: 66px 10px 64px;
  background: linear-gradient(180deg, rgba(254, 250, 243, 0) 0, #fefaf3 58px, #fefaf3 calc(100% - 58px), rgba(254, 250, 243, 0) 100%);
}
.arch { position: relative; max-width: 440px; margin: 0 auto; }
.arch__head, .arch__foot { display: block; width: 100%; height: auto; }
/* الجانبان: شريط ٧px من اللوحة نفسها يتكرّر عمودياً (خطوطه مستقيمة فلا يُرى
   تكراره). الحشو الجانبي = موضع الخطّ الداخلي في اللوحة (~٢٣٪) + هامش قراءة */
.arch__body {
  position: relative;
  background: url("/templates/qasr/assets/arch-side.png") repeat-y center top / 100% auto;
  padding: 2px 24% 10px;
  margin-block: -1px;
  display: grid;
  gap: 12px;
  justify-items: center;
}

/* ألوان النصّ = ألوان النصّ الذي كان مطبوعاً في اللوحة (عيّنات منها) */
.invite__dua {
  margin: 0;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: clamp(1rem, 4.4vw, 1.2rem);
  line-height: 2.1;
  color: #525430;
}
.invite__rule { display: block; width: 150px; }
.invite__rule svg { display: block; width: 100%; height: auto; overflow: visible; }
.invite__request {
  margin: 0;
  font-size: .95rem;
  line-height: 2.05;
  color: #484746;
  /* أسطر الزبون تُحترم كما كتبها */
  white-space: pre-line;
}

/* ── أهل العروسين: عمودان جنباً إلى جنب ووردة بينهما ── */
.families {
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 8px;
  max-width: 560px;
}
/* طرف واحد فقط (السكربت يخفي الآخر والوردة) → عمود واحد */
.families.families--one { grid-template-columns: 1fr; }
.family { min-width: 0; display: grid; gap: 4px; }
.family__label { font-size: .76rem; color: var(--ink-soft); }
.family__names {
  margin: 0;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: .98rem;
  line-height: 1.9;
  color: var(--slate-700);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.families__heart { width: 30px; height: 30px; margin-top: 20px; }
.families__heart svg { display: block; width: 100%; height: 100%; }

/* ── العدّ التنازلي: نوافذ مقنطرة كنوافذ الواجهة ── */
.count__kicker { margin: 14px 0 2px; font-size: .78rem; color: var(--ink-soft); }
.count__date {
  margin: 0 auto 22px;
  max-width: 30ch;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: 1.08rem;
  line-height: 1.95;
  color: var(--slate-700);
}
.count__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 420px;
  margin-inline: auto;
}
.count__cell {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 20px 4px 12px;
  border-radius: 48px 48px 8px 8px;
  background: linear-gradient(180deg, #fdfcf8, var(--stone-100));
  border: var(--hair);
  box-shadow: var(--shadow);
  min-width: 0;
}
/* إطار النافذة الداخلي */
.count__cell::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 44px 44px 5px 5px;
  border: 1px solid rgba(185, 160, 107, .3);
  pointer-events: none;
}
.count__cell b {
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: clamp(1.28rem, 6.2vw, 1.7rem);
  line-height: 1.55;
  color: var(--slate-700);
  font-weight: 700;
}
.count__cell span { font-size: .68rem; color: var(--ink-soft); }
.count__done { margin: 18px 0 0; font-family: "Aref Ruqaa", "Amiri", serif; color: var(--sage-800); }

/* ── التقويم: بطاقة معلّقة بحلقتين، شهر كامل واليوم بدائرة تنبض ── */
.cal__card {
  position: relative;
  max-width: 340px;
  margin: 24px auto 0;
  padding: 0 0 18px;
  border-radius: 26px 26px 12px 12px;
  background: linear-gradient(180deg, #fdfcf8, var(--stone-100));
  border: var(--hair);
  box-shadow: var(--shadow);
}
.cal__ring {
  position: absolute;
  top: -9px;
  width: 8px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--champ-200), var(--champ-500));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.cal__ring--a { inset-inline-start: 30%; }
.cal__ring--b { inset-inline-end: 30%; }
.cal__head {
  padding: 16px 12px 10px;
  border-bottom: 1px solid rgba(185, 160, 107, .3);
  border-radius: 26px 26px 0 0;
  background: linear-gradient(180deg, rgba(214, 216, 195, .45), rgba(214, 216, 195, 0));
}
.cal__month { font-family: "Aref Ruqaa", "Amiri", serif; font-size: 1.22rem; color: var(--slate-700); }
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px 2px;
  padding: 12px 12px 6px;
}
.cal__wd { font-size: .74rem; color: var(--ink-soft); padding-bottom: 2px; }
.cal__day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-family: "Amiri", serif;
  font-size: .96rem;
  color: var(--ink);
  border-radius: 50%;
}
.cal__day--pad { visibility: hidden; }
/* يوم المناسبة: دائرة مريمية بحلقة شمبانيا تنبض */
.cal__day--event {
  color: var(--ivory);
  font-weight: 700;
  background: linear-gradient(180deg, var(--sage-600), var(--sage-800));
  box-shadow: 0 6px 14px -6px rgba(82, 89, 63, .75);
}
.cal__day--event::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--champ-500);
  animation: ringPulse 2.4s ease-out infinite;
}
@keyframes ringPulse { 0% { transform: scale(.82); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.cal__line { margin: 8px 12px 0; font-family: "Aref Ruqaa", "Amiri", serif; font-size: .98rem; color: var(--sage-800); }
.cal__foot { margin: 12px 12px 0; padding-top: 12px; border-top: 1px dashed rgba(185, 160, 107, .45); }
.cal__cap { margin: 0 0 9px; font-size: .78rem; color: var(--ink-soft); }
.cal__btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cal__btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--sage-600);
  color: var(--sage-800);
  background: var(--ivory);
  text-decoration: none;
  font-family: "Amiri", serif;
  font-size: .86rem;
  line-height: 1.5;
}
.cal__btn--demo { opacity: .85; }

/* ── برنامج الحفل: ممرّ الحديقة ── */
.sched__wrap { position: relative; max-width: 440px; margin: 22px auto 0; padding-inline-start: 48px; }
.sched__path {
  position: absolute;
  inset-inline-start: 4px;
  top: 4px;
  width: 34px;
  height: calc(100% - 8px);
  overflow: visible;
}
.path__sand { fill: none; stroke: var(--sand); stroke-width: 14; stroke-linecap: round; }
.path__hedge { fill: none; stroke: var(--sage-400); stroke-width: 2.2; stroke-dasharray: 3 5; opacity: .8; }
.path__grow {
  fill: none;
  stroke: var(--sage-600);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: var(--vine-len, 900);
  stroke-dashoffset: var(--vine-off, 900);
}
.sched__rose {
  position: absolute;
  inset-inline-start: 5px;
  top: 0;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  transition: top .18s linear;
  filter: drop-shadow(0 4px 10px rgba(59, 65, 75, .3));
}
.sched__rose svg { display: block; width: 100%; height: 100%; }

.sched__list { display: grid; gap: 12px; }
.srow {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 12px;
  text-align: start;
  padding: 12px 16px;
  border-radius: 6px 18px 18px 6px;
  background: linear-gradient(90deg, #fdfcf8, var(--stone-100));
  border: var(--hair);
  box-shadow: var(--shadow);
  /* عمود المحتوى يضيق قبل أن يفيض خارج الشبكة */
  min-width: 0;
}
.srow time {
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: .92rem;
  color: var(--champ-700);
  white-space: nowrap;
}
.sched__t { font-size: 1rem; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

/* ── المكان: نافورة + نافذة على القصر ── */
.loc__fountain { display: grid; justify-items: center; margin-bottom: 2px; }
.loc__fountain svg { width: min(200px, 56vw); height: auto; overflow: visible; }
.ftn__basin { fill: url(#gStone); stroke: rgba(185, 160, 107, .5); stroke-width: 1; }
.ftn__water { fill: #d4e2e6; opacity: .9; }
.ftn__stone { fill: url(#gStone); stroke: rgba(185, 160, 107, .5); stroke-width: 1; }
.ftn__bowl { fill: #e9e1cf; stroke: rgba(185, 160, 107, .55); stroke-width: 1; }
.ftn__top { fill: var(--champ-500); }
.ftn__jets path {
  fill: none;
  stroke: url(#gWater);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  opacity: .85;
  animation: flow 1.5s linear infinite;
}
.ftn__jets path:nth-child(2) { animation-delay: -.5s; }
.ftn__jets path:nth-child(3) { animation-delay: -.9s; }
.ftn__jets path:nth-child(4) { animation-delay: -.3s; }
.ftn__jets path:nth-child(5) { animation-delay: -1.1s; }
@keyframes flow { to { stroke-dashoffset: -24; } }

.loc__card {
  position: relative;
  margin: 14px auto 0;
  width: 100%;
  max-width: 440px;
  padding: 6px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fdfcf8, var(--stone-100));
  border: var(--hair);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.loc__card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .7);
  pointer-events: none;
}
/* بالعرض: شريط من اللوحة يضمّ الواجهة والنافورة وورد الجانبين */
.loc__img {
  display: block;
  width: 100%;
  height: auto; /* بلا هذا تغلب سمة height="979" في HTML نسبة العرض */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 46%;
  border-radius: 13px;
}
/* اللوحة تتنفّس ببطء داخل النافذة */
.loc.is-visible .loc__img { animation: kenburns 16s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }

.loc__venue {
  margin: 16px 0 4px;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: clamp(1.2rem, 5.4vw, 1.52rem);
  line-height: 1.8;
  color: var(--slate-700);
}
.loc__addr { margin: 0 0 18px; color: var(--ink-soft); font-size: .95rem; white-space: pre-line; }
.loc__mapwrap {
  display: none;
  border-radius: 20px;
  overflow: hidden;
  border: var(--hair);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  background: var(--stone-100);
}
.loc__mapwrap.on { display: block; }
.loc__mapwrap iframe { display: block; width: 100%; height: 100%; border: 0; }
.loc__maplink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-size: .92rem;
  color: var(--ivory);
  background: linear-gradient(180deg, var(--sage-600), var(--sage-800));
  box-shadow: var(--shadow);
}

/* ── تنويهات: لوحات حجرية صغيرة بوردة أول كل سطر ── */
.notes ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.notes li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: start;
  padding: 12px 16px;
  border-radius: 6px 18px 18px 6px;
  background: linear-gradient(90deg, #fdfcf8, var(--stone-100));
  border: var(--hair);
  font-size: .95rem;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.notes li::before { content: "❀"; flex: 0 0 auto; color: var(--champ-500); font-size: .9rem; line-height: 1.9; }

/* ════════════════════════════════════════════════════════════
   الأقسام المحقونة من المنصّة — بكسوة القالب
   المنصّة تحقن أنماطها داخل القسم بمعرّفه (#da3wa-rsvp .x)؛ محدّداتنا
   بمعرّفين (#site #da3wa-rsvp .x) تغلبها. الكسوة نفسها تنطبق على نموذج
   الاستعراض الثابت (#rsvpPreview) لأنه يحمل الأصناف نفسها. لا نلمس
   grid-template-columns للخيارات (قد تكون ثلاثة مع «ربما»).
   ════════════════════════════════════════════════════════════ */
#site #da3wa-rsvp, #site #rsvpPreview { font-family: "Amiri", Georgia, serif; padding: 40px 16px 56px; }
#site #da3wa-rsvp .rsvp-card, #site #rsvpPreview .rsvp-card {
  max-width: 440px;
  margin: 0 auto;
  padding: 28px 20px 26px;
  background: linear-gradient(180deg, #fdfcf8, var(--stone-100));
  border: var(--hair);
  border-radius: 26px 26px 12px 12px;
  box-shadow: var(--shadow);
  text-align: center;
}
#site #da3wa-rsvp .orn-line, #site #rsvpPreview .orn-line { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 6px; }
#site #da3wa-rsvp .orn-line i, #site #rsvpPreview .orn-line i { flex: 0 1 54px; height: 1px; border: none; background: linear-gradient(90deg, transparent, var(--champ-500)); }
#site #da3wa-rsvp .orn-line i:last-child, #site #rsvpPreview .orn-line i:last-child { transform: scaleX(-1); }
#site #da3wa-rsvp .orn-line b, #site #rsvpPreview .orn-line b { color: var(--champ-500); font-size: 17px; font-weight: 400; line-height: 1; }
#site #da3wa-rsvp h3, #site #rsvpPreview h3 { font-family: "Aref Ruqaa", "Amiri", serif; font-size: 1.5rem; font-weight: 400; color: var(--slate-700); margin: 0 0 2px; letter-spacing: normal; }
#site #da3wa-rsvp p.sub, #site #rsvpPreview p.sub { color: var(--ink-soft); font-size: .9rem; margin: 0 0 14px; }
#site #da3wa-rsvp .cap-note { font-family: "Amiri", serif; border-color: var(--champ-500); color: var(--sage-800); background: rgba(185, 160, 107, .1); }
#site #da3wa-rsvp label, #site #rsvpPreview label { display: block; text-align: start; font-family: "Amiri", serif; font-weight: 400; font-size: .88rem; color: var(--slate-500); margin: 12px 0 5px; }
#site #da3wa-rsvp input, #site #da3wa-rsvp textarea, #site #rsvpPreview input, #site #rsvpPreview textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: "Amiri", serif;
  font-size: .98rem;
  padding: 11px 14px;
  border: 1px solid rgba(185, 160, 107, .55);
  border-radius: 12px;
  background: #fffdf9;
  color: var(--ink);
}
#site #da3wa-rsvp input::placeholder, #site #da3wa-rsvp textarea::placeholder,
#site #rsvpPreview input::placeholder, #site #rsvpPreview textarea::placeholder { color: var(--ink-soft); opacity: .8; }
#site #rsvpPreview .pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 6px; }
#site #da3wa-rsvp .pill, #site #rsvpPreview .pill {
  padding: 11px;
  border: 1px solid rgba(185, 160, 107, .55);
  border-radius: 20px 20px 8px 8px;
  background: #fffdf9;
  font-family: "Amiri", serif;
  font-size: .98rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: .15s;
}
#site #da3wa-rsvp .pill[aria-pressed="true"], #site #rsvpPreview .pill[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--sage-600), var(--sage-800));
  color: var(--ivory);
  border-color: var(--sage-800);
}
#site #da3wa-rsvp .step, #site #rsvpPreview .step { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
#site #da3wa-rsvp .step button, #site #rsvpPreview .step button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(185, 160, 107, .55);
  background: #fffdf9;
  color: var(--slate-700);
  font-size: 20px;
  cursor: pointer;
}
#site #da3wa-rsvp .step span, #site #rsvpPreview .step span { font-family: "Aref Ruqaa", "Amiri", serif; font-size: 1.2rem; min-width: 28px; color: var(--slate-700); text-align: center; }
#site #da3wa-rsvp .cap-max { color: var(--sage-800); }
#site #da3wa-rsvp .send, #site #rsvpPreview .send {
  width: 100%;
  margin-top: 20px;
  padding: 13px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sage-600), var(--sage-800));
  color: var(--ivory);
  font-family: "Amiri", serif;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: var(--shadow);
}
#site #da3wa-rsvp .ticket-save, #site #da3wa-rsvp .so-dl { background: linear-gradient(180deg, var(--sage-600), var(--sage-800)); color: var(--ivory); font-family: "Amiri", serif; }
#site #da3wa-rsvp .done-edit, #site #da3wa-rsvp .so-sh, #site #da3wa-rsvp .so-open { font-family: "Amiri", serif; border-color: rgba(185, 160, 107, .55); background: #fffdf9; color: var(--slate-700); }
#site #da3wa-rsvp .done-t, #site #da3wa-rsvp .so-t { font-family: "Aref Ruqaa", "Amiri", serif; color: var(--slate-700); }
#site #da3wa-rsvp .done-n { color: var(--sage-800); }
/* جدار التهاني */
#site #rsvpPreview .wishes { max-width: 460px; margin: 30px auto 0; }
#site #rsvpPreview .wishes-h { text-align: center; margin-bottom: 16px; }
#site #rsvpPreview .wish-list { display: grid; gap: 10px; }
#site #da3wa-rsvp .wishes-h h3, #site #rsvpPreview .wishes-h h3 {
  display: inline-block;
  padding: 7px 22px;
  border-radius: 999px;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--slate-700);
  background: var(--ivory);
  border: var(--hair);
  box-shadow: var(--shadow);
}
#site #da3wa-rsvp .wish, #site #rsvpPreview .wish {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: 6px 18px 18px 6px;
  background: linear-gradient(90deg, #fdfcf8, var(--stone-100));
  border: var(--hair);
  box-shadow: var(--shadow);
}
#site #da3wa-rsvp .wish-av, #site #rsvpPreview .wish-av {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: 1.1rem;
}
#site #da3wa-rsvp .wish-body, #site #rsvpPreview .wish-body { text-align: start; flex: 1; min-width: 0; }
#site #da3wa-rsvp .wish-name, #site #rsvpPreview .wish-name { font-weight: 700; color: var(--slate-700); font-size: .92rem; }
#site #da3wa-rsvp .wish-msg, #site #rsvpPreview .wish-msg { color: var(--ink-soft); font-size: .92rem; line-height: 1.7; overflow-wrap: anywhere; }
#site #da3wa-rsvp .wishes-empty, #site #da3wa-rsvp .wishes-more { font-family: "Amiri", serif; background: var(--ivory); border: var(--hair); color: var(--slate-700); border-radius: 16px; }

/* الملاحظة البارزة (بطاقة الجرس — تصميم كرار) بكسوة القالب؛ والعيّنة الثابتة معها */
#site #da3wa-note, #site .hn-demo { display: flex; justify-content: center; padding: 30px 4px 14px; font-family: "Amiri", Georgia, serif; }
#site #da3wa-note .hn-card, #site .hn-demo .hn-card {
  position: relative;
  max-width: 430px;
  width: 100%;
  text-align: center;
  padding: 32px 20px 18px;
  border-radius: 26px 26px 12px 12px;
  background: linear-gradient(180deg, #fdfcf8, var(--stone-100));
  border: 1px solid var(--champ-500);
  color: var(--ink);
  box-shadow: var(--shadow);
}
#site #da3wa-note .hn-bell, #site .hn-demo .hn-bell {
  position: absolute;
  top: -26px;
  right: 50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--champ-200), var(--champ-500));
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  border: 2px solid #fff;
  box-shadow: 0 6px 16px rgba(120, 90, 70, .3);
  transform: translateX(50%);
  transform-origin: top center;
  animation: hnRing 2.2s ease-in-out infinite;
}
#site #da3wa-note .hn-kick, #site .hn-demo .hn-kick { display: block; font-size: .78rem; font-weight: 400; color: var(--ink-soft); margin-bottom: 6px; }
#site #da3wa-note .hn-text, #site .hn-demo .hn-text {
  margin: 0;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 4.4vw, 1.4rem);
  line-height: 1.9;
  color: var(--slate-700);
}
@keyframes hnRing {
  0%, 32%, 100% { transform: translateX(50%) rotate(0); }
  8% { transform: translateX(50%) rotate(13deg); }
  16% { transform: translateX(50%) rotate(-11deg); }
  24% { transform: translateX(50%) rotate(7deg); }
}

/* بطاقة المنصّة «احفظ الموعد» تُخفى — القالب يعرض شهر الموعد كاملاً بقسمه
   (#calSec) ويستعير منها زرَّي تقويم الهاتف بالسكربت */
#site #da3wa-cal { display: none !important; }

/* ── الختام ── */
.closing { padding-bottom: 40px; }
.closing__panel {
  padding: 34px 22px 28px;
  border-radius: 26px;
  background: linear-gradient(180deg, #fdfcf8, var(--stone-100));
  border: var(--hair);
  box-shadow: var(--shadow);
}
/* ميدالية العروسين */
.cameo { position: relative; width: min(224px, 62%); margin: 2px auto 18px; }
.cameo__img {
  display: block;
  width: 100%;
  height: auto;
  /* الاستدارة قصٌّ احتياطي؛ القناع يذيب الحافّة قبله فلا يُرى حدٌّ قاسٍ.
     نصف القطر (٥٢٪) × آخر محطة (٩٦٪) = ٤٩٫٩٪ ≤ ٥٠٪ فلا تُقصّ الهالة. */
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 58%, rgba(0, 0, 0, 0) 96%);
  mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 58%, rgba(0, 0, 0, 0) 96%);
}
.closing.is-visible .cameo__img { animation: cameoIn 2.4s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes cameoIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.cameo__wreath { position: absolute; inset: -10% -16% -12%; width: 132%; height: 122%; overflow: visible; pointer-events: none; }

.closing__bless {
  margin: 0;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: clamp(1.16rem, 5.2vw, 1.44rem);
  line-height: 1.95;
  color: var(--sage-800);
  white-space: pre-line;
}
.closing__bless-sub { margin: 6px 0 0; font-size: .88rem; color: var(--ink-soft); }
.closing__contact { margin-top: 18px; display: grid; gap: 4px; justify-items: center; }
.contact__label { font-size: .76rem; color: var(--ink-soft); }
.contact__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-size: .94rem;
  color: var(--sage-800);
  background: var(--ivory);
  border: var(--hair);
}
.closing__names {
  margin: 20px 0 0;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: clamp(1.34rem, 6vw, 1.72rem);
  line-height: 1.75;
  color: var(--slate-700);
}
.closing__date { margin: 4px 0 0; font-size: .86rem; color: var(--champ-700); }

/* ── التوقيع ── */
.credit { padding: 24px 20px 34px; text-align: center; }
.credit__link { font-size: .8rem; color: var(--ink-soft); text-decoration: none; }
.credit__link b { color: var(--sage-800); font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   الأقسام المحقونة من المنصّة (تأكيد الحضور / التقويم / الملاحظة)
   ════════════════════════════════════════════════════════════ */
#site [id^="da3wa"], #site [class^="da3wa"] { box-sizing: border-box; }

/* ════════════════════════════════════════════════════════════
   شاشات صغيرة
   ════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .sec { padding-inline: 15px; }
  .count__row { gap: 7px; }
  .count__cell { padding: 16px 2px 9px; border-radius: 40px 40px 5px 5px; }
  .count__cell::before { border-radius: 36px 36px 4px 4px; }
  .sched__wrap { padding-inline-start: 42px; }
  .arch__body { padding-inline: 23%; }
  .cal__grid { padding-inline: 8px; }
}

/* ════════════════════════════════════════════════════════════
   تقليل الحركة
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .creveal, .rv { opacity: 1 !important; transform: none !important; animation: none !important; }
  .breathe, .gate__hint-ar, .hero__scroll, .hero__rays, .hero__rays i, .ftn__jets path { animation: none !important; }
  .cal__day--event::before, #site #da3wa-note .hn-bell, #site .hn-demo .hn-bell { animation: none !important; }
  .closing.is-visible .cameo__img { animation: none !important; }
  .loc.is-visible .loc__img { animation: none !important; }
  .hero__art { transition: none !important; }
  #petals { display: none; }
}