/* ==========================================================================
   X Menu — Brand layer (مشترک بین وب‌سایت کافه و منوی دیجیتال)
   همه‌ی رنگ‌ها و سبک‌ها از متغیرهای تم می‌آیند؛ هیچ رنگ ثابتی در اجزا نیست.
   ========================================================================== */
@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Lalezar";src:url("../fonts/Lalezar-arabic.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"NotoNaskh";src:url("../fonts/NotoNaskhArabic-Variable.woff2") format("woff2");font-weight:400 700;font-display:swap}

:root{
  --primary:#b68a52;--secondary:#7e6140;--bg:#14100d;--text:#f2e9df;--button:#b68a52;--accent:#dcb97f;--card:#1e1814;
  --on-primary:#17110b;--on-button:#17110b;--on-accent:#17110b;
  --muted:color-mix(in srgb,var(--text) 62%,var(--bg));--line:color-mix(in srgb,var(--text) 16%,var(--bg));--ov:255 255 255;
  --font:"Vazirmatn",Tahoma,sans-serif;--font-display:"Vazirmatn",Tahoma,sans-serif;--display-weight:800;
  --r:14px;--r-sm:8px;--r-btn:12px;--gutter:clamp(1.1rem,4.5vw,2.6rem);--ease:cubic-bezier(.2,.7,.2,1);
}
.xm[data-radius="sharp"]{--r:2px;--r-sm:2px;--r-btn:2px}
.xm[data-radius="soft"]{--r:14px;--r-sm:8px;--r-btn:12px}
.xm[data-radius="round"]{--r:28px;--r-sm:16px;--r-btn:999px}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
.xm{margin:0;font-family:var(--font);color:var(--text);background:transparent;line-height:1.85;direction:rtl;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;min-height:100vh}
:where(.xm h1, .xm h2, .xm h3, .xm h4, .xm p, .xm ul, .xm ol, .xm figure, .xm blockquote){margin:0;padding:0}
:where(.xm ul, .xm ol){list-style:none}
:where(.xm a){color:inherit;text-decoration:none}
:where(.xm button, .xm input, .xm textarea, .xm select){font:inherit;color:inherit}
:where(.xm button){cursor:pointer}
:where(.xm button:not(.btn)){background:none;border:0;padding:0}
:where(.xm img){max-width:100%;display:block}
.xm :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.xm ::selection{background:var(--primary);color:var(--on-primary)}
.display{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:-.01em;line-height:1.25}
.ic{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:-.22em}
.ltr{direction:ltr;unicode-bidi:isolate}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ----------------------------- پس‌زمینه‌های ویژه ---------------------------- */
.xm-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--bg)}
.xm-bg::before,.xm-bg::after{content:"";position:absolute;inset:0}
.xm{
  --m-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5 -.25'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --m-blotch:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.012 .016' numOctaves='4' seed='8' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.4 -.9'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --m-marble:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100'><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.0032 .0068' numOctaves='5' seed='14' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0 0 0 0 .5 1 .5 0 0 0 0 0 0 0 0 0 0'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --m-fibre:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.5 .42' numOctaves='5' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 -.8'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.xm-bg::before{-webkit-mask-size:auto;mask-size:auto;opacity:1}
/* بدون پس‌زمینه: رنگ ساده */
.xm[data-bg="custom-solid"] .xm-bg::before,.xm[data-bg="custom-solid"] .xm-bg::after{display:none}
/* مرمر تیره/روشن */
.xm[data-bg="dark-marble"] .xm-bg::before{background:rgb(var(--ov)/.13);-webkit-mask:var(--m-marble) 0 0/1100px;mask:var(--m-marble) 0 0/1100px}
.xm[data-bg="dark-marble"] .xm-bg::after{background:radial-gradient(120% 70% at 50% -10%,rgb(var(--ov)/.07),transparent 60%),radial-gradient(80% 60% at 100% 100%,rgb(0 0 0/.35),transparent 70%)}
/* کاغذ گرم */
.xm[data-bg="warm-paper"] .xm-bg::before{background:rgb(var(--ov)/.075);-webkit-mask:var(--m-fibre) 0 0/500px;mask:var(--m-fibre) 0 0/500px}
.xm[data-bg="warm-paper"] .xm-bg::after{background:radial-gradient(100% 80% at 50% 0%,rgb(var(--ov)/.05),transparent 70%),linear-gradient(180deg,transparent 60%,rgb(var(--ov)/.04))}
/* مشکی لوکس */
.xm[data-bg="luxury-black"] .xm-bg::before{background:rgb(var(--ov)/.045);-webkit-mask:var(--m-grain) 0 0/220px;mask:var(--m-grain) 0 0/220px}
.xm[data-bg="luxury-black"] .xm-bg::after{background:radial-gradient(60% 45% at 50% 0%,color-mix(in srgb,var(--primary) 16%,transparent),transparent 70%),radial-gradient(70% 50% at 50% 120%,color-mix(in srgb,var(--primary) 10%,transparent),transparent 70%)}
/* کرم نرم */
.xm[data-bg="soft-cream"] .xm-bg::before{display:none}
.xm[data-bg="soft-cream"] .xm-bg::after{background:radial-gradient(70% 50% at 0% 0%,rgb(var(--ov)/.05),transparent 70%),radial-gradient(70% 55% at 100% 100%,color-mix(in srgb,var(--primary) 9%,transparent),transparent 70%)}
/* بافت قهوه */
.xm[data-bg="coffee-texture"] .xm-bg::before{background:rgb(var(--ov)/.075);-webkit-mask:var(--m-blotch) 0 0/700px;mask:var(--m-blotch) 0 0/700px}
.xm[data-bg="coffee-texture"] .xm-bg::after{background:rgb(var(--ov)/.05);-webkit-mask:var(--m-grain) 0 0/220px;mask:var(--m-grain) 0 0/220px}
/* ماسه مینیمال */
.xm[data-bg="minimal-sand"] .xm-bg::before{background:rgb(var(--ov)/.05);-webkit-mask:var(--m-grain) 0 0/220px;mask:var(--m-grain) 0 0/220px}
.xm[data-bg="minimal-sand"] .xm-bg::after{background:linear-gradient(180deg,rgb(var(--ov)/.04),transparent 40%,color-mix(in srgb,var(--secondary) 12%,transparent))}
/* جنگل عمیق */
.xm[data-bg="deep-forest"] .xm-bg::before{background:rgb(var(--ov)/.06);-webkit-mask:var(--m-blotch) 0 0/700px;mask:var(--m-blotch) 0 0/700px}
.xm[data-bg="deep-forest"] .xm-bg::after{background:radial-gradient(70% 50% at 15% 10%,color-mix(in srgb,var(--secondary) 28%,transparent),transparent 70%),radial-gradient(60% 50% at 90% 90%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)}
/* گرادیان مدرن */
.xm[data-bg="modern-gradient"] .xm-bg::before{display:none}
.xm[data-bg="modern-gradient"] .xm-bg::after{background:linear-gradient(155deg,color-mix(in srgb,var(--secondary) 34%,transparent),transparent 45%),linear-gradient(335deg,color-mix(in srgb,var(--primary) 20%,transparent),transparent 50%)}
/* دانه‌دار ظریف */
.xm[data-bg="subtle-grain"] .xm-bg::before{background:rgb(var(--ov)/.09);-webkit-mask:var(--m-grain) 0 0/220px;mask:var(--m-grain) 0 0/220px}
.xm[data-bg="subtle-grain"] .xm-bg::after{display:none}

/* ------------------------------- اجزای مشترک ------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3rem;padding:.55rem 1.5rem;border-radius:var(--r-btn);
  background:var(--button);color:var(--on-button);font-weight:700;font-size:.95rem;border:1px solid var(--button);
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--text);border-color:color-mix(in srgb,var(--text) 38%,transparent)}
.btn.ghost:hover{border-color:var(--text);background:rgb(var(--ov)/.06)}
.btn.sm{min-height:2.4rem;padding:.3rem 1rem;font-size:.85rem}
.btn[disabled]{opacity:.5;pointer-events:none}
.eyebrow{display:flex;align-items:center;gap:.8rem;font-size:.8rem;color:var(--muted);letter-spacing:.04em}
.eyebrow b{font-weight:600;color:var(--primary);font-variant-numeric:tabular-nums}
.eyebrow::after{content:"";height:1px;width:3.2rem;background:var(--line)}
.stars{display:inline-flex;gap:.12rem;color:var(--primary);vertical-align:middle}
.stars .ic{width:1em;height:1em}
.stars .off{color:var(--line)}
.rule{height:1px;background:var(--line);border:0}

/* ظهور ملایم هنگام اسکرول (فقط با JS فعال می‌شود) */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}html.js .rv{opacity:1;transform:none;transition:none}*{animation:none!important}}

/* اعلان‌ها */
#toasts{position:fixed;inset-inline:0;bottom:calc(5.5rem + env(safe-area-inset-bottom));display:grid;justify-items:center;gap:.5rem;z-index:200;pointer-events:none;padding:0 1rem}
.toast{background:var(--text);color:var(--bg);padding:.6rem 1.2rem;border-radius:var(--r-btn);font-size:.9rem;font-weight:600;max-width:92vw;animation:tin .35s var(--ease)}
.toast.error{background:#c0392b;color:#fff}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ------------------------- لیوان ترکیبات (XMGlass) ------------------------- */
.xmg{display:flex;align-items:center;gap:clamp(1rem,4vw,2rem)}
.xmg-glass{flex:0 0 clamp(120px,34%,170px)}
.xmg-svg{width:100%;height:auto;overflow:visible;display:block}
.xmg .xmg-l{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.xmg .xmg-ln,.xmg .xmg-t{opacity:0}
.xmg.xmg-go .xmg-l{transform:scaleY(1);transition:transform .95s var(--ease);transition-delay:calc(var(--i)*.28s)}
.xmg.xmg-go .xmg-ln,.xmg.xmg-go .xmg-t{opacity:1;transition:opacity .5s .9s}
.xmg-ice{fill:rgba(235,248,250,.30);stroke:rgba(255,255,255,.6);stroke-width:2}
.xmg-steam{fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round;opacity:.0}
.xmg.xmg-go .xmg-steam{animation:steam 3.6s ease-in-out infinite}
.xmg-steam.s2{animation-delay:.9s!important}.xmg-steam.s3{animation-delay:1.8s!important}
@keyframes steam{0%{opacity:0;transform:translateY(8px)}35%{opacity:.55}100%{opacity:0;transform:translateY(-10px)}}
.xmg-legend{flex:1;min-width:0;display:grid;gap:.15rem}
.xmg-legend li{display:grid;grid-template-columns:.8rem 1fr auto;align-items:center;gap:.7rem;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.92rem;
  opacity:0;transform:translateX(10px)}
.xmg.xmg-go .xmg-legend li{opacity:1;transform:none;transition:opacity .5s,transform .5s var(--ease);transition-delay:calc(.2s + var(--i)*.12s)}
.xmg-legend i{width:.8rem;height:.8rem;border-radius:50%;box-shadow:0 0 0 1px rgb(var(--ov)/.25)}
.xmg-legend b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--primary)}