/* مناسبة — أنماط القوالب الستة للصفحة العامة والمعاينة. يُحمَّل فوق app.css (الأساس والألوان
   العامة والأزرار) في resources/views/public/layout.blade.php فقط. كل قالب صنف .tpl-{slug}
   يغيّر التكوين والمسافات والزخارف فعليًا، وليس الألوان فقط. الألوان هنا يدوية ويجب أن تطابق
   config/templates.php عند أي تعديل مستقبلي. */

.tpl-page { min-height: calc(100vh - 260px); padding-block: clamp(2rem, 6vw, 4rem) 3rem; }
.tpl-frame { position: relative; display: grid; gap: 2rem; align-items: center; }
.tpl-photo-wrap { justify-self: center; }
.tpl-photo { width: 220px; height: 220px; object-fit: cover; display: block; }
.tpl-photo-placeholder { display: grid; place-items: center; color: #fff; font-family: "Alexandria", sans-serif; font-weight: 700; }
.tpl-photo-placeholder span { font-size: 4.5rem; line-height: 1; }
.tpl-content { text-align: center; }
.tpl-eyebrow { font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.4rem; }
.tpl-name { margin-bottom: 0.6rem; }
.tpl-dedication { max-width: 56ch; margin-inline: auto; font-size: 1.05rem; }
.tpl-meta { margin: 0.3rem 0; }
.tpl-program { max-width: 56ch; margin: 1rem auto; padding: 1rem 1.25rem; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.03); text-align: right; white-space: pre-line; }
.tpl-soon-note { margin: 1.25rem auto; max-width: 48ch; font-size: 0.85rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 0.75rem; }
.tpl-amp { font-weight: 400; opacity: 0.7; padding-inline: 0.2rem; }
.share-row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.5rem; }

.tpl-countdown-grid { display: flex; gap: 1.25rem; justify-content: center; margin: 0.5rem 0 1rem; }
.tpl-countdown-grid div { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.tpl-countdown-grid span { font-family: "Alexandria", sans-serif; font-weight: 700; font-size: 1.6rem; }
.tpl-countdown-grid small { color: var(--muted); }
.tpl-countdown-done { font-weight: 600; padding: 0.6rem 1rem; border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.04); display: inline-block; }

/* ===== المتوفون ===== */

/* سكينة (المرحلة 8.2): أُعيد بناؤها كتجربة مستقلة بالكامل — public/assets/sakina.css (قواعدها معزولة كلها
   تحت صنف قالبها) وpublic/memorial-sakina.blade.php. لم يبقَ هنا أي تنسيق لها؛ القواعد .tpl-mem-* أدناه مشتركة لنور وأثر فقط. */

/* -------- رسالة الأسرة ونبذة عنه (مرحلة 7.6: مشتركة للقوالب الثلاثة، ألوان --tpl-mem-* فقط) -------- */
.tpl-mem-about { display: grid; gap: 2rem; padding-block: 3rem 3.5rem; }
.tpl-mem-col h2 { font-family: "Amiri Quran", serif; font-weight: 400; color: var(--tpl-mem-ink); text-align: center; font-size: 1.4rem; }
.tpl-mem-col p { color: var(--tpl-mem-text); line-height: 1.85; text-align: center; }
@media (min-width: 720px) {
  .tpl-mem-about { grid-template-columns: 1fr 1fr; }
  .tpl-mem-col h2, .tpl-mem-col p { text-align: start; }
  .tpl-mem-col { border-inline-start: 1px solid var(--tpl-mem-line); padding-inline-start: 2.5rem; }
  .tpl-mem-col:first-child { border-inline-start: 0; padding-inline-start: 0; }
}

/* -------- أدعية اختارتها الأسرة: عمودان على الديسكتوب وعمود على الموبايل، مع نسخ ومشاركة لكل دعاء -------- */
.tpl-mem-duas { background: var(--tpl-mem-panel-bg); color: var(--tpl-mem-panel-text); padding-block: 4rem; position: relative; overflow: hidden; }
.tpl-mem-duas::before,
.tpl-mem-duas::after { content: ""; position: absolute; z-index: -1; top: -140px; left: -160px; width: 480px; height: 480px; border: 0.5px solid var(--tpl-mem-accent); opacity: 0.06; }
.tpl-mem-duas::after { transform: rotate(45deg); }
.tpl-mem-duas .container { position: relative; max-width: 1080px; }
.tpl-mem-eyebrow { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; color: var(--tpl-mem-eyebrow); margin-bottom: 0.6rem; }
.tpl-mem-duas h2 { color: var(--tpl-mem-panel-text); font-family: "Amiri Quran", serif; font-weight: 400; }
.tpl-mem-duas-note { color: var(--tpl-mem-panel-muted); max-width: 52ch; margin-bottom: 0.5rem; }
.tpl-mem-dua-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.tpl-mem-dua-card { padding: 1.75rem; border: 1px solid var(--tpl-mem-panel-line); border-inline-start: 3px solid var(--tpl-mem-accent); display: flex; flex-direction: column; gap: 1.1rem; }
.tpl-mem-dua { font-family: "Amiri Quran", serif; font-size: 1.3rem; line-height: 1.75; color: var(--tpl-mem-panel-text); margin: 0; }
.tpl-mem-dua-actions { display: flex; gap: 0.6rem; }
.tpl-mem-dua-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 2.2rem; padding: 0 1rem;
  border: 1px solid var(--tpl-mem-accent); border-radius: 4px; background: transparent; color: var(--tpl-mem-panel-text);
  font-family: inherit; font-size: 0.78rem; cursor: pointer;
}
.tpl-mem-dua-btn:hover { background: rgba(255, 255, 255, 0.1); }
@media (min-width: 720px) {
  .tpl-mem-dua-grid { grid-template-columns: 1fr 1fr; }
}

/* -------- الورد القرآني المقترح (نور وأثر) -------- */
.tpl-mem-surah-note { display: flex; align-items: center; gap: 1.1rem; background: var(--tpl-mem-surface); border-inline-start: 4px solid var(--tpl-mem-accent-2); border-radius: 0; padding: 1.1rem 1.4rem; margin-bottom: 2.75rem; }
.tpl-mem-surah-note strong { display: block; color: var(--tpl-mem-accent-2); font-size: 0.78rem; letter-spacing: 0.02em; }
.tpl-mem-surah-note p { margin: 0.3rem 0 0; color: var(--tpl-mem-text); }

/* -------- اذكروه بخير -------- */
.tpl-mem-remember { background: var(--tpl-mem-surface); padding-block: 4rem; text-align: center; position: relative; overflow: hidden; }
.tpl-mem-remember::before,
.tpl-mem-remember::after { content: ""; position: absolute; z-index: -1; bottom: -130px; right: -140px; width: 420px; height: 420px; border: 0.5px solid var(--tpl-mem-accent-2); opacity: 0.1; }
.tpl-mem-remember::after { transform: rotate(45deg); }
.tpl-mem-remember .container { position: relative; max-width: 640px; }
.tpl-mem-remember h2 { color: var(--tpl-mem-ink); font-family: "Amiri Quran", serif; font-weight: 400; }
.tpl-mem-remember-grid { display: grid; gap: 1.75rem; margin-top: 2.5rem; }
.tpl-mem-remember-grid svg { margin: 0 auto 1rem; display: block; }
.tpl-mem-remember-grid div:nth-child(1) svg { color: var(--tpl-mem-accent-2); }
.tpl-mem-remember-grid div:nth-child(2) svg { color: var(--tpl-mem-ink); }
.tpl-mem-remember-grid p { color: var(--tpl-mem-text); margin: 0; line-height: 1.7; }
@media (min-width: 640px) {
  .tpl-mem-remember-grid { grid-template-columns: 1fr 1fr; }
  .tpl-mem-remember-grid div:first-child { border-inline-end: 1px solid var(--tpl-mem-line); }
}

/* نور: رملي وأبيض، تكوين واسع مستوحى من الورق مع الصورة على أحد الجانبين. */
.tpl-noor { --tpl-primary: #B08D46; --tpl-secondary: #FBF6EA; --tpl-accent: #7C8B64; background: var(--tpl-secondary); }

/* ==========================================================================
   نور (Noor) — تصحيح بصري 7.1-R فوق إعادة تصميم 7.1: نفس الهوية (عاجي/ذهبي
   معتّق/أخضر هادئ) وعزل .template-noor لكن بتكوين ورقي أقوى وهوية "ضوء"
   أوضح — شعاع نور خفيف خلف الصورة (conic-gradient بدل حلقة مسطحة)، شريط
   زخرفي علوي بتدرّج ذهبي/أخضر (بدل دائرتي الزوايا القديمتين اللتين كانتا
   أقرب بصريًا لزخرفة سكينة)، عرض سطح مكتب أوسع وتسلسل بصري أوضح (صورة أكبر،
   عمود محتوى أعرض)، بديل صورة بأشعة ضوء حول الحرف الأول بدل تدرّج مصمت، وحل
   فعلي للمساحة الفارغة الكبيرة على الموبايل (`.tpl-page` المشترك يفرض
   `min-height: calc(100vh - 260px)` بصرف النظر عن طول المحتوى — أُلغي هذا
   الفرض هنا فقط تحت .template-noor، فلا يتأثر أي قالب آخر). لا تغيير في
   البيانات/الحقول/partials — تلوين وطباعة ومسافات وزخارف CSS فقط، كما في
   7.1 الأصلية. */
.template-noor {
  --no-ivory: #FBF6EA; --no-ivory-deep: #F3EAD3; --no-panel: #FFFEFA;
  --no-gold: #B08D46; --no-gold-deep: #8C6B2E; --no-gold-light: #E4CE9C;
  --no-green: #6F8058; --no-green-deep: #566345; --no-green-soft: #E9EEE0;
  --no-text: #3B3324; --no-muted: #8A7C5E; --no-line: #E7D9B4; --no-line-soft: rgba(176, 141, 70, 0.16);
  background:
    radial-gradient(1100px 480px at 50% -12%, rgba(176, 141, 70, 0.12), transparent 62%),
    radial-gradient(760px 520px at 100% 100%, rgba(111, 128, 88, 0.09), transparent 60%),
    repeating-linear-gradient(135deg, rgba(176, 141, 70, 0.05) 0 1px, transparent 1px 26px),
    var(--no-ivory);
  color: var(--no-text);
  /* --tpl-mem-* (مرحلة 7.6): نفس توكِنات المحتوى المشتركة أعلاه لسكينة، بألوان نور. */
  --tpl-mem-ink: var(--no-gold-deep); --tpl-mem-text: var(--no-text); --tpl-mem-line: var(--no-line);
  --tpl-mem-accent: var(--no-gold); --tpl-mem-accent-2: var(--no-green); --tpl-mem-eyebrow: var(--no-gold);
  --tpl-mem-surface: var(--no-green-soft);
  --tpl-mem-panel-bg: var(--no-text); --tpl-mem-panel-text: var(--no-ivory);
  --tpl-mem-panel-muted: rgba(251, 246, 234, 0.68); --tpl-mem-panel-line: var(--no-line-soft);
}
.template-noor .notice { background: var(--no-panel); border-color: var(--no-gold); color: var(--no-gold-deep); margin-top: 1.5rem; }
/* .tpl-page الأساسي يفرض min-height لمعاينة صفحة كاملة دائمًا، فيترك فراغًا
   ضخمًا على الموبايل حين يكون المحتوى الفعلي أقصر (لا حالة demo فقط — أي
   صفحة نور حقيقية بلا محتوى إضافي كانت تعاني منه أيضًا). نور بطاقات مرصوصة
   طبيعية الطول فلا حاجة له. */
.template-noor.tpl-page { min-height: 0; padding-block: clamp(2rem, 6vw, 3.5rem) 3rem; }

/* -------- البطل: بطاقة ورقية بشريط ضوء علوي وصورة مشعّة -------- */
.template-noor .container.tpl-frame {
  max-width: 1080px; margin-inline: auto; grid-template-columns: 1fr; gap: 1.75rem;
  background: var(--no-panel); border: 1px solid var(--no-line); border-radius: 1.5rem;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.75rem);
  box-shadow: 0 24px 60px -30px rgba(140, 107, 46, 0.32);
  position: relative; text-align: center; overflow: hidden;
}
.template-noor .container.tpl-frame::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--no-green) 0%, var(--no-gold) 50%, var(--no-green) 100%);
  opacity: 0.85; z-index: 1;
}
.template-noor .container.tpl-frame::after {
  content: ""; position: absolute; top: 0; inset-inline-start: 50%; transform: translateX(-50%) rotate(45deg);
  width: 11px; height: 11px; background: var(--no-gold); border: 2px solid var(--no-panel); z-index: 2;
}
.template-noor .tpl-photo-wrap {
  justify-self: center; position: relative; width: 200px; height: 200px; margin-inline: auto;
  display: grid; place-items: center;
}
.template-noor .tpl-photo-wrap::before {
  content: ""; position: absolute; inset: -26px; z-index: 0; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--no-gold-light) 0deg 3deg, transparent 3deg 15deg);
  opacity: 0.55; -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 78%); mask-image: radial-gradient(circle, #000 62%, transparent 78%);
}
.template-noor .tpl-photo-wrap::after {
  content: ""; position: absolute; inset: -8px; z-index: 1; border-radius: 50%;
  border: 2px solid var(--no-gold); box-shadow: 0 0 0 5px var(--no-panel), 0 0 0 6px var(--no-green-soft), 0 14px 32px -16px rgba(59, 51, 36, 0.5);
  pointer-events: none;
}
.template-noor .tpl-photo,
.template-noor .tpl-photo-placeholder { position: relative; z-index: 1; width: 200px; height: 200px; border-radius: 50%; }
.template-noor .tpl-photo-placeholder {
  display: flex; align-items: center; justify-content: center; background: var(--no-ivory-deep);
  background-image: repeating-conic-gradient(from 0deg, var(--no-gold-light) 0deg 2deg, var(--no-ivory-deep) 2deg 12deg);
}
.template-noor .tpl-photo-placeholder span {
  font-family: "Amiri Quran", serif; color: var(--no-gold-deep); background: var(--no-panel);
  width: 68%; height: 68%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px -6px rgba(59, 51, 36, 0.35);
}
/* حرف الاسم داخل placeholder: خط Amiri Quran العربي يترك مسافة بيضاء سفلية
   أكبر من العلوية ضمن صندوق سطره حتى مع align-items:center، فيبدو الحرف
   ملتصقًا بأسفل الدائرة بصريًا — تصحيح بصري بسيط بإزاحته لأعلى قليلًا. */
.template-noor .tpl-photo-placeholder span { transform: translateY(-30%); }
.template-noor .tpl-content { text-align: center; }
.template-noor .tpl-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; color: var(--no-green-deep);
  background: var(--no-green-soft); border: 1px solid rgba(111, 128, 88, 0.3); border-radius: 999px;
  padding: 0.4rem 1.1rem; font-size: 0.78rem; margin-top: 1.25rem;
}
.template-noor .tpl-eyebrow::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--no-green); flex: none; }
.template-noor .tpl-name {
  font-family: "Amiri Quran", serif; font-weight: 400; color: var(--no-gold-deep); font-size: clamp(1.9rem, 4vw, 3rem);
  margin: 1.1rem 0 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
}
.template-noor .tpl-name::after {
  content: ""; display: block; width: 84px; height: 1px;
  background:
    linear-gradient(90deg, transparent, var(--no-green) 38%, transparent 46%),
    linear-gradient(90deg, transparent 54%, var(--no-gold) 62%, transparent);
}
.template-noor .tpl-dedication { font-family: "Amiri Quran", serif; font-style: italic; font-size: 1.15rem; line-height: 1.75; color: var(--no-text); max-width: 52ch; margin: 1.1rem auto 0; }
.template-noor .tpl-meta { color: var(--no-muted); }
.template-noor .share-row { justify-content: center; margin-top: 1.5rem; }
.template-noor .share-row .btn { border-radius: 999px; border-color: var(--no-gold-light); color: var(--no-gold-deep); background: var(--no-ivory-deep); }
.template-noor .share-row .btn:hover { background: var(--no-green-soft); border-color: var(--no-green); color: var(--no-green-deep); }

@media (min-width: 720px) {
  .template-noor .container.tpl-frame { grid-template-columns: 240px 1fr; text-align: start; align-items: center; gap: 3rem; padding-inline-start: clamp(2rem, 4vw, 3.75rem); }
  .template-noor .tpl-photo-wrap { justify-self: start; }
  .template-noor .tpl-content { text-align: start; }
  .template-noor .tpl-eyebrow { margin-top: 0; }
  .template-noor .tpl-name { align-items: flex-start; }
  .template-noor .tpl-dedication { margin-inline: 0; }
  .template-noor .share-row { justify-content: flex-start; }
}

/* -------- القرآن الكريم (نفس partials/quran.blade.php المشتركة بلا تعديل على بنيتها) -------- */
.template-noor .quran {
  max-width: 1080px; margin: 2rem auto 0; background: var(--no-panel); border: 1px solid var(--no-line);
  border-radius: 1.25rem; box-shadow: 0 18px 44px -28px rgba(140, 107, 46, 0.28); padding: 0 clamp(1.5rem, 4vw, 3rem) 2.25rem;
  position: relative; overflow: hidden;
}
.template-noor .quran::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--no-green); opacity: 0.7; }
.template-noor .quran h2 { font-family: "Amiri Quran", serif; font-weight: 400; color: var(--no-gold-deep); text-align: center; padding-top: 1.75rem; }
.template-noor .quran > .muted.small { text-align: center; font-size: 0.76rem; color: var(--no-muted); opacity: 0.85; max-width: 60ch; margin-inline: auto; }
.template-noor .quran h3 { font-family: "Amiri Quran", serif; font-weight: 400; color: var(--no-green-deep); text-align: center; }
.template-noor .quran-picker select { border-radius: 999px; border: 1px solid var(--no-line); background: var(--no-ivory-deep); color: var(--no-text); font-family: "Amiri Quran", serif; font-size: 1.02rem; }
.template-noor .quran-picker select:focus { border-color: var(--no-gold); box-shadow: 0 0 0 3px rgba(176, 141, 70, 0.18); }
.template-noor .quran-audio { width: 100%; accent-color: var(--no-gold); border-radius: 10px; }
.template-noor .quran-text { font-family: "Amiri Quran", serif; font-size: 1.3rem; line-height: 2; color: var(--no-text); text-align: center; }
.template-noor .quran-ayah-number { color: var(--no-gold-deep); font-family: "Amiri Quran", serif; font-size: 0.9rem; }

/* -------- سجل التعازي ومشاركة الصفحة (نفس partials/guestbook.blade.php وshare-buttons.blade.php) -------- */
.template-noor .guestbook {
  max-width: 1080px; margin: 1.75rem auto 0; background: var(--no-panel); border: 1px solid var(--no-line);
  border-radius: 1.25rem; box-shadow: 0 18px 44px -28px rgba(140, 107, 46, 0.28); padding: 0 clamp(1.5rem, 4vw, 3rem) 2.25rem;
  position: relative; overflow: hidden;
}
.template-noor .guestbook::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--no-gold); opacity: 0.8; }
.template-noor .guestbook h2 { font-family: "Amiri Quran", serif; font-weight: 400; color: var(--no-gold-deep); text-align: center; padding-top: 1.75rem; }
.template-noor .field input:not([type="checkbox"]) { border-radius: 999px; border: 1px solid var(--no-line); background: var(--no-ivory-deep); padding-inline: 1rem; }
.template-noor .field textarea { border-radius: 1rem; border: 1px solid var(--no-line); background: var(--no-ivory-deep); }
.template-noor .field input:focus, .template-noor .field textarea:focus { border-color: var(--no-gold); box-shadow: 0 0 0 3px rgba(176, 141, 70, 0.18); }
.template-noor .guestbook .btn.small:not(.outline) { background: var(--no-green); border-color: var(--no-green); border-radius: 999px; color: #fff; }
.template-noor .guestbook .btn.small:not(.outline):hover { background: var(--no-green-deep); border-color: var(--no-green-deep); }
.template-noor .guest-entry { background: var(--no-ivory-deep); border: 1px solid var(--no-line); border-radius: 1rem; padding: 1.1rem 1.35rem; margin-block: 0.85rem; }
.template-noor .guest-entry:first-of-type { margin-top: 1.25rem; }
.template-noor .guest-entry strong { color: var(--no-gold-deep); }

/* أثر: كحلي عميق وأزرق ضبابي ولمسات فضية، هوية أرشيفية راقية — تكوين تحريري غير متماثل
   بصورة مستطيلة بطبقات، بلا دوائر أو أشعة. */
.tpl-athar { --tpl-primary: #101d38; --tpl-secondary: #e9edf5; --tpl-accent: #aab9d4; background: var(--tpl-secondary); }

/* ==========================================================================
   أثر (Athar) — المرحلة 7.2: رابع القوالب الشخصية يكتمل بهوية «ذِكرى» الكاملة.
   التصميم القديم (شريط كحلي كامل الارتفاع متماثل تقريبًا، صورة مربعة بإطار
   بسيط) استُبدل بهوية "أرشيف" مختلفة تكوينًا عن الثلاثة الأخرى: لا تماثل
   لوحة سكينة الكاملة الارتفاع، ولا بطاقة نور الورقية المركزية بصورة دائرية،
   ولا دوائر/أشعة ضوء من أي منهما. بدلًا من ذلك: صفحة فاتحة بنسيج شبكي هادئ
   (كأرشيف/سجل)، وصورة مستطيلة "مطبوعة" على لوحين متراكبين (لوح فضي/ضبابي
   خلفي مُزاح، وصورة بإطار كحلي أمامي) بجانب عمود نص غير متماثل يبدأ من حافة
   الصفحة لا يتوسطها. كل قاعدة هنا معزولة تحت .template-athar (صنف إضافي
   يُضاف فقط حين slug=athar في public/memorial.blade.php)، فلا تصل لسكينة/نور
   الآخرين المشتركين في نفس ملف Blade. partials/quran وguestbook
   وshare-buttons **لم تُلمَس** — نفس الـHTML المشتركة تمامًا، تلوين وطباعة
   ومسافات CSS فقط، بلا أي حقل أو قسم أو منطق جديد. */
.template-athar {
  --at-navy: #101d38; --at-navy-deep: #0a1424;
  --at-mist: #aab9d4; --at-mist-deep: #7e91b7; --at-mist-soft: #dde3ef;
  --at-silver: #c7cedb; --at-silver-line: #ccd3e0;
  --at-paper: #eef1f7; --at-panel: #ffffff;
  --at-text: #17223d; --at-muted: #5b6b85;
  background:
    repeating-linear-gradient(0deg, rgba(122, 141, 179, 0.07) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(122, 141, 179, 0.07) 0 1px, transparent 1px 34px),
    var(--at-paper);
  color: var(--at-text);
  /* --tpl-mem-* (مرحلة 7.6): نفس توكِنات المحتوى المشتركة أعلاه لسكينة/نور، بألوان أثر. */
  --tpl-mem-ink: var(--at-navy); --tpl-mem-text: var(--at-text); --tpl-mem-line: var(--at-silver-line);
  --tpl-mem-accent: var(--at-mist-deep); --tpl-mem-accent-2: var(--at-navy); --tpl-mem-eyebrow: var(--at-mist-deep);
  --tpl-mem-surface: var(--at-mist-soft);
  --tpl-mem-panel-bg: var(--at-navy-deep); --tpl-mem-panel-text: var(--at-silver);
  --tpl-mem-panel-muted: rgba(199, 206, 219, 0.68); --tpl-mem-panel-line: rgba(255, 255, 255, 0.12);
}
.template-athar .notice { background: var(--at-panel); border-color: var(--at-mist); color: var(--at-navy); margin-top: 1.5rem; }

/* -------- البطل: عمود نص يبدأ من حافة الصفحة + صورة مستطيلة على لوحين متراكبين -------- */
.template-athar .container.tpl-frame {
  max-width: 1080px; margin-inline: auto; grid-template-columns: 1fr; gap: 3rem;
  padding-block: clamp(2.5rem, 6vw, 4rem) 1rem; text-align: start;
}
.template-athar .tpl-photo-wrap {
  justify-self: start; position: relative; width: min(280px, 70vw); margin-inline-start: 0.5rem;
}
.template-athar .tpl-photo-wrap::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: 0;
  background: var(--at-mist-soft); border: 1px solid var(--at-silver-line);
}
.template-athar .tpl-photo,
.template-athar .tpl-photo-placeholder {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; height: auto;
  border: 6px solid var(--at-panel); outline: 1px solid var(--at-navy); box-shadow: 0 22px 48px -26px rgba(16, 29, 56, 0.45);
  object-fit: cover; display: block;
}
.template-athar .tpl-photo-placeholder { display: flex; align-items: center; justify-content: center; background: var(--at-navy); }
.template-athar .tpl-photo-placeholder span { font-family: "Alexandria", sans-serif; font-weight: 700; color: var(--at-mist); font-size: clamp(3.5rem, 12vw, 5.5rem); }
.template-athar .tpl-content { text-align: start; padding-inline-start: 0.5rem; }
.template-athar .tpl-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem; color: var(--at-navy);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; margin-top: 1.75rem;
}
.template-athar .tpl-eyebrow::before { content: ""; width: 0.55rem; height: 0.55rem; flex: none; background: var(--at-mist-deep); }
.template-athar .tpl-name {
  font-family: "Amiri Quran", serif; font-weight: 400; color: var(--at-navy); font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.25; margin: 1rem 0 0;
}
.template-athar .tpl-name::after { content: ""; display: block; width: 72px; height: 3px; margin-top: 1.35rem; background: linear-gradient(90deg, var(--at-navy) 0 40%, var(--at-silver) 40% 100%); }
.template-athar .tpl-dedication { font-style: italic; font-size: 1.1rem; line-height: 1.75; color: var(--at-text); max-width: 52ch; margin: 1.25rem 0 0; }
.template-athar .tpl-meta { color: var(--at-muted); border-top: 1px solid var(--at-silver-line); padding-top: 0.6rem; margin: 0.9rem 0 0; max-width: 52ch; }
.template-athar .tpl-soon-note { border-color: var(--at-silver-line); }
.template-athar .share-row { justify-content: flex-start; margin-top: 1.75rem; }
.template-athar .share-row .btn { border-radius: 2px; border-color: var(--at-mist-deep); color: var(--at-navy); background: var(--at-panel); }
.template-athar .share-row .btn:hover { background: var(--at-mist-soft); border-color: var(--at-navy); }

@media (min-width: 780px) {
  .template-athar .container.tpl-frame { grid-template-columns: 300px 1fr; align-items: start; gap: 4rem; }
  .template-athar .tpl-photo-wrap { margin-top: 2.5rem; }
  .template-athar .tpl-content { border-inline-start: 1px solid var(--at-silver-line); padding-inline-start: 3rem; }
}

/* -------- القرآن الكريم وسجل التعازي ومشاركة الصفحة (partials مشتركة بلا أي تعديل بنيوي) -------- */
.template-athar .quran,
.template-athar .guestbook {
  max-width: 1080px; margin: 2rem auto 0; background: var(--at-panel); border: 1px solid var(--at-silver-line);
  border-radius: 0; box-shadow: 0 18px 44px -30px rgba(16, 29, 56, 0.3); padding: 0 clamp(1.5rem, 4vw, 3rem) 2.25rem;
  position: relative; overflow: hidden;
}
.template-athar .quran::before,
.template-athar .guestbook::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--at-navy), var(--at-mist)); }
.template-athar .quran h2,
.template-athar .guestbook h2 { font-family: "Amiri Quran", serif; font-weight: 400; color: var(--at-navy); text-align: start; padding-top: 1.75rem; }
.template-athar .quran h3 { font-family: "Amiri Quran", serif; font-weight: 400; color: var(--at-navy); text-align: start; }
.template-athar .quran-picker select { border-radius: 2px; border: 1px solid var(--at-silver-line); background: var(--at-paper); color: var(--at-text); }
.template-athar .quran-picker select:focus { border-color: var(--at-navy); box-shadow: 0 0 0 3px rgba(16, 29, 56, 0.12); }
.template-athar .quran-audio { width: 100%; accent-color: var(--at-navy); border-radius: 10px; }
.template-athar .quran-text { font-family: "Amiri Quran", serif; font-size: 1.3rem; line-height: 2; color: var(--at-text); }
.template-athar .quran-ayah-number { color: var(--at-mist-deep); font-family: "Amiri Quran", serif; font-size: 0.9rem; }
.template-athar .field input:not([type="checkbox"]) { border-radius: 2px; border: 1px solid var(--at-silver-line); background: var(--at-paper); }
.template-athar .field textarea { border-radius: 2px; border: 1px solid var(--at-silver-line); background: var(--at-paper); }
.template-athar .field input:focus, .template-athar .field textarea:focus { border-color: var(--at-navy); box-shadow: 0 0 0 3px rgba(16, 29, 56, 0.12); }
.template-athar .guestbook .btn.small:not(.outline) { background: var(--at-navy); border-color: var(--at-navy); border-radius: 2px; color: #fff; }
.template-athar .guestbook .btn.small:not(.outline):hover { background: var(--at-navy-deep); border-color: var(--at-navy-deep); }
.template-athar .guest-entry { background: var(--at-paper); border: 1px solid var(--at-silver-line); border-radius: 2px; padding: 1.1rem 1.35rem; margin-block: 0.85rem; }
.template-athar .guest-entry:first-of-type { margin-top: 1.25rem; }
.template-athar .guest-entry strong { color: var(--at-navy); }

@media (max-width: 640px) {
  .template-athar .container.tpl-frame { padding-inline: 1.25rem; }
}

/* ===== المناسبات ===== */

/* ورد: عنابي ووردي، تكوين دائري بزخرفة نباتية حول الصورة. */
.tpl-ward { --tpl-primary: #7a1f3d; --tpl-secondary: #f7d9e3; --tpl-accent: #c46a86; background: var(--tpl-secondary); }

/* ==========================================================================
   ورد (Ward) — إعادة تصميم المرحلة 5.3، القالب الشخصي الأول من الستة يكتمل
   بهوية «ذِكرى» الكاملة. كل قاعدة هنا معزولة تحت .template-ward (صنف إضافي
   يُضاف فقط حين slug=ward في public/event.blade.php)، فلا تصل أي قاعدة منها
   لقوالب ليلك/لؤلؤ الأخرى المشتركة في نفس ملف Blade، ولا لسكينة/نور/أثر
   (قالب مختلف تمامًا: public/memorial.blade.php). مرجع بصري فقط من
   stitch_zekralink_arabic_design_system/event_ward_{desktop,mobile,no_photo}
   (لقطات Stitch) — لا Tailwind ولا خطوط/صور خارجية منسوخة؛ الخطوط محلية
   (Alexandria وAmiri Quran) كما في بقية الموقع، والزخارف كلها CSS بحت. */
.template-ward {
  background:
    radial-gradient(640px 420px at 100% 0%, rgba(196, 106, 134, 0.16), transparent 62%),
    radial-gradient(720px 520px at 0% 100%, rgba(247, 217, 227, 0.55), transparent 62%),
    #fbf4f1;
  color: #5c1730;
}
.template-ward .notice { background: #fff; border-color: var(--tpl-secondary); color: var(--tpl-primary); }

/* -------- البطل: صورة وعنوان جنبًا إلى جنب على الشاشات الواسعة -------- */
.template-ward .tpl-frame {
  max-width: 1080px;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  grid-template-areas: "photo" "content";
  align-items: center;
  text-align: center;
}
.template-ward .tpl-content { grid-area: content; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.template-ward .tpl-photo-wrap { grid-area: photo; width: 100%; max-width: 380px; margin-inline: auto; height: auto; display: block; position: relative; }
.template-ward .tpl-photo-wrap::before,
.template-ward .tpl-photo-wrap::after { content: ""; position: absolute; inset: -14px; border-radius: 2rem; pointer-events: none; }
.template-ward .tpl-photo-wrap::before { border: 1px solid var(--tpl-accent); opacity: 0.55; transform: rotate(-1.5deg); }
.template-ward .tpl-photo-wrap::after { inset: -7px; border: 1px solid var(--tpl-secondary); transform: rotate(1.5deg); }
.template-ward .tpl-photo,
.template-ward .tpl-photo-placeholder {
  position: relative; width: 100%; height: 22rem; border-radius: 1.5rem;
  border: 6px solid #fff; box-shadow: 0 20px 45px -18px rgba(92, 23, 48, 0.55);
}
.template-ward .tpl-photo-placeholder { background: linear-gradient(160deg, var(--tpl-accent), var(--tpl-primary)); }
.template-ward .tpl-photo-placeholder span { font-family: "Amiri Quran", serif; font-size: 4.5rem; color: var(--tpl-secondary); }

.template-ward .tpl-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem; background: #fff; color: var(--tpl-primary);
  border: 1px solid var(--tpl-secondary); border-radius: 999px; padding: 0.45rem 1.1rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; box-shadow: var(--shadow-1);
}
.template-ward .tpl-eyebrow::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tpl-accent); flex: none; }
.template-ward .tpl-name { font-family: "Amiri Quran", serif; font-weight: 400; color: var(--tpl-primary); font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.2; }
.template-ward .tpl-amp { font-family: "Alexandria", sans-serif; font-weight: 300; color: var(--tpl-accent); }
.template-ward .tpl-dedication { max-width: 46ch; font-family: "Amiri Quran", serif; font-style: italic; font-size: 1.2rem; color: var(--tpl-primary); }

/* -------- بطاقات المعلومات: الموعد، المكان، العد التنازلي -------- */
.template-ward .tpl-meta {
  background: #fff; border: 1px solid var(--tpl-secondary); border-radius: 1rem;
  padding: 0.75rem 1.25rem; font-size: 0.88rem; box-shadow: var(--shadow-1);
}
.template-ward .tpl-meta strong { color: var(--tpl-primary); }

.template-ward .tpl-countdown {
  width: 100%; background: linear-gradient(120deg, #f6ede3, #fff 55%, #f6ede3);
  border: 1px solid #e8d6c6; border-radius: 1.5rem; padding: 1.5rem; box-shadow: var(--shadow-1);
}
.template-ward .tpl-countdown-grid { gap: 1rem; }
.template-ward .tpl-countdown-grid div { background: #fff; border: 1px solid #eedfd3; border-radius: 1rem; padding: 0.75rem 0.5rem; min-width: 58px; }
.template-ward .tpl-countdown-grid span { color: var(--tpl-primary); }
.template-ward .tpl-countdown-done { background: var(--tpl-secondary); color: var(--tpl-primary); border: 1px solid var(--tpl-accent); font-family: "Amiri Quran", serif; font-size: 1.05rem; }

.template-ward .tpl-content .btn.outline { border-color: var(--tpl-primary); color: var(--tpl-primary); border-radius: 999px; }
.template-ward .tpl-content .btn.outline:hover { background: var(--tpl-secondary); }

/* -------- برنامج المناسبة: قائمة أوقات أنيقة بدل فقرة واحدة -------- */
.template-ward .tpl-program { width: 100%; max-width: 46ch; background: #fff; border: 1px solid var(--tpl-secondary); border-radius: 1.25rem; text-align: start; box-shadow: var(--shadow-1); }
.template-ward .tpl-program h2 { font-family: "Amiri Quran", serif; font-weight: 400; color: var(--tpl-primary); text-align: center; }
.template-ward .tpl-ward-program li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.55rem 0; border-top: 1px dashed var(--tpl-secondary); }
.template-ward .tpl-ward-program li:first-child { border-top: 0; }
.template-ward .tpl-ward-program-time { flex: none; font-weight: 700; color: var(--tpl-accent); font-variant-numeric: tabular-nums; }
.template-ward .tpl-ward-program-label { color: #5c1730; }

.template-ward .share-row { justify-content: center; }
.template-ward .share-row .btn { border-radius: 999px; }
.template-ward .share-row .btn:nth-child(1) { background: #25d366; border-color: #25d366; color: #fff; }
.template-ward .share-row .btn:nth-child(1):hover { background: #20bd5a; border-color: #20bd5a; }
.template-ward .share-row .btn:nth-child(2) { background: #1877f2; border-color: #1877f2; color: #fff; }
.template-ward .share-row .btn:nth-child(2):hover { background: #166fe5; border-color: #166fe5; }

/* -------- تأكيد الحضور وتهاني الأحبة: نفس الـpartials المشتركة، مظهر ورد فقط -------- */
.template-ward .panel { background: #fff; border: 1px solid var(--tpl-secondary); border-radius: 1.5rem; box-shadow: 0 16px 34px -20px rgba(92, 23, 48, 0.4); }
.template-ward .panel h2 { font-family: "Amiri Quran", serif; font-weight: 400; color: var(--tpl-primary); text-align: center; }
.template-ward .panel.rsvp { border-top: 4px solid var(--tpl-primary); }
.template-ward .panel.guestbook { border-top: 4px solid var(--tpl-accent); }
.template-ward .field input, .template-ward .field select, .template-ward .field textarea { border-radius: 0.75rem; }
.template-ward .field input:focus, .template-ward .field select:focus, .template-ward .field textarea:focus { border-color: var(--tpl-primary); box-shadow: 0 0 0 3px rgba(122, 31, 61, 0.15); }
.template-ward .btn.small:not(.outline) { background: var(--tpl-primary); border-color: var(--tpl-primary); border-radius: 999px; }
.template-ward .btn.small:not(.outline):hover { background: var(--tpl-accent); border-color: var(--tpl-accent); }
.template-ward .guest-entry { background: #fdf6f4; border: 1px solid var(--tpl-secondary); border-radius: 1rem; padding: 1rem 1.25rem; margin-block: 0.85rem; }
.template-ward .guest-entry:first-of-type { margin-top: 0; }

@media (min-width: 860px) {
  .template-ward .tpl-frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "content photo"; text-align: start; }
  .template-ward .tpl-content { align-items: flex-start; text-align: start; }
  .template-ward .tpl-dedication { margin-inline: 0; }
  .template-ward .tpl-program { margin-inline: 0; }
}

/* ليلك: بنفسجي عميق وليلكي وشامبين، تكوين قطري تحريري بصورة كبيرة وزخارف نباتية خفيفة. */
.tpl-lilac { --tpl-primary: #3d2e6b; --tpl-secondary: #f1ecfb; --tpl-accent: #c9a668; background: var(--tpl-secondary); }

/* ==========================================================================
   ليلك (Lilac) — المرحلة 7.3: خامس القوالب الشخصية/المناسبات يكتمل بهوية
   «ذِكرى» الكاملة، وأول قالب مناسبات آخر غير ورد. هوية "حديقة مسائية" مبهجة
   مختلفة تكوينًا بوضوح عن ورد (لا زوايا معمارية دائرية للصورة، لا بطاقات
   بيضاء بسيطة، لا لوحة ألوان عنابي/وردي): تكوين قطري (clip-path) لا دائري —
   صورة كبيرة بحافة مائلة تتراكب معها لوحة نص شامبين فوق خلفية بنفسجية
   متدرجة، وزخارف نباتية خفيفة بالكامل CSS (عناقيد أوراق بيضاوية دقيقة عند
   زوايا الصورة والبطاقات، لا صور خارجية). كل قاعدة هنا معزولة تحت
   .template-lilac (صنف إضافي يُضاف فقط حين slug=lilac في
   public/event.blade.php)، فلا تصل لورد/لؤلؤ الآخرين المشتركين في نفس ملف
   Blade. partials/rsvp وguestbook وshare-buttons **لم تُلمَس** — نفس الـHTML
   المشتركة تمامًا، تلوين وطباعة ومسافات ومسافات وزخارف CSS فقط، ولا حقل أو
   قسم أو منطق جديد (برنامج المناسبة يبقى فقرة نصية واحدة كما في القوالب غير
   ورد — white-space:pre-line المشتركة أصلًا في .tpl-program تكفي لعرض
   أسطره، فقط تنسيق بطاقة جديد هنا). */
.template-lilac {
  --li-violet: #3d2e6b; --li-violet-deep: #241a44;
  --li-lilac: #b9a3e3; --li-lilac-soft: #f1ecfb; --li-lilac-line: #ddd0f5;
  --li-champagne: #c9a668; --li-champagne-light: #ecdfc0;
  --li-ink: #2f2350; --li-muted: #6c6288; --li-panel: #ffffff;
  background:
    radial-gradient(900px 460px at 100% -8%, rgba(201, 166, 104, 0.18), transparent 62%),
    radial-gradient(760px 560px at -8% 108%, rgba(185, 163, 227, 0.32), transparent 62%),
    var(--li-lilac-soft);
  color: var(--li-ink);
}
.template-lilac .notice { background: var(--li-panel); border-color: var(--li-lilac-line); color: var(--li-violet); margin-top: 1.5rem; }

/* -------- زخرفة نباتية خفيفة مشتركة: عنقود ورقتين بيضاويتين متقاطعتين -------- */
.template-lilac .tpl-photo-wrap::after,
.template-lilac .panel::before {
  content: ""; position: absolute; width: 46px; height: 46px; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse 9px 20px at 50% 50%, var(--li-champagne) 0 92%, transparent 94%) 6px 4px / 20px 40px no-repeat,
    radial-gradient(ellipse 9px 20px at 50% 50%, var(--li-lilac) 0 92%, transparent 94%) 20px 10px / 20px 40px no-repeat;
  opacity: 0.55; transform: rotate(-18deg);
}

/* -------- البطل: صورة كبيرة بحافة قطرية مقابل بطاقة نص شامبين متراكبة -------- */
.template-lilac .container.tpl-frame {
  max-width: 1100px; margin-inline: auto; grid-template-columns: 1fr; gap: 0;
  padding-block: clamp(1.5rem, 4vw, 2.5rem) 1rem; position: relative;
}
.template-lilac .tpl-photo-wrap {
  justify-self: stretch; position: relative; width: 100%; height: 20rem; margin: 0;
  background: linear-gradient(155deg, var(--li-lilac) 0%, var(--li-violet) 65%, var(--li-violet-deep) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
}
.template-lilac .tpl-photo-wrap::after { top: 14px; inset-inline-start: 14px; }
.template-lilac .tpl-photo,
.template-lilac .tpl-photo-placeholder { width: 100%; height: 100%; border-radius: 0; box-shadow: none; margin: 0; object-fit: cover; display: block; }
.template-lilac .tpl-photo-placeholder { display: flex; align-items: center; justify-content: center; background: transparent; }
.template-lilac .tpl-photo-placeholder span { font-family: "Amiri Quran", serif; font-size: clamp(3.5rem, 12vw, 5.5rem); color: rgba(255, 255, 255, 0.9); }
.template-lilac .tpl-content {
  position: relative; z-index: 1; text-align: center; background: var(--li-panel);
  margin: -2.75rem 1.25rem 0; padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem);
  border-radius: 1.5rem; box-shadow: 0 24px 54px -30px rgba(36, 26, 68, 0.4);
}
.template-lilac .tpl-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; color: var(--li-violet-deep);
  background: var(--li-lilac-soft); border: 1px solid var(--li-lilac-line); border-radius: 999px;
  padding: 0.4rem 1.1rem; font-size: 0.78rem; font-weight: 600;
}
.template-lilac .tpl-eyebrow::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--li-champagne); flex: none; }
.template-lilac .tpl-name { font-family: "Amiri Quran", serif; font-weight: 400; color: var(--li-violet); font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.25; margin: 1.1rem 0 0; }
.template-lilac .tpl-amp { color: var(--li-champagne); font-family: "Amiri Quran", serif; opacity: 1; }
.template-lilac .tpl-dedication { font-style: italic; font-size: 1.1rem; line-height: 1.7; color: var(--li-ink); max-width: 48ch; margin: 1.1rem auto 0; }
.template-lilac .tpl-meta {
  display: inline-flex; align-items: center; gap: 0.4rem; background: var(--li-lilac-soft); color: var(--li-violet-deep);
  border: 1px solid var(--li-lilac-line); border-radius: 999px; padding: 0.55rem 1.1rem; font-size: 0.86rem; margin: 0.5rem 0.3rem 0;
}
.template-lilac .tpl-meta strong { color: var(--li-violet); }
.template-lilac .tpl-content .btn.outline { border-color: var(--li-violet); color: var(--li-violet); border-radius: 999px; margin-top: 0.75rem; }
.template-lilac .tpl-content .btn.outline:hover { background: var(--li-lilac-soft); }

.template-lilac .tpl-countdown { width: 100%; margin-top: 1.25rem; background: var(--li-lilac-soft); border: 1px solid var(--li-lilac-line); border-radius: 1.25rem; padding: 1.25rem; }
.template-lilac .tpl-countdown-grid div { background: var(--li-panel); border: 1px solid var(--li-lilac-line); border-radius: 0.9rem; padding: 0.65rem 0.5rem; min-width: 58px; }
.template-lilac .tpl-countdown-grid span { color: var(--li-violet); }
.template-lilac .tpl-countdown-done { background: var(--li-champagne-light); color: var(--li-violet-deep); border: 1px solid var(--li-champagne); font-family: "Amiri Quran", serif; }

.template-lilac .tpl-program { width: 100%; max-width: 52ch; margin: 1.5rem auto 0; background: var(--li-lilac-soft); border: 1px solid var(--li-lilac-line); border-radius: 1.25rem; text-align: center; }
.template-lilac .tpl-program h2 { font-family: "Amiri Quran", serif; font-weight: 400; color: var(--li-violet); }
.template-lilac .tpl-program p { color: var(--li-ink); }

.template-lilac .share-row { justify-content: center; margin-top: 1.5rem; }
.template-lilac .share-row .btn { border-radius: 999px; border-color: var(--li-violet); color: var(--li-violet); background: var(--li-panel); }
.template-lilac .share-row .btn:hover { background: var(--li-violet); color: #fff; }

@media (min-width: 860px) {
  .template-lilac .container.tpl-frame { grid-template-columns: 1.15fr 1fr; align-items: start; gap: 0; }
  .template-lilac .tpl-photo-wrap { height: 32rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 34% 100%); grid-column: 1; grid-row: 1; }
  .template-lilac .tpl-content { grid-column: 2; grid-row: 1; margin-inline-start: -1.75rem; text-align: start; max-width: 30rem; }
  .template-lilac .tpl-dedication { margin-inline: 0; }
  .template-lilac .tpl-program { margin-inline: 0; text-align: start; }
  .template-lilac .tpl-program h2 { text-align: start; }
  .template-lilac .share-row { justify-content: flex-start; }
}

/* -------- تأكيد الحضور وتهاني الأحبة: نفس الـpartials المشتركة، مظهر ليلك فقط -------- */
.template-lilac .panel { position: relative; background: var(--li-panel); border: 1px solid var(--li-lilac-line); border-radius: 1.5rem; box-shadow: 0 18px 44px -28px rgba(36, 26, 68, 0.32); overflow: hidden; }
.template-lilac .panel::before { top: 18px; inset-inline-end: 18px; inset-inline-start: auto; }
.template-lilac .panel h2 { font-family: "Amiri Quran", serif; font-weight: 400; color: var(--li-violet); text-align: center; }
.template-lilac .panel.rsvp { border-top: 4px solid var(--li-violet); }
.template-lilac .panel.guestbook { border-top: 4px solid var(--li-champagne); }
.template-lilac .field input, .template-lilac .field select, .template-lilac .field textarea { border-radius: 0.85rem; border: 1px solid var(--li-lilac-line); background: var(--li-lilac-soft); }
.template-lilac .field input:focus, .template-lilac .field select:focus, .template-lilac .field textarea:focus { border-color: var(--li-violet); box-shadow: 0 0 0 3px rgba(61, 46, 107, 0.14); }
.template-lilac .btn.small:not(.outline) { background: var(--li-violet); border-color: var(--li-violet); border-radius: 999px; }
.template-lilac .btn.small:not(.outline):hover { background: var(--li-violet-deep); border-color: var(--li-violet-deep); }
.template-lilac .guest-entry { background: var(--li-lilac-soft); border: 1px solid var(--li-lilac-line); border-radius: 1rem; padding: 1rem 1.25rem; margin-block: 0.85rem; }
.template-lilac .guest-entry:first-of-type { margin-top: 0; }
.template-lilac .guest-entry strong { color: var(--li-violet); }

@media (max-width: 640px) {
  .template-lilac .tpl-content { margin-inline: 1rem; }
}

/* لؤلؤ: أبيض لؤلؤي وشامبين وفحمي، دعوة زفاف فاخرة معاصرة. */
.tpl-pearl { --tpl-primary: #EFE3C8; --tpl-secondary: #FBF8F2; --tpl-accent: #B7975C; background: var(--tpl-secondary); }

/* ==========================================================================
   لؤلؤ (Pearl) — المرحلة 7.7: آخر القوالب الستة يكتمل بهوية «ذِكرى». دعوة زفاف
   فاخرة معاصرة تختلف تكوينًا عن ورد (صورة بزوايا مدوّرة وبطاقات بيضاء ودبابيس
   pill ولوحة عنابي/وردي) وعن ليلك (قصّ قطري clip-path وبنفسجي وزخارف نباتية):
   هنا صورة مستطيلة كبيرة داخل إطار تحريري (ورقة "ماتّ" بيضاء بخط ذهبي رفيع
   وخط داخلي فوق الصورة) تتراكب معها لوحة دعوة شامبين بحواف حادة ولمعة لؤلؤية
   خفيفة (تدرّج ضوئي مائل)، وفواصل شعرية بدل الشرائح الدائرية. لا صورة دائرية
   ولا بطاقة بإطار مزدوج متماثل كما في التصميم القديم. كل قاعدة معزولة تحت
   .template-pearl (صنف إضافي يُضاف فقط حين slug=pearl في public/event.blade.php)،
   فلا تصل لورد/ليلك المشتركين في نفس ملف Blade. partials/rsvp وguestbook
   وshare-buttons لم تُلمَس — نفس الـHTML المشتركة، تلوين وطباعة ومسافات فقط. */
.template-pearl {
  --pl-pearl: #FBF8F2; --pl-white: #ffffff;
  --pl-champagne: #EFE3C8; --pl-champagne-deep: #DCC79C; --pl-champagne-soft: #F6EEDD;
  --pl-gold: #B7975C; --pl-gold-deep: #8F7440; --pl-line: #E6DABB;
  --pl-charcoal: #2E2B26; --pl-charcoal-soft: #5A554C;
  --pl-sheen: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.7) 46%, rgba(255, 255, 255, 0) 62%);
  background:
    radial-gradient(900px 420px at 88% -6%, rgba(220, 199, 156, 0.32), transparent 62%),
    radial-gradient(760px 480px at -6% 104%, rgba(239, 227, 200, 0.55), transparent 62%),
    var(--pl-pearl);
  color: var(--pl-charcoal);
}
.template-pearl .notice { background: var(--pl-white); border-color: var(--pl-champagne-deep); color: var(--pl-charcoal); border-radius: 2px; margin-top: 1.5rem; }

/* -------- البطل: صورة كبيرة في إطار تحريري + لوحة دعوة متراكبة -------- */
.template-pearl .container.tpl-frame {
  max-width: 1120px; margin-inline: auto; grid-template-columns: 1fr; gap: 0; align-items: start;
  padding-block: clamp(1.5rem, 4vw, 2.5rem) 1.5rem; text-align: center;
}
.template-pearl .tpl-photo-wrap {
  justify-self: stretch; width: 100%; max-width: 30rem; margin-inline: auto; position: relative;
  padding: 10px; background: var(--pl-white); border: 1px solid var(--pl-gold);
  box-shadow: 0 28px 60px -34px rgba(46, 43, 38, 0.5);
}
.template-pearl .tpl-photo-wrap::after {
  content: ""; position: absolute; inset: 24px; border: 1px solid rgba(255, 255, 255, 0.8); pointer-events: none;
}
.template-pearl .tpl-photo,
.template-pearl .tpl-photo-placeholder { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 0; object-fit: cover; display: block; }
.template-pearl .tpl-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--pl-sheen), linear-gradient(160deg, var(--pl-champagne-deep) 0%, var(--pl-champagne) 55%, var(--pl-champagne-soft) 100%);
}
.template-pearl .tpl-photo-placeholder span { font-family: "Amiri Quran", serif; font-size: clamp(4.5rem, 14vw, 7rem); color: var(--pl-charcoal); opacity: 0.85; }

.template-pearl .tpl-content {
  position: relative; z-index: 1; margin: -3.25rem 1rem 0; padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem);
  background: var(--pl-sheen), var(--pl-champagne); border: 1px solid var(--pl-champagne-deep); border-radius: 2px;
  box-shadow: 0 26px 56px -32px rgba(46, 43, 38, 0.45); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
}
.template-pearl .tpl-content::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid rgba(183, 151, 92, 0.45); pointer-events: none;
}
.template-pearl .tpl-eyebrow {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; color: var(--pl-gold-deep); margin: 0;
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.template-pearl .tpl-eyebrow::before,
.template-pearl .tpl-eyebrow::after { content: ""; width: 1.6rem; height: 1px; background: var(--pl-gold); opacity: 0.7; }
.template-pearl .tpl-name {
  font-family: "Amiri Quran", serif; font-weight: 400; color: var(--pl-charcoal); font-size: clamp(2.1rem, 5vw, 3.3rem);
  line-height: 1.25; letter-spacing: 0; margin: 0.6rem 0 0;
}
.template-pearl .tpl-amp { display: block; font-family: "Amiri Quran", serif; font-size: 0.6em; color: var(--pl-gold); opacity: 1; line-height: 1.2; padding: 0; }
.template-pearl .tpl-name::after {
  content: ""; display: block; width: 4.5rem; height: 1px; margin: 1.1rem auto 0;
  background: linear-gradient(90deg, transparent, var(--pl-gold) 30%, var(--pl-gold) 70%, transparent);
}
.template-pearl .tpl-dedication { font-family: "Amiri Quran", serif; font-style: italic; font-size: 1.12rem; line-height: 1.75; color: var(--pl-charcoal-soft); max-width: 44ch; margin: 0.9rem auto 0; }

/* الموعد والمكان: صفوف شعرية بخط فاصل بدل الشرائح الدائرية */
.template-pearl .tpl-meta {
  width: 100%; margin: 0.85rem 0 0; padding: 0.75rem 0 0; border-top: 1px solid var(--pl-champagne-deep);
  font-size: 0.92rem; color: var(--pl-charcoal);
}
.template-pearl .tpl-meta strong { color: var(--pl-gold-deep); letter-spacing: 0.04em; }
.template-pearl .tpl-content .btn.outline {
  margin-top: 0.85rem; border-radius: 2px; border-color: var(--pl-charcoal); color: var(--pl-charcoal); background: transparent;
  letter-spacing: 0.04em;
}
.template-pearl .tpl-content .btn.outline:hover { background: var(--pl-charcoal); color: var(--pl-pearl); }

.template-pearl .tpl-countdown { width: 100%; margin-top: 1rem; }
.template-pearl .tpl-countdown-grid { display: inline-flex; gap: 0; justify-content: center; border: 1px solid var(--pl-champagne-deep); background: rgba(255, 255, 255, 0.55); }
.template-pearl .tpl-countdown-grid div { min-width: 5rem; padding: 0.7rem 0.5rem; border-inline-start: 1px solid var(--pl-champagne-deep); }
.template-pearl .tpl-countdown-grid div:first-child { border-inline-start: 0; }
.template-pearl .tpl-countdown-grid span { font-family: "Amiri Quran", serif; font-weight: 400; font-size: 1.9rem; color: var(--pl-charcoal); }
.template-pearl .tpl-countdown-grid small { color: var(--pl-gold-deep); letter-spacing: 0.06em; }
.template-pearl .tpl-countdown-done { background: rgba(255, 255, 255, 0.6); color: var(--pl-charcoal); border: 1px solid var(--pl-champagne-deep); border-radius: 2px; font-family: "Amiri Quran", serif; }

.template-pearl .tpl-program {
  width: 100%; max-width: none; margin: 1rem 0 0; padding: 0.9rem 0 0; background: transparent; border: 0;
  border-top: 1px solid var(--pl-champagne-deep); border-radius: 0; text-align: center;
}
.template-pearl .tpl-program h2 { font-family: "Amiri Quran", serif; font-weight: 400; color: var(--pl-charcoal); font-size: 1.35rem; }
.template-pearl .tpl-program p { color: var(--pl-charcoal-soft); line-height: 1.9; margin: 0; }

.template-pearl .share-row { justify-content: center; margin-top: 1.25rem; }
.template-pearl .share-row .btn { border-radius: 2px; border-color: var(--pl-charcoal); color: var(--pl-charcoal); background: transparent; letter-spacing: 0.03em; }
.template-pearl .share-row .btn:hover { background: var(--pl-charcoal); color: var(--pl-pearl); }

@media (min-width: 860px) {
  .template-pearl .container.tpl-frame { grid-template-columns: 7fr 5fr; align-items: stretch; padding-block: 2.5rem 2rem; text-align: start; }
  .template-pearl .tpl-photo-wrap { grid-column: 1; grid-row: 1; max-width: none; margin: 0; display: flex; }
  .template-pearl .tpl-photo,
  .template-pearl .tpl-photo-placeholder { flex: 1; width: 100%; height: auto; min-height: 30rem; aspect-ratio: auto; }
  .template-pearl .tpl-photo { align-self: stretch; }
  .template-pearl .tpl-content {
    grid-column: 2; grid-row: 1; align-self: end; margin-block: 3rem 0; margin-inline-start: -5rem; margin-inline-end: 0;
    text-align: start; align-items: flex-start;
  }
  .template-pearl .tpl-name::after { margin-inline: 0; }
  .template-pearl .tpl-dedication { margin-inline: 0; }
  .template-pearl .tpl-countdown-grid { justify-content: flex-start; }
  .template-pearl .tpl-program,
  .template-pearl .tpl-program h2 { text-align: start; }
  .template-pearl .share-row { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .template-pearl .tpl-content { margin-inline: 0.5rem; }
}

/* -------- تأكيد الحضور وتهاني الأحبة: نفس الـpartials المشتركة، مظهر لؤلؤ فقط -------- */
.template-pearl .panel {
  position: relative; background: var(--pl-white); border: 1px solid var(--pl-line); border-radius: 2px;
  box-shadow: 0 18px 44px -32px rgba(46, 43, 38, 0.4);
}
.template-pearl .panel::before {
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--pl-champagne-deep), var(--pl-gold) 50%, var(--pl-champagne-deep));
}
.template-pearl .panel h2 { font-family: "Amiri Quran", serif; font-weight: 400; color: var(--pl-charcoal); text-align: center; }
.template-pearl .field input, .template-pearl .field select, .template-pearl .field textarea {
  border-radius: 2px; border: 1px solid var(--pl-line); background: var(--pl-pearl); color: var(--pl-charcoal);
}
.template-pearl .field input:focus, .template-pearl .field select:focus, .template-pearl .field textarea:focus {
  border-color: var(--pl-gold); box-shadow: 0 0 0 3px rgba(183, 151, 92, 0.2);
}
.template-pearl .btn.small:not(.outline) { background: var(--pl-charcoal); border-color: var(--pl-charcoal); border-radius: 2px; letter-spacing: 0.05em; }
.template-pearl .btn.small:not(.outline):hover { background: var(--pl-gold-deep); border-color: var(--pl-gold-deep); }
.template-pearl .guest-entry { background: var(--pl-champagne-soft); border: 0; border-inline-start: 3px solid var(--pl-gold); border-radius: 0; padding: 1rem 1.25rem; margin-block: 0.85rem; }
.template-pearl .guest-entry:first-of-type { margin-top: 0; }
.template-pearl .guest-entry strong { color: var(--pl-charcoal); }

/* (9.12) دعوة إنشاء صفحة ذكرى أسفل الصفحة العامة المنشورة: لوحة هادئة بألوان ثابتة مقروءة على أي قالب، بلا حركة. */
.mcta { padding: 2.5rem var(--gutter, 1.25rem) 3rem; }
.mcta-inner { max-width: 40rem; margin-inline: auto; text-align: center; background: #f6f3ee; color: #1c1c19; border: 1px solid #e3ddcd; border-radius: 1rem; padding: 2rem 1.5rem; display: grid; gap: 0.9rem; justify-items: center; }
.mcta-inner h2 { font-size: 1.25rem; line-height: 1.6; margin: 0; }
.mcta-inner p { margin: 0; color: #46433c; line-height: 1.9; }
.mcta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding-inline: 1.6rem; border-radius: 999px; background: #33443c; color: #fff; border: 1px solid #33443c; font-weight: 700; text-decoration: none; }
.mcta-btn:hover { background: #212f29; }
.mcta-btn:focus-visible { outline: 3px solid #8c6a30; outline-offset: 3px; }
@media (max-width: 560px) { .mcta-inner { padding: 1.6rem 1.1rem; } .mcta-btn { width: 100%; } }