:root{
  --ui:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ink:#3B2F22; --muted:#7A6B58; --gold:#B8914A; --gold-d:#9C7A3C; --rose:#C98A84; --blush:#F7E4DC;
  --wa:#1FA855; --line:rgba(184,145,74,.22);
  --soft:0 1px 2px rgba(60,44,20,.06),0 6px 18px rgba(60,44,20,.07);
  --goldgrad:linear-gradient(100deg,#a8792a 0%,#d9b25f 22%,#f3df9e 38%,#c9963e 55%,#e6c578 72%,#a87a27 100%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--ui);color:var(--ink);line-height:1.6;min-height:100vh;overflow-x:hidden;
  background:#FFFBF5}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid #C99A3B;outline-offset:2px}
[hidden]{display:none !important}

/* ---------- top bar: back far right (as v3c), ☰ beside it, then logo ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:7px 14px;padding-top:max(7px,env(safe-area-inset-top));min-height:80px;
  background:rgba(255,251,245,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.menu-btn{flex:0 0 auto;width:42px;height:42px;border-radius:13px;background:#fff;border:1px solid var(--line);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4.5px;padding:0;box-shadow:0 1px 3px rgba(60,44,20,.06)}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:linear-gradient(90deg,#A9823E,#D9B96E)}
.brand{display:flex;align-items:center;text-decoration:none;line-height:0}
.brand img{display:block;height:64px;width:auto}
.topbar-spacer{flex:1}
.back{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 3px rgba(60,44,20,.06)}
.back:active,.menu-btn:active{transform:scale(.95)}

main{max-width:520px;margin:0 auto;padding:0 16px 24px}
.screen{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- hero: blush paper, gold frame, watercolour roses ---------- */
.hero{position:relative;margin:26px 4px 6px;border-radius:26px;text-align:center;isolation:isolate;
  background:
    radial-gradient(120% 70% at 85% 0%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 55%),
    radial-gradient(90% 60% at 0% 100%,rgba(240,198,190,.55) 0%,rgba(240,198,190,0) 60%),
    linear-gradient(160deg,#FFF8EF 0%,#FCEFE6 48%,#F6E0D5 100%);
  box-shadow:0 18px 40px rgba(150,95,70,.14),0 2px 6px rgba(150,95,70,.08),inset 0 0 0 1px rgba(201,150,120,.18)}
.hero-frame{position:absolute;inset:10px;border-radius:19px;border:1px solid rgba(184,145,74,.62);pointer-events:none;z-index:1}
.hero-frame::before{content:"";position:absolute;inset:4px;border-radius:15px;border:.5px solid rgba(184,145,74,.32)}
.hero-rose{position:absolute;pointer-events:none;user-select:none;z-index:2;filter:saturate(1.05) drop-shadow(0 4px 8px rgba(120,60,50,.12))}
.hero-rose-tr{top:-34px;right:-22px;width:min(70%,262px)}
.hero-rose-bl{bottom:-30px;left:-26px;width:min(40%,150px)}
.hero-in{position:relative;z-index:3;padding:74px 30px 56px}
.hero-kicker{margin:0 0 10px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--gold-d)}
.hero-kicker::before,.hero-kicker::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.hero-kicker::after{transform:scaleX(-1)}
.hero-title{margin:0 auto;font-family:var(--ui);font-weight:700;font-size:29px;line-height:1.5;color:var(--ink)}
.hero-title em{font-style:normal;background:linear-gradient(100deg,#A07A33,#D9B25F 35%,#B88A3E 60%,#C9963E);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin:12px auto 0;max-width:20em;font-size:15px;line-height:1.75;color:#6E5D4B;text-wrap:balance}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:190px;margin-top:22px;padding:13px 28px;border-radius:999px;border:0;
  color:#fff;background:linear-gradient(135deg,#A9823E,#D2AE62 55%,#B08A45);font-weight:700;font-size:16px;text-decoration:none;
  box-shadow:0 10px 22px rgba(169,130,62,.32),inset 0 1px 0 rgba(255,255,255,.35)}

/* sections */
.section{padding:34px 0 0;scroll-margin-top:92px}
.section-head{text-align:center;margin-bottom:22px}
.section-title{margin:0;font-family:var(--ui);font-weight:700;font-size:21px;line-height:1.4}
.section-title::after{content:"";display:block;width:32px;height:2px;border-radius:2px;background:var(--gold);margin:8px auto 0}
.section-sub{margin:8px 0 0;font-size:14px;color:var(--muted)}

/* occasion cards (home) */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card{display:flex;flex-direction:column;padding:0;overflow:hidden;background:#fff;border:1px solid rgba(184,145,74,.16);border-radius:18px;
  box-shadow:var(--soft);text-align:right;cursor:pointer;text-decoration:none;color:inherit;transition:transform .15s ease}
.card:active{transform:scale(.985)}
.card .thumb{display:block;width:100%;aspect-ratio:3/4;overflow:hidden;background:#F4EBD8}
.card .thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.card-body{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:11px 13px 13px}
.card-title{font-weight:700;font-size:16.5px;line-height:1.3;white-space:nowrap}
.card-count{flex:0 0 auto;font-size:11.5px;font-weight:600;line-height:1;color:#8A6A2E;background:#F7EEDB;border-radius:999px;padding:6px 9px}
.cards .card:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc((100% - 14px) / 2)}

.how{padding-bottom:8px}
.steps{list-style:none;margin:0;padding:24px 12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  background:#fff;border:1px solid rgba(184,145,74,.16);border-radius:18px;box-shadow:var(--soft)}
.steps li{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;font-size:13.5px}
.step-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#F7EEDB;color:var(--gold)}
.step-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.step-txt{line-height:1.55;font-weight:500}
.step-txt b{display:block;font-weight:700;color:var(--gold);font-size:15px;margin-bottom:2px}

/* ---------- occasion screen: designs grid ---------- */
.occ-head{text-align:center;padding:26px 0 18px}
.occ-kicker{margin:0;font-size:13px;font-weight:600;color:var(--gold-d)}
.occ-title{margin:2px 0 0;font-size:27px;font-weight:700;line-height:1.35}
.occ-title::after{content:"";display:block;width:36px;height:2px;border-radius:2px;background:var(--gold);margin:9px auto 0}
.occ-sub{margin:10px 0 0;font-size:14.5px;color:var(--muted)}
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dcard{display:flex;flex-direction:column;gap:10px;padding:0;border:0;background:none;cursor:pointer;text-align:right;text-decoration:none;color:inherit}
.dcard-img{position:relative;display:block;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#F4EBD8;
  box-shadow:0 14px 30px rgba(80,55,25,.18),0 2px 6px rgba(80,55,25,.1)}
.dcard-img img{display:block;width:100%;height:100%;object-fit:cover}
.dcard-n{position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:#B8914A;color:#fff;font-size:13px;font-weight:700;line-height:1;border:1.5px solid rgba(255,255,255,.85);box-shadow:0 1px 4px rgba(60,40,10,.28);z-index:2;pointer-events:none}
.dcard-tag{position:absolute;bottom:8px;right:8px;padding:4px 10px;border-radius:999px;background:rgba(122,24,38,.88);color:#fff;font-size:11.5px;font-weight:600}
.dcard-row{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 2px}
.dcard-name{font-weight:700;font-size:15px}
.dcard-go{font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,#A9823E,#D2AE62);border-radius:999px;padding:5px 11px;white-space:nowrap}
.dgrid .dcard:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc((100% - 16px) / 2)}

/* ---------- editor ---------- */
.picker{margin-top:12px}
.picker-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 2px}
.picker-title{margin:0;font-size:18px;font-weight:700}
.picker-now{font-size:13px;color:var(--muted);white-space:nowrap}
.picks{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:10px 16px 8px;margin:0 -16px;scrollbar-width:none}
.picks::-webkit-scrollbar{display:none}
.pick{flex:0 0 auto;width:66px;padding:0;border:0;background:none;cursor:pointer;scroll-snap-align:center}
.pick-frame{position:relative;display:block;width:66px;height:117px;border-radius:10px;overflow:hidden;box-shadow:0 3px 10px rgba(60,40,10,.18);
  outline:2.5px solid transparent;outline-offset:2px;transition:outline-color .15s, transform .15s}
.pick-frame img{display:block;width:100%;height:100%;object-fit:cover}
.pick-n{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);font-size:12px;font-weight:700}
.pick.on .pick-frame{outline-color:#C99A3B;transform:translateY(-2px)}
.pick.on .pick-n{background:linear-gradient(135deg,#A9823E,#D9B96E);color:#fff}

.stage-wrap{padding-top:16px}
.stage{position:relative;width:min(72vw,310px);aspect-ratio:9/16;margin:0 auto;border-radius:14px;overflow:hidden;background:#F4EBD8;
  box-shadow:0 22px 44px rgba(60,40,10,.22),0 3px 8px rgba(60,40,10,.12)}
.art{position:absolute;top:0;left:0;width:1080px;height:1920px;transform-origin:0 0;background-size:100% 100%;background-repeat:no-repeat}
.art .ln{position:absolute;text-align:center;direction:rtl;white-space:nowrap}
.art .gt{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wm{position:absolute;inset:0;pointer-events:none;background-size:100% 100%;opacity:1}
.stage-note{text-align:center;color:var(--muted);font-size:13px;margin:10px 0 0}

.form,.types{margin-top:16px;background:#fff;border-radius:20px;padding:16px;box-shadow:var(--soft);border:1px solid rgba(184,145,74,.16)}
.form-head{margin-bottom:12px}
.form-title{margin:0;font-size:19px;font-weight:700}
.form-hint{margin:2px 0 0;font-size:13px;color:var(--muted)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.field{grid-column:1 / -1;display:block;margin-bottom:11px;position:relative}
.field.half{grid-column:auto}
.field>span{display:flex;align-items:center;justify-content:space-between;gap:6px;font-weight:600;font-size:14px;margin-bottom:5px}
.field .reset{border:0;background:none;padding:0;font-size:12px;font-weight:600;color:var(--gold-d);cursor:pointer}
.field input,.field textarea,.xline input{width:100%;border:1.5px solid #E8DCC5;background:#FFFDF9;border-radius:13px;padding:11px 13px;font-size:16px;outline:none;transition:border-color .15s, box-shadow .15s}
.field textarea{resize:none;min-height:70px;line-height:1.55}
.field input:focus,.field textarea:focus,.xline input:focus{border-color:#C99A3B;box-shadow:0 0 0 4px rgba(201,154,59,.14)}
.field.off input,.field.off textarea{background:#F8F4EC;border-style:dashed}
.field.off>span::before{content:"مخفي";order:2;font-size:11px;font-weight:600;color:#A2907A;background:#F1E9DA;border-radius:999px;padding:2px 8px;margin-inline-start:auto}

.extras{display:grid;gap:10px}
.xline{border:1px solid #EFE3CC;background:#FFFBF3;border-radius:16px;padding:11px}
.xline-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;font-weight:600;font-size:14px}
.xdel{border:0;background:#fff;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#9A5B52;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.xopts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:block;padding:6px 11px;border-radius:999px;border:1px solid #E5D7BD;background:#fff;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.chip input:checked+span{background:#3B2F22;border-color:#3B2F22;color:#fff}
.chip input:focus-visible+span{outline:3px solid #C99A3B;outline-offset:2px}
.xsep{width:1px;background:#E5D7BD;margin:2px 2px}
.btn-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:12px;border-radius:14px;
  border:1.5px dashed #D6BE8E;background:#FFFAF0;color:#8A6A2E;font-weight:700;font-size:15.5px;cursor:pointer}

.type-list{display:grid;gap:10px;margin-top:12px}
.tcard{position:relative;display:flex;align-items:center;gap:12px;padding:13px 13px;border-radius:16px;border:1.5px solid #ECDFC6;background:#FFFDF9;cursor:pointer;text-align:right;width:100%}
.tcard input{position:absolute;opacity:0;pointer-events:none}
.t-ic{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#F7EEDB;color:var(--gold-d)}
.t-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.t-body{flex:1;min-width:0}
.t-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.t-name{font-weight:700;font-size:16px}
.t-price{font-weight:700;font-size:15px;color:var(--gold-d);white-space:nowrap}
.t-desc{display:block;margin-top:2px;font-size:12.8px;line-height:1.55;color:var(--muted)}
.tcard.on{border-color:#C99A3B;background:linear-gradient(135deg,#FFF9EC,#FFF3F0);box-shadow:0 6px 16px rgba(169,130,62,.16)}
.tcard.on .t-ic{background:linear-gradient(135deg,#A9823E,#D9B96E);color:#fff}
.tcard:has(input:focus-visible){outline:3px solid #C99A3B;outline-offset:2px}

.actions{display:grid;gap:10px;margin-top:16px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:16px;padding:15px 16px;
  font-weight:700;font-size:16.5px;line-height:1.35;text-align:center;cursor:pointer;text-decoration:none}
.btn-pay{color:#fff;background:linear-gradient(135deg,#A9823E,#D9B96E 55%,#B08A45);box-shadow:0 10px 22px rgba(169,130,62,.35)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid #E1D2B4;font-size:15px}
.btn-wa{color:#fff;background:var(--wa);box-shadow:0 10px 22px rgba(31,168,85,.3)}
.btn-link{background:none;color:var(--muted)}
.btn:active{transform:scale(.99)}

.mini{position:fixed;left:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:15;padding:0;border:3px solid #fff;border-radius:12px;overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.25);background:#fff;cursor:pointer;animation:pop .25s ease}
.mini canvas{display:block;width:68px;height:121px}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

/* footer */
.foot{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 16px calc(32px + env(safe-area-inset-bottom));margin-top:32px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot-wa{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;font-size:14.5px;text-decoration:none}
.foot-wa svg{color:var(--wa)}
.foot-note{font-size:12px}

/* sheet */
.sheet-bg,.drawer-bg{position:fixed;inset:0;background:rgba(30,22,10,.45);z-index:40;animation:fadebg .2s ease}
.drawer-bg{z-index:50}
@keyframes fadebg{from{opacity:0}}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:520px;margin:0 auto;background:#FFFDF8;border-radius:24px 24px 0 0;
  padding:10px 18px max(18px,env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.2);animation:up .28s cubic-bezier(.2,.9,.3,1);max-height:88vh;overflow:auto}
@keyframes up{from{transform:translateY(100%)}}
.sheet-handle{width:44px;height:5px;border-radius:9px;background:#E1D2B4;margin:2px auto 12px}
.sheet h3{margin:0 0 6px;font-size:20px;text-align:center}
.sheet-text{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.65;text-align:center}
.summary{margin:0 0 14px;background:#fff;border:1px solid #EFE4CF;border-radius:14px;padding:4px 14px}
.summary div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed #EFE4CF;font-size:14px}
.summary div:last-child{border-bottom:0}
.summary div.hl{font-size:15px}
.summary div.hl dd{color:var(--gold-d)}
.summary dt{color:var(--muted);flex:0 0 auto}
.summary dd{margin:0;font-weight:600;text-align:left;overflow-wrap:anywhere;white-space:pre-line}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,40px);opacity:0;z-index:60;background:#2E261B;color:#fff;
  padding:11px 18px;border-radius:999px;font-size:14.5px;transition:.25s ease;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* drawer */
.drawer{position:fixed;top:0;bottom:0;right:0;z-index:51;width:min(84vw,340px);background:#FFFDF8;box-shadow:-10px 0 40px rgba(0,0,0,.2);
  padding:max(14px,env(safe-area-inset-top)) 14px 18px;overflow:auto;animation:slidein .26s cubic-bezier(.2,.9,.3,1);border-radius:22px 0 0 22px}
@keyframes slidein{from{transform:translateX(100%)}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 4px 12px}
.drawer-head h3{margin:0;font-size:21px;font-weight:700}
.drawer-x{width:38px;height:38px;border:0;border-radius:50%;background:#fff;box-shadow:var(--soft);display:grid;place-items:center;cursor:pointer}
.drawer-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.occ{display:flex;align-items:center;gap:12px;width:100%;border:1px solid rgba(184,145,74,.18);background:#fff;border-radius:16px;padding:8px 10px;cursor:pointer;text-align:right}
.occ img{flex:0 0 auto;width:42px;height:62px;object-fit:cover;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.occ-name{flex:1;font-weight:600;font-size:16.5px}
.occ-count{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.occ svg{flex:0 0 auto;color:#B8914A}

@media (prefers-reduced-motion:reduce){.screen{animation:none}}
@media (min-width:700px){
  main{max-width:560px}
  .hero-title{font-size:33px}
  .stage{width:330px}
}

.hero .hero-cta{display:inline-flex;width:auto;border-radius:999px}
.field>span{justify-content:flex-start}.field .reset{margin-inline-start:auto}

/* ---------- v4d: preview follows «نوع الدعوة» ---------- */
.stage-wrap.swap .stage,.stage-wrap.swap .sm{animation:tswap .45s cubic-bezier(.2,.7,.2,1)}
@keyframes tswap{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.vbg,.petals,.vbadge,.vprog{display:none}
/* video */
.is-video .stage{border-radius:24px;box-shadow:0 0 0 5px #3B2F22,0 0 0 6px rgba(184,145,74,.55),0 24px 46px rgba(60,40,10,.28)}
.is-video .vbg{display:block;position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;transform-origin:50% 42%;animation:kb 16s ease-in-out infinite alternate;will-change:transform}
@keyframes kb{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.13) translate(-1.5%,-2%)}}
.is-video .art{background-image:none!important}
.is-video .art .ln{opacity:0;transform:translateY(56px);filter:blur(0);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.is-video .art .ln.in{opacity:1;transform:none}
.is-video .art .ln.out{opacity:0;transform:translateY(-24px);transition-duration:.7s}
.is-video .petals{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.petals i.petal,.petals i.spark{position:absolute;top:-8%;width:calc(13px * var(--k,1));height:calc(9px * var(--k,1));border-radius:80% 0 80% 0;
  background:linear-gradient(135deg,#F6E3B0,#C99A3B 60%,#A9823E);opacity:0;box-shadow:0 0 6px rgba(233,200,120,.55);animation:fall 12s linear infinite}
.petals i.spark{width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#FFF6D8 0,#E9C878 45%,rgba(233,200,120,0) 72%);box-shadow:0 0 8px 2px rgba(240,210,140,.7)}
@keyframes fall{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.85}50%{transform:translate(-18px,330px) rotate(160deg)}85%{opacity:.75}100%{transform:translate(12px,660px) rotate(320deg);opacity:0}}
.is-video .vbadge{display:inline-flex;align-items:center;gap:5px;position:absolute;top:12px;right:12px;z-index:3;padding:4px 10px 4px 11px;border-radius:999px;
  background:rgba(59,47,34,.72);color:#FCEFD2;font:600 12px/1.4 var(--ui);letter-spacing:.2px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.is-video .vprog{display:block;position:absolute;left:14px;right:14px;bottom:12px;height:3.5px;border-radius:3px;background:rgba(59,47,34,.28);overflow:hidden;z-index:3}
.vprog i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#E9C878,#B8914A);transform-origin:right center;transform:scaleX(0);transition:transform .12s linear;border-radius:3px}
/* site */
.sm{position:relative;width:330px;max-width:calc(100vw - 40px);height:586px;margin:0 auto;border-radius:30px;border:7px solid #3B2F22;background:#FFFBF5;overflow:hidden;
  box-shadow:0 0 0 1px rgba(184,145,74,.55),0 24px 46px rgba(60,40,10,.26);display:flex;flex-direction:column}
.sm[hidden]{display:none}
.sm-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:9px 11px 8px;background:#F3EBDD;border-bottom:1px solid #E6D8BE;direction:ltr}
.sm-dots{display:flex;gap:4px}.sm-dots i{width:6px;height:6px;border-radius:50%;background:#D5C3A3}
.sm-url{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:4px 10px;border-radius:999px;background:#FFFDF9;color:#7A6B58;font:500 11px/1.3 var(--ui);white-space:nowrap;overflow:hidden}
.sm-url span{overflow:hidden;text-overflow:ellipsis}
.sm-url svg{flex:0 0 auto;color:#B8914A}
.sm-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sm-scroll::-webkit-scrollbar{display:none}
.sm-hero{padding:18px 0 14px;background:radial-gradient(120% 70% at 50% 0,#F7E4DC 0,#FFFBF5 70%)}
.sm-stage{position:relative;width:76%;aspect-ratio:9/16;margin:0 auto;border-radius:12px;overflow:hidden;background:#F4EBD8;box-shadow:0 14px 30px rgba(60,40,10,.2),0 0 0 1px rgba(184,145,74,.35)}
.sm-sec{text-align:center;padding:14px 20px}
.sm-kick{margin:0;color:#7A6B58;font-size:12.5px}
.sm-title{margin:4px 0 0;font-size:25px;line-height:1.35;font-weight:700;color:#3B2F22}
.sm-title em{font-style:normal;color:#B8914A;font-weight:500}
.sm-orn{display:flex;align-items:center;justify-content:center;gap:7px;margin:9px 0 8px}
.sm-orn i{width:44px;height:1px;background:linear-gradient(90deg,transparent,#B8914A)}.sm-orn i:last-child{transform:scaleX(-1)}
.sm-orn b{width:7px;height:7px;transform:rotate(45deg);background:#B8914A}
.sm-date{margin:0;color:#3B2F22;font-size:13.5px;font-weight:500;line-height:1.7}
.sm-count{padding-top:6px}
.sm-h{margin:0 0 9px;color:#3B2F22;font-weight:700;font-size:15.5px}
.sm-cd{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.sm-cd span{display:flex;flex-direction:column;align-items:center;padding:9px 0 7px;border-radius:12px;background:#3B2F22;color:#F3DFA9;box-shadow:inset 0 0 0 1px rgba(233,200,120,.35)}
.sm-cd b{font-size:20px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
.sm-cd small{font-size:10.5px;color:#E7D6B2;opacity:.9}
.sm-card{margin:8px 16px 12px;padding:16px 14px;border-radius:16px;background:#FFFDF9;border:1px solid #ECDFC6;text-align:center;box-shadow:0 6px 16px rgba(60,44,20,.07)}
.sm-pin{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;background:#F7EEDC;color:#B8914A}
.sm-venue{margin:7px 0 11px;font-size:13.5px;font-weight:600;color:#3B2F22}
.sm-small{margin:-4px 0 12px;font-size:12px;color:#7A6B58}
.sm-btn{font:600 14px/1.2 var(--ui);border:0;border-radius:999px;padding:11px 18px;background:linear-gradient(135deg,#A9823E,#D2B068);color:#fff;cursor:pointer;box-shadow:0 5px 12px rgba(169,130,62,.28)}
.sm-map .sm-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;direction:rtl}
.sm-rbtns{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sm-btn-o{background:#FFFDF9;color:#9C7A3C;box-shadow:inset 0 0 0 1.5px #C99A3B}
.sm-rbtns .sm-btn.on{outline:3px solid rgba(201,154,59,.35);outline-offset:2px}
.sm-rbtns .sm-btn-o.on{background:#F7EEDC}
.sm-thanks{margin:11px 0 0;font-size:13px;color:#9C7A3C;font-weight:600}
.sm-foot{margin:6px 0 0;padding:14px 0 18px;text-align:center;font-size:11.5px;color:#9C8A70;background:#F3EBDD}
.sm-wm{z-index:4;border-radius:0}

/* site: scroll-down cue (v4e) */
.sm-fade{position:absolute;left:0;right:0;bottom:0;height:86px;z-index:5;pointer-events:none;background:linear-gradient(to bottom,rgba(255,251,245,0),rgba(255,251,245,.82) 58%,#FFFBF5);transition:opacity .3s}
.sm-cue{position:absolute;left:50%;bottom:12px;z-index:6;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .3s,visibility .3s}
.sm-cue-l{font:600 11.5px/1.3 var(--ui);color:#7A5E2C;background:rgba(255,253,249,.92);padding:3px 10px;border-radius:999px;box-shadow:0 0 0 1px rgba(184,145,74,.35);white-space:nowrap}
.sm-cue-b{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#B8914A;color:#fff;box-shadow:0 6px 14px rgba(140,104,40,.38),0 0 0 3px rgba(255,251,245,.9);animation:smBounce 1.6s ease-in-out infinite}
.sm-cue-b svg{margin-top:2px}
@keyframes smBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.sm.at-end .sm-cue{opacity:0;visibility:hidden;pointer-events:none}
.sm.at-end .sm-fade{opacity:0}
@media (prefers-reduced-motion:reduce){.sm-cue-b{animation:none}}

.ed-label{margin:0 auto 10px;text-align:center;font-size:13.5px;font-weight:700;color:#B8914A;letter-spacing:.2px}
.ed-label:empty{display:none}

/* ================= v6: home inspiration sections ================= */
.hx{position:relative}
/* 1 marquee */
.mq{position:relative;margin:0 -16px;overflow:hidden;direction:ltr;padding:6px 0 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.mq-track{display:flex;gap:12px;width:max-content;animation:mq 46s linear infinite;will-change:transform}
.mq:active .mq-track,.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6px))}}
.mq-it{flex:0 0 auto;width:124px;text-decoration:none;color:var(--ink);direction:rtl}
.mq-img{display:block;width:124px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#F4EBD8;
  box-shadow:0 1px 2px rgba(60,44,20,.07),0 8px 18px rgba(60,44,20,.12);border:1px solid rgba(184,145,74,.2)}
.mq-img img{display:block;width:100%;height:100%;object-fit:cover}
.mq-l{display:block;text-align:center;margin-top:7px;font-size:12.5px;font-weight:600;color:#6E5D4B}
/* 2 before / after */
.ba{display:flex;align-items:center;justify-content:center;gap:8px}
.ba-card{margin:0;flex:1 1 0;max-width:158px;text-align:center}
.ba-img{display:block;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#F4EBD8;border:1px solid rgba(184,145,74,.22);box-shadow:var(--soft)}
.ba-img img{display:block;width:100%;height:100%;object-fit:cover}
.ba-card figcaption{display:inline-block;margin-top:9px;padding:3px 14px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted);background:#F4ECDD}
.ba-after figcaption{color:#fff;background:linear-gradient(135deg,#A9823E,#D9B96E 55%,#B08A45)}
.ba-after .ba-img{box-shadow:0 0 0 2px rgba(184,145,74,.55),0 12px 26px rgba(150,110,40,.22)}
.ba-arrow{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--gold);margin-bottom:34px;animation:nudge 1.8s ease-in-out infinite}
.ba-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
.ba-cap{margin:16px 0 0;text-align:center;font-family:'Amiri',serif;font-weight:700;font-size:26px;line-height:1.5;
  background:linear-gradient(100deg,#A07A33,#D9B25F 35%,#B88A3E 60%,#C9963E);-webkit-background-clip:text;background-clip:text;color:transparent}
.ba-go{display:block;width:max-content;margin:6px auto 0;font-size:14px;font-weight:600;color:var(--gold-d);text-decoration:none;border-bottom:1px solid rgba(184,145,74,.45);padding-bottom:1px}
/* 3 how it works */
.steps3{list-style:none;margin:0;padding:22px 10px 20px;display:flex;align-items:flex-start;justify-content:center;
  background:#fff;border:1px solid rgba(184,145,74,.16);border-radius:18px;box-shadow:var(--soft)}
.steps3 li{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.steps3 li.s3-sep{flex:0 0 26px;flex-direction:row;gap:0;color:var(--gold);font-size:15px;line-height:1;padding-top:24px;opacity:.85}
.s3-sep i{display:none}
.s3-ic{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;border:1px solid rgba(184,145,74,.55);
  box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px rgba(184,145,74,.22);background:#FFFCF6;color:var(--gold)}
.s3-ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.steps3 b{margin-top:10px;font-size:15px;color:var(--gold);line-height:1}
.s3-t{margin-top:5px;font-size:13.5px;font-weight:600;line-height:1.45}
/* 4 rotating quote */
.qt{position:relative;text-align:center;padding:26px 18px 22px;border-radius:22px;
  background:radial-gradient(90% 80% at 50% 0%,#FFFFFF 0%,rgba(255,255,255,0) 70%),linear-gradient(170deg,#FBF3E6,#F6E7DA);
  border:1px solid rgba(184,145,74,.22)}
.qt::before{content:"";position:absolute;inset:7px;border-radius:16px;border:.6px solid rgba(184,145,74,.35);pointer-events:none}
.qt-k{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.3px;color:var(--gold-d)}
.qt-orn{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 2px;color:var(--gold)}
.qt-orn i{width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.qt-orn i:last-child{transform:scaleX(-1)}
.qt-orn b{font-weight:400;font-size:16px;line-height:1}
.qt-box{position:relative;min-height:108px;display:grid;place-items:center}
.qt-q{grid-area:1/1;margin:0;padding:0 6px;font-family:'Amiri',serif;font-weight:700;font-size:29px;line-height:1.75;color:#6B4E2A;
  opacity:0;transform:translateY(8px);transition:opacity .9s ease,transform .9s ease;text-wrap:balance}
.qt-q.on{opacity:1;transform:none}
.qt-q .em{font-family:"Noto Color Emoji","Apple Color Emoji",sans-serif;font-weight:400;font-size:.8em}
.qt-dots{display:flex;justify-content:center;gap:6px;margin-top:6px}
.qt-dots i{width:6px;height:6px;border-radius:50%;background:rgba(184,145,74,.3);transition:all .4s}
.qt-dots i.on{width:18px;border-radius:3px;background:var(--gold)}
/* 5 palestinian corner */
.pal{position:relative;border-radius:20px;background:#FBF5EA;border:1px solid rgba(163,38,42,.18);overflow:hidden;padding:0 0 4px;
  box-shadow:0 1px 2px rgba(60,44,20,.05),0 10px 24px rgba(120,40,30,.08)}
.tz{display:block;height:39px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='39' viewBox='0 0 48 39'%3E%3Cpath d='M0.4 0.4l2.2 2.2M2.6 0.4l-2.2 2.2M6.4 0.4l2.2 2.2M8.6 0.4l-2.2 2.2M12.4 0.4l2.2 2.2M14.6 0.4l-2.2 2.2M18.4 0.4l2.2 2.2M20.6 0.4l-2.2 2.2M24.4 0.4l2.2 2.2M26.6 0.4l-2.2 2.2M30.4 0.4l2.2 2.2M32.6 0.4l-2.2 2.2M36.4 0.4l2.2 2.2M38.6 0.4l-2.2 2.2M42.4 0.4l2.2 2.2M44.6 0.4l-2.2 2.2M21.4 6.4l2.2 2.2M23.6 6.4l-2.2 2.2M18.4 9.4l2.2 2.2M20.6 9.4l-2.2 2.2M24.4 9.4l2.2 2.2M26.6 9.4l-2.2 2.2M15.4 12.4l2.2 2.2M17.6 12.4l-2.2 2.2M27.4 12.4l2.2 2.2M29.6 12.4l-2.2 2.2M12.4 15.4l2.2 2.2M14.6 15.4l-2.2 2.2M30.4 15.4l2.2 2.2M32.6 15.4l-2.2 2.2M9.4 18.4l2.2 2.2M11.6 18.4l-2.2 2.2M21.4 18.4l2.2 2.2M23.6 18.4l-2.2 2.2M33.4 18.4l2.2 2.2M35.6 18.4l-2.2 2.2M12.4 21.4l2.2 2.2M14.6 21.4l-2.2 2.2M30.4 21.4l2.2 2.2M32.6 21.4l-2.2 2.2M15.4 24.4l2.2 2.2M17.6 24.4l-2.2 2.2M27.4 24.4l2.2 2.2M29.6 24.4l-2.2 2.2M18.4 27.4l2.2 2.2M20.6 27.4l-2.2 2.2M24.4 27.4l2.2 2.2M26.6 27.4l-2.2 2.2M21.4 30.4l2.2 2.2M23.6 30.4l-2.2 2.2M0.4 36.4l2.2 2.2M2.6 36.4l-2.2 2.2M6.4 36.4l2.2 2.2M8.6 36.4l-2.2 2.2M12.4 36.4l2.2 2.2M14.6 36.4l-2.2 2.2M18.4 36.4l2.2 2.2M20.6 36.4l-2.2 2.2M24.4 36.4l2.2 2.2M26.6 36.4l-2.2 2.2M30.4 36.4l2.2 2.2M32.6 36.4l-2.2 2.2M36.4 36.4l2.2 2.2M38.6 36.4l-2.2 2.2M42.4 36.4l2.2 2.2M44.6 36.4l-2.2 2.2' stroke='%23A3262A' stroke-width='0.9' stroke-linecap='round' fill='none'/%3E%3Cpath d='M21.4 9.4l2.2 2.2M23.6 9.4l-2.2 2.2M18.4 12.4l2.2 2.2M20.6 12.4l-2.2 2.2M24.4 12.4l2.2 2.2M26.6 12.4l-2.2 2.2M15.4 15.4l2.2 2.2M17.6 15.4l-2.2 2.2M27.4 15.4l2.2 2.2M29.6 15.4l-2.2 2.2M12.4 18.4l2.2 2.2M14.6 18.4l-2.2 2.2M30.4 18.4l2.2 2.2M32.6 18.4l-2.2 2.2M15.4 21.4l2.2 2.2M17.6 21.4l-2.2 2.2M27.4 21.4l2.2 2.2M29.6 21.4l-2.2 2.2M18.4 24.4l2.2 2.2M20.6 24.4l-2.2 2.2M24.4 24.4l2.2 2.2M26.6 24.4l-2.2 2.2M21.4 27.4l2.2 2.2M23.6 27.4l-2.2 2.2' stroke='%232B2320' stroke-width='0.9' stroke-linecap='round' fill='none'/%3E%3Cpath d='M45.4 6.4l2.2 2.2M47.6 6.4l-2.2 2.2M21.4 12.4l2.2 2.2M23.6 12.4l-2.2 2.2M18.4 15.4l2.2 2.2M20.6 15.4l-2.2 2.2M24.4 15.4l2.2 2.2M26.6 15.4l-2.2 2.2M15.4 18.4l2.2 2.2M17.6 18.4l-2.2 2.2M27.4 18.4l2.2 2.2M29.6 18.4l-2.2 2.2M45.4 18.4l2.2 2.2M47.6 18.4l-2.2 2.2M18.4 21.4l2.2 2.2M20.6 21.4l-2.2 2.2M24.4 21.4l2.2 2.2M26.6 21.4l-2.2 2.2M21.4 24.4l2.2 2.2M23.6 24.4l-2.2 2.2M45.4 30.4l2.2 2.2M47.6 30.4l-2.2 2.2' stroke='%233F6B45' stroke-width='0.9' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");background-repeat:repeat-x;background-position:center;background-size:48px 39px;opacity:.95}
.tz-b{margin-top:2px;transform:scaleY(-1)}
.pal-head{margin:14px 0 14px}
.pal-row{display:flex;gap:10px;overflow-x:auto;padding:2px 14px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pal-row::-webkit-scrollbar{display:none}
.pal-it{flex:0 0 auto;width:112px;scroll-snap-align:start;text-decoration:none;color:var(--ink);text-align:center}
.pal-img{display:block;aspect-ratio:9/16;border-radius:12px;overflow:hidden;border:1px solid rgba(163,38,42,.22);box-shadow:0 6px 14px rgba(90,40,20,.12)}
.pal-img img{display:block;width:100%;height:100%;object-fit:cover}
.pal-l{display:block;margin-top:6px;font-size:12px;font-weight:600;color:#8A3B2E}
/* 6 animated card */
.hv{display:flex;justify-content:center;padding:6px 0 4px}
.hv .stage.hv-stage{display:block;width:min(62vw,236px)}
.hv-cta{display:flex;width:max-content;margin:22px auto 0}
/* 7 ideas */
.ideas{display:grid;gap:12px}
.idea{background:#fff;border:1px solid rgba(184,145,74,.16);border-radius:18px;box-shadow:var(--soft);padding:16px 16px 14px}
.idea-h{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:16px;font-weight:700}
.idea-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(184,145,74,.5);color:var(--gold);flex:0 0 auto}
.idea-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.phrases{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.phrases li{position:relative;padding:8px 30px 8px 10px;border-radius:12px;background:#FBF5EA;font-family:'El Messiri',var(--ui);font-weight:600;font-size:14.5px;color:#6B4E2A;line-height:1.45}
.phrases li::before{content:"❦";position:absolute;right:10px;top:50%;transform:translateY(-52%);color:var(--gold);font-family:var(--ui);font-size:13px}
.pals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pl{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#6E5D4B;text-align:center}
.sw{display:flex}
.sw i{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px rgba(60,44,20,.2)}
.sw i+i{margin-right:-8px}
.favors{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.favors li{position:relative;padding-right:18px;font-size:14px;line-height:1.55;color:#5B4A37}
.favors li::before{content:"";position:absolute;right:2px;top:.62em;width:7px;height:7px;transform:rotate(45deg);background:var(--gold)}
@media (prefers-reduced-motion:reduce){.mq-track,.ba-arrow{animation:none}}
.hv-cap{margin:12px 0 0;text-align:center;font-size:13px;font-weight:600;color:var(--gold-d);min-height:1.5em;transition:opacity .4s}

/* v6b: «اختاري مناسبتك» as small squares (Reham: «صغريهم اعمليهم مربعات صغيره») */
.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cards .card{border-radius:14px}
.cards .card .thumb{aspect-ratio:1/1}
.cards .card .thumb img{object-position:50% 28%}
.cards .card-body{flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:7px 4px 9px;text-align:center}
.cards .card-title{font-size:13.5px;line-height:1.25}
.cards .card-count{font-size:10.5px;padding:3px 8px}
.cards .card:last-child:nth-child(odd){grid-column:auto;justify-self:stretch;width:auto}
@media (max-width:559px){.cards .card:nth-child(7):last-child{grid-column:2}}
@media (min-width:560px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ===== v7: automatic payment ===== */
.is-paid .wm{display:none}
.ptier{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.ptier[hidden]{display:none}
.ptier-b{font:inherit;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;border-radius:16px;border:1.5px solid #E1D2B4;background:#fff;color:var(--ink);cursor:pointer;transition:all .18s}
.ptier-b b{font-size:16px}
.ptier-b span{font-size:14px;color:var(--muted)}
.ptier-b.on{border-color:#B08A45;background:linear-gradient(180deg,#FFF8EA,#FBEFD6);box-shadow:0 6px 16px rgba(169,130,62,.18)}
.ptier-b.on span{color:var(--gold-d);font-weight:700}
#zBtn[hidden],#zNote[hidden]{display:none}
#zBtn:disabled{opacity:.75}
.z-note{margin:8px 0 6px;text-align:center;font-size:12.5px;color:var(--muted)}
.wa-sec{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 0 2px;padding:8px;color:var(--wa);font-weight:600;font-size:14px;text-decoration:none}
.wa-sec svg{width:18px;height:18px}
#done .done-ic{width:58px;height:58px;margin:4px auto 10px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#fff;background:linear-gradient(135deg,#A9823E,#D9B96E 55%,#B08A45);box-shadow:0 10px 22px rgba(169,130,62,.35)}
#done h3{font-size:21px}
#done .btn-pay{font-size:17px;padding-top:16px;padding-bottom:16px}
.done-vid{margin-top:14px;padding:12px 12px 4px;border-radius:16px;background:#F4FBF6;border:1px solid #D5EEDC}
.done-vid[hidden]{display:none}
.done-code{margin:12px 0 0;text-align:center;font-size:13px;color:var(--muted);letter-spacing:.5px}
.paywait{position:fixed;inset:0;z-index:60;background:rgba(251,246,236,.94);display:grid;place-items:center;padding:24px}
.paywait[hidden]{display:none}
.paywait-card{max-width:340px;text-align:center;background:#FFFDF8;border:1px solid #EFE4CF;border-radius:22px;padding:26px 20px;box-shadow:0 16px 40px rgba(60,40,10,.12)}
.paywait-card p{margin:12px 0 0;font-size:15.5px;line-height:1.7}
.paywait-act{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.paywait-act[hidden]{display:none}
.spin{display:inline-block;width:34px;height:34px;border-radius:50%;border:3px solid #EADBC2;border-top-color:#B08A45;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* customer details in the pay sheet */
.cust{display:grid;gap:10px;margin:0 0 12px}
.cust[hidden]{display:none}
.cf{display:grid;gap:5px;font-size:13.5px;color:var(--muted);font-weight:600}
.cf input{font:inherit;font-size:16px;padding:12px 14px;border-radius:14px;border:1.5px solid #E1D2B4;background:#fff;color:var(--ink);outline:none}
.cf input:focus{border-color:#B08A45;box-shadow:0 0 0 3px rgba(176,138,69,.15)}
.cf input.bad{border-color:#C9543A;box-shadow:0 0 0 3px rgba(201,84,58,.12)}
#cWa{text-align:right}
#cWa:placeholder-shown{direction:rtl}
.cf-err{margin:-2px 0 0;color:#B5462F;font-size:13px}
.cf-err[hidden]{display:none}
/* the permanent order page */
.order-mode .form,.order-mode .types,.order-mode .actions,.order-mode #mini,.order-mode .ed-label{display:none!important}
.ocard{max-width:520px;margin:6px auto 16px;background:#FFFDF8;border:1px solid #EFE4CF;border-radius:22px;padding:20px 16px 12px;text-align:center;box-shadow:0 12px 30px rgba(60,40,10,.08)}
.oc-ic{width:58px;height:58px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#fff;background:linear-gradient(135deg,#A9823E,#D9B96E 55%,#B08A45);box-shadow:0 10px 22px rgba(169,130,62,.35)}
.oc-ic.oc-no{background:#D9A441;box-shadow:none}
.oc-ic.oc-wait{background:#C9B48C;box-shadow:none}
.oc-t{margin:0 0 6px;font-size:21px}
.oc-s{margin:0 0 14px;color:var(--muted);font-size:14.5px;line-height:1.7}
.ocard .btn{width:100%}
.oc-dl{font-size:17px;padding-top:16px;padding-bottom:16px}
.oc-vid{margin:14px 0 0;padding:12px 12px 12px;border-radius:16px;background:#F4FBF6;border:1px solid #D5EEDC}
.oc-vid p{margin:0 0 10px;font-size:14px;line-height:1.7;color:#3F5A47}
.oc-save{margin:16px 0 0;padding:14px 12px;border-radius:16px;background:#FBF4E6;border:1px dashed #DCC59A}
.oc-sh{margin:0;font-weight:700;font-size:16px}
.oc-sm{margin:4px 0 10px;font-size:13px;color:var(--muted)}
.oc-link{font-size:13px;background:#fff;border:1px solid #EFE4CF;border-radius:10px;padding:8px 10px;margin:0 0 10px;word-break:break-all;color:#6E604E;user-select:all}
.oc-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.oc-row .btn{font-size:14.5px;padding-left:6px;padding-right:6px}
.oc-meta{margin:12px 0 2px;font-size:12.5px;color:var(--muted)}

.oc-mywa{margin:12px 0 0;font-size:16px}
.oc-mail{margin:12px 0 0;font-size:13.5px;color:#6E604E}
.oc-save .btn-ghost{width:100%}

/* ================= v7b: 3 tiers, automatic video, invitation page ================= */
.ptier{grid-template-columns:1fr 1fr 1fr;gap:8px}
.ptier-b{padding:11px 4px}.ptier-b b{font-size:14.5px}
.z-test{margin:10px 0 4px;padding:10px 12px;border-radius:14px;background:#FFF4E2;border:1px dashed #E2B66C;text-align:center}
.z-test p{margin:0 0 8px;font-size:13px;color:#7A5418}
.oc-test{display:inline-block;font-size:12px;background:#FDEBD3;color:#9A5B10;border-radius:8px;padding:2px 8px;vertical-align:middle}
.oc-vbox{margin:12px 0 4px;padding:14px 12px;border-radius:16px;background:#F7F1E6;border:1px solid #EBDDC2}
.oc-vt{margin:0 0 8px;font-weight:700;color:var(--ink);font-size:15px}
.oc-vbar{height:6px;border-radius:4px;background:rgba(59,47,34,.14);overflow:hidden}
.oc-vbar i{display:block;height:100%;background:linear-gradient(90deg,#C9A15A,#B8914A);transform-origin:100% 50%;transform:scaleX(0);transition:transform .15s linear}
.oc-vsm{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.oc-vprev{display:block;width:min(64vw,240px);aspect-ratio:9/16;margin:12px auto;border-radius:14px;background:#000;box-shadow:0 10px 26px rgba(60,40,10,.22)}
.oc-vprev[hidden]{display:none}
#ocVSave{margin-top:4px}
.ocard .btn + .btn,.ocard .btn-ghost{margin-top:8px}
.oc-inv{margin:12px 0 6px;padding:14px 12px;border-radius:16px;background:#F4FBF6;border:1px solid #D5EEDC}
.oc-ilink{font-size:14px;font-weight:600;color:#2F6B45;cursor:pointer}
.oc-irow{display:grid;grid-template-columns:1fr 1fr;gap:8px}.oc-irow .btn{margin-top:0!important}
.oc-rsvp{margin:12px 0 0;padding:10px;border-radius:12px;background:#fff;border:1px solid #E2EFE6;text-align:right}
.oc-rsvp .oc-sh{text-align:center}.oc-rs{text-align:center;margin:4px 0 6px;color:var(--ink)}
.oc-rl{list-style:none;margin:0;padding:0;font-size:13.5px;color:#4E4234;max-height:220px;overflow:auto}.oc-rl li{padding:4px 2px;border-top:1px solid #F1EADC}
/* invitation page */
.invite-mode .topbar,.invite-mode main,.invite-mode .foot{display:none!important}
.invite-mode{background:#FBF6EC}
.iv{display:block;min-height:100vh;min-height:100svh;color:var(--ink)}
.iv[hidden]{display:none}
.iv-hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;overflow:hidden;background:#2a211a}
.iv-blur{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(26px) brightness(.72) saturate(1.1);transform:scale(1.15)}
.iv-wrap{position:relative;z-index:1}
.iv-stage.stage{width:min(100vw,calc(100vh * 9 / 16));width:min(100vw,calc(100svh * 9 / 16));aspect-ratio:9/16;border-radius:0;box-shadow:0 18px 50px rgba(0,0,0,.35);position:relative;overflow:hidden}
.iv-cue{position:absolute;z-index:3;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:rgba(255,251,245,.88);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.18);animation:ivbob 2.2s ease-in-out infinite;white-space:nowrap}
@keyframes ivbob{0%,100%{translate:0 0}50%{translate:0 5px}}
.iv-body{max-width:520px;margin:0 auto;padding:26px 16px 34px}
.iv-sec{text-align:center;margin:0 0 22px}
.iv-kick{margin:0 0 8px;color:var(--muted);font-size:15px}
.iv-names{margin:0;font-family:"Aref Ruqaa","Amiri",serif;font-size:clamp(34px,10vw,48px);line-height:1.35;color:#9A7434;font-weight:700}
.iv-names em{font-style:normal;font-family:"Amiri",serif;font-size:.6em;color:var(--gold);margin:0 .15em}
.iv-orn{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0}.iv-orn i{width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.iv-orn b{width:7px;height:7px;transform:rotate(45deg);background:var(--gold)}
.iv-date{margin:0;font-size:17px;font-weight:600;color:var(--ink)}
.iv-h{margin:0 0 10px;font-weight:700;color:var(--ink);text-align:center}
.iv-cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;direction:rtl}
.iv-cd span{background:#fff;border:1px solid #EFE4CF;border-radius:14px;padding:10px 4px;text-align:center}
.iv-cd b{display:block;font-family:"Amiri",serif;font-size:26px;color:#9A7434;line-height:1.2}.iv-cd small{font-size:12px;color:var(--muted)}
.iv-card{background:#fff;border:1px solid #EFE4CF;border-radius:20px;padding:18px 16px;margin:0 0 16px;text-align:center;box-shadow:0 10px 26px rgba(60,40,10,.06)}
.iv-card[hidden],.iv-sec[hidden]{display:none}
.iv-pin{color:var(--gold)}.iv-venue{margin:6px 0 12px;font-size:16px;color:var(--ink)}.iv-venue:empty{display:none}
.iv-btn{display:block;text-decoration:none}
.iv-in{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:12px;border:1.5px solid #E1D2B4;border-radius:14px;margin:0 0 10px;background:#FFFDF8;text-align:right}
.iv-cnt{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;color:var(--muted);margin:0 0 12px}.iv-cnt select{font:inherit;font-size:16px;padding:6px 10px;border-radius:10px;border:1.5px solid #E1D2B4;background:#fff}
.iv-rbs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.iv-rbs .btn{margin:0}
.iv-thanks{margin:6px 0 0;font-size:16px;font-weight:600;color:#2F6B45}
.iv-share{display:grid;gap:8px;margin:6px 0 18px}.iv-share .btn{text-decoration:none;display:flex;align-items:center;justify-content:center}
.iv-foot{display:block;text-align:center;color:#A2916F;font-size:13px;text-decoration:none}
.iv-missing{min-height:80vh;min-height:80svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;font-size:18px}
.iv-missing .btn{max-width:260px;text-decoration:none}

/* ---------- v7d: line editor (order / delete / undo / fonts) ---------- */
.form-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.etools{display:flex;gap:6px}
.etool{min-height:42px;padding:0 14px;border-radius:999px;border:1.5px solid #E2D2B2;background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:6px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.etool#redoBtn{padding:0 12px}
.etool:not(:disabled):active{transform:scale(.96)}
.etool:disabled{opacity:.38;cursor:default}
.fields{display:flex;flex-direction:column;gap:10px}
.lrow{position:relative;background:#FFFDF9;border:1.5px solid #EDE2CC;border-radius:16px;padding:8px 10px 10px;transition:box-shadow .18s, border-color .18s;touch-action:auto}
.lrow.pinned{background:#FBF7EF}
.lrow.moved{animation:lrowHi 1.1s ease-out}
@keyframes lrowHi{0%{border-color:var(--gold);box-shadow:0 0 0 4px rgba(184,145,74,.22)}100%{border-color:#EDE2CC;box-shadow:none}}
.lrow.drag{z-index:5;border-color:var(--gold);box-shadow:0 14px 30px rgba(59,47,34,.22);background:#fff;transition:none}
.fields.dragging .lrow:not(.drag){transition:transform .15s}
.lrow-h{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.lgrip{flex:0 0 auto;width:40px;height:42px;display:grid;place-items:center;color:#B9A27A;border-radius:12px;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.lgrip:active,.lrow.drag .lgrip{color:var(--gold-d);background:#F6EEDD;cursor:grabbing}
.lgrip.off{opacity:.25;cursor:default}
.lrow-t{flex:1 1 auto;min-width:0;font-weight:700;font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpin{flex:0 0 auto;font-size:11.5px;font-weight:600;color:#A2907A;background:#F1E9DA;border-radius:999px;padding:4px 9px}
.lbtn{flex:0 0 auto;width:42px;height:42px;border-radius:12px;border:1.5px solid #E8DCC5;background:#fff;color:var(--gold-d);display:grid;place-items:center;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lbtn:not(:disabled):active{background:#F6EEDD;transform:scale(.94)}
.lbtn:disabled{opacity:.3;cursor:default}
.lbtn.ldel{color:#B0645C;border-color:#F0D9D3;margin-inline-start:2px}
.lrow-f{display:block}
.lrow-f.multi{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.lrow-f .field{margin-bottom:0}
.lrow-f.multi .field{margin-bottom:8px}
.lrow-f.multi .field:last-child{margin-bottom:0}
.field.solo>span{margin:0;justify-content:flex-end}
.field.solo .fl{display:none}
.field>span .fl{font-style:normal}
.field.solo.off>span::before{display:none}
.restore{margin-top:12px;padding:12px;border:1.5px dashed #E2D2B2;border-radius:16px;background:#FBF7EF}
.rest-t{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--muted)}
.rest-l{display:flex;flex-wrap:wrap;gap:8px}
.rest-b{min-height:42px;padding:0 14px;border-radius:999px;border:1.5px solid var(--gold);background:#fff;color:var(--gold-d);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.rest-b:active{background:#F6EEDD}
.fontbox{margin-top:16px;padding:14px 12px 12px;border:1.5px solid #EDE2CC;border-radius:18px;background:linear-gradient(180deg,#FFFDF9,#FBF5EA)}
.fb-t{margin:0 0 4px;font-size:17px;font-weight:700}
.fb-l{margin:10px 0 6px;font-size:13.5px;font-weight:600;color:var(--muted)}
.fchips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fchips::-webkit-scrollbar{display:none}
.fchip{flex:0 0 auto;scroll-snap-align:start;min-width:74px;min-height:52px;padding:4px 14px;border-radius:14px;border:1.5px solid #E8DCC5;background:#fff;color:var(--ink);font-size:21px;line-height:1.3;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fchip[data-f=""]{font-family:inherit;font-size:15px;font-weight:700}
.fchip.on{border-color:var(--gold);background:#FBF1DE;color:#6E5321;box-shadow:0 0 0 3px rgba(184,145,74,.18)}
.lrow-h .reset{flex:0 0 auto;border:0;background:none;padding:6px 4px;font:inherit;font-size:12.5px;font-weight:700;color:var(--gold-d);cursor:pointer}
.lrow-h .reset[hidden]{display:none}
.lrow:has(.field.solo.off) .lrow-t::after{content:" • مخفي";font-weight:600;color:#A2907A;font-size:12px}

/* v7d: baby split tabs */
.occ-seg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:0 0 16px;padding:5px;background:#F6EFE2;border-radius:18px}
.occ-seg[hidden]{display:none}
.seg-b{min-height:58px;border:0;border-radius:14px;background:transparent;color:var(--ink);font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s, box-shadow .18s}
.seg-b b{font-size:16.5px;font-weight:700}
.seg-b small{font-size:12px;font-weight:600;color:var(--muted)}
.seg-b.on{background:#fff;box-shadow:0 3px 12px rgba(59,47,34,.12)}
.seg-girls.on{box-shadow:0 3px 12px rgba(201,138,132,.28),inset 0 -3px 0 #E7B3AE}
.seg-boys.on{box-shadow:0 3px 12px rgba(110,150,190,.28),inset 0 -3px 0 #A9C4DE}

/* v7d: per-design colours on the 149 invitation page + its preview (defaults = the site gold) */
.iv,.sm{--tp:#8C6828;--ta:#8C6828;--ts:#FBF6EC;--tl:#EFE4CF;--tt:#3B2F22;--tm:#6F604D;--to:#B8914A}
.iv .iv-names{color:var(--tp)}
.iv .iv-names em{color:var(--to)}
.iv .iv-orn i{background:linear-gradient(90deg,transparent,var(--to),transparent)}
.iv .iv-orn b{background:var(--to)}
.iv .iv-h{color:var(--tt)}
.iv .iv-cd span{background:var(--ts);border-color:var(--tl);box-shadow:0 4px 12px rgba(0,0,0,.04)}
.iv .iv-cd b{color:var(--tp)}
.iv .iv-cd small{color:var(--tm)}
.iv .iv-card{border-color:var(--tl);background:linear-gradient(180deg,var(--ts),#fff 70%)}
.iv .iv-pin{color:var(--to)}
.iv .iv-venue{color:var(--tt)}
.iv #ivMap.btn-pay{background:var(--ta);background:linear-gradient(135deg,var(--ta),color-mix(in srgb,var(--ta) 82%,#fff));box-shadow:0 10px 22px color-mix(in srgb,var(--ta) 32%,transparent)}
.iv .iv-rb.btn-pay{background:var(--tp);background:linear-gradient(135deg,var(--tp),color-mix(in srgb,var(--tp) 82%,#fff));box-shadow:0 10px 22px color-mix(in srgb,var(--tp) 30%,transparent)}
.iv .iv-rb.btn-ghost{border-color:var(--tl);color:var(--tp);background:#fff}
.iv .iv-in,.iv .iv-cnt select{border-color:var(--tl)}
.iv .iv-in:focus{border-color:var(--tp);outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--tp) 15%,transparent)}
.iv .iv-cnt{color:var(--tm)}
.sm .sm-title em{color:var(--to)}
.sm .sm-orn i{background:linear-gradient(90deg,transparent,var(--to))}
.sm .sm-orn b{background:var(--to)}
.sm .sm-h{color:var(--tt)}
.sm .sm-cd span{background:var(--ts);color:var(--tp);box-shadow:inset 0 0 0 1px var(--tl)}
.sm .sm-cd small{color:var(--tm);opacity:1}
.sm .sm-card{border-color:var(--tl);background:linear-gradient(180deg,var(--ts),#fff 70%)}
.sm .sm-pin{background:#fff;color:var(--to);box-shadow:inset 0 0 0 1px var(--tl)}
.sm .sm-venue{color:var(--tt)}
.sm .sm-small{color:var(--tm)}
.sm .sm-map .sm-btn{background:var(--ta);box-shadow:0 5px 12px color-mix(in srgb,var(--ta) 30%,transparent)}
.sm .sm-rbtns .sm-btn{background:var(--tp);box-shadow:0 5px 12px color-mix(in srgb,var(--tp) 28%,transparent)}
.sm .sm-rbtns .sm-btn-o{background:#fff;color:var(--tp);box-shadow:inset 0 0 0 1.5px var(--tp)}
.sm .sm-rbtns .sm-btn.on{outline-color:color-mix(in srgb,var(--tp) 35%,transparent)}
.sm .sm-rbtns .sm-btn-o.on{background:var(--ts)}
.sm .sm-thanks{color:var(--tp)}

/* ---------- v7d (round 2): compact warm line rows, logo pink, florals, colour swatches, sticky preview, countdown ---------- */
:root{--pink:#BF6E73;--pink-s:#F6E3E2;--pink-l:#E9C3C2}
.form{position:relative}
.form::before{content:"";position:absolute;top:-6px;inset-inline-start:-14px;width:150px;height:53px;background:url(fl_tr.webp) no-repeat 0 0/contain;opacity:.55;pointer-events:none;transform:scaleX(-1)}
.form::after{content:"";position:absolute;bottom:-26px;inset-inline-end:-16px;width:96px;height:88px;background:url(fl_bl.webp) no-repeat 0 0/contain;opacity:.42;pointer-events:none}
.form-head,.fields,.colbox,.restore,.extras,.btn-add,.fontbox{position:relative;z-index:1}
.form-title{color:#3B2F22}
.form-title::after{content:"";display:inline-block;width:7px;height:7px;margin-inline-start:8px;transform:rotate(45deg) translateY(-3px);background:var(--pink);border-radius:1px}
.etool{border-color:var(--pink-l);background:#fff}
#undoBtn:not(:disabled){color:#8E4A4F;border-color:var(--pink);background:var(--pink-s)}
.types::before{content:"";display:block;width:180px;height:31px;margin:0 auto 12px;background:url(fl_div.webp) no-repeat center/contain;opacity:.7}
.fields{gap:6px}
.lrow{background:#F7EFE2;border:1px solid rgba(184,145,74,.45);border-inline-start:3px solid var(--pink);border-radius:12px;padding:3px 7px 7px 7px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset}
.lrow:nth-child(even){border-inline-start-color:#B8914A}
.lrow.pinned{background:#F2E9DA}
.lrow.drag{background:#FBF4E9;border-color:#B8914A}
@keyframes lrowHi{0%{border-color:var(--pink);box-shadow:0 0 0 4px rgba(191,110,115,.22)}100%{border-color:rgba(184,145,74,.45);box-shadow:none}}
.lrow-h{gap:3px;margin-bottom:2px;min-height:38px}
.lgrip{width:28px;height:38px;color:#A88A55;border-radius:10px}
.lrow-t{font-size:13.5px;font-weight:700;color:#3B2F22}
.lbtn{width:36px;height:36px;border-radius:50%;border:1.3px solid #CBAA6C;background:rgba(255,255,255,.55);color:#8C6828}
.lbtn svg{width:17px;height:17px}
.lbtn.ldel{color:#9A4F45;border-color:#D9AAA2;margin-inline-start:1px}
.lbtn.lsz{font:700 13px/1 var(--ui,inherit);letter-spacing:-.5px;color:#8E4A4F;border-color:var(--pink-l)}
.lbtn.lsz sub,.lbtn.lsz sup{font-size:10px;vertical-align:baseline;position:relative}
.lbtn.lsz sub{top:2px}.lbtn.lsz sup{top:-3px}
.lpin{font-size:14px;padding:0 4px;background:none}
.lrow-f .field input,.lrow-f .field textarea{padding:7px 11px;border-radius:10px;border:1px solid #D7BF95;background:#fff}
.lrow-f .field textarea{min-height:54px;line-height:1.45}
.lrow-f .field input:focus,.lrow-f .field textarea:focus{border-color:#B8914A;box-shadow:0 0 0 3px rgba(184,145,74,.16)}
.lrow-f .field.off input,.lrow-f .field.off textarea{background:#FBF7F0}
.lrow-f.multi{gap:0 8px}
.lrow-f.multi .field{margin-bottom:5px}
.lrow-f.multi .field>span{font-size:12px;margin-bottom:2px;color:#6F604D}
.lrow-h .reset{color:#8E4A4F}
.restore{border-color:var(--pink-l);background:#FBF1EF}
.rest-b{border-color:var(--pink);color:#8E4A4F}
.colbox{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:6px 10px;border-radius:14px;background:#FBF4EA;border:1px solid #EADBC2}
.cb-l{flex:0 0 auto;font-size:13px;font-weight:700;color:#3B2F22}
.colrow{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:3px 2px}
.colrow::-webkit-scrollbar{display:none}
.csw{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:2px solid #fff;background:var(--c);box-shadow:0 0 0 1px #D7BF95;cursor:pointer;padding:0}
.csw-o{width:auto;padding:0 10px;border-radius:999px;background:#fff;font:700 12px/1 inherit;color:#6F604D}
.csw.on{box-shadow:0 0 0 2.5px var(--pink)}
.fontbox{border-color:#EADBC2;background:linear-gradient(180deg,#FFFDF9,#F8EEE4)}
.fb-t::after{content:"";display:inline-block;width:6px;height:6px;margin-inline-start:7px;transform:rotate(45deg) translateY(-2px);background:var(--pink)}
.fchip.on{border-color:var(--pink);background:var(--pink-s);color:#6E3A3E;box-shadow:0 0 0 3px rgba(191,110,115,.16)}
/* sticky preview dock (phones) */
.dock{position:fixed;left:0;right:0;z-index:16;height:clamp(220px,40vh,380px);display:flex;justify-content:center;align-items:stretch;padding:8px 0 10px;
  background:linear-gradient(180deg,rgba(251,246,236,.98),rgba(248,240,229,.96));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid #E6D3B3;box-shadow:0 10px 22px rgba(59,47,34,.14);animation:dockIn .22s ease}
.dock[hidden]{display:none}
@keyframes dockIn{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
.dock-cv{padding:0;border:0;background:none;height:100%;cursor:zoom-in}
.dock-cv canvas{display:block;height:100%;width:auto;aspect-ratio:9/16;border-radius:10px;box-shadow:0 6px 16px rgba(60,40,10,.22),0 0 0 1px rgba(184,145,74,.35)}
.dock-b{position:absolute;bottom:12px;inset-inline-start:12px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.dock-z{min-height:38px;padding:0 13px;border-radius:999px;border:1px solid var(--pink-l);background:#fff;color:#8E4A4F;font:700 13px/1 inherit;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.dock-x{width:38px;height:38px;border-radius:50%;border:1px solid #E1CDA8;background:#fff;color:#8C6828;display:grid;place-items:center;padding:0}
.zoomv{position:fixed;inset:0;z-index:70;background:rgba(30,22,12,.86);display:grid;place-items:center;animation:fadebg .2s ease}
.zoomv[hidden]{display:none}
.zoomv canvas{max-height:92vh;max-width:94vw;width:auto;height:92vh;aspect-ratio:9/16;object-fit:contain;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.zoom-x{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);font-size:18px}
@media (min-width:900px){.dock{display:none!important}}
/* countdown (invitation page + its preview) */
.cd-title{display:flex;align-items:center;justify-content:center;gap:10px;font-family:"Amiri",serif;font-weight:700}
.iv .cd-title{font-size:22px;color:var(--tt);margin-bottom:14px}
.cd-title i{position:relative;flex:0 1 58px;height:1px;background:linear-gradient(90deg,transparent,var(--to))}
.cd-title i:first-child{transform:scaleX(-1)}
.cd-title i::after{content:"";position:absolute;left:-2px;top:-3px;width:6px;height:6px;transform:rotate(45deg);background:var(--to)}
.cd-x{direction:rtl}
.iv .cd-x{gap:10px}
.cd-x span{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.iv .cd-x span{border-radius:18px;padding:13px 2px 10px;background:linear-gradient(180deg,#fff 0%,var(--ts) 100%);border:1px solid color-mix(in srgb,var(--to) 50%,transparent);box-shadow:0 6px 16px color-mix(in srgb,var(--tp) 10%,transparent),inset 0 1px 0 #fff}
.cd-x span::before{content:"";position:absolute;top:0;left:26%;right:26%;height:2px;border-radius:0 0 3px 3px;background:var(--to);opacity:.75}
.iv .cd-x b{font-family:"Amiri",serif;font-weight:700;font-size:32px;line-height:1.15;color:var(--tp);font-variant-numeric:tabular-nums}
.iv .cd-x small{font-size:12px;margin-top:1px;color:var(--tm);letter-spacing:.2px}
.sm .cd-title{font-size:16px;color:var(--tt);margin-bottom:9px}
.sm .cd-title i{flex-basis:36px}
.sm .cd-x span{border-radius:13px;padding:8px 0 6px;background:linear-gradient(180deg,#fff 0%,var(--ts) 100%);color:var(--tp);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--to) 50%,transparent)}
.sm .cd-x b{font-family:"Amiri",serif;font-size:21px;color:var(--tp)}
.sm .cd-x small{font-size:10.5px}
.cd-x b.tk{animation:cdTk .5s cubic-bezier(.2,.7,.2,1)}
@keyframes cdTk{0%{opacity:0;transform:translateY(-45%)}60%{opacity:1}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cd-x b.tk{animation:none}}

.datebox{margin:0 0 10px;padding:8px 10px 9px;border-radius:14px;background:#FBF4EA;border:1px solid #EADBC2}
.datebox[hidden]{display:none}
.db-top{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.db-top input{flex:1;min-width:0;min-height:40px;padding:6px 10px;border-radius:10px;border:1px solid #D7BF95;background:#fff;font:inherit;font-size:16px;color:#3B2F22}
.db-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;border-radius:12px;background:#F1E6D4}
.db-b{min-height:36px;border:0;border-radius:9px;background:transparent;font:inherit;font-size:14px;font-weight:700;color:#6F604D;cursor:pointer}
.db-b.on{background:#fff;color:#8E4A4F;box-shadow:0 2px 8px rgba(59,47,34,.12),inset 0 -2px 0 var(--pink)}
.db-hint{margin:6px 0 0;font-size:12px;color:#7A6B58}

.nchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.nchip{min-height:34px;padding:0 11px;border-radius:999px;border:1px solid var(--pink-l);background:#fff;color:#8E4A4F;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.nchip:active{background:var(--pink-s)}

/* v7d: editor chips + bottom sheets */
.echips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 14px}
.echip{position:relative;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;border-radius:16px;border:1px solid rgba(184,145,74,.45);background:linear-gradient(180deg,#FFFDF9,#F7EFE2);color:#3B2F22;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 8px rgba(59,47,34,.06)}
.echip[hidden]{display:none}
.echip i{font-style:normal;font-size:21px;line-height:1}
.echip span{font-size:13px;font-weight:700}
.echip::after{content:"";position:absolute;bottom:6px;width:16px;height:2px;border-radius:2px;background:var(--pink);opacity:.55}
.echip:active{transform:scale(.97)}
.echip.on{border-color:var(--pink);background:#FBF1EF;box-shadow:0 0 0 3px rgba(191,110,115,.16)}
.form[hidden]{display:none}
.es-bg{position:fixed;inset:0;z-index:15;background:rgba(40,28,16,.10)}
.es-bg[hidden]{display:none}
.esheet{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:560px;margin:0 auto;max-height:min(60vh,60vh);max-height:min(60vh,60svh);display:flex;flex-direction:column;background:#FFFBF5;border-radius:22px 22px 0 0;box-shadow:0 -12px 34px rgba(59,47,34,.22);border-top:1px solid #EADBC2;animation:esUp .24s cubic-bezier(.2,.8,.2,1)}
.esheet[hidden]{display:none}
.esheet::before{content:"";position:absolute;top:0;left:0;width:120px;height:42px;background:url(fl_tr.webp) no-repeat 0 0/contain;opacity:.35;pointer-events:none;border-radius:22px 0 0 0}
@keyframes esUp{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
.es-h{position:relative;display:flex;align-items:center;gap:8px;padding:14px 14px 8px}
.es-grab{position:absolute;top:6px;left:50%;width:42px;height:4px;margin-left:-21px;border-radius:4px;background:#E2D2B6}
.es-h b{flex:1;font-size:17px;color:#3B2F22}
.es-tools{display:flex;gap:6px;align-items:center}
.es-tools .etool{min-height:38px;padding:0 12px;font-size:13.5px}
.es-tools .undo-b:not(:disabled){color:#8E4A4F;border-color:var(--pink);background:var(--pink-s)}
.es-x{width:38px;height:38px;border-radius:50%;border:1px solid #E1CDA8;background:#fff;color:#6F604D;font-size:15px;padding:0}
.es-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 12px 10px}
.es-f{padding:8px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #F0E4D0;background:#FFFBF5}
.es-done{min-height:48px;padding:10px;font-size:16px}
.esec .form-top{display:none}
.esec .form-head{margin-bottom:8px}
.esec .types{margin:0}
.esec .types::before{display:none}
.esec .types .form-title{display:none}
.esec .fontbox{margin-top:0}
.esec .datebox,.esec .colbox{margin-top:0}
body.sheet-open{overflow:hidden}
.dock-x{display:none}
.placebox,.notebox{display:grid;gap:10px;padding-top:2px}
.pl-f{display:block}
.pl-f span{display:block;font-size:13px;font-weight:700;color:#3B2F22;margin-bottom:4px}
.pl-f input{width:100%;box-sizing:border-box;min-height:44px;padding:8px 11px;border-radius:11px;border:1px solid #D7BF95;background:#fff;font:inherit;font-size:16px}
.pl-f input:disabled{background:#F6F0E6;color:#A2907A}
.pl-qr{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:12px;background:#FBF4EA;border:1px solid #EADBC2;font-size:14px;font-weight:700;color:#3B2F22}
.pl-qr input{width:22px;height:22px;accent-color:#BF6E73}
.pl-h{margin:0;font-size:12.5px;color:#7A6B58}
@media (max-height:720px){.esheet{max-height:62vh}.echip{min-height:56px}}
.qrdom{position:absolute;left:0;top:0;width:1080px;height:1920px;pointer-events:none}

/* v7d: guest greeting, add-to-calendar, guest links box */
.iv-guest{position:absolute;z-index:4;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);margin:0;padding:9px 18px;border-radius:999px;white-space:nowrap;
  background:rgba(255,253,248,.93);color:var(--tp);font-family:"Amiri",serif;font-size:19px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.18),inset 0 0 0 1px color-mix(in srgb,var(--to) 55%,transparent);animation:pop .5s ease}
.iv-guest[hidden]{display:none}
.iv .iv-cal .iv-calb{font-size:14px;min-height:48px;padding:10px 8px;text-decoration:none}
.iv .iv-cal .btn-pay{background:var(--ta);background:linear-gradient(135deg,var(--ta),color-mix(in srgb,var(--ta) 82%,#fff));box-shadow:0 8px 18px color-mix(in srgb,var(--ta) 28%,transparent)}
.iv .iv-cal .btn-ghost{border-color:var(--tl);color:var(--tp);background:#fff}
.oc-guests{margin-top:14px;padding:14px 12px;border-radius:16px;background:#FBF4EA;border:1px solid #EADBC2;text-align:right}
.oc-guests textarea{width:100%;box-sizing:border-box;margin:8px 0;padding:10px 12px;border-radius:12px;border:1px solid #D7BF95;font:inherit;font-size:16px;line-height:1.6;background:#fff;resize:vertical}
.oc-glist{display:grid;gap:6px;margin-top:10px}
.oc-grow{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:12px;background:#fff;border:1px solid #EFE2CB}
.oc-gn{flex:1;min-width:0;font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-gb{flex:0 0 auto;min-height:38px;padding:0 12px;border-radius:999px;border:1px solid #D7BF95;background:#fff;color:#8C6828;font:inherit;font-size:13px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer}
.oc-gwa{background:#1FA855;border-color:#1FA855;color:#fff}
.oc-csv{margin:6px 0 10px;min-height:46px;font-size:15px}

/* ===== v7d final layout: calm v7c look, preview sticky on the LEFT, fields on the RIGHT ===== */
@media (max-width:899px){
  body.ed-split #editor:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) 41%;column-gap:10px;align-items:start}
  body.ed-split #editor > *{grid-column:1 / -1}
  body.ed-split #editor > .stage-wrap{grid-column:2;grid-row:2;position:sticky;top:64px;padding-top:6px;align-self:start;z-index:2}
  body.ed-split #editor > .form{grid-column:1;grid-row:2;min-width:0}
  body.ed-split #editor > .ocard{grid-row:1}
  body.ed-split .stage-wrap .stage{width:100%;border-radius:10px}
  body.ed-split .stage-wrap .sm{width:100%}
  body.ed-split .stage-wrap .ed-label{font-size:11.5px;margin:0 0 4px;text-align:center}
  body.ed-split .stage-note{font-size:10.5px;line-height:1.4;margin-top:6px;text-align:center}
  body.ed-split .is-video .stage{border-radius:14px;box-shadow:0 0 0 3px #3B2F22,0 0 0 4px rgba(184,145,74,.55),0 10px 20px rgba(60,40,10,.25)}
}
.form::before,.form::after{opacity:.35}
.form-head{margin-bottom:10px}
.form-top{flex-wrap:wrap;gap:6px}
.form-title::after{display:none}
#redoBtn{display:none}
.form-hint{font-size:12px}
.fields{gap:10px}
.lrow,.lrow:nth-child(even),.lrow.pinned{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.lrow.drag{background:#FFFDF9;box-shadow:0 12px 26px rgba(59,47,34,.22);border-radius:12px;padding:4px}
@keyframes lrowHi{0%{background:rgba(191,110,115,.14)}100%{background:transparent}}
.lrow.moved{animation:lrowHi 1.1s ease-out;border-radius:10px}
.lrow-h{min-height:30px;gap:2px;margin-bottom:4px}
.lgrip{width:22px;height:30px;color:#C9B48E;border-radius:8px}
.lgrip svg{width:18px;height:18px}
.lrow-t{font-size:14px;font-weight:600;color:var(--ink)}
.lopt{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:0;background:none;font-size:15px;padding:0;opacity:.6;cursor:pointer}
.lopt.on{opacity:1;background:#F6EEDD}
.lrow-h .lbtn.ldel{width:32px;height:32px;border:0;background:none;color:#B0756E;margin:0}
.lrow-h .lbtn.ldel svg{width:15px;height:15px}
.lrow-o{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.lrow-o[hidden]{display:none}
.lrow-o .lbtn{width:36px;height:36px;border-radius:50%;border:1.3px solid #E2D0AE;background:#fff;color:#8C6828}
.lrow-o .lbtn.lsz{color:#8C6828;border-color:#E2D0AE}
.lrow-o .lpin{flex-basis:100%;font-size:11.5px;color:#A2907A;background:#F6F0E6;border-radius:999px;padding:3px 9px}
.lrow-f .field input,.lrow-f .field textarea{border:1.5px solid #E8DCC5;background:#FFFDF9;border-radius:12px;padding:9px 11px;font-size:16px}
.lrow-f .field textarea{min-height:64px}
.lrow-f.multi{grid-template-columns:1fr;gap:0}
.lrow-f.multi .field>span{font-size:12.5px;font-weight:600;color:var(--muted)}
.lrow-h .reset{font-size:12px;padding:4px 2px}
.restore{background:#FBF7EF;border-color:#E2D2B2}
.rest-b{border-color:var(--gold);color:var(--gold-d)}
.datebox,.placebox,.fontbox{margin-top:14px}
.placebox{padding:0}
.fontbox{padding:12px 10px;background:#FFFDF9;border-color:#EDE2CC}
.fontbox .fb-l{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--ink)}
.fchip{min-width:64px;min-height:46px;font-size:18px}
.fontbox .colbox{margin:10px 0 0;padding:0;background:none;border:0}
.nchips{margin-top:5px}
.nchip{min-height:32px;font-size:12px}
#editor > .types{margin:6px 0 10px}
#editor > .types .form-title{font-size:15px;margin:0 0 8px;text-align:center}
#editor > .types .type-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#editor > .types .tcard{flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 4px 9px;min-height:0;border-radius:16px;margin:0}
#editor > .types .t-ic{width:38px;height:38px;border-radius:12px}
#editor > .types .t-body{display:flex;flex-direction:column;align-items:center}
#editor > .types .t-row{flex-direction:column;align-items:center;gap:1px}
#editor > .types .t-name{font-size:13.5px}
#editor > .types .t-price{font-size:13px}
#editor > .types .t-desc{display:none}
#editor > .types .tcard.on{border-color:#B8914A;background:linear-gradient(180deg,#FFF8EA,#F5E7CB);box-shadow:0 0 0 3px rgba(184,145,74,.25)}

@media (max-width:899px){
  body.ed-split #editor > .types{grid-row:3}
  body.ed-split #editor > .actions{grid-row:4}
  body.ed-split #editor > .mini,body.ed-split #editor > #sheetHold{grid-row:5}
}

/* ===== v7e: clearer line titles, per-box ✕, date label, font list + colour palette pop-ups, two columns on every width ===== */
.form-hint{font-size:13px;color:#5E4E3C;line-height:1.55}
.lrow-h{min-height:34px;margin-bottom:5px}
.lrow-t{flex:0 1 auto;font-family:'El Messiri','Amiri',var(--ui);font-size:15.5px;font-weight:700;color:#4A3428;line-height:1.35;
  padding:2px 11px 3px;border-radius:10px;background:#F8EEDC;box-shadow:inset 0 -2px 0 rgba(184,145,74,.55);margin-inline-end:auto;letter-spacing:0;white-space:normal;overflow:visible;text-overflow:clip;max-width:100%;overflow-wrap:normal;word-break:normal}
.lrow:has(.field.solo.off) .lrow-t::after{font-family:var(--ui);color:#8E7C66}
.lrow-f.multi .field>span,.lrow-f.pair .field>span,.field>span{font-size:13px;font-weight:700;color:#5E4630}
.lrow-f.pair .field>span .fl{font-family:'El Messiri','Amiri',var(--ui)}
.lrow-f.pair .field>span{display:flex;align-items:center;gap:4px;margin:4px 0 3px}
.fdel{flex:0 0 auto;width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;color:#B0756E;border-radius:8px;padding:0;cursor:pointer;margin-inline-start:2px}
.lrow-f.pair .field .reset{margin-inline-start:auto}
.lrow-f.pair .field .reset[hidden] + .fdel{margin-inline-start:auto}
.fdel svg{width:14px;height:14px}
.fdel:active{background:#F6E6E2}
.rest-b{font-family:'El Messiri','Amiri',var(--ui);font-weight:700}
.fontbox .fb-l,.cb-l,.rest-t{font-family:'El Messiri','Amiri',var(--ui);font-size:14.5px;font-weight:700;color:#4A3428}
/* date */
.datebox .db-l{margin:0 0 6px;font-family:'El Messiri','Amiri',var(--ui);font-size:15px;font-weight:700;color:#4A3428}
.dtw{position:relative;display:block;margin-bottom:8px}
.dtw input{display:block;width:100%;box-sizing:border-box;min-height:44px;padding:6px 12px;border-radius:12px;border:1.5px solid #D7BF95;background:#fff;font:inherit;font-size:16px;color:#3B2F22}
.dtw .dtph{display:none;position:absolute;inset:0 12px;align-items:center;pointer-events:none;color:#8C6828;font-weight:700;font-size:14.5px}
.dtw.empty .dtph{display:flex}
.dtw.empty input{color:transparent}
.dtw.empty input::-webkit-datetime-edit{color:transparent}
.db-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.db-hint{font-size:12.5px;color:#6F5E4A}
/* font + colour pickers */
.pick{display:flex;align-items:center;gap:8px;width:100%;min-height:46px;box-sizing:border-box;padding:6px 12px;border-radius:12px;border:1.5px solid #D7BF95;background:#fff;color:#3B2F22;font:inherit;font-size:17px;cursor:pointer;text-align:start}
.pick span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick b{flex:0 0 auto;color:#B8914A;font-size:13px}
.pick:active{background:#FBF4E8}
.cpick{font-size:15px;font-weight:600}
.colbox{display:block}
.colbox .cb-l{display:block;margin:0 0 6px}
.colrow{display:block}
.cdot{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),0 0 0 2px #fff,0 0 0 3px #E2D0AE}
.cdot-o{background:conic-gradient(#B8914A,#BF6E73,#3B2F22,#9CAF88,#B8914A)}
html.epop-on{overflow:hidden}
.epop{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.epop[hidden]{display:none}
.epop-bd{position:absolute;inset:0;background:rgba(40,28,16,.38)}
.epop-p{position:relative;width:100%;max-width:460px;max-height:78vh;display:flex;flex-direction:column;background:#FFFDF9;border-radius:20px 20px 0 0;box-shadow:0 -10px 30px rgba(40,28,16,.25);animation:epUp .22s ease-out;padding-bottom:env(safe-area-inset-bottom)}
@keyframes epUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:700px){.epop{align-items:center}.epop-p{border-radius:20px;max-height:80vh}}
.epop-h{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px;border-bottom:1px solid #EFE4CF}
.epop-t{font-family:'El Messiri','Amiri',var(--ui);font-size:16.5px;font-weight:700;color:#4A3428}
.epop-x{width:36px;height:36px;border:0;border-radius:50%;background:#F6EEDD;color:#6F5E4A;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.epop-c{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 14px 16px}
.fgrp{margin:12px 2px 6px;font-size:12.5px;font-weight:700;color:#9C7A3C}
.flist{display:grid;gap:6px}
.fopt{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 14px;border-radius:12px;border:1.5px solid #EDE2CC;background:#fff;color:#3B2F22;font-size:21px;cursor:pointer;text-align:start}
.fopt span{flex:1}
.fopt small{font-size:14px;color:#9A8670}
.fopt i{font-style:normal;color:#fff;background:#B8914A;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--ui);font-size:14px}
.fopt.on{border-color:#B8914A;background:#FFF8EA;box-shadow:0 0 0 2px rgba(184,145,74,.25)}
.copt-o{display:block;width:100%;min-height:44px;margin:4px 0 10px;border-radius:12px;border:1.5px solid #EDE2CC;background:#fff;font:inherit;font-size:14.5px;font-weight:700;color:#4A3428;cursor:pointer}
.copt-o.on{border-color:#B8914A;background:#FFF8EA}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:9px}
.copt{aspect-ratio:1;width:100%;min-height:40px;border-radius:50%;border:0;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);cursor:pointer;padding:0}
.copt.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 0 0 3px #fff,0 0 0 5px #B8914A}
.cother{display:flex;align-items:center;gap:10px;margin-top:12px;min-height:46px;padding:4px 12px;border-radius:12px;border:1.5px dashed #D7BF95;font-weight:700;color:#4A3428;cursor:pointer}
.cother input{width:40px;height:34px;border:0;padding:0;background:none;cursor:pointer}
/* two columns on tablets, laptops and wide screens too: preview sticky on the LEFT, fields on the RIGHT */
@media (min-width:900px){
  body.ed-split main:has(> #editor:not([hidden])){max-width:1180px}
  body.ed-split #editor:not([hidden]){display:grid;grid-template-columns:minmax(0,560px) minmax(0,520px);column-gap:40px;justify-content:center;align-items:start}
  body.ed-split #editor > *{grid-column:1 / -1}
  body.ed-split #editor > .ocard{grid-row:1}
  body.ed-split #editor > .form{grid-column:1;grid-row:2;min-width:0}
  body.ed-split #editor > .types{grid-column:1;grid-row:3}
  body.ed-split #editor > .actions{grid-column:1;grid-row:4}
  body.ed-split #editor > .mini,body.ed-split #editor > #sheetHold{grid-column:1;grid-row:5}
  body.ed-split #editor > .stage-wrap{grid-column:2;grid-row:2 / span 4;position:sticky;top:72px;align-self:start;padding-top:6px;z-index:2}
  body.ed-split .stage-wrap .stage{width:min(100%,calc((100vh - 140px) * .5625),420px);margin:0 auto}
  body.ed-split .stage-wrap .sm{width:min(100%,420px);margin:0 auto}
  body.ed-split .stage-wrap .ed-label{text-align:center}
  body.ed-split .mini{display:none!important}
}

@media (max-width:899px){
  body.ed-split .lrow-t{font-size:14px;padding:1px 8px 2px;line-height:1.4}
  body.ed-split .lrow-h{gap:1px}
  body.ed-split .lrow-h .lopt,body.ed-split .lrow-h .lbtn.ldel{width:28px;height:30px}
  body.ed-split .lgrip{width:20px}
}
.dtw .dtph{inset:0 40px}
/* v7e: one fixed site-wide background in khotba_2's own tones (ivory paper → warm stone), its anemone sprig faint in two corners, a soft glow behind the preview */
body:not(.invite-mode){background:#F8F6F1}
body:not(.invite-mode)::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(75% 50% at 50% 0%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 70%),linear-gradient(160deg,#FAF8F3 0%,#F5F2EC 50%,#EFEAE1 100%)}
body:not(.invite-mode)::after{content:"";position:fixed;right:-18px;bottom:-14px;width:min(36vw,250px);aspect-ratio:340/304;z-index:-1;pointer-events:none;opacity:.42;
  background:url(k2_sprig.webp?v=8e1) no-repeat center/contain}
html:has(body:not(.invite-mode))::after{content:"";position:fixed;left:-18px;top:70px;width:min(30vw,210px);aspect-ratio:340/304;z-index:-1;pointer-events:none;opacity:.32;
  background:url(k2_sprig.webp?v=8e1) no-repeat center/contain;transform:scale(-1,-1)}
.topbar{background:rgba(250,248,243,.94)}
.stage-wrap{position:relative}
.stage-wrap::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.8),rgba(255,246,240,.4) 60%,rgba(255,255,255,0))}

/* v7e: home hero card is a landscape rectangle on tablets and laptops (text, button and florals keep their size) */
@media (min-width:700px){
  #home.screen{overflow-x:visible}
  .hero{margin-left:calc((100% - min(92vw,1000px)) / 2);margin-right:calc((100% - min(92vw,1000px)) / 2)}
  .hero-in{padding-top:58px;padding-bottom:46px}
}
@media (min-width:1024px){
  .hero{margin-left:calc((100% - min(1060px,100vw - 64px)) / 2);margin-right:calc((100% - min(1060px,100vw - 64px)) / 2)}
}

/* v7f: home hero only a little wider than the original near-square on tablets/laptops (text, button, florals unchanged) */
@media (min-width:700px){
  .hero{margin-left:calc((100% - min(88vw,780px)) / 2);margin-right:calc((100% - min(88vw,780px)) / 2)}
}
@media (min-width:1024px){
  .hero{margin-left:calc((100% - 780px) / 2);margin-right:calc((100% - 780px) / 2)}
}

/* v7f: «مين فرحتنا Invites؟» — cream card, gold title, the site's roses */
#s8{padding-top:46px}
.about{position:relative;isolation:isolate;text-align:center;padding:62px 24px 40px;border-radius:24px;overflow:hidden;
  background:radial-gradient(90% 70% at 50% 0%,#FFFFFF 0%,rgba(255,255,255,0) 70%),linear-gradient(170deg,#FFFBF4 0%,#FBF2E6 55%,#F6E9DC 100%);
  border:1px solid rgba(184,145,74,.26);box-shadow:0 14px 32px rgba(120,86,50,.10),0 2px 6px rgba(120,86,50,.06)}
.about::before{content:"";position:absolute;inset:8px;border-radius:17px;border:.6px solid rgba(184,145,74,.38);pointer-events:none;z-index:1}
.about-fl{position:absolute;pointer-events:none;user-select:none;z-index:0;opacity:.9;filter:drop-shadow(0 3px 6px rgba(120,60,50,.10))}
.about-fl-tr{top:-10px;right:-12px;width:min(62%,250px)}
.about-fl-bl{bottom:-16px;left:-14px;width:min(30%,124px)}
.about-title{position:relative;z-index:2;margin:0;font-family:"El Messiri",var(--ui);font-weight:700;font-size:23px;line-height:1.5;
  background:linear-gradient(100deg,#A07A33,#D9B25F 35%,#B88A3E 60%,#C9963E);-webkit-background-clip:text;background-clip:text;color:transparent}
.about-orn{position:relative;z-index:2;margin:4px 0 10px}
.about-text{position:relative;z-index:2;margin:0 auto;max-width:27em;font-size:15.5px;line-height:1.95;color:#5E4D3B;text-wrap:pretty}
@media (min-width:700px){.about{padding:66px 44px 44px}.about-title{font-size:25px}}

/* v7f: footer TikTok + © */
.foot-tt{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;font-size:14.5px;text-decoration:none;
  padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(60,44,20,.06)}
.foot-tt svg{color:#111}
.foot-tt:active{transform:scale(.97)}
.foot-copy{font-size:11.5px;color:#9C8A70}

/* v7f: smaller, calmer line-title pills (same colour, pill and gold underline) */
.lrow-t,body.ed-split .lrow-t{font-size:13px;font-weight:600;padding:2px 10px;line-height:1.45}

/* v7f: wide screens (tablet landscape, laptops) — bigger sticky preview on the LEFT that fills most of the screen height, fields use the rest */
@media (min-width:900px){
  body.ed-split main:has(> #editor:not([hidden])){max-width:min(1440px,100vw - 32px)}
  body.ed-split #editor:not([hidden]){grid-template-columns:minmax(360px,700px) auto;column-gap:clamp(24px,3vw,48px);justify-content:center}
  body.ed-split #editor > .stage-wrap{top:84px;padding-top:2px}
  body.ed-split .stage-wrap .stage{width:min(560px,calc((100vh - 120px) * .5625),calc(100vw - 480px));margin:0 auto}
  @supports (height:100dvh){body.ed-split .stage-wrap .stage{width:min(560px,calc((100vh - 120px) * .5625),calc(100vw - 480px));width:min(560px,calc((100dvh - 120px) * .5625),calc(100vw - 480px))}}
  body.ed-split .stage-wrap .sm{width:420px;max-width:calc(100vw - 480px)}
  body.ed-split .stage-wrap .ed-label{margin:0 0 4px}
}

/* ===== v7g ===== */
/* one fixed site-wide gradient: cream/ivory → the logo's soft pink (fixed layer, works on Android Chrome too) */
body:not(.invite-mode){background:#FFF9F2}
body:not(.invite-mode)::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(70% 45% at 50% 0%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 70%),linear-gradient(160deg,#FFF9F2 0%,#FBEFEA 45%,#F6DCDD 100%)}
.topbar{background:rgba(255,249,242,.92)}
.foot{border-top-color:rgba(184,145,74,.28)}
.foot-copy bdi{unicode-bidi:isolate}

/* premium secondary buttons in the editor: cream pill, 1px gold border, thin gold line icons, no emoji */
.etool,.es-tools .etool,.rest-b,.btn-add,.lrow-h .reset,.field .reset{font-family:'El Messiri','IBM Plex Sans Arabic',var(--ui);font-weight:600;color:#4A3428;
  background:linear-gradient(180deg,#FFFDF8,#FBF3E6);border:1px solid rgba(184,145,74,.75);border-radius:999px;box-shadow:0 1px 2px rgba(74,52,40,.08),0 3px 8px rgba(74,52,40,.06);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:background .15s,box-shadow .15s,transform .1s,opacity .15s;-webkit-tap-highlight-color:transparent}
.etool,.es-tools .etool{min-height:36px;padding:0 14px;font-size:13.5px}
.etool#redoBtn{padding:0 10px}
.etool .ic,.rest-b .ic,.btn-add .ic,.lopt .ic{color:#B8914A;flex:0 0 auto}
.etool:not(:disabled):hover,.rest-b:hover,.btn-add:hover,.lrow-h .reset:hover,.field .reset:hover{background:#FFF7E9;box-shadow:0 2px 4px rgba(74,52,40,.10),0 6px 14px rgba(74,52,40,.08)}
.etool:not(:disabled):active,.rest-b:active,.btn-add:active,.lrow-h .reset:active,.field .reset:active{transform:scale(.97);background:#F7EBD6}
.etool:disabled{opacity:.42;box-shadow:none;cursor:default}
.es-tools .undo-b:not(:disabled){color:#4A3428;border-color:rgba(184,145,74,.75);background:linear-gradient(180deg,#FFFDF8,#FBF3E6)}
.rest-b{min-height:36px;padding:0 14px;font-size:13.5px;color:#4A3428}
.btn-add{min-height:40px;padding:0 18px;font-size:14px;width:fit-content;margin:12px auto 0;border-style:solid}
.lrow-h .reset,.field .reset{min-height:26px;padding:0 10px;font-size:12px;box-shadow:none}
.lopt{width:32px;height:32px;border-radius:50%;border:1px solid rgba(184,145,74,.6);background:#FFFDF8;opacity:1;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.lopt.on{background:#F8EEDC;border-color:#B8914A;box-shadow:0 0 0 2px rgba(184,145,74,.18)}
body.ed-split .lrow-h .lopt{width:30px;height:30px}

/* v7g: tablets & laptops (≥768px) — preview column ~55%, fields ~45%; the card is as big as the screen height allows (9:16) */
@media (min-width:768px){
  body.ed-split main:has(> #editor:not([hidden])){max-width:none;padding-left:clamp(12px,2vw,28px);padding-right:clamp(12px,2vw,28px)}
  body.ed-split #editor:not([hidden]){display:grid;grid-template-columns:minmax(300px,45fr) minmax(0,55fr);column-gap:clamp(16px,2.5vw,36px);justify-content:stretch;align-items:start}
  body.ed-split #editor > *{grid-column:1 / -1}
  body.ed-split #editor > .ocard{grid-row:1}
  body.ed-split #editor > .form{grid-column:1;grid-row:2;min-width:0}
  body.ed-split #editor > .types{grid-column:1;grid-row:3}
  body.ed-split #editor > .actions{grid-column:1;grid-row:4}
  body.ed-split #editor > .mini,body.ed-split #editor > #sheetHold{grid-column:1;grid-row:5}
  body.ed-split #editor > .stage-wrap{grid-column:2;grid-row:2 / span 4;position:sticky;top:84px;align-self:start;padding-top:0;z-index:2;min-width:0}
  body.ed-split .stage-wrap .ed-label{font-size:12px;margin:0 0 4px;text-align:center;line-height:1.4}
  body.ed-split .stage-wrap .stage{width:min(100%,calc((100vh - 100px) * .5625));margin:0 auto;border-radius:12px}
  @supports (height:100dvh){body.ed-split .stage-wrap .stage{width:min(100%,calc((100vh - 100px) * .5625));width:min(100%,calc((100dvh - 100px) * .5625))}}
  body.ed-split .stage-wrap .sm{width:min(100%,420px);margin:0 auto}
  body.ed-split .stage-note{font-size:11.5px;margin-top:4px}
  body.ed-split .mini{display:none!important}
  /* compact fields */
  body.ed-split #editor .field input,body.ed-split #editor .field textarea{font-size:15px}
  body.ed-split .lrow-t{font-size:13px}
}

/* v7g: Hijri picker, «يوافق» line, digits toggle */
.datebox .db-seg{margin-bottom:8px}
.hpick{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:'m m' 'd y';gap:6px;margin-bottom:6px}
.hpick .hsel:nth-child(1){grid-area:d}.hpick .hsel:nth-child(2){grid-area:m}.hpick .hsel:nth-child(3){grid-area:y}
@media (min-width:768px){.hpick{grid-template-columns:1fr 1.6fr 1.3fr;grid-template-areas:'d m y'}}
.hsel{display:flex;flex-direction:column;gap:2px;min-width:0}
.hsel span{font-size:11.5px;font-weight:700;color:#7A6550}
.hsel select{width:100%;min-width:0;min-height:44px;padding:4px 8px;border-radius:12px;border:1.5px solid #D7BF95;background:#fff;font:inherit;font-size:15px;color:#3B2F22;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#B8914A 50%),linear-gradient(135deg,#B8914A 50%,transparent 50%);background-position:12px 55%,7px 55%;background-size:5px 5px;background-repeat:no-repeat;padding-left:22px}
.db-eq{margin:2px 0 4px;font-size:13px;font-weight:600;color:#7A5A2E}
.digbox{margin:4px 0 12px;position:relative;z-index:1}
.digbox .db-l{margin:0 0 6px;font-family:'El Messiri','Amiri',var(--ui);font-size:15px;font-weight:700;color:#4A3428}
.digbox .db-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:12px;background:#F3EAD9}

/* v7g: colour picker */
.epop.epop-cp .epop-bd{background:rgba(40,28,16,.10)}
.epop.epop-cp .epop-p{max-width:420px;border:1px solid rgba(184,145,74,.55);background:linear-gradient(180deg,#FFFDF8,#FBF4E8)}
.cp{display:flex;flex-direction:column;gap:12px;padding:4px 2px 2px}
.cp-sv{position:relative;height:150px;border-radius:14px;touch-action:none;cursor:crosshair;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  background-image:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,rgba(255,255,255,0))}
.cp-hue{position:relative;height:18px;border-radius:999px;touch-action:none;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  background:linear-gradient(to right,#f00 0%,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,#f00 100%)}
.cp-k{position:absolute;width:22px;height:22px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.3);transform:translate(-50%,-50%);pointer-events:none}
.cp-hue .cp-k{top:50%}
.cp-row{display:flex;align-items:center;gap:10px}
.cp-dot{flex:0 0 auto;width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),0 0 0 3px #fff,0 0 0 4px #D7BF95;background:conic-gradient(#B8914A,#BF6E73,#3B2F22,#9CAF88,#B8914A)}
.cp-row input{flex:1;min-width:0;min-height:40px;padding:4px 12px;border-radius:12px;border:1.5px solid #D7BF95;background:#fff;font:600 15px/1.2 ui-monospace,Menlo,monospace;color:#3B2F22;text-transform:uppercase}
.cp-orig{flex:0 0 auto;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(184,145,74,.75);background:#FFFDF8;font-family:'El Messiri',var(--ui);font-weight:600;font-size:13.5px;color:#4A3428;cursor:pointer}
.cp-l{margin:0;font-size:12.5px;font-weight:700;color:#9C7A3C;text-align:right}
.cp-sw{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cp-s{aspect-ratio:1;width:100%;border-radius:50%;border:0;padding:0;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);cursor:pointer}
.cp-s:active{transform:scale(.92)}
.cp-done{margin-top:2px}

.digbox .db-b{font-size:13.5px;line-height:1.25;padding:4px 2px}
@media (max-width:767px){
  .cp{gap:9px}
  .cp-sv{height:112px}
  .cp-sw{grid-template-columns:repeat(7,1fr);gap:6px}
  .cp-s{max-width:34px;justify-self:center}
  .cp-dot{width:32px;height:32px}
  .cp-row input,.cp-orig{min-height:36px}
  .cp-done{min-height:44px;padding:8px}
  .epop.epop-cp .epop-c{padding:6px 12px 10px}
  .epop.epop-cp .epop-h{padding:8px 14px 6px}
}

/* ===== v7j: side menu «شو مناسبتك؟» — calm and soft: ivory, one small sprig, a clean list with hairline gold dividers ===== */
.drawer{background:linear-gradient(180deg,#FFFCF7 0%,#FFFAF4 70%,#FCEFEC 100%);border-inline-start:1px solid rgba(184,145,74,.22);display:flex;flex-direction:column;isolation:isolate;overflow-x:hidden;animation:drFade .28s ease both}
@keyframes drFade{from{opacity:0}to{opacity:1}}
.drawer::before{content:"";position:absolute;top:-4px;left:-6px;width:96px;height:86px;background:url(k2_sprig.webp?v=8e1) no-repeat center/contain;transform:scaleX(-1);opacity:.55;pointer-events:none;z-index:-1}
.drawer-head{align-items:center;margin:6px 4px 10px}
.drawer-head h3{margin:0;font-family:'El Messiri','Amiri',var(--ui);font-size:22px;font-weight:700;line-height:1.4;color:#B08A45}
.drawer-x{background:transparent;box-shadow:none;border:1px solid rgba(184,145,74,.35);color:#9C7A3C}
.drawer-list{gap:0;flex:1 0 auto;align-content:start}
.drawer-list li + li{border-top:.5px solid rgba(184,145,74,.3)}
.drawer .occ{gap:14px;padding:18px 4px;border:0;border-radius:0;background:transparent;box-shadow:none;transition:background .15s}
.drawer .occ:active{background:rgba(184,145,74,.06)}
.drawer .occ img{width:44px;height:44px;object-fit:cover;object-position:center 30%;border-radius:12px;box-shadow:none;border:0}
.drawer .occ-tx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.drawer .occ-name{font-family:'El Messiri','Amiri',var(--ui);font-weight:600;font-size:16px;color:#4A3428;line-height:1.35}
.drawer .occ-count{font-size:12px;font-weight:500;color:#A88B57;background:none;border:0;padding:0;line-height:1.4}
.drawer .occ svg{color:#C4A267;width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.drawer{animation:none}}
.dr-foot{display:flex;justify-content:center;gap:18px;margin-top:14px;padding-top:12px;border-top:.5px solid rgba(184,145,74,.3)}
.dr-link{display:inline-flex;align-items:center;gap:5px;color:#8C7A62;font-size:12.5px;font-weight:500;text-decoration:none}
.dr-link svg{color:#B8914A;width:14px;height:14px}
/* v7h: tablets & laptops (Reham's reference) — one centred group with normal side margins: the preview card in its own soft framed panel
   on the left showing the WHOLE design (fits the screen height), the fields panel on the right at its live size, a modest gap between them */
@media (min-width:768px){
  body.ed-split main:has(> #editor:not([hidden])){max-width:1120px;padding-left:24px;padding-right:24px}
  body.ed-split #editor:not([hidden]){grid-template-columns:minmax(300px,540px) auto;column-gap:clamp(24px,3.2vw,44px);justify-content:center}
  body.ed-split #editor > .stage-wrap{top:84px;padding:10px 12px 8px;border-radius:20px;background:linear-gradient(180deg,rgba(255,253,248,.92),rgba(251,242,236,.88));
    border:1px solid rgba(184,145,74,.32);box-shadow:0 10px 28px rgba(120,86,50,.10),0 2px 6px rgba(120,86,50,.06)}
  body.ed-split #editor > .stage-wrap::before{display:none}
  body.ed-split .stage-wrap .stage{width:min(calc((100vh - 150px) * .5625),calc(100vw - 460px),560px);max-width:none;margin:0 auto}
  @supports (height:100dvh){body.ed-split .stage-wrap .stage{width:min(calc((100vh - 150px) * .5625),calc(100vw - 460px),560px);width:min(calc((100dvh - 150px) * .5625),calc(100vw - 460px),560px)}}
  body.ed-split .stage-wrap .sm{width:min(calc(100vw - 460px),420px)}
}

/* v7h: every line header = title on the right, then ONE fixed group [✏️][✕] at the far left, identical on every line; a paired box's own ✕ sits inside its input */
.lrow-h{display:flex;align-items:center;gap:6px}
.lact{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;margin-inline-start:auto}
.lrow-t + .lact,.lrow-h .reset + .lact{margin-inline-start:auto}
.lrow-h .reset{margin-inline-start:auto}
.lrow-h .reset + .lact{margin-inline-start:6px}
.lact .lopt,.lact .lbtn.ldel,body.ed-split .lrow-h .lact .lopt,body.ed-split .lrow-h .lact .lbtn.ldel{width:32px;height:32px;min-width:32px;border-radius:50%;border:1px solid rgba(184,145,74,.6);background:#FFFDF8;color:#B0756E;
  display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;opacity:1;box-shadow:0 1px 2px rgba(74,52,40,.06);cursor:pointer}
.lact .lopt{color:#B8914A}
.lact .lbtn.ldel svg{width:14px;height:14px}
.lact .lopt .ic{width:16px;height:16px}
.fin{position:relative;display:block}
.fin input,.fin textarea{padding-left:40px!important}
.fin .fdel,.lrow-f.pair .field .fin .fdel{position:absolute;left:7px;top:50%;transform:translateY(-50%);width:26px;height:26px;margin:0;border-radius:50%;border:1px solid rgba(176,117,110,.45);background:#FFF8F6;color:#B0756E;display:inline-flex;align-items:center;justify-content:center;padding:0}
.fin textarea + .fdel{top:12px;transform:none}
.fin .fdel svg{width:11px;height:11px}
.lrow-f.pair .field>span{min-height:24px}

@media (min-width:768px) and (max-width:1023px){
  body.ed-split #editor:not([hidden]){grid-template-columns:minmax(0,1fr) auto;column-gap:20px}
  body.ed-split .stage-wrap .stage{width:min(calc((100vh - 150px) * .5625),calc(100vw - 440px))}
  @supports (height:100dvh){body.ed-split .stage-wrap .stage{width:min(calc((100vh - 150px) * .5625),calc(100vw - 440px));width:min(calc((100dvh - 150px) * .5625),calc(100vw - 440px))}}
}

/* v7j: compact date controls inside the date line's own row */
.datebox.inrow{margin:8px 0 2px;padding:8px 8px 6px;border:1px solid rgba(184,145,74,.28);border-radius:14px;background:rgba(255,253,248,.7);box-shadow:none}
.datebox.inrow .db-l,.datebox.inrow .db-hint,.datebox.inrow .hsel>span,.digbox.inrow .db-l{display:none}
.datebox.inrow .db-seg,.digbox.inrow .db-seg{display:inline-grid;grid-template-columns:auto auto;gap:2px;padding:2px;border-radius:999px;background:#F3EAD9;margin:0 0 6px}
.datebox.inrow .db-b,.digbox.inrow .db-b{min-height:28px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:1}
.datebox.inrow .db-b.on,.digbox.inrow .db-b.on{background:#fff;color:#7A5A2E;box-shadow:0 1px 3px rgba(59,47,34,.12)}
.datebox.inrow .hpick{grid-template-columns:.9fr 1.5fr 1.1fr;grid-template-areas:'d m y';gap:4px;margin-bottom:4px}
.datebox.inrow .hsel select{min-height:36px;font-size:13.5px;border-width:1px;border-radius:10px;padding:2px 18px 2px 6px;background-position:9px 55%,4px 55%}
.datebox.inrow .db-eq{font-size:11.5px;font-weight:500;color:#8C7A62;margin:0 0 4px}
.digbox.inrow{margin:2px 0 0;display:flex;align-items:center;gap:6px}
.digbox.inrow .db-seg{margin:0}
.digbox.inrow::before{content:"الأرقام";font-size:11.5px;color:#8C7A62}
.field.date-gen > input,.field.date-gen > textarea,.lrow-f .field.date-gen > span.fin,.lrow-f.pair .field.date-gen > span.fin{display:none}
.field.date-gen{margin-bottom:0}
.lrow-f .datebox.inrow{grid-column:1 / -1;width:100%}
.lrow.date-only .lrow-f .field.date-gen{display:none}
.lrow.has-date .lrow-h .reset{display:none}
@media (max-width:767px){
  .datebox.inrow .hpick{grid-template-columns:1fr 1fr;grid-template-areas:'m m' 'd y'}
  .datebox.inrow .db-b,.digbox.inrow .db-b{padding:0 9px;font-size:12px}
}

.btn-add.inlist{margin:2px auto 12px}
.digbox.inrow .db-b{min-width:46px;font-size:13px}

/* ===== v7m: home FAQ accordion ===== */
.faq{display:grid;gap:8px}
.faq-it{border-radius:16px;background:linear-gradient(180deg,#FFFDF8,#FBF3E8);border:1px solid rgba(184,145,74,.28);box-shadow:0 2px 8px rgba(120,86,50,.05);overflow:hidden}
.faq-it summary{list-style:none;display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;font-family:'El Messiri','IBM Plex Sans Arabic',var(--ui);font-weight:600;font-size:15px;color:#4A3428}
.faq-it summary::-webkit-details-marker{display:none}
.faq-it summary span{flex:1}
.faq-ch{flex:0 0 auto;color:#B8914A;transition:transform .2s ease}
.faq-it[open] .faq-ch{transform:rotate(-90deg)}
.faq-it p{margin:0;padding:0 16px 14px;border-top:.5px solid rgba(184,145,74,.3);padding-top:10px;font-size:14px;line-height:1.8;color:#5E4D3B}
.faq-more{text-align:center;margin:14px 0 0;font-size:14px;color:#6E5D4B}
.faq-more a{color:#9C7A3C;font-weight:700}
/* ===== v7m: «راسلينا» floating chat ===== */
.chat-btn{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:35;height:52px;min-width:52px;padding:0;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#FFFDF8,#FBF0E3);border:1px solid rgba(184,145,74,.8);color:#9C7A3C;
  box-shadow:0 6px 18px rgba(74,52,40,.18),0 1px 3px rgba(74,52,40,.1);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.chat-btn:active{transform:scale(.95)}
.chat-lbl{display:none;font-family:'El Messiri',var(--ui);font-weight:600;font-size:14px;color:#4A3428}
@media (min-width:900px){.chat-btn{padding:0 18px 0 16px}.chat-lbl{display:inline}}
@media (max-width:767px){.chat-btn{height:48px;min-width:48px;opacity:.96}}
body.invite-mode .chat-btn,body.invite-mode .chat-p{display:none!important}
body:has(.sheet:not([hidden])) .chat-btn,body:has(.epop:not([hidden])) .chat-btn,body:has(.drawer:not([hidden])) .chat-btn{display:none}
.chat-p{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 62px);z-index:36;width:min(360px,calc(100vw - 24px));max-height:min(70vh,560px);
  display:flex;flex-direction:column;border-radius:20px;background:#FFFCF7;border:1px solid rgba(184,145,74,.45);box-shadow:0 18px 44px rgba(74,52,40,.22);overflow:hidden;
  opacity:0;transform:translateY(12px) scale(.98);transform-origin:bottom right;transition:opacity .2s ease,transform .2s ease}
.chat-p.on{opacity:1;transform:none}
.chat-h{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;border-bottom:.5px solid rgba(184,145,74,.35);background:linear-gradient(180deg,#FFFDF8,#FBF2E6)}
.chat-h b{font-family:'El Messiri',var(--ui);font-size:17px;color:#B08A45}
.chat-x{width:32px;height:32px;border-radius:50%;border:1px solid rgba(184,145,74,.4);background:#FFFDF8;color:#9C7A3C;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.chat-x svg{width:14px;height:14px}
.chat-b{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px;display:flex;flex-direction:column;gap:8px}
.cb{max-width:86%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.7}
.cb-us{align-self:flex-start;background:#F6ECDD;color:#4A3428;border-bottom-right-radius:4px}
.cb-me{align-self:flex-end;background:#fff;border:1px solid rgba(184,145,74,.45);color:#6E5D4B;border-bottom-left-radius:4px}
.cb-in{animation:cbIn .25s ease both}
@keyframes cbIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cq{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.cq-b{display:block;text-align:right;width:100%;padding:8px 12px;border-radius:12px;border:1px solid rgba(184,145,74,.45);background:#FFFDF8;color:#4A3428;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none}
.cq-b:active{background:#F7EBD6}
.cq-wa{color:#1E7F45;border-color:rgba(31,168,85,.45);background:#F3FBF6}
.cq-solo{width:auto;align-self:flex-start}
.cfb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:#8C7A62}
.cfb button{padding:3px 12px;border-radius:999px;border:1px solid rgba(184,145,74,.55);background:#FFFDF8;font:inherit;font-size:12.5px;color:#4A3428;cursor:pointer}
@media (prefers-reduced-motion:reduce){.chat-p,.cb-in{transition:none;animation:none}}

/* v7m: date fields generated by the picker are hidden entirely (no empty captions); the weekday line is a compact dropdown */
.lrow-f .field.date-gen,.lrow-f.pair .field.date-gen,.lrow-f.multi .field.date-gen{display:none!important}
.field.wday > input,.lrow-f .field.wday > span.fin,.lrow-f.pair .field.wday > span.fin{display:none!important}
.wsel{display:block;width:100%;min-height:36px;margin-top:2px;padding:2px 22px 2px 8px;border-radius:10px;border:1px solid #D7BF95;background:#fff;font:inherit;font-size:14px;color:#3B2F22;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#B8914A 50%),linear-gradient(135deg,#B8914A 50%,transparent 50%);background-position:12px 55%,7px 55%;background-size:5px 5px;background-repeat:no-repeat}

/* v7m: compact grouped date block */
.datebox.inrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.datebox.inrow > *{margin:0}
.datebox.inrow .db-wd{flex:1 1 120px;min-width:0}
.datebox.inrow .db-wd .wsel{margin:0;min-height:34px;font-size:13.5px}
.datebox.inrow > .db-seg{flex:0 0 auto;margin:0}
.datebox.inrow > .hpick{flex:1 1 100%;margin:0}
.datebox.inrow > .field.in-db{flex:1 1 100%;margin:0}
.datebox.inrow > .field.in-db > span:not(.fin):not(.tm-row){display:none!important}
.datebox.inrow > .field.in-db input{min-height:36px;font-size:14px;padding-top:4px;padding-bottom:4px}
.datebox.inrow > .db-eq{flex:1 1 auto;margin:0;min-height:0}
.datebox.inrow > .db-eq:empty{display:none}
.datebox.inrow > .digbox{flex:0 0 auto;margin:0 0 0 auto}

/* chat button: on phones in the editor it sits bottom-LEFT, in the empty space under the preview, so it never covers the fields */
@media (max-width:767px){
  body:has(#editor:not([hidden])) .chat-btn{right:auto;left:max(12px,env(safe-area-inset-left))}
  body:has(#editor:not([hidden])) .chat-p{right:auto;left:max(12px,env(safe-area-inset-left));transform-origin:bottom left}
}
body:has(#editor:not([hidden])) #editor{padding-bottom:64px}

/* ===== v7n: move lines on the preview ===== */
#stage #art .ln[data-id] span{cursor:pointer}
#stage #art .ln.sel,#stage #art .ln.sel *{touch-action:none;cursor:grab}
#stage.mv-drag,#stage.mv-drag *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.mvbox{position:absolute;z-index:6;pointer-events:none;border:1.5px dashed #B8914A;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.mvbox::before,.mvbox::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;border:1.5px solid #B8914A;top:50%;margin-top:-5px}
.mvbox::before{right:-5px}.mvbox::after{left:-5px}
.mv-reset{display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);pointer-events:auto;white-space:nowrap;padding:5px 12px;border-radius:999px;border:1px solid rgba(184,145,74,.7);background:#FFFDF8;color:#7A5B2A;font:inherit;font-size:12px;font-weight:700;box-shadow:0 3px 10px rgba(60,40,20,.18);cursor:pointer}
.mvbox.low .mv-reset{top:auto;bottom:calc(100% + 6px)}
.mvbox.can-reset .mv-reset{display:block}
@media (max-width:767px){.mv-reset{font-size:11px;padding:3px 9px}}

/* v7p: time box + «ص | م» */
.tm-row{display:flex;align-items:center;gap:6px;width:100%}
.tm-row > input,.tm-row > .fin{flex:1 1 auto;min-width:0}
.mer-seg{display:inline-flex;flex:0 0 auto;border:1px solid #D7BF95;border-radius:999px;overflow:hidden;background:#fff}
.mer-seg button{border:0;background:transparent;padding:0 11px;min-height:32px;font:inherit;font-size:13.5px;font-weight:700;color:#8C7A62;cursor:pointer}
.mer-seg button[aria-pressed=true]{background:linear-gradient(180deg,#E9CF96,#C9A15A);color:#3B2F22}
.datebox.inrow > .field.in-db{flex:1 1 100%!important;width:100%!important;max-width:none!important}
.datebox .tm-row .fdel{display:none!important}
.datebox .tm-row input{padding-left:8px!important;padding-right:10px!important;text-align:center}
@media (max-width:767px){.mer-seg button{padding:0 9px}}

/* v7q: group title on one line */
.lrow.has-date .lrow-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:767px){.lrow.has-date .lrow-h{flex-wrap:wrap;row-gap:4px}.lrow.has-date .lrow-t{font-size:12px;overflow:visible;text-overflow:clip;max-width:none;flex:0 0 auto}}
/* v7q: «move any line» pill + one-time hand demo */
.mv-pill{display:block;width:fit-content;max-width:100%;margin:0 auto 10px;padding:7px 14px;border-radius:999px;background:#FFFBF2;border:1px solid rgba(184,145,74,.75);color:#4A3428;font-size:14px;font-weight:600;line-height:1.5;text-align:center;box-shadow:0 2px 8px rgba(120,86,50,.08)}
.mv-pill span{margin-left:4px}
.is-site .mv-pill{display:none}
@media (max-width:767px){.mv-pill{font-size:11.5px;padding:5px 10px;margin-bottom:6px;line-height:1.45}}
.mv-hand{position:absolute;z-index:7;font-size:28px;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));animation:mvHand 2.2s ease-in-out both}
@keyframes mvHand{0%{opacity:0;transform:translate(0,14px)}15%{opacity:1;transform:translate(0,0)}45%{transform:translate(-26px,-14px)}75%{transform:translate(0,0);opacity:1}100%{opacity:0;transform:translate(0,0)}}
#art .ln.mv-demo{animation:mvLine 2.2s ease-in-out both}
@keyframes mvLine{0%,15%{transform:translate(0,0)}45%{transform:translate(-26px,-14px)}75%,100%{transform:translate(0,0)}}

/* ===== v7r home (≥900px only; phones unchanged) ===== */
.hero-phone,.hstrip{display:none}
@media (min-width:900px){
  main:has(> #home:not([hidden])){max-width:1160px;padding-left:28px;padding-right:28px}
  .hero-wrap{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:clamp(24px,3vw,40px);margin:28px auto 8px}
  .hero-wrap > .hero{flex:0 1 760px;min-width:0;margin:0!important}
  
  .hero-phone{display:flex;flex:0 0 auto;justify-content:center;align-items:center;padding:12px 10px;position:relative;z-index:3}
  .hero-phone .hv{padding:0}
  .hero-phone .hv .stage.hv-stage{width:208px;border-radius:30px;box-shadow:0 0 0 9px #2E241B,0 0 0 10px rgba(184,145,74,.6),0 26px 50px rgba(60,40,20,.30)}
  .hero-title{font-size:38px}
  .hero-sub{font-size:16.5px;max-width:24em}
  #s6{display:none}
  .hstrip{display:flex;justify-content:center;gap:clamp(14px,3vw,40px);list-style:none;margin:14px auto 2px;padding:7px 18px;width:fit-content;border-radius:999px;background:rgba(255,253,248,.4);border:.5px solid rgba(184,145,74,.22)}
  .hstrip li{display:flex;align-items:center;gap:6px;font-family:'El Messiri',var(--ui);font-weight:500;font-size:13px;color:#8A7356}
  .hs-ic{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;color:#C4A169}
  .hs-ic svg{width:15px;height:15px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
  .ideas{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .faq{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px 14px}
  .about{max-width:820px;margin:0 auto}
  .qt{max-width:820px;margin:0 auto}
}
@media (min-width:1300px){.cards{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* v7r: «اختاري مناسبتك» = small squares, all 8 in one row on tablet/laptop */
@media (min-width:900px){
  .cards{display:flex!important;flex-wrap:nowrap;justify-content:center;gap:clamp(8px,1.2vw,16px)}
  .cards .card{flex:0 1 128px;min-width:0;width:auto;display:flex;flex-direction:column;align-items:center;background:transparent;box-shadow:none;border:0;padding:0;text-align:center}
  .cards .card .thumb{width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;display:block;box-shadow:0 4px 14px rgba(120,86,50,.12);border:1px solid rgba(184,145,74,.3)}
  .cards .card .thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
  .cards .card .card-body{padding:8px 2px 0;display:flex;flex-direction:column;align-items:center;gap:1px;background:transparent}
  .cards .card .card-title{font-size:15px}
  .cards .card .card-count{font-size:12px}
}

/* v7r: plain cream→pink gradient only (side roses removed) */
body:not(.invite-mode)::after,html:has(body:not(.invite-mode))::after{display:none!important;content:none!important}
/* v7r: horizontal strips scroll with the mouse */
.mq.mq-js{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mq.mq-js::-webkit-scrollbar{display:none}
.mq.mq-js .mq-track{animation:none!important;transform:none!important}
.hs-grab{cursor:grab}
.hs-drag,.hs-drag *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.hs-drag a{pointer-events:none}
.mq img,.pal-row img{-webkit-user-drag:none;user-select:none}
.hs-host{position:relative}
.hs-arr{display:none}
@media (hover:hover) and (pointer:fine){
  .hs-arr{display:inline-flex;position:absolute;top:calc(50% - 26px);z-index:4;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;padding:0;cursor:pointer;
    background:#FFFDF8;border:1px solid rgba(184,145,74,.7);color:#9C7A3C;box-shadow:0 3px 10px rgba(74,52,40,.15);opacity:.92;transition:opacity .2s,transform .15s}
  .hs-arr:hover{opacity:1;transform:scale(1.06)}
  .hs-prev{right:4px}.hs-next{left:4px}
}
/* v7r: quote card controls */
.qt-arr{display:none}
@media (hover:hover) and (pointer:fine){
  .qt-arr{display:inline-flex;position:absolute;top:50%;margin-top:-15px;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;padding:0;border:1px solid rgba(184,145,74,.55);background:rgba(255,253,248,.9);color:#9C7A3C;cursor:pointer;opacity:0;transition:opacity .2s}
  .qt:hover .qt-arr{opacity:1}
  .qt-prev{right:12px}.qt-next{left:12px}
}
.qt-dots i{cursor:pointer}


/* v7r: editor fields clearer (Reham: too faint) — elegant, not heavy */
#editor .lrow-f .field input,#editor .lrow-f .field textarea,#editor .xline input,body.ed-split #editor .lrow-f .field input,body.ed-split #editor .lrow-f .field textarea{border:1.5px solid #B8914A!important;background:#FFFCF6!important}
#editor .lrow-f .field input:focus,#editor .lrow-f .field textarea:focus,#editor .xline input:focus{border-color:#9C7A3C!important;box-shadow:0 0 0 3px rgba(184,145,74,.2)!important}
#editor .lrow-t,body.ed-split #editor .lrow-t{background:linear-gradient(180deg,#F2E1BE,#E9D3A6)!important;color:#4A3428!important;font-weight:700!important;border:1px solid rgba(168,130,63,.55)!important}
#editor .lact .lopt,#editor .lact .lbtn.ldel{border:1.5px solid #A8823F!important;color:#8C6828!important;background:#FFFCF6!important}
#editor .lact .lbtn.ldel{color:#8A4B3C!important}
#editor .form-hint{color:#5E4630!important}

/* v7s: «لمسة فلسطينية» = original strip, cards ~+10% (124px like «ننصحك فيه ✨») */
.pal-it{width:124px}
@media (min-width:900px){.pal-row{justify-content:safe center}}
/* v7s: the 3-point strip always centred under the hero group, never clipped */
@media (min-width:900px){
  .hstrip{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center;box-sizing:border-box;width:-webkit-fit-content;width:fit-content;max-width:calc(100% - 16px);margin:14px auto 2px!important;row-gap:4px;position:relative;left:auto;right:auto;transform:none}
  .hstrip li{white-space:nowrap}
}
/* v7s: «اختاري مناسبتك» on phones = 4 per row × 2 rows of small squares */
@media (max-width:899px){
  #cards.cards{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px 8px!important;padding:0 2px}
  #cards .card{display:flex;flex-direction:column;align-items:center;min-width:0;width:auto;background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important;text-align:center;overflow:visible}
  #cards .card .thumb{display:block;width:100%;aspect-ratio:1/1;height:auto!important;border-radius:14px;overflow:hidden;box-shadow:0 3px 10px rgba(120,86,50,.12);border:1px solid rgba(184,145,74,.3)}
  #cards .card .thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
  #cards .card .card-body{position:static!important;padding:5px 0 0!important;display:flex;flex-direction:column;align-items:center;gap:0;background:transparent!important;color:inherit}
  #cards .card .card-title{font-size:12px!important;line-height:1.35;white-space:nowrap;color:#3B2F22}
  #cards .card .card-count{font-size:10.5px!important;color:#8C7A62}
}

/* ===== v7t ===== */
/* «ف» on the envelope's wax seal */
.brand-l{position:relative;display:inline-block;line-height:0}
.seal-f{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.seal-f text{font-family:'El Messiri','Amiri',serif;font-weight:700;font-size:19px;fill:#FFF6E6;paint-order:stroke;stroke:rgba(120,40,50,.35);stroke-width:.6px}
/* «لمسة فلسطينية» glides like «ننصحك فيه ✨» */
.pal-row.mq-js{direction:ltr;scroll-snap-type:none!important;overflow-x:auto;scrollbar-width:none}
.pal-row.mq-js .pal-it{direction:rtl;scroll-snap-align:none}
@media (min-width:900px){.pal-row{justify-content:flex-start!important}}
/* «اختاري مناسبتك»: 4 × 2 small squares on every screen */
@media (min-width:900px){
  #cards.cards{display:grid!important;grid-template-columns:repeat(4,132px)!important;justify-content:center!important;gap:16px 22px!important}
  #cards .card{flex:none!important;width:auto}
}
/* «كيف بتشتغل؟» more compact */
.how{padding-bottom:4px}
.how .section-head{margin-bottom:4px}
.how .section-title{margin-bottom:0}
.how .section-sub{margin-top:2px}
.steps3{padding:13px 10px 12px!important}
.s3-ic{width:42px!important;height:42px!important}
.s3-ic svg{width:21px!important;height:21px!important}
.steps3 b{margin-top:6px!important;font-size:13px!important}
.s3-t{margin-top:3px!important;font-size:12.5px!important}
.steps3 li.s3-sep{padding-top:15px!important;font-size:13px!important}
/* pickers never cover the card: phones = short bottom sheet, tablet/laptop = side panel */
.epop.ep-ed .epop-bd{display:none}
.epop.ep-ed{pointer-events:none}
.epop.ep-ed .epop-p{pointer-events:auto}
@media (max-width:767px){
  .epop.ep-ed{align-items:flex-end}
  .epop.ep-ed .epop-p{max-height:38vh;max-height:38vh;max-height:38svh;border-radius:16px 16px 0 0;box-shadow:0 -6px 22px rgba(40,28,16,.22)}
  .epop.ep-ed .epop-h{padding:6px 12px 4px}
  .epop.ep-ed .epop-c{padding:4px 10px 8px}
  .epop.ep-ed .fgrp{display:none}
  .epop.ep-ed .flist{display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:4px 0 8px;scrollbar-width:none}
  .epop.ep-ed .flist::-webkit-scrollbar{display:none}
  .epop.ep-ed .fopt{flex:0 0 auto;min-width:104px}
  .epop.ep-ed .cp-sv{height:84px!important}
  .epop.ep-ed .cp-sw{flex-wrap:nowrap!important;overflow-x:auto;display:flex}
  .epop.ep-ed .cp-s{flex:0 0 auto}
  .epop.ep-ed .cp-done,.epop.ep-ed .fp-done{margin-top:6px;min-height:40px}
}
@media (min-width:768px){
  .epop.ep-ed{inset:auto;top:84px;right:18px;bottom:18px;width:min(360px,40vw);align-items:flex-start;justify-content:flex-end}
  .epop.ep-ed .epop-p{max-width:none;width:100%;max-height:calc(100vh - 110px);border-radius:18px;box-shadow:0 12px 34px rgba(40,28,16,.22);border:1px solid rgba(184,145,74,.45)}
}
.fp-done{display:block;width:100%;margin-top:10px}
/* tap-a-line toolbar */
.mvbox .mv-reset{display:none!important}
.lt-bar{position:fixed;z-index:45;display:flex;flex-direction:column;gap:6px;padding:7px;border-radius:14px;background:#FFFCF5;border:1px solid rgba(184,145,74,.75);box-shadow:0 8px 24px rgba(60,40,20,.2);max-width:calc(100vw - 16px)}
.lt-bar[hidden]{display:none}
.lt-r{display:flex;gap:5px}
.lt-r button{border:1px solid rgba(184,145,74,.6);background:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;font-weight:700;color:#4A3428;cursor:pointer;white-space:nowrap}
.lt-r button.on{background:linear-gradient(180deg,#E9CF96,#C9A15A)}
.lt-r button[data-a=reset]{color:#8A4B3C}
.lt-sz{display:flex;align-items:center;gap:6px;direction:ltr}
.lt-sz[hidden]{display:none}
.lt-sz input{flex:1;min-width:110px;accent-color:#B8914A}
.lt-z{width:30px;height:30px;border-radius:50%;border:1px solid rgba(184,145,74,.7);background:#fff;color:#8C6828;font-size:18px;font-weight:700;line-height:1;cursor:pointer;touch-action:none;user-select:none}
.lt-v{min-width:44px;text-align:center;font-size:12.5px;color:#4A3428}
.lt-all{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#5E4630;cursor:pointer}
.lt-all input{accent-color:#B8914A;width:16px;height:16px}
@media (max-width:767px){.lt-r button{padding:5px 9px;font-size:12px}}

/* ===== v8a ===== */
/* hero: strip sits in the cream box's own column, so it is centred exactly under the box */
@media (min-width:900px){
  .hero-wrap{display:grid!important;grid-template-columns:minmax(0,760px) auto;justify-content:center;align-items:center;column-gap:clamp(24px,3vw,40px);row-gap:0}
  .hero-wrap > .hero{grid-column:1;grid-row:1}
  .hero-wrap > .hero-phone{grid-column:2;grid-row:1;align-self:center}
  .hero-wrap > .hstrip{grid-column:1;grid-row:2;justify-self:center;margin:14px 0 2px}
}
/* hero phone: finished designs, always full and visible */
.hp-stage{display:block;position:relative;width:208px;aspect-ratio:9/16;border-radius:30px;overflow:hidden;isolation:isolate;
  background:#FBF3E6 url(d/zawaj_abwab_t.jpg?v=8e1) center/cover no-repeat;
  box-shadow:0 0 0 9px #2E241B,0 0 0 10px rgba(184,145,74,.6),0 26px 50px rgba(60,40,20,.30)}
.hp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease;transform-origin:50% 40%}
.hp-img.on{opacity:1;z-index:1;animation:hpZoom 6.4s ease-out both}
@keyframes hpZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
.hp-shine{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,246,222,.38) 50%,transparent 65%);background-size:250% 100%;animation:hpShine 5.2s ease-in-out infinite}
@keyframes hpShine{0%,55%{background-position:130% 0}100%{background-position:-30% 0}}
.hp-stage .vbadge{display:inline-flex!important;align-items:center;gap:5px;position:absolute;top:12px;right:12px;z-index:4;padding:4px 10px 4px 11px;border-radius:999px;background:rgba(59,47,34,.72);color:#FCEFD2;font:600 12px/1.4 var(--ui)}
.hp-stage .vprog{display:block!important;position:absolute;left:14px;right:14px;bottom:12px;height:3.5px;border-radius:3px;background:rgba(59,47,34,.28);overflow:hidden;z-index:4}
.hp-stage .vprog i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#E9C878,#B8914A);transform-origin:right center;transform:scaleX(0);transition:transform .12s linear;border-radius:3px}
@media (prefers-reduced-motion:reduce){.hp-img.on{animation:none}.hp-shine{animation:none;opacity:0}}

@media (min-width:900px){
  .hero-wrap > .hstrip{max-width:100%;box-sizing:border-box;flex-wrap:wrap;row-gap:4px;column-gap:clamp(10px,2.2vw,36px);padding:7px clamp(10px,1.4vw,18px)}
  .hero-wrap > .hstrip li{font-size:clamp(11px,1.05vw,13px);white-space:nowrap}
}
/* «لمسة فلسطينية»: smaller and slimmer (Reham) */
.pal-head{margin:8px 0 8px!important}
.pal-head .section-title{margin-bottom:0}
.pal-row{padding-top:1px!important;padding-bottom:6px!important;gap:8px!important}
.pal-it{width:96px!important}
.pal-img{border-radius:10px!important;border-width:.5px!important;box-shadow:0 3px 9px rgba(90,40,20,.10)!important}
.pal-l{margin-top:4px!important;font-size:11px!important}

/* «كيف بتشتغل؟»: narrower, softer centred card */
.steps3{max-width:720px;margin-left:auto!important;margin-right:auto!important;border-radius:26px!important;border-color:rgba(184,145,74,.13)!important;box-shadow:0 6px 22px rgba(120,86,50,.07)!important}
@media (max-width:767px){.steps3{margin-left:8px!important;margin-right:8px!important;border-radius:22px!important;padding:11px 6px 10px!important}}

/* strip on phones + tablets too (Reham: every change on all devices) — inside the box width, centred, wraps, never clipped */
@media (max-width:899px){
  .hstrip{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center;list-style:none;box-sizing:border-box;
    width:fit-content;max-width:calc(100vw - 40px);margin:10px auto 2px;padding:6px 12px;row-gap:3px;column-gap:clamp(8px,2.6vw,22px);
    border-radius:18px;background:rgba(255,253,248,.45);border:.5px solid rgba(184,145,74,.25)}
  .hstrip li{display:flex;align-items:center;gap:4px;white-space:nowrap;font-family:'El Messiri',var(--ui);font-weight:500;font-size:clamp(11px,3.1vw,13px);color:#8A7356}
  .hstrip .hs-ic{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center;color:#C4A169}
  .hstrip .hs-ic svg{width:13px;height:13px}
}

/* ===== v8b: phones + tablets portrait look like the laptop, scaled down ===== */
@media (max-width:899px){
  #s6{display:none!important}
  .hero-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) min(34%,200px);column-gap:clamp(8px,2.4vw,18px);row-gap:0;align-items:center;margin:12px 0 4px}
  .hero-wrap > .hero{grid-column:1;grid-row:1;margin:0!important;border-radius:18px}
  .hero-wrap > .hero-phone{display:flex!important;grid-column:2;grid-row:1;justify-content:center;align-items:center;padding:5px 5px 5px 2px}
  .hero-wrap > .hstrip{grid-column:1;grid-row:2;justify-self:center;max-width:100%!important;margin:8px 0 0!important;padding:5px 9px!important;column-gap:10px!important}
  .hero-wrap > .hstrip li{font-size:clamp(10.5px,2.8vw,12.5px)!important}
  .hp-stage{width:100%;border-radius:clamp(14px,4vw,24px);box-shadow:0 0 0 clamp(4px,1.3vw,7px) #2E241B,0 0 0 clamp(5px,1.5vw,8px) rgba(184,145,74,.6),0 14px 28px rgba(60,40,20,.26)}
  .hp-stage .vbadge{top:7px!important;right:7px!important;padding:2px 7px!important;font-size:9.5px!important;gap:3px!important}
  .hp-stage .vbadge svg{width:8px;height:8px}
  .hp-stage .vprog{left:9px!important;right:9px!important;bottom:8px!important;height:2.5px!important}
  .hero-wrap .hero-in{padding:clamp(34px,9vw,60px) clamp(10px,3vw,24px) clamp(26px,7vw,44px)!important}
  .hero-wrap .hero-kicker{font-size:clamp(10.5px,2.8vw,13px)!important;margin-bottom:6px!important;gap:6px!important}
  .hero-wrap .hero-title{font-size:clamp(19px,5.6vw,30px)!important;line-height:1.4!important}
  .hero-wrap .hero-sub{font-size:clamp(11.5px,3vw,14.5px)!important;margin-top:6px!important;line-height:1.65!important}
  .hero-wrap .hero-cta{font-size:clamp(12.5px,3.3vw,15px)!important;padding:clamp(8px,2.2vw,12px) clamp(14px,4vw,22px)!important;margin-top:clamp(10px,3vw,18px)!important;min-width:0!important;min-height:0!important}
  .hero-wrap .hero-rose-tr{width:62%!important;height:auto!important}
  .hero-wrap .hero-rose-bl{width:38%!important;height:auto!important}
  .hero-wrap .hero-frame{inset:7px!important;border-radius:13px!important}
}
@media (max-width:699px){
  .topbar{padding:4px 10px!important;min-height:0}
  .brand img{width:128px!important;height:auto!important}
  main{padding-left:10px!important;padding-right:10px!important}
  .section{padding-top:20px!important}
  .section-head{margin-bottom:12px!important}
  .section-title{font-size:18px!important}
  .section-sub{font-size:12.5px!important;margin-top:4px!important}
}

@media (max-width:899px){
  .hero-wrap .hero-rose-bl{width:30%!important;bottom:0!important}
  .hero-wrap > .hstrip{position:relative;z-index:5;background:rgba(255,253,248,.82)!important;margin-top:12px!important}
}

/* v8b: no ⋮⋮ reordering in the field list */
#editor .lgrip{display:none!important}

/* ===== v8c hero ٣b: envelope + card sliding out + «ف» wax seal + logo roses (Reham approved; ~30% smaller) ===== */
.hero.h3{container-type:inline-size;width:100%;max-width:430px;height:auto;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;margin:8px auto 0!important;isolation:isolate}
.hero.h3::before,.hero.h3::after{display:none!important}
.h3-box{--u:calc(100cqw / 640);position:relative;width:100%;height:calc(100cqw * 650 / 640)}
@supports not (width:1cqw){.h3-box{--u:.56px;height:364px}}
.h3 .h3-back{position:absolute;left:0;right:0;bottom:0;height:calc(300 * var(--u));background:linear-gradient(180deg,#EADCC6,#E3D2B9);border-radius:calc(8 * var(--u));box-shadow:0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(120,80,50,.16)}
.h3 .h3-topflap{position:absolute;left:0;right:0;bottom:calc(298 * var(--u));height:calc(150 * var(--u));background:linear-gradient(0deg,#E6D6BE,#EFE3D1);clip-path:polygon(0 100%,50% 0,100% 100%)}
.h3 .h3-card{position:absolute;left:calc(46 * var(--u));right:calc(46 * var(--u));top:0;height:calc(480 * var(--u));padding:calc(44 * var(--u)) calc(30 * var(--u)) 0;background:linear-gradient(180deg,#FFFEFB,#FBF6EE);box-shadow:0 -6px 30px rgba(120,80,50,.10);z-index:1;display:block}
.h3 .h3-card::before{content:"";position:absolute;inset:calc(14 * var(--u));border:1px solid rgba(184,145,74,.7);pointer-events:none}
.h3 .h3-card::after{content:"";position:absolute;inset:calc(20 * var(--u));border:.6px solid rgba(184,145,74,.35);pointer-events:none}
.h3 .h3-front{position:absolute;left:0;right:0;bottom:0;height:calc(300 * var(--u));border-radius:0 0 calc(8 * var(--u)) calc(8 * var(--u));z-index:3;background:linear-gradient(180deg,#F3E9DA 0%,#EBDDC8 100%);clip-path:polygon(0 0,50% 40%,100% 0,100% 100%,0 100%);filter:drop-shadow(0 -2px 4px rgba(120,80,50,.12))}
.h3 .h3-front::before{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%)}
.h3 .h3-roses{position:absolute;z-index:4;width:calc(250 * var(--u));height:auto;left:calc(-34 * var(--u));top:calc(282 * var(--u));transform:scaleX(-1) rotate(-8deg);filter:drop-shadow(0 3px 5px rgba(120,70,60,.14));pointer-events:none}
.h3 .h3-seal{position:absolute;z-index:5;left:50%;top:calc(418 * var(--u));width:calc(92 * var(--u));height:calc(92 * var(--u));transform:translateX(-50%);display:flex;align-items:center;justify-content:center;pointer-events:none}
.h3 .h3-seal img{position:absolute;inset:calc(-6 * var(--u));width:calc(104 * var(--u));height:calc(104 * var(--u));object-fit:contain;filter:drop-shadow(0 4px 6px rgba(90,60,30,.28))}
.h3 .h3-seal span{position:relative;font-family:'Amiri',serif;font-weight:700;font-size:calc(40 * var(--u));line-height:1;color:#8E6A2E;margin-top:calc(-6 * var(--u));text-shadow:0 1px 0 rgba(255,240,200,.55),0 -1px 0 rgba(90,60,20,.35)}
.h3 .hero-cta{position:absolute!important;z-index:6;left:50%;bottom:calc(46 * var(--u));transform:translateX(-50%);margin:0!important;white-space:nowrap;font-size:clamp(11.5px,calc(24 * var(--u)),16px)!important;padding:clamp(6px,calc(15 * var(--u)),12px) clamp(13px,calc(40 * var(--u)),28px)!important;min-width:0!important;min-height:0!important}
.h3 .hero-kicker{margin:0 0 calc(8 * var(--u))!important;font-size:clamp(9.5px,calc(21 * var(--u)),13.5px)!important;gap:calc(14 * var(--u))!important}
.h3 .hero-kicker::before,.h3 .hero-kicker::after{content:"";width:calc(40 * var(--u));height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.h3 .hero-kicker::after{transform:scaleX(-1)}
.h3 .hero-title{font-size:clamp(15px,calc(46 * var(--u)),31px)!important;line-height:1.36!important;margin:0!important}
.h3 .hero-sub{max-width:20em;font-size:clamp(10px,calc(21.5 * var(--u)),15px)!important;margin:calc(8 * var(--u)) auto 0!important;line-height:1.6!important}
.hero-wrap.h3w > .hero-phone{align-self:center}
@media (min-width:900px){
  .hero-wrap.h3w{grid-template-columns:minmax(0,430px) auto!important;column-gap:clamp(36px,4.5vw,64px)!important}
  .hero-wrap.h3w > .hero.h3{flex:none;margin:0 auto!important}
  .hero-wrap.h3w .hp-stage{width:200px}
}
@media (max-width:899px){
  .hero-wrap.h3w > .hero.h3{max-width:none;margin:0!important}
  .hero-wrap.h3w > .hero-phone{padding:4px 4px 4px 2px}
}

/* ===== v8c: tap-a-line toolbar — lighter, slimmer, ~60% (Reham) ===== */
.lt-bar{gap:4px!important;padding:4px 5px!important;border-radius:11px!important;background:rgba(255,251,243,.84)!important;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border:1px solid rgba(184,145,74,.42)!important;box-shadow:0 2px 9px rgba(60,40,20,.09)!important}
.lt-r{gap:3px!important}
.lt-r button,body .lt-r button{padding:3px 9px!important;font-size:12px!important;font-weight:600!important;line-height:1.35!important;border:1px solid rgba(184,145,74,.5)!important;background:rgba(255,255,255,.72)!important;color:#4A3428!important}
.lt-r button.on{background:#F1E2C2!important}
.lt-r button[data-a=reset]{color:#8A4B3C!important}
.lt-sz{gap:4px!important}
.lt-sz input{min-width:84px!important;height:14px}
.lt-z{width:22px!important;height:22px!important;font-size:14px!important;border-width:1px!important}
.lt-v{min-width:34px!important;font-size:11px!important}
.lt-all{font-size:11px!important;font-weight:500!important;gap:4px!important;color:#7A6654!important;padding:0 2px}
.lt-all input{width:12px!important;height:12px!important}
/* the font / colour / size panels it opens: same light, refined look */
.epop.ep-ed .epop-p{background:rgba(255,251,243,.95)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(184,145,74,.38)!important;box-shadow:0 -3px 14px rgba(40,28,16,.10)!important}
.epop.ep-ed .epop-h{font-size:13px}
.epop.ep-ed .fopt{font-size:15px}
.epop.ep-ed .cp-done,.epop.ep-ed .fp-done{min-height:34px!important;font-size:13px}

/* ===== v8c: phones (<700px) — editor in ONE column: big preview on top, fields full width below ===== */
@media (max-width:699px){
  body.ed-split #editor:not([hidden]){display:grid!important;grid-template-columns:minmax(0,1fr)!important;column-gap:0}
  body.ed-split #editor > *{grid-column:1!important}
  body.ed-split #editor > .ocard{grid-row:1}
  body.ed-split #editor > .stage-wrap{grid-row:2!important;position:relative!important;top:auto!important;padding-top:2px;z-index:2;justify-self:center;width:100%}
  body.ed-split #editor > .form{grid-row:3!important}
  body.ed-split #editor > .types{grid-row:4!important}
  body.ed-split #editor > .actions{grid-row:5!important}
  body.ed-split #editor > .mini,body.ed-split #editor > #sheetHold{grid-row:6!important}
  body.ed-split .stage-wrap .stage{width:min(100%,340px,calc(54vh * .5625))!important;width:min(100%,340px,calc(54vh * .5625))!important;width:min(100%,340px,calc(54svh * .5625))!important;margin:0 auto!important;border-radius:12px}
  body.ed-split .stage-wrap .sm{width:min(100%,340px)!important;margin:0 auto}
  body.ed-split .stage-wrap .ed-label{font-size:12.5px;margin:2px 0 6px}
  body.ed-split .stage-note{font-size:11px;margin-top:5px}
  body.ed-split #editor .lrow-t{font-size:13px!important}
  body.ed-split #editor .lrow-f .field input,body.ed-split #editor .lrow-f .field textarea,body.ed-split #editor .field input,body.ed-split #editor .field textarea{font-size:14px!important}
  body.ed-split .lrow-h .lact .lopt,body.ed-split .lrow-h .lact .lbtn.ldel{width:28px!important;height:28px!important;min-width:28px!important}
  #editor .form-hint{font-size:12px}
}
/* drag hint pill: gold outline, cream, dark brown 14px, above the preview */
#mvPill.mv-pill{display:block;width:fit-content;max-width:100%;margin:0 auto 8px;padding:6px 14px;border-radius:999px;background:#FFF9EE;border:1px solid #B8914A;color:#4A3428;font-size:14px;font-weight:600;line-height:1.5;text-align:center;box-shadow:none;opacity:1}
@media (max-width:767px){#mvPill.mv-pill{font-size:13px;padding:5px 12px}}

@media (max-width:767px){
  .epop.ep-ed{left:0!important;right:0!important;width:auto!important}
  .epop.ep-ed .epop-p{width:100%!important;max-width:100%!important;margin:0!important;box-sizing:border-box!important}
}

@media (max-width:699px){#form::after{left:-8px!important}#form::before{right:-8px!important}}

/* v8c: phones — lower envelope front so the card text never hides behind it */
@media (max-width:899px){
  .h3 .h3-back,.h3 .h3-front{height:calc(262 * var(--u))}
  .h3 .h3-topflap{bottom:calc(260 * var(--u));height:calc(130 * var(--u))}
  .h3 .h3-card{padding-top:calc(34 * var(--u))}
  .h3 .h3-roses{top:calc(372 * var(--u));width:calc(220 * var(--u));left:calc(-40 * var(--u))}
  .h3 .h3-seal{top:calc(440 * var(--u));width:calc(80 * var(--u));height:calc(80 * var(--u))}
  .h3 .h3-seal img{inset:calc(-5 * var(--u));width:calc(90 * var(--u));height:calc(90 * var(--u))}
  .h3 .h3-seal span{font-size:calc(34 * var(--u))}
  .h3 .hero-title{line-height:1.3!important}
}

@media (min-width:900px){#cards .card .card-title{font-size:12.5px!important}#cards .card .card-count{font-size:11px!important}}

/* ===== v8e: no phone mockup beside the envelope (Reham) — envelope centred, strip right under it ===== */
.hero-phone{display:none!important}
.hero-wrap,.hero-wrap.h3w{display:flex!important;flex-direction:column!important;align-items:center!important;grid-template-columns:none!important;margin:10px auto 2px!important}
.hero-wrap.h3w > .hero.h3{width:min(100%,430px)!important;max-width:430px!important;margin:0 auto!important}
.hero-wrap.h3w > .hstrip{align-self:center;max-width:min(100%,430px)!important;margin:10px auto 0!important}
@media (max-width:899px){.hero-wrap.h3w > .hero.h3{width:min(100%,380px)!important}.hero-wrap.h3w > .hstrip{max-width:min(100%,380px)!important}}

/* v8f: contact is the business email (her phone number removed) */
.foot-wa[href^="mailto:"] svg{color:#B8914A}
.wa-sec[href^="mailto:"]{color:#8C6828}
a.cq-wa[href^="mailto:"]{color:#8C6828;border-color:rgba(184,145,74,.45);background:#FBF6EC}

/* ================= v8i: 4th option «تصميم مخصص» (opens an email, no payment) ================= */
.ptier{grid-template-columns:1fr 1fr}
@media (min-width:600px){.ptier{grid-template-columns:repeat(4,1fr)}}
a.ptier-b{text-decoration:none;text-align:center}
.ptier-c span{color:var(--gold-d)}
#editor > .types{container-type:inline-size}
#editor > .types .type-list{grid-template-columns:repeat(2,1fr)}
@container (min-width:430px){#editor > .types .type-list{grid-template-columns:repeat(4,1fr)}#editor > .types .t-name{font-size:13px;white-space:nowrap}}
#editor > .types .t-price{white-space:nowrap}
.cust-panel{text-align:center}
.cust-panel[hidden]{display:none}
.cust-line{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:#4A3428}
.cust-panel .btn{display:flex;align-items:center;justify-content:center;width:100%;text-decoration:none;box-sizing:border-box}

/* v8m: «عدد الأشخاص المدعوين» row (looks like a list row, is not one) + «أكّد X من N» on the order page */
.gst-row{position:relative;background:none;border:0;padding:0}
.gst-row .gst-opt{font-style:normal;font-weight:600;font-size:12px;color:#A2907A}
.gst-row .gst-h{margin:6px 4px 0;font-size:12px;line-height:1.6;color:#8A7A66}
.oc-gn{margin:4px 0 8px;font-size:15px;color:#4A3428}
.oc-gn b{color:#B8914A;font-size:17px}

/* v8n: video preview controls under the picture (play/pause + scrub), plays once; paused = everything frozen */
.vctl{display:none}
.is-video .vctl{display:flex;align-items:center;gap:10px;direction:rtl;margin:10px auto 0;padding:6px 8px 6px 12px;width:100%;max-width:420px;box-sizing:border-box;background:rgba(255,253,249,.92);border:1px solid rgba(184,145,74,.35);border-radius:999px;box-shadow:0 2px 10px rgba(74,52,40,.08)}
body.ed-split .is-video .vctl{width:min(100%,calc((100vh - 140px) * .5625),420px)}
.vc-pp{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:0;padding:0;background:#B8914A;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 6px rgba(184,145,74,.35);-webkit-tap-highlight-color:transparent}
.vc-pp svg{width:16px;height:16px;display:block}
.vc-pp:focus-visible{outline:2px solid #4A3428;outline-offset:2px}
#vcSeek{flex:1 1 auto;min-width:0;-webkit-appearance:none;appearance:none;height:28px;margin:0;background:transparent;direction:rtl;cursor:pointer;touch-action:none}
#vcSeek::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to left,#B8914A var(--p,0%),rgba(74,52,40,.16) var(--p,0%))}
#vcSeek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #B8914A;margin-top:-7px;box-shadow:0 1px 4px rgba(74,52,40,.25)}
#vcSeek::-moz-range-track{height:4px;border-radius:4px;background:rgba(74,52,40,.16)}
#vcSeek::-moz-range-progress{height:4px;border-radius:4px;background:#B8914A}
#vcSeek::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid #B8914A}
.vc-t{flex:0 0 auto;font-size:12.5px;color:#7A6650;min-width:32px;text-align:center;font-variant-numeric:tabular-nums}
#stage .vprog{display:none!important}
.mo-frz,.mo-frz *,.mo-frz *::before,.mo-frz *::after{animation-play-state:paused!important;transition:none!important}
/* v8n: site-tier hint instead of the drag hint (the site preview has no drag) */
.mv-pill-site{display:none!important}
.is-site .mv-pill:not(.mv-pill-site){display:none!important}
.is-site .mv-pill-site{display:block!important}
#siteMock #art2 .ln[data-k]{cursor:pointer}
@media (max-width:699px){.is-video .vctl{max-width:340px}}
/* v8n: the hints above the preview never widen the preview column (Reham's tablet: in «موقع دعوة» the list column was squeezed) */
body.ed-split #editor > .stage-wrap{min-width:0}
body.ed-split .stage-wrap .mv-pill{max-width:360px!important;white-space:normal;font-size:12.5px}
body.ed-split .stage-wrap .sm{max-width:100%}

/* v8n: USD beside AED (display only) */
.usd{display:inline-block;direction:ltr!important;font-size:.76em;font-weight:500;color:#9A8670;white-space:nowrap;margin-inline-start:3px;unicode-bidi:isolate;letter-spacing:0}
.btn .usd{color:inherit;opacity:.78}
.ptier-b span .usd{display:inline-block}
/* v8n: payment marks under the pay button (simple marks, no hotlinked images) */
.paymarks{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px;margin:10px auto 2px;direction:ltr}
.paymarks[hidden]{display:none}
.pm{display:inline-flex;align-items:center;justify-content:center;gap:2px;height:24px;min-width:44px;padding:0 8px;border:1px solid #E6D8C2;border-radius:6px;background:#FFFDF9;color:#6F604D;font:600 11.5px/1 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;box-sizing:border-box}
.pm-visa{font-style:italic;font-weight:800;letter-spacing:.5px;color:#4C5A86}
.pm-mc svg{display:block}
.pm-ap svg{margin-right:1px;color:#3B2F22}
.pm-gp b{color:#5B7FC7;font-weight:700;margin-right:1px}
.oc-gn{text-align:center}

/* v8o: «موقع دعوة» — move a line on the design card in the site preview */
#smStage #art2 .ln[data-id]{cursor:pointer}
#smStage #art2 .ln.sel,#smStage #art2 .ln.sel *{touch-action:none;cursor:grab}
#smStage.mv-drag,#smStage.mv-drag *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
#smStage #art2 .ln{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* v8s: «شوفي مثال لموقع الدعوة» button + the /i/demo sample site (ribbon + watermark on the design) */
.demo-btn{display:block;width:fit-content;margin:14px auto 0;padding:9px 18px;border:1.5px solid #B8914A;border-radius:999px;background:#FFFBF4;color:#7A5A22;font-weight:700;font-size:14px;line-height:1.5;text-decoration:none;text-align:center;box-shadow:0 3px 10px rgba(120,86,50,.08)}
.demo-btn:hover{background:#FFF5E4}
#demoBtnEd{margin:10px auto 4px}
.demo-rib{display:block;position:relative;z-index:5;margin:0;padding:calc(6px + env(safe-area-inset-top)) 12px 6px;background:#4A3428;color:#FFF6E6;font-size:12.5px;font-weight:700;letter-spacing:.3px;text-align:center;line-height:1.5}
.iv-stage .iv-wm{z-index:7}

/* v8t: «شوفي موقعك التجريبي» — her own preview: nothing to share from it */
.demo-mine #ivShare,.demo-mine #ivWa{display:none!important}

/* v8u: palettes from each design's own artwork (k-means): buttons take --ta with --tbt text (white, or dark ink on a light tint) */
.iv #ivMap.btn-pay,.iv .iv-cal .btn-pay{color:var(--tbt,#fff)}
.iv .iv-rb.btn-pay{color:var(--tbt,#fff);background:var(--ta);background:linear-gradient(135deg,var(--ta),color-mix(in srgb,var(--ta) 86%,#fff));box-shadow:0 10px 22px color-mix(in srgb,var(--ta) 30%,transparent)}
.sm .sm-map .sm-btn{color:var(--tbt,#fff)}
.sm .sm-rbtns .sm-btn:not(.sm-btn-o){color:var(--tbt,#fff);background:var(--ta);box-shadow:0 5px 12px color-mix(in srgb,var(--ta) 28%,transparent)}
/* v8u: spam hint under the email field + on the order page */
.cf .cf-hint{display:block;margin:5px 2px 0;font-size:12px;font-weight:400;line-height:1.6;color:#8A7A66}
.oc-spam{margin:4px 0 0;font-size:12.5px;line-height:1.6;color:#8A7A66;text-align:center}
.demo-btn[hidden]{display:none!important}

/* v8v: demo-only extras — voice message, guestbook, countdown story */
.vm{display:flex;align-items:center;gap:12px;direction:rtl;margin-top:6px}
.vm-pp{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:var(--tbt,#fff);background:var(--ta,#A9823E);box-shadow:0 6px 16px color-mix(in srgb,var(--ta,#A9823E) 32%,transparent);transition:transform .15s}
.vm-pp:active{transform:scale(.94)}
.vm-pp svg{margin-inline-start:2px}
.vm-card.on .vm-pp svg{margin:0}
.vm-bar{flex:1;height:8px;border-radius:99px;background:var(--ts,#F5ECDD);border:1px solid var(--tl,#E6D6B8);overflow:hidden;cursor:pointer;position:relative}
.vm-bar i{position:absolute;inset:0;background:linear-gradient(270deg,var(--ta,#A9823E),color-mix(in srgb,var(--ta,#A9823E) 70%,#fff));transform:scaleX(0);transform-origin:right center;border-radius:99px}
.vm-t{flex:0 0 auto;min-width:38px;font:600 14px/1 var(--ui,inherit);color:var(--tm,#6E604E);font-variant-numeric:tabular-nums}
.vm-tag{font-size:11px;font-weight:600;color:var(--tm,#8A7A66);background:var(--ts,#F5ECDD);border:1px solid var(--tl,#E6D6B8);border-radius:99px;padding:1px 8px;margin-inline-start:6px;vertical-align:middle}
.gb-note{margin:-2px 0 12px;font-size:12.5px;line-height:1.6;color:var(--tm,#8A7A66);text-align:center}
.gb .iv-in{width:100%;box-sizing:border-box;margin-bottom:10px}
.gb-taw{position:relative}
.gb-ta{resize:none;min-height:92px;font:inherit;line-height:1.6;padding-bottom:22px!important}
.gb-ta.bad{border-color:#C9543A!important;box-shadow:0 0 0 3px rgba(201,84,58,.12)}
.gb-cnt{position:absolute;left:12px;bottom:18px;font-size:11px;color:#A29581;pointer-events:none}
.gb-send{width:100%;color:var(--tbt,#fff)!important;background:var(--ta);background:linear-gradient(135deg,var(--ta),color-mix(in srgb,var(--ta) 86%,#fff));box-shadow:0 8px 18px color-mix(in srgb,var(--ta) 28%,transparent)}
.gb-list{display:grid;gap:10px;margin-top:16px}
.gb-c{padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--ts,#FBF3E4) 70%,#fff);border:1px solid var(--tl,#EADCC3);text-align:right}
.gb-c b{display:block;font-size:14px;color:var(--tp,#9A7434);margin-bottom:3px}
.gb-c p{margin:0;font-size:15px;line-height:1.7;color:var(--tt,#3A2E22);white-space:pre-wrap;overflow-wrap:anywhere}
.gb-c.new{animation:gbIn .5s ease-out}
@keyframes gbIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.iv-calf{display:block;margin:10px auto 0;text-align:center;font-size:12.5px;color:var(--tm,#8A7A66);text-decoration:underline;text-underline-offset:3px}

/* v8w: countdown story preview + share sheet (demo) */
html.stm-open,html.stm-open body{overflow:hidden}
.stm-bg{position:fixed;inset:0;background:rgba(30,22,10,.55);z-index:90;animation:fadebg .2s ease}
.stm{position:fixed;z-index:91;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;background:var(--ts,#FBF6EC);border-radius:24px;padding:14px 16px 14px;text-align:center;box-shadow:0 24px 60px rgba(30,20,10,.35);font-family:inherit}
.stm[hidden],.stm-bg[hidden]{display:none}
.stm-h{margin:2px 34px 10px;font-weight:700;font-size:16px;color:var(--tt,#3B2F22)}
.stm-x{position:absolute;top:10px;left:10px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.06);color:var(--tt,#3B2F22);font-size:16px;line-height:34px;cursor:pointer;padding:0}
.stm-pv{position:relative;margin:0 auto 10px;height:min(58vh,560px);height:min(58vh,560px);height:min(58dvh,560px);aspect-ratio:9/16;max-width:100%;border-radius:16px;overflow:hidden;background:#EFE6D6;box-shadow:0 8px 22px rgba(60,40,10,.14)}
.stm-img{display:block;width:100%;height:100%;object-fit:contain;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.stm-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:14px;color:var(--tm,#6F604D)}
.stm-load[hidden]{display:none}
.stm-load i{width:30px;height:30px;border-radius:50%;border:3px solid color-mix(in srgb,var(--ta,#8C6828) 25%,transparent);border-top-color:var(--ta,#8C6828);animation:stmspin .8s linear infinite}
@keyframes stmspin{to{transform:rotate(360deg)}}
.stm-act{display:grid;gap:8px}
.stm-act .btn + .btn{margin-top:0}
.stm-act .btn[disabled]{opacity:.55;cursor:default}
.stm-act .btn[hidden]{display:none}
.stm-wa{display:block;padding:6px;font-size:14px;font-weight:600;color:#1F8F4E;text-decoration:none}
.stm-ios{margin:0 0 10px;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--ta,#8C6828) 12%,#fff);color:var(--tt,#3B2F22);font-weight:700;font-size:14px}
.stm-ios[hidden]{display:none}
.stm-ios.pulse{animation:stmpulse .9s ease}
@keyframes stmpulse{0%,100%{transform:none}30%{transform:scale(1.05)}}
.stm-help{margin:10px 0 2px}
/* v8w: one calendar button per phone */
.iv-cal .iv-calb[hidden],.iv-calf[hidden]{display:none}
.iv-cal.cal-one .iv-rbs{grid-template-columns:1fr}
.iv-cal.cal-one .iv-calb{font-size:16px}
.stm-wa[hidden],.stm-help[hidden]{display:none}
/* v8x-a: older Android browsers (no svh / aspect-ratio): the invitation card still fills the screen */
@supports not (aspect-ratio:1/1){ .iv-stage.stage{height:calc(min(100vw,calc(100vh * 9 / 16)) * 16 / 9)} }
/* the demo / trial ribbon sits above the card: the card fits the rest of the screen, so the whole design shows first */
body.demo-mode .iv-hero{min-height:calc(100vh - 31px - env(safe-area-inset-top));min-height:calc(100svh - 31px - env(safe-area-inset-top))}
body.demo-mode .iv-stage.stage{width:min(100vw,calc((100vh - 31px - env(safe-area-inset-top)) * 9 / 16));width:min(100vw,calc((100svh - 31px - env(safe-area-inset-top)) * 9 / 16))}
@supports not (aspect-ratio:1/1){ body.demo-mode .iv-stage.stage{height:calc(min(100vw,calc((100vh - 31px) * 9 / 16)) * 16 / 9)} }
/* full-screen trial site over the editor */
html.fpv-open,html.fpv-open body{overflow:hidden}
.fpv{position:fixed;inset:0;z-index:300;background:#2a211a}
.fpv[hidden]{display:none}
.fpv-fr{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#2a211a}
.fpv-x{position:absolute;z-index:2;top:calc(40px + env(safe-area-inset-top));left:10px;border:0;border-radius:999px;padding:9px 14px;background:rgba(255,255,255,.94);color:#3B2F22;font:inherit;font-weight:700;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.28);cursor:pointer}
.fpv-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.fpv-load[hidden]{display:none}
.fpv-load i{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:stmspin .8s linear infinite}
/* v8y: story video sheet */
.stm-load.over{background:rgba(30,22,10,.42);color:#fff;font-weight:700}
.stm-load.over i{border-color:rgba(255,255,255,.3);border-top-color:#fff}
.stm-pv video.stm-img{object-fit:contain;background:#000}
.stm-ex:empty{display:none}
.stm-msg{display:block;margin:0 0 10px;text-align:right}
.stm-msg span{display:block;font-size:13px;font-weight:700;color:var(--tt,#3B2F22);margin:0 4px 4px}
.stm-msg input{width:100%;box-sizing:border-box;border:1.5px solid var(--tl,#E1D2B4);border-radius:12px;padding:10px 12px;font:inherit;font-size:15px;background:#fff;color:var(--tt,#3B2F22)}
.stm-msg input:focus{outline:none;border-color:var(--ta,#8C6828)}

/* ---------- v8y: «موقع كامل» v2 (demo + trial preview) ---------- */
body.iv-v2 .iv-body{max-width:560px;margin:0 auto}
body.iv-v2 .v2-card{text-align:center}
body.iv-v2 .v2-t{margin-bottom:12px}
body.iv-v2 .v2-words .iv-kick{margin-top:2px}
.v2-fam{margin:10px 0 0;font-size:15px;line-height:1.8;color:var(--tt,#3B2F22)}
.v2-bl{margin:10px 0 0;font-family:Amiri,serif;font-size:17px;color:var(--tm,#6F604D)}
.v2-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.v2-rows li{display:flex;align-items:center;gap:10px;justify-content:center;font-size:15.5px;color:var(--tt,#3B2F22)}
.v2-rows li b{font-weight:600}
.v2-tl{list-style:none;margin:6px auto 0;padding:0;max-width:330px;position:relative}
.v2-tl::before{content:"";position:absolute;top:14px;bottom:14px;right:95px;width:2px;background:rgba(184,145,74,.4);background:color-mix(in srgb,var(--to,#B8914A) 45%,transparent)}
.v2-tl li{position:relative;display:grid;grid-template-columns:84px 24px 1fr;align-items:center;padding:9px 0;text-align:right}
.v2-tl time{grid-column:1;font-size:14px;font-weight:700;color:var(--tp,#8C6828);text-align:center;white-space:nowrap}
.v2-tl li i{grid-column:2;justify-self:center;position:relative;z-index:1;width:12px;height:12px;border-radius:50%;background:var(--ts,#FBF6EC);border:2px solid var(--to,#B8914A);box-sizing:border-box}
.v2-tl span{grid-column:3;font-size:15.5px;color:var(--tt,#3B2F22);padding-right:8px}
.v2-notet{margin:0;font-size:16px;color:var(--tt,#3B2F22)}
.v2-rmsg{display:block;width:100%;box-sizing:border-box;margin:0 0 10px;resize:none;font:inherit;line-height:1.6}
.v2-thanks{padding:26px 18px}
.v2-flo{display:block;font-size:30px;color:var(--to,#B8914A);line-height:1}
.v2-ty{margin:10px 0 0;font-family:Amiri,serif;font-size:21px;line-height:1.7;color:var(--tp,#8C6828)}
.v2-sig{margin:12px 0 0;font-size:14px;color:var(--tm,#6F604D)}
.v2-sig b{font-size:16px;color:var(--tt,#3B2F22)}
.v2-card.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.v2-card.rv.in{opacity:1;transform:none}
/* ---------- v8z2: /i/demo (+ the trial preview) as ONE invitation page: the design's paper edge to edge, the art and its details in one column ---------- */
html.iv-v2h{background:var(--v2paper,var(--ts,#FBF6EC))}
body.iv-v2{background:transparent}
body.iv-v2::before{content:"";position:fixed;inset:-60px;z-index:-1;pointer-events:none;background:var(--v2art,none) center/cover no-repeat;filter:blur(30px) saturate(1.05);transform:scale(1.08)}
body.iv-v2 #ivMain{position:relative;max-width:560px;margin:0 auto;background:var(--v2paper,var(--ts,#FBF6EC));box-shadow:0 0 70px rgba(40,25,10,.22)}
@media (max-width:600px){body.iv-v2 #ivMain{box-shadow:none}}
body.iv-v2 .iv-hero{display:block;min-height:0;overflow:hidden;background:var(--v2edge,var(--v2paper,var(--ts,#FBF6EC)))}
body.iv-v2 .iv-blur,body.iv-v2 .iv-cue{display:none}
body.iv-v2 .iv-stage.stage{width:min(100vw,560px);box-shadow:none}
@supports not (aspect-ratio:1/1){body.iv-v2 .iv-stage.stage{height:calc(min(100vw,560px) * 16 / 9)}}
body.iv-v2 .iv-wrap::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:9%;z-index:8;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0),var(--v2edge,var(--v2paper,var(--ts,#FBF6EC))))}
body.iv-v2 #ivDetails.iv-body{max-width:none;margin:0;padding:10px 22px 34px;background:linear-gradient(180deg,var(--v2edge,var(--v2paper,var(--ts,#FBF6EC))) 0,var(--v2paper,var(--ts,#FBF6EC)) 300px)}
body.iv-v2 #ivDetails .iv-card{background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:0 0 30px}
body.iv-v2 #ivDetails>section.iv-card~section.iv-card::before{content:"❖";display:block;width:min(250px,72%);margin:0 auto 28px;font-size:13px;line-height:14px;color:var(--to,#B8914A);text-align:center;background:linear-gradient(90deg,transparent,var(--to,#B8914A) 40%,transparent 45%,transparent 55%,var(--to,#B8914A) 60%,transparent) center/100% 1px no-repeat}
body.iv-v2 .iv .cd-title{font-size:27px;color:var(--tp,#8C6828);margin-bottom:14px}
body.iv-v2 .iv .cd-title i{display:none}
body.iv-v2 .iv .cd-x span{background:rgba(255,255,255,.45);box-shadow:none}
body.iv-v2 .iv .iv-in{background:rgba(255,255,255,.7)}
body.iv-v2 .gb-c{background:rgba(255,255,255,.45)}
body.iv-v2 #ivDetails .v2-thanks{padding:4px 8px 6px}
html.iv-v2dark #invite{--tt:#F4ECDF!important;--tm:#D3C8B6!important;--tp:var(--to,#D9B98A)!important;--tl:rgba(255,255,255,.28)!important;color:#F4ECDF}
html.iv-v2dark body.iv-v2 .iv .cd-x span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)}
html.iv-v2dark body.iv-v2 .iv .iv-in{background:rgba(255,255,255,.92);color:#2A2119}
html.iv-v2dark body.iv-v2 .gb-c{background:rgba(255,255,255,.08)}
html.iv-v2dark body.iv-v2 .gb-c p{color:#F4ECDF}
html.iv-v2dark body.iv-v2 .gb-note,html.iv-v2dark body.iv-v2 .iv-foot{color:#D3C8B6}
/* ---------- v9a: /i/demo (+ the trial preview) as a real invitation WEBSITE: full-screen art hero with live names, then full-width sections ---------- */
html.s9h,html.s9h body.s9m{background:var(--s9paper,#FBF6EC)}
body.s9m .iv{position:relative;min-height:0;background:var(--s9paper,#FBF6EC)}
body.s9m .iv-hero,body.s9m #ivDetails{display:none!important}
body.s9m .demo-rib{position:absolute;top:0;left:0;right:0;z-index:30;background:rgba(74,52,40,.86)}
#s9{--s9ink:var(--tt,#3A2E22);--s9mut:var(--tm,#6E604E);--s9gold:#B08D4F;--s9gold2:#9A7434;--s9line:rgba(176,141,79,.45);--s9box:rgba(255,255,255,.5);
  position:relative;color:var(--s9ink);font-family:"El Messiri",var(--ui);overflow:hidden;text-align:center}
html.s9dark #s9{--s9ink:#F4ECDF;--s9mut:#D8CDBB;--s9gold:#D9B98A;--s9gold2:#E8CF9C;--s9line:rgba(217,185,138,.5);--s9box:rgba(255,255,255,.06)}
html.s9dark #invite{--tt:#F4ECDF;--tm:#D3C8B6;--tp:#E8CF9C;--tl:rgba(255,255,255,.28);color:#F4ECDF}
/* hero */
.s9-hero{position:relative;height:100vh;min-height:480px;overflow:hidden;background:var(--s9paper,#FBF6EC)}
@supports (height:100svh){.s9-hero{height:100svh}}
.s9-art{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--s9art,none) center center/cover no-repeat;animation:s9Kb 22s ease-in-out infinite alternate;transform-origin:50% 55%}
.s9-art{z-index:1}.s9-art2{display:none;z-index:0}
.s9-veil{z-index:2}
@keyframes s9Kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.s9-veil{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse 72% 34% at 50% var(--s9cy,50%),var(--s9glow,rgba(251,246,236,.82)) 0%,var(--s9glow,rgba(251,246,236,.82)) 30%,var(--s9glow0,rgba(251,246,236,0)) 100%);opacity:.92}
html.s9dark .s9-veil{background:radial-gradient(ellipse 80% 38% at 50% var(--s9cy,50%),rgba(0,0,0,.5) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(0,0,0,.35))}
.s9-wm{z-index:4;background-size:300px 533px!important;background-repeat:repeat!important;background-position:center top;opacity:.6}
.s9-hc{position:absolute;left:0;right:0;top:var(--s9cy,50%);transform:translateY(-50%);z-index:5;padding:0 6vw;display:flex;flex-direction:column;align-items:center}
.s9-kick{margin:0 0 4px;font-family:"El Messiri",var(--ui);font-weight:600;font-size:clamp(17px,4.6vw,26px);letter-spacing:1px;color:var(--s9gold2);opacity:0;animation:s9In 1s .2s ease-out forwards}
.s9-names{margin:0;display:flex;flex-direction:column;align-items:center;width:100%;font-weight:700;line-height:1.25;opacity:0;animation:s9In 1.2s .45s ease-out forwards}
.s9-n{display:block;max-width:100%;white-space:nowrap;font-size:clamp(64px,23vw,140px);padding:.06em .18em .1em;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6)) drop-shadow(0 2px 3px rgba(80,55,20,.22))}
.s9-one .s9-n{font-size:clamp(70px,25vw,150px)}
.s9-amp{display:block;font-size:clamp(36px,11vw,70px);line-height:1;margin:-.08em 0 -.02em;padding:0 .2em}
html.s9dark .s9-n,html.s9dark .s9-amp{filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}
.s9-g{-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.s9-hdate{margin:8px 0 0;font-size:clamp(15px,4.1vw,21px);font-weight:500;color:var(--s9ink);opacity:0;animation:s9In 1s .8s ease-out forwards}
html.s9dark .s9-hdate,html.s9dark .s9-kick{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.s9-down{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:6;border:0;background:var(--s9glow,rgba(251,246,236,.8));border-radius:99px;padding:6px 16px 4px;
  display:flex;flex-direction:column;align-items:center;gap:0;font:600 14px/1.4 "El Messiri",var(--ui);color:var(--s9gold2);cursor:pointer;opacity:0;animation:s9Fd 1s 1.2s ease-out forwards}
@keyframes s9Fd{from{opacity:0}to{opacity:1}}
html.s9dark .s9-down{background:rgba(0,0,0,.35);color:#F1DDB6}
.s9-down svg{animation:s9Bn 1.6s ease-in-out infinite}
@keyframes s9Bn{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes s9In{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (min-aspect-ratio:1/1){
  .s9-hc{top:50%}
  .s9-veil{background:radial-gradient(ellipse 46% 40% at 50% 50%,var(--s9glow,rgba(251,246,236,.82)) 0%,var(--s9glow,rgba(251,246,236,.82)) 35%,var(--s9glow0,rgba(251,246,236,0)) 100%)}
  html.s9dark .s9-veil{background:radial-gradient(ellipse 50% 45% at 50% 50%,rgba(0,0,0,.62),rgba(0,0,0,.3) 60%,rgba(0,0,0,0))}
  .s9-names{flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap}
  .s9-n{font-size:clamp(60px,17vh,160px)}
  .s9-one .s9-n{font-size:clamp(66px,19vh,170px)}
  .s9-amp{font-size:clamp(34px,8vh,72px);margin:0 .05em}
  .s9-kick{font-size:clamp(17px,3vh,26px)}.s9-hdate{font-size:clamp(15px,2.6vh,22px)}
  /* light art on a wide screen: its top ornaments at the top, its bottom ornaments at the bottom */
  html:not(.s9dark) .s9-art{background-size:100% auto;background-position:center top;-webkit-mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,0) 72%);mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,0) 72%)}
  html:not(.s9dark) .s9-art2{display:block;background-size:100% auto;background-position:center bottom;-webkit-mask-image:none;mask-image:none}
  html.s9dark .s9-art{background-position:center 58%}
}
/* sections */
.s9-sec{position:relative;padding:76px 22px 80px;background:var(--s9paper,#FBF6EC)}
.s9-band{background:var(--s9paper,#FBF6EC)}
.s9-bart{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:var(--s9art,none) center top/100% auto no-repeat;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.2) 0,#000 9%,rgba(0,0,0,0) 42%);mask-image:linear-gradient(180deg,rgba(0,0,0,.2) 0,#000 9%,rgba(0,0,0,0) 42%)}
.s9-bart2{background-position:center bottom;-webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,.2) 0,#000 9%,rgba(0,0,0,0) 42%);mask-image:linear-gradient(0deg,rgba(0,0,0,.2) 0,#000 9%,rgba(0,0,0,0) 42%)}
.s9-band .s9-t{position:relative}
.s9-band .s9-t::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(130%,420px);height:170%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--s9glow,rgba(251,246,236,.86)) 45%,var(--s9glow0,rgba(251,246,236,0)) 100%)}
@media (min-width:900px){.s9-bart{opacity:.42}}
html.s9dark .s9-bart{opacity:.32}
html.s9dark .s9-card{background:var(--s9glow,rgba(5,18,37,.86))}
.s9-in{position:relative;z-index:1;max-width:560px;margin:0 auto}
.s9-in.rv{opacity:0;transform:translateY(22px);transition:opacity .9s ease-out,transform .9s ease-out}
.s9-in.rv.in{opacity:1;transform:none}
.s9-t{margin:0;font-family:var(--s9disp,"Aref Ruqaa","Amiri",serif);font-weight:700;font-size:clamp(36px,10vw,50px);line-height:1.45;color:var(--s9gold2)}
.s9-tg{display:inline-block;padding:0 .2em;background-image:var(--s9grad,linear-gradient(#9A7434,#9A7434));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.s9-em{font-size:.62em;vertical-align:middle}
.s9-t .vm-tag{font-family:"El Messiri",var(--ui);font-size:12px;vertical-align:middle;color:var(--s9mut);background:var(--s9box);border-color:var(--s9line)}
.s9-orn{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px auto 26px;color:var(--s9gold);font-size:12px;line-height:1}
.s9-orn i{display:block;width:min(92px,24vw);height:1px;background:linear-gradient(90deg,rgba(176,141,79,0),var(--s9gold))}
.s9-orn i:last-child{background:linear-gradient(270deg,rgba(176,141,79,0),var(--s9gold))}
.s9-sub{margin:-8px 0 22px;font-size:15.5px;line-height:1.8;color:var(--s9mut)}
/* the invitation card (our own frame) */
.s9-card{position:relative;padding:52px 26px 50px;border:1px solid var(--s9gold);background:var(--s9box);outline:1px solid var(--s9line);outline-offset:-8px;border-radius:2px}
.s9-card::before,.s9-card::after{content:"❦";position:absolute;left:50%;transform:translateX(-50%);font-size:19px;line-height:1;color:var(--s9gold)}
.s9-card::before{top:16px}.s9-card::after{bottom:16px;transform:translateX(-50%) rotate(180deg)}
.s9-card p{margin:0 0 14px}.s9-card p:last-child{margin-bottom:0}
.s9-rel{font-family:"Amiri",serif;color:var(--s9gold2);font-size:17px;line-height:1.9}
.s9-verse,.s9-poem{font-size:21px;font-weight:700}
.s9-tx{font-size:18px;line-height:1.9;color:var(--s9ink);white-space:pre-line}
.s9-lbl{font-size:15px;letter-spacing:1px;color:var(--s9mut)}
.s9-cn{font-size:clamp(46px,13vw,68px);line-height:1.3;font-weight:700;margin:8px 0 10px!important}
.s9-cn span{padding:0 .12em}
.s9-camp,.s9-cn .s9-camp{font-size:.6em}
p.s9-camp{font-size:clamp(34px,10vw,48px);line-height:1;margin:-6px 0 -2px!important}
/* date */
.s9-dbox{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:stretch;gap:10px;max-width:440px;margin:0 auto}
.s9-dbox>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:16px 6px;border-top:1px solid var(--s9gold);border-bottom:1px solid var(--s9gold)}
.s9-dbox small{font-size:13px;color:var(--s9mut)}
.s9-dbox b{font-size:20px;font-weight:600;color:var(--s9ink)}
.s9-dbox .s9-dmid{border:1px solid var(--s9gold);background:var(--s9box);padding:12px 6px}
.s9-dbox .s9-dmid b{font-family:"Amiri",serif;font-size:46px;line-height:1.05;font-weight:700;color:var(--s9gold2)}
.s9-dbox .s9-dmid small{font-size:17px;color:var(--s9ink)}
.s9-dbox1{grid-template-columns:1fr}.s9-dbox1 b{font-size:22px}
.s9-hijri{margin:18px 0 6px;font-family:"Amiri",serif;font-size:18px;color:var(--s9mut)}
.s9-time{margin:6px 0 0;font-size:19px;font-weight:600;color:var(--s9ink)}
/* countdown */
#s9 .iv-cd.cd-x{gap:10px;max-width:440px;margin:0 auto}
#s9 .cd-x span{background:var(--s9box);border:1px solid var(--s9line);border-radius:4px;box-shadow:none;padding:14px 2px 10px}
#s9 .cd-x span::before{background:var(--s9gold)}
#s9 .cd-x b{font-family:"Amiri",serif;font-size:34px;color:var(--s9gold2)}
#s9 .cd-x small{color:var(--s9mut);font-size:13px}
/* the moved blocks lose their card look */
#s9 .iv-card{background:none!important;border:0!important;border-radius:0;box-shadow:none!important;padding:0;margin:0;text-align:center}
#s9 .gb-note{color:var(--s9mut)}
#s9 .iv-in,#s9 .iv-cnt select{background:rgba(255,255,255,.72);border-color:var(--s9line);color:#2E261B}
html.s9dark #s9 .iv-in,html.s9dark #s9 .iv-cnt select{background:rgba(255,255,255,.92)}
#s9 .iv-cnt{color:var(--s9mut)}
#s9 .btn-ghost{background:rgba(255,255,255,.6);border-color:var(--s9line)}
html.s9dark #s9 .btn-ghost{background:rgba(255,255,255,.1);color:#F4ECDF}
#s9 .gb-c{background:var(--s9box);border-color:var(--s9line);border-radius:4px}
html.s9dark #s9 .gb-c p{color:#F4ECDF}
#s9 .vm{max-width:420px;margin:0 auto}
#s9 .vm-bar{background:var(--s9box);border-color:var(--s9line)}
#s9 .iv-thanks{font-size:18px}
html.s9dark #s9 .iv-thanks{color:#BFE3C8}
/* programme */
.s9-tl{list-style:none;margin:0 auto;padding:0;max-width:380px;position:relative;text-align:right}
.s9-tl::before{content:"";position:absolute;top:10px;bottom:10px;right:9px;width:1px;background:linear-gradient(180deg,rgba(176,141,79,0),var(--s9gold) 12%,var(--s9gold) 88%,rgba(176,141,79,0))}
.s9-tl li{position:relative;display:flex;align-items:baseline;gap:14px;padding:12px 38px 12px 0}
.s9-tl li i{position:absolute;right:3px;top:22px;width:13px;height:13px;border-radius:50%;background:var(--s9paper,#FBF6EC);border:1.5px solid var(--s9gold);box-shadow:0 0 0 3px var(--s9paper,#FBF6EC)}
.s9-tl li i::after{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:50%;background:var(--s9gold)}
.s9-tl time{flex:0 0 auto;min-width:86px;font-size:15px;font-weight:600;color:var(--s9gold2)}
.s9-tl span{font-family:var(--s9disp,"Aref Ruqaa",serif);font-size:23px;line-height:1.5;color:var(--s9ink)}
/* venue */
#s9 .iv-venue{font-size:19px;font-weight:600;color:var(--s9ink);margin:0 0 16px}
.s9-map{margin:0 auto 16px;border:1px solid var(--s9gold);padding:5px;background:var(--s9box)}
.s9-map iframe{display:block;width:100%;height:230px;border:0}
#s9 .iv-btn{display:flex;text-decoration:none}
#s9 .iv-cal{margin-top:22px}
.s9-calh{margin:0 0 10px;font-size:15px;color:var(--s9mut)}
/* note, closing */
.s9-note{margin:0;font-family:var(--s9disp,"Aref Ruqaa",serif);font-size:clamp(24px,6.6vw,32px);line-height:1.6;color:var(--s9ink)}
.s9-ty{margin:0 0 18px;font-size:20px;line-height:1.9;color:var(--s9ink)}
.s9-sig{margin:18px 0 26px;font-size:clamp(44px,12vw,66px);font-weight:700;line-height:1.3}
.s9-sig span{display:inline-block;white-space:nowrap;padding:0 .15em;max-width:100%}
#s9 .iv-share{max-width:400px;margin:0 auto 18px}
#s9 .iv-foot{color:var(--s9mut)}
#s9End{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
@media (min-width:900px){.s9-sec{padding:100px 22px 104px}.s9-t{font-size:52px}}
@media (prefers-reduced-motion:reduce){.s9-art,.s9-down svg{animation:none}.s9-kick,.s9-names,.s9-hdate,.s9-down{animation:none;opacity:1}}

/* ---------- v9b: the hero moves like the design's own card (its text-free motion clip once + the preset's text entrance), reveals ---------- */
.s9-mv{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:1;opacity:0;pointer-events:none;background:transparent}
.s9-mv2{display:none;z-index:0}
.s9vplay .s9-mv{opacity:1}
.s9vfail .s9-mv{display:none}
.s9mo .s9-art{opacity:0;transition:opacity 1s ease}
.s9mo.s9vfail .s9-art{opacity:1}
.s9mo.s9vplay .s9-art{animation:none}
@media (min-aspect-ratio:1/1){
  html.s9dark .s9-mv{object-position:50% 58%}
  html:not(.s9dark) .s9-mv{object-position:50% 0;-webkit-mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,0) 72%);mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,0) 72%)}
  html:not(.s9dark) .s9-mv2{display:block;object-position:50% 100%;-webkit-mask-image:none;mask-image:none}
}
.s9mo .s9-kick,.s9mo .s9-names,.s9mo .s9-down{animation:none;opacity:1}
.s9mo .s9-kick,.s9mo .s9-names>span,.s9mo .s9-down{opacity:0}
.s9mo.s9go .s9-kick,.s9mo.s9go .s9-names>span{animation:var(--s9an,s9aRise) 1.35s cubic-bezier(.22,.61,.36,1) var(--d,0s) both}
.s9mo.s9go .s9-n{animation:var(--s9an,s9aRise) 1.35s cubic-bezier(.22,.61,.36,1) var(--d,0s) both,s9aGlint 2.6s ease-in-out calc(var(--d,0s) + 1.3s) 1}
.s9mo.s9go .s9-down{animation:s9Fd 1s ease-out var(--d,2s) both}
.s9tx-blur{--s9an:s9aBlur}.s9tx-settle{--s9an:s9aSettle}.s9tx-zoom{--s9an:s9aZoom}.s9tx-glow{--s9an:s9aGlow}.s9tx-drop{--s9an:s9aDrop}
.s9tx-slide{--s9an:s9aSlide}.s9tx-swing{--s9an:s9aSwing}.s9tx-unfold{--s9an:s9aUnfold}.s9tx-flip{--s9an:s9aFlip}.s9tx-pen{--s9an:s9aPen}
@keyframes s9aRise{from{opacity:0;transform:translateY(42px)}to{opacity:1}}
@keyframes s9aBlur{from{opacity:0;transform:scale(1.07);filter:blur(14px)}to{opacity:1}}
@keyframes s9aSettle{from{opacity:0;transform:scale(1.32);filter:blur(6px)}to{opacity:1}}
@keyframes s9aZoom{from{opacity:0;transform:scale(.6)}to{opacity:1}}
@keyframes s9aGlow{from{opacity:0;filter:brightness(1.9) blur(8px)}to{opacity:1}}
@keyframes s9aDrop{from{opacity:0;transform:translateY(-44px)}to{opacity:1}}
@keyframes s9aSlide{from{opacity:0;transform:translateX(60px)}to{opacity:1}}
@keyframes s9aSwing{from{opacity:0;transform:rotate(-7deg) translateY(18px)}to{opacity:1}}
@keyframes s9aUnfold{from{opacity:0;transform:scaleY(.25)}to{opacity:1}}
@keyframes s9aFlip{from{opacity:0;transform:perspective(600px) rotateX(80deg)}to{opacity:1}}
@keyframes s9aPen{0%{opacity:0;-webkit-clip-path:inset(-30% -30% -30% 130%);clip-path:inset(-30% -30% -30% 130%)}12%{opacity:1}100%{opacity:1;-webkit-clip-path:inset(-30% -30% -30% -30%);clip-path:inset(-30% -30% -30% -30%)}}
@keyframes s9aGlint{0%,100%{filter:drop-shadow(0 1px 0 rgba(255,255,255,.6)) drop-shadow(0 2px 3px rgba(80,55,20,.22))}50%{filter:drop-shadow(0 0 16px rgba(255,238,196,.95)) drop-shadow(0 2px 3px rgba(80,55,20,.22))}}
html.s9dark .s9mo.s9go .s9-n{animation:var(--s9an,s9aRise) 1.35s cubic-bezier(.22,.61,.36,1) var(--d,0s) both,s9aGlintD 2.6s ease-in-out calc(var(--d,0s) + 1.3s) 1}
@keyframes s9aGlintD{0%,100%{filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}50%{filter:drop-shadow(0 0 18px rgba(255,226,160,.75)) drop-shadow(0 2px 10px rgba(0,0,0,.55))}}
@keyframes s9aFade{from{opacity:0}to{opacity:1}}
/* the framed wording (no title now) unfolds from its middle, then its lines come in one by one */
.s9-notitle{padding-top:64px}
.s9-in.rv .s9-card{-webkit-clip-path:inset(47% 0 47% 0);clip-path:inset(47% 0 47% 0);transition:-webkit-clip-path 1.2s cubic-bezier(.65,0,.35,1) .2s,clip-path 1.2s cubic-bezier(.65,0,.35,1) .2s}
.s9-in.rv.in .s9-card{-webkit-clip-path:inset(-6% -6% -6% -6%);clip-path:inset(-6% -6% -6% -6%)}
.s9-in.rv .s9-card>*{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .9s cubic-bezier(.22,.61,.36,1);transition-delay:calc(1s + var(--i,0) * .2s)}
.s9-in.rv.in .s9-card>*{opacity:1;transform:none}
.s9-dven{margin-top:10px}
@media (prefers-reduced-motion:reduce){
  .s9mo.s9go .s9-kick,.s9mo.s9go .s9-names>span,.s9mo.s9go .s9-n,html.s9dark .s9mo.s9go .s9-n{animation:s9aFade .9s ease-out var(--d,0s) both}
  .s9mo.s9vfail .s9-art{transition:opacity .8s ease}
  .s9-in.rv{transform:none;transition:opacity .7s ease-out}
  .s9-in.rv .s9-card{-webkit-clip-path:none;clip-path:none;transition:none}
  .s9-in.rv .s9-card>*{transform:none;transition:opacity .6s ease;transition-delay:calc(.2s + var(--i,0) * .12s)}
}

/* v9b2: the pasted map link as an embedded Google map (customer sites + demo + trial) */
.iv-mapf{margin:4px auto 16px;max-width:520px;border-radius:14px;overflow:hidden;border:1px solid color-mix(in srgb,var(--to,#B8914A) 45%,transparent);background:rgba(255,255,255,.5)}
.iv-mapf iframe{display:block;width:100%;height:240px;border:0}
#s9 .iv-mapf{border-radius:2px;border:1px solid var(--s9gold);padding:5px;background:var(--s9box)}
#s9 .iv-mapf iframe{height:230px}

/* v9c: 149 order page — voice message + guestbook manager; guestbook honeypot */
.gb-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.oc-voice,.oc-gbk{margin-top:22px;padding-top:18px;border-top:1px dashed rgba(176,141,79,.4)}
.oc-voice audio{display:block;width:100%;margin:10px 0 4px}
.oc-voice audio[hidden]{display:none}
.oc-gbw{text-align:right;padding:10px 12px;margin:8px 0;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid rgba(176,141,79,.25)}
.oc-gbw b{display:block;font-size:14px}.oc-gbw p{margin:4px 0;font-size:14.5px;line-height:1.7;white-space:pre-line}
.oc-gbw.off{opacity:.55}.oc-gbw.off p{text-decoration:line-through}
.oc-gbh{padding:2px 0;font-size:13px}

/* v9d: the 79 video's page 2 — editor fields + its live preview layer */
.p2f{margin:12px 0 4px;border:1px dashed rgba(176,141,79,.55);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.55)}
.p2f[hidden]{display:none}
.p2f summary{cursor:pointer;font-weight:700;color:#8C6828;font-size:15px;list-style:none}
.p2f summary::-webkit-details-marker{display:none}
.p2-sm{margin:6px 0 10px;font-size:13px;color:#7A6A55;line-height:1.7}
.p2-l{display:block;margin:8px 0}
.p2-l>span{display:block;font-size:13px;color:#6E604E;margin-bottom:4px}
.p2f input{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid #E3D4B8;border-radius:10px;font:inherit;font-size:15px;background:#fff;color:#2E261B}
.p2-r{display:flex;gap:6px;margin:5px 0}
.p2-r .p2-tm{flex:0 0 32%}
.p2v{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;overflow:hidden;opacity:0;transform:translateY(3.5%);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.p2v[hidden]{display:none}
.p2v{background:#FBF6EC center/100% 100% no-repeat}
.p2v .art{background:none!important}
.p2v.on{opacity:1;transform:none}
.p2v .art{animation:none!important;transform-origin:0 0}
.p2glow{position:absolute;left:-60px;width:1200px;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(var(--p2c,251,246,236),.86) 0%,rgba(var(--p2c,251,246,236),.7) 55%,rgba(var(--p2c,251,246,236),0) 100%)}
.p2orn{position:absolute;left:330px;width:420px;height:20px;display:flex;align-items:center;justify-content:center;gap:24px;opacity:0;transition:opacity .8s ease}
.p2orn.in{opacity:1}
.p2orn i{flex:1;height:2.4px;background:currentColor}.p2orn b{width:18px;height:18px;background:currentColor;transform:rotate(45deg)}
#stage.mo-frz #p2v,#stage.mo-frz #p2v .ln,#stage.mo-frz #p2v .p2orn{transition:opacity .9s ease,transform 1s cubic-bezier(.22,.61,.36,1),filter 1s ease!important}

/* ---------- v9e: the website's cards and panels in the chosen design's own theme (colours + ornaments cut from its art) ---------- */
#s9.s9th .s9-card{border-color:var(--s9gold);background:var(--s9box);outline-color:var(--s9line);box-shadow:0 10px 30px -18px var(--s9line)}
html.s9dark #s9.s9th .s9-card{background:var(--s9box)}
#s9 .s9-dress::before,#s9 .s9-dress::after{content:none}
.s9-orns{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:0}
.s9-dress>*:not(.s9-orns){position:relative;z-index:1}
.s9o-c,.s9o-b{position:absolute;display:block;background-repeat:no-repeat}
.s9o-c{background-size:100% 100%}
.s9o-tl{top:0;left:0;background-position:left top}.s9o-tr{top:0;right:0}.s9o-bl{bottom:0;left:0}.s9o-br{bottom:0;right:0}
.s9o-fx{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
.s9o-b{left:10px;right:10px;background-position:center center;background-size:100% 100%}
.s9-panel .s9o-b{left:6px;right:6px}
.s9o-bt{top:10px}.s9o-bb{bottom:10px}
.s9-panel .s9o-bt{top:6px}.s9-panel .s9o-bb{bottom:6px}
.s9o-tile{background-repeat:repeat-x;background-repeat:round no-repeat}
.s9o-fy{-webkit-transform:scaleY(-1);transform:scaleY(-1)}
.s9o-fl{position:absolute;left:50%;width:min(230px,62%);height:30px;margin-left:calc(min(230px,62%) / -2);color:var(--s9gold)}
.s9o-fl svg{display:block;width:100%;height:100%}
.s9o-flt{top:16px}.s9o-flb{bottom:16px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.s9-panel .s9o-fl{height:22px;width:min(170px,50%);margin-left:calc(min(170px,50%) / -2)}
.s9-panel .s9o-flt{top:8px}.s9-panel .s9o-flb{bottom:8px}
.s9-mot{margin:0 auto 14px!important;line-height:0}
.s9-mot img{display:inline-block;width:auto;height:auto;max-width:72%;max-height:84px}
@media (min-width:900px){.s9-mot img{max-height:104px}}
/* the words stay readable where an ornament reaches under them */
#s9.s9th .s9-kcorner .s9-tx,#s9.s9th .s9-kcorner .s9-rel,#s9.s9th .s9-kcorner .s9-lbl{text-shadow:0 0 10px var(--s9cardh),0 0 3px var(--s9cardh),0 0 1px var(--s9cardh)}
.s9-dg{font-family:"Amiri",serif!important}
.s9-tbig{font-size:clamp(24px,7vw,32px)!important;line-height:1.5!important}
#s9 .s9-tx .s9-g,#s9 .s9-rel .s9-g{display:inline-block;padding:0 .12em}
/* panels (RSVP, guestbook): the same paper card, a smaller version of the design's ornament */
#s9.s9th .s9-panel{position:relative;background:var(--s9box)!important;border:1px solid var(--s9gold)!important;outline:1px solid var(--s9line);outline-offset:-6px;border-radius:3px!important;padding:26px 18px 24px;box-shadow:0 10px 30px -20px var(--s9line)!important}
#s9.s9th .s9-panel.s9-kcorner,#s9.s9th .s9-panel.s9-kband{padding-left:20px;padding-right:20px}
/* text colours: every line follows the design's palette */
#s9.s9th{color:var(--s9ink)}
#s9.s9th .s9-sub,#s9.s9th .s9-calh,#s9.s9th .iv-cnt,#s9.s9th .gb-note,#s9.s9th .iv-foot,#s9.s9th .s9-hijri,#s9.s9th .s9-dbox small,#s9.s9th .cd-x small{color:var(--s9mut)}
#s9.s9th .s9-time,#s9.s9th .iv-venue,#s9.s9th .s9-note,#s9.s9th .s9-ty,#s9.s9th .s9-dbox b{color:var(--s9ink)}
#s9.s9th .s9-dbox .s9-dmid b,#s9.s9th .cd-x b,#s9.s9th .s9-orn{color:var(--s9gold2)}
#s9.s9th .s9-orn i{background:linear-gradient(90deg,transparent,var(--s9gold))}
#s9.s9th .s9-orn i:last-child{background:linear-gradient(270deg,transparent,var(--s9gold))}
#s9.s9th .gb-c p,html.s9dark #s9.s9th .gb-c p{color:var(--s9ink)}
#s9.s9th .gb-c b,#s9.s9th .gb-c strong{color:var(--s9gold2)}
#s9.s9th .iv-thanks,html.s9dark #s9.s9th .iv-thanks{color:var(--s9gold2)}
#s9.s9th .btn-pay,#s9.s9th .btn-wa,#s9.s9th .iv-btn,#s9.s9th .gb-send,#s9.s9th .vm-play{background:var(--s9btn)!important;color:var(--s9btnt)!important;border-color:var(--s9btn)!important;box-shadow:0 8px 18px -12px var(--s9btn)!important;text-shadow:none}
#s9.s9th .btn-ghost,html.s9dark #s9.s9th .btn-ghost{background:var(--s9box)!important;color:var(--s9ink)!important;border:1px solid var(--s9gold)!important}
#s9.s9th .iv-in,#s9.s9th .iv-cnt select{background:rgba(255,255,255,.82);border-color:var(--s9line);color:var(--s9ink)}
html.s9dark #s9.s9th .iv-in,html.s9dark #s9.s9th .iv-cnt select{background:rgba(255,255,255,.09);border-color:var(--s9line);color:var(--s9ink)}
html.s9dark #s9.s9th .iv-cnt select option{color:#222;background:#fff}
#s9.s9th .iv-in::placeholder{color:var(--s9mut);opacity:.9}
#s9.s9th .cd-x span,#s9.s9th .s9-dbox .s9-dmid,#s9.s9th .vm-bar,#s9.s9th .gb-c{background:var(--s9box);border-color:var(--s9line)}
#s9.s9th .s9-dbox>div{border-color:var(--s9gold)}
#s9.s9th .s9-dbox .s9-dmid{border-color:var(--s9gold)}
/* the map: a rounded frame in the design's colours */
#s9.s9th .iv-mapf{border-radius:14px;border:1px solid var(--s9gold);padding:5px;background:var(--s9box);box-shadow:0 10px 26px -18px var(--s9line)}
#s9.s9th .iv-mapf iframe{border-radius:10px}

/* v9e: the editor's 149 preview is the real website in a frame */
.sm-live .sm-scroll{display:none}
.sm-ifw{flex:1 1 auto;position:relative;min-height:0;overflow:hidden;background:#FFFBF5}
.sm-if{position:absolute;top:0;left:0;display:block;border:0;-webkit-transform-origin:0 0;transform-origin:0 0;background:#FFFBF5}

/* v9f: pay sheet fields never wider than the screen (were ~28px too wide at 360) */
.cust{grid-template-columns:minmax(0,1fr)}
.cf{min-width:0;grid-template-columns:minmax(0,1fr)}
.cf input,.cf select,.cf textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
#sheet input,#sheet select,#sheet textarea{max-width:100%;box-sizing:border-box}
/* v9f: «العنوان فوق الأسماء» — first row of «كلام الدعوة» */
.kick-row{background:#F7EFE2;border:1px solid rgba(184,145,74,.45);border-inline-start:3px solid var(--pink);border-radius:12px;padding:6px 8px 8px;margin:0 0 8px;box-sizing:border-box;max-width:100%}
.kick-h{display:flex;align-items:center;gap:6px;min-height:30px;margin-bottom:4px}
.kick-t{flex:1 1 auto;min-width:0;font-family:'El Messiri','Amiri',var(--ui);font-size:15px;font-weight:700;color:#3B2F22}
.kick-row .field{margin-bottom:4px}
.kick-row .field input{box-sizing:border-box;max-width:100%}
.kick-hint{margin:0 2px;font-size:12px;line-height:1.5;color:#8A7A66}

/* v9g: the 149 preview swaps in the updated page without a blank flash; the date box without a weekday (removed with «×») */
.sm-if.sm-if-next{opacity:0;pointer-events:none}
.s9-live .s9-in.rv,.s9-live .s9-in.rv .s9-card,.s9-live .s9-in.rv .s9-card>*{-webkit-transition:none!important;transition:none!important}
.s9-dbox.s9-dbox2{grid-template-columns:1.15fr 1fr;max-width:320px}
html.s9-inmock .s9-down{display:none}

/* 9i: lines she moved / styled on the 149 site preview */
#s9 .s9-moved{position:relative;z-index:3}
.s9-in.rv.in .s9-card.s9-hasmv,.s9-live .s9-in .s9-card.s9-hasmv{-webkit-clip-path:inset(-700px -420px -700px -420px)!important;clip-path:inset(-700px -420px -700px -420px)!important}
.s9-card.s9-hasmv{overflow:visible}
/* 9k: «العنوان فوق الأسماء» first on every design */
.kick-hid{display:none!important}
.kick-h .kick-x{width:32px;height:32px;border-radius:10px}
.kick-h .kick-x[hidden],.kick-h .kick-reset[hidden]{display:none}
/* 9k launch prices: ~~٤٩~~ ٣٩ درهم + small gold «سعر الإطلاق 🎉» */
.p-was{text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.55;font-size:.86em;margin-inline-end:1px;font-weight:400}
.p-now{font-weight:700}
.p-launch{font-style:normal;font-size:11px;line-height:1.4;font-weight:700;color:#A57C35;background:rgba(184,145,74,.12);border:1px solid rgba(184,145,74,.35);border-radius:999px;padding:0 7px;white-space:nowrap;display:inline-block;vertical-align:middle}
.p-launch-row{margin:6px 0 0;text-align:center}
.btn .p-was{opacity:.7}
#editor > .types .t-price{white-space:normal;text-align:center;line-height:1.35}
.t-price .p-launch{display:table;margin:3px auto 0;font-size:10.5px}
.t-price .usd{white-space:nowrap}
/* 9k: 79 video preview — tap a line like the 149 site; tap the video = pause / play */
.mv-pill-vid{display:none!important}
.is-video .mv-pill:not(.mv-pill-vid){display:none!important}
.is-video .mv-pill-vid{display:block!important}
html.v10-live #stage.v10-over{cursor:pointer}
.v10-hl{position:absolute;z-index:5;pointer-events:none;border-radius:8px;background:rgba(255,255,255,.14);box-shadow:0 0 0 1.5px rgba(184,145,74,.75)}
.v10-hl[hidden],.v10-pp[hidden]{display:none}
.v10-pp{position:absolute;z-index:5;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,249,238,.82);box-shadow:0 4px 18px rgba(74,52,40,.22);display:grid;place-items:center;pointer-events:none}
.v10-pp i{font-style:normal;color:#B8914A;font-size:26px;line-height:1;margin-inline-start:4px}
/* 9m: the ▶ / ❚❚ sign only flashes on a tap and fades out (~0.6 s); never fixed over the words */
.v10-pp{opacity:0}
.v10-pp i.ps{margin:0;font-size:22px;letter-spacing:-3px}
html.v10-live #stage.v10-paused.v10-mvok{cursor:grab}
html.v10-live #stage.v10-mvdrag,html.v10-live #stage.v10-mvdrag *{cursor:grabbing!important}
/* 9k: words of a heading typed in the toolbar */
.lt-tx{display:flex;gap:6px;padding:6px 4px 2px;width:100%}
.lt-tx[hidden]{display:none}
.lt-tx input{flex:1;min-width:0;border:1.5px solid rgba(184,145,74,.6);border-radius:10px;padding:6px 9px;font:500 15px/1.4 "El Messiri",serif;background:#fff}
.lt-tx button{border:0;border-radius:10px;background:#B8914A;color:#fff;font:700 14px "El Messiri",serif;padding:0 14px}
.kick-szs{display:inline-flex;gap:4px;margin-inline-start:auto}
.kick-szs .lsz{min-width:30px;height:28px;font-size:13px}

/* ===== 9l: line panel (tap a line → الكلام · الخط · اللون · الحجم · إرجاع), all tiers ===== */

.lnp{position:fixed;z-index:46;top:84px;right:18px;width:min(340px,40vw);max-height:calc(100vh - 110px);display:flex;flex-direction:column;direction:rtl;background:rgba(255,251,243,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(184,145,74,.45);border-radius:18px;box-shadow:0 12px 34px rgba(40,28,16,.22);color:#4A3428;overflow:hidden}
.lnp[hidden]{display:none}
.lnp.lnp-flip{right:auto;left:18px}
.lnp-h{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 5px;font-size:14px}
.lnp-h b{font-weight:700;color:#4A3428}
.lnp-x{border:0;background:transparent;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;color:#6b4f2a;border-radius:50%}
.lnp-x svg{width:18px;height:18px}
.lnp-tabs{display:flex;gap:4px;padding:0 10px 6px;border-bottom:1px solid rgba(184,145,74,.25)}
.lnp-tabs button{flex:1 1 0;min-width:0;border:1px solid rgba(184,145,74,.45);background:#FFF9EE;color:#6b4f2a;border-radius:999px;padding:7px 2px;font:600 13.5px/1.2 inherit;font-family:inherit;cursor:pointer;white-space:nowrap}
.lnp-tabs button.on{background:#B8914A;border-color:#B8914A;color:#fff}
.lnp-tabs .lnp-rst{flex:0 0 auto;padding:7px 10px;background:#fff;border-style:dashed}
.lnp-all{display:flex;align-items:center;gap:6px;padding:6px 14px 0;font-size:12.5px;color:#6b4f2a}
.lnp-all[hidden]{display:none}
.lnp-c{overflow-y:auto;padding:8px 12px 12px;flex:1 1 auto;overscroll-behavior:contain}
.lnp-p[hidden]{display:none}
.lnp-f{display:block;margin-bottom:8px}
.lnp-f span{display:block;font-size:12px;color:#8a6d45;margin-bottom:3px}
.lnp-f input,.lnp-f textarea{width:100%;box-sizing:border-box;border:1px solid rgba(184,145,74,.55);border-radius:10px;padding:8px 10px;font:16px/1.4 inherit;font-family:inherit;background:#fff;color:#3b2a1e;resize:vertical}
.lnp .fgrp{margin:6px 0 4px;font-size:12px;color:#8a6d45}
.lnp .flist{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lnp .fopt{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px;border:1px solid rgba(184,145,74,.4);border-radius:12px;background:#fff;cursor:pointer;font-size:15px;color:#3b2a1e}
.lnp .fopt small{font-size:10.5px;color:#9a8060}
.lnp .fopt.on{border-color:#B8914A;box-shadow:0 0 0 2px rgba(184,145,74,.35);background:#FFF6E4}
.lnp .fopt i{position:absolute;top:3px;left:7px;font-style:normal;color:#B8914A;font-size:12px}
.lnp .cp-l{margin:2px 0 6px;font-size:12px;color:#8a6d45}
.lnp-sw{display:flex;flex-wrap:wrap;gap:8px}
.lnp-sw .cp-s{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.18);background:var(--c);cursor:pointer;padding:0}
.lnp-sw .cp-s.on{box-shadow:0 0 0 3px #B8914A}
.lnp-crow{display:flex;gap:8px;margin-top:10px}
.lnp-orig,.lnp-more{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid rgba(184,145,74,.5);background:#FFF9EE;color:#6b4f2a;border-radius:999px;padding:7px 8px;font:600 13px/1.2 inherit;font-family:inherit;cursor:pointer}
.lnp-orig.on{background:#B8914A;color:#fff}
.lnp-sz{display:flex;align-items:center;gap:8px;direction:ltr;margin-top:4px}
.lnp-sz input{flex:1 1 auto;accent-color:#B8914A}
.lnp-sz .lt-z{width:40px;height:40px;border-radius:50%;border:1px solid rgba(184,145,74,.55);background:#fff;font-size:22px;color:#6b4f2a;cursor:pointer;touch-action:none}
.lnp-v{display:block;text-align:center;margin-top:6px;font-size:15px;color:#4A3428}
.lnp-note{margin:8px 0 0;font-size:12px;color:#9a8060;text-align:center}
@media (max-width:600px){
  .lnp,.lnp.lnp-flip{top:auto;left:0;right:0;bottom:0;width:auto;max-height:45vh;max-height:45svh;border-radius:16px 16px 0 0;border-bottom:0;box-shadow:0 -6px 22px rgba(40,28,16,.22)}
  .lnp-h{padding:6px 12px 3px}
  .lnp .flist{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:4px}
  .lnp .fopt{flex:0 0 auto;min-width:104px}
  .lnp .fgrp{display:none}
  html.lnp-on body{padding-bottom:46vh}
}

.lnp-more.on{background:#B8914A;color:#fff;border-color:#B8914A}
.lnp-rb{display:inline-block;width:16px;height:16px;border-radius:50%;background:conic-gradient(#f44,#fd3,#4c4,#3cf,#44f,#f4f,#f44);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(184,145,74,.5)}
.lnp-cp{margin-top:10px;padding:10px;border:1px solid rgba(184,145,74,.35);border-radius:14px;background:#FFFDF8}
.lnp-cp[hidden]{display:none}
.lnp-cp .cp{display:flex;flex-direction:column;gap:10px}
.lnp-cp .cp-sv{height:120px}
.lnp-cp .cp-row input{font-size:16px}
.lnp-sw .cp-s{aspect-ratio:auto;max-width:none;flex:0 0 auto}
@media (max-width:600px){
  .lnp,.lnp.lnp-flip{height:auto}
  .lnp-c{padding:6px 12px 10px}
  .lnp-cp .cp-sv{height:92px}
  .lnp-sw{flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none}
  .lnp-sw::-webkit-scrollbar{display:none}
  html.lnp-on body{padding-bottom:var(--lnp-h,46vh)}
}

/* ===== 9l (Reham 2:44 PM «خلي خط الفيديو باخر الصفحه… بدون مايوخد من حيز الصفحه»): the video's ▶/pause + progress line sit INSIDE the
   frame, over its bottom edge on a soft gradient — no strip under the video. Only the button and the line take taps; the rest of the
   strip lets taps through to the lines. Never part of the saved video (that is drawn on its own canvas). ===== */
.is-video #stage > .vctl.vctl-in{position:absolute;left:0;right:0;bottom:0;z-index:7;margin:0;width:auto;max-width:none;gap:8px;padding:22px 10px 6px 12px;
  border:0;border-radius:0;box-shadow:none;background:linear-gradient(to top,rgba(24,16,8,.55),rgba(24,16,8,.22) 55%,rgba(24,16,8,0));pointer-events:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body.ed-split .is-video #stage > .vctl.vctl-in{width:auto}
.is-video #stage > .vctl.vctl-in > *{pointer-events:auto}
.is-video #stage > .vctl.vctl-in .vc-pp{width:30px;height:30px;background:rgba(255,253,249,.92);color:#8C6828;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.is-video #stage > .vctl.vctl-in .vc-pp svg{width:14px;height:14px}
.is-video #stage > .vctl.vctl-in #vcSeek{height:22px}
.is-video #stage > .vctl.vctl-in #vcSeek::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to left,#E9C878 var(--p,0%),rgba(255,255,255,.45) var(--p,0%))}
.is-video #stage > .vctl.vctl-in #vcSeek::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5.5px;border:2px solid #E9C878}
.is-video #stage > .vctl.vctl-in #vcSeek::-moz-range-track{background:rgba(255,255,255,.45)}
.is-video #stage > .vctl.vctl-in #vcSeek::-moz-range-progress{background:#E9C878}
.is-video #stage > .vctl.vctl-in .vc-t{color:#fff;font-size:11.5px;min-width:28px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
@media (max-width:699px){.is-video #stage > .vctl.vctl-in{max-width:none}}

/* ===== 9l: «الحركة» on the 149 site — editor row ===== */
.smo-sum .smo-ic{flex:0 0 auto;width:42px;height:56px;border-radius:10px;display:grid;place-items:center;font-size:24px;background:linear-gradient(160deg,#FFF6E4,#F1DFB8);box-shadow:inset 0 0 0 1px rgba(184,145,74,.45)}
.smo-ops .smo-op{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 9px}
.smo-ops .smo-op i{font-style:normal;font-size:26px;line-height:1.1}
/* ===== 9l: the site's opening (one play, over the page; a tap skips) ===== */
.s9op{position:fixed;inset:0;z-index:9000;pointer-events:auto;overflow:hidden;--og:var(--s9gold,#B8914A);--op:var(--s9paper,#FBF6EC);perspective:1400px;transition:opacity .6s ease}
.s9op.s9op-out{opacity:0;pointer-events:none}
.s9op i,.s9op b,.s9op em{position:absolute;display:block;font-style:normal}
.s9op-a,.s9op-b{top:0;bottom:0;width:50%;background:var(--op);transition:transform 1.5s cubic-bezier(.7,0,.25,1) .45s,opacity 1.2s ease .6s}
.s9op-a{right:0;box-shadow:inset 1px 0 0 rgba(0,0,0,.06)}.s9op-b{left:0;box-shadow:inset -1px 0 0 rgba(0,0,0,.06)}
.s9op-c{left:50%;top:50%;transform:translate(-50%,-50%)}
/* curtain: two panels slide away to the sides */
.s9op-curtain .s9op-a,.s9op-curtain .s9op-b{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--og) 70%,#5a1a22) 0 22px,color-mix(in srgb,var(--og) 40%,#3a0e15) 22px 44px)}
.s9op-curtain.s9op-go .s9op-a{transform:translateX(102%)}.s9op-curtain.s9op-go .s9op-b{transform:translateX(-102%)}
/* doors / arch: two leaves swing open on their outer hinges */
.s9op-doors .s9op-a,.s9op-arch .s9op-a{transform-origin:right center;background:linear-gradient(90deg,var(--op),color-mix(in srgb,var(--og) 22%,var(--op)));border-left:2px solid var(--og)}
.s9op-doors .s9op-b,.s9op-arch .s9op-b{transform-origin:left center;background:linear-gradient(270deg,var(--op),color-mix(in srgb,var(--og) 22%,var(--op)));border-right:2px solid var(--og)}
.s9op-arch .s9op-a{border-top-left-radius:100% 30%}.s9op-arch .s9op-b{border-top-right-radius:100% 30%}
.s9op-doors.s9op-go .s9op-a,.s9op-arch.s9op-go .s9op-a{transform:rotateY(-100deg);opacity:0}.s9op-doors.s9op-go .s9op-b,.s9op-arch.s9op-go .s9op-b{transform:rotateY(100deg);opacity:0}
/* book: the two covers open from the spine */
.s9op-book .s9op-a{transform-origin:left center;background:linear-gradient(90deg,color-mix(in srgb,var(--og) 30%,var(--op)),var(--op) 12%)}
.s9op-book .s9op-b{transform-origin:right center;background:linear-gradient(270deg,color-mix(in srgb,var(--og) 30%,var(--op)),var(--op) 12%)}
.s9op-book.s9op-go .s9op-a{transform:rotateY(-160deg);opacity:0}.s9op-book.s9op-go .s9op-b{transform:rotateY(160deg);opacity:0}
.s9op-book .s9op-c{width:4px;height:100%;background:var(--og);opacity:.6;transition:opacity .6s ease .5s}.s9op-book.s9op-go .s9op-c{opacity:0}
/* envelope: the flap lifts, then the envelope slides down */
.s9op-envelope .s9op-a,.s9op-envelope .s9op-b{transition:transform 1.2s cubic-bezier(.6,0,.3,1) 1.1s}
.s9op-envelope .s9op-c{left:0;top:0;transform:none;width:100%;height:44%;background:color-mix(in srgb,var(--og) 25%,var(--op));-webkit-clip-path:polygon(0 0,100% 0,50% 100%);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform .9s cubic-bezier(.5,0,.3,1) .25s,opacity .3s ease 1s;filter:drop-shadow(0 3px 4px rgba(0,0,0,.15))}
.s9op-envelope.s9op-go .s9op-c{transform:rotateX(180deg);opacity:0}.s9op-envelope.s9op-go .s9op-a,.s9op-envelope.s9op-go .s9op-b{transform:translateY(105%)}
/* seal: a wax seal pops, then breaks; the paper lifts away */
.s9op-seal .s9op-c{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d4555f,#8e1f2b 62%,#6b1520);box-shadow:0 4px 14px rgba(0,0,0,.3),inset 0 0 0 6px rgba(255,255,255,.08);transition:transform .5s cubic-bezier(.3,1.6,.5,1),opacity .4s ease 1s;transform:translate(-50%,-50%) scale(.2)}
.s9op-seal.s9op-go .s9op-c{transform:translate(-50%,-50%) scale(1.15);opacity:0}
.s9op-seal .s9op-a,.s9op-seal .s9op-b{transition:transform 1.2s cubic-bezier(.7,0,.25,1) 1s}.s9op-seal.s9op-go .s9op-a{transform:translateY(-105%)}.s9op-seal.s9op-go .s9op-b{transform:translateY(105%)}
/* ribbon: a gold band across the middle unties from its centre */
.s9op-ribbon .s9op-c{left:0;width:100%;height:34px;transform:translateY(-50%);background:linear-gradient(180deg,color-mix(in srgb,var(--og) 80%,#fff),var(--og) 50%,color-mix(in srgb,var(--og) 80%,#000));transition:transform .8s cubic-bezier(.6,0,.3,1) .3s}
.s9op-ribbon.s9op-go .s9op-c{transform:translateY(-50%) scaleX(0)}
.s9op-ribbon .s9op-a,.s9op-ribbon .s9op-b{transition:transform 1.2s cubic-bezier(.7,0,.25,1) .9s}.s9op-ribbon.s9op-go .s9op-a{transform:translateX(102%)}.s9op-ribbon.s9op-go .s9op-b{transform:translateX(-102%)}
/* frame: a gold frame draws in, then the paper fades through it */
.s9op-frame .s9op-c{width:78vw;height:78vh;border:3px solid var(--og);box-shadow:0 0 0 8px var(--op),0 0 0 9px var(--og);opacity:0;transform:translate(-50%,-50%) scale(.8);transition:transform 1.2s ease .1s,opacity .5s ease .1s}
.s9op-frame.s9op-go .s9op-c{opacity:1;transform:translate(-50%,-50%) scale(1.45)}
.s9op-frame .s9op-a,.s9op-frame .s9op-b,.s9op-mist .s9op-a,.s9op-mist .s9op-b,.s9op-rays .s9op-a,.s9op-rays .s9op-b,.s9op-lantern .s9op-a,.s9op-lantern .s9op-b,.s9op-petals .s9op-a,.s9op-petals .s9op-b,.s9op-dust .s9op-a,.s9op-dust .s9op-b{transition:opacity 1.3s ease 1s}
.s9op-frame.s9op-go .s9op-a,.s9op-frame.s9op-go .s9op-b,.s9op-mist.s9op-go .s9op-a,.s9op-mist.s9op-go .s9op-b,.s9op-rays.s9op-go .s9op-a,.s9op-rays.s9op-go .s9op-b,.s9op-lantern.s9op-go .s9op-a,.s9op-lantern.s9op-go .s9op-b,.s9op-petals.s9op-go .s9op-a,.s9op-petals.s9op-go .s9op-b,.s9op-dust.s9op-go .s9op-a,.s9op-dust.s9op-go .s9op-b{opacity:0}
/* mist: a soft fog clears */
.s9op-mist .s9op-c{width:160vmax;height:160vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,.6) 50%,rgba(255,255,255,0));filter:blur(10px);transition:transform 2.2s ease,opacity 1.6s ease .7s}
.s9op-mist.s9op-go .s9op-c{transform:translate(-50%,-50%) scale(1.5);opacity:0}
/* rays: light rays turn and burst */
.s9op-rays .s9op-c{width:180vmax;height:180vmax;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--og) 55%,transparent) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(closest-side,#000 20%,transparent 70%);mask:radial-gradient(closest-side,#000 20%,transparent 70%);transform:translate(-50%,-50%) rotate(0) scale(.4);transition:transform 2.3s cubic-bezier(.3,0,.3,1),opacity 1s ease 1.4s}
.s9op-rays.s9op-go .s9op-c{transform:translate(-50%,-50%) rotate(50deg) scale(1.2);opacity:0}
/* lantern: a warm glow grows from the middle */
.s9op-lantern .s9op-a,.s9op-lantern .s9op-b{background:#2a1c10}
.s9op-lantern .s9op-c{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,#fff3c8,color-mix(in srgb,var(--og) 80%,#ffb347) 45%,rgba(255,170,60,0) 72%);transition:transform 1.8s cubic-bezier(.3,0,.2,1) .1s,opacity .9s ease 1.3s}
.s9op-lantern.s9op-go .s9op-c{transform:translate(-50%,-50%) scale(40);opacity:0}
/* ring: a golden ring opens the page from its centre */
.s9op-ring .s9op-a,.s9op-ring .s9op-b{display:none}
.s9op-ring .s9op-c{width:24px;height:24px;border-radius:50%;border:4px solid var(--og);box-shadow:0 0 0 220vmax var(--op);transition:width 1.7s cubic-bezier(.65,0,.3,1) .35s,height 1.7s cubic-bezier(.65,0,.3,1) .35s}
.s9op-ring.s9op-go .s9op-c{width:260vmax;height:260vmax}
/* petals / dust: they fall through as the paper fades */
.s9op em{top:-8%;width:var(--z);height:calc(var(--z) * .8);border-radius:70% 0 70% 0;background:linear-gradient(135deg,#f6c9cf,#d9838d);opacity:0;animation:s9opFall 2.2s ease-in var(--d) forwards;z-index:2}
.s9op-dust em{border-radius:50%;height:var(--z);background:radial-gradient(circle,#fff6d6,var(--og) 60%,transparent 70%)}
@keyframes s9opFall{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:1}100%{opacity:.2;transform:translate(var(--sx),112vh) rotate(260deg)}}
@media (prefers-reduced-motion:reduce){.s9op{display:none}}
/* ===== 9l: the site's background motion (a light layer, never takes a tap) ===== */
.s9amb{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden;--og:var(--s9gold,#B8914A)}
.s9amb i{position:absolute;display:block;font-style:normal}
.s9amb-dust i{width:var(--z);height:var(--z);border-radius:50%;background:radial-gradient(circle,#fff6d6,var(--og) 55%,transparent 72%);opacity:.7;animation:s9ambUp var(--du) linear var(--d) infinite}
@keyframes s9ambUp{0%{transform:translate(0,30vh);opacity:0}15%{opacity:.75}85%{opacity:.6}100%{transform:translate(var(--sx),-60vh);opacity:0}}
.s9amb-sparkle i{width:auto;height:auto;font-size:var(--z);line-height:1;color:color-mix(in srgb,var(--og) 70%,#fff);text-shadow:0 0 6px rgba(255,240,200,.9);opacity:0;animation:s9ambTw calc(var(--du) * .5) ease-in-out var(--d) infinite}
@keyframes s9ambTw{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:.85;transform:scale(1) rotate(25deg)}}
.s9amb-petals i{top:-6%!important;width:var(--z);height:calc(var(--z) * .78);border-radius:70% 0 70% 0;background:linear-gradient(135deg,#f8d3d8,#dc8e97);opacity:.75;animation:s9ambFall var(--du) linear var(--d) infinite}
@keyframes s9ambFall{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(var(--sx),55vh) rotate(160deg)}100%{transform:translate(calc(var(--sx) * -.5),112vh) rotate(320deg)}}
.s9amb-bokeh i{width:var(--z);height:var(--z);border-radius:50%;background:radial-gradient(circle,rgba(255,250,235,.55),color-mix(in srgb,var(--og) 30%,transparent) 60%,transparent 72%);filter:blur(2px);opacity:.55;animation:s9ambDrift var(--du) ease-in-out var(--d) infinite alternate}
@keyframes s9ambDrift{0%{transform:translate(0,0) scale(1);opacity:.25}100%{transform:translate(var(--sx),-40px) scale(1.25);opacity:.6}}
.s9amb-satin{background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.32) 48%,rgba(255,248,228,.18) 52%,transparent 65%);background-size:300% 100%;animation:s9ambSatin 8s ease-in-out infinite}
@keyframes s9ambSatin{0%{background-position:120% 0}100%{background-position:-120% 0}}
.s9amb-rays::before{content:"";position:absolute;left:50%;top:-70vmax;width:140vmax;height:140vmax;margin-left:-70vmax;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--og) 22%,transparent) 0 5deg,transparent 5deg 15deg);-webkit-mask:radial-gradient(closest-side,#000 25%,transparent 75%);mask:radial-gradient(closest-side,#000 25%,transparent 75%);opacity:.55;animation:s9ambSpin 40s linear infinite}
@keyframes s9ambSpin{to{transform:rotate(360deg)}}
.s9amb-frame::before{content:"";position:absolute;inset:8px;border:1.5px solid color-mix(in srgb,var(--og) 70%,transparent);border-radius:14px;box-shadow:0 0 12px color-mix(in srgb,var(--og) 40%,transparent),inset 0 0 12px color-mix(in srgb,var(--og) 30%,transparent);animation:s9ambGlow 3.5s ease-in-out infinite}
@keyframes s9ambGlow{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.s9amb{display:none}}
/* ===== 9l: the text motion she chose, on every card of the site (the names use the same choice through .s9tx-*) ===== */
html[class*="s9ln-"] .s9-in.rv .s9-card>*{transition:opacity .8s ease,transform .9s cubic-bezier(.22,.61,.36,1),filter .9s ease,-webkit-clip-path 1.1s ease,clip-path 1.1s ease;transition-delay:calc(1s + var(--i,0) * .2s)}
html.s9ln-soft .s9-in.rv .s9-card>*,html.s9ln-glow .s9-in.rv .s9-card>*{transform:none;filter:blur(9px)}
html.s9ln-glow .s9-in.rv .s9-card>*{filter:brightness(1.9) blur(6px)}
html.s9ln-shimmer .s9-in.rv .s9-card>*{transform:none;filter:brightness(1.7) saturate(1.3)}
html.s9ln-write .s9-in.rv .s9-card>*,html.s9ln-pen .s9-in.rv .s9-card>*{opacity:1;transform:none;-webkit-clip-path:inset(-20% -20% -20% 120%);clip-path:inset(-20% -20% -20% 120%)}
html.s9ln-words .s9-in.rv .s9-card>*{transform:scale(1.18);filter:blur(4px)}
html.s9ln-slide .s9-in.rv .s9-card>*{transform:translateX(46px)}
html.s9ln-track .s9-in.rv .s9-card>*{transform:scaleX(1.35)}
html.s9ln-center .s9-in.rv .s9-card>*{transform:scale(.6)}
html[class*="s9ln-"] .s9-in.rv.in .s9-card>*{opacity:1;transform:none;filter:none;-webkit-clip-path:none;clip-path:none}
html.s9ln-write .s9-in.rv.in .s9-card>*,html.s9ln-pen .s9-in.rv.in .s9-card>*{-webkit-clip-path:inset(-150% -150% -150% -150%);clip-path:inset(-150% -150% -150% -150%)}

/* ===== 9o: the time is picked (hour : minutes · ص|م), ⌨️ for a text time ===== */
.tm-sels{display:inline-flex;align-items:center;gap:3px;flex:1 1 auto;min-width:0;direction:ltr}
.tm-sels .tm-sel{display:inline-block;width:auto;min-width:54px;flex:1 1 0;margin:0;min-height:34px;padding:2px 18px 2px 8px;text-align:center;text-align-last:center;font-size:14px}
.tm-col{font-weight:700;color:#8C7A62}
.tm-kb{flex:0 0 auto;border:1px solid #D7BF95;border-radius:999px;background:#fff;min-height:32px;min-width:32px;padding:0 6px;font-size:14px;cursor:pointer}
.tm-row:not(.tm-txt) > input,.tm-row:not(.tm-txt) > .fin{display:none!important}
.tm-row.tm-txt > .tm-sels{display:none!important}

/* ===== 9o: every text box grows; Enter = a new line ===== */
textarea.ta9,.field textarea.ta9,.lrow-f .field textarea.ta9,.lnp textarea.ta9{min-height:0!important;resize:none;overflow:hidden;line-height:1.45;display:block}

/* ===== 9o: the video's ✕ on each line (over the preview only, never in the file) ===== */
.v10-xs{position:absolute;inset:0;pointer-events:none;z-index:7}
.v10-xs[hidden]{display:none}
.v10-x{position:absolute;pointer-events:auto;width:24px;height:24px;border-radius:50%;border:1.5px solid #fff;background:#8E2F2F;color:#fff;font:700 12px/1 system-ui,sans-serif;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.28)}
.v10-x::after{content:"";position:absolute;inset:-9px}
.v10-unrm{position:absolute;pointer-events:auto;border:1px solid #D7BF95;border-radius:999px;background:rgba(255,251,244,.95);color:#5E4A22;font:700 12.5px/1.2 inherit;padding:6px 10px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.v10-xt{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:8;display:flex;gap:10px;align-items:center;background:rgba(46,38,27,.92);color:#fff;border-radius:999px;padding:7px 8px 7px 14px;font-size:13.5px;white-space:nowrap}
.v10-xt[hidden]{display:none}
.v10-xt button{border:0;border-radius:999px;background:#E9CF96;color:#3B2F22;font:inherit;font-weight:700;padding:4px 12px;cursor:pointer}

/* ===== 9o: a line broken with Enter keeps its break on the 149 site ===== */
.s9-rel,.s9-dven,.iv-venue,.s9-note,.s9-sub,.sm-venue,.s9-tx,.s9-kick,.s9-intro,.s9-fam{white-space:pre-line}

/* 9p: «الحجم» with no cap that matters — the typed % box beside the value */
.lnp-vr{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px}
.lnp-vr .lnp-v{display:none}
.lnp-nw{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:#4A3428}
.lnp-n{width:74px;height:34px;box-sizing:border-box;border:1px solid rgba(184,145,74,.55);border-radius:10px;background:#fff;text-align:center;font:600 15px/1 "IBM Plex Sans Arabic",sans-serif;color:#4A3428;direction:ltr;-moz-appearance:textfield}
.lnp-n::-webkit-outer-spin-button,.lnp-n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}