/* «شرفة الياسمين» — هنديّ كلاسيكي: عنّابي اللهنكا، زردوزي ذيلها، عاج الباب ورخام الشرفة.
   نسخة عامة من تصميم دعوة VIP (public/custom/jasmine-terrace) بأصولها المستقلة: أي تعديل هنا لا يمسّها. */
:root {
  --jt-sindoor: #6f1424;
  --jt-sindoor-deep: #4c0c19;
  --jt-zari: #d8b16a;
  --jt-zari-pale: #f1dfb0;
  --jt-zari-ink: #8a6429;
  --jt-ivory: #fbf2e2;
  --jt-ink: #4d1a20;
  --jt-ink-soft: #7c5548;
  --jt-names: "Gulzar", "Amiri", serif;
  --jt-text: "Amiri", "Noto Naskh Arabic", serif;
  --jt-w: min(100vw, 500px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--jt-sindoor-deep); }
body {
  margin: 0;
  font-family: var(--jt-text);
  font-size: 17.5px;
  line-height: 1.95;
  color: var(--jt-ink);
  text-align: center;
  background: var(--jt-sindoor-deep) url("assets/butti.webp");
  -webkit-font-smoothing: antialiased;
}
body.jt-locked { overflow: hidden; height: 100svh; }
img, video, canvas { display: block; max-width: 100%; }
p, h1, h2, ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
a { color: inherit; }

/* ═══ الدخول ═══ */
.jt-gate {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  cursor: pointer;
  background: #efdcb8;
  outline: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 1.5s ease;
}
.jt-stage {
  position: absolute;
  inset: 0 auto 0 50%;
  width: min(100%, 62.5vh);
  transform: translateX(-50%);
  overflow: hidden;
}
/* الملصق خلفية الغلاف الذي يحمل الفيديو، لا سمة الفيديو وحدها: سفاري يُسقط poster لحظة التشغيل قبل أن
   يجهز أول إطار، فكانت خلفية الصفحة البيج تومض ملء الشاشة ثم يقفز الباب. هنا يبقى الباب تحته دائماً */
.jt-film {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: url("assets/door.webp") center / cover no-repeat;
  transform-origin: 50% 52%;
  transition: transform .09s ease-out;
  will-change: transform;
}
.jt-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.jt-gate.is-knocked .jt-film { transform: scale(1.014); }
.jt-gate.is-playing .jt-film { transition: none; animation: jt-through 6.2s cubic-bezier(.62, .02, .86, .5) forwards; }
@keyframes jt-through {
  0% { transform: scale(1); }
  52% { transform: scale(1.1); }
  100% { transform: scale(2.7); }
}
.jt-light {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 52%, #fffdf6 0 34%, #fff5de 70%, #ffeccb 100%);
}
.jt-gate.is-playing .jt-light { animation: jt-bloom 6.2s linear forwards; }
@keyframes jt-bloom {
  0%, 62% { opacity: 0; }
  100% { opacity: 1; }
}
.jt-knocks {
  position: absolute;
  inset-inline: 0;
  bottom: calc(env(safe-area-inset-bottom) + 15vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  pointer-events: none;
  transition: opacity .4s;
}
.jt-hint {
  padding: 7px 24px 9px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--jt-zari-pale);
  background: rgba(var(--jt-sindoor-deep-rgb, 76, 12, 25), 0.86);
  box-shadow: 0 0 0 1px rgba(var(--jt-zari-rgb, 216, 177, 106), 0.75), 0 8px 24px rgba(61, 34, 10, .3);
  animation: jt-call 2.4s ease-in-out infinite;
}
@keyframes jt-call {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--jt-zari-rgb, 216, 177, 106), 0.75), 0 0 0 0 rgba(var(--jt-zari-rgb, 216, 177, 106), 0.55); }
  55% { box-shadow: 0 0 0 1px rgba(var(--jt-zari-rgb, 216, 177, 106), 0.75), 0 0 0 11px rgba(216, 177, 106, 0); }
}
.jt-dots { display: flex; gap: 13px; }
.jt-dots i {
  width: 13px;
  height: 13px;
  border: 1.6px solid var(--jt-zari-pale);
  border-radius: 50%;
  background: rgba(var(--jt-sindoor-deep-rgb, 76, 12, 25), 0.62);
  box-shadow: 0 2px 8px rgba(61, 34, 10, .4);
  transition: transform .18s, background-color .18s;
}
.jt-dots i.is-hit { background: var(--jt-zari); transform: scale(1.28); }
.jt-gate.is-opening .jt-knocks { opacity: 0; }
.jt-gate.is-opening .jt-hint { animation: none; }
/* أثر الدقّة في موضع الإصبع */
.jt-ring {
  position: fixed;
  z-index: 41;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 2px solid var(--jt-zari-pale);
  border-radius: 50%;
  pointer-events: none;
  animation: jt-ring .7s ease-out forwards;
}
@keyframes jt-ring {
  from { opacity: .95; transform: scale(.4); }
  to { opacity: 0; transform: scale(3.2); }
}
body.is-landed .jt-gate { opacity: 0; pointer-events: none; }

/* على الشاشة العريضة الباب عمودٌ، وجانباه مخمل الصفحة نفسه */
@media (min-aspect-ratio: 3 / 4) {
  .jt-gate { background: var(--jt-sindoor-deep) url("assets/butti.webp"); }
}

/* ═══ الصفحة ═══ */
#invite {
  position: relative;
  width: var(--jt-w);
  margin-inline: auto;
  overflow: hidden;
  overflow-wrap: anywhere;
  background: var(--jt-ivory) url("assets/marble.jpg") center top / 100% auto;
  box-shadow: 0 0 60px rgba(0, 0, 0, .34);
}

/* ═══ الواجهة ═══ */
.jt-hero { position: relative; background: #f6c9a8; }
.jt-canopy {
  position: relative;
  z-index: 3;
  padding: calc(env(safe-area-inset-top) + 16px) 18px 4px;
  color: var(--jt-zari-pale);
  background:
    linear-gradient(180deg, rgba(36, 4, 11, .5), transparent 46%),
    url("assets/velvet.jpg") center / 400px;
  background-color: #5d101f;
}
.jt-kicker {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--jt-zari);
}
.jt-names {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: .32em;
  white-space: nowrap;
  font: 400 var(--jt-fs, clamp(33px, 10.6vw, 49px))/1.86 var(--jt-names);
  color: var(--jt-zari-pale);
  text-shadow: 0 1px 0 rgba(36, 4, 11, .85), 0 0 18px rgba(var(--jt-zari-pale-rgb, 241, 223, 176), 0.22);
}
.jt-names.is-wrap { flex-direction: column; align-items: center; gap: 0; line-height: 1.66; }
.jt-names .jt-amp {
  font: italic 400 .74em/1 var(--jt-text);
  color: var(--jt-zari);
}
.jt-hero-date {
  margin-top: -3px;
  padding-bottom: 6px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--jt-zari-pale);
}
/* ثلاثة أقواس: القمّة الوسطى على محور الصفحة، والفانوس يتدلّى من الفُرجة الثانية */
.jt-jhalar {
  position: absolute;
  top: calc(100% - 1px);
  inset-inline: 0;
  aspect-ratio: 5.6 / 1;
  background: url("assets/jhalar.webp") center top / 33.334% 100% repeat-x;
  filter: drop-shadow(0 7px 8px rgba(49, 18, 8, .42));
}
.jt-tassel {
  position: absolute;
  top: 90%;
  width: 4.1%;
  aspect-ratio: 120 / 330;
  margin-inline-start: -2.05%;
  background: url("assets/tassel.webp") center top / 100% 100% no-repeat;
  transform-origin: 50% 0;
  animation: jt-sway 4.2s ease-in-out infinite alternate;
}
.jt-tassel:nth-child(1) { inset-inline-start: 16.667%; animation-delay: -1.3s; }
.jt-tassel:nth-child(2) { inset-inline-start: 50%; animation-delay: -.4s; }
.jt-tassel:nth-child(3) { inset-inline-start: 83.333%; animation-delay: -2.4s; }
@keyframes jt-sway {
  from { transform: rotate(-3.4deg); }
  to { transform: rotate(3.4deg); }
}
.jt-photo { position: relative; overflow: hidden; }
.jt-photo img { width: 100%; height: auto; }
.jt-glow {
  position: absolute;
  left: 67%;
  top: 10.8%;
  width: 46%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 140, .62), rgba(255, 196, 110, .16) 42%, transparent 68%);
  mix-blend-mode: screen;
  animation: jt-flame 3.4s ease-in-out infinite;
}
@keyframes jt-flame {
  0%, 100% { opacity: .62; }
  36% { opacity: 1; }
  58% { opacity: .74; }
  78% { opacity: .94; }
}
.jt-photo.is-uploaded .jt-glow { display: none; }
#petals { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* هبوط الواجهة بعد الباب: الصورة تستقرّ والكنار ينزل من فوق، والأسماء تظهر عليه */
body:not(.is-landed) .jt-canopy { transform: translateY(-112%); }
body:not(.is-landed) .jt-photo img { transform: scale(1.09); }
body:not(.is-landed) .jt-names,
body:not(.is-landed) .jt-kicker,
body:not(.is-landed) .jt-hero-date { opacity: 0; }
.jt-canopy { transition: transform 1.5s cubic-bezier(.2, .85, .28, 1.03) .35s; }
.jt-photo img { transition: transform 3.4s cubic-bezier(.2, .7, .3, 1); }
.jt-kicker, .jt-names, .jt-hero-date { transition: opacity 1.2s ease 1.35s; }

/* ═══ الشريط والأرضيات ═══ */
.jt-zari {
  height: calc(var(--jt-w) * 96 / 840);
  background: url("assets/zari.webp") center / auto 100% repeat-x;
  filter: drop-shadow(0 3px 5px rgba(49, 18, 8, .28));
}
.jt-marble { position: relative; }
.jt-velvet {
  position: relative;
  color: var(--jt-zari-pale);
  background: url("assets/butti.webp") center top / 124px, url("assets/velvet.jpg") center / 400px;
  background-color: #5d101f;
}

/* ═══ لوحة الدعوة ═══ */
.jt-letter { padding-bottom: 46px; }
.jt-vine {
  position: absolute;
  top: calc(var(--jt-w) * 96 / 840 - 8px);
  z-index: 2;
  width: 56%;
  height: auto;
  pointer-events: none;
}
.jt-vine--a { left: 0; }
.jt-vine--b { right: 0; transform: scaleX(-1); }
.jt-panel { --jt-rule: calc((var(--jt-w) - 36px) * .014); position: relative; margin: 34px 18px 0; }
.jt-arch { width: 100%; height: auto; }
.jt-panel-body {
  margin-top: -1px;
  padding: 0 24px 34px;
  border: 0 double var(--jt-zari-ink);
  border-width: 0 var(--jt-rule) var(--jt-rule);
  background: #fff9ee;
}
.jt-sprig {
  width: 74px;
  height: auto;
  margin: calc(var(--jt-w) * -.19) auto 12px;
  position: relative;
}
.jt-verse {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.9;
  color: var(--jt-sindoor);
  text-wrap: balance;
}
.jt-poem { margin-top: 12px; font-size: 18px; color: var(--jt-ink); text-wrap: pretty; }
.jt-poem p + p { margin-top: 10px; }
.jt-couple { margin-top: 18px; }
.jt-person b {
  display: block;
  font: 400 clamp(29px, 9.2vw, 40px)/1.86 var(--jt-names);
  color: var(--jt-sindoor);
}
.jt-person small {
  display: block;
  margin-top: -4px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--jt-ink-soft);
}
.jt-couple-amp {
  display: block;
  margin: 12px 0 2px;
  font: italic 400 26px/1 var(--jt-text);
  color: var(--jt-zari-ink);
}
.jt-sub { margin-top: 18px; font-size: 18px; color: var(--jt-ink); text-wrap: balance; }

/* ═══ العدّاد ═══ */
.jt-script {
  font: 400 26px/2 var(--jt-names);
  color: var(--jt-sindoor);
}
.jt-velvet .jt-script { color: var(--jt-zari-pale); padding: 30px 16px 6px; }
.jt-arcade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  padding: 0 16px 34px;
}
.jt-niche {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  aspect-ratio: 200 / 280;
  padding-bottom: 13%;
  color: var(--jt-sindoor);
  background: url("assets/niche.svg") center / 100% 100% no-repeat;
}
.jt-niche b { font-size: clamp(25px, 8vw, 34px); line-height: 1.2; }
.jt-niche span { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--jt-ink-soft); }

/* ═══ التفاصيل ═══ */
.jt-details { padding: 40px 20px 46px; }
.jt-block + .jt-block, .jt-lotus + .jt-block { margin-top: 12px; }
#program, #notes, #contact { margin-top: 38px; }
.jt-date {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  max-width: 340px;
  margin: 6px auto 2px;
}
.jt-date-side {
  padding-block: 6px;
  border-block: 1.5px solid var(--jt-zari-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--jt-sindoor);
}
.jt-date-day {
  font-size: 66px;
  line-height: 1.1;
  color: var(--jt-sindoor);
}
.jt-line { font-size: 18.5px; line-height: 1.75; }
.jt-soft { font-size: 16px; line-height: 1.7; color: var(--jt-ink-soft); }
.jt-lotus { width: min(74%, 290px); height: auto; margin: 26px auto 8px; }
.jt-venue { font-size: 21px; font-weight: 700; line-height: 1.6; color: var(--jt-sindoor); text-wrap: balance; }
.jt-mapframe {
  overflow: hidden;
  width: 100%;
  max-width: 350px;
  aspect-ratio: 1;
  margin: 14px auto 0;
  border: 5px double var(--jt-zari-ink);
  border-radius: 50% 50% 8px 8px / 30% 30% 8px 8px;
  background: #efe3cc;
}
/* ملصق «فتح في الخرائط» أعلى الإطار يقصّه القوس، وزرّ الخريطة تحته يؤدّي عمله: يُرفع الإطار فوق الحافة */
.jt-mapframe iframe { display: block; width: 100%; height: calc(100% + 64px); margin-top: -64px; border: 0; }
.jt-map {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 24px 9px;
  border-radius: 999px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--jt-zari-pale);
  text-decoration: none;
  background: var(--jt-sindoor);
  box-shadow: inset 0 0 0 1px rgba(var(--jt-zari-rgb, 216, 177, 106), 0.7);
}
.jt-map:focus-visible, .jt-scroll:focus-visible, .jt-contact a:focus-visible { outline: 2px solid var(--jt-zari-ink); outline-offset: 3px; }
.jt-gate:focus-visible .jt-hint { outline: 2px solid var(--jt-zari-pale); outline-offset: 3px; }

.jt-program { list-style: none; max-width: 340px; margin: 6px auto 0; }
.jt-program li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding-block: 9px;
  border-bottom: 1px solid rgba(var(--jt-zari-ink-rgb, 138, 100, 41), 0.32);
  text-align: start;
}
.jt-program li:last-child { border-bottom: 0; }
.jt-program b { font-size: 18.5px; line-height: 1.5; color: var(--jt-sindoor); }
.jt-program span { font-size: 16.5px; line-height: 1.5; color: var(--jt-ink-soft); white-space: nowrap; }

.jt-notes ul {
  list-style: none;
  max-width: 350px;
  margin: 8px auto 0;
  padding: 6px 18px;
  border: 5px double var(--jt-zari-ink);
  background: #fff9ee;
  box-shadow: 0 10px 26px rgba(92, 60, 24, .1);
}
.jt-notes li { padding-block: 10px; font-size: 18px; line-height: 1.75; text-wrap: balance; }
.jt-notes li + li { border-top: 1px solid rgba(var(--jt-zari-ink-rgb, 138, 100, 41), 0.32); }

.jt-contact { font-size: 18px; line-height: 1.8; }
.jt-contact span:not(:empty)::after { content: ": "; }
.jt-contact a { color: var(--jt-sindoor); font-weight: 700; text-decoration: none; }

#rsvpSlot { margin-top: 34px; }
#rsvpSlot:empty { display: none; }

/* ═══ الختام ═══ */
.jt-end { padding-bottom: 40px; }
.jt-peacocks { width: 92%; height: auto; margin: 24px auto 0; }
.jt-closing {
  padding: 2px 20px 0;
  font: 400 27px/2 var(--jt-names);
  color: var(--jt-zari-pale);
  text-wrap: balance;
}
.jt-families { padding: 4px 20px 0; font-size: 17.5px; color: var(--jt-zari-pale); }
.jt-hash { padding: 6px 20px 0; font-size: 17px; color: var(--jt-zari); }

/* ═══ تلميح النزول ═══ */
.jt-scroll {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 18px + var(--bar, 0px));
  transform: translateX(-50%);
  padding: 5px 20px 7px;
  border: 0;
  border-radius: 999px;
  font: 700 15.5px/1.5 var(--jt-text);
  color: var(--jt-zari-pale);
  cursor: pointer;
  background: rgba(var(--jt-sindoor-deep-rgb, 76, 12, 25), 0.84);
  box-shadow: inset 0 0 0 1px rgba(var(--jt-zari-rgb, 216, 177, 106), 0.7), 0 6px 18px rgba(36, 4, 11, .3);
  transition: opacity .5s;
  animation: jt-rise 1.9s ease-in-out infinite alternate;
}
.jt-scroll.is-gone { opacity: 0; pointer-events: none; }
@keyframes jt-rise {
  from { transform: translate(-50%, 0); }
  to { transform: translate(-50%, -6px); }
}

/* ═══ الظهور مع التمرير ═══ */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .3, 1); }
[data-reveal].in { opacity: 1; transform: none; }

/* أقسام المنصّة بلغة التصميم: «احفظ الموعد» لوحةٌ كألواح الباب، والتأكيد والتهاني بخطّ التصميم */
.jt-save {
  max-width: 350px;
  margin: 28px auto 0;
  padding: 8px 16px 20px;
  border: 5px double var(--jt-zari-ink);
  background: #fff9ee;
  box-shadow: 0 10px 26px rgba(92, 60, 24, .1);
}
#saveDate #da3wa-cal { padding: 0; font-family: var(--jt-text); }
#saveDate #da3wa-cal .cal-title, #saveDate #da3wa-cal .cal-top, #saveDate #da3wa-cal .cal-body { display: none; }
#saveDate #da3wa-cal .cal { max-width: none; overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none; }
#saveDate #da3wa-cal .cal-foot { padding: 0; border: 0; }
#saveDate #da3wa-cal .cal-cap { margin: 0 0 12px; font-size: 16px; font-weight: 400; color: var(--jt-ink-soft); }
#saveDate #da3wa-cal .cal-btns { flex-wrap: nowrap; gap: 8px; }
#saveDate #da3wa-cal .cal-btns a {
  flex: 1;
  justify-content: center;
  padding: 6px 8px 8px;
  border-color: var(--jt-sindoor);
  font-size: 16.5px;
  line-height: 1.5;
  font-family: var(--jt-text);
  color: var(--jt-sindoor);
}
#saveDate #da3wa-cal .cal-btns a:first-child { color: var(--jt-zari-pale); background: var(--jt-sindoor); }

.jt-venue-photo {
  width: min(78%, 280px);
  aspect-ratio: 4 / 5;
  margin: 8px auto 14px;
  object-fit: cover;
  border: 5px double var(--jt-zari-ink);
  border-radius: 50% 50% 6px 6px / 32% 32% 6px 6px;
}

#rsvpSlot #da3wa-rsvp, #invite > #da3wa-mem { font-family: var(--jt-text); }
#rsvpSlot #da3wa-rsvp { padding-inline: 0; padding-bottom: 12px; }
#rsvpSlot #da3wa-rsvp h3, #invite > #da3wa-mem h2, #invite > #da3wa-mem h3 { font-weight: 400; line-height: 1.9; }

/* الملاحظة البارزة ملاحظة مهمة: تُقرأ بخطّ النصّ الواضح وبحجم أكبر، لا بنستعليق العناوين (كرار) */
#notes #da3wa-note .hn-kick { font-family: var(--jt-text); font-size: 15.5px; line-height: 1.5; }
#notes #da3wa-note .hn-text { font-family: var(--jt-text); font-size: clamp(23px, 6.4vw, 27px); font-weight: 700; line-height: 1.6; color: var(--jt-sindoor); text-wrap: balance; }

/* الشعار من المحرّر على الكنار فوق الأسماء، يظهر معها */
body:not(.is-landed) #da3wa-initials-logo { opacity: 0; }
.jt-canopy #da3wa-initials-logo { width: min(var(--da3wa-logo-width), 96px); height: min(var(--da3wa-logo-width), 96px); margin: 0 auto 2px; transition: opacity 1.2s ease 1.35s; }

/* الشعار المرفوع بخلفية بيضاء يصير مستطيلاً أبيض فوق المخمل: يوضع على لوحة عاجية مقوّسة كقوس الباب،
   و multiply يذيب بياض الصورة في عاج اللوحة، فيصلح لأي شعار داكن أو شفّاف */
.jt-canopy #da3wa-initials-logo[data-kind="image"] {
  isolation: isolate;
  overflow: hidden;
  width: 86px;
  height: 112px;
  margin-bottom: 6px;
  padding: 14px 10px 8px;
  border: 4px double var(--jt-zari);
  border-radius: 50% 50% 6px 6px / 34% 34% 6px 6px;
  background: #fff9ee;
  box-shadow: 0 6px 16px rgba(36, 4, 11, .4);
}
.jt-canopy #da3wa-initials-logo[data-kind="image"] > img { mix-blend-mode: multiply; }

/* لافتة «دعوة خاصة إلى…» أوّل عنصر في الصفحة: الكتابة تنزل تحتها */
body > div:first-child + .jt-gate ~ #invite .jt-canopy { padding-top: calc(env(safe-area-inset-top) + 56px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}