/* ================= پایه ================= */
@font-face{font-family:"DoranVF";src:url("fonts/DoranVF.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --gold:#c9a96a; --gold-l:#ecd9a8; --gold-rgb:201,169,106; --gold-l-rgb:236,217,168;
  --bg:#121212; --bar:18,18,18; --text:#f4efe8; --muted:#c9c3b9; --head:#f3dfae; --price:#f7e6b8;
  --edge-soft:rgba(var(--gold-rgb),.35); --line:rgba(var(--gold-rgb),.3);
  --chip:rgba(var(--gold-rgb),.08); --field:rgba(0,0,0,.35);
  --card-1:rgb(12,12,12); --card-2:rgb(5,5,5); --maxw:480px; --r-lg:25px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;overflow-x:clip;font-size:104%}
html,body{background:var(--bg)}
body{overflow-x:clip;   /* هیچ چیز صفحه را افقی اسکرول‌پذیر نکند (اندروید) */
  font-family:"DoranVF","Geeza Pro",-apple-system,"SF Pro Text",Tahoma,sans-serif;color:var(--text);line-height:1.8;min-height:100vh;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);position:relative;isolation:isolate}
/* پس‌زمینه: لایه‌ی ثابت جدا با درخشش گرم طلایی از بالا (تم‌های مناسبتی رنگ خودشان را می‌گذارند) */
/* لایه‌های ثابت تمام‌صفحه هم‌قد «بزرگ‌ترین» ارتفاع صفحه (lvh): با باز/بسته شدن نوار آدرس گوشی موقع اسکرول قدشان عوض نمی‌شود،
   پس هاله‌ها و تزئیناتی که با درصد جا گرفته‌اند (ولنتاین، یلدا، روز مادر، ستاره‌ها، روح‌ها) تکان نمی‌خورند */
:root{--fixh:100vh}
@supports (height:100lvh){:root{--fixh:100lvh}}   /* app.js همین را به px ثابت می‌کند (fixH) */
body::before{content:"";position:fixed;inset:0;bottom:auto;height:var(--fixh);z-index:-1;pointer-events:none;transform:translateZ(0);background:linear-gradient(180deg,#141311,#121212 40%)}
/* تم‌های ساده و تک‌رنگ: نقطه‌های ریز طلایی پشت ستون منو (فقط بیرون قاب‌ها دیده می‌شود)؛ تم‌های مناسبتی ندارند */
html:not([data-occasion]) .app::before{content:"";position:fixed;top:0;left:50%;width:min(var(--maxw),100%);height:var(--fixh);transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:var(--dots,radial-gradient(circle,rgba(var(--gold-rgb),.2) .5px,transparent .95px) 0 0/9px 9px)}   /* --dots از JS: نسبت به صفحه‌ی گوشی، پایین درشت، بالا ریز */
img{display:block;max-width:100%}
a{color:inherit}
.app{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;min-height:100vh;padding:0 22px}
/* صفحه‌ی اول و منو دو صفحه‌ی جدا هستند (بدون اسکرول بین‌شان): html.at-intro = صفحه‌ی اول؛ دکمه‌ی «مشاهده منو» منو را باز می‌کند.
   ورود منو فقط با محو شدن (بدون transform تا نوار چسبان و لایه‌ها دست نخورند) */
html.at-intro .menuwrap{display:none}
html:not(.at-intro) .intro{display:none}
/* صفحه‌ی اول ثابت است: دقیقاً هم‌قد بخش دیده‌شده‌ی صفحه (با نوار آدرس گوشی)، بدون اسکرول و کش‌آمدن بالا/پایین در هیچ تمی */
html.at-intro,html.at-intro body{height:100%;overflow:hidden;overscroll-behavior:none}
html.at-intro body,html.at-intro .app{min-height:0}
.menuwrap{padding-bottom:8px;animation:menuIn .35s ease backwards}   /* backwards: بعد از پایان انیمیشن اثری نمی‌ماند تا backdrop-filter کارت‌ها پشت‌زمینه را ببیند */
@keyframes menuIn{from{opacity:0}to{opacity:1}}

/* ================= صفحه‌ی اول: وضعیت و زبان بالا، لوگو و نام و دسترسی سریع وسط، دکمه‌ی «مشاهده منو» پایین ================= */
.intro{position:relative;z-index:21;display:flex;flex-direction:column;height:100vh;height:100svh;
  padding:calc(env(safe-area-inset-top) + 14px) 0 0}   /* دکمه‌ی «مشاهده منو» کمی بالاتر از لبه‌ی پایین */
/* عکس فضای کافه پشت صفحه‌ی اول، هم‌عرض ستون (حاشیه‌ی .app را می‌پوشاند، بیرون نمی‌زند)؛ با سایه‌ی کم هم‌رنگ پس‌زمینه فقط از پایین */
.intro::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-22px;right:-22px;pointer-events:none;
  background:linear-gradient(rgba(22,22,22,.68),rgba(22,22,22,.68)),   /* پرده‌ی یکنواخت: عکس کلاً تیره‌تر و محوتر */
    linear-gradient(180deg,#161616 0%,color-mix(in srgb,#161616 88%,transparent) 22%,color-mix(in srgb,#161616 45%,transparent) 48%,transparent 62%),linear-gradient(180deg,transparent 0%,transparent 70%,color-mix(in srgb,#161616 30%,transparent) 88%,color-mix(in srgb,#161616 75%,transparent) 100%),var(--ibg) center top/cover no-repeat}
.itop{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px}
.itop .lang-btn{margin-inline-start:auto}
/* اطلاعیه‌ی صفحه‌ی اول: قرص هم‌سبک دکمه‌ی زبان؛ متن بلند رفت و برگشت آرام (‎--d از app.js) */
.notice{display:flex;align-items:center;gap:6px;max-width:100%;width:max-content;margin:0 auto 18px;height:38px;padding:0 15px;border-radius:999px;
  color:var(--gold-l);font-size:.8rem;border:1.5px solid rgba(var(--gold-rgb),.7);
  background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(255,255,255,.05)),rgba(26,26,26,.78);box-shadow:inset 0 4px 7px -3px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.1),0 4px 10px rgba(0,0,0,.25)}
.notice[hidden]{display:none}
.notice .nl{flex:none;font-weight:800}
.notice .nw{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.notice .nx{display:inline-block;font-weight:600;color:var(--text)}
.notice.run .nw{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 8px),transparent);mask-image:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 8px),transparent)}
.notice.run{gap:0}   /* فاصله‌ی بعد از «اطلاعیه:» را خود فاصله‌ی دو طرف متن متحرک می‌دهد؛ متن هیچ‌وقت زیر برچسب نمی‌رود */
.notice.run .nx{animation:noticeScroll 10s infinite;padding-inline:8px}   /* فاصله‌ی هم‌اندازه‌ی محوشدگی لبه‌ها (۸px): اول و آخر متن در توقف کامل دیده شود */
/* رفت: آرام از چپ به راست تا انتهای متن؛ مکث؛ برگشت: سریع‌تر از رفت ولی نرم (شروع و پایان آرام)؛ مکث */
@keyframes noticeScroll{0%,10%{transform:translateX(0);animation-timing-function:ease-in-out}62%,74%{transform:translateX(var(--d));animation-timing-function:cubic-bezier(.45,0,.2,1)}92%,100%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.notice.run .nx{animation:none}.notice .nw{text-overflow:ellipsis}}
.icenter{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 0 calc(12px + 8vh);   /* پایینِ بیشتر: لوگو کمی بالاتر از وسط (تعادل با دکمه‌ی منو) */
  animation:introIn .9s cubic-bezier(.2,.7,.2,1) both}
.logo{width:min(62vw,250px,30svh);height:auto;margin:0 0 20px;display:block;
  filter:brightness(0) invert(1) drop-shadow(0 8px 26px rgba(0,0,0,.45))}   /* لوگو تک‌رنگ سفید (در همه‌ی تم‌ها) */
.icenter h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);font-weight:800;line-height:1.3;color:var(--gold-l)}
.icenter h1 .fa{font-size:clamp(1.9rem,9vw,2.5rem)}
.icenter h1 .fa::before,.icenter h1 .fa::after{content:"";display:inline-block;vertical-align:middle;width:30px;height:1px;background:rgba(var(--gold-rgb),.6);margin:0 14px}
/* وضعیت امروز: قرص کوچک بالای اینترو */
/* قرص وضعیت: هم‌سبک دکمه‌ی زبان (قد، قاب طلایی، زمینه و سایه) */
#statusLine{display:flex;align-items:center;gap:7px;min-width:0;height:38px;padding:0 14px;border-radius:999px;font-size:.78rem;font-weight:600;line-height:1.4;color:var(--text);
  border:1.5px solid rgba(var(--gold-rgb),.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(255,255,255,.05)),rgba(26,26,26,.78);box-shadow:inset 0 4px 7px -3px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.1),0 4px 10px rgba(0,0,0,.25)}
#statusLine[hidden]{display:none}
/* دسترسی سریع زیر نام: کاشی آیکن + برچسب، بین دو خط نازک طلایی */
.ibottom{display:flex;flex-direction:column;align-items:stretch}
/* ورق شیشه‌ای پایین صفحه‌ی اول: بلور عکس پشتش؛ دکمه‌های دسترسی و «مشاهده منو» روی آن */
.isheet{margin:auto 0 0;padding:0 0 calc(env(safe-area-inset-bottom) + 22px)}
.intro::after{content:"";position:absolute;z-index:-1;left:-22px;right:-22px;bottom:0;height:42%;pointer-events:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);mask-image:linear-gradient(180deg,transparent,#000 55%);background:linear-gradient(180deg,color-mix(in srgb,#161616 0%,transparent),color-mix(in srgb,#161616 70%,transparent))}
.isheet .grab{display:none}
.isheet .iacts{border:0;margin-bottom:22px;padding:4px}
.isheet .iact .ico{background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px rgba(0,0,0,.3)}
.isheet .iact{color:#f3efe3;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.isheet .menu-go{display:flex;width:100%;max-width:none;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(255,255,255,.05)),rgba(26,26,26,.78);box-shadow:inset 0 0 0 1.5px rgba(var(--gold-rgb),.75),inset 0 4px 8px -3px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.1),0 8px 20px rgba(0,0,0,.3);position:relative;animation:introIn .9s .35s cubic-bezier(.2,.7,.2,1) both,goRim 2s 1.4s ease-in-out infinite}
@keyframes goRim{0%,100%{box-shadow:inset 0 0 0 1.5px rgba(var(--gold-rgb),.45),inset 0 4px 8px -3px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.1),0 8px 20px rgba(0,0,0,.3)}50%{box-shadow:inset 0 0 0 1.5px rgba(var(--gold-rgb),1),inset 0 4px 8px -3px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.1),0 8px 20px rgba(0,0,0,.3)}}
.iacts{display:flex;justify-content:center;gap:2px;align-self:stretch;margin-top:0;padding:10px 4px;border-top:1px solid rgba(var(--gold-rgb),.22);border-bottom:1px solid rgba(var(--gold-rgb),.22)}
.iact{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;flex:0 1 78px;padding:4px 4px;white-space:nowrap;font:inherit;font-size:.74rem;font-weight:600;line-height:1.3;
  color:var(--muted);text-decoration:none;background:none;border:0;cursor:pointer;transition:color .2s}
.iact[hidden]{display:none}
/* کاشی آیکن: مربع گرد با گرادیان و لبه‌ی طلایی؛ آیکن‌ها خطی با پرشدگی کم‌رنگ (دوتُن) */
.iact .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;color:var(--gold-l);
  background:linear-gradient(160deg,rgba(var(--gold-rgb),.2),rgba(var(--gold-rgb),.04));
  box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.42),inset 0 1px 0 rgba(255,255,255,.08),0 6px 14px rgba(0,0,0,.28);transition:transform .2s,box-shadow .2s}
.iact .df{fill:currentColor;fill-opacity:.16}
.iact:active .ico{transform:scale(.92)}
.iact[aria-expanded=true]{color:var(--gold-l)}
.iact[aria-expanded=true] .ico{box-shadow:inset 0 0 0 1.5px var(--gold-l),0 0 14px rgba(var(--gold-rgb),.35)}
/* گوشی‌های کوتاه: فاصله‌ها کمتر تا همه‌چیز بدون اسکرول جا شود */
@media (max-height:700px){.icenter{padding-bottom:calc(8px + 2vh)}.logo{margin-bottom:12px}}
/* گالری تمام‌صفحه: ورق زدن افقی با scroll-snap؛ روی دسکتاپ هم‌عرض ستون منو */
.glb{position:fixed;top:0;bottom:0;left:50%;width:min(var(--maxw),100%);transform:translateX(-50%);z-index:200;box-shadow:0 0 0 100vmax rgba(0,0,0,.55);background:rgba(6,6,6,.96);opacity:0;transition:opacity .25s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.glb.on{opacity:1}
.glb[hidden]{display:none}
html.glb-open{overflow:hidden}
.glb-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none}
.glb-track::-webkit-scrollbar{display:none}
.glb-track figure{flex:0 0 100%;height:100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always;display:grid;place-items:center;padding:calc(env(safe-area-inset-top) + 64px) 12px calc(env(safe-area-inset-bottom) + 56px)}
.glb-track img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.glb-top{position:absolute;inset-inline:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 14px) 16px 0;pointer-events:none}
.glb-top>*{pointer-events:auto}
.glb-n{display:inline-flex;align-items:center;justify-content:center;min-width:72px;height:42px;padding:6px 16px 0;box-sizing:border-box;font-size:1rem;font-weight:900;line-height:1;direction:ltr;color:#fff;border-radius:999px;background:rgba(0,0,0,.6);border:2px solid rgba(var(--gold-rgb),.75)}
.glb-x,.glb-nav{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:inherit;font-size:1.9rem;font-weight:900;line-height:1;padding:0 0 1px;cursor:pointer;color:#fff;
  background:rgba(0,0,0,.6);border:2px solid rgba(var(--gold-rgb),.75)}
.glb-nav{position:absolute;top:50%;transform:translateY(-50%);display:none}
.glb-nav.left{left:14px}
.glb-nav.right{right:14px}
.glb-dots{position:absolute;inset-inline:0;bottom:calc(env(safe-area-inset-bottom) + 22px);display:flex;justify-content:center;gap:6px;pointer-events:none}
.glb-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);transition:.2s}
.glb-dots i.on{width:18px;border-radius:3px;background:var(--gold-l)}
@media (hover:hover) and (pointer:fine){.glb-nav{display:grid}}
/* وای‌فای: کارت شیشه‌ای شناور بالای ردیف دکمه‌ها (چیدمان صفحه را جابه‌جا نمی‌کند)؛ فلش کارت به دکمه‌ی وای‌فای اشاره می‌کند (--ax از JS) */
.isheet .ibottom{position:relative}
.wifibox{--ax:50%;position:absolute;z-index:5;left:0;right:0;bottom:calc(100% + 16px);display:flex;flex-direction:column;gap:12px;padding:16px 16px 14px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(24,24,24,.82);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.45),inset 0 1px 0 rgba(255,255,255,.1),0 14px 34px rgba(0,0,0,.45);animation:introIn .3s ease both}
.wifibox::after{content:"";position:absolute;bottom:-7px;left:calc(var(--ax) - 7px);width:14px;height:14px;background:rgba(24,24,24,.95);transform:rotate(45deg);
  border-right:1px solid rgba(var(--gold-rgb),.45);border-bottom:1px solid rgba(var(--gold-rgb),.45);border-radius:0 0 4px 0}
.wifibox[hidden]{display:none}
.wifibox .wf{display:grid;gap:0}
.wifibox p{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:9px 2px}
.wifibox p+p{border-top:1px solid rgba(255,255,255,.1)}
.wifibox small{color:var(--muted);font-size:.78rem}
.wifibox b{color:var(--gold-l);font-weight:800;font-size:1.05rem;letter-spacing:.06em}
.wifibox button{display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:.86rem;font-weight:800;color:var(--gold-l);cursor:pointer;height:42px;border-radius:999px;
  background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(255,255,255,.05)),rgba(26,26,26,.78);border:0;box-shadow:inset 0 0 0 1.5px rgba(var(--gold-rgb),.7),inset 0 4px 7px -3px rgba(0,0,0,.4)}
.wifibox button:active{transform:scale(.97)}
/* دکمه‌ی «مشاهده منو»: قرص طلایی پر، با درخشش ملایم */
.menu-go{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin:0 auto;min-width:min(230px,70%);padding:13px 26px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:1rem;font-weight:800;color:#1b1407;background:linear-gradient(180deg,var(--gold-l),var(--gold));
  box-shadow:0 10px 26px rgba(0,0,0,.4),0 0 0 0 rgba(var(--gold-rgb),.5);animation:introIn .9s .35s cubic-bezier(.2,.7,.2,1) both,goPulse 2.6s 1.4s ease-in-out infinite;
  transition:transform .15s}
.menu-go:active{transform:scale(.96)}
@keyframes goPulse{0%,100%{box-shadow:0 10px 26px rgba(0,0,0,.4),0 0 0 0 rgba(var(--gold-rgb),.45)}50%{box-shadow:0 10px 26px rgba(0,0,0,.4),0 0 0 9px rgba(var(--gold-rgb),0)}}
@keyframes introIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.dot.on{background:#7fbf86;box-shadow:0 0 6px rgba(127,191,134,.7)}
.dot.off{background:#e0695a}

/* دکمه‌ی زبان: قرص با آیکن ترجمه + EN/فا */
.lang-btn{flex:none;height:38px;padding:0 13px;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;cursor:pointer;
  color:var(--gold-l);font-weight:800;font-size:.76rem;background:rgba(var(--gold-rgb),.2);border:1.5px solid rgba(var(--gold-rgb),.7)}
.lang-btn.tb{height:42px;margin-inline-end:8px}   /* نوار منو: هم‌قد دکمه‌ی جستجو */
.lang-btn:active{background:rgba(var(--gold-rgb),.3);transform:scale(.94)}
/* حالت سه‌بعدی فقط داخل دکمه‌ها: گرادیان و برجستگی ملایم داخلی؛ بیرون (قاب و سایه) دست‌نخورده */
.lang-btn{background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(255,255,255,.05)),rgba(26,26,26,.78);box-shadow:inset 0 4px 7px -3px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.1),0 4px 10px rgba(0,0,0,.25)}
.lang-btn::before{content:"";display:block;flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z' stroke='%23000' stroke-width='.7' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z' stroke='%23000' stroke-width='.7' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ================= نوار چسبان: صفحه‌ی اول + جستجو + تب منوها + حباب دسته‌ها =================
   تمام‌عرض ستون است و پایینش در زمینه محو می‌شود */
/* راهنمای کشیدن نوار منوها: یک فلش کم‌رنگ چشمک‌زن در لبه‌ی ادامه‌دار نوار تب‌ها (app.js → hint) */
.rowhint{position:absolute;z-index:25;pointer-events:none;color:var(--gold-l);opacity:0;transform:translateY(-50%);transition:opacity .35s}
.rowhint.on{opacity:1}
.rowhint svg{display:block;filter:drop-shadow(0 0 3px #000);animation:rhBlink 1.1s ease-in-out infinite,rhNudge 1.1s ease-in-out infinite}
@keyframes rhBlink{0%,100%{opacity:.5}50%{opacity:.08}}
@keyframes rhNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
html[dir="ltr"] .rowhint svg{animation-name:rhBlink,rhNudgeR}
@keyframes rhNudgeR{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.toolbar{position:-webkit-sticky;position:sticky;top:0;z-index:20;pointer-events:none;
  margin:0 -22px -30px;padding:calc(env(safe-area-inset-top) + 12px) 22px 44px;   /* حاشیه‌ی ثابت ستون (نه 100vw که روی اندروید صفحه را پهن‌تر و کج می‌کرد) */
  --tb:linear-gradient(to bottom,rgb(var(--bar)) 0,rgb(var(--bar)) calc(100% - 34px),rgba(var(--bar),.75) calc(100% - 22px),rgba(var(--bar),.3) calc(100% - 10px),rgba(var(--bar),0) 100%);
  background:var(--tb)}
.toolbar>*{pointer-events:auto}
/* تا عرض ۵۱۹ (گوشی): زمینه‌ی نوار تا لبه‌های صفحه کشیده می‌شود (وقتی ستون باریک‌تر از صفحه است لبه‌ی نوار دیده نشود).
   با border-image بیرون‌زده: فقط نقاشی است و صفحه را پهن‌تر/اسکرول‌پذیر نمی‌کند */
@media (max-width:519px){.toolbar{background:none;border-image:var(--tb) fill 0 / 0 / 0 100vw}}
.bar{display:flex;align-items:center}   /* فاصله‌ی دکمه‌ها تا اولین تب = فاصله‌ی بین تب‌ها (padding تب‌ها) */
.s-btn{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;color:var(--price);cursor:pointer;
  background:var(--chip);border:1px solid var(--line);border-radius:50%;transition:.2s}
.s-btn[aria-expanded=true]{background:var(--gold);color:#1b1b1b;border-color:var(--gold)}

/* ردیف‌های لغزنده؛ لبه‌ها با --fl/--fr (از JS) محو می‌شوند. فضای خالی پایین برای اینکه سایه‌ی دکمه‌ی فعال بریده نشود */
.tabs,.chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  --l0:0px;--fl:0px;--r0:0px;--fr:0px;
  -webkit-mask-image:linear-gradient(to right,transparent var(--l0),#000 var(--fl),#000 calc(100% - var(--fr)),transparent calc(100% - var(--r0)));
  mask-image:linear-gradient(to right,transparent var(--l0),#000 var(--fl),#000 calc(100% - var(--fr)),transparent calc(100% - var(--r0)))}
.tabs::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}
.tabs{flex:1;min-width:0;padding:14px 8px 20px;margin:-10px 0 -16px}
.tab,.chip{position:relative;flex:0 0 auto;font:inherit;color:var(--text);cursor:pointer;white-space:nowrap;background:var(--chip);border:1px solid var(--line);
  border-radius:999px;transition:.2s;-webkit-appearance:none;appearance:none}
.tab{font-weight:700;font-size:.95rem;padding:6px 16px;height:42px;display:inline-flex;align-items:center;gap:6px}
.tico{flex:none;margin-top:-2px}
.chip{font-weight:600;font-size:.85rem;padding:4px 14px;height:36px}
/* دکمه‌ی انتخاب‌شده: گرادیان تا لبه‌ی بیرونی، سایه‌ی یکنواخت دورتادور و بالاتر از همسایه‌ها */
.tab.active,.chip.active{z-index:2;color:#1b1b1b;border-color:transparent;background:linear-gradient(180deg,var(--gold-l),var(--gold)) border-box;box-shadow:0 0 12px 1px rgba(var(--gold-rgb),.42)}
/* دسته‌هایی که الان در صفحه دیده می‌شوند نیمه‌روشن علامت می‌خورند */
.chip.seen:not(.active){color:var(--gold-l);border-color:rgba(var(--gold-rgb),.65);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.25)}

/* حباب دسته‌ها: فلش بالایش (--px از JS) زیر تب فعال می‌نشیند */
.tray{--px:50%;--tray-bg:rgb(9,9,9);position:relative;display:flex;align-items:center;margin-top:12px;border-radius:999px;
  background:var(--tray-bg);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.45),0 6px 18px rgba(0,0,0,.42)}
.tray[hidden]{display:none}
.tray::before{content:"";position:absolute;top:-7px;left:calc(var(--px) - 7px);width:14px;height:14px;background:var(--tray-bg);transform:rotate(45deg);
  border-top:1px solid rgba(var(--gold-rgb),.45);border-left:1px solid rgba(var(--gold-rgb),.45);border-radius:3px 0 0 0}
.tray .chips{flex:1;min-width:0;padding:8px}
.tray .chips:empty{display:none}
.tray .chip.active{box-shadow:0 0 10px 1px rgba(var(--gold-rgb),.42)}

.searchrow{padding-top:10px;position:relative}
/* دکمه‌ی پاک کردن خودمان (دکمه‌ی پیش‌فرض مرورگر روی گوشی خیلی ریز است) */
.search::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.sx{position:absolute;inset-inline-end:6px;bottom:6px;width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:rgba(var(--gold-rgb),.16);color:var(--gold-l);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sx::before{content:"";position:absolute;inset:-6px}   /* ناحیه‌ی لمس ۴۴px */
.sx:active{background:rgba(var(--gold-rgb),.3)}
.search:placeholder-shown+.sx{display:none}
.search{width:100%;font:inherit;font-size:.95rem;color:var(--text);height:44px;background:var(--field);border:1px solid var(--line);
  border-radius:999px;padding:0 18px;padding-inline-end:46px;outline:none;-webkit-appearance:none;appearance:none}
.search:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.2)}
.search::placeholder{color:var(--muted)}

/* «قیمت‌ها به هزار تومان»: کپسول تیره، بالاتر از محو نوار */
.unit{position:relative;z-index:21;display:table;margin:12px auto -8px;padding:5px 18px;border-radius:999px;text-align:center;
  font-size:.82rem;font-weight:700;color:var(--gold-l);background:rgba(0,0,0,.78);box-shadow:inset 0 0 0 1px var(--edge-soft),0 6px 16px rgba(0,0,0,.4)}

/* پیام‌ها: نوار ثابت بالای منو */
.notes{position:relative;z-index:21;display:grid;gap:8px;margin:4px 0 0;pointer-events:none}   /* فقط خود کادرها لمس می‌گیرند (app.js وقتی زیر نوار می‌روند آن را هم برمی‌دارد) */
.bar-note{pointer-events:auto}
.bar-note{white-space:pre-line;margin:0;padding:10px 14px;border-radius:14px;font-size:.88rem;line-height:1.9;text-align:center;
  background:rgba(var(--gold-rgb),.12);border:1px solid rgba(var(--gold-rgb),.45);color:var(--gold-l);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.bar-note.alert{background:rgba(214,96,77,.16);border-color:rgba(224,105,90,.6);color:#ffb3a6}

/* ================= دسته‌ها و آیتم‌ها: منوی چاپی کلاسیک ================= */
main{padding:0 0 8px}
.cat{padding-top:22px}
.frame{position:relative;overflow:hidden;border-radius:20px;padding:16px 16px 8px;background:linear-gradient(160deg,var(--card-1),var(--card-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(var(--gold-rgb),.4),0 12px 28px rgba(0,0,0,.38)}
.frame>*{position:relative}
/* نوار الگوی بالای قاب که به پایین محو می‌شود */
.frame::before{content:"";position:absolute;left:2px;right:2px;top:2px;height:56px;border-radius:18px 18px 0 0;pointer-events:none;   /* ۲px داخل‌تر از لبه تا خط دور قاب روی طرح بماند */
  background:url("img/pattern.webp") repeat top center/300px 300px;opacity:.9;   /* کاشی شفاف آماده (نه SVG سنگین با blend-mode که موقع اسکرول گوشی را کند می‌کرد) */
  -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 40%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 40%,transparent 100%)}
/* تابش دور قاب مقصد بعد از رسیدن اسکرول */
.frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 2px rgba(var(--gold-l-rgb),.95)}
.frame.glow::after{animation:frameGlow 1.4s cubic-bezier(.4,0,.2,1) forwards}
@keyframes frameGlow{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* عنوان دسته: سایه‌ی محوِ هم‌رنگ کارت پشت متن (تا الگو پشتش کمتر دیده شود) و خطی که از سمت عنوان محو می‌شود */
.cat h2{position:relative;font-size:1.2rem;font-weight:800;color:var(--head);padding-bottom:14px;margin-bottom:8px}
.cat h2::after{content:"";position:absolute;bottom:0;inset-inline:0;height:2px;border-radius:2px;background:linear-gradient(270deg,rgba(var(--gold-rgb),.75),rgba(var(--gold-rgb),.28) 45%,rgba(var(--gold-rgb),0))}
/* هاله‌ی پشت عنوان: نوار نرم هم‌رنگ کارت. سمت لبه‌ی کارت فقط تا همان ۱۶px حاشیه محو می‌شود (دقیقاً به لبه می‌رسد، بریده نمی‌شود)،
   سمت داخل کارت محو بلند؛ بالا و پایین هم با mask نرم. (بیضی در لبه‌ی کارت بریده می‌شد و سمت راست ناجور بود) */
.h2t{position:relative;display:inline-block;isolation:isolate;text-shadow:0 1px 8px rgba(31,31,31,.9)}
.h2t::before{content:"";position:absolute;z-index:-1;top:-20px;bottom:-18px;inset-inline-start:-16px;inset-inline-end:-64px;background:linear-gradient(to left,transparent 0,var(--card-1) 16px,var(--card-1) calc(100% - 64px),color-mix(in srgb,var(--card-1) 55%,transparent) calc(100% - 30px),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 38%,#000 62%,transparent 100%)}
html[dir="ltr"] .h2t::before{background:linear-gradient(to right,transparent 0,var(--card-1) 16px,var(--card-1) calc(100% - 64px),color-mix(in srgb,var(--card-1) 55%,transparent) calc(100% - 30px),transparent 100%)}
.cat-note{font-size:.76rem;line-height:1.8;color:var(--muted);padding:8px 0 4px}
/* لیست «پیشنهاد سرآشپز/باریستا» اول هر منو: قاب طلایی‌تر با ستاره کنار عنوان */
.cat.featured .frame{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1.5px rgba(var(--gold-l-rgb),.7),0 0 22px rgba(var(--gold-rgb),.18),0 12px 28px rgba(0,0,0,.38)}
/* عنوان پیشنهاد: دو ستاره‌ی طلایی دو طرف که هم‌زمان با درخشش می‌تپند */
.fst{display:inline-block;width:17px;height:17px;margin-inline:8px;vertical-align:middle;position:relative;top:-2px;animation:fstPulse 2.2s ease-in-out infinite}
/* شکل ستاره روی لایه‌ی داخلی (ماسک)، تا درخشش (filter) روی خود .fst بریده نشود */
.fst::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--gold-l),var(--gold));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.75 5.9 6.45.75-4.78 4.42 1.27 6.38L12 16.9l-5.69 3.15 1.27-6.38L2.8 9.25l6.45-.75z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.75 5.9 6.45.75-4.78 4.42 1.27 6.38L12 16.9l-5.69 3.15 1.27-6.38L2.8 9.25l6.45-.75z'/%3E%3C/svg%3E") center/contain no-repeat;}
.fst:first-child{margin-inline-start:0}
@keyframes fstPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 1px rgba(var(--gold-rgb),.3))}50%{transform:scale(1.15);filter:drop-shadow(0 0 6px rgba(var(--gold-rgb),.95))}}
@media (prefers-reduced-motion:reduce){.fst{animation:none}}
/* لوگوی کم‌رنگ وسط قاب «پیشنهاد باریستا/سرآشپز» (لوگوی سفید با mask به رنگ تم) */
.cat.featured .items::before{content:"";position:absolute;left:50%;top:50%;width:min(48%,160px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:var(--gold);opacity:.04;-webkit-mask:url("img/logo.png") center/contain no-repeat;mask:url("img/logo.png") center/contain no-repeat}

.item{padding:12px 0}
/* خط جداکننده‌ی آیتم‌ها که دو سرش محو می‌شود؛ در جستجو اولین آیتم باقی‌مانده خط ندارد */
.item+.item{background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 22%,rgba(255,255,255,.2) 78%,rgba(255,255,255,0) 100%) top/100% 1px no-repeat}
.item+.item.first-vis{background:none}
.item.tap{cursor:pointer;position:relative;isolation:isolate}
/* هاور/لمس آیتمِ بازشونده: هاله‌ی نرم کمی بیرون‌تر از محتوا (پشت متن، روی خط جداکننده) */
.item.tap::after{content:"";position:absolute;z-index:-1;inset:3px -10px;border-radius:16px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(var(--gold-rgb),.03),rgba(var(--gold-rgb),.09));box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.22);transition:opacity .2s}
.item.tap:active::after{opacity:1;transition:none}
.l1{display:flex;align-items:baseline;gap:8px}
.name{font-size:1.02rem;font-weight:600;line-height:1.6;flex:0 1 auto;min-width:0;color:#fff}
.dots{flex:1;min-width:14px;border-bottom:2.5px dotted var(--edge-soft);transform:translateY(-4px)}
.price{white-space:nowrap;font-size:.98rem;font-weight:700;color:var(--price)}
.desc{font-size:.76rem;font-weight:500;line-height:1.75;color:var(--muted);opacity:.5;margin-top:2px}
/* قیمت دوتایی: جدول دو ستونه (برچسب | عدد) که نام و نقطه‌چین وسط آن می‌نشینند */
.l1.has-multi{align-items:center}
.l1.has-multi .dots{transform:none}
.price.multi{display:grid;grid-template-columns:auto auto;column-gap:15px;row-gap:2px;align-items:center;align-self:center;line-height:1.5}
.price.multi .pv{display:contents}
.pv i{font-style:normal;font-size:.68rem;font-weight:600;color:var(--muted);text-align:right}
.price.multi .pv>span{display:block;text-align:left}

/* برچسب‌ها، عکس، کالری */
/* برچسب‌ها همیشه یک خط زیر نام (یکدست)؛ نقطه‌چین هم‌تراز خود نام می‌ماند نه وسط نام و برچسب */
.name .tg{display:flex;flex-wrap:wrap;width:max-content;max-width:100%;gap:4px;margin-top:3px}
.l1.has-multi:has(.name .tg) .dots{transform:translateY(calc(var(--tgh,20px) / -2 + 4px))}   /* +4px: وسط چشمی حروف فارسی کمی پایین‌تر از وسط جعبه‌ی خط است */   /* ‎--tgh از app.js: ارتفاع ردیف برچسب‌ها */
.bdg{display:inline-flex;align-items:center;gap:3px;font-size:.62rem;font-weight:700;line-height:1.6;padding:0 8px 0 7px;border-radius:999px;white-space:nowrap}
.bdg svg{flex:none;margin-top:-1px}
.bdg-new{background:rgba(var(--gold-rgb),.16);color:var(--gold-l)}
.bdg-rec{background:rgba(120,170,230,.2);color:#b6d3ff}
/* داخل خود قاب «پیشنهاد باریستا/سرآشپز» برچسب «پیشنهادی» تکراری است؛ اگر برچسب دیگری نماند جای خالی‌اش هم حذف شود */
.cat.featured .bdg-rec{display:none}
.cat.featured .tg:not(:has(.bdg:not(.bdg-rec))){display:none}
.bdg-best{color:#2a1d05;background:linear-gradient(180deg,#f7dc8a,#d4a63c);box-shadow:0 0 8px rgba(230,186,80,.35)}
.bdg-veg{background:rgba(127,191,134,.2);color:#a9dbb0}
.bdg-hot{background:rgba(238,110,70,.24);color:#ffab8a}
/* عکس از بالای آیتم (هم‌خط با نام) شروع می‌شود؛ متنِ کوتاه‌تر از عکس (۱–۲ سطر) کنارش وسط‌چین است */
.item.has-img{display:flex;gap:12px;align-items:flex-start}
.item .ibody{min-width:0;flex:1}
.item.has-img .ibody{align-self:center}
.item .thumb{width:54px;height:54px;border-radius:12px;object-fit:cover;flex:none;order:2}   /* order:2 → عکس سمت چپ (بعد از قیمت) */
/* عکس دوربُری‌شده (پس‌زمینه‌ی شفاف): کمی بزرگ‌تر، کامل (بدون برش) */
.item.cut .thumb{width:60px;height:60px;border-radius:0;object-fit:contain}
.item .meta{display:flex;align-items:center;gap:8px;margin:4px 0 0;font-size:.74rem;color:var(--muted)}

/* طعم‌ها داخل قاب قلیان */
.flavors .fl-title{font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:8px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:.85rem;font-weight:600;padding:3px 13px;border-radius:999px;color:var(--gold-l);background:var(--chip);box-shadow:inset 0 0 0 1px var(--line)}
.tag.out{color:var(--muted);opacity:.55;text-decoration:line-through;text-decoration-color:rgba(224,105,90,.85);text-decoration-thickness:1.5px}   /* طعم تمام‌شده */

/* آیتم تمام‌شده: قیمت خط می‌خورد و قرص «تمام شد» وسط نقطه‌چین می‌نشیند (نقطه‌چین پشتش قطع می‌شود) */
.item.out .price:not(.multi),.pv.out>span{text-decoration:line-through;text-decoration-color:#e0695a;text-decoration-thickness:2px;color:var(--muted)!important}
.pv.out>i{color:#ff9d8c}
/* فقط یک سایز تمام شده: قرص «تمام شد» جلوی برچسب همان سایز، داخل ستون برچسب‌ها (نه شناور) تا نقطه‌چین همیشه قبل از آن تمام شود؛
   برچسب‌های این آیتم به سمت عددها چسبیده‌اند تا با قرص هم‌تراز بمانند */
.item:not(.out) .price.multi:has(.pv.out) .pv i{text-align:end}
.item:not(.out) .pv.out>i::before{content:"تمام شد";display:inline-block;margin-inline-end:8px;white-space:nowrap;vertical-align:middle;
  font-size:.58rem;font-weight:800;line-height:1.6;padding:0 6px;border-radius:999px;color:#ffb3a6;background:rgba(214,96,77,.2)}
html.en .item:not(.out) .pv.out>i::before{content:"Sold out"}
.dots .so{display:none}
.item.out .dots{display:flex;align-items:center;gap:8px;border-bottom:0;min-width:max-content}   /* جعبه هیچ‌وقت از قرص باریک‌تر نمی‌شود: نام بلند به‌جایش می‌شکند */
.item.out .dots::before,.item.out .dots::after{content:"";flex:1;min-width:0;border-bottom:2.5px dotted var(--edge-soft)}
.item.out .dots .so{display:block;flex:none;white-space:nowrap;font-style:normal;font-size:.62rem;font-weight:800;line-height:1.6;padding:0 7px;border-radius:999px;
  background:rgba(214,96,77,.2);color:#ffb3a6}
.item.out .dots .so::before{content:"تمام شد"}
html.en .item.out .dots .so::before{content:"Sold out"}
.item.out .name,.item.out .desc{-webkit-filter:grayscale(1);filter:grayscale(1);opacity:.4}
.item.out .l1:not(.has-multi){align-items:center}
.item.out .l1:not(.has-multi) .dots{transform:none}

.empty{text-align:center;padding:40px 0;opacity:.8}

/* ================= منوی دارای ساعت سرو، بعد از پایان ساعت ================= */
.ended-note{display:none}
.cat.ended .ended-note{display:block;margin:10px 0 4px;padding:8px 12px;border-radius:12px;font-size:.8rem;font-weight:600;line-height:1.7;
  color:#f0c9c0;background:rgba(214,96,77,.14);box-shadow:inset 0 0 0 1px rgba(214,96,77,.4);animation:endedBlink 1.4s ease-in-out infinite}
@keyframes endedBlink{0%,100%{opacity:1}50%{opacity:.25}}
.cat.ended .items{opacity:.15;-webkit-filter:grayscale(.8);filter:grayscale(.8)}
.cat.ended .h2t,.cat.ended h2 .fst{opacity:.5}
/* قرص «پایان سرو» / «تمام شد» روی ردیف عنوان قاب (پررنگ، کم‌رنگ نمی‌شود) */
.cat.ended h2::before{content:"پایان سرو";position:absolute;inset-inline-end:4px;top:calc(50% - 7px);white-space:nowrap;
  font-size:.7rem;font-weight:800;line-height:1.5;letter-spacing:0;padding:1px 6px;color:#ff9d8c;background:#1a0d0b;border:1.5px solid currentColor;border-radius:2px;
  transform:translateY(-50%) rotate(-8deg)}   /* هم‌سبک مهر کج روی تب منو */
html[dir="ltr"] .cat.ended h2::before{transform:translateY(-50%) rotate(8deg)}
.cat.ended.sold h2::before{content:"تمام شد"}
html.en .cat.ended h2::before{content:"Serving ended"}
html.en .cat.ended.sold h2::before{content:"Sold out"}
.cat.ended h2::after{background:linear-gradient(270deg,rgba(224,105,90,.7),rgba(224,105,90,0))}
.cat.ended .frame{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(224,105,90,.6),0 16px 34px rgba(0,0,0,.65)}
.cat.ended .frame::after{box-shadow:inset 0 0 0 2px rgba(224,105,90,.95),inset 0 0 14px rgba(224,105,90,.55)}
/* تب منوی تمام‌شده: کم‌رنگ؛ هنگام انتخاب قرمز. مهر «پایان سرو» کج روی گوشه‌ی دکمه */
.tab.ended{opacity:.5;color:var(--muted)}
.tab.ended.active{opacity:1;color:#fff;border-color:transparent;background:linear-gradient(180deg,#e0695a,#b3392b) border-box;box-shadow:0 0 12px 1px rgba(214,96,77,.5)}
.tab .badge{position:absolute;z-index:2;top:-9px;left:-6px;padding:0 4px;white-space:nowrap;font-size:.56rem;font-weight:800;line-height:1.5;letter-spacing:0;
  color:#ff9d8c;background:#1a0d0b;border:1.5px solid currentColor;border-radius:2px;transform:rotate(-12deg)}
.tab .badge[hidden]{display:none}
.tab.ended.active .badge{background:#8a2a1c;color:#fff;border-color:#fff}

/* ================= فوتر تماس ================= */
footer.contact{padding:8px 0 90px}
.contact h2.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* عنوان فقط برای صفحه‌خوان */
/* خط جداکننده‌ی پایین منو: دو خط محوشونده و لوگوی کافه وسطشان */
.fsep{display:flex;align-items:center;gap:12px;margin:30px 4px 22px}
.fsep::before,.fsep::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--gold-rgb),0),rgba(var(--gold-rgb),.75))}
.fsep::after{background:linear-gradient(270deg,rgba(var(--gold-rgb),0),rgba(var(--gold-rgb),.75))}
.fsep img{flex:none;width:auto;height:34px;opacity:.9}
/* تماس: ردیف‌های نقطه‌چین هم‌سبک ردیف‌های منو (مسیریابی داخل خود نقشه است) */
.ccard{margin-bottom:10px;padding:4px 14px;border-radius:20px;background:linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.16)),rgba(255,255,255,.04);-webkit-backdrop-filter:blur(26px) saturate(1.2);backdrop-filter:blur(26px) saturate(1.2);box-shadow:inset 0 0 0 1px var(--edge-soft)}
.dr{display:flex;align-items:center;gap:8px;padding:12px 0;color:var(--text);text-decoration:none}
.dr+.dr{border-top:1px solid rgba(var(--gold-rgb),.14)}
.dk{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:700;white-space:nowrap}
.dk svg{color:var(--gold);flex:none;width:22px;height:22px}
.dd{flex:1;min-width:12px;border-bottom:2px dotted rgba(var(--gold-rgb),.4);transform:translateY(5px)}
/* فونت فارسی چشمی بالاتر از وسط جعبه‌اش می‌نشیند: کمی پایین تا با آیکن و نقطه‌چین هم‌تراز شود */
.dl{position:relative;top:3px}
html.en .dl{top:1px}
.dv{font-size:.9rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr.ph .dv{font-weight:800;font-size:1.1rem;letter-spacing:.04em;color:var(--gold-l)}
.dr:active{opacity:.7}
@media (hover:hover){.cb:hover i{background:rgba(var(--gold-rgb),.2)}.cb.p:hover i{filter:brightness(1.06)}}
/* کارت نقشه: نقشه (هم‌رنگ تم) و آدرس */
.mapcard{position:relative;margin-bottom:10px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.04)}
/* کادر دور کارت روی همه‌ی محتوا (نقشه و آدرس) کشیده می‌شود تا پس‌زمینه‌ی بلور آدرس روی لبه را نپوشاند */
.mapcard::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--edge-soft);pointer-events:none;z-index:3}
.mapbox{position:relative;isolation:isolate;height:210px;background:#1a1a1a;border-bottom:1px solid var(--edge-soft)}
.mapbox iframe{display:block;width:100%;height:100%;border:0}
/* نقشه هم‌رنگ تم: html[data-map] را look.js تعیین می‌کند (خودکار از روشنایی تم، یا انتخاب پنل).
   تیره: رنگ‌ها برعکس و رنگ‌مایه برگردانده می‌شود تا سنجاق و آیکن‌ها هم‌رنگ بمانند (بلد حالت شب ندارد). روی هر دو: ته‌رنگ ملایم رنگ اصلی تم */
html[data-map="dark"] .mapbox iframe{filter:invert(.9) hue-rotate(180deg) saturate(.85) brightness(1.02) contrast(.92)}
html[data-map="light"] .mapbox iframe{filter:saturate(.9) brightness(.97)}
.maploading{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:#1a1a1a;transition:opacity .3s}
.spin{position:relative;width:28px;height:28px}
.spin i{position:absolute;left:50%;top:0;width:2.4px;height:7.5px;margin-left:-1.2px;border-radius:2px;background:var(--gold-l);transform-origin:50% 14px;opacity:.15;animation:mapspin 1s linear infinite}
.spin i:nth-child(1){transform:rotate(0deg);animation-delay:-1.0000s}
.spin i:nth-child(2){transform:rotate(30deg);animation-delay:-0.9167s}
.spin i:nth-child(3){transform:rotate(60deg);animation-delay:-0.8333s}
.spin i:nth-child(4){transform:rotate(90deg);animation-delay:-0.7500s}
.spin i:nth-child(5){transform:rotate(120deg);animation-delay:-0.6667s}
.spin i:nth-child(6){transform:rotate(150deg);animation-delay:-0.5833s}
.spin i:nth-child(7){transform:rotate(180deg);animation-delay:-0.5000s}
.spin i:nth-child(8){transform:rotate(210deg);animation-delay:-0.4167s}
.spin i:nth-child(9){transform:rotate(240deg);animation-delay:-0.3333s}
.spin i:nth-child(10){transform:rotate(270deg);animation-delay:-0.2500s}
.spin i:nth-child(11){transform:rotate(300deg);animation-delay:-0.1667s}
.spin i:nth-child(12){transform:rotate(330deg);animation-delay:-0.0833s}
@keyframes mapspin{from{opacity:1}to{opacity:.15}}
.mapbox.loaded .maploading{opacity:0;pointer-events:none}
/* لودینگ ورود (فقط آدرس اصلی، نه #menu): همان چرخنده‌ی نقشه تا عکس پس‌زمینه و فونت‌ها برسند (app.js، حداقل ۱٫۵ ثانیه)؛
   انیمیشن‌های صفحه‌ی اول تا تمام شدنش نگه داشته می‌شوند */
.boot{position:fixed;inset:0;z-index:200001;display:none;place-items:center;background:var(--bg);transition:opacity .45s ease}
html.booting .boot,.boot.out{display:grid}
.boot.out{opacity:0;pointer-events:none}
.boot .spin{transform:scale(1.3)}
html.booting .intro,html.booting .intro *{animation-play-state:paused!important}
.mapbox::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--gold);mix-blend-mode:color;opacity:.22}
html[data-map="light"] .mapbox::after{opacity:.12}
.maprow{display:flex;align-items:center;gap:10px;padding:12px;background:linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.16)),rgba(255,255,255,.04);-webkit-backdrop-filter:blur(26px) saturate(1.2);backdrop-filter:blur(26px) saturate(1.2)}
.addr{flex:1;min-width:0;display:flex;align-items:flex-start;gap:7px;margin:0;font-size:.86rem;line-height:1.9;color:var(--text)}
.addr svg{flex:none;width:22px;height:22px;margin-top:3px;color:var(--gold)}   /* هم‌اندازه‌ی آیکن‌های ردیف تماس */
.copy{text-align:center;margin-top:26px;font-size:.78rem;color:var(--muted);opacity:.8}
footer.contact:has(+ .devcredit){padding-bottom:6px}
.devcredit{text-align:center;margin:0;padding-bottom:90px;font-size:.7rem;color:var(--muted);opacity:.55}
/* تمی که المان آخر صفحه (.decor-end: تپه، آدم‌برفی، سبیل، تنگ ماهی) دارد: فاصله‌ی فوتر تا آن کم می‌شود؛ تم‌های دیگر برای تزئینات ثابت پایین، جای خالی می‌خواهند */
html:has(.decor-end) footer.contact{padding-bottom:40px}
html:has(.decor-end) footer.contact:has(+ .devcredit){padding-bottom:6px}
html:has(.decor-end) .devcredit{padding-bottom:24px}
.devcredit a{color:inherit;text-decoration:none}

/* ================= برگه‌ی جزئیات آیتم ================= */
dialog:not([open]){display:none}
.sheet{margin:auto auto 0;width:min(var(--maxw),100%);max-width:100%;max-height:86vh;overflow-y:auto;border:0;border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:24px 22px calc(env(safe-area-inset-bottom) + 28px);color:var(--text);text-align:justify;
  background:linear-gradient(160deg,var(--card-1),var(--card-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 -14px 30px rgba(0,0,0,.5)}
.sheet::backdrop{background:rgba(0,0,0,.6)}
.sheet:focus,.sheet .close:focus-visible{outline:none}   /* فوکوس اول روی خود برگه است و دکمه‌ی «بستن» هیچ‌وقت حلقه‌ی فوکوس ندارد */
.sheet h2{font-size:1.1rem;margin-bottom:10px;text-align:right;color:var(--head)}
.sheet p{font-size:.92rem;font-weight:500}
.close{margin-top:18px;width:100%;font:inherit;font-weight:700;color:#1b1b1b;background:linear-gradient(180deg,var(--gold-l),var(--gold));
  border:0;border-radius:999px;height:44px;cursor:pointer}
/* برگه‌ی جزئیات آیتم */
.idlg-img{display:block;width:auto;max-width:100%;height:auto;max-height:min(50vh,440px);margin:0 auto 12px;object-fit:contain;border-radius:14px}
.idlg h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.idlg .idlg-desc{margin:6px 0 0}
.ip{margin:12px 0 0}
.ip-row{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid rgba(255,255,255,.08)}
.ip-row b{color:var(--price)}
/* تمام‌شده: مثل منو، عدد خط‌خورده و قرص «تمام شد» کنارش */
.ip-row.out span{color:#ff9d8c}
.ip-row.out b{display:flex;align-items:center;gap:8px}
.ip-row.out s{color:var(--muted);text-decoration-color:#e0695a;text-decoration-thickness:2px}
.ip-row .so{font-style:normal;font-size:.68rem;font-weight:800;line-height:1.6;padding:0 7px;border-radius:999px;background:rgba(214,96,77,.2);color:#ffb3a6}
.idlg-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:.85rem}
.idlg-meta .cal{color:var(--muted)}

/* ================= دکمه‌ی بازگشت به بالا با حلقه‌ی پیشرفت ================= */
.to-top{position:fixed;z-index:60;bottom:calc(env(safe-area-inset-bottom) + 22px);left:max(16px,calc(50% - var(--maxw) / 2 + 16px));width:52px;height:52px;padding:0;border:0;border-radius:50%;
  cursor:pointer;color:var(--price);background:rgba(var(--bar),.94);box-shadow:0 8px 24px rgba(0,0,0,.42);
  opacity:0;transform:translateY(24px) scale(.8);pointer-events:none;transition:opacity .25s,transform .3s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:active{transform:scale(.92)}
.to-top svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.to-top>svg circle{fill:none;stroke-width:3}
.to-top .trk{stroke:rgba(var(--gold-rgb),.22)}
.to-top .ring{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset .12s linear}
.to-top .arw{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transform-origin:24px 24px}

/* ================= پیام موقت (toast): متن | دکمه‌ی بستن با حلقه‌ی شمارش‌معکوس؛ رنگ‌ها از تم فعال ================= */
.toasts{position:fixed;z-index:60;left:50%;top:calc(env(safe-area-inset-top) + 14px);transform:translateX(-50%);width:min(448px,calc(100% - 28px));
  display:flex;flex-direction:column;gap:10px;pointer-events:none}   /* flex (نه grid) تا حاشیه‌ی منفی هنگام بستن، فاصله را هم جمع کند */
.toast{--tc:var(--gold);--tc-l:var(--gold-l);position:relative;width:100%;
  display:flex;align-items:center;gap:12px;padding:12px;padding-inline:18px 12px;border-radius:20px;overflow:hidden;color:var(--text);cursor:pointer;
  background:linear-gradient(160deg,rgb(var(--bar)),rgb(var(--bar)));
  background:linear-gradient(160deg,color-mix(in srgb,rgb(var(--bar)) 84%,#fff),color-mix(in srgb,rgb(var(--bar)) 92%,#000));
  box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 14px rgba(var(--gold-rgb),.22),inset 0 0 0 2px rgba(var(--gold-rgb),.85),inset 0 2px 0 rgba(255,255,255,.12);
  opacity:0;transform:translateY(-24px);pointer-events:none;transition:opacity .4s,transform .45s cubic-bezier(.2,.8,.2,1)}
.toast.show{opacity:1;transform:none;pointer-events:auto}
.toast.alert{--tc:#ff9d8c;--tc-l:#ffb3a6;box-shadow:0 12px 34px rgba(0,0,0,.6),0 0 14px rgba(224,105,90,.25),inset 0 0 0 2px rgba(224,105,90,.9)}
.toast p{white-space:pre-line;flex:1;min-width:0;margin:0;font-size:.86rem;font-weight:500;line-height:1.75;text-align:start;unicode-bidi:plaintext}
.toast-x{position:relative;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;color:var(--tc-l);cursor:pointer;
  background:rgba(var(--gold-rgb),.16);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.25)}
.toast-x:hover{background:rgba(var(--gold-rgb),.3)}
.toast-x>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.toast-x circle{fill:none;stroke-width:2.4}
.toast-x .tr-bg{stroke:rgba(255,255,255,.12)}
.toast-x .tr-fg{stroke:var(--tc);stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:0;animation:toastRing linear forwards;animation-play-state:paused}
.toast.show .tr-fg{animation-play-state:running}
.toast-x b{position:relative;font-size:1.15rem;font-weight:500;line-height:1}
@keyframes toastRing{to{stroke-dashoffset:94.25}}

/* ================= پیام تمام‌صفحه (popup): کارت وسط صفحه روی پس‌زمینه‌ی بلور ================= */
html.pop-open{overflow:hidden}
.popmsg{--tc:var(--gold);position:fixed;inset:0;z-index:70;display:grid;place-items:center;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top) + 24px) 18px calc(env(safe-area-inset-bottom) + 24px);
  background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  opacity:0;transition:opacity .35s}
.popmsg.show{opacity:1}
.popmsg.alert{--tc:#ff9d8c}
/* کارت = همان قاب منو (.frame: نوار الگوی بالا و زمینه‌ی تم) با کادر طلایی «پیشنهاد سرآشپز»؛ لوگو وسط نوار الگو */
.popmsg .pop-card.frame{width:min(420px,100%);max-height:100%;overflow:auto;display:grid;gap:18px;padding:0 22px 22px;border-radius:22px;text-align:center;color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1.5px rgba(var(--gold-l-rgb),.7),0 0 22px rgba(var(--gold-rgb),.18),0 24px 60px rgba(0,0,0,.6);
  transform:translateY(18px) scale(.97);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.popmsg.show .pop-card{transform:none}
.popmsg.alert .pop-card.frame{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1.5px rgba(224,105,90,.75),0 0 22px rgba(224,105,90,.2),0 24px 60px rgba(0,0,0,.6)}
.pop-head{height:58px;display:grid;place-items:center}
.pop-head::before{content:"";position:absolute;left:50%;top:50%;width:120px;height:58px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--card-1) 45%,transparent)}   /* پشت لوگو روی الگو */
.pop-head img{position:relative;height:32px;width:auto;opacity:.95}
.pop-head::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(var(--gold-rgb),0),rgba(var(--gold-rgb),.75),rgba(var(--gold-rgb),0))}
.pop-card p{margin:0;white-space:pre-line;font-size:1rem;font-weight:500;line-height:1.95;unicode-bidi:plaintext}
.pop-ok{justify-self:center;min-width:140px;padding:10px 28px;border:0;border-radius:999px;font:inherit;font-size:.92rem;font-weight:700;color:#1b1b1b;background:var(--tc);cursor:pointer}
.pop-ok:hover{filter:brightness(1.08)}
/* با مدت نمایش: حلقه‌ی شمارش‌معکوس (مثل پیام موقت) دور دکمه‌ی «بستن» خالی می‌شود */
.pop-ring{position:absolute;left:-5px;top:-5px;pointer-events:none;overflow:visible}
.pop-ring path{fill:none;stroke-width:2.4}
.pop-ring .tr-bg{stroke:rgba(255,255,255,.14)}
/* دو نیمه از وسط بالا؛ ابتدای هر نیمه اول محو می‌شود (offset منفی) تا دو سر به وسط پایین برسند؛ نوک درخشان */
.pop-ring .tr-fg{stroke:var(--tc);stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:0;animation:popRing linear forwards;animation-play-state:paused;
  filter:drop-shadow(0 0 3px var(--tc)) drop-shadow(0 0 6px color-mix(in srgb,var(--tc) 70%,transparent))}
.popmsg.show .pop-ring .tr-fg{animation-play-state:running}
@keyframes popRing{to{stroke-dashoffset:-100}}
.pop-lbl{position:relative}

/* ================= English / چپ‌به‌راست ================= */
html[dir="ltr"] .tab .badge{left:auto;right:-6px;transform:rotate(12deg)}
html[dir="ltr"] .price.multi .pv>span{text-align:right}
html[dir="ltr"] .cat h2::after{background:linear-gradient(90deg,rgba(var(--gold-rgb),.75),rgba(var(--gold-rgb),.28) 45%,rgba(var(--gold-rgb),0))}
html[dir="ltr"] .cat.ended h2::after{background:linear-gradient(90deg,rgba(224,105,90,.7),rgba(224,105,90,0))}
html.en .item .name,html.en .desc{unicode-bidi:plaintext}
/* لاتینِ فونت دوران ریزتر و نازک‌تر از فارسی است: در نسخه‌ی انگلیسی همه‌ی متن‌ها کمی بزرگ‌تر و متن‌های کم‌رنگ پررنگ‌تر */
html.en{font-size:110%}
html.en .name,html.en .price,html.en .desc,html.en .cat-note,html.en .ended-note,html.en .unit,html.en .pv i,html.en .cal{font-weight:500}
html.en .cat-note,html.en .ended-note,html.en .unit{opacity:.85}
html.en .desc{opacity:.5}
html.en .price.multi{column-gap:8px}

/* ================= پالت‌های آزمایشی: html[data-theme] ================= */
html[data-theme="rose"]{--gold:#c98a76;--gold-l:#f0cdbd;--gold-rgb:201,138,118;--gold-l-rgb:240,205,189;--head:#f3d3c5;--price:#f8dccd}
html[data-theme="rose-dark"]{--gold:#b0705f;--gold-l:#d9a595;--gold-rgb:176,112,95;--gold-l-rgb:217,165,149;--head:#e3b7a8;--price:#edc6b8}
html[data-theme="gold"]{--gold:#d9a920;--gold-l:#f7d765;--gold-rgb:217,169,32;--gold-l-rgb:247,215,101;--head:#f8dd78;--price:#fbe595}

/* ================= تم‌های مناسبتی: html[data-occasion] =================
   هر تم: رنگ‌ها، زمینه‌ی کارت و حباب دسته‌ها، و گرادیان پس‌زمینه. سایه‌ها هم‌رنگ زمینه‌ی همان تم (--shc) */
html[data-occasion]{--shc:color-mix(in srgb,var(--bg) 60%,#000)}
/* زمستان/پاییز: شروع روشن صفحه‌ی اول (look.js → seasonIntro)؛ لایه‌ی رنگی زیر تزئینات، لوگو و نام سفید و بعد نرم به رنگ تم */
.season-glow{position:fixed;inset:0;bottom:auto;height:var(--fixh);z-index:-1;pointer-events:none;transition:opacity 2s ease}
.season-glow.out{opacity:0}
.intro h1 .fa{transition:color 2s ease}
html.season-intro .intro h1 .fa{color:#fff}
html.season-intro .iact{color:#fff}
html[data-occasion] .tab:not(.active){color:var(--gold-l)}
html[data-occasion] .dot.on{background:var(--gold-l);box-shadow:0 0 6px rgba(var(--gold-l-rgb),.7)}
html[data-occasion] .unit{background:color-mix(in srgb,color-mix(in srgb,var(--bg) 55%,#000) 88%,transparent);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.35),0 6px 16px color-mix(in srgb,var(--shc) 55%,transparent)}
html[data-occasion] .tray{box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.45),0 6px 18px color-mix(in srgb,var(--shc) 60%,transparent)}
html[data-occasion] .frame{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(var(--gold-rgb),.4),0 12px 28px color-mix(in srgb,var(--shc) 38%,transparent)}
html[data-occasion] .to-top{box-shadow:0 8px 24px color-mix(in srgb,var(--shc) 60%,transparent)}

html[data-occasion="nowruz"]{--bg:#0f2d20;--bar:14,43,30;--card-1:rgb(10,32,24);--card-2:rgb(5,14,11);--text:#eef7ea;--muted:#b5c9b1;
  --gold:#7fc28a;--gold-l:#c8ecc0;--gold-rgb:127,194,138;--gold-l-rgb:200,236,192;--head:#d3f0cb;--price:#e0f4d8}
html[data-occasion="nowruz"] .tray{--tray-bg:rgb(8,26,19)}
html[data-occasion="nowruz"] .frame{background:linear-gradient(160deg,rgba(10,32,24,.9),rgba(5,14,11,.93))}
html[data-occasion="nowruz"] body::before{background:linear-gradient(180deg,#0f2d2a,#123320)}

html[data-occasion="yalda"]{--bg:#0f2347;--bar:11,26,59;--card-1:rgb(10,20,42);--card-2:rgb(5,10,24);
  --gold:#e3ab52;--gold-l:#f7d68f;--gold-rgb:227,171,82;--gold-l-rgb:247,214,143;--head:#f6d89c;--price:#fbe4b4}
html[data-occasion="yalda"] .tray{--tray-bg:rgb(8,17,38)}
html[data-occasion="yalda"] .frame{background:linear-gradient(160deg,rgba(10,20,42,.9),rgba(5,10,24,.93))}
html[data-occasion="yalda"] body::before{background:radial-gradient(90% 20% at 50% 100%,rgba(224,110,100,.16),transparent 72%),linear-gradient(180deg,#0b1a3b,#0f2347 55%,#13264d)}

html[data-occasion="mothers"]{--bg:#311d21;--bar:46,27,34;--card-1:rgb(34,20,23);--card-2:rgb(15,9,10);--text:#fbeff2;--muted:#cdb6bc;
  --gold:#e8a0b0;--gold-l:#f6cfd8;--gold-rgb:232,160,176;--gold-l-rgb:246,207,216;--head:#f8d6de;--price:#fbe2e8}
html[data-occasion="mothers"] .tray{--tray-bg:rgb(27,16,18)}
html[data-occasion="mothers"] .frame{background:linear-gradient(160deg,rgba(34,20,23,.9),rgba(15,9,10,.93))}
html[data-occasion="mothers"] body::before{background:radial-gradient(ellipse 70% 30% at 15% 38%,rgba(246,207,216,.10),transparent 70%),radial-gradient(ellipse 60% 26% at 88% 52%,rgba(255,200,170,.09),transparent 70%),radial-gradient(ellipse 70% 28% at 25% 88%,rgba(232,160,176,.10),transparent 70%),linear-gradient(180deg,#2e1b22,#35201f)}

html[data-occasion="fathers"]{--bg:#111d30;--bar:10,24,48;--card-1:rgb(12,20,34);--card-2:rgb(5,9,14);--text:#eaf1fb;--muted:#b3c0d2;
  --gold:#86aedf;--gold-l:#c4dbf6;--gold-rgb:134,174,223;--gold-l-rgb:196,219,246;--head:#cfe1f7;--price:#dbe8f9}
html[data-occasion="fathers"] .tray{--tray-bg:rgb(9,16,26)}
html[data-occasion="fathers"] .frame{background:linear-gradient(160deg,rgba(12,20,34,.9),rgba(5,9,14,.93))}
html[data-occasion="fathers"] body::before{background:linear-gradient(180deg,#0a1830,#1b2530)}
html[data-occasion="fathers"] .dc-sway{animation-duration:15s!important}
html[data-occasion="fathers"] .dc-flutter{animation-duration:28s!important}

html[data-occasion="valentine"]{--bg:#2b080c;--bar:52,10,16;--card-1:rgb(38,8,12);--card-2:rgb(17,3,5);--text:#fdf0f0;--muted:#d6b4b4;
  --gold:#e8343f;--gold-l:#ff9c9c;--gold-rgb:232,52,63;--gold-l-rgb:255,156,156;--head:#ffc4c4;--price:#ffd3d3}   /* ولنتاین: قرمزِ گرم (نه صورتی) */
html[data-occasion="valentine"] .tray{--tray-bg:rgb(31,6,9)}
html[data-occasion="valentine"] .frame{background:linear-gradient(160deg,rgba(38,8,12,.9),rgba(17,3,5,.93))}
html[data-occasion="valentine"] body::before{background:radial-gradient(circle 210px at 12% 34%,rgba(255,70,80,.16),transparent 70%),radial-gradient(circle 260px at 90% 40%,rgba(255,110,110,.12),transparent 70%),radial-gradient(circle 190px at 20% 82%,rgba(220,40,60,.15),transparent 70%),radial-gradient(circle 150px at 85% 90%,rgba(255,150,150,.10),transparent 70%),linear-gradient(180deg,#3a0a10,#24060a)}

html[data-occasion="christmas"]{--bg:#0c2223;--bar:10,29,41;--card-1:rgb(8,24,24);--card-2:rgb(4,10,10);
  --gold:#d9a94a;--gold-l:#f2d68a;--gold-rgb:217,169,74;--gold-l-rgb:242,214,138;--head:#f3dc96;--price:#f8e7b2}
html[data-occasion="christmas"] .tray{--tray-bg:rgb(7,19,19)}
html[data-occasion="christmas"] .frame{background:linear-gradient(160deg,rgba(8,24,24,.9),rgba(4,10,10,.93))}
html[data-occasion="christmas"] body::before{background:linear-gradient(180deg,#0a1d29,#0e2a1b)}

html[data-occasion="halloween"]{--bg:#190d15;--bar:17,10,29;--card-1:rgb(18,9,15);--card-2:rgb(8,4,6);
  --gold:#f08a24;--gold-l:#f7c070;--gold-rgb:240,138,36;--gold-l-rgb:247,192,112;--head:#f9cf8e;--price:#fbdcaa}
html[data-occasion="halloween"] .tray{--tray-bg:rgb(14,7,12)}
html[data-occasion="halloween"] .frame{background:linear-gradient(160deg,rgba(18,9,15,.9),rgba(8,4,6,.93))}
html[data-occasion="halloween"] body::before{background:linear-gradient(180deg,#110a1d,#261209)}

html[data-occasion="winter"]{--bg:#0d1b2c;--bar:12,28,48;--card-1:rgb(10,22,36);--card-2:rgb(5,11,19);--text:#ecf5fd;--muted:#b4c4d4;
  --gold:#8ec5f0;--gold-l:#d3eafb;--gold-rgb:142,197,240;--gold-l-rgb:211,234,251;--head:#d9edfc;--price:#e6f3ff}
html[data-occasion="winter"] .tray{--tray-bg:rgb(8,17,28)}
html[data-occasion="winter"] .frame{background:linear-gradient(160deg,rgba(10,22,36,.9),rgba(5,11,19,.93))}
html[data-occasion="winter"] body::before{background:linear-gradient(180deg,#0b1a2e,#16283b)}

html[data-occasion="autumn"]{--bg:#1c120b;--bar:34,19,10;--card-1:rgb(26,16,10);--card-2:rgb(12,7,4);--text:#f8ece0;--muted:#cbb8a4;
  --gold:#e58a2c;--gold-l:#f5c47c;--gold-rgb:229,138,44;--gold-l-rgb:245,196,124;--head:#f6cf94;--price:#fadcaa}
html[data-occasion="autumn"] .tray{--tray-bg:rgb(20,12,7)}
html[data-occasion="autumn"] .frame{background:linear-gradient(160deg,rgba(26,16,10,.9),rgba(12,7,4,.93))}
html[data-occasion="autumn"] body::before{background:linear-gradient(180deg,#1a0f08,#2b170b)}

/* DECOR-START */
/* تزئینات مناسبتی (look.js → setOccasion): لایه‌ی ثابت پشت محتوا، فقط در حاشیه‌ها */
.decor{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.decor:not(.ground){bottom:auto;height:var(--fixh)}
/* لایه‌ی پایین (تپه، درخت، کدو، مه، انار و هندوانه) هم به همان ارتفاع ثابت بسته است، نه به لبه‌ی پایین صفحه که با نوار آدرس بالا/پایین می‌رود */
.decor.ground{--gh:320px;top:calc(var(--fixh) - var(--gh));bottom:auto;height:var(--gh)}
html[data-occasion="christmas"] .decor.ground{--gh:460px}   /* درخت کریسمس بلندتر از ۳۲۰px است */   /* لایه‌ی پایین صفحه با ارتفاع ثابت (look.js) */
/* کریسمس: درخت و کادوها ثابت‌اند و جزو صفحه نیستند؛ پایین صفحه جای خالی می‌ماند تا متن آخر روی آن‌ها نیفتد */
html[data-occasion="christmas"] .devcredit{padding-bottom:210px}
html[data-occasion="christmas"] footer.contact:not(:has(+ .devcredit)){padding-bottom:210px}
.decor.far{opacity:.6}
.decor .it{position:absolute;will-change:transform,opacity}
.decor .it span{display:block}
.decor svg{display:block;overflow:visible}
@keyframes dcPeek{0%,6%{transform:translateX(-115%)}16%,58%{transform:translateX(-2%)}68%,100%{transform:translateX(-115%)}}
@keyframes dcTail{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(14deg)}}
@keyframes dcFall{0%{transform:translate3d(0,calc(var(--fixh) * -.1),0);opacity:0}8%{opacity:var(--op,1)}90%{opacity:var(--op,1)}100%{transform:translate3d(var(--dx,0px),calc(var(--fixh) * 1.12),0);opacity:0}}
@keyframes dcRise{0%{transform:translate3d(0,calc(var(--fixh) * 1.12),0);opacity:0}10%{opacity:var(--op,1)}80%{opacity:var(--op,1)}100%{transform:translate3d(var(--dx,0px),calc(var(--fixh) * -.12),0);opacity:0}}
@keyframes dcSway{0%,100%{transform:translateX(calc(var(--sw,12px) * -1)) rotate(calc(var(--rt,14deg) * -1))}50%{transform:translateX(var(--sw,12px)) rotate(var(--rt,14deg))}}
@keyframes dcFlutter{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes dcTilt{0%,100%{transform:rotate(calc(var(--tr,5deg) * -1))}50%{transform:rotate(var(--tr,5deg))}}
@keyframes dcTwinkle{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:var(--op,1);transform:scale(1.08)}}
@keyframes dcSpark{0%,70%,100%{opacity:0;transform:scale(.3) rotate(0)}82%{opacity:var(--op,1);transform:scale(1) rotate(45deg)}92%{opacity:0;transform:scale(.5) rotate(80deg)}}
@keyframes dcBlink{0%,42%{opacity:1}58%,100%{opacity:.22}}
@keyframes dcFlame{0%{transform:scale(1,1) skewX(0)}12%{transform:scale(.93,1.08) skewX(-3deg)}27%{transform:scale(1.05,.94) skewX(2deg)}41%{transform:scale(.96,1.1) skewX(-2deg)}58%{transform:scale(1.04,.95) skewX(3deg)}73%{transform:scale(.92,1.05) skewX(-1deg)}88%{transform:scale(1.03,1.02) skewX(2deg)}100%{transform:scale(1,1) skewX(0)}}
@keyframes dcBeat{0%,60%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(1)}36%{transform:scale(1.14)}48%{transform:scale(1)}}
@keyframes dcGrass{0%,100%{transform:skewX(-3deg)}50%{transform:skewX(3deg)}}
@keyframes dcBurst{0%{transform:translate3d(var(--x0,-25vw),0,0)}34%,100%{transform:translate3d(var(--x1,125vw),var(--y1,0px),0)}}
@keyframes dcSwing{0%,100%{transform:rotate(calc(var(--sa,8deg)*-1))}50%{transform:rotate(var(--sa,8deg))}}
@keyframes dcFloat{0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}25%{transform:translate3d(var(--fx,6px),-9px,0) rotate(1deg)}50%{transform:translate3d(0,-16px,0) rotate(3deg)}75%{transform:translate3d(calc(var(--fx,6px)*-1),-7px,0) rotate(0deg)}}
@keyframes dcWisp{0%,100%{transform:skewX(-5deg)}50%{transform:skewX(5deg)}}
@keyframes dcEyes{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}97%{transform:scaleY(1)}}
@keyframes dcWingL{0%,100%{transform:rotate(-26deg) scaleY(1)}50%{transform:rotate(32deg) scaleY(.55)}}
@keyframes dcWingR{0%,100%{transform:rotate(26deg) scaleY(1)}50%{transform:rotate(-32deg) scaleY(.55)}}
@keyframes dcThread{0%,6%{transform:scaleY(.42)}16%{transform:scaleY(1.04)}20%{transform:scaleY(.98)}24%,58%{transform:scaleY(1)}63%,68%{transform:scaleY(.86)}73%,78%{transform:scaleY(.68)}84%,100%{transform:scaleY(.42)}}
@keyframes dcSpiderY{0%,6%{transform:translateY(calc(var(--len,96px)*-.58))}16%{transform:translateY(calc(var(--len,96px)*.04))}20%{transform:translateY(calc(var(--len,96px)*-.02))}24%,58%{transform:translateY(0)}63%,68%{transform:translateY(calc(var(--len,96px)*-.14))}73%,78%{transform:translateY(calc(var(--len,96px)*-.32))}84%,100%{transform:translateY(calc(var(--len,96px)*-.58))}}
@keyframes dcGhostFade{0%,100%{opacity:.5}40%{opacity:.58}50%,56%{opacity:.06}68%{opacity:.5}}
@keyframes dcFaceGlow{0%,100%{opacity:.9}9%{opacity:.62}17%{opacity:1}29%{opacity:.74}38%{opacity:.96}52%{opacity:.58}61%{opacity:.92}77%{opacity:.7}88%{opacity:1}}
@keyframes dcCandle{0%,100%{opacity:.78;transform:scale(1)}9%{opacity:.5;transform:scale(.95)}17%{opacity:.95;transform:scale(1.05)}29%{opacity:.62;transform:scale(.97)}38%{opacity:.9;transform:scale(1.03)}52%{opacity:.45;transform:scale(.94)}61%{opacity:.86;transform:scale(1.02)}77%{opacity:.6;transform:scale(.97)}88%{opacity:.95;transform:scale(1.04)}}
@keyframes dcFog{0%{transform:translate3d(0,0,0) scale(1,1);opacity:.75}50%{transform:translate3d(-7%,-5px,0) scale(1.04,1.14);opacity:1}100%{transform:translate3d(-14%,0,0) scale(1,1);opacity:.8}}
@keyframes dcBreeze{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(1.4deg) scale(1.03)}}
.dc-peek{animation:dcPeek var(--pk,24s) ease-in-out var(--dl,0s) infinite}
.dc-tail{transform-box:fill-box;transform-origin:15% 100%;animation:dcTail 4.8s ease-in-out infinite}
.dc-fall{animation:dcFall var(--d,12s) linear var(--dl,0s) infinite}
.dc-rise{animation:dcRise var(--d,14s) linear var(--dl,0s) infinite}
.dc-sway{animation:dcSway var(--sd,5s) ease-in-out var(--dl,0s) infinite}
.dc-flutter{animation:dcFlutter var(--fl,6s) linear var(--dl,0s) infinite}
.dc-swing2{transform-origin:50% 0;animation:dcSwing2 var(--fl,3s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes dcSwing2{from{transform:rotate(calc(var(--ra,24deg) * -1))}to{transform:rotate(var(--ra,24deg))}}
/* تنگ ماهی نوروز: ماهی همیشه رو به راست؛ فقط حلقه‌ی ملایم در جا، بدون برگشتن و بدون رسیدن به شیشه، دم تکان می‌خورد، حباب بالا می‌رود، جلبک تاب می‌خورد */
.fb-fish{transform-box:fill-box;transform-origin:center;animation:fbSwim 9s ease-in-out infinite}
@keyframes fbSwim{0%,100%{transform:translate(-7px,2px) rotate(1deg)}25%{transform:translate(0,-6px) rotate(-1.5deg)}50%{transform:translate(7px,-1px) rotate(1deg)}75%{transform:translate(0,7px) rotate(1.5deg)}}
.fb-tail{transform-box:fill-box;transform-origin:100% 50%;animation:fbTail .5s ease-in-out infinite alternate}
@keyframes fbTail{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
.fb-mb{transform-box:fill-box;transform-origin:center;animation:fbMouth 2.6s ease-out var(--dl,0s) infinite;opacity:0}
@keyframes fbMouth{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:.95}100%{transform:translate(9px,-30px) scale(1.15);opacity:0}}
.fb-weed{transform-box:fill-box;transform-origin:50% 100%;animation:dcGrass 5s ease-in-out infinite}
.dc-tilt{transform-origin:50% 85%;animation:dcTilt var(--tt,9s) ease-in-out var(--dl,0s) infinite}   /* میوه‌های کنج یلدا: تاب خیلی کند */
.dc-twinkle{animation:dcTwinkle var(--td,3s) ease-in-out var(--dl,0s) infinite}
.dc-spark{animation:dcSpark var(--td,4.5s) ease-in-out var(--dl,0s) infinite}
.dc-blink{animation:dcBlink var(--bk,1.7s) steps(1) var(--dl,0s) infinite}
svg.dc-blink{will-change:opacity}   /* لایه‌ی جدا روی GPU: چشمک بدون نقاشی دوباره */
.dc-flame{transform-origin:50% 92%;animation:dcFlame var(--fd,1.9s) ease-in-out infinite}
.dc-beat{animation:dcBeat var(--bt,1.9s) ease-in-out var(--dl,0s) infinite}
.dc-burst{left:0;animation:dcBurst var(--d,20s) linear var(--dl,0s) infinite}
.dc-swing{transform-origin:50% 0;animation:dcSwing var(--sd,4s) ease-in-out var(--dl,0s) infinite}
.dc-thread{transform-origin:50% 0;animation:dcThread var(--sp,14s) ease-in-out var(--dl,0s) infinite}
.dc-spider{animation:dcSpiderY var(--sp,14s) ease-in-out var(--dl,0s) infinite}
.dc-ghost{opacity:.5;animation:dcFloat var(--bd,6s) ease-in-out var(--dl,0s) infinite,dcGhostFade var(--gf,13s) ease-in-out var(--dl,0s) infinite}
.dc-wisp{transform-origin:50% 0;animation:dcWisp var(--wd,3.2s) ease-in-out var(--dl,0s) infinite}
.dc-eyes{transform-box:fill-box;transform-origin:50% 50%;animation:dcEyes var(--ed,5.5s) linear var(--dl,0s) infinite}
.dc-face{animation:dcFaceGlow var(--fg,2.4s) ease-in-out infinite}
.dc-candle{animation:dcCandle var(--fg,2.4s) ease-in-out infinite}
.dc-fog{transform-origin:50% 100%;animation:dcFog var(--d,30s) ease-in-out infinite alternate}
.dc-breeze{transform-origin:50% 50%;animation:dcBreeze var(--d,8s) ease-in-out infinite}
.dc-wing-l,.dc-wing-r{transform-box:fill-box;transform-origin:100% 35%;animation:dcWingL var(--fp,.34s) ease-in-out var(--dl,0s) infinite}
.dc-wing-r{transform-origin:0 35%;animation-name:dcWingR}
/* پرواز موجی خفاش‌ها */
@keyframes dcWave{
  0%,100%{transform:translate3d(0,calc(var(--wa,16px)*-1),0) rotate(0deg);animation-timing-function:cubic-bezier(.12,0,.39,0)}
  25%{transform:translate3d(0,0,0) rotate(var(--bank,9deg));animation-timing-function:cubic-bezier(.61,1,.88,1)}
  50%{transform:translate3d(0,var(--wa,16px),0) rotate(0deg);animation-timing-function:cubic-bezier(.12,0,.39,0)}
  75%{transform:translate3d(0,0,0) rotate(calc(var(--bank,9deg)*-1));animation-timing-function:cubic-bezier(.61,1,.88,1)}}
.dc-wave{animation:dcWave var(--wd,2.6s) ease-in-out var(--dl,0s) infinite}
/* دست آدم‌برفی که تکان می‌خورد */
.dc-arm{transform-origin:152px 151px;animation:smWave 5.5s ease-in-out infinite}
@keyframes smWave{0%,50%,100%{transform:rotate(0)}58%{transform:rotate(-24deg)}66%{transform:rotate(3deg)}74%{transform:rotate(-24deg)}82%{transform:rotate(3deg)}90%{transform:rotate(0)}}
/* DECOR-END */

/* المان آخر صفحه (سبزه، درخت، سبیل، آدم‌برفی، برگ‌ها): داخل جریان صفحه، بعد از فوتر، کلیک‌ناپذیر */
.decor-end{width:min(340px,86%);margin:-64px auto 0;padding-bottom:22px;pointer-events:none;position:relative;z-index:1}
.decor-end.de-stache{width:min(300px,78%);margin:6px auto 0;padding-bottom:30px;opacity:.9}
.fb-lv{transform:translateY(calc((30px - 56px * var(--p,.536)) / 2));transition:transform .15s linear}
.fb-water{transform:translateY(calc(30px - 56px * var(--p,.536)));transition:transform .15s linear}
.to-top .fbtn{display:none}
.fbtn .fb-fish path[stroke="#ffe0b0"],.fbtn .fb-fish g[stroke="#b81c10"],.fbtn .fb-fish path[stroke="#fff"],.fbtn .fb-fish path[fill="#fff"]{display:none}
.fbtn .fb-eye{transform-box:fill-box;transform-origin:center;transform:scale(1.4)}
.fbtn ellipse[cy="186"]{display:none}
html[data-occasion="nowruz"] .to-top{width:68px;height:68px;border-radius:0;background:none;box-shadow:none}
html[data-occasion="nowruz"] .to-top>svg{display:none}
html[data-occasion="nowruz"] .to-top .fbtn{display:block;position:absolute;inset:0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
html[data-occasion="nowruz"] .to-top .fbtn svg{display:block;width:100%;height:100%;position:static;transform:none}
html[data-occasion="nowruz"] .to-top:active .fb-fish{animation-duration:.6s}
.dc-stache{transform-origin:50% 60%;animation:dcStache 6s ease-in-out infinite;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.dc-stache svg,.dc-snowman svg,.dc-leafpile svg{display:block;width:100%;height:auto}
.dc-snowman{transform-origin:50% 100%;animation:dcSnow 6s ease-in-out infinite}
@keyframes dcStache{0%,100%{transform:rotate(-2.5deg) scale(1)}50%{transform:rotate(2.5deg) scale(1.04)}}
@keyframes dcSnow{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg) translateY(-2px)}}

/* ================= صفحه‌ی آغاز مناسبت‌ها (window.showSplash) ================= */
.splash{font-family:"DoranVF","Geeza Pro",-apple-system,"SF Pro Text",Tahoma,sans-serif;line-height:1.6;position:fixed;inset:0;z-index:100000;display:grid;place-items:center;cursor:pointer;transition:opacity .55s ease}
.splash.out{opacity:0;pointer-events:none}
.sp-art{width:min(62vw,300px)}
.sp-art svg{display:block;width:100%;height:auto;overflow:visible}
.sp-art.sp-balloon{position:relative;z-index:2;width:min(74vw,320px);animation:spBalloon 2.7s cubic-bezier(.3,.7,.3,1) both}
.sp-art:has(.sp-duo){width:min(78vw,340px)}
.sp-art.sp-front{position:relative;z-index:2}
.sp-art:has(.sp-poster){width:min(94vw,420px);filter:none}
.sp-art.sp-big{width:min(84vw,380px)}
.sp-art .dc-face{animation:none;opacity:1}
.sp-duo{display:flex;align-items:center;justify-content:center}
.sp-duo>span{display:block}
.sp-pop{animation:spPop .75s cubic-bezier(.2,1.35,.4,1) both}
.sp-beat{animation:spPop .75s cubic-bezier(.2,1.35,.4,1) both,spBeat 1s ease-in-out .8s 2}
.sp-eyes{animation:spEyes 1.5s ease-in-out .8s both}
.sp-stache{transform-box:fill-box;transform-origin:50% 50%;animation:spStache 1.6s ease-in-out .9s 1}
/* تبریک بالا (مارکی) و نام کافه پایین */
.sp-top,.sp-bot{position:absolute;left:0;right:0;text-align:center;animation:spFade .6s ease .35s both}
.sp-top{top:calc(env(safe-area-inset-top) + 13%);overflow:hidden;direction:ltr;white-space:nowrap;font-size:clamp(1.5rem,8vw,2.3rem);font-weight:800;letter-spacing:.02em;text-shadow:0 2px 14px rgba(0,0,0,.22)}
.sp-track{display:inline-flex;animation:spMarquee 9s linear infinite}
.sp-top.fa .sp-track{animation-direction:reverse}
.sp-track span{padding:0 .6em}
.sp-track span::after{content:"\2726";margin-left:1.2em;font-size:.6em;vertical-align:middle;opacity:.7}
.sp-bot{bottom:calc(env(safe-area-inset-bottom) + 11%);display:flex;align-items:center;justify-content:center;gap:12px;font-size:1.25rem;font-weight:700;direction:rtl}
.sp-bot i{width:1.5px;height:1.3em;background:currentColor;opacity:.6}
.sp-bot span{letter-spacing:.06em;direction:ltr}
/* ذرات پس‌زمینه (برف، قلب، ستاره، گلبرگ) */
.sp-star{position:absolute;display:block;animation:spTw 1.4s ease-in-out infinite}
.sp-fx{position:absolute;display:block;pointer-events:none;opacity:0}
.sp-fx svg,.sp-fx i{display:block;width:100%}
.sp-fx.fall{top:-6%;animation:spFall linear infinite}
.sp-fx.rise{bottom:-6%;animation:spRise linear infinite}
.sp-fx.twinkle{top:calc(10% + 75% * var(--r,.5));animation:spTw 1.6s ease-in-out infinite}
@keyframes spBalloon{0%{transform:translateY(75vh) rotate(-6deg);opacity:0}25%{opacity:1}42%{transform:translateY(-1.5vh) rotate(4deg)}56%{transform:translateY(1vh) rotate(-3deg)}70%{transform:translateY(0) rotate(2deg)}100%{transform:translateY(-95vh) rotate(-5deg);opacity:1}}
@keyframes spPop{0%{transform:scale(.2) rotate(-8deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes spEyes{0%,100%{fill:#ff9a2e}35%,65%{fill:#ff1f1f}}
@keyframes spBeat{0%,100%{transform:scale(1)}30%{transform:scale(1.12)}}
@keyframes spStache{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg) scale(1.04)}60%{transform:rotate(3deg) scale(1.04)}}
@keyframes spFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes spMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spTw{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
@keyframes spFall{0%{transform:translateY(0);opacity:0}15%{opacity:.8}100%{transform:translateY(112vh) rotate(60deg);opacity:.6}}
@keyframes spRise{0%{transform:translateY(0);opacity:0}15%{opacity:.8}100%{transform:translateY(-112vh) rotate(-20deg);opacity:.5}}

/* ================= واکنش‌گرا ================= */
/* گوشی کوچک */
@media (max-width:379px){
  .lang-btn{height:34px;padding:0 10px;gap:5px}
  #statusLine{font-size:.7rem;height:34px;padding:0 11px}
  .iact{flex-basis:72px;padding:4px 2px;font-size:.7rem}
}
/* تبلت و دسکتاپ: مثل گوشی تک‌ستون، با کادرهای کمی پهن‌تر (دسکتاپ هم‌عرض تبلت؛ کناره‌های مشکی کمتر) */
@media (min-width:700px){
  :root{--maxw:600px}
  .app{padding:0 28px}
  .intro::before,.intro::after{left:-28px;right:-28px}
  .intro{padding-top:24px}
  .lang-btn{height:44px;padding:0 15px;gap:7px;font-size:.8rem}
  #statusLine{height:44px;padding:0 16px;font-size:.82rem}
  .toolbar{padding-top:calc(env(safe-area-inset-top) + 16px);margin-inline:-28px;padding-inline:28px}
  .unit{margin-top:16px}
}
/* هر جا صفحه از ستون منو پهن‌تر است (تبلت، گوشی افقی، دسکتاپ): فقط ستون رنگ تم را دارد؛ دو طرف مشکیِ نیمه‌شفاف با بلور قوی و لبه‌ی طلایی */
@media (min-width:520px){
  body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;--c:calc(var(--maxw) / 2);
    background:linear-gradient(90deg,transparent calc(50% - var(--c) - 1px),rgba(var(--gold-rgb),.28) calc(50% - var(--c) - 1px),rgba(var(--gold-rgb),.28) calc(50% - var(--c)),transparent calc(50% - var(--c)),
      transparent calc(50% + var(--c)),rgba(var(--gold-rgb),.28) calc(50% + var(--c)),rgba(var(--gold-rgb),.28) calc(50% + var(--c) + 1px),transparent calc(50% + var(--c) + 1px)),rgba(0,0,0,.82);
    -webkit-backdrop-filter:blur(24px) saturate(.6);backdrop-filter:blur(24px) saturate(.6);
    --m:linear-gradient(90deg,#000 calc(50% - var(--c) + 1px),transparent calc(50% - var(--c) + 1px),transparent calc(50% + var(--c) - 1px),#000 calc(50% + var(--c) - 1px));
    -webkit-mask-image:var(--m);mask-image:var(--m)}
  /* تم‌های مناسبتی: تزئینات و صفحه‌ی آغاز فقط در ستون منو (مثل گوشی) */
  .decor,.splash,.season-glow{left:calc(50% - var(--maxw) / 2);right:auto;width:var(--maxw)}
}
@media (hover:hover){
  .tab,.chip{transition:color .2s,border-color .2s,transform .2s}
  .tab:not(.active):hover,.chip:not(.active):hover{color:var(--gold-l);border-color:rgba(var(--gold-rgb),.7);transform:translateY(-1px)}
  .item.tap:hover::after{opacity:1}
  .to-top:hover,.lang-btn:hover,.menu-go:hover{filter:brightness(1.12)}
  .iact:hover{color:var(--gold-l)}
  .iact:hover .ico{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(var(--gold-l-rgb),.7),inset 0 1px 0 rgba(255,255,255,.1),0 8px 18px rgba(0,0,0,.32)}
}
:where(button,a,input,.item.tap):focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .frame.glow::after{animation-duration:.01s}
  .cat.ended .ended-note{animation:none}
  .toast{transition:opacity .2s;transform:none}
  .popmsg .pop-card.frame{transform:none}
  .icenter,.menu-go,.isheet .menu-go,.menuwrap{animation:none}
  .decor *,.decor-end *{animation:none!important}
  .decor .dc-fall,.decor .dc-rise,.decor .dc-burst,.decor .dc-fog,.decor .dc-peek{display:none}
  .decor .dc-candle{opacity:.6}
  .sp-art.sp-balloon,.dc-snowman,.dc-arm{animation:none}
}

/* گوشیِ افقی: پیام چشمک‌زن «گوشی خود را بچرخانید» روی همه‌چیز (سایت برای حالت عمودی طراحی شده) */
.rotate-warn{display:none}
@media (orientation:landscape) and (max-height:500px) and (hover:none) and (pointer:coarse){
  .boot{display:none!important}   /* گوشی افقی: پیام چرخاندن دیده شود؛ لودینگ و اینترو تا صاف شدن گوشی صبر می‌کنند (app.js) */
  html,body{overflow:hidden!important}
  .rotate-warn{position:fixed;inset:0;z-index:200000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;
    padding:20px;background:var(--bg);color:var(--gold-l)}
  .rotate-warn p{font-size:1.15rem;font-weight:800;animation:rwBlink 1.1s ease-in-out infinite}
  .rw-phone{transform-box:view-box;transform-origin:40px 40px;animation:rwTurn 4s ease-in-out infinite}
}
@keyframes rwBlink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes rwTurn{0%,12%{transform:rotate(90deg)}45%,62%{transform:rotate(0)}95%,100%{transform:rotate(90deg)}}   /* رفت و برگشت نرم؛ دیگر از عمودی ناگهان به افقی نمی‌پرد */   /* دو فلش دو طرف، بیرون از شعاع چرخش گوشی تا هیچ‌وقت به آن نخورند */