/* ================================================================
   فرحة — أنماط الدعوة الرقمية
   كل القيم تُقرأ من متغيرات CSS يولّدها المحرّك من الثيم،
   فأي تعديل في المحرر ينعكس هنا فوراً بدون لمس هذا الملف.
   ================================================================ */

:root {
  --bg: #f7f2ea;
  --surface: #fff;
  --text: #2c2620;
  --muted: #7b6f62;
  --accent: #b8914f;
  --accent-soft: #e8d9be;
  --accent-10: rgba(184, 145, 79, 0.1);
  --accent-20: rgba(184, 145, 79, 0.2);
  --accent-40: rgba(184, 145, 79, 0.4);
  --border: #e3d9c9;
  --font-heading: "Amiri", serif;
  --font-body: "Tajawal", sans-serif;
  --font-scale: 1;
  --letter-spacing: 0px;
  --radius: 14px;
  --max-width: 720px;
  --section-gap: 0px;
  --shadow: 0 18px 48px -28px rgba(44, 38, 32, 0.35);
  --pattern-opacity: 12%;
  --hero-overlay: 0.35;
}

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

.lb-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
  color: var(--accent);
  opacity: 1;
  transition: opacity .35s ease, visibility .35s ease;
}
.lb-loading-screen__card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 210px;
  justify-content: center;
  padding: 16px 22px;
  border: 1px solid var(--accent-20);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow);
  font-family: var(--font-body);
  font-size: 15px;
}
.lb-loading-screen__spinner {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 2px solid var(--accent-20);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lb-loading-spin .75s linear infinite;
}
@keyframes lb-loading-spin { to { transform: rotate(360deg); } }
.lb-doc[data-ready="1"] .lb-loading-screen {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.lb-doc[data-ready="0"] .lb-intro,

.lb-doc[data-ready="0"] .lb-stage,
.lb-doc[data-ready="0"] .lb-cta,
.lb-doc[data-ready="0"] .lb-music,
.lb-doc[data-ready="0"] .lb-autoscroll {
  visibility: hidden !important;
}

/* أندرويد بيكبّر خط بعض الكتل من نفسه («font boosting»)، وكمان
   المتصفحات اللي جوّه الواتساب والفيسبوك — واللينك بيتفتح من هناك
   غالباً. الكتلة اللي خطها بيتكبّر بيزيد عدد أسطرها، وأقسام القوالب
   المستوردة مواضعها ثابتة بالبكسل، فالسطر الزيادة بيطلع فوق العنصر
   اللي تحته. الآيفون مابيعملش كده، وده سبب «شكل في الآيفون وشكل في
   الأندرويد». القاعدة دي بتقفل التكبير التلقائي فالمقاسات تفضل زي
   ما المصمّم كتبها على أي جهاز. */
.lb-doc {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.lb-doc {
  margin: 0;

  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: calc(16px * var(--font-scale));
  line-height: 1.75;
  letter-spacing: var(--letter-spacing);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.lb-doc img { max-width: 100%; display: block; }

/* وول بيبر الدعوة كلها: طبقتين في نفس ‎background-image‎ — التعتيم فوق
   والصورة تحت. عملناها كده مش بعنصر وهمي لأن ‎::before‎ محجوز للنقشة،
   و‎::after‎ كان هيتطلع فوق الأقسام (بيتولد آخر أبناء الحاوية) فيغطّيها.
   الأقسام اللي ليها ‎--block-bg‎ بتفضل مغطّية الصورة — ده مقصود: تفضّي
   لون خلفية القسم عشان الوول بيبر يبان تحته. */
.lb-stage {
  position: relative;
  max-width: var(--max-width);
  margin-inline: auto;
  background-color: var(--bg);
  background-image: var(--doc-bg-veil, none), var(--doc-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: var(--doc-bg-attach, scroll);
  box-shadow: var(--shadow);
  min-height: 100vh;
  isolation: isolate;
}
.lb-stage--full { max-width: none; box-shadow: none; }

/* ---------------------------------------------------------- نقشات */
.lb-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--pattern-opacity);
  z-index: 0;
  background-repeat: repeat;
}
.lb-pattern--paper::before {
  background-image: radial-gradient(circle at 1px 1px, var(--accent-40) 1px, transparent 0);
  background-size: 18px 18px;
}
.lb-pattern--linen::before {
  background-image:
    repeating-linear-gradient(45deg, var(--accent-20) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, var(--accent-20) 0 1px, transparent 1px 9px);
}
.lb-pattern--stars::before {
  background-image: radial-gradient(circle, var(--accent) 1.2px, transparent 1.4px);
  background-size: 44px 44px;
}
.lb-pattern--arabesque::before {
  background-image:
    radial-gradient(circle at 50% 0, transparent 12px, var(--accent-20) 13px, transparent 14px),
    radial-gradient(circle at 0 50%, transparent 12px, var(--accent-20) 13px, transparent 14px);
  background-size: 56px 56px;
}
.lb-pattern--marble::before {
  background-image:
    radial-gradient(ellipse 120px 40px at 20% 30%, var(--accent-20), transparent 60%),
    radial-gradient(ellipse 160px 50px at 75% 70%, var(--accent-10), transparent 60%);
  background-size: 320px 260px;
}

/* ---------------------------------------------------------- البلوك */
.lb {
  position: relative;
  z-index: 1;
  padding-top: var(--block-pt, 80px);
  padding-bottom: var(--block-pb, 80px);
  padding-inline: 22px;
  border-radius: var(--block-radius, 0);
  text-align: var(--block-align, center);
  background-color: var(--block-bg, transparent);
  color: var(--block-text, inherit);
  margin-bottom: var(--section-gap);
    overflow: hidden;
  min-height: var(--block-section-height, 0px);
}
.lb--has-bg::before {

  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--block-bg-image);
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.lb--has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--block-overlay, 0);
  z-index: -1;
}
.lb--bg-fixed::before { background-attachment: fixed; }

/* ---------------------------------------------------------- تثبيت الخلفية على الآيفون
   سفاري الآيفون (وكل متصفحات iOS لأنها WebKit) بيتجاهل
   ‎background-attachment: fixed‎ — الخلفية بتتحرك مع الصفحة عادي، وعلى
   أندرويد بتفضل ثابتة. فعلى iOS بس بنعمل التثبيت بطريقة تانية:

   • القسم: الـ‎::before‎ اللي شايل الصورة بقى ‎position: fixed‎ بمقاس
     الشاشة، والقسم نفسه عليه ‎clip-path‎ فالصورة ماتبانش غير جوّه حدوده.
     (‎overflow: hidden‎ مابيقصّش العناصر الـfixed، الـclip-path بيقصّها.)
   • الدعوة كلها: طبقة ‎::after‎ ثابتة في المسرح ورا الأقسام، والصورة
     بتيجي في ‎--doc-bg-fixed-img‎ من السيرفر (فاضية لو التثبيت مقفول).

   ‎100lvh‎ = ارتفاع الشاشة وشريط سفاري مستخبي — من غيره بيظهر شريط
   فاضي تحت الصورة لما الشريط يختفي وانت بتنزل.

   ‎@supports (-webkit-touch-callout: none)‎ متحقق في WebKit على iOS بس،
   فأندرويد والكمبيوتر فاضلين على ‎background-attachment‎ اللي شغّالة. */
@supports (-webkit-touch-callout: none) {
  .lb--bg-fixed {
    clip-path: inset(0 round var(--block-radius, 0));
  }
  .lb--bg-fixed::before {
    position: fixed;
    inset: auto;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100lvh;
    background-attachment: scroll;
  }
  /* الحركة (‎.lb-anim‎) عاملة ‎will-change: transform‎ على القسم، وده
     بيخلّي أي ابن ‎fixed‎ يتثبّت في القسم بدل الشاشة — يعني التثبيت
     يبطل تاني. بعد ما الحركة تخلص الـtransform بيبقى ‎none‎ فبنشيله. */
  .lb--bg-fixed.lb-anim.is-in { will-change: auto; }

  .lb-stage {
    background-image: var(--doc-bg-scroll-img, var(--doc-bg-veil, none), var(--doc-bg, none));
    background-attachment: scroll;
  }
  .lb-stage::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    pointer-events: none;
    background-image: var(--doc-bg-fixed-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}
/* CSS القالب المستورد قد يضع background على .lb-custom أو عناصره،
   لذلك نعيد لون القسم المختار إلى الغلاف الداخلي بأولوية واضحة. */
.lb--custom-bg,
.lb--custom-bg > .lb-inner,
.lb--custom-bg .lb-custom {
  background-color: var(--block-bg) !important;
}
.lb--custom-bg .lb-custom,
.lb--custom-bg .lb-custom > :first-child,
.lb--custom-bg .lb-custom > main,
.lb--custom-bg .lb-custom > main > :where(section, div, article),
.lb--custom-bg .lb-custom > section,
.lb--custom-bg .lb-custom > article {
  background-image: none !important;
  background-color: var(--block-bg) !important;
}
/* القسم المستورد قد يحتوي نصوصاً absolute أسفل ارتفاعه المحفوظ؛ لا نقصّها
   من مستوى .lb نفسه، وإطار التحرير يظل أداة بصرية فقط. */
.lb--custom_html {
  overflow: visible !important;
}
/* النصوص داخل القالب المستورد قد تكون داخل section أصلي عليه overflow:hidden؛
   نتركها تخرج داخل حدود القسم الجديد بدلاً من اختفائها عند نقلها. */
.lb--custom_html .lb-custom :where(main, section, article) {
  overflow: visible !important;
}

.lb-inner {
  position: relative;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: var(--block-flex, center);
  gap: 16px;
}
/* HTML الإضافي بتاع «كود متقدّم» — بياخد نفس عرض محتوى القسم (لأنه
   ‎.lb-inner‎ برضو) وبيقف تحته بنفس المسافة اللي بين عناصر القسم.

   ‎display:block‎ بيلغي الـflex الجاي من ‎.lb-inner‎: من غيره كل عنصر في
   الكود بيتحوّل لعنصر flex متمركز وبيتقلّص على قد محتواه، فتخطيط الكود
   اللي المصمّم كتبه بيطلع غير اللي متوقّعه خالص.

   ‎contain: layout paint‎ بتعمل حاجتين، والاتنين مقصودين:
     • بتقص أي حاجة تحاول تخرج بره حدود المربع.
     • بتخلي المربع ده هو المرجع لأي ‎position:absolute‎ **أو ‎fixed‎**
       جوّه الكود — يعني ‎position:fixed‎ مابيتحسبش بالنسبة للشاشة،
       فالكود مايقدرش يهرب من قسمه ويغطي الأقسام التانية. */
/* مربع «كود متقدّم» — **داخل تدفّق القسم** مش ‎absolute‎.

   كان ‎absolute‎ ومتمركز في نص القسم. يعني ارتفاعه مابيتحسبش خالص:
   كارت ٥٠٠px جوّه قسم ارتفاعه التلقائي ١٦٠px كان بيطلع من فوق ومن تحت
   ويتقص (‎.lb‎ عندها ‎overflow:hidden‎). دلوقتي المربع عنصر عادي في
   التدفّق، فالقسم بيطول على قد الكود اللي جوّاه تلقائياً.

   الإزاحة بالبكسل في المحورين — زي أي عنصر جوّه الكود بالظبط، عشان
   السحب يبقى واحد سواء مسكت المربع من حرفه أو مسكت الشكل من نصه:
     • المربع ‎width:max-content‎ ومتوسّط بـ‎margin-inline:auto‎، يعني
       مرجعه هو نص القسم. إزاحة بالبكسل من النص بتطلع نفس المسافة في
       إطار الموبايل وفي المعاينة (النسبة كانت بتكبر مع عرض القسم،
       فالشكل بيقف في مكان هنا ومكان تاني هناك).
     • رأسياً ‎margin-top‎ مش ‎top‎: بتزوّد ارتفاع القسم مع الإزاحة،
       فالمربع مايقدرش يهرب من تحت حدود قسمه.

   ‎max-content‎ بيخلي المربع على مقاس الكود اللي جوّاه، فإطار التحديد
   يبان على العنصر نفسه (+٣px حشو) والسحب يبقى ليه مدى حقيقي.

   ‎transform‎ بـ‎none !important‎ عشان يغلب قاعدة ‎[data-move]‎ العامة —
   هنا الإزاحة في ‎left/margin-top‎ مش في ‎transform‎. */
.lb-extra-html {
  position: relative;
  /* تحت «عناصر فوق القسم» (‎z-index:4‎) عن قصد: دي اسمها «فوق القسم»
     وبتتضاف بعد الكود، فالمفروض تبان فوقه وتاخد الضغطة هي. الكود
     بيتحقن آخر حاجة في الـ‎<section>‎، فبنفس الـ‎z-index‎ كان بيكسب
     بترتيب الـDOM ويحجب النص اللي المستخدم حطّه فوقه. */
  z-index: 2;
  left: var(--dx, 0px);
  margin-top: var(--dy, 0px);
  transform: none !important;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 3px;
  box-sizing: border-box;
  /* ‎layout‎ من غير ‎paint‎: لسه بيمنع ‎position:fixed‎ إنه يهرب للشاشة،
     لكن مابيقصّش الرسم — تصميمات زي صندوق بيتفتح وكارت بيطلع منه
     محتاجة تخرج بره حدود المربع، وكانت بتتقص من نصها. */
  contain: layout;
  text-align: var(--block-align, center);
}
.lb-extra-html:empty { display: none; }

/* المربع بياخد عرض عمود القسم كله، والعمود ده عرضه بيختلف بين إطار
   الموبايل في المحرر وعرض الشاشة في المعاينة. فأي عنصر جوّه الكود
   بعرض ثابت (كارت ٢٦٠px مثلاً) وملهوش هوامش كان بيلزق في أول العمود،
   يعني بيتحرك مع عرض العمود ويبان في مكان هنا ومكان تاني هناك.
   ‎margin-inline:auto‎ بتوسّطه فيبقى مكانه واحد على أي عرض. العناصر
   اللي عرضها ‎auto‎ (تخطيط بعرض كامل) مابتتأثرش: الهوامش التلقائية
   مابتشتغلش غير لما يكون العرض محدَّد. */
.lb-extra-html > *,
.lb-intro-extra > * { margin-inline: auto; }

/* الكود الإضافي في الشاشة الافتتاحية — **من غير حبس** عن قصد.

   الافتتاحية أصلاً طبقة بتغطي الشاشة، فمنطقي إن المصمّم يعمل شاشة
   افتتاح كاملة بـ‎position:fixed‎. أي ‎contain‎ (وكمان أي ‎transform‎
   ولو بصفر) بتخلي الحاوية هي مرجع الـ‎fixed‎ بدل الشاشة — فتصميم
   المفروض يملا الشاشة بيتحبس في مربع صغير. قياس حي: ٢٠٠×١٠٠ بدل
   ٦٣٢×٧١٦.

   عشان كده الإزاحة هنا في ‎left/top‎ مش في ‎transform‎: ‎position:relative‎
   بيزحزح العنصر من غير ما يعمل مرجع للـ‎fixed‎. */
.lb-intro-extra {
  position: static;
  margin-inline-start: var(--intro-item-x, 0px);
  margin-top: var(--intro-item-y, 0px);
  transform: none !important;
  max-width: 100%;
}
.lb-intro-extra:empty { display: none; }

.lb--w-narrow .lb-inner { max-width: 460px; }
.lb--w-normal .lb-inner { max-width: 620px; }
.lb--w-wide   .lb-inner { max-width: 900px; }
.lb--w-full   .lb-inner { max-width: none; }
.lb--w-full   { padding-inline: 0; }

/* ملء الشاشة: القسم بيكسر حدود كارت الدعوة ويمتد لعرض الشاشة كلها.
   ٥٠٪ بتتحسب من عرض الكارت و٥٠vw من عرض الشاشة، فالفرق بينهم هو
   بالظبط المسافة المطلوبة على كل ناحية — والحساب بيشتغل لوحده على أي
   مقاس: على الموبايل الكارت = الشاشة فالهامش بيبقى صفر.
   .lb عليه overflow:hidden، عشان كده الخروج لازم يكون من القسم نفسه
   مش من .lb-inner اللي جواه — لو عملناه جوّه كان هيتقص. */
/* ‎.lb.lb--w-screen‎ مش ‎.lb--w-screen‎ لوحدها عن قصد: تحت في ملف
   الموبايل فيه ‎@media (max-width:640px){ .lb{padding-inline:18px} }‎،
   وبنفس الأولوية اللي بعده بيكسب — فكان الفيديو بيفضل ٣٥٤px جوه شاشة
   ٣٩٠px. الكلاس المكرّر بيرفع الأولوية فيكسب مهما كان الترتيب. */
.lb.lb--w-screen {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;
  border-radius: 0;
}
.lb--w-screen .lb-inner { max-width: none; }
/* الاستدارة والظل مالهمش لازمة لما الحافة بره الشاشة أصلاً */
.lb--w-screen .lb-video,
.lb--w-screen .lb-figure img { border-radius: 0; }

.lb--hidden { display: none; }
.lb-doc--editing .lb--hidden {
  display: block;
  opacity: 0.32;
  filter: grayscale(1);
  outline: 1px dashed var(--accent-40);
}

/* حالة المحرر */
.lb-doc--editing .lb { cursor: pointer; }
.lb-doc--editing .lb:hover { outline: 1px dashed var(--accent-40); outline-offset: -4px; }
.lb-doc--editing .lb.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}
.lb-gate {
  position: absolute;
  inset-inline: 12px;
  bottom: 12px;
  background: #b4413c;
  color: #fff;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  text-align: center;
}

/* ---------------------------------------------------------- الأنماط النصية */
.lb-kicker {
  margin: 0;
  font-size: 0.72em;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.lb-eyebrow {
  margin: 0;
  font-size: 0.72em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}
.lb-heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.25;
  font-size: calc(2.2em * var(--font-scale));
}
.lb-body { margin: 0; color: var(--muted); max-width: 60ch; }
.lb-body p:first-child { margin-top: 0; }
.lb-body p:last-child { margin-bottom: 0; }
.lb-muted { color: var(--muted); }
.lb-note { margin: 0; font-size: 0.86em; color: var(--muted); }

/* ---------------------------------------------------------- الغلاف */
.lb--hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  text-align: center;
  padding-inline: 24px;
  background-color: var(--block-bg, #2c2620);
}
.lb-hero--full { min-height: 100svh; }
.lb-hero--tall { min-height: 78svh; }
.lb-hero--medium { min-height: 58svh; }
.lb-hero--short { min-height: 40svh; }
.lb-hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
  opacity: var(--hero-overlay);
}
.lb-hero-inner { align-items: center; gap: 20px; }
.lb-names {
  margin: 0;
  font-family: var(--name-font, var(--font-heading));
  font-weight: 400;
  font-size: var(--name-size, 76px);
  line-height: 1.1;
  letter-spacing: var(--name-spacing, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lb-names--inline { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.3em; }
.lb-names--crossed { gap: 0; }
.lb-names--crossed .lb-name:last-child { margin-top: -0.24em; margin-inline-start: 1.2em; }
.lb-sep { color: var(--accent); font-size: 0.62em; line-height: 1; }
.lb-hero-sub { margin: 0; font-size: 1.02em; opacity: 0.92; max-width: 34ch; }
.lb-hero-date {
  margin: 0;
  font-size: 0.86em;
  letter-spacing: 0.22em;
  color: var(--accent-soft);
}
.lb-scroll-hint {
  position: absolute;
  bottom: 22px;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.28em;
  opacity: 0.75;
}
.lb-scroll-hint i {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--accent), transparent);
  animation: lb-scroll 2s ease-in-out infinite;
}
@keyframes lb-scroll {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: .4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ---------------------------------------------------------- الزخارف */
.lb-ornament {
  position: relative;
  z-index: 1;
  color: var(--accent);
  width: min(100%, calc(var(--orn-size, 40px) * 5));
  margin-inline: auto;
  display: block;
}
.lb-ornament svg { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------- الاقتباس */
.lb-quote {
  margin: 0;
  font-family: var(--font-heading);
  line-height: 2;
  position: relative;
  padding: 26px 30px;
  max-width: 44ch;
}
.lb-quote p { margin: 0; }
.lb-quote cite {
  display: block;
  margin-top: 14px;
  font-size: 0.56em;
  font-style: normal;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-family: var(--font-body);
}
.lb-quote--simple { border-block: 1px solid var(--accent-40); }
.lb-quote--corners::before, .lb-quote--corners::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1px solid var(--accent);
}
.lb-quote--corners::before { inset-block-start: 0; inset-inline-start: 0; border-width: 1px 0 0 1px; }
.lb-quote--corners::after { inset-block-end: 0; inset-inline-end: 0; border-width: 0 1px 1px 0; }
.lb-quote--arabesque {
  border: 1px solid var(--accent-40);
  border-radius: 140px 140px var(--radius) var(--radius);
  background: var(--accent-10);
  padding: 46px 34px 34px;
}

/* ---------------------------------------------------------- المضيفون */
.lb-hosts {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 18px 26px;
  width: 100%;
}
.lb-host { display: flex; flex-direction: column; gap: 2px; }
.lb-host-label { font-size: 0.76em; color: var(--muted); letter-spacing: 0.1em; }
.lb-host-name { font-family: var(--font-heading); font-size: 1.18em; font-weight: 500; }

/* ---------------------------------------------------------- العد التنازلي */
.lb-countdown { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.lb-cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 78px;
  padding: 16px 12px;
  border-radius: var(--radius);
}
.lb-cd-unit strong {
  font-family: var(--font-heading);
  font-size: var(--num-size, 40px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.lb-cd-unit span { font-size: 0.72em; letter-spacing: 0.16em; color: var(--muted); }
.lb-countdown--boxes .lb-cd-unit {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.lb-countdown--circles .lb-cd-unit {
  border: 1px solid var(--accent-40);
  border-radius: 50%;
  width: 108px;
  height: 108px;
  justify-content: center;
}
.lb-countdown--minimal .lb-cd-unit { padding: 4px 8px; min-width: 62px; }
.lb-countdown--flip .lb-cd-unit {
  background: var(--text);
  color: var(--bg);
  border-radius: 10px;
  position: relative;
}
.lb-countdown--flip .lb-cd-unit::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, .18);
}
.lb-countdown--flip .lb-cd-unit span { color: rgba(255, 255, 255, .7); }
.lb-countdown.is-done { font-family: var(--font-heading); font-size: 1.4em; color: var(--accent); }

/* ---- اتجاه خانات العدّاد ----------------------------------------------
   المقصود ترتيب الخانات نفسها: «أيام» تبدأ من اليمين ولا من الشمال.
   ‎direction‎ هي الحاجة الوحيدة اللي بتقلب ترتيب الـflex والـgrid
   الاتنين — و‎flex-direction:row-reverse‎ مش بديل لأنها قلب **نسبي**
   (يعني نتيجتها بتختلف على صفحة عربي عن صفحة إنجليزي)، والاختيار هنا
   مطلق. الخانة جوّاها رقم وكلمة واحدة متمركزين، فالاتجاه مابيبانش
   عليهم أي فرق. */
.lb-countdown[data-cd-dir="rtl"] { direction: rtl; }
.lb-countdown[data-cd-dir="ltr"] { direction: ltr; }

/* العدّاد المستورد جوّه قسم من قالب: كل قالب بيسمّي حاوية الخانات على
   مزاجه، فبنمسك الأسماء المتكرّرة + أي حاوية الخانات بنات مباشرة ليها
   عن طريق ‎:has()‎. ‎!important‎ لأن ستايل القالب المستورد بيتحقن جوّه
   القسم وممكن يكون محدّد ‎direction‎ لنفسه — والقاعدة دي مابتشتغلش
   أصلاً غير لما المستخدم يختار الاتجاه بنفسه. */
.lb-custom[data-cd-dir="rtl"] :is(
  #countdownContainer, .countdown-container, .countdown-grid, .countdown-wrapper,
  .countdown-items, .countdown-boxes, .countdown-list, .cd-grid, .cd-wrapper,
  .timer-grid, .time-blocks,
  :has(> .time-block), :has(> .time-box), :has(> .countdown-item), :has(> .cd-item)
) { direction: rtl !important; }
.lb-custom[data-cd-dir="ltr"] :is(
  #countdownContainer, .countdown-container, .countdown-grid, .countdown-wrapper,
  .countdown-items, .countdown-boxes, .countdown-list, .cd-grid, .cd-wrapper,
  .timer-grid, .time-blocks,
  :has(> .time-block), :has(> .time-box), :has(> .countdown-item), :has(> .cd-item)
) { direction: ltr !important; }

/* ---------------------------------------------------------- التفاصيل */
.lb-details { width: 100%; display: grid; gap: 16px; }
.lb-details--cards { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.lb-details--rows { grid-template-columns: 1fr; }
.lb-details--timeline { grid-template-columns: 1fr; }
.lb-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 16px;
}
.lb-details--cards .lb-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lb-details--rows .lb-detail {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  text-align: start;
  border-bottom: 1px solid var(--border);
  padding: 14px 4px;
}
.lb-details--rows .lb-detail-value { margin-inline-start: auto; }
.lb-details--timeline .lb-detail {
  align-items: flex-start;
  text-align: start;
  border-inline-start: 1px solid var(--accent-40);
  padding-inline-start: 22px;
  position: relative;
}
.lb-details--timeline .lb-detail::before {
  content: "";
  position: absolute;
  inset-inline-start: -4px;
  top: 26px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.lb-detail-icon { color: var(--accent); display: inline-flex; }
.lb-detail-label { font-size: 0.74em; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.lb-detail-value { font-family: var(--font-heading); font-size: 1.16em; font-weight: 500; }
.lb-detail-hint { font-size: 0.78em; color: var(--muted); }

/* ---------------------------------------------------------- البرنامج */
.lb-agenda { list-style: none; margin: 0; padding: 0; width: 100%; }
.lb-agenda-item {
  display: grid;
  grid-template-columns: auto 24px 1fr;
  gap: 12px;
  align-items: start;
  text-align: start;
  padding-bottom: 22px;
  position: relative;
}
.lb-agenda-item:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--time-w, 62px) + 23px);
  top: 22px;
  bottom: 0;
  width: 1px;
  background: var(--accent-20);
}
.lb-agenda-time {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-size: 0.86em;
  min-width: 62px;
}
.lb-agenda-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  display: grid; place-items: center;
  color: var(--accent);
  background: var(--bg);
}
.lb-agenda-body { display: flex; flex-direction: column; gap: 2px; }
.lb-agenda-body strong { font-family: var(--font-heading); font-weight: 500; font-size: 1.06em; }
.lb-agenda-body em { font-style: normal; font-size: 0.86em; color: var(--muted); }

/* ---------------------------------------------------------- الموقع */
.lb-venue { margin: 0; font-family: var(--font-heading); font-size: 1.5em; }
.lb-address { margin: 0; color: var(--muted); }
.lb-map {
  width: var(--map-w, 100%);
  max-width: 100%;
  height: var(--map-h, 320px);
  /* الحد والحشو جوّه الارتفاع المطلوب — من غير كده صندوق الرسالة
     (اللي فيه حشو) بيطلع أطول من الخريطة بنفس الإعداد. */
  box-sizing: border-box;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.lb-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* جوّه المحرر الخريطة لازم تتسحب زي أي عنصر تاني. الـ‎<iframe>‎ بيبلع
   ضغطة الماوس قبل ما توصل للحاوية (‎[data-move]‎)، فكان مفيش سحب خالص —
   نفس المعالجة الموجودة لخرايط القوالب المستوردة تحت. زوم جوجل بيرجع
   طبيعي في الدعوة المنشورة. */
.lb-doc--editing .lb-map iframe {
  pointer-events: none !important;
  user-select: none !important;
}
.lb-doc--editing .lb-map { cursor: grab; }
.lb-doc--editing .lb-map.lb-dragging { cursor: grabbing; }
.lb-map--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.86em;
  border-style: dashed;
  /* رسالة «الرابط ده مايتعرضش» أطول من سطر — من غير الحشو والالتفاف
     كانت بتخرج بره الإطار على الموبايل. */
  padding: 16px 18px;
  text-align: center;
  line-height: 1.6;
  overflow: auto;
}

/* ---------------------------------------------------------- المعرض */
.lb-gallery { width: 100%; gap: var(--gap, 12px); }
.lb-gallery--grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.lb-gallery--masonry { columns: var(--cols, 3); column-gap: var(--gap, 12px); }
.lb-gallery--masonry .lb-gitem { break-inside: avoid; margin-bottom: var(--gap, 12px); }
.lb-gallery--carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.lb-gallery--carousel .lb-gitem { flex: 0 0 78%; scroll-snap-align: center; }
.lb-gallery--stack { display: flex; flex-direction: column; }
.lb-gitem { margin: 0; position: relative; }
.lb-gitem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: var(--aspect, 4/5);
  border-radius: var(--img-radius, 8px);
  transition: transform .5s ease;
}
.lb-gallery[data-lightbox="1"] .lb-gitem img { cursor: zoom-in; }
.lb-gitem:hover img { transform: scale(1.03); }
.lb-gitem figcaption {
  font-size: 0.78em;
  color: var(--muted);
  padding-top: 6px;
  text-align: center;
}
.lb-gempty {
  width: 100%;
  padding: 40px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.88em;
}

.lb-figure { margin: 0; width: 100%; }
.lb-figure img { width: 100%; border-radius: var(--radius); }
.lb-figure--arch img { border-radius: 999px 999px var(--radius) var(--radius); }
.lb-figure--circle img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.lb-figure--gold { padding: 10px; border: 1px solid var(--accent); border-radius: var(--radius); }
.lb-figure figcaption { font-size: 0.8em; color: var(--muted); padding-top: 8px; text-align: center; }

/* ---------------------------------------------------------- الفيديو */
.lb-video {
  width: 100%;
  /* سقف للارتفاع، والنسبة بتفضل محفوظة لأن التحديد على العرض مش على
     الارتفاع. من غير السطر ده فيديو طولي (٩:١٦) بعرض الشاشة على ديسك
     توب ١٤٤٠ كان بيطلع ٢٥٦٠px ارتفاع — أطول من تلات شاشات.
     ١٢٠vh مش ١٠٠: فيديو عريض ١٦:٩ يفضل ملء العرض بالظبط حتى على لابتوب
     قصير (٧٦٨) وياخد شوية سكرول — ده شكل الـhero العادي. السقف بيمسك
     الحالة الغلط بس (طولي على شاشة عريضة). */
  max-width: calc(120vh * var(--ar, 16 / 9));
  margin-inline: auto;
  aspect-ratio: var(--ar, 16 / 9);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--text);
  position: relative;
}
.lb-video-wrap {
  width: 100%;
  max-width: calc(120vh * var(--ar, 16 / 9));
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  isolation: isolate;
}
.lb-video-wrap .lb-video {
  max-width: none;
  margin-inline: 0;
}
.lb-video-wrap .lb-video iframe, .lb-video-wrap .lb-video video {
  width: 100%; height: 100%; border: 0; display: block;
}
.lb-video-wrap .lb-video-text,
.lb .lb-section-text {
  position: absolute;
  z-index: 4;
  left: calc(50% + var(--video-text-x, 0%));
  top: calc(50% + var(--video-text-y, 0%));
  transform: translate(-50%, -50%);
  /* العرض لازم يكون مستقل عن الموضع. الصندوق ‎absolute‎ بـ‎left‎
     و‎right:auto‎، فلو سيبنا ‎width:auto‎ المتصفح بيحسب العرض من
     المسافة بين ‎left‎ وحافة القسم — يعني كل ما تسحب النص يمين
     العرض بيقلّ والكلام بيعيد التفافه قدامك. قياس حي على قسم عرضه
     374px: العرض نزل من 299px عند ‎x:-30%‎ لـ75px عند ‎x:+30%‎.
     ‎max-content‎ بيقطع العلاقة دي، و‎--section-text-w‎ بتخلي
     المستخدم يحدّد بنفسه فين السطر يقطع. */
  width: var(--section-text-w, max-content);
  max-width: 100%;
  color: var(--video-text-color, #fff);
  font-family: var(--video-text-font, inherit);
  /* صفر في المحرر = مافيش متغيّر أصلاً، فالحجم بيفضل موروث زي ما كان */
  font-size: var(--section-text-size, inherit);
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  /* الظل كان مفروض على كل نص فوق أي قسم. كان منطقه إن النص الأبيض
     فوق صورة محتاج تباين — بس على خلفية هادية بيبان كهالة حوالين
     الحروف، والمصمّم اللي حاطط النص فوق خلفية سادة مش عايزه خالص.
     بقى اختيار: مفيش ظل إلا لما مفتاح «ظل خلف النص» يتفتح من ترس
     النص، و‎video_text_style‎ ساعتها بتبعت المتغيّر. */
  text-shadow: var(--ovl-text-shadow, none);
  pointer-events: none;
}
.lb-doc--editing .lb-video-wrap [data-video-text],
.lb-doc--editing .lb [data-section-text] {
  cursor: grab;
  pointer-events: auto;
  outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 5px;
  user-select: none;
}
.lb-doc--editing .lb-video-wrap [data-video-text].is-dragging,
.lb-doc--editing .lb [data-section-text].is-dragging {
  cursor: grabbing;
  outline-style: solid;
}
/* ---- عناصر فوق القسم: صورة وزرار
   نفس الصندوق المتموضع بتاع النص بالظبط — الموضع والعرض والمقابض
   والسحب كلهم بيشتغلوا من غير أي قاعدة جديدة. اللي تحت بيغيّر
   المحتوى جوّه الصندوق بس. */
.lb .lb-ovl,
.lb-video-wrap .lb-ovl { text-shadow: none; }
/* الصورة من غير عرض محدد بتاخد مقاسها الطبيعي وممكن تملا القسم،
   فافتراضيها ٤٠٪ لحد ما المستخدم يسحب المقبض. */
.lb .lb-section-text.lb-ovl--image,
.lb-video-wrap .lb-video-text.lb-ovl--image { width: var(--section-text-w, 40%); }
.lb-ovl--image img {
  display: block; width: 100%; height: auto;
  border-radius: var(--ovl-radius, 0);
}
/* الزرار لازم يتضغط عند الضيف — باقي العناصر ‎pointer-events:none‎
   عشان ما تحجبش الضغط على القسم اللي تحتها. */
.lb .lb-section-text.lb-ovl--button,
.lb-video-wrap .lb-video-text.lb-ovl--button { pointer-events: auto; }
.lb-ovl-btn {
  display: inline-block;
  padding: .72em 1.7em;
  background: var(--ovl-btn-bg, var(--accent));
  color: var(--ovl-btn-color, #fff);
  font-family: var(--ovl-btn-font, inherit);
  font-size: var(--ovl-btn-size, inherit);
  border-radius: var(--ovl-btn-radius, 999px);
  text-decoration: none;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .55);
  transition: filter .15s;
}
.lb-ovl-btn:hover { filter: brightness(1.07); }
/* جوّه المحرر الزرار بيتسحب مش بيتفتح، فمؤشر السحب أصدق من اليد */
.lb-doc--editing .lb-ovl-btn { cursor: inherit; }
/* عنصر لسه مافيهوش محتوى — في المحرر بس، عشان مكانه يبان */
.lb-ovl--empty {
  display: grid; place-items: center; min-height: 90px;
  border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent); font-size: 12px; text-align: center; padding: 10px;
}

/* ---- قسم الدعاية: لوجو وكلام وأيقونات سوشيال */
.lb-branding { display: grid; justify-items: center; gap: 18px; text-align: center; }
.lb-branding-logo { max-width: 100%; height: auto; margin-inline: auto; }
.lb-branding-logo--empty {
  display: grid; place-items: center; width: 60%; min-height: 110px;
  border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 12px; color: var(--accent); font-size: 12px;
}
.lb-branding-text { margin: 0; }
.lb-social-row {
  display: flex; align-items: center; justify-content: center;
  gap: var(--social-gap, 22px); flex-wrap: wrap;
}
/* اللون بيتكتب على الرابط نفسه من المحرر، والأيقونة بتاخده بـcurrentColor */
.lb-social { display: inline-flex; line-height: 0; text-decoration: none; transition: transform .15s, opacity .15s; }
a.lb-social:hover { transform: translateY(-2px); opacity: .85; }
.lb-social-icon { display: block; }

/* مقبضا عرض النص: بيحددوا فين السطر يقطع. في المحرر بس. */
.lb-section-text__grip { display: none; }
.lb-doc--editing .lb-section-text__grip {
  display: block;
  position: absolute;
  top: 50%;
  width: 12px;
  height: 34px;
  margin-top: -17px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--accent) 85%, #000 15%);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .28);
  cursor: ew-resize;
  pointer-events: auto;
  z-index: 6;
}
.lb-doc--editing .lb-section-text__grip--start { inset-inline-start: -7px; }
.lb-doc--editing .lb-section-text__grip--end { inset-inline-end: -7px; }
.lb-video-wrap--16x9, .lb-video--16x9 { --ar: 16 / 9; }
.lb-video-wrap--4x3, .lb-video--4x3  { --ar: 4 / 3; }
.lb-video-wrap--1x1, .lb-video--1x1  { --ar: 1; }
.lb-video-wrap--9x16, .lb-video--9x16 { --ar: 9 / 16; }
.lb-video-wrap--auto, .lb-video--auto { --ar: var(--vid-ratio, 16 / 9); }
.lb-video iframe, .lb-video video { width: 100%; height: 100%; border: 0; display: block; }
/* نسبة العرض للارتفاع — اختيار من المحرر. القيمة متغيّر واحد عشان
   ‎aspect-ratio‎ و‎max-width‎ ما يفترقوش أبداً. */
.lb-video--16x9 { --ar: 16 / 9; }
.lb-video--4x3  { --ar: 4 / 3; }
.lb-video--1x1  { --ar: 1; }
.lb-video--9x16 { --ar: 9 / 16; }
/* «زي ما هو»: النسبة الحقيقية مش معروفة قبل ما الملف يحمّل، فبنبدأ
   بـ١٦:٩ مؤقتة والـJS بيكتب ‎--vid-ratio‎ من ‎videoWidth/videoHeight‎ أول
   ما تيجي ترويسة الملف. كده مفيش شريط رفيع ولا قفزة كبيرة في التخطيط.
   يوتيوب وفيميو بيفضلوا ١٦:٩ لأن الـiframe مالوش مقاس طبيعي أصلاً. */
.lb-video--auto { --ar: var(--vid-ratio, 16 / 9); }
.lb-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  background: center/cover no-repeat var(--poster, var(--text));
}
.lb-video-play span {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--text);
  display: grid; place-items: center;
  font-size: 22px;
}

/* ---------------------------------------------------------- الأزرار */
.lb-btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lb-btn-row--column { flex-direction: column; align-items: stretch; }
.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.92em;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, color .18s ease;
  background: none;
  color: inherit;
}
.lb-btn:not([data-intro-open]):hover { transform: translateY(-2px); }
.lb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lb-btn--solid { background: var(--accent); color: #fff; }
.lb-btn--outline { border-color: currentColor; color: var(--accent); }
.lb-btn--ghost { border-color: currentColor; opacity: .85; }
.lb-btn--link { padding-inline: 4px; text-decoration: underline; text-underline-offset: 5px; }
.lb-btn--block { width: 100%; }

/* ---------------------------------------------------------- النماذج */
.lb-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 22px;
}
.lb-form { display: flex; flex-direction: column; gap: 14px; text-align: start; }
.lb-field { display: flex; flex-direction: column; gap: 6px; }
.lb-field > span { font-size: 0.82em; color: var(--muted); letter-spacing: 0.06em; }
/* الاستثناء مقصود: خيارات الحضور عايشة جوّه ‎.lb-field‎، فالقاعدة دي
   كانت بتمسك أزرار الراديو كمان وتدّيها ‎width:100%‎ وحشو وحدود وخلفية.
   الزرار كان عرضه ٢٦٧px بدل ١٣px، فيزقّ نص الخيار برّه الكبسولة —
   وبيبان أوضح على الآيفون لأن الشاشة أضيق. */
.lb-field input:not([type="radio"]):not([type="checkbox"]),
.lb-field textarea, .lb-field select {
  font: inherit;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  /* سفاري على الآيفون بيرسم حقوله بنفسه — ظل داخلي واستدارة مختلفة
     وحدود مالهاش علاقة بالقالب. الصفر ده بيسلّم الرسم للستايل بتاعنا. */
  -webkit-appearance: none;
  appearance: none;
}
.lb-field input:not([type="radio"]):not([type="checkbox"]):focus,
.lb-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-20);
}
.lb-field textarea { resize: vertical; }
/* الأسئلة الإضافية — نفس شكل باقي حقول الفورم، بمسافة أوضح فوقها
   عشان السؤال يبان لوحده مش امتداد للحقل اللي فوقه. */
.lb-q { margin-top: 4px; }
.lb-q-hint { font-size: 0.74em; color: var(--muted); opacity: .85; margin-top: -3px; }
.lb-q-req { color: var(--accent); font-style: normal; }
.lb-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-choices label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
  max-width: 100%;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.88em;
  transition: all .16s ease;
}
.lb-choices input {
  accent-color: var(--accent);
  margin: 0;
  flex: 0 0 auto;      /* ما يتمططش مع بقية الصف */
  width: auto;
}
.lb-choices label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-10);
  color: var(--accent);
}
/* فخ السبام: **ما ينفعش** يتخبّى بـ‎left:-9999px‎. الصفحة ‎dir="rtl"‎،
   وفي RTL أي محتوى على شمال نقطة البداية بيوسّع مساحة التمرير —
   ‎scrollWidth‎ كان بيطلع ١٠٣٧٤px والشاشة ٣٧٥px، فالمتصفح بيصغّر
   الصفحة كلها عشان تسع العرض ده. ده اللي بيخلي القالب «يبوظ» أول ما
   تضيف قسم تأكيد الحضور، وبيبان على أندرويد كصفحة مضغوطة على جنب.
   القص بدل الإزاحة بيخفي الحقل من غير ما ياخد أي مساحة. */
.lb-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.lb-form-msg {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--accent-10);
  color: var(--accent);
  font-size: 0.9em;
  text-align: center;
}
.lb-form-msg[hidden] { display: none; }
/* سطر «دي معاينة» تحت رسالة النجاح — هامس عن قصد: الشكل المفروض يفضل
   زي الدعوة الحقيقية، والسطر ده توضيح مش تنبيه. */
.lb-form-note {
  margin: -6px 0 0;
  color: var(--muted);
  font-size: 0.74em;
  text-align: center;
  opacity: .8;
}
.lb-rsvp-closed { margin: 0; color: var(--muted); text-align: center; }

/* ---- رسائل التهنئة تحت فورم التأكيد

   نفس كارت الفورم بالظبط (‎.lb-card‎) عشان القسم يفضل قطعة واحدة
   متناسقة مش صندوقين بشكلين. الارتفاع محدود وبسكرول: عدد الرسائل
   بيكبر مع أيام الفرح، ومن غير الحد ده القسم كان هيطول لآخر الصفحة
   ويدفن اللي بعده. */
.lb-rsvp-wishes { margin-top: 16px; padding: 20px 18px; }
.lb-rsvp-wishes-title {
  margin: 0 0 14px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.02em;
  color: var(--accent);
}
.lb-rsvp-wishes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: var(--wishes-max-h, 320px);
  overflow-y: auto;
  /* مساحة للسكرول بار من غير ما يركب على الكلام */
  padding-inline-end: 6px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-40) transparent;
}
.lb-rsvp-wishes-list::-webkit-scrollbar { width: 6px; }
.lb-rsvp-wishes-list::-webkit-scrollbar-track { background: transparent; }
.lb-rsvp-wishes-list::-webkit-scrollbar-thumb {
  background: var(--accent-40);
  border-radius: 999px;
}
.lb-rsvp-wish {
  background: var(--accent-10);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 0.75);
  padding: 12px 14px;
  text-align: start;
}
.lb-rsvp-wish p {
  margin: 0 0 6px;
  font-size: 0.92em;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.lb-rsvp-wish cite {
  font-style: normal;
  font-size: 0.78em;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.lb-rsvp-wishes-empty {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.9em;
}
/* الزر بعد ما الرد يتسجّل — مقفول ولونه هادي، فمحدش يحاول تاني */
.lb-btn.is-sent { opacity: 1; background: var(--accent-20); color: var(--text); }

/* ---------------------------------------------------------- التهاني */
.lb-wishes { width: 100%; display: grid; gap: 12px; }
.lb-wishes--cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lb-wishes--list { grid-template-columns: 1fr; }
.lb-wish {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-align: start;
}
.lb-wish p { margin: 0 0 8px; font-size: 0.94em; }
.lb-wish cite { font-style: normal; font-size: 0.8em; color: var(--accent); }
.lb-wishes--marquee { display: flex; overflow-x: auto; gap: 12px; }
.lb-wishes--marquee .lb-wish { flex: 0 0 260px; }

/* ---------------------------------------------------------- QR */
.lb-qr {
  width: var(--qr-size, 180px);
  height: var(--qr-size, 180px);
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
}
.lb-qr svg, .lb-qr img { width: 100%; height: 100%; display: block; }
.lb-qr-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--muted); font-size: 0.74em; text-align: center;
}
.lb-qr-link { margin: 0; font-size: 0.76em; color: var(--muted); word-break: break-all; }

/* ---------------------------------------------------------- الموسيقى */
.lb-music {
  position: fixed;
  inset-block-end: calc(18px + env(safe-area-inset-bottom, 0px));

  inset-inline-end: 18px;
  z-index: 60;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--accent-40);
  background: var(--surface);
  color: var(--accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.lb-music.is-playing { animation: lb-spin 6s linear infinite; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lb-music--bar {
  inset-inline: 0;
  width: auto;
  border-radius: 0;
  height: 54px;
  justify-content: center;
}

/* ------------------------------------------- شريط «عجبك القالب؟» */
/* شريط ثابت تحت في معاينة القالب. ‎padding-block-end‎ فيه ‎safe-area‎
   عشان ما يتغطّاش بشريط الإيماءات في آيفون. */
.lb-cta {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
    z-index: 70;
  max-block-size: calc(54px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  /* شبه معتم: ٩٢٪ كان بيسيب كلام الصفحة يبان من ورا الأيقونات */

  background: color-mix(in srgb, var(--surface) 97%, transparent);
  backdrop-filter: blur(10px);
  border-block-start: 1px solid var(--border);
      padding-block: 4px;
  padding-block-end: calc(4px + env(safe-area-inset-bottom, 0px));
  padding-inline: 10px;
}

.lb-cta-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
      gap: 6px; flex-wrap: nowrap;
  min-block-size: 36px; max-block-size: 36px; overflow: hidden;
}
.lb-cta-text {
  margin: 0; min-width: 0; overflow: hidden;
  font-size: 11px; color: var(--muted); line-height: 1.2;
  white-space: nowrap; text-overflow: ellipsis;
}

.lb-cta-name { color: var(--text); font-family: var(--font-heading); }
/* الأيقونات هنا هي نفسها بتاعة قسم الدعاية (‎social_link‎) — ماشية
   بلونها على أرضية الشريط بدل الدايرة الملوّنة القديمة. */
.lb-cta-links { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* الشريط بيغطّي آخر الصفحة — بنزوّد مسافة تحت عشان التوقيع ما يختفيش */
/* ‎margin‎ مش ‎padding‎: المسرح ليه لون وصورة خلفية، فالحشو بيتلوّن —
   ولما «توقيع المنصة» يتقفل بيفضل شريط ملوّن فاضي ٧٤px تحت آخر قسم،
   والمصمّم شايفه «قسم» مالوش أي محتوى. الهامش بيدّي نفس المسافة اللي
   بتمنع الشريط الثابت إنه يغطّي آخر الصفحة، من غير ما يترسم.
   مقيس حي: ‎stage.bottom − آخر قسم = 74px‎ بلون ‎rgb(255,239,214)‎. */
.lb-doc:has(.lb-cta) .lb-stage { margin-block-end: 74px; }
/* أزرار التحكم فوق الشريط بمسافة آمنة، مع احترام شريط إيماءات الهاتف */
.lb-doc:has(.lb-cta) .lb-music,
.lb-doc:has(.lb-cta) .lb-autoscroll {
  inset-block-end: calc(86px + env(safe-area-inset-bottom, 0px));
}
/* رفع زر افتتاحية الفيديو فوق الشريط إذا كان ظاهراً في نفس الشاشة */
.lb-doc:has(.lb-cta) .lb-intro-play {
  translate: 0 calc(-1 * (86px + env(safe-area-inset-bottom, 0px)));
}

@media print { .lb-cta { display: none !important; } }

/* ------------------------------------------- زر التمرير التلقائي */
/* في الناحية المقابلة لزر الموسيقى (‎inset-inline-start‎ مقابل ‎end‎)
   عشان ما يتراكبوش مع بعض لما الاتنين شغّالين. */
.lb-autoscroll {
  position: fixed;
  inset-block-end: 18px;
  inset-inline-start: 18px;
  z-index: 60;
  width: 44px; height: 44px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--accent-40);
  background: var(--surface);
  color: var(--accent);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: .72;
  transition: opacity .2s ease, transform .2s ease;
}
.lb-autoscroll:hover, .lb-autoscroll:focus-visible { opacity: 1; transform: scale(1.06); }
.lb-autoscroll svg { width: 17px; height: 17px; }
/* أيقونة واحدة ظاهرة حسب الحالة */
.lb-autoscroll .i-play { display: none; }
.lb-autoscroll.is-paused .i-pause { display: none; }
.lb-autoscroll.is-paused .i-play { display: block; }
@media print { .lb-autoscroll { display: none !important; } }

/* ---------------------------------------------------------- الافتتاحية */
.lb-intro {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: grid;
  place-items: center;
  gap: 18px;
  text-align: center;
  padding: 30px;
  transition: opacity .6s ease, visibility .6s;
}
.lb-intro.is-open { opacity: 0; visibility: hidden; pointer-events: none; }
/* الافتتاحية بعد ما تتخطّى لازم تخرج من طريق الضغط تماماً.

   ‎visibility:hidden‎ **بتتورَّث** — لكن أي ابن بيعلن ‎visibility:visible‎
   بيكسر الوراثة ويرجع قابل للضغط. وده بالظبط اللي بيحصل مع كود
   المصمّم: غلاف زي ‎#farhaRomanticOpening‎ بـ‎position:fixed;inset:0‎
   و‎z-index:999999‎ و‎visibility:visible‎ بيفضل مغطّي الشاشة كلها وهو
   **مش باين** (‎opacity:0‎ على الأب بتخفي كل الشجرة)، فيبلع كل ضغطة
   على الدعوة: مافيش عنصر يتحدّد ولا يتحرّك بعد تخطّي الافتتاحية.
   مقيس حي: ‎elementFromPoint‎ في نص الشاشة كان بيرجّع ‎span‎ جوّه
   الافتتاحية بدل القسم اللي تحتها.

   ‎pointer-events‎ بتتورَّث كمان، فالقاعدة على الأب بتكفي في الحالة
   العادية — والقاعدة اللي بعدها بـ‎!important‎ عشان الاستثناءات اللي
   بنكتبها إحنا (زي ‎.lb-intro-extra canvas{pointer-events:auto}‎) أو
   اللي المصمّم كاتبها. */
.lb-intro.is-open * { pointer-events: none !important; }
.lb-intro-inner {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  color: var(--intro-color, var(--text));
  font-family: var(--intro-font, var(--font-body));
}
.lb-intro-inner button { font-family: inherit; }
.lb-intro .lb-intro-inner .lb-btn {
  color: var(--intro-item-color, var(--intro-color, #fff));
  transition: none;
}
[data-intro-item] {
  color: var(--intro-item-color, inherit);
  font-family: var(--intro-item-font, inherit);
  font-size: var(--intro-item-size, inherit);
  transform: translate(var(--intro-item-x, 0vw), var(--intro-item-y, 0vh));
}

.lb-doc--editing .lb-intro[data-intro-editable] [data-intro-item] {
  cursor: grab;
  outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 5px;
}
.lb-doc--editing .lb-intro[data-intro-editable] [data-intro-item]:hover {
  outline-color: var(--accent);
}
.lb-doc--editing .lb-intro[data-intro-editable] [data-intro-item].lb-intro-dragging {
  cursor: grabbing;
  user-select: none;
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}

/* ---------------------------------------------------------- المعاينة المكبرة */
.lb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 17, 14, .93);
  display: grid;
  place-items: center;
  padding: 24px;
  cursor: zoom-out;
}
.lb-lightbox img { max-width: 100%; max-height: 90vh; border-radius: 8px; }
.lb-lightbox[hidden] { display: none; }

/* ---------------------------------------------------------- التذييل */
.lb-footer {
  position: relative;
  z-index: 1;
  padding: 26px 20px 34px;
  text-align: center;
  font-size: 0.74em;
  color: var(--muted);
  border-top: 1px solid var(--border);
}
.lb-footer a { color: var(--accent); text-decoration: none; }

/* ---------------------------------------------------------- الحركات */
.lb-anim { opacity: 0; will-change: transform, opacity; }
.lb-anim.is-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .8s ease var(--anim-delay, 0ms),
              transform .8s cubic-bezier(.22, .8, .3, 1) var(--anim-delay, 0ms),
              filter .8s ease var(--anim-delay, 0ms);
}
.lb-anim--fade { }
.lb-anim--rise { transform: translateY(38px); }
.lb-anim--slide-right { transform: translateX(52px); }
.lb-anim--slide-left { transform: translateX(-52px); }
.lb-anim--zoom { transform: scale(.9); }
.lb-anim--blur { filter: blur(12px); transform: scale(1.02); }
.lb-anim--flip { transform: perspective(900px) rotateX(18deg); transform-origin: top; }

@media (prefers-reduced-motion: reduce) {
  .lb-anim { opacity: 1 !important; transform: none !important; filter: none !important; }
  .lb-scroll-hint i, .lb-music.is-playing { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------- الموبايل */
@media (max-width: 640px) {
  .lb { padding-inline: 18px; }
  .lb-heading { font-size: calc(1.7em * var(--font-scale)); }
  .lb-details--cards { grid-template-columns: 1fr; }
  .lb-gallery--grid { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
  .lb-gallery--masonry { columns: min(var(--cols, 3), 2); }
  .lb-hosts { grid-template-columns: 1fr; }
  .lb-countdown--circles .lb-cd-unit { width: 84px; height: 84px; }
  .lb-cd-unit { min-width: 66px; padding: 12px 8px; }
  /* على الشاشات الضيقة تصبح خيارات الحضور صفوفاً كاملة بدل أن يلتف نصها */
  .lb-choices { flex-direction: column; align-items: stretch; }
  /* بقى صف كامل، فالسطر الواحد مش لازم — وخيار طويل مع ‎nowrap‎ كان
     بيخرج نصّه برّه الكبسولة بدل ما يلتف. */
  .lb-choices label { justify-content: center; white-space: normal; }
  /* الحقول بتاخد خط القالب (‎font: inherit‎)، والقوالب اللي مقياس
     خطها صغير بتنزّل الحقل تحت 16px — وسفاري على الآيفون ساعتها
     بيزوّم على الصفحة أول ما تدوس على الحقل ويسيبها مزوّمة، فالدعوة
     بتبان مكسورة. القاع 16px بيمنع الزووم من غير ما يكبّر الخط في
     القوالب اللي أصلاً فوق كده. */
  .lb-field input:not([type="radio"]):not([type="checkbox"]),
  .lb-field textarea, .lb-field select { font-size: max(16px, 1em); }
}

/* ---------------------------------------------------------- الطباعة */
@media print {
  .lb-music, .lb-scroll-hint, .lb-intro, .lb-btn { display: none !important; }
  .lb-stage { box-shadow: none; }
  .lb-anim { opacity: 1 !important; transform: none !important; }
}

/* ================================================================
   مواضع النصوص — الإزاحة اللي المستخدم بيعملها بالماوس في المحرر
   ================================================================
   المسرح هو حاوية القياس، والإزاحات بوحدة cqw (١٪ من عرضه). transform
   مش بيأثر على تدفق العناصر، فتحريك عنصر مابيزحزحش اللي تحته. */

.lb-stage { container-type: inline-size; }

[data-move] {
  /* الصفر ده مهم: متغيّرات CSS **بتورَّث**. من غيره، لما تحرّك عنصر
     أب إزاحته بتنزل بالوراثة لكل عنصر ‎[data-move]‎ جوّاه، والابن
     بيطبّقها تاني في ‎transform‎ بتاعه — فالابن بيتحرك ضِعف الأب.
     (قياس حي: الأب ٤٠px والاسم اللي جوّاه ٨٠px.) القاعدة اللي بيولّدها
     ‎layout_css‎ معرّفها ‎#block [data-move="slot"]‎ فخصوصيتها أعلى
     وبتكسب على العنصر المقصود لوحده، والسحب الحي inline فبيكسب برضو. */
  --dx: 0px;
  --dy: 0px;
  transform: translate(var(--dx, 0), var(--dy, 0));
}

/* أثناء السحب داخل المحرر */
.lb-doc--editing [data-move] { cursor: default; }
.lb-doc--editing [data-move]:not([contenteditable="true"]):hover {
  outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 4px;
}
.lb-doc--editing [data-move].lb-dragging {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
  cursor: grabbing;
  user-select: none;
}

/* خطوط الإرشاد اللي بتظهر وقت المحاذاة */
.lb-guide {
  position: fixed; z-index: 2147483000; pointer-events: none;
  background: var(--accent); opacity: .85;
}
.lb-guide--v { width: 1px; top: 0; bottom: 0; }
.lb-guide--h { height: 1px; left: 0; right: 0; }

.lb-drag-badge {
  position: fixed; z-index: 2147483001; pointer-events: none;
  padding: 4px 9px; border-radius: 999px;
  background: #17130f; color: #fff;
  font: 500 11px/1 ui-monospace, monospace;
  direction: ltr; white-space: nowrap;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6);
}

/* ترحيب الضيف في رابطه الشخصي */
.lb-guest-hi {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--accent-20, rgba(0, 0, 0, .06));
  color: var(--accent);
  font-size: 14px;
  text-align: center;
}

/* اسم الضيف في الشاشة الافتتاحية لما يفتح رابطه الشخصي */
.lb-intro-name {
  margin: 6px 0 10px;
  font-family: var(--intro-font, var(--font-heading, inherit));
  font-size: clamp(22px, 5vw, 34px);
  color: var(--accent);
}

/* ---- الشاشة الافتتاحية: خلفية صورة أو فيديو ---- */
.lb-intro { background-image: var(--intro-bg, none); background-size: cover; background-position: center; }
.lb-intro--video { overflow: hidden; }
.lb-intro-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.lb-intro--video .lb-intro-inner { position: relative; z-index: 2; }
.lb-intro .lb-intro-inner .lb-kicker,
.lb-intro .lb-intro-inner .lb-intro-name { color: var(--intro-item-color, var(--intro-color, var(--accent))); }
.lb-intro .lb-intro-inner .lb-body { color: var(--intro-item-color, var(--intro-color, var(--muted))); }
.lb-intro--video .lb-intro-inner,
.lb-intro--video .lb-intro-inner .lb-kicker,
.lb-intro--video .lb-intro-inner .lb-body,
.lb-intro--video .lb-intro-inner .lb-intro-name { color: var(--intro-item-color, var(--intro-color, #fff)); }

/* ------------------------------------------------ قسم HTML مخصص/مستورد */
/* .lb-inner فليكس بمحاذاة وسط، فأي ابن بيتقلّص لعرض محتواه. القالب
   المستورد متصمّم على عرض الصفحة كامل، فبناخد العرض المتاح كله. */
.lb-custom { width: 100%; }
/* الستايل المستورد بيتحصر بمعرّف القسم، وممكن يبقى فيه عناصر بعرض
   أكبر من الحاوية — نمنعها تعمل تمرير أفقي للصفحة كلها */
[data-block-type="custom_html"] {
  overflow-x: clip;
  overflow-y: visible;
}
.lb--custom_html .lb-inner,
.lb--custom_html .lb-custom {
  overflow: visible !important;
}
/* بعض القوالب المستوردة تضع ارتفاعاً ثابتاً على الغلاف الداخلي؛ عند تغيير
   ارتفاع القسم يصبح النص المنقول أسفله مقصوصاً. نربط الغلاف والجذر الأول
   بالارتفاع المحفوظ ونترك الارتفاع التلقائي للمحتوى. */
.lb--has-section-height > .lb-inner,
.lb--has-section-height .lb-custom,
.lb--has-section-height .lb-custom > :first-child {
  min-height: var(--block-section-height) !important;
  height: auto !important;
  overflow: visible !important;
}

/* بعض الخطوط المزخرفة تتجاوز صندوق Tilda بضع بكسلات؛ لا نقصّ أطراف الحروف. */
.lb-custom .t396__elem[data-elem-type="text"],
.lb-custom .t396__elem[data-elem-type="text"] .tn-atom {
  overflow: visible !important;
}



/* -------------------------------- تلميحات التحرير داخل الأقسام المستوردة */
.lb-doc--editing .lb-custom [data-lb-text]:hover {
  outline: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 3px; cursor: text;
}
.lb-doc--editing .lb-custom [data-move]:not([data-lb-text]):hover {
  outline: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 3px; cursor: grab;
}
.lb-doc--editing .lb-custom [data-move].lb-dragging { cursor: grabbing; }

/* ---- عناصر «كود متقدّم»: إطار واحد بس، وعلى قد العنصر

   كل عنصر مرقّم بيرسم إطار عند الـ‎hover‎، و‎:hover‎ بتتحقق على كل
   الآباء كمان — فكارت واحد جوّه ٣ حاويات كان بيوريك ٣ إطارات متداخلة
   مرة واحدة. ‎:has()‎ بتسيب الإطار للعنصر **الأعمق** اللي الماوس
   عليه بس، والحاوية نفسها (‎.lb-extra-html‎) مالهاش إطار أصلاً. */
/* كود الشاشة الافتتاحية (‎.lb-intro-extra‎) بياخد نفس المعاملة بالظبط:
   عناصره بتتّرقّم وتتحدّد وتتسحب زي عناصر مربع «كود متقدّم». */
.lb-doc--editing .lb-extra-html:hover,
.lb-doc--editing .lb-extra-html.lb-dragging,
.lb-doc--editing .lb-extra-html [data-move]:hover:has([data-move]:hover),
.lb-doc--editing .lb-intro-extra:hover,
.lb-doc--editing .lb-intro-extra.lb-dragging,
.lb-doc--editing .lb-intro-extra [data-move]:hover:has([data-move]:hover) {
  outline: none !important;
}
/* ‎!important‎ لأن وحدة النص بياخد ‎style="outline:none"‎ من المحرر
   نفسه (عشان مؤشّر الكتابة مايرسمش إطار المتصفح) — والـinline بيكسب
   أي قاعدة من غيرها. */
.lb-doc--editing .lb-extra-html [data-move]:hover:not(:has([data-move]:hover)),
.lb-doc--editing .lb-intro-extra [data-move]:hover:not(:has([data-move]:hover)) {
  outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent) !important;
  outline-offset: 3px;
  cursor: grab;
}
.lb-doc--editing .lb-extra-html [data-move].lb-dragging,
.lb-doc--editing .lb-intro-extra [data-move].lb-dragging {
  outline: 1px solid var(--accent) !important;
  outline-offset: 3px;
  cursor: grabbing;
}

/* العنصر المحدَّد جوّه قسم مستورد */
.lb-doc--editing .lb-el-picked {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}
/* العنصر وانت بتكتب جوّاه */
.lb-doc--editing .lb-el-typing {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent);
}
.lb-doc--editing .lb-custom [data-lb-text]:hover { cursor: default; }

/* الصورة اللي هتتبدّل مع اللي بتسحبها لو سِبت الماوس دلوقتي.
   لازم تبان قبل الإفلات — تبديل بيحصل من غير ما تتوقّعه أسوأ من
   ميزة ناقصة، والصور في الشبكة بتبقى جنب بعض. */
.lb-doc--editing .lb-el-swap {
  outline: 3px dashed var(--accent) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ------------------------------------------------ زر تشغيل فيديو الافتتاحية */
.lb-intro-play {
  position: absolute; inset: 0; margin: auto; z-index: 4;
  inline-size: 88px; block-size: 88px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%;
  background: var(--intro-play-bg, rgba(20, 18, 16, .5));
  color: var(--intro-item-color, #fff);
  backdrop-filter: blur(4px); cursor: pointer;
  transition: none;
}
.lb-intro-play--plain,
.lb-intro-play--plain:hover,
.lb-intro-play--plain:focus,
.lb-intro-play--plain:active,
.lb-intro-play--no-effects,
.lb-intro-play--no-effects:hover,
.lb-intro-play--no-effects:focus,
.lb-intro-play--no-effects:active {

  animation: none !important;
  transition: none !important;
  /* لا نلغي transform الأساسي؛ فهو يحمل إزاحة السحب المحفوظة.
     إلغاء التأثير هنا يجب ألا يمنع تحريك الزر. */
  transform: translate(var(--intro-item-x, 0vw), var(--intro-item-y, 0vh)) !important;
  box-shadow: none !important;
  filter: none !important;
}
.lb-intro-play--plain {
  inline-size: fit-content; block-size: fit-content;
  max-inline-size: min(88vw, 520px); padding: 5px 9px;
  border: 0; border-radius: 0; background: transparent;
  box-shadow: none; backdrop-filter: none; appearance: none;
  display: inline-block; color: var(--intro-item-color, #fff);
  text-align: center; white-space: normal; cursor: pointer;
}
.lb-intro-play--plain:focus-visible {
  outline: 1px dashed currentColor; outline-offset: 4px;
}

.lb-intro-play svg { inline-size: 34px; block-size: 34px; margin-inline-start: 5px; }

/* لو المستخدم كتب نص على الزر بيتحوّل من دايرة لكبسولة.
   inline-size:auto لازم تيجي هنا لأن الدايرة فوق مثبّتة ٨٨px — من
   غيرها الكلام كان هيتكرمش جوّه ٨٨px ويخرج بره الحدود.
   والـmax-inline-size عشان نص طويل ما يخرجش من الشاشة على الموبايل. */
.lb-intro-play--label {
  inline-size: auto; block-size: auto;
  max-inline-size: min(86vw, 420px);
  padding: 15px 26px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 11px;
  /* inset:0 + margin:auto بيوسّط العنصر — بيفضل شغّال مع العرض التلقائي
     طالما العرض محدود بـmax-inline-size */
  inset-inline: 0; inset-block: 0;
  inline-size: fit-content; block-size: fit-content;
}
.lb-intro-play--label svg { inline-size: 24px; block-size: 24px; margin-inline-start: 0; }
.lb-intro-play-text {
  font: inherit; font-size: 15px; font-weight: 600;
  line-height: 1.35; letter-spacing: .2px;
  /* الكلام لو طويل ينزل سطر بدل ما يمدّ الزر لبره الشاشة */
  white-space: normal; text-align: center;
}
/* نبضة خفيفة تلفت النظر إن فيه حاجة تتضغط */
@media (prefers-reduced-motion: no-preference) {
  .is-awaiting-play .lb-intro-play { animation: lb-pulse 2.4s ease-in-out infinite; }
  @keyframes lb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .34); }
    70%      { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
  }
}
/* المحتوى بيتخبّى لحد ما الفيديو يشتغل — زر التشغيل في نص الشاشة
   والنص كان بيتراكب معاه ويبقى الاتنين مش مقروءين */
.is-awaiting-play .lb-intro-inner {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.lb-intro-inner { transition: opacity .45s ease .15s; }
@media (prefers-reduced-motion: reduce) { .lb-intro-inner { transition: none; } }
.lb-intro:not(.is-awaiting-play) .lb-intro-play { display: none; }

/* ------------------------------------------------ تصريح الدخول بعد الرد */
.lb-pass {
  margin-block-start: 22px; padding: 20px 18px; text-align: center;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface);
}
.lb-pass-title {
  margin: 0 0 12px; font-size: 13px; letter-spacing: 2px; color: var(--accent);
}
.lb-pass-qr {
  inline-size: min(220px, 70%); block-size: auto; display: block;
  margin-inline: auto; background: #fff; padding: 10px; border-radius: 12px;
  border: 1px solid var(--border);
}
.lb-pass-code {
  font-family: ui-monospace, "SFMono-Regular", monospace; direction: ltr;
  font-size: 19px; font-weight: 700; letter-spacing: 1.4px; margin: 12px 0 4px;
}
.lb-pass-note { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.lb-pass-actions { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------ زرار لغة الدعوة */
/* بيظهر بس لما يكون فيه نسخة إنجليزية مكتوبة. مكانه مقابل زر
   الموسيقى (اللي في ‎inset-inline-end‎) عشان ما يركبوش على بعض. */
.lb-lang {
  /* فوق الشاشة الافتتاحية (‎z-index: 90‎) عشان الضيف يقدر يبدّل اللغة
     من أول لحظة، قبل ما يفتح الدعوة أصلاً. */
  position: fixed; z-index: 95;
  inset-block-start: 16px; inset-inline-start: 16px;
  min-inline-size: 42px; block-size: 42px;
  padding-inline: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font: 600 13px/1 var(--font-body, inherit); letter-spacing: .5px;
  text-decoration: none;
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .45);
  transition: transform .18s ease, background .18s ease;
}
.lb-lang:hover { transform: translateY(-1px); background: var(--accent-10); }
.lb-lang:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* اللغة التانية بتتجاب في الخلفية بعد التحميل، فالضغطة بتبقى فورية.
   بس لو الشبكة بطيئة الضيف لازم يشوف إن ضغطته اتسجّلت — من غير ده كان
   بيدوس تاني وتالت ويفتكر إن الزرار مش شغّال. */
.lb-lang[aria-busy="true"] { opacity: .55; pointer-events: none; cursor: progress; }
/* الزرار بيفضل ظاهر فوق الافتتاحية كمان: الضيف اللي بيقرا إنجليزي
   لازم يلاقي التبديل من أول شاشة، مش بعد ما يفتح الدعوة.
   مستمع «اضغط في أي حتة» متربط على ‎.lb-intro‎ نفسها، والزرار أخوها
   مش ابنها — فالضغط عليه مابيفتحش الدعوة بالغلط. */
.lb-intro:not(.is-open) ~ .lb-lang {
  /* خلفية الافتتاحية ممكن تكون صورة أو فيديو — نضبّب اللي ورا الزرار
     عشان يفضل مقروء فوق أي حاجة. */
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 480px) {
  .lb-lang { inset-block-start: 12px; inset-inline-start: 12px; block-size: 38px; }
}

/* المحرر: أوقف Hover القالب الذي يحرّك العنصر بعد تغيير موضعه،
   لكن اترك إطار التحديد .is-selected و .lb-el-picked كما هو. */
.lb-doc--editing .lb:hover:not(.is-selected),
.lb-doc--editing .lb-custom :where(*):hover:not(.lb-el-picked):not(.lb-el-typing) {
  outline: none !important;
  outline-offset: 0 !important;
}
.lb-doc--editing .lb-custom :where(*):hover {
  transition: none !important;
  animation: none !important;
  filter: none !important;
}
.lb-doc--editing .lb-custom [data-move]:hover {
  transform: translate(
    calc(var(--dx, 0cqw) + var(--group-dx, 0cqw)),
    calc(var(--dy, 0cqw) + var(--group-dy, 0cqw))
  ) !important;
}
.lb-doc--editing .lb-custom :where(*):hover:not(.lb-el-picked):not(.lb-el-typing) {
  cursor: default !important;
}

/* نصوص الفيديو في المحرر: امنع Hover القالب من تغيير مكان النص أو شكله.
   إطار التحديد والإطار أثناء السحب يظلان ظاهرين كما هما. */
.lb-doc--editing .lb-video-wrap [data-video-text]:hover,
.lb-doc--editing .lb [data-section-text]:hover {
  transform: translate(-50%, -50%) !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}
.lb-doc--editing .lb-video-wrap [data-video-text]:hover,
.lb-doc--editing .lb [data-section-text]:hover {
  cursor: grab;
}

/* حدود القسم ومقبض تغيير الحجم — تظهر فقط عندما يطلبها المصمم من المحرر. */
.lb-doc--editing .lb-section-bounds {
  position: absolute;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  border: 2px dashed color-mix(in srgb, var(--accent) 82%, #fff 18%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  box-sizing: border-box;
}
.lb-doc--editing .lb-section-bounds__label {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font: 600 11px/1.4 system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
}
.lb-doc--editing .lb-section-resize-handle {
  position: absolute;
  inset-block-end: 7px;
  inset-inline-start: 50%;
  width: 76px;
  height: 14px;
  transform: translateX(-50%);
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 1px 5px rgb(0 0 0 / 28%);
  cursor: ns-resize;
  pointer-events: auto;
  touch-action: none;
}
.lb-doc--editing .lb-section-resize-handle::after {
  content: "↕";
  position: absolute;
  inset: -4px 0 0;
  color: #fff;
  font: 700 14px/1 system-ui, sans-serif;
  text-align: center;
}
.lb-doc--editing .lb-section-resize-handle.is-dragging {
  background: color-mix(in srgb, var(--accent) 72%, #000 28%);
}

/* تنبيه الباقة داخل المحرر لا يحجب اختيار أو سحب القسم تحته. */

.lb-doc--editing .lb-gate {
  pointer-events: none;
}

/* القوالب المستوردة التي تشغّل JavaScript الأصلي تحتاج عرض الصفحة الكامل؛
   كارت الدعوة 720px كان يغيّر حسابات Tilda Zero ويقص العناصر من اليمين. */
.lb-stage--runtime {
  max-width: none;
  margin-inline: 0;
  box-shadow: none;
  overflow: visible;
  isolation: auto;
}
.lb-stage--runtime > .lb {
  margin: 0;
  padding-inline: 0;
  overflow: visible;
  background: transparent;
}
.lb-stage--runtime > .lb > .lb-inner {
  max-width: none;
  width: 100%;
  gap: 0;
}
.lb-stage--runtime .lb-custom {
  width: 100%;
}

/* خرائط القوالب المستوردة: التفاعل الحقيقي خارج المحرر فقط.
   داخل المحرر يجب أن يصل الضغط والسحب إلى عنصر Tilda الأب للتحريك. */
.lb-doc--editing .lb-stage .tn-elem[data-elem-type="html"] iframe[src*="google.com/maps"],
.lb-doc--editing .lb-stage .tn-elem[data-elem-type="html"] iframe[src*="maps.google"] {
  pointer-events: none !important;
  user-select: none !important;
}
.lb-doc--editing .lb-stage .tn-elem[data-elem-type="html"]:has(iframe[src*="google.com/maps"]),
.lb-doc--editing .lb-stage .tn-elem[data-elem-type="html"]:has(iframe[src*="maps.google"]) {
  cursor: grab !important;
}
.lb-doc--editing .lb-stage .tn-elem[data-elem-type="html"]:has(iframe[src*="google.com/maps"]).lb-dragging,
.lb-doc--editing .lb-stage .tn-elem[data-elem-type="html"]:has(iframe[src*="maps.google"]).lb-dragging {
  cursor: grabbing !important;
}
.lb-doc--editing .lb-stage .tn-elem[data-elem-type="html"]:has(iframe[src*="google.com/maps"]) iframe,
.lb-doc--editing .lb-stage .tn-elem[data-elem-type="html"]:has(iframe[src*="maps.google"]) iframe {
  width: 100% !important;
  height: 100% !important;
}
.lb-stage .tn-elem[data-elem-type="html"]:has(iframe[src*="google.com/maps"]) .tn-atom,
.lb-stage .tn-elem[data-elem-type="html"]:has(iframe[src*="maps.google"]) .tn-atom {
  width: 100%;
  height: 100%;
}
/* نفس الأبعاد في المعاينة العامة والمحرر: خصائص width/height القديمة
   على iframe كانت تتغلب على حجم wrapper المحفوظ فتُخرج الخريطة من الإطار. */
.lb-stage .tn-elem[data-elem-type="html"]:has(iframe[src*="google.com/maps"]) iframe,
.lb-stage .tn-elem[data-elem-type="html"]:has(iframe[src*="maps.google"]) iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
}
.lb-stage .tn-elem[data-elem-type="html"]:has(iframe[src*="google.com/maps"]) > .tn-atom > [data-move],
.lb-stage .tn-elem[data-elem-type="html"]:has(iframe[src*="maps.google"]) > .tn-atom > [data-move] {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}


/* ================================================================
   كود متقدّم: كانفس ورسم تفاعلي
   ‎.lb-extra-html‎ عرضه ‎max-content‎ عشان الكروت الصغيرة تفضل متوسّطة.
   لكن أي رسم بيتمدّ على عرض القسم (كارت خدش، رسم بالإصبع) لازم ياخد
   العرض كله — و‎canvas‎ من غير عرض محدَّد بيرجع ٣٠٠px الافتراضية،
   فالحاوية بتتقلّص عليها و‎getBoundingClientRect()‎ بترجّع مقاس غلط.
   ================================================================ */
.lb-extra-html:has(canvas),
.lb-extra-html:has(.lb-full),
.lb-extra-html.lb-full { width: 100%; }

/* الكانفس عنصر سطري بطبيعته، فبيسيب فراغ تحته وبيبوّظ حساب الارتفاع */
.lb-extra-html canvas,
.lb-custom canvas,
.lb-intro-extra canvas { display: block; max-width: 100%; }

/* الرسم بالإصبع لازم ياخد اللمسة قبل ما الصفحة تسحب.
   المصمّم يقدر يكتب ‎touch-action‎ بنفسه ودي بتغلبها؛ دي بس القيمة
   المعقولة الافتراضية لأي كانفس جوّه كود متقدّم. */
.lb-extra-html canvas,
.lb-intro-extra canvas {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* الكانفس بياخد اللمسة في كل الأوضاع — المحرر والمعاينة والدعوة
   المنشورة. سحب العنصر جوّه المحرر بيتوقف من ‎bindSlotDrag‎ في
   ‎editor.js‎ لما تكون الضغطة على كانفس، عشان الضغطة الواحدة تعمل
   حاجة واحدة: تخربش. */
.lb-extra-html canvas,
.lb-custom canvas,
.lb-intro-extra canvas { pointer-events: auto; }