@font-face{font-family:"Khayal";src:url(/assets/fonts/Khayal.woff2) format("woff2"),url(/assets/fonts/Khayal.ttf) format("truetype");font-display:swap}
/* ===================================================================
   صفحة الدعوة: ألوانها تأتي من الثيم عبر متغيّرات يضبطها invite.js
   =================================================================== */
:root{
  /* قيم محايدة قبل معرفة نمط المناسبة حتى لا يومض لون آخر أثناء التحميل */
  --paper:#FFFFFF; --paper2:#FFFFFF; --white:#FFFFFF;
  --primary:#b8b39a; --primary-d:#8f8a5a; --primary-l:#e0ddcc;
  --gold:#b8b39a; --ink:#2b2b24; --muted:#7a7a6e;
  --e:cubic-bezier(.22,.8,.28,1);
  --s1:12px; --s2:20px; --s3:30px; --s4:44px; --s5:62px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;overscroll-behavior-x:none}
body{
  font-family:'Almarai',sans-serif;color:var(--ink);background:var(--paper);
  overflow-x:hidden;max-width:100%;overscroll-behavior-x:none;touch-action:pan-y pinch-zoom;
}
body.lock{overflow:hidden;height:100%}

#bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--white) 0%,var(--paper) 38%,var(--paper2) 100%)}
#bgart{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.9}
/* الورود تتحرك في طبقة خلف النص (z-index أقل من main).
   الضبابية والشفافية تجعلانها عمقًا في الخلفية، فتمرّ خلف الكلمات
   دون أن تزاحم القراءة. */
#petals{position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.45;filter:blur(.9px)}

/* ── الغلاف ── */
#cover{position:fixed;inset:0;z-index:60;display:grid;place-items:center;text-align:center;
  background:linear-gradient(180deg,var(--white),var(--paper) 50%,var(--paper2));
  transition:opacity .9s var(--e),visibility .9s}
#cover .veil span{position:absolute;top:0;bottom:0;width:52%;
  background:linear-gradient(90deg,var(--white),var(--paper) 60%,var(--paper2));
  box-shadow:0 0 70px rgba(103,83,118,.16);transition:transform 1.3s var(--e)}
#cover .veil .l{left:0}
#cover .veil .r{right:0}
#cover.go .veil .l{transform:translateX(-102%)}
#cover.go .veil .r{transform:translateX(102%)}
#cover.go{opacity:0;visibility:hidden;transition-delay:.6s}
.cin{position:relative;z-index:2;padding:30px;display:flex;flex-direction:column;align-items:center;gap:26px}
.arch{width:200px;height:256px;border:1px solid var(--gold);border-radius:145px 145px 8px 8px;
  display:grid;place-items:center;position:relative}
.arch:before{content:"";position:absolute;inset:9px;border:1px solid var(--primary-l);border-radius:140px 140px 6px 6px}
.arch b{font-family:'Aref Ruqaa',serif;font-size:38px;font-weight:700;color:var(--primary);line-height:1.6}
.ct{font-family:'Aref Ruqaa',serif;font-size:21px;color:var(--primary-d);line-height:1.95}
.ob{font-family:'Almarai',sans-serif;font-weight:700;font-size:15px;color:#fff;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--primary-l));border-radius:999px;padding:15px 42px;
  box-shadow:0 12px 30px rgba(103,83,118,.3);animation:fl 2.8s ease-in-out infinite}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

main{position:relative;z-index:2;max-width:470px;margin:0 auto;padding:0 26px 90px;text-align:center}
section{padding:var(--s5) 0}

/* الظهور التدريجي مع التمرير */
.rev{opacity:0;transform:translateY(26px);filter:blur(3px);
  transition:opacity .95s var(--e),transform .95s var(--e),filter .95s var(--e)}
.rev.in{opacity:1;transform:none;filter:none}
.d1{transition-delay:.11s}.d2{transition-delay:.22s}.d3{transition-delay:.33s}

.hr{width:170px;height:1px;margin:var(--s3) auto;position:relative;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.hr:after{content:"";position:absolute;top:-3px;left:50%;margin-left:-3px;width:6px;height:6px;
  background:var(--primary-l);transform:rotate(45deg)}

.bless{font-family:'Aref Ruqaa',serif;font-size:21px;line-height:2.1;
  background:linear-gradient(100deg,var(--primary-d) 0%,var(--gold) 45%,var(--primary-d) 72%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:230% 100%;animation:sh 8s linear infinite}
@keyframes sh{to{background-position:-230% 0}}

.guest-tag{font-family:'Almarai',sans-serif;font-size:13px;font-weight:300;color:var(--muted);letter-spacing:.06em}
.guest-name{font-family:'Amiri',serif;font-size:26px;font-weight:700;color:var(--primary-d);margin-top:4px}

.lbl{font-size:14.5px;font-weight:300;color:var(--muted);line-height:2.05}
.host{font-family:'Amiri',serif;font-size:20px;font-weight:700;color:var(--primary-d);line-height:1.8;margin-top:var(--s1)}
.amp-s{font-family:'Aref Ruqaa',serif;font-size:17px;color:var(--primary-l);margin:6px 0}
.big{font-family:'Aref Ruqaa',serif;font-size:clamp(46px,15vw,62px);font-weight:700;color:var(--primary);line-height:1.45}
.sub{font-size:13px;font-weight:300;color:var(--muted);margin-top:2px}
.amp-b{font-family:'Aref Ruqaa',serif;font-size:32px;color:var(--primary-l);margin:var(--s1) 0}
.bride-alt{font-family:'Amiri',serif;font-size:22px;font-weight:700;color:var(--primary-d);
  line-height:1.9;margin-top:var(--s2)}
.day{font-size:16px;color:var(--ink);margin-top:6px}
.date{font-size:15px;color:var(--primary-d);margin-top:var(--s2);letter-spacing:.4px}
.date em{font-style:normal;color:var(--gold);font-size:13px;padding:0 9px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:var(--s3)}
.tile{background:rgba(255,255,255,.66);border:1px solid var(--primary-l);border-radius:16px;padding:18px 10px;
  backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;gap:8px}
.tile.w{grid-column:1/-1}
.tile svg{width:25px;height:25px;stroke:var(--primary);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tile .k{font-size:12.5px;font-weight:300;color:var(--muted)}
.tile .v{font-size:15.5px;font-weight:700;color:var(--primary-d)}
.tile .v.ltr{direction:ltr}

.cd{display:flex;justify-content:center;gap:6px;margin-top:var(--s2);direction:ltr;flex-wrap:wrap}
.u{flex:0 0 auto;min-width:54px;background:rgba(255,255,255,.72);border:1px solid var(--primary-l);border-radius:12px;padding:9px 4px}
.u b{display:block;font-family:'Amiri',serif;font-size:22px;color:var(--primary-d);line-height:1.2}
.u span{font-size:11px;font-weight:300;color:var(--muted)}

.btns{display:flex;flex-direction:column;gap:10px;margin-top:var(--s3)}
.btn{display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;cursor:pointer;
  font-family:'Almarai',sans-serif;font-size:14.5px;font-weight:700;padding:15px;border-radius:999px;
  border:1px solid transparent;transition:transform .25s var(--e)}
.btn:active{transform:scale(.97)}
.btn.p{background:linear-gradient(135deg,var(--primary),var(--primary-l));color:#fff;
  box-shadow:0 10px 26px rgba(103,83,118,.26)}
.btn.s{background:rgba(255,255,255,.72);color:var(--primary-d);border-color:var(--primary-l)}
.btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.thanks{font-family:'Aref Ruqaa',serif;font-size:24px;color:var(--primary-d)}
.notes{margin-top:var(--s2);font-size:12.5px;font-weight:300;color:var(--muted);line-height:2.1}
.notes b{font-weight:700;color:var(--primary-d)}

.top,.audio-toggle{position:fixed;z-index:9;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.85);border:1px solid var(--primary-l);color:var(--primary-d);cursor:pointer}
.top{inset-inline-start:14px;bottom:14px;opacity:0;pointer-events:none;transition:opacity .4s}
.top.on{opacity:1;pointer-events:auto}
.audio-toggle{inset-inline-end:14px;bottom:14px;display:none;align-items:center;justify-content:center}
.audio-toggle.show{display:flex}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rev{opacity:1;transform:none;filter:none}
}

/* ── شاشة الانتظار: محايدة بألوان الورق، بلا أي علامة ── */
.gate-screen{position:fixed;inset:0;z-index:80;display:grid;place-items:center;text-align:center;padding:24px;
  background:linear-gradient(180deg,var(--white),var(--paper) 50%,var(--paper2));color:var(--ink);font-family:'Almarai',sans-serif}
.gate-screen[hidden]{display:none}
.gs-inner{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:420px}
.gs-inner[hidden]{display:none}
.gs-spin{width:26px;height:26px;border-radius:50%;border:2px solid var(--primary-l);border-top-color:var(--primary);animation:gsr .9s linear infinite}
@keyframes gsr{to{transform:rotate(360deg)}}
.gs-msg{font-size:14px;color:var(--muted);line-height:1.9;min-height:1em}
/* صفحة الخدمة (بلا مناسبة): هنا فقط تظهر هوية أصيل */
.gate-screen.brand{background:radial-gradient(800px 500px at 80% -10%,rgba(34,211,238,.18),transparent 60%),
             radial-gradient(700px 500px at 0% 100%,rgba(168,85,247,.2),transparent 60%),
             linear-gradient(160deg,#001a4d,#0d0028 60%,#080014);color:#f4f2fb;font-family:'Cairo',sans-serif}
.gs-logo{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(34,211,238,.3))}
.gs-brand{font-weight:800;font-size:18px}
.gs-sub{color:#22d3ee;font-weight:700;font-size:13px;letter-spacing:.04em}
.gs-landing p{font-size:14px;line-height:2;color:#d9d5ea;margin-top:6px}
.gs-btn{background:#22d3ee;color:#061225;font-weight:800;text-decoration:none;border-radius:999px;padding:13px 28px;font-size:14px}
.gs-link{color:#aaa3c4;font-size:12.5px;text-decoration:underline;text-underline-offset:3px}

/* ── سطر الاعتماد أسفل الدعوة، يظهر فقط إن فُعّل للمناسبة ── */
.credit{position:relative;z-index:2;text-align:center;font-family:'Almarai',sans-serif;font-size:11.5px;font-weight:300;
  color:var(--muted);padding:0 20px 28px;opacity:.85}
.credit[hidden],body.lock .credit{display:none}
.credit a{color:var(--primary-d);font-weight:700;text-decoration:none}

/* شاشات ضيقة جدًا */
@media (max-width:360px){
  .u{min-width:58px;padding:10px 4px}
  .u b{font-size:22px}
  main{padding:0 18px 80px}
}

/* ══════════════════════════════════════════════════════════
   نمط الورود المائية (floral): أبيض، أخضر زيتوني، ورود على الحافة
   ══════════════════════════════════════════════════════════ */
html.floral{
  --paper:#FFFFFF; --paper2:#FFFFFF; --white:#FFFFFF;
  --primary:#aca673; --primary-d:#8f8a5a; --primary-l:#d6d2b3;
  --gold:#a5a177; --ink:#151515; --muted:#5f5f55;
}
#floral{display:none}
html.floral #floral{
  display:block; position:fixed; top:0; bottom:0; left:0; z-index:65; pointer-events:none;
  width:min(28vw,250px);
  background:url(/assets/floral/strip.jpg) left top / cover no-repeat;
  /* حافة ناعمة حتى لا يظهر خط قاطع بين الشريط والصفحة */
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
  mask-image:linear-gradient(90deg,#000 88%,transparent);
}
html.floral .cin{padding-left:calc(min(28vw,250px) + 12px)}
html.floral #cover.go ~ #floral{z-index:1}
html.floral #bg{background:#fff}
html.floral #bgart{display:none}
html.floral #petals{opacity:.55;filter:none}
html.floral main{max-width:none;padding:0 16px 90px calc(min(28vw,250px) + 8px);text-align:center}
html.floral main>section{max-width:520px;margin:0 auto}
html.floral #cover{background:#fff}
html.floral #cover .veil span{background:#fff;box-shadow:0 0 60px rgba(143,138,90,.15)}
html.floral .arch{border-color:var(--gold)}
html.floral .arch:before{border-color:var(--primary-l)}
html.floral .ob{background:linear-gradient(135deg,var(--primary),var(--primary-l));box-shadow:0 12px 30px rgba(143,138,90,.25)}
html.floral .tile{background:rgba(255,255,255,.75);border-color:var(--primary-l)}
html.floral .u{background:rgba(255,255,255,.8);border-color:var(--primary-l)}
html.floral .btn.p{background:linear-gradient(135deg,var(--primary),var(--primary-l));box-shadow:0 10px 26px rgba(143,138,90,.25)}
html.floral .bless{background:none;-webkit-text-fill-color:initial;color:var(--gold);animation:none}
html.floral body,html.floral .lbl,html.floral .sub,html.floral .day,html.floral .date,html.floral .tile .k,html.floral .tile .v,html.floral .u span,html.floral .notes,html.floral .btn,html.floral .ct{font-family:'Tajawal','Almarai',sans-serif;font-weight:300}
html.floral .lbl{color:var(--ink);font-weight:300;font-size:16px;line-height:2}
html.floral #lead{margin-top:34px}
html.floral .bless{margin-bottom:6px}
html.floral .host{color:var(--ink);font-family:'Tajawal','Almarai',sans-serif;font-weight:400;font-size:17px;line-height:1.9}
html.floral .big{font-family:'Gulzar','Aref Ruqaa',serif;color:var(--primary);font-size:clamp(44px,14vw,66px);line-height:1.5}
html.floral .bride-alt{font-family:'Gulzar','Aref Ruqaa',serif;font-size:26px;color:var(--primary)}
html.floral .thanks{font-family:'Tajawal','Almarai',sans-serif;font-weight:400;font-size:20px;color:var(--ink)}
html.floral .day,html.floral .date{color:var(--ink)}
html.floral .date em{color:var(--gold)}
html.floral .top,html.floral .audio-toggle{border-color:var(--primary-l);color:var(--primary-d)}

/* صور الأسماء والخط اليدوي (إن وُجدت) */
.callig{display:block;max-width:min(88%,460px);height:auto;margin:0 auto}
.name-img{display:block;height:auto;margin:0 auto;max-width:100%}
html.floral .big{line-height:1;margin:0}
html.floral .amp-b{margin:2px 0;font-size:26px}
html.floral .sub{margin-top:0}
html.floral .bride-alt{margin-top:10px;line-height:1.2}
html.floral .bride-alt .lbl{margin-bottom:2px!important}
html.floral main>section{padding:34px 0}
.big .name-img{max-height:120px;width:auto}
.bride-alt .name-img{max-height:88px;width:auto}
.self-word .name-img{max-height:150px;width:auto}

@media (max-width:480px){
  html.floral main{padding-left:calc(min(28vw,250px) + 4px);padding-right:10px}
  html.floral .callig{max-width:94%}
  html.floral .host{font-size:15.5px}
}