/* ذِكرى | ZekraLink — نمط الواجهة العامة والإدارة. ملف واحد يخدم كل الصفحات دون أدوات بناء. */

@font-face {
  font-family: "Alexandria";
  src: url("/assets/fonts/Alexandria.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Amiri Quran";
  src: url("/assets/fonts/AmiriQuran.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* هوية ذِكرى | ZekraLink — عاج دافئ، حبر عميق، ولمسة ذهب عتيق، مع مسارين متمايزين:
     ذكرى هادئة (بترولي/سيچ) ومناسبات مبهجة (نبيذي/وردي)، على أساس مشترك واحد. */
  --ink: #1c1c19;
  --ink-soft: #46433c;
  --muted: #766c5c;
  --paper: #fcf9f4;
  --paper-soft: #f6f3ee;
  --surface: #ffffff;
  --line: #e3ddcd;
  --gold: #c5a880;
  --gold-deep: #8c6a30;
  --olive: #33443c;
  --olive-deep: #212f29;
  --error: #ba1a1a;
  --error-bg: #ffdad6;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --shadow-1: 0 4px 20px -2px rgba(43, 56, 42, 0.08);
  --shadow-2: 0 12px 32px -4px rgba(30, 38, 49, 0.14);
  --gutter: 1.25rem;
  --max: 1180px;

  /* مسار الذكرى (ذكرى ودعاء) — بترولي هادئ وسيچ */
  --path-memorial: #1e3a42;
  --path-memorial-deep: #11282d;
  --path-memorial-bg: #e8efea;
  --path-memorial-ink: #4a6b63;

  /* مسار المناسبات (فرح ودعوة) — نبيذي ووردي */
  --path-celebration: #7c2d48;
  --path-celebration-deep: #5a1e33;
  --path-celebration-bg: #fff1f2;
  --path-celebration-ink: #7c2d48;

  /* لوحة الإدارة — الوضع الفاتح (افتراضي): خلفية رمادية فاتحة جدًا، أسطح بيضاء
     (Header/Sidebar/بطاقات/جداول)، نص كحلي، حدود رمادية هادئة، لمسات تركواز.
     الوضع الداكن (الكحلي الأصلي) مُعاد تعريفه أدناه تحت :root[data-theme="dark"]. */
  --admin-bg: #eef1f6;
  --admin-surface: #ffffff;
  --admin-surface-alt: #f7f9fc;
  --admin-ink: #0e1c30;
  --admin-text: #16233a;
  --admin-turquoise: #2dd4bf;
  /* (9.18) أغمق من #0f9c8b (3.42:1 مع الأبيض) ليبلغ نص الأزرار البيضاء والروابط AA (≥4.5:1) على كل خلفيات الإدارة. */
  --admin-turquoise-deep: #0b7d70;
  --admin-accent-text: #0a7a6d;
  --admin-line: #dfe4ec;
  --admin-text-dim: rgba(14, 28, 48, 0.62);
  --admin-label: rgba(14, 28, 48, 0.45);
  --admin-active-bg: rgba(15, 156, 139, 0.12);
  --admin-active-text: #0b4a42;
  --admin-hover-bg: rgba(15, 156, 139, 0.08);

  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  font-family: "Alexandria", "Segoe UI", Tahoma, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
}
html { overflow-x: hidden; }
/* body بـ overflow-x:hidden يصير حاوية تمرير فيفقد position:sticky (الهيدر) معناه؛ clip يقصّ الفائض بلا إنشاء حاوية (html يمنع التمرير الأفقي كما كان). */
body { overflow-x: hidden; overflow-x: clip; }
h1, h2, h3, h4 { font-family: "Alexandria", sans-serif; font-weight: 700; line-height: 1.3; margin: 0 0 0.5em; color: var(--ink); }
h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
h3 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 0.75em; }
a { color: inherit; text-decoration: none; }
small { font-size: 0.85rem; color: var(--muted); }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* رابط "انتقل للمحتوى": نمط visually-hidden القياسي (1x1px مقصوص) بدل الإزاحة بآلاف
   البكسلات عبر left/right فيزيائي — ذلك القديم كان يوسّع scrollWidth الفعلي للمستند
   (خاصة في RTL) رغم أن overflow-x:hidden يمنع ظهور شريط تمرير أفقي فعليًا للمستخدم. */
.skip {
  position: absolute; inset-inline-start: 0; top: 0;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  z-index: 200; background: var(--ink); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 0.5rem 0.5rem;
}
.skip:focus {
  width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  inset-inline-start: 0.75rem; top: 0.75rem;
}

.container { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.container.narrow { max-width: 640px; }
.section { padding-block: clamp(2rem, 5vw, 3.5rem); }
.center { text-align: center; margin-inline: auto; }
.muted { color: var(--muted); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.actions.spaced { margin-top: 1rem; }
.spaced { margin-top: 1rem; }
.pre-line { white-space: pre-line; }

.eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--gold-deep); text-transform: none; margin-bottom: 0.5rem; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: inline-block; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.section-heading p { max-width: 32ch; }

/* أزرار */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 48px; padding-inline: 1.5rem; border-radius: var(--radius-sm);
  background: var(--olive); color: #fff; font-weight: 600; font-size: 0.95rem;
  border: 1.5px solid var(--olive); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { background: var(--olive-deep); border-color: var(--olive-deep); box-shadow: var(--shadow-1); }
.btn.outline { background: transparent; color: var(--olive-deep); border-color: var(--gold); }
.btn.outline:hover { background: rgba(197, 168, 128, 0.1); }
.btn.small { height: 38px; padding-inline: 1.1rem; font-size: 0.85rem; }
.text-btn { background: none; border: 0; color: var(--olive-deep); font-weight: 600; padding: 0.3rem 0.2rem; }
.text-btn:hover { text-decoration: underline; }
.text-btn.danger { color: var(--error); }

/* رأس الصفحة */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(252, 249, 244, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.brand-symbol { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 4rem 4rem 1rem 1rem; background: var(--ink); color: var(--gold); font-family: "Alexandria", sans-serif; font-size: 1.05rem; box-shadow: inset 0 0 0 1px rgba(197, 168, 128, 0.35); }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.15; }
.brand-word { font-weight: 700; }
.brand-latin { direction: ltr; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; color: var(--gold-deep); text-transform: uppercase; }
.footer .brand-symbol { width: 32px; height: 32px; }
.top-links { display: flex; align-items: center; gap: 1.25rem; font-size: 0.92rem; }
.top-links form { margin: 0; }
.top-links .btn { height: 40px; }

.notice { background: #eef4ea; border: 1px solid #c9dcc0; color: var(--olive-deep); padding: 0.85rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; }
.notice.error { background: var(--error-bg); border-color: #f3b4ad; color: #6b0f0f; }
.notice.error ul { margin-top: 0.4rem; padding-inline-start: 1.1rem; list-style: disc; }

/* نماذج */
.field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); }
.field span { display: flex; gap: 0.25rem; }
.field b { color: var(--error); font-weight: 700; }
.field input, .field select, .field textarea {
  font: inherit; height: 48px; padding: 0 0.9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%;
}
.field textarea { height: auto; min-height: 110px; padding-block: 0.7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.2); }
.field small { margin-top: 0.1rem; }
.field .field-error { color: var(--error); font-weight: 600; }
/* (9.13) شاشة الاستحقاق والظهور وحالة واتساب في الإعدادات */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.btn.danger-btn { background: var(--error); border-color: var(--error); color: #fff; }
.wa-status { border-top: 1px solid var(--line, #e3ddd2); padding-top: 1rem; margin-top: 0.5rem; }
.wa-status h3 { margin-bottom: 0.5rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); }
.check input { width: 18px; height: 18px; accent-color: var(--olive); }
select[name="timezone"] { max-width: 100%; }
input[type="file"] { font-size: 0.85rem; }

/* لوحات وبطاقات */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-1); }
.panel.soft { background: var(--paper-soft); box-shadow: none; }
.panel.review-panel { border-color: var(--gold); }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.manage-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; }
.manage-grid .stack { gap: 1.5rem; }

.badge { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--paper-soft); border: 1px solid var(--line); font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.badge.large { font-size: 0.9rem; padding: 0.5rem 1rem; }
.badge.success { background: #eaf4e4; border-color: #bfe0ac; color: #2f5c1c; }
.badge.warn { background: #fff3e0; border-color: #f3d29b; color: #8a5a10; }
.badge.danger { background: var(--error-bg); border-color: #f3b4ad; color: #8a1414; }
.badge.info { background: var(--path-memorial-bg); border-color: #c4d6cf; color: var(--path-memorial); }
.badge.soon { background: transparent; border-style: dashed; color: var(--muted); }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0 0 1rem; }
.facts dt { color: var(--muted); font-size: 0.85rem; }
.facts dd { margin: 0; font-weight: 600; }
.facts .price { color: var(--gold-deep); font-size: 1.2rem; }
.features li { padding: 0.2rem 0; font-size: 0.92rem; }
.features li span { color: var(--ink-soft); }

.page-tile { display: flex; flex-direction: column; gap: 0.5rem; }
.service-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--paper-soft); font-size: 1rem; }

/* إبراز "الخطوة التالية" بوضوح في بطاقات الصفحات وأعلى صفحة إدارة الصفحة (5.2) */
.next-step { margin-top: 0.25rem; padding-top: 0.85rem; border-top: 1px dashed var(--line); }
.next-step-label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; }
.next-step-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--paper-soft); border: 1px solid var(--line); border-inline-start: 4px solid var(--gold); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.next-step-banner strong { display: block; font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.2rem; }
.next-step-banner p { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); }

.empty { text-align: center; padding: 3rem 1.5rem; border: 1px dashed var(--line); border-radius: var(--radius-lg); color: var(--muted); }
.empty span { font-size: 1.8rem; display: block; margin-bottom: 0.5rem; }
.empty.full { grid-column: 1 / -1; }
.empty-text { text-align: center; padding: 1.5rem; color: var(--muted); }

.list-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.list-row:last-child { border-bottom: 0; }
a.list-row:hover { color: var(--gold-deep); }

.guest-entry { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.guest-entry:last-child { border-bottom: 0; }
.guest-entry small { display: block; margin-block: 0.15rem 0.4rem; }

/* سجل الكلمات العام (مرحلة 4.1): honeypot مخفي بصريًا لا display:none حتى يبقى في DOM
   للبوتات التي تتجاهل display:none، وform البلاغ مطوي افتراضيًا داخل details. */
.text-btn.small { font-size: 0.8rem; padding: 0.15rem 0.1rem; }
/* نفس نمط visually-hidden أعلاه بدل left:-9999px — يبقى الحقل في DOM (ليس display:none)
   للبوتات التي تتجاهله، بلا توسيع scrollWidth. tabindex="-1" وaria-hidden على العنصر
   نفسه في partials/guestbook.blade.php وpartials/rsvp.blade.php يمنعان وصول لوحة
   المفاتيح إليه أصلًا، فلا حاجة لحالة :focus هنا. */
/* (9.17) نص لقارئ الشاشة فقط (رؤوس أعمدة التحديد مثلًا): نفس نمط visually-hidden أعلاه. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.hp-field { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.report-toggle { margin-top: 0.5rem; }
.report-toggle .report-form { margin-top: 0.5rem; }
.guestbook-form { margin-bottom: 1.25rem; }
.entry-delete-form { margin-top: 0.5rem; display: inline-block; }
/* تأكيد الحضور (مرحلة 4.2): نفس نمط guestbook-form أعلاه، مساحة أسفل النموذج فقط. */
.rsvp-form { margin-bottom: 0.5rem; }

/* القرآن الكريم (مرحلة 4.3): مشغّل صوت HTML5 أصلي (لا عناصر تحكم مخصصة)، لوحة المفاتيح
   تعمل افتراضيًا بلا أي JS إضافي. نص الآيات بخط أكبر وتباعد سطر مريح للقراءة، ورقم كل
   آية شارة صغيرة غير قابلة للخلط مع النص نفسه. */
.quran-picker { margin-bottom: 1rem; }
.quran-audio { width: 100%; margin-block: 0.75rem 1.25rem; }
.quran-text { font-size: 1.35rem; line-height: 2.4; }
.quran-ayah-number { font-size: 0.8rem; color: var(--ink-soft); margin-inline-start: 0.15rem; }
/* ترقيم آيات السور الطويلة (المرحلة 8.1): روابط عادية بلا JavaScript، تعمل داخل أي قالب لأنها ترث ألوانه. */
.quran-range { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--ink-soft); }
.quran-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; }
.quran-pager-status { font-size: 0.85rem; color: var(--ink-soft); }
.quran-pager a, .quran-pager .is-disabled { display: inline-block; padding: 0.5rem 1rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: inherit; text-decoration: none; }
.quran-pager a:hover, .quran-pager a:focus-visible { text-decoration: underline; }
.quran-pager .is-disabled { opacity: 0.4; border-style: dashed; }
/* قارئ القرآن المتزامن مع التلاوة (public/assets/quran-reader.js): تحسين تدريجي — يعمل كل ما فوق بلا JavaScript، وهذه القواعد لا تسري إلا بعد أن يضيف السكربت .quran-enhanced.
   ألوان التمييز من ذهب الهوية بشفافية فوق أي خلفية قالب: النص يبقى بلونه (تباين محسوب فوق 4.5:1: نحو 7.6:1 في الفاتح و5.6:1 في الداكن)، والتمييز لا يعتمد على اللون وحده (خط سفلي، متصل أثناء التشغيل ومنقّط عند الإيقاف)،
   ولا حركة مطلوبة (الانتقالات فقط تحت no-preference)، وفي forced-colors يتحول لإطار النظام. */
.quran { --qr-hl: rgba(197, 168, 128, 0.32); --qr-hl-live: rgba(197, 168, 128, 0.55); --qr-line: var(--gold-deep); }
:root[data-theme="dark"] .quran { --qr-hl: rgba(216, 185, 137, 0.2); --qr-hl-live: rgba(216, 185, 137, 0.36); }
.quran-enhanced .quran-audio { display: none !important; }
.quran-player [hidden] { display: none !important; }
.quran-player:empty { display: none; }
.quran-player { margin-block: 0.75rem 1.25rem; }
.quran-player-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.9rem 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-soft); }
.quran .quran-play { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--surface); cursor: pointer; }
.quran .quran-play:hover { background: var(--ink-soft); }
.quran .quran .quran-play:focus-visible, .quran-seek:focus-visible, .quran-follow input:focus-visible, .quran .quran-ayah-play:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
/* أيقونات التشغيل/الإيقاف بـCSS فقط (لا خط ولا صورة)، وغير مقلوبة في RTL كأي أزرار وسائط. */
.quran-play-icon { display: block; width: 0; height: 0; border-style: solid; border-width: 0.5rem 0 0.5rem 0.85rem; border-color: transparent transparent transparent currentColor; margin-inline-start: 0.15rem; }
.quran-play[data-state="playing"] .quran-play-icon { box-sizing: content-box; width: 0.28rem; height: 1rem; border-width: 0 0.28rem; border-color: currentColor; margin: 0; }
.quran-seek { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; margin: 0; accent-color: var(--gold-deep); cursor: pointer; }
.quran-seek:disabled { cursor: default; opacity: 0.55; }
.quran-time { flex: none; min-width: 8.5em; text-align: center; font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.quran-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.6rem; min-height: 2.75rem; margin-top: 0.4rem; cursor: pointer; }
.quran-follow input { flex: none; width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--gold-deep); cursor: pointer; }
.quran-follow input:disabled { cursor: default; }
.quran-follow-text { font-weight: 600; }
.quran-follow-hint { flex: 1 0 100%; margin: 0; padding-inline-start: 1.9rem; }
.quran-status { margin: 0.25rem 0 0; min-height: 1.4em; font-size: 0.9rem; color: var(--ink-soft); }
/* المنطقة الحيّة تبقى في شجرة الوصول حتى وهي فارغة (وإلا قد لا يُعلَن أول نص يدخلها)، فنُصفّر أبعادها فقط. */
.quran-status:empty { margin: 0; min-height: 0; }
.quran-enhanced[data-quran-state="error"] .quran-status { color: var(--error); font-weight: 600; }
/* زرّان حقيقيان بإطار واضح داخل أي قالب (لا نعتمد على .btn لأن بعض القوالب لا تنسّقه): إعادة المحاولة، والذهاب إلى الآية الحالية عند تعطيل المتابعة. */
.quran .quran-retry, .quran .quran-goto { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; margin-top: 0.4rem; padding: 0 1.1rem; border: 1px solid var(--ink-soft); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.quran .quran-retry:hover, .quran .quran-goto:hover { background: var(--paper-soft); }
.quran .quran-retry:focus-visible, .quran .quran-goto:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.quran-now { margin: 0.4rem 0 0; }
.quran-ayah.is-current { background: var(--qr-hl); box-shadow: 0 0.14em 0 0 var(--qr-line); border-radius: 0.35rem; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.quran-enhanced[data-quran-state="paused"] .quran-ayah.is-current, .quran-enhanced[data-quran-state="idle"] .quran-ayah.is-current, .quran-enhanced[data-quran-state="ended"] .quran-ayah.is-current { box-shadow: 0 0.14em 0 0 transparent; border-bottom: 0.12em dotted var(--qr-line); }
.quran-enhanced[data-quran-state="playing"] .quran-ayah.is-current, .quran-enhanced[data-quran-state="loading"] .quran-ayah.is-current { background: var(--qr-hl-live); }
.quran .quran-ayah-play { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; min-width: 2rem; min-height: 2rem; margin-inline: 0.1rem; padding: 0 0.4rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: inherit; font: inherit; line-height: 1; vertical-align: middle; cursor: pointer; }
.quran .quran-ayah-play::before { content: ""; flex: none; width: 0; height: 0; border-style: solid; border-width: 0.28rem 0 0.28rem 0.46rem; border-color: transparent transparent transparent currentColor; opacity: 0.55; }
.quran .quran-ayah-play:hover, .quran-ayah-play:focus-visible, .is-current .quran-ayah-play { border-color: var(--qr-line); background: var(--surface); }
.quran .quran-ayah-play:hover::before, .quran-ayah-play:focus-visible::before, .is-current .quran-ayah-play::before { opacity: 1; }
.quran .quran-ayah-play .quran-ayah-number { margin: 0; color: inherit; }
@media (prefers-reduced-motion: no-preference) { .quran-ayah.is-current, .quran-ayah-play { transition: background-color 0.2s ease, border-color 0.2s ease; } }
@media (forced-colors: active) { .quran-ayah.is-current { outline: 2px solid Highlight; } .quran-play { border: 1px solid ButtonText; } }
@media (max-width: 560px) { .quran-player-bar { gap: 0.5rem; padding-inline: 0.5rem 0.7rem; } .quran-time { min-width: 7.6em; font-size: 0.8rem; } }
/* ترقيم عربي مشترك (المرحلة 8.2-R): resources/views/pagination/arabic.blade.php — العرض الافتراضي لكل links().
   القوالب لا تُخفي شيئًا منه؛ إن أرادت هوية مختلفة تعيد تعريف متغيرات --pager-* وحدها. */
.pager { --pager-ink: var(--ink); --pager-muted: var(--muted); --pager-line: var(--line); --pager-accent: var(--ink); --pager-on-accent: var(--surface); --pager-radius: var(--radius-sm);
  display: grid; justify-items: center; gap: 0.75rem; margin-top: 1.75rem; }
.pager-status { margin: 0; font-size: 0.85rem; color: var(--pager-muted); text-align: center; }
.pager-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.pager-list a, .pager-list [aria-current], .pager-list [aria-disabled] { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: 44px; min-height: 44px; padding: 0 0.75rem; border: 1px solid var(--pager-line); border-radius: var(--pager-radius); color: var(--pager-ink); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.pager-list a:hover, .pager-list [aria-current] { background: var(--pager-accent); border-color: var(--pager-accent); color: var(--pager-on-accent); }
.pager-list [aria-disabled] { opacity: 0.45; }
.pager-gap { display: inline-flex; align-items: center; min-height: 44px; color: var(--pager-muted); }

.option-card { display: flex; gap: 0.75rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1rem; cursor: pointer; }
.option-card:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.15); }
.option-card input { margin-top: 0.3rem; accent-color: var(--olive); }

.public-link { display: block; direction: ltr; text-align: left; background: var(--paper-soft); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 0.75rem 1rem; word-break: break-all; font-size: 0.9rem; }

.photo-preview, .receipt { border-radius: var(--radius-md); border: 1px solid var(--line); max-height: 260px; object-fit: cover; }

.tabs { display: inline-flex; gap: 0.4rem; background: var(--paper-soft); padding: 0.3rem; border-radius: 999px; flex-wrap: wrap; }
.tabs button, .tabs a { border: 0; background: transparent; padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.tabs button.active, .tabs a.active { background: var(--surface); color: var(--gold-deep); box-shadow: var(--shadow-1); }
.tabs.spaced { margin-bottom: 1.25rem; }
.tabs button[data-filter="memorial"].active { color: var(--path-memorial); }
.tabs button[data-filter="event"].active { color: var(--path-celebration); }

/* الصفحة الرئيسية */
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; padding-block: clamp(2rem, 6vw, 4rem); }
.hero-copy p { max-width: 46ch; color: var(--ink-soft); font-size: 1.05rem; }
.hero-note { margin-top: 1rem; display: inline-flex; gap: 0.4rem; align-items: center; font-size: 0.85rem; color: var(--muted); }
.hero-art { position: relative; min-height: 320px; }
.orbit { position: absolute; inset: 6% 10%; border: 1px dashed var(--line); border-radius: 50%; }
.hero-invite { position: relative; z-index: 2; }
.fine-frame { background: var(--surface); border: 1px solid var(--gold); border-radius: 3.5rem 3.5rem 1rem 1rem; padding: 1.75rem; text-align: center; box-shadow: var(--shadow-2); max-width: 300px; margin-inline: auto; }
.fine-frame .ornament { color: var(--gold); font-size: 1.1rem; }
.hero-monogram { width: 56px; height: 56px; margin: 0.75rem auto; display: grid; place-items: center; border-radius: 50%; background: var(--path-celebration); color: #fff; font-weight: 700; font-family: "Alexandria", sans-serif; }
.ornamental-line { display: block; width: 60px; height: 1px; background: var(--gold); margin: 0.75rem auto; }
.hero-memory { position: absolute; bottom: -10px; left: 0; background: var(--path-memorial); color: #fff; padding: 1rem 1.25rem; border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0.25rem; max-width: 220px; box-shadow: var(--shadow-2); }
.hero-memory strong { display: block; margin: 0.25rem 0; }
.floating-note { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.8rem; box-shadow: var(--shadow-1); }
.note-one { top: 4%; left: -4%; }
.note-two { bottom: 6%; right: -4%; }

.services-band { background: var(--paper-soft); }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
/* خدمة واحدة فقط (EVENTS_ENABLED=false، المرحلة 8.1): عمود واحد متمركز بدل نصف فارغ. */
.service-grid.service-grid-single { grid-template-columns: minmax(0, 720px); justify-content: center; }
.package-grid > .package-card:only-child { max-width: 480px; margin-inline: auto; }
.service-panel { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; display: flex; gap: 1.25rem; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.service-panel:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.service-panel h3 { margin-bottom: 0.4rem; }
.service-panel a { display: inline-flex; gap: 0.3rem; margin-top: 0.75rem; font-weight: 700; color: var(--gold-deep); }
.service-watermark { position: absolute; font-size: 6rem; opacity: 0.05; left: -0.5rem; bottom: -1.5rem; }

/* المساران الأساسيان لهوية ذِكرى: ذكرى هادئة ومحترمة، ومناسبات مبهجة وحيوية */
.service-panel.memorial-panel { border-top-color: var(--path-memorial); }
.service-panel.memorial-panel .service-icon { background: var(--path-memorial-bg); color: var(--path-memorial); }
.service-panel.memorial-panel .service-watermark { color: var(--path-memorial); }
.service-panel.memorial-panel a { color: var(--path-memorial); }
.service-panel.event-panel { border-top-color: var(--path-celebration); }
.service-panel.event-panel .service-icon { background: var(--path-celebration-bg); color: var(--path-celebration); }
.service-panel.event-panel .service-watermark { color: var(--path-celebration); }
.service-panel.event-panel a { color: var(--path-celebration); }

.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.template-grid.compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.template-grid > [data-service="memorial"] .btn.outline { color: var(--path-memorial); border-color: var(--path-memorial); }
.template-grid > [data-service="event"] .btn.outline { color: var(--path-celebration); border-color: var(--path-celebration); }

/* معرض «ذكريات باقية» (مرحلة 3.2، هوية بصرية في المرحلة 5.1) */
.memory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.5rem; }
.memory-card { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; color: inherit; text-decoration: none; padding: 0.5rem; border-radius: var(--radius-md); transition: transform 0.15s ease; }
.memory-card:hover { transform: translateY(-2px); }
.memory-card:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; border-radius: var(--radius-md); }
.memory-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line);
  /* الخلفية = أيقونة شخص افتراضية (رأس + كتفان بتدرّجات CSS، بلا صورة ولا data: فلا أثر على CSP) بألوان --path-memorial (تتبع الوضعين): تظهر بتباين واضح أثناء تحميل الصورة (loading=lazy) أو إن تعذّر تحميلها، وتغطيها الصورة الحقيقية كلها بعد وصولها (تُخزَّن دائمًا JPEG معتمًا). كانت --paper-soft، وفي الداكن تكاد تطابق خلفية البطاقة فتبدو الدائرة فارغة. */
  background: radial-gradient(circle at 50% 36%, var(--path-memorial) 0 17%, transparent 17.5%), radial-gradient(ellipse 40% 30% at 50% 98%, var(--path-memorial) 0 99%, transparent 100%), var(--path-memorial-bg); }
/* صورة مكسورة (الملف مفقود): نص alt المرئي يزاحم الأيقونة فيُخفى بصريًا فقط؛ سمة alt نفسها باقية لقارئات الشاشة. */
img.memory-avatar { font-size: 0; color: transparent; }
.memory-avatar-placeholder { display: grid; place-items: center; font-size: 1.75rem; font-weight: 700; color: var(--path-memorial); background: var(--path-memorial-bg); }
.memory-name { font-weight: 600; }
.memory-visit { font-size: 0.85rem; color: var(--muted); }
.memory-search { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.75rem; align-items: end; max-width: 760px; margin-bottom: 1rem; }
.memory-results { margin-bottom: 1.5rem; }

.charity-note { display: flex; align-items: flex-start; gap: 0.9rem; margin: 0 0 1.5rem; padding: 1rem 1.1rem; border: 1px solid #c9dcc0; border-radius: var(--radius-md); background: #f3f7ef; color: var(--olive-deep); }
.charity-note-mark { display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--olive-deep); color: #fff; font-size: 1.15rem; }
.charity-note strong { display: block; margin-bottom: 0.25rem; }
.charity-note p { margin: 0; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.8; }

.share-tools { display: grid; gap: 1.25rem; }
.share-qr-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 1rem; max-width: 560px; margin: 1rem auto 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-align: start; }
.share-qr { grid-row: span 2; width: 132px; padding: 0.35rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.share-qr svg { display: block; width: 100%; height: auto; }
.share-qr-card figcaption { display: grid; gap: 0.25rem; }
.share-qr-card figcaption span, .share-qr-card figcaption small { color: var(--muted); overflow-wrap: anywhere; }
/* بطاقات القوالب الاحترافية (المرحلة 6.5): صورة معاينة محلية حقيقية + اسم + نوع خدمة +
   حالة (إدارة فقط) + زر معاينة. مشتركة بين الرئيسية ولوحة الإدارة (partials/template-card)،
   واختيار العميل في page-manage (بنية مشابهة بصريًا عبر .template-option-wrap أدناه). */
.template-card { display: flex; flex-direction: column; gap: 0.6rem; }
.template-thumb { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/5; background: var(--paper-soft); }
.template-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.template-service-badge { position: absolute; inset-inline-start: 0.6rem; top: 0.6rem; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 999px; backdrop-filter: blur(2px); }
.template-caption { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.template-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.circle-link { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; flex: none; }

.template-option-wrap { display: flex; flex-direction: column; gap: 0.5rem; text-align: center; }
.template-option { cursor: pointer; display: block; }
.template-option input { position: absolute; opacity: 0; }
.template-option .template-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.template-option-wrap:has(input:checked) .template-thumb { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.2); }
.template-option-wrap.is-current .template-thumb { border-color: var(--olive); box-shadow: 0 0 0 3px rgba(122, 138, 96, 0.18); }
.template-option-name { display: block; margin-top: 0.4rem; font-size: 0.85rem; font-weight: 600; }
.template-current-badge { align-self: center; }

.process-section { background: var(--olive-deep); color: #f3f0e9; }
.process-section .eyebrow { color: var(--gold); }
.process-section h2 { color: #fff; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.step-number { display: inline-block; font-size: 1.4rem; font-weight: 700; color: var(--gold); margin-bottom: 0.4rem; }

.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.package-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; box-shadow: var(--shadow-1); }
.package-card.featured { border-color: var(--gold); box-shadow: var(--shadow-2); }
.package-ribbon { position: absolute; top: 1rem; left: 1rem; background: var(--gold); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 999px; }
.package-card.service-memorial { border-top: 3px solid var(--path-memorial); }
.package-card.service-memorial .eyebrow { color: var(--path-memorial); }
.package-card.service-event { border-top: 3px solid var(--path-celebration); }
.package-card.service-event .eyebrow { color: var(--path-celebration); }
.package-card .price { font-family: "Alexandria", sans-serif; font-size: 2.2rem; font-weight: 700; color: var(--gold-deep); }
.package-card .price small { font-size: 1rem; font-weight: 500; color: var(--muted); }
.package-card .btn { margin-top: 0.75rem; }

.faq-section { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 2rem; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 0.9rem; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-deep); font-size: 1.2rem; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: 0.5rem; color: var(--ink-soft); }

.support-banner { background: var(--ink); color: #fdfaf4; border-radius: var(--radius-xl); display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 2.5rem; margin-inline: var(--gutter); max-width: calc(var(--max) - 2 * var(--gutter)); }
.support-banner h2 { color: #fff; }

.footer { padding-block: 2.5rem; border-top: 1px solid var(--line); margin-top: 2rem; display: flex; flex-direction: column; gap: 0.35rem; color: var(--muted); font-size: 0.85rem; }
.footer-tagline { color: var(--ink-soft); font-weight: 600; font-size: 0.95rem; }

/* الدخول والتسجيل */
.auth-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; padding-block: clamp(2rem, 6vw, 4rem); }
.auth-intro p { color: var(--ink-soft); max-width: 40ch; }
.auth-art { margin-top: 2rem; background: var(--ink); color: var(--gold); border-radius: 4rem 4rem 1rem 1rem; padding: 3rem 2rem; text-align: center; font-size: 2rem; position: relative; overflow: hidden; }
.auth-art span { display: block; font-size: 0.95rem; color: #f3f0e9; margin-top: 0.75rem; }
.auth-art::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 6px; background: linear-gradient(to left, var(--path-memorial), var(--path-celebration)); }
.auth-panel h2 { margin-bottom: 1.25rem; }

/* جداول البيانات */
.data-table { overflow-x: auto; }
.data-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th { text-align: right; padding: 0.75rem 1rem; color: var(--muted); font-weight: 600; font-size: 0.8rem; border-bottom: 1px solid var(--line); }
.data-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table td small { display: block; margin-top: 0.15rem; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background 0.1s ease; }
.data-table tbody tr:hover { background: var(--paper-soft); }
.table-action { font-weight: 600; color: var(--gold-deep); }
/* زر تذكير التجديد عبر واتساب (مرحلة 6.3): أخضر ثابت في الوضعين — لا يعتمد على --gold-deep
   المقلوبة بين الفاتح والداكن، فيبقى مميَّزًا وقابلاً للتمييز عن رابط "إدارة" العادي دائمًا. */
.table-action.whatsapp-action { display: inline-flex; align-items: center; gap: 0.3rem; color: #1da851; }
.icon-whatsapp { width: 16px; height: 16px; flex-shrink: 0; }

/* لوحة الإدارة: التخطيط والمكوّنات الخاصة بها منقولة بالكامل إلى public/assets/admin.css
   (مرحلة 9.14) — يُحمَّل فقط في resources/views/layouts/admin.blade.php ولا يصل لأي صفحة
   عامة أو صفحة عميل. متغيرات --admin-* تبقى معرَّفة هنا لأن .filters-bar (مستخدم أيضًا في
   صفحة إنشاء/تعديل الصفحة العامة لغير الإدارة) يقرأها. */
.filters-bar { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem; background: var(--admin-surface); padding: 0.85rem 1rem; border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.filters-bar input, .filters-bar select { height: 42px; border: 1px solid var(--admin-line); border-radius: var(--radius-sm); padding-inline: 0.75rem; font: inherit; background: var(--admin-surface-alt); color: var(--admin-text); }
.filters-bar .btn { height: 42px; }

.hint-label { margin-bottom: 0.5rem; color: var(--muted); font-size: 0.85rem; }
.field-group { margin-top: 0.6rem; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem; }

.mobile-toggle { display: none; }
.nav-backdrop { display: none; }

/* زر تبديل الوضع الداكن/الفاتح (مرحلة 6.0) — يظهر فقط للمستخدمين المسجَّلين دخولهم. */
.header-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.theme-toggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); font-size: 1.05rem; line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--gold); color: var(--ink); }
.theme-toggle .icon-dark { display: none; }
[data-theme="dark"] .theme-toggle .icon-light { display: none; }
[data-theme="dark"] .theme-toggle .icon-dark { display: inline; }

/* شريط انتحال هوية العميل (مرحلة 6.2): يظهر فقط أثناء دخول المدير بصفة عميل. جزء من
   نفس عنصر <header class="topbar"> الثابت (sticky) القائم أصلًا بدل عنصر sticky منفصل،
   فيتحرك مع الهيدر كوحدة واحدة بلا أي حساب تراكب/إزاحة يدوي بين شريطين sticky مستقلين. */
.impersonation-bar { background: #f0c14b; }
.impersonation-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding-block: 0.55rem; font-size: 0.85rem; color: #402d00; }
.impersonation-bar-inner form { margin: 0; }
.impersonation-bar-inner .btn { height: 34px; padding-inline: 1rem; font-size: 0.8rem; background: #402d00; border-color: #402d00; color: #fff; }
.impersonation-bar-inner .btn:hover { background: #241900; border-color: #241900; }

/* ===================== استجابة الشاشات ===================== */
@media (max-width: 1023px) {
  .hero, .auth-layout { grid-template-columns: 1fr; }
  .hero-art { order: -1; min-height: 260px; }
  .faq-section { grid-template-columns: 1fr; }
  .manage-grid, .admin-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
}

/* القائمة الجانبية للإدارة (details/summary أصلية) انتقلت بالكامل إلى admin.css؛ لا شيء
   من هيكلها القديم (.nav-open، .sidebar-account-mobile) باقٍ هنا أو في أي قالب. */

/* زر القائمة: للموقع العام فقط الآن (لوحة الإدارة تستخدم summary مصمَّمة في admin.css). */
/* ===================== قائمة الموقع العامة (مرحلة 9.16) =====================
   الزر عنصر details/summary أصلي في layout.blade.php، يُرسَل مغلقًا (9.18.1)، والروابط في nav.top-links أختها التالية لا داخلها: CSS لا يقدر على إظهار محتوى
   details مغلقة على سطح المكتب، لكنه يقدر على إظهار أختها دائمًا هناك وإخفائها على الهاتف ما دامت details مغلقة. فبلا JavaScript: سطح المكتب يرى الروابط،
   والهاتف يرى الزر وحده ويفتح القائمة بلمسة واحدة (كانت تُرسَل open فتبدأ مفتوحة تغطي الشاشة). site-nav.js يضيف فوق ذلك فقط: قائمة منسدلة، وEsc والضغط خارجها.
   عيبان قديمان أبطلا القائمة على الهاتف وأُصلحا هنا: (1) الغطاء المعتم كان z-index:70 فوق الهيدر (z-index:50) فكل لمسة، حتى على الزر والروابط، تقع عليه
   وتغلق القائمة فورًا؛ (2) اللوحة كانت position:fixed داخل .topbar وهو يملك backdrop-filter، فيصير هو المرجع لا الشاشة وينهار ارتفاعها إلى 40px.
   لذلك اللوحة الآن absolute أسفل الهيدر والغطاء تحته (z-index:40 < 50). */
.mobile-toggle { align-items: center; gap: 0.4rem; background: var(--olive); color: #fff; border: 0; border-radius: var(--radius-sm); min-height: 44px; padding-inline: 1rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mobile-toggle::-webkit-details-marker { display: none; }
.mobile-toggle::marker { content: ""; }
.mobile-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
details.site-nav { display: block; border: 0; }
body.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(11, 21, 38, 0.5); z-index: 40; }
.social-links { display: inline-flex; align-items: center; gap: 0.5rem; }
.social-label { display: none; color: var(--ink-soft); font-size: 0.9rem; margin-inline-end: 0.25rem; }
.social-link { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); transition: color 0.15s ease, border-color 0.15s ease; }
.social-link:hover { color: var(--ink); border-color: var(--gold-deep); }
.social-link:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.social-icon { width: 22px; height: 22px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.social-icon-facebook { -webkit-mask-image: url("/assets/img/social-facebook.svg"); mask-image: url("/assets/img/social-facebook.svg"); }
.social-icon-instagram { -webkit-mask-image: url("/assets/img/social-instagram.svg"); mask-image: url("/assets/img/social-instagram.svg"); }
.top-links .social-links { margin-inline-start: 0.25rem; }
.footer-social { gap: 0.5rem 0.9rem; }
.footer-nav .social-link { padding: 0; color: var(--ink-soft); }
.footer-nav .social-link:hover { color: var(--ink); text-decoration: none; }

@media (max-width: 780px) {
  .data-table thead { display: none; }
  .data-table table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 0.85rem; padding: 0.5rem 0.9rem; }
  .data-table td { border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; justify-content: space-between; gap: 1rem; text-align: left; padding: 0.55rem 0; }
  .data-table td:last-child { border-bottom: 0; }
  .data-table td::before { content: attr(data-label); font-weight: 600; color: var(--muted); flex: none; }
}

@media (max-width: 899px) {
  .top-inner { height: auto; min-height: 62px; flex-wrap: wrap; padding-block: 0.35rem; }
  .header-actions { display: contents; }
  .header-actions > :first-child { margin-inline-start: auto; }
  .topbar .theme-toggle { width: 44px; height: 44px; }
  /* (9.18.1) details تحمل الزر وحده، والروابط في .top-links أختها التالية: مطوية ما دامت details مغلقة (بلا JavaScript أيضًا)، وصف كامل العرض تحت الشريط حين تُفتح. */
  details.site-nav { flex: none; }
  details.site-nav > summary.mobile-toggle { display: inline-flex; }
  details.site-nav:not([open]) + .top-links { display: none; }
  details.site-nav + .top-links { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 0; padding-block: 0.5rem; max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); overflow-y: auto; }
  .top-links a:not(.btn):not(.social-link), .top-links .text-btn { display: flex; align-items: center; min-height: 48px; padding: 0.55rem 0.25rem; border-bottom: 1px solid var(--line); font-size: 1rem; text-align: start; }
  .top-links .btn { height: 48px; margin-top: 0.75rem; justify-content: center; }
  .top-links form { display: block; }
  .top-links .text-btn { width: 100%; background: none; border-width: 0 0 1px; }
  .top-links .social-links { margin: 0; padding-top: 0.9rem; }
  .top-links .social-label { display: inline; }
  /* مع JavaScript (site-nav.js يضيف is-enhanced قبل أول رسم): قائمة منسدلة تحت الهيدر خارج التدفق، مطوية افتراضيًا. */
  details.site-nav.is-enhanced + .top-links {
    position: absolute; top: 100%; inset-inline: 0; z-index: 1; background: var(--paper);
    padding: 0.5rem var(--gutter) 1rem; max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); overflow-y: auto;
    border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px -18px rgba(11, 21, 38, 0.45);
  }
}
@media (min-width: 900px) {
  details.site-nav { display: none; }
}

@media (max-width: 640px) {
  :root { --gutter: 0.9rem; }
  .section-heading { flex-direction: column; align-items: stretch; }

  /* روابط الحساب في هيدر الإدارة: تُخفى نسختها الأفقية وتظهر داخل الشريط الجانبي
     ابتداءً من نقطة انهيار الشريط الجانبي نفسها (900px، انظر الاستعلام أعلاه)،
     وليس من هنا فقط — هذا الاستعلام (640px) بلا قاعدة خاصة بهما الآن. */

  .support-banner { padding: 1.75rem 1.25rem; text-align: center; justify-content: center; }
  .package-grid, .cards-grid, .template-grid { grid-template-columns: 1fr; }
  .memory-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .memory-search { grid-template-columns: 1fr 1fr; }
  .memory-search .field { grid-column: 1 / -1; }
}

@media (max-width: 400px) {
  .brand-latin { display: none; }
  .share-qr-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* ===================== الوضع الداكن (المرحلة 6.0) =====================
   يُفعَّل حصرًا لشاشات العميل والإدارة المسجَّلة دخولها: زر التبديل في الهيدر
   (partial واحد مشترك) يضبط data-theme على <html> ويحفظها في localStorage
   (`zk-theme`)، والسكربت المضمَّن في <head> (انظر layout.blade.php) يطبّقها قبل
   أول رسم لمنع وميض الوضع الفاتح. كلاهما داخل @auth فقط — الزائر غير المسجَّل
   لا يحصل على الزر ولا على السكربت إطلاقًا، فالسمة لا تُضبط مطلقًا على الصفحة
   الرئيسية العامة أو الدخول/التسجيل أو معرض «ذكريات باقية» أو القوالب الستة
   الشخصية (تلك جميعًا تستخدم نفس ملف app.css لكنها لا تحمل السمة أبدًا، فقواعد
   [data-theme="dark"] لا تُطابق عليها إطلاقًا). القيم أدناه تعيد تعريف نفس
   متغيرات :root الموجودة أصلًا فقط — لا صنف أو مكوّن جديد غير الزر نفسه. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eee8db;
  --ink-soft: #c9c1ae;
  --muted: #988f7c;
  --paper: #15130f;
  --paper-soft: #1e1b15;
  --surface: #23201a;
  --line: #3a352a;
  --gold: #d8b989;
  --gold-deep: #e9d2a3;
  --olive: #55705f;
  --olive-deep: #6f8f7b;
  --error: #ff8a80;
  --error-bg: #4a1f1f;
  --path-memorial: #8fb3a8;
  --path-memorial-deep: #6c9285;
  --path-memorial-bg: #1b2d29;
  --path-memorial-ink: #a9c7bd;
  --path-celebration: #e199b6;
  --path-celebration-deep: #c97b9d;
  --path-celebration-bg: #341823;
  --path-celebration-ink: #e199b6;

  /* لوحة الإدارة — الوضع الداكن: نفس الهوية الكحلية الأصلية (مرحلة 5.2)، بلا تغيير
     في القيم نفسها — فقط مُعاد تعريفها هنا كي يتحوّل الوضع الفاتح أعلاه إلى أسطح
     بيضاء فعليًا بدل الكحلي الثابت الذي كان مضبوطًا دائمًا في :root. */
  --admin-bg: #0b1526;
  --admin-surface: #101f38;
  --admin-surface-alt: rgba(255, 255, 255, 0.06);
  --admin-text: #ffffff;
  --admin-accent-text: #2dd4bf;
  --admin-line: rgba(255, 255, 255, 0.09);
  --admin-text-dim: rgba(226, 232, 240, 0.68);
  --admin-label: rgba(226, 232, 240, 0.4);
  --admin-active-bg: rgba(45, 212, 191, 0.14);
  --admin-active-text: #ffffff;
  --admin-hover-bg: rgba(45, 212, 191, 0.08);
}

/* الهيدر والشعار: --ink تنقلب فاتحة في الوضع الداكن، فيُعاد ضبط شارة الشعار
   (خلفيتها كانت --ink دائمًا) صراحة لتبقى شارة مقروءة بدل صندوق فاتح مقلوب. */
[data-theme="dark"] .brand-symbol { background: var(--gold); color: #171512; }
[data-theme="dark"] .topbar { background: rgba(21, 19, 15, 0.92); }

/* التنبيهات (رسائل النجاح/الخطأ أعلى المحتوى) — ألوان صريحة غير مبنية على متغيرات أصلًا. */
[data-theme="dark"] .notice { background: #1c2a1a; border-color: #34502c; color: #cfe7c0; }
[data-theme="dark"] .notice.error { background: var(--error-bg); border-color: #6b2b2b; color: #ffd9d4; }
[data-theme="dark"] .charity-note { background: #1c2a1a; border-color: #34502c; color: #cfe7c0; }
[data-theme="dark"] .charity-note p { color: var(--ink-soft); }

/* شريط انتحال هوية العميل — نفس منطق التنبيهات أعلاه، ألوان صريحة بدل الاعتماد على
   --gold/--gold-deep المقلوبتين أصلًا لتباين النص/الحدود لا لخلفية شريط كاملة العرض. */
[data-theme="dark"] .impersonation-bar { background: #5c4415; }
[data-theme="dark"] .impersonation-bar-inner { color: #ffe9b3; }
[data-theme="dark"] .impersonation-bar-inner .btn { background: #ffe9b3; border-color: #ffe9b3; color: #402d00; }
[data-theme="dark"] .impersonation-bar-inner .btn:hover { background: #ffdb80; border-color: #ffdb80; }

/* شارات الحالة (badge) — نفس الشيء، كل درجة لها ألوان صريحة مضبوطة يدويًا للتباين. */
[data-theme="dark"] .badge { background: var(--paper-soft); border-color: var(--line); color: var(--ink-soft); }
[data-theme="dark"] .badge.success { background: #1d3318; border-color: #355c2b; color: #b7e3a4; }
[data-theme="dark"] .badge.warn { background: #3a2a10; border-color: #6b4d1c; color: #f3c877; }
[data-theme="dark"] .badge.danger { background: #3a1414; border-color: #6b2424; color: #ffb4ac; }
[data-theme="dark"] .badge.info { border-color: #2f4a43; }

/* شريط الفلاتر ونماذجه (يظهر في صفحة بحث العميل عن عميل حالي وفي شاشات الإدارة). */
[data-theme="dark"] .filters-bar { background: var(--surface); }
[data-theme="dark"] .filters-bar input, [data-theme="dark"] .filters-bar select { background: var(--paper-soft); border-color: var(--line); color: var(--ink); }

/* بقية ألوان لوحة الإدارة في الوضع الداكن (شارات الحالة، القائمة الجانبية، البطاقات...)
   منقولة إلى admin.css — مكان واحد بدل ثلاثة (مرحلة 9.14). */

/* (9.3) المصادقة الثنائية للموظفين: رمز QR مضمَّن، المفتاح اليدوي، وأكواد الاسترداد. */
.mfa-steps { padding-inline-start: 1.25rem; list-style: decimal; display: grid; gap: .35rem; }
.mfa-qr { display: flex; justify-content: center; }
.mfa-qr svg { width: 220px; max-width: 100%; height: auto; background: #fff; border-radius: 8px; }
.mfa-secret { display: inline-block; padding: .35rem .7rem; border: 1px dashed var(--line, #c9dcc0); border-radius: 8px; letter-spacing: .08em; word-break: break-all; }
.mfa-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.mfa-codes li { padding: .55rem .7rem; border: 1px solid var(--line, #c9dcc0); border-radius: 8px; text-align: center; }
.mfa-codes code { font-size: 1.05rem; letter-spacing: .06em; }
.mfa-recovery-toggle { border-top: 1px solid var(--line, #c9dcc0); padding-top: .8rem; }
.mfa-recovery-toggle summary { cursor: pointer; margin-bottom: .6rem; }

/* عدّاد الأدعية وتنبيه الحد الأقصى في نموذج صفحة الذكرى */
.dua-counter { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--ink-soft); }
.dua-limit-alert { margin: 0 0 0.75rem; }
.check:has(input:disabled) { opacity: 0.55; }

/* زر دعم واتساب العائم (partials/support-whatsapp): ثابت في الزاوية السفلية (حافة النهاية = يسار الشاشة في RTL)، بلا تغطية للمحتوى: مساحة إضافية أسفل التذييل
   عبر .has-support-wa، وأيقونة فقط على الهاتف (النص للقارئات الشاشية عبر aria-label) ونص صغير يوضح فتح واتساب من 640px. لا حركة. */
.support-wa { position: fixed; inset-inline-end: 1rem; inset-block-end: max(1rem, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3.5rem; min-width: 3.5rem; justify-content: center; padding: 0.5rem; border-radius: 999px; background: #0a7a3d; color: #fff; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.support-wa:hover { background: #086632; color: #fff; }
.support-wa:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #0a7a3d, 0 6px 18px rgba(0, 0, 0, 0.25); }
.support-wa-icon { width: 1.9rem; height: 1.9rem; flex: none; }
.support-wa-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.support-wa-text strong, .support-wa-text small { display: block; }
.has-support-wa .footer { padding-bottom: 6rem; }
@media (min-width: 640px) {
  .support-wa { padding: 0.5rem 1.1rem 0.5rem 0.9rem; }
  .support-wa-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; text-align: start; line-height: 1.25; }
  .support-wa-text strong { font-size: 0.95rem; }
  .support-wa-text small { font-size: 0.72rem; opacity: 0.9; }
}
@media print { .support-wa { display: none; } }

/* زر تثبيت PWA وتعليمات iOS (partials/pwa-install) وصفحة offline الثابتة */
/* [hidden] يجب أن يبقى مخفيًا مهما كان display الذي تفرضه أنماط الأزرار (مثل inline-flex في سكينة) — وإلا ظهر الزر في متصفحات لا تدعم التثبيت. */
[data-pwa-install][hidden], .pwa-hint[hidden] { display: none !important; }
.pwa-hint { flex-basis: 100%; margin: 0.25rem 0 0; font-size: 0.9rem; }
.offline-page { text-align: center; padding-block: 4rem; }
.offline-mark { margin-inline: auto; }

/* ===================== الرئيسية (تحسين UI/UX) =====================
   كل ما يخص الصفحة الرئيسية مقيَّد بـ body.home-page أو بأسماء خاصة بها، فلا يتغير شكل أي صفحة أخرى؛ الاستثناء الوحيد التذييل المشترك (.footer-*)
   وروابط الثقة/الصفحات القانونية. بلا صور خارجية ولا سكربت ولا animation ثقيل؛ الألوان والخطوط من متغيرات الهوية الحالية (تتبع الوضع الداكن للمسجَّلين). */
.home-page { --max: 1240px; }
.home-page .section { padding-block: clamp(1.5rem, 3.6vw, 2.75rem); }
.home-page .eyebrow { font-size: 0.85rem; }
.home-page .section-heading { justify-content: flex-start; align-items: flex-end; gap: 0.5rem 2rem; margin-bottom: 1.25rem; }
.home-page .section-heading h2 { margin-bottom: 0.25rem; }
.home-page .section-heading p { margin: 0; color: var(--ink-soft); }
.home-page .btn { min-height: 48px; }
.home-page .btn.small { min-height: 38px; }
/* حلقة التركيز: الذهبي الفاتح لا يبلغ 3:1 على خلفية العاج (2.15:1)، فتُستخدم درجة الذهب الغامق في الأقسام الفاتحة (4.7:1) والأبيض في الداكنة. */
.home-page :focus-visible, .footer :focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.home-page .btn.outline { border-color: var(--gold-deep); }

/* Hero: نص + معاينة كبيرة كاملة لقالب سكينة */
.home-page .hero { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(1.25rem, 3.5vw, 2.75rem); }
.home-page .hero.hero-solo { grid-template-columns: minmax(0, 720px); }
.hero-copy h1 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.25; margin-bottom: 0.6rem; }
.hero-lead { max-width: 44ch; margin-bottom: 0.9rem; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.85; }
.free-strip { display: block; max-width: 46ch; margin: 0 0 1.1rem; padding: 0.7rem 1rem; border-inline-start: 4px solid var(--gold); background: var(--paper-soft); border-radius: var(--radius-md); color: var(--ink); line-height: 1.7; }
.hero-actions { gap: 0.75rem; }
.hero-actions .btn { min-height: 52px; padding-inline: 1.5rem; font-size: 1rem; }
.price-line { margin: 0.9rem 0 0.2rem; color: var(--ink); font-size: 0.95rem; }
.hero-note { margin: 0; display: flex; gap: 0.4rem; align-items: center; font-size: 0.85rem; color: var(--muted); }
.home-page .hero-art { position: relative; min-height: 0; }
.hero-preview { margin: 0; }
.hero-preview-frame { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-soft); box-shadow: var(--shadow-2); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hero-preview-frame:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -8px rgba(30, 38, 49, 0.28); }
.hero-preview-bar { display: flex; gap: 6px; padding: 0.55rem 0.85rem; background: var(--paper-soft); border-bottom: 1px solid var(--line); }
.hero-preview-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.hero-preview-frame img { width: 100%; height: auto; aspect-ratio: 1280 / 545; object-fit: contain; background: #1a3a44; }
.hero-preview figcaption { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; margin-top: 0.7rem; color: var(--ink-soft); font-size: 0.92rem; }
.hero-preview figcaption a { color: var(--path-memorial); font-weight: 700; padding-block: 0.7rem; }
.hero-preview figcaption a:hover { text-decoration: underline; text-underline-offset: 4px; }
.home-page .hero-invite { margin-top: 1.25rem; }

/* الخطوات (قسم داكن): كل النصوص والأزرار مقروءة على الخلفية الداكنة */
/* القسمان الداكنان (الخطوات + الدعم) بلونين ثابتين في الوضعين: في الوضع الداكن للمسجَّلين تنقلب --ink و--olive-deep إلى درجات فاتحة فكان النص الأبيض يضيع عليهما. */
.home-page .process-section { background: #212f29; color: #f3f0e9; }
.home-page .support-banner { background: #1c1c19; color: #fdfaf4; border: 1px solid rgba(197, 168, 128, 0.25); }
.process-section .section { padding-block: clamp(1.75rem, 4vw, 3rem); }
.home-head { max-width: 40rem; }
.home-head h2 { margin-bottom: 0; }
.steps.steps-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.step-card { padding: 1.25rem 1.4rem; border: 1px solid rgba(197, 168, 128, 0.3); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.06); }
.step-card h3 { margin: 0 0 0.35rem; color: #fff; font-size: 1.15rem; }
.step-card p { margin: 0; color: rgba(243, 240, 233, 0.92); line-height: 1.85; }
.process-section .step-number { margin-bottom: 0.3rem; font-size: 1.3rem; color: #c5a880; }
.home-page .process-section .eyebrow, .home-page .support-banner .eyebrow { color: #c5a880; }
.home-page .process-section h2, .home-page .support-banner h2 { color: #fff; }
.steps-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0; }
.process-section .btn { background: #c5a880; border-color: #c5a880; color: #212f29; }
.process-section .btn:hover { background: #d8be97; border-color: #d8be97; color: #212f29; }
.process-section .btn.outline { background: transparent; border-color: #c5a880; color: #fff; }
.process-section .btn.outline:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }
.home-page .process-section :focus-visible, .home-page .support-banner :focus-visible { outline-color: #fff; }

/* المزايا: شبكة متوازنة (3 → 2 → 1) وبطاقات متساوية الارتفاع */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.feature-card { padding: 1.2rem 1.3rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.feature-card::before { content: ""; display: block; width: 2rem; height: 3px; margin-bottom: 0.8rem; border-radius: 2px; background: var(--gold); }
.feature-card:hover { border-color: var(--gold); box-shadow: var(--shadow-1); }
.feature-card h3 { margin: 0 0 0.35rem; font-size: 1.08rem; }
.feature-card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.85; }

/* السعر: بطاقة الباقة ورسالة الـ10% متجاورتان، بلا فراغ زائد */
.pricing-layout { display: grid; gap: 1rem; align-items: start; }
.pricing-layout.is-single { grid-template-columns: minmax(0, 26rem) minmax(0, 28rem); justify-content: center; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.pricing-single .section-heading { flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; }
.pricing-single .section-heading p { max-width: 46ch; }
.pricing-layout .package-grid > .package-card:only-child { max-width: none; margin-inline: 0; }
.pricing-layout .charity-note { margin: 0; }
.pricing-layout.is-single .charity-note { padding: 1.25rem 1.4rem; }
.pricing-layout .package-card { padding: 1.5rem; }
.pricing-layout .package-card .price { font-size: 2.4rem; line-height: 1.1; }
.pricing-layout .package-card .btn { min-height: 50px; }

/* الأسئلة: عمودان متزنان */
.home-page .faq-section { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: clamp(1rem, 4vw, 3rem); align-items: start; }
.home-page .faq summary { padding-block: 0.15rem; min-height: 44px; align-items: center; }
.home-page .faq summary:hover { color: var(--path-memorial); }

/* ذكريات باقية: لوحة متماسكة، الزر بجوار العنوان */
.memories-panel { padding: clamp(1.1rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper-soft); }
.memories-panel .section-heading-tight { flex-direction: column; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; text-align: center; }
.memories-panel .memory-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 200px)); justify-content: center; gap: 0.9rem; }
.memories-panel .memory-card { padding: 1rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.memories-panel .memory-card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow-1); }
.memories-panel .memory-avatar { width: 84px; height: 84px; }
.memories-panel .memory-name { font-size: 0.95rem; line-height: 1.5; }

/* الثقة + الدعم */
.trust-strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; padding-block: 1rem; color: var(--ink-soft); }
.trust-strip p { margin: 0; }
.trust-strip nav, .legal-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }
.trust-strip a, .legal-nav a { color: inherit; text-decoration: underline; text-underline-offset: 3px; padding-block: 0.45rem; }
.trust-strip a:hover, .legal-nav a:hover { color: var(--path-memorial); }
.legal-nav a[aria-current="page"] { font-weight: 700; color: var(--ink); }
.home-page .support-banner { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter)); margin: 1.25rem auto 0; padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.25rem, 3vw, 2.25rem); }
.home-page .support-banner h2 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
.support-banner .btn.outline { background: transparent; color: #fff; border-color: #c5a880; }
.support-banner .btn.outline:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }

/* الصفحات القانونية وخطوة الدفع */
.legal-doc { max-width: 46rem; }
.legal-doc h2 { margin-top: 1.75rem; font-size: 1.15rem; }
.legal-doc li { line-height: 1.9; margin-bottom: 0.35rem; }
.checkout-panel { scroll-margin-top: 5rem; border: 2px solid var(--gold); }

/* التذييل المشترك: هوية + روابط سريعة (+ السياسات عند اعتمادها فقط) */
.footer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem 3rem; align-items: center; padding-block: 1.5rem; margin-top: 1.5rem; }
.footer-navs { display: flex; flex-direction: column; gap: 0.15rem; }
.footer-brand { display: flex; flex-direction: column; gap: 0.3rem; }
.footer-brand p { margin: 0; }
.footer-note { color: var(--muted); font-size: 0.85rem; }
.footer-nav { display: flex; flex-flow: row wrap; align-items: center; gap: 0 1.25rem; }
.footer-nav-title { color: var(--ink); font-size: 0.9rem; }
.footer-nav a { padding-block: 0.5rem; color: var(--ink-soft); }
.footer-nav a:hover { color: var(--path-memorial); text-decoration: underline; text-underline-offset: 3px; }

/* اللوحي والهاتف */
@media (max-width: 1023px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-layout.is-single { grid-template-columns: minmax(0, 24rem) minmax(0, 28rem); }
}
@media (max-width: 900px) {
  .home-page .btn.small { min-height: 44px; }
  .footer-nav a { padding-block: 0.7rem; }
  .home-page .hero { grid-template-columns: minmax(0, 1fr); }
  .home-page .hero-art { order: 0; max-width: 46rem; }
  .pricing-layout.is-single { grid-template-columns: minmax(0, 30rem); }
  .home-page .faq-section { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .steps.steps-three { grid-template-columns: minmax(0, 1fr); }
  .trust-strip { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .home-page .section-heading { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .home-page .pricing-single .section-heading { align-items: center; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn, .steps-cta .btn, .support-banner .actions .btn { flex: 1 1 100%; }
  .home-page .memories-panel .section-heading-tight { align-items: center; }
  .memories-panel .memory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .support-banner { text-align: start; justify-content: flex-start; }
  .footer { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
}

/* (9.12) إجراءات سريعة في قوائم الإدارة: نموذج مضمَّن + زر بمظهر رابط + إجراء خطِر */
.inline-form { display: inline; }
button.table-action { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; min-height: 32px; }
.table-action.danger, .admin-main .table-action.danger { color: var(--error); }
.table-action.muted, .admin-main .table-action.muted { color: var(--muted); cursor: default; }

/* (9.17) «أثرٌ باقٍ باسمهم» في الرئيسية: بطاقات هادئة (اسم، صورة عامة، نوع المبادرة وتاريخها، رابط الصفحة). لا مبالغ. أهداف لمس ≥44px، بلا تمرير أفقي عند 320px. */
.charity-impact { padding: clamp(1.1rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper-soft); }
.charity-impact-head { max-width: 40rem; margin: 0 auto 1.25rem; text-align: center; }
.charity-impact-head h2 { margin: 0.3rem 0 0.5rem; }
.charity-impact-head p { margin: 0; color: var(--ink-soft); line-height: 1.9; }
/* (9.17) «أثر خير في ذكراه» لقالبي نور وأثر (سكينة لها تنسيقها في sakina.css). */
.tpl-charity { margin-block: 2rem; }
.charity-memorial { padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.charity-memorial-head h2 { margin: 0.25rem 0 0.75rem; }
.charity-memorial-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.charity-memorial-item p { margin: 0 0 0.3rem; line-height: 1.9; overflow-wrap: anywhere; }
.charity-memorial-summary { color: var(--ink-soft); }
.charity-memorial-tag { display: inline-block; margin-inline-start: 0.4rem; padding: 0 0.6rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.charity-memorial-title { margin: 0 0 0.35rem; font-size: 1.1rem; line-height: 1.6; overflow-wrap: anywhere; }
.charity-memorial-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.charity-memorial-link { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; font-weight: 600; color: var(--gold-deep); }

/* (9.19) «مبادرات الخير» العامة: مبادرة (.ci-pub) في الرئيسية والسجل والتفاصيل، وبطاقات المتوفين (.ci-person): صورة دائرية + اسم + رابط الذكرى.
   الهاتف أولًا؛ أهداف لمس 44px؛ الصورة فوق حرف بديل (يبقى ظاهرًا إن تأخرت أو فشلت)؛ بلا حركة عند prefers-reduced-motion. */
.ci-pub { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.charity-impact .ci-pub { max-width: 52rem; margin-inline: auto; }
.ci-pub-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.ci-pub-nature { display: inline-flex; align-items: center; padding: 0.15rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 600; color: var(--gold-deep); }
.ci-pub-nature.is-ongoing { border-color: var(--gold); }
.ci-pub-kind-label::before { content: "·"; margin-inline-end: 0.4rem; color: var(--muted); }
.ci-pub-title { margin: 0; font-size: clamp(1.15rem, 3.2vw, 1.45rem); line-height: 1.6; overflow-wrap: anywhere; }
.ci-pub-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0; }
.ci-pub-facts > div { min-width: 0; }
.ci-pub-facts dt { font-size: 0.8rem; color: var(--muted); }
.ci-pub-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.ci-pub-summary, .ci-detail-summary { margin: 0; color: var(--ink-soft); line-height: 1.9; overflow-wrap: anywhere; }
.ci-people-title { margin: 0.25rem 0 0; font-size: 0.95rem; color: var(--ink-soft); }
.ci-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: 0.75rem; }
.ci-person-link { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; min-height: 44px; height: 100%; padding: 0.85rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-align: center; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.ci-person-link:hover { border-color: var(--gold); box-shadow: var(--shadow-1); }
.ci-person-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.ci-person-photo { position: relative; flex: none; width: 4.5rem; height: 4.5rem; border-radius: 50%; overflow: hidden; background: var(--paper-soft); border: 1px solid var(--line); }
.ci-person-initial { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; color: var(--gold-deep); }
.ci-person-photo img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.ci-person-photo img.is-broken { display: none; }
.ci-person-name { font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.ci-person-visit { font-size: 0.8rem; font-weight: 600; color: var(--gold-deep); }
.ci-people-more { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
.ci-pub-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ci-pub-actions .btn.small, .ci-detail .btn { min-height: 44px; }
/* (9.19.2) the owner's charity visibility setting (page management): the checkbox row and the save button are 44px targets at every width */
#charity [data-charity-setting] label.check { min-height: 44px; }
#charity [data-charity-setting] .btn.small { height: auto; min-height: 44px; }
.ci-intro p { color: var(--ink-soft); line-height: 1.9; }
.ci-filter { padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-soft); }
.ci-filter a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.ci-list { display: grid; gap: 1rem; }
.ci-empty { max-width: 36rem; margin: 0 auto; padding: 2rem 1.25rem; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-lg); color: var(--ink-soft); }
.ci-empty p { margin: 0.25rem 0; line-height: 1.9; }
.ci-empty-mark { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem; border-radius: 50%; background: var(--paper-soft); color: var(--gold-deep); font-size: 1.2rem; }
.ci-detail { display: flex; flex-direction: column; gap: 1rem; }
.ci-detail h1, .ci-detail-title { margin: 0; overflow-wrap: anywhere; }
.ci-crumbs { font-size: 0.88rem; color: var(--muted); overflow-wrap: anywhere; }
.ci-crumbs a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.ci-detail-note { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.9; }
.ci-detail-people h2, .ci-detail-people-title { margin: 0.5rem 0 0.75rem; font-size: 1.15rem; }
.ci-dua { margin: 0.5rem 0 0; text-align: center; font-size: 1.1rem; font-weight: 600; color: var(--gold-deep); }
@media (prefers-reduced-motion: reduce) { .ci-person-link { transition: none; } }

/* (9.17) قائمة ذِكرى أعلى صفحة الذكرى (partials/memorial-nav): صف واحد هادئ بارتفاع ثابت يطابق --sk-topbar في سكينة (3.9rem، و4.5rem من 768px)
   فيبقى شريط أقسام الصفحة اللاصق تحته مباشرة ومواضع القفز للأقسام صحيحة. الهاتف: زر القائمة (details مغلقة افتراضيًا) ولوحة منسدلة تحت الشريط؛
   سطح المكتب (≥900px): الروابط في الشريط نفسه. كل هدف لمس ≥44px، ولا شيء يتجاوز عرض 320px. */
.mnav .mnav-inner { display: flex; align-items: center; gap: 0.5rem; height: 3.9rem; }
.mnav-brand { flex: none; min-height: 44px; }
.mnav-links { display: none; }
.mnav-cta { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 44px; margin-inline-start: auto; padding-inline: 0.9rem; border-radius: var(--radius-sm); background: var(--ink); color: #fff; font-size: 0.85rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.mnav-cta:hover { background: var(--ink-soft); color: #fff; }
.mnav-cta:focus-visible, .mnav-links a:focus-visible, .mnav-panel a:focus-visible, .mnav-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
details.mnav-menu { flex: none; }
.mnav-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 1.15rem; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mnav-toggle::-webkit-details-marker { display: none; }
.mnav-toggle::marker { content: ""; }
details.mnav-menu[open] > .mnav-toggle { background: var(--paper-soft); border-color: var(--gold-deep); }
.mnav-panel { position: absolute; top: 100%; inset-inline: 0; display: flex; flex-direction: column; max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overflow-y: auto; padding: 0.25rem 1rem 0.75rem; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px rgba(28, 28, 25, 0.08); }
.mnav-panel a { display: flex; align-items: center; min-height: 48px; padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1rem; text-decoration: none; }
.mnav-panel a:last-child { border-bottom: 0; }
@media (max-width: 359px) { .mnav-brand .brand-text { display: none; } .mnav-cta { padding-inline: 0.7rem; } }
@media (min-width: 768px) { .mnav .mnav-inner { height: 4.5rem; } }
@media (min-width: 900px) {
  .mnav-links { display: flex; align-items: center; gap: 0.25rem; margin-inline-start: auto; }
  .mnav-links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.7rem; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: 0.92rem; text-decoration: none; }
  .mnav-links a:hover { color: var(--ink); background: var(--paper-soft); }
  .mnav-cta { margin-inline-start: 0.5rem; }
  details.mnav-menu { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mnav * { transition: none !important; } }