/* ═══════════════════════════════════════════════════════════
   رزرونو — اپ کاستومر: استایل‌ها (تم دارک/لایت، Liquid Glass، حرکت)
   جدا از index.html برای نگهداریِ بهتر. Vanilla CSS، بدون build.
   ═══════════════════════════════════════════════════════════ */
/* ═══════════ DESIGN SYSTEM — Reserve Site ═══════════
   Personality: Smart · Premium · Minimal · Modern · AI · Trustworthy
   Feel: Stripe × Linear × Airbnb × Apple. 90% white, 5% blue, 5% teal.
*/
:root{
  /* brand — گرادیانِ امضا و رنگ‌های ثابت (مستقل از تم) */
  /* ۲۰۲۶-۰۹-۱۳ — «اپل + تیک‌تاک + اکسپلور» (دستورِ مالک): بنفشِ برند جای خود را به
     همان اخرایِ لندینگ داد تا سایت و اپ یک محصول دیده شوند — گوشیِ صفحه‌ی اصلیِ
     لندینگ همین اپ را نشان می‌دهد، پس رنگش هم باید همین باشد. نام‌های --blue*
     تاریخی‌اند و دست نخوردند (صدها مصرف). #C8430F با متنِ سفید ۴٫۹:۱ است. */
  --blue:#C8430F; --blue-600:#B23A0C; --blue-50:#FDF2EC; --blue-100:#FCE3D6;
  /* `--brand` در ۵ جا با var(--brand, …) مصرف می‌شد ولی **هیچ‌جا تعریف نشده بود**
     (ممیزیِ ۲۰۲۶-۰۸-۲۴). یعنی همیشه fallback اجرا می‌شد — و fallbackها یکی
     نبودند: `#2563EB` در یک‌جا و `#7c5cff` در چهار جایِ دیگر. پس کدی که
     توکنیزه به‌نظر می‌رسید، عملاً سه رنگِ متفاوت رندر می‌کرد. حالا تعریف شد و
     همه به همان بنفشِ برند می‌رسند. */
  --brand:#C8430F;
  /* سفید روی برند، عکس و سطحِ تیره — همتای --brand-contrast ِ لندینگ؛ در هر دو تم ثابت */
  --on-brand:#FFFFFF;
  /* ⚠️ رنگِ برند برایِ **متن** ≠ رنگِ برند برایِ **پُرکردن**. اندازه‌گیریِ واقعی:
     `--blue` به‌عنوانِ متن ۲٫۸۹:۱ رویِ نوارِ پایینِ تیره و ۳٫۹۱:۱ رویِ زمینه‌ی
     تیره می‌داد — زیرِ ۴٫۵ در WCAG 1.4.3 AA (متنِ ۱۰ تا ۱۲٫۵ پیکسل، یعنی
     دقیقاً جایی که خوانایی بیشترین اهمیت را دارد). خودِ `--blue` برایِ دکمه و
     آیکونِ پُر دست‌نخورده می‌ماند؛ فقط متن این نسخه را می‌گیرد.
     مقدارِ تمِ روشن رنگِ تازه‌ای نیست، همان `--blue-600`ِ موجود است. */
  --blue-text:#B23A0C;
  --teal:#E0791A; --teal-600:#B85F0E; --teal-50:#FDF5EB;
  /* ⚠️ سطحِ «تینتِ روشنِ ثابت» (--blue-50/--teal-50) عمداً مستقل از تم است، پس در
     تمِ تیره هم روشن می‌ماند. هر متنی که رویش می‌نشیند باید رنگِ **ثابتِ تیره**
     داشته باشد، نه توکنِ تم‌آگاه. باگِ واقعیِ رفع‌شده (۲۰۲۶-۰۸-۲۴): نوارِ
     پیشنهادِ هوشمند و کارتِ نقدِ هوشمند متنشان را از `--t1` می‌گرفتند که در تمِ
     تیره سفید است → سفید رویِ تینتِ روشن، نسبتِ ۱٫۱۳:۱ یعنی عملاً نامرئی؛ و
     چون تمِ پیش‌فرض تاریک است، این حالتِ عادیِ کاربر بود. */
  --on-tint:#160F26;
  --grad:linear-gradient(135deg,#C8430F,#E0791A);
  /* `--grad` امضایِ بصریِ برند است و برایِ پُرکردنِ تزئینی و متنِ گرادیانی
     می‌ماند. ولی وقتی **متنِ سفید** رویش می‌نشیند، ایستگاهِ صورتیِ آخر
     (#FF4B7A) فقط ۳٫۲۱:۱ می‌دهد — زیرِ ۴٫۵. این نسخه همان مسیرِ رنگی با
     ایستگاه‌های عمیق‌تر است: ۵٫۱۷ / ۵٫۴۲ / ۴٫۵۴ — هر سه قبول.
     (کلِ --grad عوض نشد تا ظاهرِ برند در جاهای تزئینی دست‌نخورده بماند.) */
  /* دکمه‌ی کنش تخت است (اپل)؛ «گرادیانِ» یک‌رنگ تا هر background-imageی که این
     توکن را می‌خواند معتبر بماند. */
  --grad-cta:linear-gradient(#C8430F,#C8430F);
  /* رنگِ محتوا — همان هشت «غذا»ی لندینگ (apps/landing/app/globals.css). روی
     کاشیِ کشف، کارت و نمای تمام‌صفحه می‌نشیند؛ رنگِ برند نیست و در هر دو تم ثابت
     است. gradFor (seed.js) به همین‌ها اشاره می‌کند. هر ایستگاه با متنِ سفید ≥ ۳٫۳:۱
     (AA ِ متنِ درشت) — ممیزیِ «بدترین ایستگاه» در theme-contrast-audit همین را می‌سنجد. */
  --dish-saffron:radial-gradient(120% 90% at 85% 8%,#C07F00 0%,transparent 58%),radial-gradient(90% 80% at 10% 100%,#B4380A 0%,transparent 62%),#D77011;
  --dish-pomegranate:radial-gradient(110% 90% at 80% 0%,#FF465C 0%,transparent 55%),radial-gradient(100% 90% at 0% 100%,#5C0A1E 0%,transparent 65%),#A3132F;
  --dish-pistachio:radial-gradient(120% 90% at 90% 10%,#739912 0%,transparent 55%),radial-gradient(90% 90% at 0% 100%,#1F4D19 0%,transparent 65%),#5A8F2A;
  --dish-turquoise:radial-gradient(110% 90% at 85% 5%,#0B9BA6 0%,transparent 55%),radial-gradient(100% 90% at 5% 100%,#083F55 0%,transparent 65%),#0E7C93;
  --dish-rosewater:radial-gradient(110% 90% at 80% 5%,#FF3B88 0%,transparent 55%),radial-gradient(100% 90% at 0% 100%,#7A1446 0%,transparent 65%),#D44B8A;
  --dish-eggplant:radial-gradient(110% 90% at 85% 0%,#9874FF 0%,transparent 55%),radial-gradient(100% 90% at 0% 100%,#1C0B3D 0%,transparent 65%),#4B2A97;
  --dish-charcoal:radial-gradient(90% 70% at 20% 100%,#FF4B0A 0%,transparent 55%),radial-gradient(100% 90% at 90% 0%,#3A3A3C 0%,transparent 60%),#111112;
  --dish-tea:radial-gradient(110% 90% at 85% 5%,#CE760D 0%,transparent 55%),radial-gradient(100% 90% at 0% 100%,#3D1A05 0%,transparent 65%),#8A4412;
  --grad-warm:linear-gradient(135deg,#FF9A3B,#FF4B7A);
  --green:#12A150; --amber:#FF8A4B; --red:#FF4B6A;
  /* radius */
  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-2xl:32px;
  /* motion */
  --t-fast:130ms; --t:200ms; --t-slow:340ms;
  --ease:cubic-bezier(.4,0,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
/* ═══════════ تمِ تاریک (پیش‌فرضِ نسل‌Z) ═══════════ */
[data-theme="dark"]{
  /* ⚠️ اضافه‌شده (R5 — حسابرسیِ دارک‌مود، ۲۰۲۶-۰۸-۱۴): بدونِ color-scheme،
     مرورگر ویجت‌هایِ بومی (پاپ‌آپِ گزینه‌هایِ <select>، اسکرول‌بار) را بر
     اساسِ تمِ سیستم‌عاملِ کاربر رنگ می‌زند، نه data-theme همین صفحه — یعنی
     اگر سیستم‌عاملِ کاربر روشن باشد ولی این اپ را تاریک گذاشته باشد،
     لیستِ بازشده‌ی «کِی»/«چند نفر» با پس‌زمینه‌ی سفیدِ بومی رندر می‌شد
     (نه توکن‌های خودِ اپ) — دقیقاً چیزی که select/option در R5 اشاره کرده.*/
  color-scheme: dark;
  --bg:#000000; --white:rgba(255,255,255,.07);
  /* `--t3` (متنِ کم‌رنگ) در تمِ تیره ۴٫۳۸:۱ رویِ نوارِ پایین می‌داد — زیرِ ۴٫۵،
     و برچسبِ نوارِ پایین فقط ۱۰ پیکسل است. یک پله روشن‌تر شد: حالا ۵٫۰۶:۱ رویِ
     نوار، ۶٫۸۶:۱ رویِ زمینه و ۶٫۲۹:۱ رویِ کارت. بی‌خطر است چون این توکن در هر
     ۳۰ مصرفش فقط `color:` است (نه پس‌زمینه/حاشیه)، پس روشن‌ترشدن صرفاً
     کنتراست را بالا می‌برد. قرینه‌ی همان تنظیمی که تمِ روشن قبلاً گرفته بود. */
  /* ۰۹-۱۳: خاکستریِ خنثی به‌جای یاسیِ #CBBEF2 — رنگ از محتوا می‌آید، نه از متن.
     هر دو روی مشکی بالای ۶:۱ (t2 ۷٫۸، t3 ۶٫۱). */
  --t1:#FFFFFF; --t2:#A1A1A6; --t3:#8E8E93;
  --s-50:rgba(255,255,255,.04); --s-100:rgba(255,255,255,.07); --s-200:rgba(255,255,255,.10);
  --s-300:rgba(255,255,255,.14); --s-400:#8E8E93; --s-500:#A1A1A6; --s-600:#D1D1D6; --s-700:#E5E5EA; --s-900:#FFFFFF;
  /* ⚠️ باگِ واقعیِ رفع‌شده (ممیزیِ کنتراست ۲۰۲۶-۰۸-۲۴): `--s-900` انتهایِ
     پرکنتراستِ مقیاس است، پس بین دو تم **جا عوض می‌کند** (اینجا سفید، در تمِ
     روشن تقریباً سیاه). هرجا از آن به‌عنوانِ پس‌زمینه استفاده شده بود، رنگِ متن
     `#fff`ِ هاردکد بود — یعنی در تمِ تیره سفید رویِ سفید: نسبتِ ۱:۱، کاملاً
     نامرئی. و چون تمِ پیش‌فرضِ اپ تاریک است، این حالتِ عادیِ کاربر بود، نه لبه.
     دو قربانی: چیپِ فیلترِ فعال و **متنِ toast** (تأیید/خطا).
     راه‌حل، جفتِ معناییِ گمشده است نه وصله‌ی موردی: هر سطحی رنگِ متنِ خودش را
     دارد و هر دو با هم می‌چرخند. */
  --on-s-900:#1D1D1F;
  --blue-text:#FF8552;   /* اخرایِ روشن برای متن روی مشکی — همان --brand-ink ِ لندینگ */
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.16);
  /* شیشه‌ی مایع */
  --glass:rgba(255,255,255,.08); --glass-2:rgba(255,255,255,.13); --glass-edge:rgba(255,255,255,.24); --glass-hi:rgba(255,255,255,.55);
  --card:rgba(255,255,255,.07); --card-solid:#1C1C1E;
  /* سایه‌ها */
  --sh-sm:0 2px 8px rgba(0,0,0,.4); --sh:0 4px 14px rgba(0,0,0,.4); --sh-md:0 12px 34px rgba(0,0,0,.45);
  --sh-lg:0 16px 42px rgba(0,0,0,.5); --sh-xl:0 24px 60px rgba(0,0,0,.55); --sh-blue:0 0 0 0 transparent;
  /* مِشِ پنج‌رنگِ «شبِ شهر» (بنفش/آبی/صورتی) برداشته شد؛ مصرف‌کننده‌های باقی‌مانده
     یک نورِ خنثیِ ملایم می‌گیرند. */
  --mesh:radial-gradient(70% 60% at 50% 0%,#1C1C1E 0%,transparent 72%);
}
/* ═══════════ تمِ روشن ═══════════ */
[data-theme="light"]{
  color-scheme: light; /* رجوع به توضیحِ همینِ تگ در بلوکِ [data-theme="dark"] */
  --bg:#F5F5F7; --white:#FFFFFF;
  /* --t3 در تمِ روشن ۲٫۶۷:۱ بود (اندازه‌گیری‌شده روی .hcard-meta، .event-desc و
     برچسبِ .botnav-item) — زیرِ آستانه‌ی ۴٫۵ در WCAG 1.4.3 AA. همان رنگ‌مایه با
     ۷۳٪ روشنایی: حالا ۴٫۶۰:۱ روی زمینه‌ی صفحه و ۵٫۴۷:۱ روی کارتِ سفید.
     تمِ تاریک دست نخورد چون از قبل ۵٫۹۳:۱ بود. */
  /* ۰۹-۱۳: خاکستریِ خنثیِ اپل به‌جای یاسی. t2 و t3 روی #F5F5F7 هر دو ≥ ۴٫۶:۱ (سنجیده). */
  --t1:#1D1D1F; --t2:#5E5E63; --t3:#646469;
  --s-50:#FAFAFA; --s-100:#F2F2F4; --s-200:#E8E8ED; --s-300:#D2D2D7;
  --s-400:#8E8E93; --s-500:#5E5E63; --s-600:#48484A; --s-700:#2C2C2E; --s-900:#1D1D1F;
  --on-s-900:#FFFFFF;   /* رجوع به توضیحِ همین توکن در بلوکِ تمِ تیره */
  --border:rgba(0,0,0,.08); --border-strong:rgba(0,0,0,.14);
  --glass:rgba(255,255,255,.6); --glass-2:rgba(255,255,255,.78); --glass-edge:rgba(255,255,255,.92); --glass-hi:rgba(255,255,255,.95);
  --card:#FFFFFF; --card-solid:#FFFFFF;
  --sh-sm:0 2px 8px rgba(0,0,0,.05); --sh:0 4px 14px rgba(0,0,0,.06); --sh-md:0 12px 30px rgba(0,0,0,.08);
  --sh-lg:0 16px 40px rgba(0,0,0,.1); --sh-xl:0 24px 56px rgba(0,0,0,.12); --sh-blue:0 0 0 0 transparent;
  --mesh:radial-gradient(70% 60% at 50% 0%,#FFFFFF 0%,transparent 72%);
}
/* کلاس‌های شیشه و حرکت (قابل‌استفاده در کل اپ) */
.glass{position:relative;background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%);border:1px solid var(--border);box-shadow:var(--sh-md)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(140deg,var(--glass-hi),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* DS-008: reveal کوتاه و بی‌فنر. نسخه‌ی قبل ۵۵۰ms با overshootِ spring و scale(.97)
   بود — کارت «می‌پرید» داخل. تیک‌تاک/اینستاگرام کارت را نمی‌پرانند؛ ۳۲۰ms ease-out،
   فقط ۱۴px بالا، بدونِ مقیاس. روی مرورگرهای با animation-timeline، فیدِ کشف به‌جای
   این از حرکتِ اسکرول‌محورِ foundation استفاده می‌کند (پایین‌تر). */
.reveal{opacity:0;transform:translateY(14px);transition:opacity var(--motion-slow,320ms) var(--ease-out),transform var(--motion-slow,320ms) var(--ease-out)}
.reveal.in{opacity:1;transform:none}
/* ─── بنر نصب اپ (PWA) ─── */
.install-banner{position:fixed;bottom:16px;left:16px;right:16px;max-width:448px;margin:0 auto;z-index:200;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-xl);background:var(--glass-2);opacity:0;transform:translateY(20px);transition:opacity .3s var(--ease),transform .3s var(--spring)}
.install-banner.in{opacity:1;transform:none}
.ib-icon{font-size:32px;flex-shrink:0}
.ib-txt{flex:1;min-width:0}
.ib-title{font-size:14px;font-weight:800;color:var(--t1)}
.ib-sub{font-size:12px;color:var(--t3);margin-top:1px}
.ib-btn{flex-shrink:0;background:var(--grad);color:#fff;border:none;font-family:inherit;font-size:13px;font-weight:800;padding:9px 18px;border-radius:100px;cursor:pointer;transition:transform .15s var(--spring)}
.ib-btn:active{transform:scale(.94)}
.ib-close{flex-shrink:0;background:var(--s-100);color:var(--t3);border:none;width:28px;height:28px;border-radius:50%;font-size:12px;cursor:pointer}
/* دکمه‌ی شناورِ تغییر تم */
.theme-fab{position:fixed;top:calc(64px + env(safe-area-inset-top,0px));left:16px;z-index:110;width:46px;height:46px;border-radius:15px;cursor:pointer;
  display:grid;place-items:center;font-size:19px;color:var(--t1);border-radius:15px;transition:transform .2s var(--spring)}
.theme-fab:active{transform:scale(.88)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}*{animation:none!important}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* DS-008 (۲۰۲۶-۰۹-۱۰): مشِ پنج‌رنگِ radial با attachment:fixed برداشته شد.
   دو دلیل، هر دو خواسته‌ی مالک: (۱) «مینیمال» — پس‌زمینه با کارت‌ها رقابت
   می‌کرد؛ در تیک‌تاک/اینستاگرام محتوا رنگ است، نه صفحه. (۲) «اسکرولِ زنده» —
   background-attachment:fixed روی گرادیانِ چندتوقفی یعنی هر فریمِ اسکرول کلِ
   viewport دوباره رنگ می‌شود؛ یکی از شناخته‌شده‌ترین علت‌های افتِ فریم روی
   موبایل. اندازه‌گیریِ قبل/بعد در DS-008. --mesh خودش حذف نشد (theme.css و
   کارت‌های مناسبت ممکن است بخواهندش)؛ فقط از body برداشته شد. */
body{font-family:var(--font-ui);background:var(--bg);color:var(--t1);
  font-size:15px;line-height:1.6;min-height:100vh;min-height:100svh;overflow-x:hidden;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;transition:color .35s var(--ease)}
button,input,select,textarea{font-family:inherit;font-size:inherit}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--s-300);border-radius:8px}
::selection{background:var(--blue-100)}
.page{display:none}.page.active{display:block;animation:pageIn .35s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes pop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ─────────── BUTTONS ─────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;cursor:pointer;
  font-weight:600;border-radius:var(--r-sm);transition:all var(--t) var(--ease);white-space:nowrap;
  padding:11px 20px;font-size:14px;min-height:44px;letter-spacing:-.01em}
/* ─── حس لمسی: بازخورد فشردن روی موبایل ─── */
.btn:active{transform:scale(.97)}
.rc:active{transform:scale(.985)}
.icon-btn:active,.rp-hero-icon:active,.rp-hero-back:active{transform:scale(.92)}
.menu-item:active,.review:active{transform:scale(.99)}
.rp-bookbar-btn:active{transform:scale(.96)}
@media(hover:hover){
  .menu-item{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
  .menu-item:hover{transform:translateY(-1px);box-shadow:var(--sh-sm)}
}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--sh-sm)}
.btn-primary:hover{background:var(--blue-600);box-shadow:var(--sh-blue);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-600);transform:translateY(-1px)}
.btn-ghost{background:var(--white);color:var(--t1);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border-strong);background:var(--s-50)}
/* ⚠️ باگِ واقعی (۱٫۰۹:۱ — اندازه‌گیری‌شده ۲۰۲۶-۰۸-۲۴): `.btn-ghost` در تمِ تیره
   `background:var(--white)` را می‌گیرد که آنجا `rgba(255,255,255,.07)` است،
   و `color:var(--t1)` که سفید است. روی سطحِ **تینتِ روشنِ ثابت** (نوارِ پیشنهادِ
   هوشمند / کارتِ نقد) این یعنی سفیدِ نیمه‌شفاف روی روشن با متنِ سفید — دکمه‌ی
   «ببین» عملاً نامرئی بود، نه فقط کم‌کنتراست. این سطح‌ها تم را دنبال نمی‌کنند،
   پس دکمه‌ی داخلشان هم نباید توکنِ تم‌آگاه بگیرد. */
.ai-strip .btn-ghost,.ai-review .btn-ghost{background:#fff;color:var(--on-tint);border-color:rgba(22,15,38,.14)}
.ai-strip .btn-ghost:hover,.ai-review .btn-ghost:hover{background:#F4F1FC;border-color:rgba(22,15,38,.24)}
.btn-lg{padding:14px 26px;font-size:15px;min-height:50px;border-radius:var(--r)}
.btn-block{width:100%}
.btn-sm{padding:8px 14px;min-height:var(--touch-min);font-size:13px;border-radius:var(--r-xs)}

/* ─────────── NAV (top, desktop) ─────────── */
/* ⚠️ رفع‌شده (حسابرسیِ دیزاینِ Desire، ۲۰۲۶-۰۸-۱۴): پس‌زمینه قبلاً همیشه
   rgba(255,255,255,..) هاردکد بود — یعنی در تمِ تاریک (پیش‌فرضِ نسل‌Z، طبقِ
   کامنتِ بالایِ همین فایل) یک نوارِ روشنِ نامتجانس روی هدر می‌نشست. حالا از
   --glass-2 (که هر دو تم را دارد) استفاده می‌کند — دقیقاً همون توکنی که
   .install-banner/.cmdk/.onb-card از قبل برایِ سطوحِ شیشه‌ایِ روی محتوا دارن. */
.nav{position:sticky;top:0;z-index:100;background:var(--glass-2);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:62px}
.logo{display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:800;font-size:19px;letter-spacing:-.04em}
.logo-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--teal));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;box-shadow:var(--sh-sm)}
.logo b{background:linear-gradient(135deg,var(--blue),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{padding:8px 14px;border-radius:var(--r-xs);color:var(--t2);font-weight:600;font-size:14px;cursor:pointer;transition:all var(--t-fast);background:none;border:none}
.nav-link:hover{color:var(--t1);background:var(--s-100)}
.nav-link.active{color:var(--blue);background:var(--blue-50)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-pts{display:flex;align-items:center;gap:6px;padding:7px 13px;background:var(--teal-50);border:1px solid #CCFBF1;
  border-radius:50px;font-size:13px;font-weight:700;color:var(--teal-600);cursor:pointer;transition:all var(--t-fast)}
.nav-pts:hover{background:#CCFBF1}
.nav-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;cursor:pointer;border:2px solid var(--white);box-shadow:var(--sh)}

/* ─────────── CONTAINER ─────────── */
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.section{padding:28px 0} /* DS-008: ۴۰→۲۸ — هوای بینِ بخش‌ها کمتر، فید پیوسته‌تر */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.section-title{font-size:21px;font-weight:800;letter-spacing:-.03em}
.section-sub{font-size:14px;color:var(--t2);margin-top:2px}
/* ⚠️ [DS-007 §۶] قرصِ زمینه‌ی جست‌وجو — «امروز · ۲ نفر ▾».
   متنش از قبل همین‌جا نوشته می‌شد ولی لمس‌پذیر نبود؛ با رفتنِ هیرو این تنها
   جایی است که کاربر می‌تواند **پیش از زدنِ چیپِ ساعت** تاریخ/تعداد را بگوید.
   ⚠️ **۳۲px نقاشی، ۴۴px هدف.** نسخه‌ی اولِ من ۳۲ بود و در کامنت نوشته بودم
   «تبادلِ آگاهانه زیرِ `--touch-min`». طراح ردش کرد و درست بود: WCAG 2.5.5
   درباره‌ی **هدفِ لمس** است، نه جعبه‌ی رنگ‌شده. یعنی آن «تبادل» از اول لازم
   نبود — من یک محدودیتِ جعلی ساخته بودم و بعد برایش توجیه نوشتم.
   پس `::before` ناحیه‌ی لمس را عمودی به ۴۴ می‌رساند (۳۲ + ۲×۶) بدونِ اینکه
   سطرِ متن بشکند. ⚠️ و اندازه‌گیری باید روی **همان ناحیه** باشد نه روی خودِ
   عنصر، وگرنه عدد ۳۲ می‌دهد و دوباره همان نتیجه‌ی غلط گرفته می‌شود. */
.ctx-pill{position:relative;display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:4px 10px;margin-inline-start:2px;
  font:inherit;color:var(--t1);background:var(--s-50,rgba(0,0,0,.04));border:1px solid var(--border);
  border-radius:999px;cursor:pointer;transition:background var(--t-fast)}
.ctx-pill::before{content:'';position:absolute;inset:-6px 0;border-radius:inherit}
.ctx-pill:hover{background:var(--s-100,rgba(0,0,0,.07))}
.ctx-pill:focus-visible{outline:2px solid var(--blue,#4F8CFF);outline-offset:2px}
.ctx-pill:active{transform:scale(.96)}
@media (prefers-reduced-motion: reduce){ .ctx-pill:active{transform:none} }
.link-more{color:var(--blue);font-weight:600;font-size:14px;cursor:pointer;background:none;border:none;display:flex;align-items:center;gap:4px;transition:gap var(--t-fast)}
.link-more:hover{gap:8px}

/* ─────────── HERO / SEARCH ─────────── */
.hero{padding:54px 0 36px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:760px;height:520px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse,rgba(37,99,235,.07),transparent 62%),radial-gradient(ellipse 50% 60% at 70% 40%,rgba(20,184,166,.06),transparent 60%)}
.hero-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;background:var(--white);border:1px solid var(--border);
  border-radius:50px;font-size:12px;font-weight:600;color:var(--t2);margin-bottom:22px;box-shadow:var(--sh-sm);position:relative;z-index:1}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px var(--teal-50)}
.hero h1{font-size:clamp(34px,6vw,60px);font-weight:800;letter-spacing:-.045em;line-height:1.05;position:relative;z-index:1}
.hero h1 b{background:linear-gradient(120deg,var(--blue),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.hero p{font-size:clamp(15px,2vw,18px);color:var(--t2);max-width:460px;margin:16px auto 0;position:relative;z-index:1}
/* search bar — Airbnb-like pill */
.searchbar{max-width:680px;margin:32px auto 0;background:var(--white);border:1px solid var(--border);border-radius:50px;
  box-shadow:var(--sh-lg);display:flex;align-items:center;padding:7px 7px 7px 7px;position:relative;z-index:1;transition:box-shadow var(--t)}
.searchbar:focus-within{box-shadow:var(--sh-xl)}
.search-field{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:8px 20px;cursor:text;border-radius:50px;transition:background var(--t-fast);min-width:0}
.search-field:hover{background:var(--s-50)}
.search-field+.search-field{border-right:1px solid var(--border)}
.search-field label{font-size:11px;font-weight:700;color:var(--t1);margin-bottom:1px}
/* ورودی ۱۵px بود. تکیه‌کردن به «کلِ .search-field ناحیه‌ی لمس است» کافی نیست:
   معیارِ ۲.۵.۵ خودِ عنصرِ تعاملی را می‌سنجد، و کاربر هم مستقیم به متن می‌زند. */
.search-field input,.search-field select{border:none;outline:none;background:none;font-size:13px;color:var(--t2);width:100%;cursor:pointer;padding:0;
  min-block-size:var(--touch-min);font-family:inherit}
/* ⚠️ اضافه‌شده (R5): placeholder بدونِ رنگِ صریح به opacityِ پیش‌فرضِ
   مرورگر روی رنگِ خودِ ورودی تکیه می‌کند — بینِ مرورگرها ناهمسان و در
   بعضی ترکیب‌ها زیرِ آستانه‌ی خوانایی. رنگش را مستقیم از توکنِ سوم می‌گیریم. */
.search-field input::placeholder{color:var(--t3);opacity:1}
.search-field{justify-content:center}
.search-go{width:48px;height:48px;border-radius:50%;background:var(--blue);border:none;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;transition:all var(--t);box-shadow:var(--sh-blue)}
.search-go:hover{background:var(--blue-600);transform:scale(1.05)}

/* ─────────── VIBE CHIPS ─────────── */
.chips{display:flex;gap:9px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
/* ۳۴px بود. min-block-size به‌جای padding تا ریتمِ عمودیِ ردیف به‌هم نریزد. */
.chip{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;min-block-size:var(--touch-min);background:var(--white);border:1px solid var(--border);
  border-radius:50px;font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all var(--t) var(--ease)}
.chip:hover{border-color:var(--border-strong);color:var(--t1);transform:translateY(-1px);box-shadow:var(--sh-sm)}
.chip.active{background:var(--s-900);border-color:var(--s-900);color:var(--on-s-900)}

/* ─────────── RESTAURANT CARD ─────────── */
.grid{display:grid;grid-template-columns:1fr;gap:18px}

/* ═══ DS-008: فیدِ کشف — اسکرولِ زنده (۲۰۲۶-۰۹-۱۰) ═══
   سه چیز، همه CSS، هیچ تغییری در مارک‌آپ/JS:
   ۱) snapِ نرم روی کارت: html وقتی صفحه‌ی کشف فعال است scroll-snap-type:y proximity
      می‌گیرد. proximity نه mandatory — اینستاگرام اسکرول را نمی‌دزدد، فقط اگر نزدیکِ
      یک کارت ایستادی رویش «می‌نشیند». تیک‌تاک mandatory است ولی برای فیدِ رزرو
      (کارت‌های ۲۷۰px، نه تمام‌صفحه) mandatory هر فلیک را یک کارت می‌کند و کلافه‌کننده
      می‌شود. scroll-padding-top = ارتفاعِ navِ چسبان + نفس.
   ۲) حرکتِ اسکرول‌محور (foundation.css، .ds-scroll-live): کارت هنگامِ ورود می‌نشیند و
      پس‌زمینه‌اش پارالاکسِ ملایم دارد. #feed خودش کانتینر است؛ .rc-bg پس‌زمینه.
      چون کلاس در مارک‌آپ نیست، همان قواعد اینجا روی #feed تکرار می‌شود — منبعِ
      keyframes همچنان foundation است (یک تعریف).
   ۳) روی مرورگرِ بدونِ animation-timeline، .reveal (بالا) همچنان کار می‌کند؛ روی
      مرورگرِ با آن، هر دو فعال‌اند و تداخل ندارند (reveal روی .rc، drift روی .rc-bg،
      settle روی opacity/translate که reveal.in به none برمی‌گرداند — انیمیشن بعد از
      transition اعمال می‌شود و برنده است، پس عملاً settle حرف می‌زند). */
/* ⚠️ بازتصمیمِ DS-011 (۲۰۲۶-۰۹-۱۲) — فید موزاییکِ Explore شد و تایل‌ها **همچنان کلاسِ
   rc دارند**، پس انتخابگرهای DS-008 بی‌صدا از کار نمی‌افتند؛ هر سه صریحاً تصمیم
   گرفته شدند، نه رها (این مخزن برای «انتخابگری که بی‌صدا مچ نکرد» زخم دارد):
   ۱) snapِ صفحه‌ای: **خاموش**. Explore snap نمی‌کند؛ snap کردنِ گریدِ ۳تایی به مرزِ
      ردیف با کاربر می‌جنگد. snap فقط در نمای تمام‌صفحه (.im-feed، mandatory) زندگی
      می‌کند — جایی که یک آیتم صاحبِ viewport است و کلِ معنایِ آن نما همین است.
      scroll-padding-top می‌ماند: scrollIntoView (مناسبت‌ها) زیرِ navِ چسبان نمی‌رود.
   ۲) settle-inِ اسکرول‌محور رویِ تایل: **می‌ماند** — همان #feed>.rc، همان keyframes.
   ۳) پارالاکسِ پس‌زمینه (.rc-bg) رویِ تایل: **خاموش** — رویِ تایلِ ۱۳۰px فقط هزینه‌ی
      paint است و دیده نمی‌شود؛ به نمای تمام‌صفحه (.im-bg، رسانه‌ی لبه‌به‌لبه) رفت.
   reduced-motion: صریحاً animation:none — صفرکردنِ سراسریِ مدت، انیمیشنِ timeline‌محور
   را خاموش نمی‌کند (DS-008 همین را اندازه گرفت). */
html:has(#page-discover.active){scroll-padding-top:74px}
#feed>.rc{scroll-margin-top:12px}
@supports (animation-timeline: view()){
  #feed>.rc{animation:ds-settle-in linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
}
@media (prefers-reduced-motion: reduce){
  #feed>.rc,#feed>.rc .rc-bg{animation:none!important}
}
/* ═══ DS-011 (۲۰۲۶-۰۹-۱۲): کشف = Explore — موزاییکِ ۳ستونه، هر هفتمی ۲×۲ ═══
   اندازه‌گیریِ پیش از این در ۳۹۰×۸۴۴: کارتِ ۲۷۰px تمام‌عرض → ۲ رستوران در هر صفحه.
   تایل کلاسِ rc را نگه می‌دارد (گیتِ CIِ DS-007 و e2e با #feed .rc می‌شمارند)، پس
   قواعدِ کارتِ قدیمی که به تایل نمی‌خورند (ارتفاعِ ۲۷۰، شعاعِ ۲۶، لیفتِ hover) همین‌جا
   صریحاً خنثی می‌شوند. رنگ‌های رویِ تصویر (متن/اسکریم) از تم مستقل‌اند — عکس عکس
   است — و به‌صورتِ توکنِ محلی تعریف شده‌اند تا یک‌جا عوض شوند. */
/* ⚠️ لبه‌به‌لبه بودن از خودِ ظرف می‌آید: `.section{padding:28px 0}` (پایین‌تر در cascade،
   shorthand) پدینگِ افقیِ `.wrap.section` را صفر می‌کند — محاسبه‌شده‌اش در ۳۹۰px صفر
   است (اندازه‌گیری‌شده). نسخه‌ی اولِ این قاعده یک margin-inline منفی هم می‌داد و
   گرید ۴۳۰px می‌شد: در RTL سرریزِ چپ، viewportِ چیدمان را به ۴۱۰ باز می‌کرد و کلِ
   صفحه ۲۰px جابه‌جا می‌شد. با اندازه‌گیری گرفته شد، نه با نگاه به اسکرین‌شات. */
/* ۰۹-۱۳: همیشه ۳ ستون. با ۴ و ۵ ستون، شش رستوران (یک ۲×۲ + پنج) در دسکتاپ یک خانه‌ی
   خالی می‌گذاشت (اسکرین‌شاتِ ۱۴۴۰px)؛ ۴+۵=۹ فقط در ۳ ستون مستطیلِ کامل است. اکسپلورِ
   اینستاگرام روی وب هم ۳ستونه است و عرضش را محدود می‌کند — پایین‌تر، #page-discover. */
.xgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:row dense;gap:calc(var(--sp-1) / 2);
  --xt-ink:rgba(255,255,255,.96);--xt-ink-2:rgba(255,255,255,.82);--xt-scrim:rgba(0,0,0,.66)}
.xgrid>.xt{position:relative;display:block;height:auto;aspect-ratio:1;overflow:hidden;border-radius:0;cursor:pointer;background:var(--s-100);transition:none}
.xgrid>.xt.xt-hero{grid-column:span 2;grid-row:span 2}
.xgrid>.xt:hover{transform:none;box-shadow:none}
.xgrid>.xt:active{transform:scale(.985)}
.xgrid>.feed-more{margin-block-start:var(--sp-3)}
#feed.xgrid>.rc .rc-bg{animation:none;transition:none}
.xt-photo,.im-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--motion-slow) var(--ease-out)}
.xt-photo.in,.im-photo.in{opacity:1}
/* ۰۹-۱۳: نامِ غذا (اولین بخشِ cuisine) با وزنِ ۹۰۰ به‌جای ایموجیِ کم‌رنگ. ایموجی روی هر
   سیستم‌عامل شکلِ دیگری دارد و روی ویندوز تخت و کارتونی دیده شد؛ واژه همه‌جا یکی است و
   همان زبانِ کاشی‌های لندینگ است. اندازه از طولِ واژه (--len) می‌آید و به عرضِ خودِ کاشی
   (cqi) بسته است، پس در کاشیِ ۲×۲ خودبه‌خود دو برابر می‌شود و هیچ واژه‌ای بریده نمی‌شود.
   ⚠️ واژه **داخلِ** `.rc-bg` است نه کنارش: ممیزیِ کنتراست پس‌زمینه را از جدِ DOM می‌خواند؛
   کنارِ لایه‌ی گرادیان، زمینه‌ی خاکستریِ خودِ کاشی دیده می‌شد و سفید روی آن ۱٫۱۱:۱ گزارش
   می‌شد (e2e، ۰۹-۱۳). داخلش، با ایستگاه‌های واقعیِ گرادیان سنجیده می‌شود. عکس هم در
   همان لایه append می‌شود و `.has-photo` واژه را پنهان می‌کند. */
.xgrid>.xt{container-type:inline-size}
.xt-word{position:absolute;z-index:1;inset-inline:var(--sp-2);inset-block-start:34%;translate:0 -50%;pointer-events:none;white-space:nowrap;
  font-size:min(24cqi,calc(96cqi / var(--len,4)));font-weight:var(--weight-display);line-height:var(--lh-tight);letter-spacing:var(--ls-normal);color:var(--xt-ink);text-shadow:0 2px 18px rgba(0,0,0,.22)}
.xt-hero .xt-word{inset-block-start:38%}
.has-photo .xt-word,.has-photo .im-word{display:none}
/* دکمه‌ی کشیده: کلِ تایل یک دکمه‌ی واقعی است (فوکوسِ کیبورد، :focus-visible). زیرِ
   قلبِ هیرو (۴) و بالای پس‌زمینه؛ کپشن (۳) pointer-events ندارد و لمس به دکمه می‌رسد. */
.xt-tap{position:absolute;inset:0;z-index:2;border:none;background:none;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.xt-tap:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.xt-cap{position:absolute;inset-inline:0;inset-block-end:0;z-index:3;pointer-events:none;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1);
  padding:var(--sp-6) var(--sp-2) var(--sp-2);background:linear-gradient(to top,var(--xt-scrim),transparent);color:var(--xt-ink)}
.xt-hero .xt-cap{padding:var(--sp-10) var(--sp-3) var(--sp-3)}
.xt-name{font-size:var(--fs-sm);font-weight:var(--weight-emphasis);line-height:var(--lh-snug);letter-spacing:var(--ls-snug);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xt-hero .xt-name{font-size:var(--fs-xl);font-weight:var(--weight-display);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
.xt-row{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.xt-hero .xt-row{flex-wrap:wrap;row-gap:var(--sp-1)}
.xt-hero .rc-meta{flex-basis:100%}   /* سطرِ خودش، وگرنه «۸٪ کش‌بک» پشتِ امتیاز و چیپ بریده می‌شد (دیده‌شده در رندر) */
.xt .rc-rating{font-size:var(--fs-xs);gap:2px}
.xt .rc-rating-new{font-size:var(--fs-2xs)}
.xt .rc-meta{font-size:var(--fs-xs);margin-top:0;color:var(--xt-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.xt-social{font-size:var(--fs-2xs);color:var(--xt-ink-2)}
.xt-social b{color:var(--xt-ink)}
.xt .rc-fav{z-index:4}
.xt-badge{position:absolute;inset-block-start:var(--sp-2);inset-inline-start:var(--sp-2);z-index:3;pointer-events:none;display:inline-flex;align-items:center;gap:2px;
  font-size:var(--fs-2xs);font-weight:var(--weight-display);color:var(--xt-ink);padding:2px var(--sp-2);border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--warning),var(--danger))}
.xt-badge.ai{background:var(--grad)}
.xt-sk{background:var(--s-100)}

/* ═══ DS-011: نمای تمام‌صفحه (immersive) — یک رستوران، یک صفحه؛ snapِ mandatory ═══
   z-index ۱۱۰: بالای nav (۱۰۰) و botnav (۹۰)، زیرِ undo-snack (۱۲۰)، شیتِ رزرو (۲۰۰) و
   toast (۳۰۰) — رزرو از داخلِ همین نما باز می‌شود و باید رویش بنشیند.
   پس‌زمینه از تم مستقل است (تیک‌تاک در هر دو تم سیاه است). RTL: فقط inset-inline-*. */
#page-immersive{position:fixed;inset:0;z-index:110;--im-bg:rgb(0,0,0);--xt-ink:rgba(255,255,255,.96);--xt-ink-2:rgba(255,255,255,.8);
  background:var(--im-bg);color:var(--xt-ink)}
.im-feed{position:relative;height:100vh;height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.im-feed::-webkit-scrollbar{display:none}
.im-item{position:relative;height:100vh;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;outline:none}
.im-item:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.im-bg{position:absolute;inset:0;z-index:0}
/* ── پرکردنِ صادقانه‌ی میانه‌ی صفحه وقتی عکسی نیست (حالتِ رایج: فهرستِ عمومی فیلدِ تصویر
   ندارد) — فقط دادهٔ واقعیِ همین رکورد: ایموجیِ هویت، vibeها، تا سه قلمِ واقعیِ منو
   (اگر جزئیات رسیده)، نشانی/فاصله (فقط اگر واقعاً می‌دانیم)، و در پنلِ پایین همان
   اثباتِ اجتماعیِ کارت. هر بلوکِ بی‌داده اصلاً نیست — نه صفر، نه «—»، نه اسکلت.
   با آمدنِ عکس کلِ این لایه کنار می‌رود: عکس خودش محتواست. رنگِ زمینه‌ی چیپ/کارت تیره
   است نه سفیدِ شیشه‌ای، چون رویِ روشن‌ترین گرادیانِ پالت متنِ سفید باید خوانا بماند. */
.im-fill{position:absolute;inset-inline:0;inset-block-start:calc(var(--touch-min) + var(--sp-8) + env(safe-area-inset-top,0px));inset-block-end:40%;z-index:3;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--sp-3);padding:0 var(--sp-6);pointer-events:none;text-align:center;overflow:hidden}
.has-photo .im-fill{display:none}
.im-word{max-width:100%;white-space:nowrap;font-size:clamp(var(--fs-4xl),calc(78vw / var(--len,4)),calc(var(--fs-4xl) * 2.6));font-weight:var(--weight-display);line-height:var(--lh-tight);letter-spacing:var(--ls-normal);color:var(--xt-ink);text-shadow:0 4px 30px rgba(0,0,0,.25)}
.im-vibes{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2)}
.im-vibes:empty{display:none}
.im-vibe{font-size:var(--fs-xs);font-weight:var(--weight-emphasis);color:var(--xt-ink);padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-pill);
  background:rgba(8,6,20,.4);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.im-menu{width:100%;max-width:320px;text-align:start;padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-surface);background:rgba(8,6,20,.48);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.im-item:not(.im-has-menu) .im-menu{display:none}
.im-menu-h{font-size:var(--fs-2xs);font-weight:var(--weight-emphasis);color:var(--xt-ink-2);margin-block-end:var(--sp-2)}
.im-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.im-menu-item{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--xt-ink)}
.im-menu-e{font-size:var(--fs-lg);line-height:1;flex:none}
.im-menu-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--weight-emphasis)}
.im-menu-p{flex:none;font-size:var(--fs-xs);color:var(--xt-ink-2);font-variant-numeric:tabular-nums}
.im-addr{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);color:var(--xt-ink);padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-pill);background:rgba(8,6,20,.4)}
.im-item:not(.im-has-addr) .im-addr{display:none}
.im-item .rc-social{margin-top:0}
.im-item:not(.im-has-social) .im-social{display:none}
.im-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(8,6,20,.94) 0%,rgba(8,6,20,.6) 34%,transparent 62%),linear-gradient(to bottom,rgba(8,6,20,.55),transparent 24%)}
.im-info{position:absolute;inset-inline-start:0;inset-inline-end:calc(var(--touch-min) + var(--sp-6));inset-block-end:0;z-index:3;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom,0px))}
.im-info .xt-badge{position:static}
.im-name{font-size:var(--fs-2xl);font-weight:var(--weight-display);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);margin:0}
.im-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:var(--weight-emphasis);color:var(--xt-ink-2)}
.im-line .rc-rating{font-size:var(--fs-sm)}
.im-meta:empty,.im-social:empty{display:none}
.im-social{font-size:var(--fs-xs);color:var(--xt-ink-2)}
.im-item:not(.im-demo) .demo-chip{display:none}
.im-item:not(.im-hot) .im-hotbadge{display:none}
.im-item.im-no-cb .im-cb{display:none}
.im-item .rc-slots{flex-wrap:wrap;margin-top:var(--sp-1)}
.im-open{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--touch-min);padding:0 var(--sp-4);margin-top:var(--sp-1);cursor:pointer;
  border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.14);color:var(--xt-ink);font-family:inherit;font-size:var(--fs-sm);font-weight:var(--weight-emphasis);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.im-open:focus-visible,.im-rail-btn:focus-visible,.im-close:focus-visible,.im-rail .rc-fav:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.im-rail{position:absolute;inset-inline-end:var(--sp-3);inset-block-end:calc(var(--sp-16) + var(--sp-8) + env(safe-area-inset-bottom,0px));z-index:4;display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
.im-rail .rc-fav{position:static;background:rgba(0,0,0,.38)}
.im-rail-btn,.im-close{width:var(--touch-min);height:var(--touch-min);border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;color:var(--xt-ink);background:rgba(0,0,0,.38);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.im-close{position:absolute;inset-block-start:calc(var(--sp-3) + env(safe-area-inset-top,0px));inset-inline-start:var(--sp-3);z-index:5}
.im-count{position:absolute;inset-block-start:calc(var(--sp-3) + env(safe-area-inset-top,0px));inset-inline-end:var(--sp-4);z-index:5;pointer-events:none;
  font-size:var(--fs-xs);font-weight:var(--weight-emphasis);font-variant-numeric:tabular-nums;color:var(--xt-ink-2);padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-pill);background:rgba(0,0,0,.35)}
.im-count:empty{display:none}
/* پارالاکسِ DS-008 اینجا زندگی می‌کند (رسانه‌ی تمام‌صفحه)؛ اسکرولر همان .im-feed است. */
@supports (animation-timeline: view()){
  .im-feed .im-bg{animation:ds-bg-drift linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
}
@media (prefers-reduced-motion: reduce){
  .im-feed .im-bg{animation:none!important}   /* صریح: صفرکردنِ مدت، timeline را خاموش نمی‌کند */
  .xt-photo,.im-photo{transition:none}
}
/* دکمه‌ی «رستوران‌های بیشتر» فرزندِ مستقیمِ #feed است؛ باید کلِ عرضِ گرید را
   بگیرد نه یک سلول را. min-height برای هدفِ لمسیِ ≥۴۴px. */
.feed-more{grid-column:1/-1;min-height:48px}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr;gap:20px}}
@media(min-width:1000px){.grid{grid-template-columns:1fr 1fr 1fr}}
/* کارت رستوران — سینمایی با پنلِ شیشه‌ی شناور */
.rc{position:relative;border-radius:26px;overflow:hidden;cursor:pointer;height:270px;display:flex;flex-direction:column;
  justify-content:flex-end;transition:transform .3s var(--spring),box-shadow .3s var(--ease)}
.rc:hover{transform:translateY(-5px);box-shadow:var(--sh-xl)}
.rc:active{transform:scale(.99)}
.rc-bg{position:absolute;inset:0;z-index:0;transition:transform .6s var(--ease)}
.rc:hover .rc-bg{transform:scale(1.06)}
/* دکمه‌ی کشیده: کلِ کارت را کلیک‌پذیر و — مهم‌تر — با کیبورد قابلِ فوکوس می‌کند.
   z-index 1 یعنی زیرِ پنل (۲) و دکمه‌ی علاقه (۳) می‌ماند، پس چیپ‌های ساعت و
   دکمه‌ی قلب همچنان کلیکِ خودشان را می‌گیرند. */
.rc-open{position:absolute;inset:0;z-index:1;border:none;background:none;padding:0;cursor:pointer;
  border-radius:inherit;-webkit-appearance:none;appearance:none}
.rc-open:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.rc:has(.rc-open:hover) .rc-bg{transform:scale(1.06)}
/* پنل روی .rc-open می‌نشیند (z-index 2)، پس بدونِ این، کلیک روی نامِ رستوران —
   طبیعی‌ترین جای لمس — به هیچ‌جا نمی‌رسید. متنِ پنل تعاملی نیست، فقط چیپ‌های
   ساعت هستند؛ همان‌ها کلیک را پس می‌گیرند و بقیه به دکمه‌ی زیر می‌افتد. */
.rc-panel,.rc-emoji{pointer-events:none}
.rc-slots,.rc-slot{pointer-events:auto}
.rc-emoji{position:absolute;top:16px;right:18px;z-index:3;font-size:46px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));
  transition:transform .3s var(--spring)}
.rc:hover .rc-emoji{transform:scale(1.12) rotate(6deg)}
.rc-fav{position:absolute;top:var(--sp-3);inset-inline-end:var(--sp-3);width:var(--touch-min);height:var(--touch-min);border-radius:50%;background:rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;cursor:pointer;display:grid;place-items:center;
  color:#fff;z-index:3;transition:transform var(--motion-base) var(--ease-spring)}
.rc-fav:active{transform:scale(.88)}
.rc-fav[aria-pressed="true"]{color:#FF4B7A}
/* --grad-warm (#FF9A3B→#FF4B7A) با متنِ سفید ۲٫۱۱:۱ می‌داد — نشانی که کارِ
   اصلی‌اش خوانده‌شدن است. همان دو رنگ‌مایه، اشباع‌شده و تیره‌تر: ۵٫۱۸:۱.
   هاله‌ی رنگیِ اصلی در box-shadow می‌ماند تا گرمای بصری حفظ شود. */
.rc-hotbadge{position:absolute;top:var(--sp-5);inset-inline-end:calc(var(--touch-min) + var(--sp-5));z-index:3;font-size:var(--fs-2xs);font-weight:800;color:#fff;padding:var(--sp-1) var(--sp-3);
  border-radius:var(--radius-full);display:flex;align-items:center;gap:var(--sp-1);background:linear-gradient(135deg,#C2410C,#BE185D);box-shadow:0 6px 16px rgba(255,75,122,.5)}
.rc-hotbadge.ai{background:var(--grad);inset-inline-end:var(--sp-3)}
/* صداقتِ داده: چیپِ کوچکِ «نمونه» برایِ رستوران/رزروِ نمونه (نه دادهٔ واقعیِ سرور) */
.demo-chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xs);font-weight:800;padding:2px var(--sp-2);border-radius:var(--radius-full);background:var(--warning-soft);color:var(--warning-ink);border:1px solid rgba(194,65,12,.25);white-space:nowrap;flex:none}
/* پنلِ شیشه‌ی شناور پایینِ کارت
   آلفای اسکریم عددی انتخاب شده، نه چشمی: با ۰٫۳۸ متنِ .rc-meta و .rc-slot روی
   روشن‌ترین گرادیانِ پالت به ۱٫۳۲:۱ می‌رسید (نمونه‌برداریِ پیکسلی از رندرِ واقعی).
   آلفا روی همه‌ی شش گرادیان و شش رنگِ متن حل شد؛ ۰٫۶۶ کمینه‌ای است که همه‌ی
   متن‌ها را با حاشیه‌ی امن بالای آستانه‌ی خودشان می‌برد (ضعیف‌ترین ۱٫۳۲× آستانه).
   backdrop-filter تضمینی نیست (بهینه‌سازِ CSS نسخه‌ی استاندارد را حذف می‌کند)،
   پس خوانایی نباید به بلور تکیه کند — همین آلفا به‌تنهایی کافی است. */
.rc-panel{position:relative;z-index:2;margin:0 12px 12px;border-radius:20px;padding:15px 16px;overflow:hidden;isolation:isolate;
  background:rgba(14,10,26,.66);-webkit-backdrop-filter:blur(22px) saturate(200%);backdrop-filter:blur(22px) saturate(200%);
  border:1px solid rgba(255,255,255,.15);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.rc-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.5),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.rc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.rc-name{font-size:21px;font-weight:900;letter-spacing:-.03em;color:#fff;line-height:1.05}
.rc-rating{display:flex;align-items:center;gap:3px;font-size:14px;font-weight:800;flex-shrink:0;color:#fff}
.rc-rating .star{color:#FFD24B}
/* رستورانِ بدونِ نظر: ادعایِ امتیاز نمی‌کنیم، ولی جایِ بصری هم خالی نمی‌ماند. */
.rc-rating-new{font-size:11px;font-weight:700;opacity:.85}
.rc-meta{font-size:12.5px;color:#e2dcf5;margin-top:6px;font-weight:600}
.rc-cb{color:#FFD24B}
.rc-social{display:flex;align-items:center;gap:8px;margin-top:11px}
.rc-avas{display:flex}
.rc-avas span{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.25);margin-right:-7px;
  display:grid;place-items:center;font-size:10px;background:rgba(255,255,255,.16)}
.rc-social-t{font-size:12px;color:#dcd6f2;font-weight:600}.rc-social-t b{color:#fff}
.rc-slots{display:flex;gap:8px;margin-top:13px}
/* چیپِ ساعت = CTAِ تبدیل. اندازه‌گیری شده بود ۶۳×۴۰px — زیرِ حداقلِ ۴۴px.
   min-block-size به‌جای padding بزرگ می‌کند تا فاصله‌های داخلی به‌هم نریزد. */
.rc-slot{padding:9px 14px;min-block-size:var(--touch-min);border-radius:13px;font-size:13px;font-weight:700;color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);
  transition:transform .16s var(--spring);font-family:inherit}
.rc-slot:active{transform:scale(.88)}
.rc-slot.go{background:var(--grad-cta);border:none;box-shadow:0 8px 20px rgba(106,75,255,.5)}

/* ── لیست انتظار ── */
.wl-benefits{display:flex;flex-direction:column;gap:10px;margin-top:8px;text-align:right}
.wl-benefit{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--t2);background:var(--s-50);padding:11px 14px;border-radius:12px}
.wl-benefit span{font-size:18px}
.wl-position-ring{width:130px;height:130px;border-radius:50%;background:conic-gradient(var(--blue) 0deg 90deg,var(--s-200) 90deg 360deg);display:flex;align-items:center;justify-content:center;margin:0 auto;position:relative}
.wl-position-ring::before{content:'';position:absolute;inset:10px;background:var(--white);border-radius:50%}
.wl-pos-num{font-size:42px;font-weight:800;color:var(--blue);position:relative;line-height:1}
.wl-pos-label{font-size:11px;color:var(--t3);position:relative;margin-top:2px}
.wl-eta{display:inline-flex;align-items:center;gap:7px;background:var(--blue-50);color:var(--blue);padding:9px 16px;border-radius:50px;font-size:13.5px;font-weight:700;margin-top:14px}
.wl-vip-badge{display:inline-block;background:linear-gradient(135deg,#FbBF24,#F59E0B);color:#fff;padding:6px 16px;border-radius:50px;font-size:12.5px;font-weight:800;margin-top:10px}
.wl-hint{font-size:12.5px;color:var(--t3);margin-top:14px;line-height:1.7}
.wl-offer-banner{background:linear-gradient(135deg,#22C55E,#16A34A);border-radius:20px;padding:24px 20px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 8px 24px rgba(22,163,74,.3)}
.wl-timer{font-size:38px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:2px;margin:8px 0 2px}
.btn-danger-ghost{background:transparent;color:var(--red);border:1px solid #FECACA}
.btn-danger-ghost:active{transform:scale(.97)}

/* ── نزدیک/ترند (اسکرول افقی) ── */
.hscroll{display:flex;gap:14px;overflow-x:auto;padding:4px 0 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.hscroll::-webkit-scrollbar{display:none}
.hcard{flex:0 0 160px;scroll-snap-align:start;cursor:pointer}
.hcard-img{height:110px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:44px;position:relative;margin-bottom:8px}
/* ۰۹-۱۳: همان واژه‌ی غذا روی کارتِ افقی (به‌جای ایموجیِ ۴۴px) */
.hcard-img{container-type:inline-size;justify-content:flex-start;align-items:flex-end;overflow:hidden}
.hcard-word{margin:var(--sp-3);white-space:nowrap;font-size:min(22cqi,calc(88cqi / var(--len,4)));font-weight:var(--weight-display);line-height:var(--lh-tight);color:rgba(255,255,255,.96);text-shadow:0 2px 14px rgba(0,0,0,.22)}
.hcard-tag{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:50px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hcard-name{font-size:14px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard-meta{font-size:12px;color:var(--t3);margin-top:2px}
/* ── رویدادهای ویژه ── */
.events-list{display:flex;flex-direction:column;gap:12px}
.event-card{display:flex;align-items:center;gap:14px;background:var(--card,#fff);border:1px solid var(--line,#eee);border-radius:18px;padding:14px;cursor:pointer;transition:all .2s}
.event-card:active{transform:scale(.98)}
.event-emoji{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,#FEF3C7,#FDE68A);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
.event-body{flex:1;min-width:0}
.event-title{font-size:15px;font-weight:700;color:var(--t1)}
.event-rest{font-size:12.5px;color:var(--blue-text);font-weight:600;margin-top:1px}
.event-when{font-size:12.5px;color:var(--t2);margin-top:3px}
.event-desc{font-size:12px;color:var(--t3);margin-top:3px;line-height:1.5}
.event-price{text-align:center;flex-shrink:0;font-size:17px;font-weight:800;color:var(--t1)}
.event-price span{display:block;font-size:10px;font-weight:500;color:var(--t3)}


/* ── کیف پول (Wallet Pass) ── */
.wallet-pass{border-radius:20px;padding:22px;color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.2)}
.wp-apple{background:linear-gradient(135deg,#1f2937,#111827)}
.wp-google{background:linear-gradient(135deg,#1a73e8,#1557b0)}
.wp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.wp-brand{font-size:15px;font-weight:800}
.wp-logo{font-size:20px}
.wp-rest{font-size:22px;font-weight:800;margin-bottom:16px}
.wp-row{display:flex;gap:32px;margin-bottom:18px}
.wp-lbl{font-size:11px;opacity:.7;margin-bottom:3px}
.wp-val{font-size:15px;font-weight:700}
.wp-code{text-align:center;font-size:16px;font-weight:800;letter-spacing:3px;font-family:monospace}
/* ── QR Check-in ── */
.checkin-code{text-align:center;font-size:22px;font-weight:800;letter-spacing:4px;font-family:monospace;color:var(--t1);margin-top:14px}
/* کدِ ورود حالا خودش اعتبارنامه است (QRِ نمایشی حذف شد) — باید از فاصله‌ی
   یک بازوی دست هم خوانده شود. */
.checkin-code-lg{font-size:34px;letter-spacing:6px;margin-top:0;padding:18px 12px;background:var(--s-100);border-radius:16px;border:1px solid var(--border)}
.checkin-hint{text-align:center;font-size:12.5px;color:var(--t3);margin-top:10px;line-height:1.6}


/* ── کارت‌های اکشن باشگاه ── */
.loy-action-card{display:flex;align-items:center;gap:14px;background:var(--card,#fff);border:1px solid var(--line,#eee);border-radius:18px;padding:14px;margin-top:12px;cursor:pointer;transition:all .2s}
.loy-action-card:active{transform:scale(.98)}
.lac-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.lac-body{flex:1}.lac-title{font-size:15px;font-weight:700;color:var(--t1)}.lac-sub{font-size:12.5px;color:var(--t3);margin-top:2px}
.lac-arrow{font-size:22px;color:var(--t3)}
/* ── دعوت دوستان ── */
.ref-code-box{background:var(--blue-50);border:2px dashed var(--blue);border-radius:var(--radius-lg);padding:16px;text-align:center;position:relative}
.ref-code-label{font-size:var(--fs-xs);color:var(--blue-text);margin-bottom:6px}
.ref-code{font-size:var(--fs-2xl);font-weight:800;letter-spacing:3px;color:var(--on-tint);font-family:monospace}
.ref-copy{position:absolute;top:14px;left:14px;background:var(--blue);color:var(--on-brand);border:none;padding:5px 14px;border-radius:var(--radius-xs);font-size:var(--fs-xs);font-weight:700;cursor:pointer;font-family:inherit}
.ref-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.ref-stat{background:var(--s-50,#f8fafc);border-radius:12px;padding:12px;text-align:center}
.ref-stat-v{font-size:20px;font-weight:800;color:var(--t1)}.ref-stat-l{font-size:11px;color:var(--t3);margin-top:2px}
.ref-invite{margin-top:8px}
/* ── کارت هدیه ── */
.gift-amounts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gift-amt{background:var(--s-50,#f8fafc);border:2px solid transparent;border-radius:14px;padding:16px;font-size:20px;font-weight:800;color:var(--t1);cursor:pointer;font-family:inherit;transition:all .15s}
.gift-amt span{display:block;font-size:11px;font-weight:500;color:var(--t3);margin-top:2px}
.gift-amt.sel{border-color:#F59E0B;background:#FFFBEB}
.gift-success-card{background:linear-gradient(135deg,#FBBF24,#F59E0B);color:#fff;border-radius:16px;padding:20px;margin-top:12px}
.gsc-amt{font-size:22px;font-weight:800}.gsc-code{font-size:16px;font-family:monospace;letter-spacing:2px;margin-top:8px;opacity:.95}
.gift-check{border-radius:14px;padding:18px;text-align:center}
.gift-check.valid{background:#F0FDF4;border:1px solid #BBF7D0}.gift-check.invalid{background:#FEF2F2;border:1px solid #FECACA}
.gc-balance{font-size:24px;font-weight:800;color:var(--t1)}.gc-status{font-size:13px;margin-top:6px;color:var(--t2)}
.rd-label{display:block;font-size:13px;font-weight:600;color:var(--t2);margin-bottom:6px}

.gift-custom{margin-top:14px}
.gift-custom-label{display:block;font-size:13px;font-weight:600;color:var(--t2,#64748B);margin-bottom:6px}
/* skeleton */
.sk{background:linear-gradient(90deg,var(--s-100) 25%,var(--s-200) 50%,var(--s-100) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px}
@keyframes shimmer{to{background-position:-200% 0}}
/* اسکلتونِ کارتِ رزرو (C2) — از .sk بازاستفاده می‌کند، بدونِ تکرارِ shimmer */
.sk-trip{border-radius:var(--r,16px);overflow:hidden;margin-bottom:14px;background:var(--card,var(--s-100))}
.sk-trip .sk-hero{height:120px;border-radius:0}
.sk-trip .sk-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.sk-trip .sk-line{height:12px;border-radius:6px}
.sk-trip .sk-line.w80{width:80%}
.sk-trip .sk-line.w55{width:55%}
.sk-trip .sk-line.w40{width:40%}
/* احترام به کاهشِ حرکت (WCAG 2.3.3) — shimmer متوقف می‌شود */
@media (prefers-reduced-motion: reduce){ .sk{animation:none} }
/* Undo snackbar (C3) — اکشنِ بازگرداندن برای اقدام‌های مخرب */
.undo-snack{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:calc(env(safe-area-inset-bottom,0px) + 78px);z-index:120;display:flex;align-items:center;gap:14px;max-width:min(92vw,420px);padding:12px 16px;border-radius:14px;background:var(--s-900,#12131a);color:#fff;box-shadow:0 12px 40px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.undo-snack.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.undo-snack .us-msg{font-size:14px;font-weight:600;flex:1;min-width:0}
.undo-snack .us-btn{flex-shrink:0;background:transparent;border:none;color:var(--blue,#4F8CFF);font-weight:800;font-size:14px;cursor:pointer;padding:6px 10px;min-height:24px;border-radius:8px}
.undo-snack .us-btn:hover{background:rgba(255,255,255,.08)}
.undo-snack .us-btn:focus-visible{outline:2px solid var(--blue,#4F8CFF);outline-offset:2px}
@media (prefers-reduced-motion: reduce){ .undo-snack{transition:none} }
/* Activity timeline روی کارتِ رزرو (C5) — بدونِ کامپوننتِ تکراری */
.tl{list-style:none;display:flex;gap:0;margin:12px 0 2px;padding:0}
.tl-step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;font-size:11px;color:var(--t3,#94A3B8);min-width:0}
.tl-step::before{content:"";position:absolute;top:5px;right:50%;width:100%;height:2px;background:var(--s-200,#e5e7eb)}
.tl-step:first-child::before{display:none}
.tl-dot{width:12px;height:12px;border-radius:50%;background:var(--s-200,#e5e7eb);border:2px solid var(--card,#fff);z-index:1;margin-bottom:5px}
.tl-lbl{white-space:nowrap}
.tl-step.done .tl-dot,.tl-step.active .tl-dot{background:var(--blue,#4F8CFF)}
.tl-step.done::before,.tl-step.active::before{background:var(--blue,#4F8CFF)}
/* ⚠️ الگویِ عمدی — دو بار نوشتنِ یک ویژگی، اشتباه نیست (۲۰۲۶-۰۸-۲۴):
   خطِ اول مقدارِ ثابتِ rgba است، خطِ دوم همان با `color-mix()`.
   `color-mix` از Chrome 111 / Safari 16.2 / Firefox 113 پشتیبانی می‌شود؛
   مرورگرِ قدیمی‌تر آن اعلانِ نامعتبر را **کلاً دور می‌ریزد**. بدونِ خطِ اول،
   نتیجه «رنگِ کمی متفاوت» نبود بلکه نبودِ کاملِ آن ویژگی می‌شد: حلقه‌ی فوکوس
   ناپدید (افتِ دسترسی‌پذیری) و پس‌زمینه‌ی پدِ کشیدنی نامرئی (خرابیِ عملکردی).
   پس این دو خط را «تمیز» نکنید — ترتیبشان هم مهم است. */
.tl-step.active .tl-dot{box-shadow:0 0 0 3px rgba(106,75,255,0.25);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue,#4F8CFF) 25%,transparent)}
.tl-step.done,.tl-step.active{color:var(--t1,#0f172a)}
.tl-step.cancel .tl-dot{background:var(--red,#EF4444)}
.tl-step.cancel::before{background:var(--red,#EF4444)}
.tl-step.cancel{color:var(--red,#EF4444)}
/* Command Palette (C6) */
.cmdk-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:14vh 16px 16px;opacity:0;pointer-events:none;transition:opacity .16s ease}
.cmdk-overlay.show{opacity:1;pointer-events:auto}
.cmdk{width:100%;max-width:560px;background:var(--card,#12131a);border:1px solid var(--s-200,rgba(255,255,255,.08));border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.5);overflow:hidden;transform:translateY(-8px);transition:transform .16s ease}
.cmdk-overlay.show .cmdk{transform:translateY(0)}
.cmdk-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--s-200,rgba(255,255,255,.08));color:var(--t2,#94A3B8)}
.cmdk-input{flex:1;background:transparent;border:none;outline:none;color:var(--t1,#fff);font-family:inherit;font-size:16px}
.cmdk-esc{font-size:11px;color:var(--t3);border:1px solid var(--s-200,rgba(255,255,255,.12));border-radius:6px;padding:2px 6px}
.cmdk-list{list-style:none;margin:0;padding:6px;max-height:52vh;overflow-y:auto}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;cursor:pointer;color:var(--t1,#fff)}
.cmdk-item.sel{background:var(--blue,#4F8CFF);color:#fff}
.cmdk-item.sel .cmdk-sub,.cmdk-item.sel .cmdk-ic{color:rgba(255,255,255,.85)}
.cmdk-ic{display:inline-flex;color:var(--t2,#94A3B8);flex-shrink:0}
.cmdk-t{flex:1;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-sub{font-size:12px;color:var(--t3,#64748B)}
.cmdk-empty{padding:20px;text-align:center;color:var(--t3);font-size:14px}
.nav-icn{background:transparent;border:none;color:var(--t2,#94A3B8);cursor:pointer;width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
.nav-icn:hover{background:var(--s-100,rgba(0,0,0,.05));color:var(--t1)}
.nav-icn:focus-visible{outline:2px solid var(--blue,#4F8CFF);outline-offset:2px}
@media (prefers-reduced-motion: reduce){ .cmdk-overlay,.cmdk{transition:none} }
/* Notification Center (C7) */
.notif-btn{position:relative}
.notif-badge{position:absolute;top:2px;left:2px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--red,#EF4444);color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.notif-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px;opacity:0;pointer-events:none;transition:opacity .16s ease}
.notif-overlay.show{opacity:1;pointer-events:auto}
.notif-panel{width:100%;max-width:460px;background:var(--card,#12131a);border:1px solid var(--s-200,rgba(255,255,255,.08));border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.5);overflow:hidden;max-height:80vh;display:flex;flex-direction:column;transform:translateY(-8px);transition:transform .16s ease}
.notif-overlay.show .notif-panel{transform:translateY(0)}
.notif-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--s-200,rgba(255,255,255,.08))}
.notif-head b{flex:1;font-size:16px}
.notif-readall{background:transparent;border:none;color:var(--blue,#4F8CFF);font-weight:700;font-size:13px;cursor:pointer;padding:6px 8px;min-height:24px;border-radius:8px}
.notif-close{background:transparent;border:none;color:var(--t2);font-size:22px;cursor:pointer;width:28px;height:28px;line-height:1}
.notif-tabs{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid var(--s-200,rgba(255,255,255,.06))}
.notif-tab{background:var(--s-100,rgba(255,255,255,.05));border:none;color:var(--t2);font-size:13px;font-weight:600;padding:6px 14px;border-radius:100px;cursor:pointer;min-height:24px}
.notif-tab.on{background:var(--blue,#4F8CFF);color:#fff}
.notif-list{overflow-y:auto;padding:6px}
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:12px}
.notif-item.unread{background:var(--s-100,rgba(79,140,255,.06))}
.notif-ic{display:inline-flex;color:var(--blue,#4F8CFF);flex-shrink:0;margin-top:2px}
.notif-item.pri-high .notif-ic{color:var(--red,#EF4444)}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;color:var(--t1)}
.notif-dot{width:7px;height:7px;border-radius:50%;background:var(--blue,#4F8CFF);display:inline-block}
.notif-text{font-size:13px;color:var(--t2);margin-top:2px}
.notif-act{flex-shrink:0;background:transparent;border:1px solid var(--s-200,rgba(255,255,255,.15));color:var(--t1);font-size:12px;font-weight:700;padding:6px 12px;border-radius:8px;cursor:pointer;min-height:24px}
.notif-empty{text-align:center;color:var(--t3);padding:40px 20px;font-size:14px}
.notif-empty-ic{color:var(--t3);margin-bottom:10px;display:flex;justify-content:center}
@media (prefers-reduced-motion: reduce){ .notif-overlay,.notif-panel{transition:none} }
/* C11: حلقه‌ی فوکوسِ عمومیِ قابل‌مشاهده (WCAG 2.4.7) */
:focus-visible{outline:2px solid var(--blue,#4F8CFF);outline-offset:2px;border-radius:6px}
.occ-card:focus-visible{outline-offset:3px}
/* Onboarding wizard (C9) */
.onb-overlay{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.onb-overlay.show{opacity:1;pointer-events:auto}
.onb-card{position:relative;width:100%;max-width:380px;background:var(--card,#12131a);border:1px solid var(--s-200,rgba(255,255,255,.08));border-radius:24px;padding:36px 24px 24px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.5);transform:translateY(12px) scale(.98);transition:transform .2s var(--spring,cubic-bezier(.34,1.56,.64,1))}
.onb-overlay.show .onb-card{transform:none}
.onb-skip{position:absolute;top:14px;left:16px;background:transparent;border:none;color:var(--t3);font-size:13px;cursor:pointer;padding:6px 8px;min-height:24px}
.onb-emoji{display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin:4px auto 18px;border-radius:50%;background:var(--blue);color:var(--on-brand)}
.onb-title{font-size:21px;font-weight:800;color:var(--t1);margin-bottom:10px}
.onb-text{font-size:14px;color:var(--t2);line-height:1.8;margin-bottom:22px}
.onb-dots{display:flex;gap:7px;justify-content:center;margin-bottom:22px}
.onb-dot{width:7px;height:7px;border-radius:50%;background:var(--s-200,rgba(255,255,255,.2));transition:width .2s ease,background .2s ease}
.onb-dot.on{width:22px;border-radius:4px;background:var(--blue,#4F8CFF)}
@media (prefers-reduced-motion: reduce){ .onb-overlay,.onb-card,.onb-dot{transition:none} }
/* Microinteractions (C10) — بازخوردِ لمسی/تعاملیِ سبک */
@keyframes like-pop{0%{transform:scale(1)}35%{transform:scale(1.35)}60%{transform:scale(.9)}100%{transform:scale(1)}}
.liked-pop{animation:like-pop .42s var(--spring,cubic-bezier(.34,1.56,.64,1))}
.btn:active{transform:scale(.97)}
.chip:active,.rc-fav:active,.nav-icn:active,.botnav-item:active{transform:scale(.94)}
@media (prefers-reduced-motion: reduce){ .liked-pop{animation:none} .btn:active,.chip:active,.rc-fav:active,.nav-icn:active,.botnav-item:active{transform:none} }

/* ─────────── BOTTOM NAV (mobile) ─────────── */
/* ⚠️ رفع‌شده (همون باگِ .nav بالا): پس‌زمینه هاردکدِ سفید بود، تمِ تاریک را
   نادیده می‌گرفت. --glass-2 جایگزین شد. */
.botnav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;background:var(--glass-2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-top:1px solid var(--border);padding:8px 0 calc(8px + env(safe-area-inset-bottom));
  justify-content:space-around}
.botnav-item{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;
  color:var(--t3);font-size:10px;font-weight:600;padding:4px 16px;transition:color var(--t-fast),transform var(--t-fast) var(--spring)}
.botnav-item.active{color:var(--blue-text)}
.botnav-item svg{width:22px;height:22px}

/* ─────────── AI STRIP ─────────── */
/* .ai-strip* حذف شد ۲۰۲۶-۰۹-۰۷ — نوارِ «پیشنهاد هوشمند» جعلی بود و از
   index.html برداشته شد؛ دلیلِ کاملش آنجا ثبت است.
   قاعده‌ی ".ai-strip .btn-ghost" در خطِ ~۱۸۰ عمداً دست‌نخورده ماند، چون با
   ".ai-review" مشترک است — و آن یک فیچرِ جدا و مشروط است (detail.js:225). */

/* ─────────── SHEET (bottom modal) ─────────── */
.sheet-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);align-items:flex-end;justify-content:center}
.sheet-overlay.show{display:flex;animation:fadeUp .2s}
.sheet{background:var(--white);border-radius:var(--r-2xl) var(--r-2xl) 0 0;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  padding:10px 22px 30px;animation:slideUp var(--t-slow) var(--ease);box-shadow:var(--sh-xl)}
.sheet-handle{width:36px;height:5px;border-radius:var(--radius-full);background:var(--s-300);margin:8px auto 18px}
.sheet-title{font-size:var(--fs-2xl);font-weight:900;letter-spacing:0;margin-bottom:4px}
.sheet-sub{font-size:13px;color:var(--t2);margin-bottom:20px}

/* booking: stepper */
.steps{display:flex;gap:6px;margin-bottom:22px}
.step-bar{flex:1;height:4px;border-radius:2px;background:var(--s-200);overflow:hidden}
.step-bar.done{background:var(--blue)}
.step-bar.now::after{content:'';display:block;height:100%;width:60%;background:var(--blue);border-radius:2px}
.field-label{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:8px}
.otp-input{width:100%;padding:14px 15px;border:1.5px solid var(--border);border-radius:var(--r-sm);outline:none;
  font-size:22px;font-weight:700;text-align:center;letter-spacing:.4em;direction:ltr;transition:border-color .15s}
.otp-input:focus{border-color:var(--blue)}
.login-icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--blue),var(--teal));
  display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 18px;box-shadow:0 8px 24px rgba(37,99,235,.24)}
.dev-hint{background:var(--amber-50);border:1px solid #FDE68A;border-radius:var(--r-sm);padding:10px 13px;
  font-size:12px;color:#92400E;text-align:center;margin-top:12px;line-height:1.5}
.resend{text-align:center;font-size:13px;color:var(--t2);margin-top:14px}
.resend button{background:none;border:none;color:var(--blue);font-weight:700;font-family:inherit;font-size:13px;cursor:pointer}
.opt-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.opt{padding:10px 16px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--white);cursor:pointer;
  font-size:13px;font-weight:600;color:var(--t2);transition:all var(--t-fast);min-height:42px;display:flex;align-items:center;gap:6px}
.opt:hover{border-color:var(--border-strong)}
.opt.sel{border-color:var(--blue);background:var(--blue-50);color:var(--blue)}
.opt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}
.opt-grid .opt{justify-content:center;padding:11px 6px}
.inp{width:100%;padding:12px 15px;border:1.5px solid var(--border);border-radius:var(--r-sm);outline:none;
  font-size:14px;color:var(--t1);transition:border-color var(--t-fast);margin-bottom:14px;background:var(--white)}
.inp:focus{border-color:var(--blue)}
.inp::placeholder{color:var(--t3);opacity:1} /* R5: رجوع به توضیحِ .search-field input::placeholder */
.summary{background:var(--s-50);border:1px solid var(--border);border-radius:var(--r);padding:15px;margin-bottom:18px}
.sum-row{display:flex;justify-content:space-between;padding:5px 0;font-size:14px}
.sum-row+.sum-row{border-top:1px solid var(--border)}
.sum-row .k{color:var(--t2)}.sum-row .v{font-weight:700}
.reward-row{display:flex;gap:10px;margin-bottom:18px}
.reward{flex:1;background:var(--s-50);border:none;border-radius:var(--r-lg);padding:13px;text-align:center}
.reward .rv{font-size:18px;font-weight:800}
.reward .rv.blue{color:var(--blue)}.reward .rv.teal{color:var(--teal-600)}
.reward .rl{font-size:11px;color:var(--t2);margin-top:1px}

/* success */
.success{text-align:center;padding:8px 0}
.success-check{width:72px;height:72px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;animation:pop .5s var(--spring)}
.success-check svg{width:38px;height:38px;color:var(--on-brand)}
.code-box{background:var(--s-50);border:none;border-radius:var(--r-lg);padding:16px;margin:18px 0;text-align:center}
.code-box .cl{font-size:var(--fs-xs);color:var(--t2);font-weight:600;text-transform:none;letter-spacing:0}
.code-box .cv{font-size:26px;font-weight:800;letter-spacing:.12em;color:var(--t1);margin-top:4px}
.copy-btn{margin-top:10px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-xs);padding:7px 14px;
  font-size:12px;font-weight:700;color:var(--blue);cursor:pointer;transition:all var(--t-fast)}
.copy-btn:hover{background:var(--blue-50)}

/* ─────────── RESTAURANT PROFILE ─────────── */
.rp-back{position:sticky;top:62px;z-index:50;background:rgba(248,250,252,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:12px 0}
.back-btn{display:inline-flex;align-items:center;gap:6px;background:var(--white);border:1px solid var(--border);border-radius:50px;
  padding:8px 16px;font-size:13px;font-weight:600;color:var(--t1);cursor:pointer;box-shadow:var(--sh-sm);transition:all var(--t-fast)}
.back-btn:hover{box-shadow:var(--sh)}
/* gallery */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:380px;border-radius:var(--r-xl);overflow:hidden;margin-bottom:24px}
.gal-cell{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;transition:filter var(--t)}
.gal-cell:hover{filter:brightness(.95)}
.gal-cell:first-child{grid-row:1/3}
.gal-emoji{font-size:72px;filter:drop-shadow(0 8px 20px rgba(15,23,42,.2))}
.gal-cell:not(:first-child) .gal-emoji{font-size:40px}
.gal-more{position:absolute;bottom:12px;left:12px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:none;
  border-radius:var(--r-xs);padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer;box-shadow:var(--sh)}
.rp-layout{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
.rp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--border);margin-bottom:22px}
.rp-name{font-size:28px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
.rp-meta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--t2)}
.rp-rate-pill{display:flex;align-items:center;gap:5px;font-weight:700;color:var(--t1)}
.rp-share{display:flex;gap:8px}
.icon-btn{width:40px;height:40px;border-radius:50%;background:var(--white);border:1px solid var(--border);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all var(--t-fast)}
.icon-btn:hover{background:var(--s-50);border-color:var(--border-strong)}
.rp-section{padding:28px 0 6px}
.rp-section h3{font-size:var(--fs-2xl);font-weight:900;letter-spacing:0;margin-bottom:14px}
/* کاشیِ تخت — جانشینِ .glass روی سطوحِ محتوایی (DS-010 §۲‑۲: شیشه فقط دو نوار) */
.tile{background:var(--s-50);border-radius:var(--r-lg);padding:16px}
.rp-about{color:var(--t2);line-height:1.7;font-size:15px}
/* وضعیتِ خالیِ صادقانه برایِ بخش‌های درباره/منو/نظرها — وقتی رستورانِ زنده
   این فیلدها را ندارد (رجوع کن به mapApiRestaurant در api.js) */
.rp-empty{color:var(--t3);font-size:13.5px;line-height:1.7;padding:4px 0}
.feat-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.feat{display:flex;align-items:center;gap:7px;min-height:36px;padding:6px 14px;background:var(--s-100);border-radius:var(--radius-full);font-size:var(--fs-sm);font-weight:600;color:var(--t1)}
.feat svg{color:var(--blue-text)}
/* menu preview */
.menu-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.menu-item{display:flex;align-items:center;gap:11px;padding:14px 16px;background:var(--s-50);border:none;border-radius:var(--r-lg);transition:background-color var(--t-fast)}
.menu-item:hover{background:var(--s-100);box-shadow:none;transform:none}
.menu-emoji{width:44px;height:44px;border-radius:11px;background:var(--s-50);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.menu-info{flex:1;min-width:0}
.menu-name{font-size:var(--fs-lg);font-weight:700}
.menu-price{font-size:var(--fs-sm);color:var(--t2);margin-top:2px;font-variant-numeric:tabular-nums}
/* ratings breakdown */
.rb-grid{display:grid;grid-template-columns:auto 1fr;gap:14px 20px;align-items:center;margin-bottom:20px}
.rb-overall{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px 0 4px;border-left:1px solid var(--border)}
.rb-big{font-size:var(--fs-4xl);font-weight:900;letter-spacing:0;line-height:1}
.rb-stars{color:var(--amber);font-size:14px;margin-top:4px}
.rb-count{font-size:12px;color:var(--t2);margin-top:3px}
.rb-bars{display:flex;flex-direction:column;gap:9px}
.rb-bar-row{display:flex;align-items:center;gap:10px;font-size:13px}
.rb-bar-row .rl{width:64px;color:var(--t2);font-weight:600}
.rb-track{flex:1;height:7px;background:var(--s-100);border-radius:4px;overflow:hidden}
.rb-fill{height:100%;border-radius:var(--radius-full);background:var(--t1);transition:width var(--motion-sheet) var(--ease)}
.rb-bar-row .rv{width:28px;text-align:left;font-weight:700;font-size:12px}
/* AI review summary */
.ai-review{color:var(--t1);background:var(--s-50);border:none;border-radius:var(--r-lg);padding:18px;margin-bottom:20px}
.ai-review-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.ai-review-head .icn{width:30px;height:30px;border-radius:var(--radius-xs);background:var(--blue);display:flex;align-items:center;justify-content:center;color:var(--on-brand);font-size:var(--fs-md)}
.ai-review-head .ttl{font-size:14px;font-weight:800}
.ai-review-head .tag{margin-right:auto;font-size:10px;font-weight:700;color:var(--blue);background:var(--white);padding:3px 9px;border-radius:50px}
.ai-col{margin-bottom:12px}
.ai-col-label{font-size:12px;font-weight:700;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.ai-point{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t1);padding:4px 0}
.ai-point .ic{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.ai-point .ic.good{background:#DCFCE7;color:#16A34A}
.ai-point .ic.bad{background:#FEE2E2;color:#DC2626}
/* review card */
.review{padding:16px 0;border-top:1px solid var(--border);display:flex;gap:12px}
.review-ava{width:42px;height:42px;border-radius:50%;background:var(--s-900);color:var(--on-s-900);display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);font-weight:800;flex-shrink:0}
.review-body{flex:1}
.review-top{display:flex;align-items:center;justify-content:space-between}
.review-name{font-size:var(--fs-lg);font-weight:700}
.review-date{font-size:12px;color:var(--t3)}
.review-stars{color:var(--amber);font-size:13px;margin:3px 0 6px}
.review-text{font-size:14px;color:var(--t2);line-height:1.6}
/* booking widget (sticky) */
.book-widget{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:22px;box-shadow:var(--sh-lg);position:sticky;top:130px}
/* ─── Hero صفحه رستوران ─── */
/* ۰۹-۱۳: هیرو = همان کاشیِ کشف در مقیاسِ بزرگ — رنگِ غذا، واژه‌ی درشت، بدونِ مِشِ متحرک و
   ایموجیِ شناور (DS-010 §۲‑۳: حلقه‌ی تزئینی ممنوع). container-type تا واژه با عرضِ هیرو مقیاس بگیرد. */
.rp-hero{position:relative;height:clamp(340px,42vw,460px);display:flex;align-items:flex-end;overflow:hidden;container-type:inline-size}
.rp-hero .rp-hero-bg{position:absolute;inset:0;z-index:0}
.rp-hero-word{position:absolute;z-index:1;inset-inline-start:5cqi;inset-block-start:26%;pointer-events:none;white-space:nowrap;
  font-size:min(22cqi,calc(88cqi / var(--len,4)),calc(var(--fs-4xl) * 5));font-weight:var(--weight-display);line-height:var(--lh-tight);color:rgba(255,255,255,.96);text-shadow:0 4px 30px rgba(0,0,0,.25)}
@media(min-width:880px){.rp-hero-word{inset-block-start:18%}}
.rp-hero-back{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:15px;background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);border:1px solid rgba(255,255,255,.18);font-size:20px;font-weight:800;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .2s var(--spring)}
.rp-hero-back:active{transform:scale(.88)}
.rp-hero-actions{position:absolute;top:16px;left:16px;display:flex;gap:8px;z-index:3}
.rp-hero-icon{width:44px;height:44px;border-radius:15px;background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);border:1px solid rgba(255,255,255,.18);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .2s var(--spring)}
.rp-hero-icon:active{transform:scale(.88)}
.rp-hero-badges{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.rp-hero-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;padding:6px 12px;border-radius:100px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.24);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.rp-hero-badge.live{background:rgba(18,161,80,.28);border-color:rgba(52,211,153,.5)}
/* صداقتِ داده: رستوران/رزروی که از دادهٔ نمونه/آفلاین می‌آید (نه بک‌اندِ واقعی) */
.rp-hero-badge.demo{background:rgba(194,65,12,.34);border-color:rgba(251,146,60,.55)}
.rp-hero-overlay{position:relative;z-index:2;width:100%;padding:60px 20px 22px;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.2) 60%,transparent);color:var(--on-brand)}
@media(min-width:880px){.rp-hero-overlay{padding-inline:max(20px,calc((100% - 1100px)/2))}}
.rp-hero-name{font-size:clamp(var(--fs-3xl),7.5vw,var(--fs-4xl));font-weight:900;letter-spacing:0;margin-bottom:8px;text-shadow:0 2px 16px rgba(0,0,0,.4);line-height:1.15}
.rp-hero-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;opacity:.96;text-shadow:0 1px 8px rgba(0,0,0,.5);font-weight:600}
.rp-hero-rate{display:inline-flex;align-items:center;gap:4px;font-weight:800}
.rp-hero-dot{opacity:.5}
.rp-body{padding-top:20px;padding-bottom:100px}
.rp-cb-banner{background:linear-gradient(135deg,#ECFDF5,#D1FAE5);border:1px solid #A7F3D0;border-radius:var(--r-lg);padding:14px 16px;font-size:14px;font-weight:700;color:#065F46;margin-bottom:24px;text-align:center}
/* ─── نوار رزرو پایین (شناور) ─── */
.rp-bookbar{position:fixed;bottom:0;left:0;right:0;background:var(--white);border-top:1px solid var(--border);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:95;box-shadow:0 -4px 20px rgba(0,0,0,.08);max-width:480px;margin:0 auto}
.rp-bookbar-info{flex:1;min-width:0}
.rp-bookbar-cb{font-size:var(--fs-md);font-weight:800;color:var(--blue-text)}
.rp-bookbar-sub{font-size:12px;color:var(--t3);margin-top:2px}
.rp-bookbar-btn{padding:14px 32px;font-size:15px;font-weight:700;white-space:nowrap;flex-shrink:0}
.bs-head{margin-bottom:18px}
.bs-title{font-size:var(--fs-2xl);font-weight:900;letter-spacing:0}
.bs-rest{font-size:14px;color:var(--t2);margin-top:2px}
.bw-price{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.bw-cb{font-size:13px;font-weight:700;color:var(--teal-600);margin-bottom:18px;display:flex;align-items:center;gap:5px}
/* ۰۹-۱۳: فیلدهای شیت مثلِ فهرستِ گروهیِ iOS — کاشیِ خاکستریِ بدونِ حاشیه، برچسبِ ریز، مقدارِ ۱۷px.
   همان <select>ها می‌مانند (رفتار و تست‌ها به #bwDate/#bwParty/#bwTime بسته‌اند)؛ فقط پوسته عوض شد. */
.bw-field{background:var(--s-50);border:none;border-radius:var(--r-lg);padding:10px 16px;margin-bottom:8px;cursor:pointer;transition:background-color var(--t-fast)}
.bw-field:hover{background:var(--s-100)}
.bw-field label{font-size:var(--fs-xs);font-weight:600;color:var(--t2);text-transform:none;letter-spacing:0;display:block;margin-bottom:0}
/* اندازه‌گیری شده بود ۱۷px ارتفاع — روی ورودی‌های خودِ قیفِ رزرو، یعنی جایی که
   خطای لمس مستقیماً تبدیل را از دست می‌دهد. کادرِ کلیک به ۴۴px می‌رسد بدونِ
   اینکه ارتفاعِ بصریِ فیلد عوض شود (label بالای آن است، مجموع همچنان جمع‌وجور). */
.bw-field select,.bw-field input{border:none;outline:none;width:100%;font-size:var(--fs-lg);font-weight:600;color:var(--t1);background:none;cursor:pointer;
  min-block-size:var(--touch-min);font-family:inherit}
.bw-field:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 55%,transparent)}

/* ─────────── LOYALTY ─────────── */
.loy-card{background:linear-gradient(125deg,var(--blue),var(--teal));border-radius:var(--r-2xl);padding:28px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh-lg)}
.loy-card::after{content:'';position:absolute;top:-50%;right:-10%;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.08)}
.loy-tier{font-size:13px;font-weight:700;opacity:.9;text-transform:uppercase;letter-spacing:.05em}
.loy-pts{font-size:48px;font-weight:800;letter-spacing:-.03em;margin:6px 0;position:relative}
.loy-next{font-size:13px;opacity:.85;position:relative}
.loy-prog{height:8px;background:rgba(255,255,255,.25);border-radius:4px;margin-top:14px;overflow:hidden;position:relative}
.loy-prog-fill{height:100%;background:#fff;border-radius:4px}
/* «امتیاز منقضی نمی‌شود» — عمداً بیرونِ کارت و کم‌صدا: یک اطمینانِ آرام، نه
   یک بنرِ تبلیغاتی. رقبا انقضای امتیاز را پرشکایت‌ترین نقطه‌شان دارند؛ ما
   خلافش را داریم و تا امروز هیچ‌جا نمی‌گفتیم. */
.loy-noexpire{display:flex;align-items:center;gap:6px;margin-top:12px;padding:10px 12px;
  background:var(--surface-2,rgba(0,0,0,.03));border-radius:var(--r-md,10px);
  font-size:13px;color:var(--t2);line-height:1.6}
.loy-noexpire svg{flex:none;color:var(--ok,#16A34A)}
.perks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:20px}
.perk{background:var(--s-50);border:none;border-radius:var(--r-lg);padding:18px 16px;text-align:center}
.perk-emoji{display:flex;justify-content:center;color:var(--blue-text);margin-bottom:10px}
.perk-name{font-size:13px;font-weight:700;margin-bottom:2px}
.perk-desc{font-size:11px;color:var(--t2)}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.bdg{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;text-align:center;transition:all var(--t)}
.bdg.locked{opacity:.45;filter:grayscale(.6)}
.bdg.earned:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.bdg-emoji{font-size:30px;margin-bottom:8px}
.bdg-name{font-size:13px;font-weight:700}
.bdg-desc{font-size:11px;color:var(--t2);margin-top:2px}

/* ─────────── TRIPS ─────────── */
.trip{display:flex;gap:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;margin-bottom:12px;transition:all var(--t)}
.trip:hover{box-shadow:var(--sh-md);border-color:var(--border-strong)}
.trip-img{width:88px;height:88px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:38px;flex-shrink:0}
.trip-body{flex:1;min-width:0}
.trip-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:50px;margin-bottom:7px}
.trip-status.up{background:var(--blue-50);color:var(--blue)}
.trip-status.done{background:var(--s-100);color:var(--t2)}
.trip-status.cancelled{background:var(--red-50);color:var(--red)}
.trip-name{font-size:16px;font-weight:700}
.trip-meta{font-size:13px;color:var(--t2);margin-top:3px}
.trip-actions{display:flex;gap:8px;margin-top:11px}

/* ─────────── PROFILE ─────────── */
.prof-head{display:flex;align-items:center;gap:18px;margin-bottom:28px}
/* ─── کارت هویت سینمایی (نسل‌Z: پروفایل = استاتوس) ─── */
.prof-card{position:relative;border-radius:var(--r-2xl);padding:24px;margin-bottom:24px;overflow:hidden;background:var(--grad);box-shadow:var(--sh-lg)}
.prof-card-mesh{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(45% 55% at 82% 15%,rgba(255,255,255,.3),transparent 60%),
  radial-gradient(50% 55% at 15% 85%,rgba(255,138,75,.4),transparent 62%);
  mix-blend-mode:screen;animation:rpMesh 12s ease-in-out infinite alternate}
.prof-card-top{position:relative;z-index:1;display:flex;align-items:center;gap:16px;margin-bottom:20px}
.prof-ava-xl{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;font-weight:800;flex-shrink:0}
.prof-card-name{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.02em;text-shadow:0 2px 8px rgba(0,0,0,.2)}
.prof-card-phone{font-size:13px;color:rgba(255,255,255,.85);margin:2px 0 8px;font-weight:600}
.prof-tier{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;padding:5px 12px;border-radius:100px;background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);color:#fff}
.prof-card-stats{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-around;background:rgba(255,255,255,.15);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.24);border-radius:var(--r-lg);padding:16px 8px}
.pcstat{text-align:center;flex:1}
.pcstat-v{font-size:24px;font-weight:900;color:#fff;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.2)}
.pcstat-l{font-size:11px;color:rgba(255,255,255,.85);margin-top:5px;font-weight:600}
.pcstat-div{width:1px;height:32px;background:rgba(255,255,255,.25)}
.prof-ava{width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;box-shadow:var(--sh-md)}
.prof-name{font-size:24px;font-weight:800;letter-spacing:-.03em}
.prof-mail{font-size:14px;color:var(--t2);margin-top:2px}
.prof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.pstat{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;text-align:center}
.pstat-v{font-size:24px;font-weight:800;letter-spacing:-.02em}
.pstat-l{font-size:12px;color:var(--t2);margin-top:2px}
.settings-list{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.set-item{display:flex;align-items:center;gap:13px;padding:15px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--t-fast)}
.set-item:last-child{border-bottom:none}
.set-item:hover{background:var(--s-50)}
.set-icon{width:36px;height:36px;border-radius:10px;background:var(--s-50);display:flex;align-items:center;justify-content:center;font-size:17px}
.set-label{flex:1;font-size:14px;font-weight:600}
.set-arrow{color:var(--t3)}

/* ─────────── EMPTY STATE ─────────── */
.empty{text-align:center;padding:60px 20px}
.empty-emoji{font-size:54px;margin-bottom:16px}
.empty-title{font-size:19px;font-weight:800;margin-bottom:6px}
.empty-text{font-size:14px;color:var(--t2);max-width:320px;margin:0 auto 22px;line-height:1.6}

/* ─────────── TOAST ─────────── */
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(100px);z-index:300;
  background:var(--s-900);color:var(--on-s-900);padding:13px 22px;border-radius:50px;font-size:14px;font-weight:600;
  display:flex;align-items:center;gap:9px;box-shadow:var(--sh-xl);opacity:0;transition:all var(--t-slow) var(--spring);white-space:nowrap;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
@media(max-width:880px){.toast{bottom:84px}}

@media(max-width:880px){
  .nav-links{display:none}
  /* ⚠️ [DS-007 §۶ · ۲۰۲۶-۰۹-۱۰] پیش از این کلِ `.nav-right` روی موبایل حذف
     می‌شد، چون ناوبری به `.botnav` منتقل می‌شود. ولی دکمه‌ی جست‌وجو هم داخلِ
     همین ظرف بود — یعنی `openPalette()` در DOM وجود داشت و **روی گوشی هرگز
     دیده نمی‌شد** (اندازه‌گیریِ طراح در ۳۹۰×۸۴۴: `visible:false`). تا امروز
     بی‌اهمیت بود چون هیرو نوارِ جست‌وجوی خودش را داشت؛ با رفتنِ هیرو، این
     تنها راهِ رسیدن به جست‌وجو است.
     پس ظرف نمایان می‌شود ولی **فقط** موارد `nav-keep`:
       🔍      تنها راهِ جست‌وجو
       🌙      تنها صداکننده‌ی `toggleTheme` (وگرنه قابلیت حذف می‌شد)
     زنگِ اعلان و pill امتیاز عمداً مخفی می‌مانند — ناوبری و اعلان روی موبایل
     کارِ `.botnav` است و شلوغ‌کردنِ نوارِ بالا هدفِ «فید اول» را نقض می‌کند. */
  .nav-right{display:flex}
  .nav-right>*{display:none}
  .nav-right>.nav-keep{display:inline-flex}
  .botnav{display:flex}
  body{padding-bottom:70px}
  .searchbar{flex-wrap:wrap;border-radius:var(--r-xl);padding:6px}
  .search-field{flex:1 1 40%;padding:10px 14px}
  .search-field+.search-field{border-right:none}
  .search-go{width:100%;border-radius:var(--r);margin-top:6px;height:46px}
  .grid{grid-template-columns:1fr;gap:18px}
  .section{padding:28px 0}
  /* ⚠️ [DS-007 §۶] ریتمِ عمودیِ **بالای فید** روی موبایل فشرده‌تر شد.
     اندازه‌گیری پس از برداشتنِ هیرو: اولین کارت در ۴۱۰px بود — یعنی هیرو
     بزرگ‌ترین مقصر بود (۹۸۲ → ۴۱۰) ولی به‌تنهایی کافی نبود. تفکیکِ باقی‌مانده:
         nav ۶۲ + occ-wrap ۱۷۰ + chips ۵۶ + پدینگِ بالای section ۲۸ = ۴۱۰
     این دو قاعده فقط فاصله‌ی **پیش از** فید را می‌گیرند و به خودِ کارت‌ها یا
     ردیفِ مناسبت‌ها دست نمی‌زنند. ⚠️ عمداً `.section:first-of-type` نیست:
     همه‌ی سکشن‌های صفحه‌ی کشف پشتِ سرِ هم‌اند و یک قاعده‌ی عمومی، فاصله‌ی
     میانِ آن‌ها را هم می‌شکست. */
  #page-discover .occ-q{margin-bottom:8px}
  /* ⚠️ سکشنی که `#feed` را دارد — با `:has()` به خودِ فید لنگر می‌اندازد، نه
     به ترتیبِ همسایه‌ها. نسخه‌ی اولِ من `.occ-wrap+.chips+.wrap.section` بود و
     **هیچ‌چیز را مچ نکرد** (۴۱۰ → ۴۰۶، یعنی فقط قاعده‌ی occ-q اثر کرد): در
     واقع `occ-wrap` و `chips` هر دو داخلِ یک `.wrap`ِ دیگرند و این سکشن
     همسایه‌ی آن `.wrap` است، نه همسایه‌ی `chips`. حدسِ ساختار با اندازه‌گیری
     رد شد — و اگر فقط عددِ نهایی را دیده بودم، «کار کرد» می‌نوشتم. */
  #page-discover .wrap.section:has(#feed){padding-top:14px}
  .rp-layout{grid-template-columns:1fr;gap:0}
  .book-widget{position:fixed;bottom:70px;left:0;right:0;border-radius:var(--r-xl) var(--r-xl) 0 0;z-index:60;padding:16px 20px;box-shadow:var(--sh-xl)}
  .gallery{grid-template-columns:1fr 1fr;height:280px}
  .gallery .gal-cell:first-child{grid-column:1/3;grid-row:1}
  .gallery .gal-cell:nth-child(n+4){display:none}
  .menu-list{grid-template-columns:1fr}
  .rb-grid{grid-template-columns:1fr}
  .rb-overall{flex-direction:row;gap:14px;border-left:none;border-bottom:1px solid var(--border);padding:0 0 14px;justify-content:flex-start}
}
/* ═══════════════════════════════════════════════
   DNA غذایی — تجربه‌ی Wrapped برای نسل‌Z
   جسور، تیره، گرادیانی، قابل‌اسکرین‌شات
   ═══════════════════════════════════════════════ */
.dna-entry{margin:0 0 16px;border-radius:var(--r-xl);padding:22px 20px;cursor:pointer;position:relative;overflow:hidden;
  background:var(--dish-eggplant);color:var(--on-brand);transition:transform var(--t) var(--spring)}
.dna-entry:active{transform:scale(.98)}
.dna-entry::after{content:"";position:absolute;top:-30%;right:-10%;width:180px;height:180px;background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%)}
.dna-entry-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;background:rgba(255,255,255,.18);padding:5px 12px;border-radius:20px;margin-bottom:14px;position:relative}
.dna-entry-title{font-size:22px;font-weight:900;letter-spacing:-.03em;line-height:1.15;position:relative;margin-bottom:6px}
.dna-entry-sub{font-size:13.5px;opacity:.9;position:relative;line-height:1.6}
.dna-entry-cta{margin-top:14px;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:700;background:var(--on-brand);color:var(--on-tint);padding:9px 16px;border-radius:var(--radius-md);position:relative}

/* صفحه‌ی تمام‌قد DNA (اسلایدهای Wrapped) */
.dna-overlay{position:fixed;inset:0;z-index:2000;background:#0B1020;display:none;flex-direction:column;overflow:hidden}
.dna-overlay.open{display:flex}
.dna-progress{display:flex;gap:5px;padding:14px 16px 0;position:relative;z-index:5}
.dna-progress-bar{flex:1;height:3px;background:rgba(255,255,255,.25);border-radius:3px;overflow:hidden}
.dna-progress-bar i{display:block;height:100%;width:0;background:#fff;border-radius:3px}
.dna-progress-bar.done i{width:100%}
.dna-progress-bar.active i{animation:dnaFill 5s linear forwards}
@keyframes dnaFill{from{width:0}to{width:100%}}
.dna-close{position:absolute;top:12px;inset-inline-start:16px;z-index:10;width:var(--touch-min);height:var(--touch-min);border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:20px;cursor:pointer;display:grid;place-items:center}
.dna-slides{flex:1;position:relative}
.dna-slide{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 28px}
.dna-slide.show{display:flex;animation:dnaIn .5s var(--ease)}
@keyframes dnaIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.dna-slide-kicker{font-size:14px;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:16px}
.dna-slide-big{font-size:76px;font-weight:900;letter-spacing:-.05em;line-height:.95;margin-bottom:8px;
  background:linear-gradient(135deg,#fff,#C7C9F5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.dna-slide-label{font-size:22px;font-weight:800;color:#fff;margin-bottom:14px;letter-spacing:-.02em}
.dna-slide-desc{font-size:15px;color:rgba(255,255,255,.75);line-height:1.7;max-width:300px}
.dna-slide-emoji{font-size:64px;margin-bottom:20px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.4))}
.dna-tap{position:absolute;inset:0;display:flex;z-index:8}
.dna-tap>div{flex:1}
/* اسلاید نهایی: کارت اشتراک */
.dna-share-card{background:var(--dish-eggplant);border-radius:var(--r-2xl);padding:28px 24px;width:100%;max-width:320px;box-shadow:0 24px 64px rgba(0,0,0,.5)}
.dna-share-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.dna-share-row:last-child{border-bottom:none}
.dna-share-k{font-size:13.5px;color:rgba(255,255,255,.85);font-weight:600}
.dna-share-v{font-size:16px;font-weight:800;color:#fff}
.dna-share-btn{margin-top:22px;width:100%;background:var(--on-brand);color:var(--on-tint);border:none;border-radius:var(--radius-lg);padding:15px;font-family:inherit;font-size:var(--fs-md);font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.dna-badge-persona{display:inline-block;background:rgba(255,255,255,.2);color:#fff;font-size:13px;font-weight:700;padding:6px 14px;border-radius:20px;margin-top:10px}
/* ═══ اثبات اجتماعی امن (فعالیت گذشته، نه موقعیت زنده) ═══ */
.rc-social{display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:9px;border-top:1px solid var(--border)}
.rc-social-ava{display:flex}
.rc-social-ava span{width:22px;height:22px;border-radius:50%;border:2px solid var(--white);display:grid;place-items:center;font-size:10px;margin-right:-7px;background:var(--blue-50)}
.rc-social-txt{font-size:12px;color:var(--t2);font-weight:600}
.rc-social-txt b{color:var(--t1)}
.rc-hot{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--teal-600);background:var(--teal-50);padding:3px 9px;border-radius:20px}
/* نوار «الان محبوب» بالای فید */
.live-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none}
.live-strip::-webkit-scrollbar{display:none}
.live-pill{flex-shrink:0;display:flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--border);border-radius:20px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--t2)}
.live-pill b{color:var(--t1)}
.live-dot-sm{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* اثبات اجتماعی صفحه‌ی جزئیات */
.rp-social{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px;display:flex;flex-direction:column;gap:12px}
.rp-social-item{display:flex;align-items:center;gap:11px}
.rp-social-avas{display:flex}
.rp-social-avas span{width:26px;height:26px;border-radius:50%;border:2px solid var(--white);display:grid;place-items:center;font-size:12px;margin-right:-8px;background:var(--blue-50)}
.rp-social-txt{font-size:13.5px;color:var(--t2);font-weight:600}
.rp-social-txt b{color:var(--t1)}
/* مرکز تنظیمات اعلان */
.np-perm{border-radius:12px;padding:12px 14px;font-size:13px;font-weight:600;margin-bottom:16px;line-height:1.5}
.np-perm.ok{background:var(--green);background:#E7F7EE;color:#0E7A3C}
.np-perm.no{background:#FCECEC;color:#B91C1C}
/* حالتِ «اجازه هست ولی ارسال هنوز آماده نیست» + حالتِ در‌حالِ‌بررسی (بدونِ کلاس) */
.np-perm.warn{background:var(--warning-soft);color:var(--warning-ink)}
.np-perm:not(.ok):not(.no):not(.ask):not(.warn){background:var(--s-100);color:var(--t2)}
.np-perm.ask{background:var(--blue-50);color:#3730A3;display:flex;align-items:center;justify-content:space-between;gap:12px}
.np-perm-btn{background:var(--blue);color:#fff;border:none;border-radius:10px;padding:8px 16px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;flex-shrink:0}
.np-list{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.np-item{display:flex;align-items:center;gap:12px;padding:12px 4px}
.np-ic{width:40px;height:40px;border-radius:12px;background:var(--s-100);display:grid;place-items:center;font-size:19px;flex-shrink:0}
.np-txt{flex:1;min-width:0}
.np-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.np-hi{font-size:10px;font-weight:700;background:var(--teal-50);color:var(--teal-600);padding:2px 7px;border-radius:6px}
.np-desc{font-size:12px;color:var(--t3);margin-top:1px;line-height:1.4}
.np-toggle{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0;cursor:pointer}
.np-toggle input{opacity:0;width:0;height:0}
.np-slider{position:absolute;inset:0;background:var(--s-300);border-radius:26px;transition:.2s}
.np-slider::before{content:"";position:absolute;height:20px;width:20px;right:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.np-toggle input:checked+.np-slider{background:var(--blue)}
.np-toggle input:checked+.np-slider::before{transform:translateX(-18px)}
.np-foot{font-size:12px;color:var(--t2);background:var(--s-50);border-radius:12px;padding:12px 14px;line-height:1.6;text-align:center}
/* ═══ کشف بر اساس موقعیت (نسل‌Z: بر اساس حال‌وهوا انتخاب می‌کنه) ═══ */
.occ-wrap{padding:2px 0 6px}
.occ-q{font-size:15px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px;padding:0 2px}
.occ-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.occ-row::-webkit-scrollbar{display:none}
.occ-card{flex-shrink:0;width:104px;height:120px;border-radius:18px;padding:14px;cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;transition:transform var(--t) var(--spring)}
/* گرادیانِ هر کارت به‌صورتِ style خطی در HTML است و بعضی‌شان خیلی روشن‌اند
   (مثلِ #f6d365→#fda085): متنِ سفید روی آن‌ها ۳٫۰۳:۱ اندازه‌گیری شد.
   به‌جای عوض‌کردنِ دوازده رنگ — که هویتِ رنگیِ کارت‌ها را از بین می‌برد — یک
   اسکریمِ یکنواخت زیرِ متن می‌نشیند. آلفا روی هر دوازده توقفِ گرادیان حل شد:
   ۰٫۵۰ کمینه‌ای است که بدترین حالت را به ۴٫۶۱:۱ می‌رساند. */
/* محتوا باید بالای اسکریمِ ::after بنشیند، وگرنه خودِ متن هم کم‌جان می‌شود. */
.occ-card > *{position:relative;z-index:1}
/* ۰۹-۱۳: ایموجیِ بالای کارتِ مناسبت رفت؛ برچسب به پایینِ کارت می‌نشیند (مثلِ کاشی). */
.occ-card{justify-content:flex-end}
.occ-card:active{transform:scale(.96)}
.occ-card.on{outline:3px solid var(--t1);outline-offset:2px}
/* اسکریمِ خوانایی. قبلاً «transparent 40% → rgba(0,0,0,.28)» بود و متنِ سفیدِ
   .occ-label را روی گرادیان‌های روشن (مثلِ #f6d365→#fda085) به ۳٫۰۳:۱ می‌رساند.
   آلفا روی هر دوازده توقفِ رنگِ کارت‌ها حل شد: ۰٫۵۰ کمینه‌ی قبولی است، اینجا
   با حاشیه تا ۰٫۶۲ در پایین می‌رود چون متن همان‌جاست. بالای کارت سبک می‌ماند
   تا رنگِ هویتیِ هر مناسبت دیده شود. */
.occ-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to top,rgba(12,8,24,.62) 0%,rgba(12,8,24,.52) 50%,rgba(12,8,24,.26) 100%)}
.occ-emoji{font-size:30px;position:relative;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
.occ-label{font-size:14px;font-weight:800;color:#fff;position:relative;line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.occ-sub{font-size:11px;color:rgba(255,255,255,.9);position:relative;margin-top:2px;font-weight:600}

/* ═══ Trips: گالریِ خاطراتِ سینمایی (نسل‌Z) ═══ */
.trips-summary{display:flex;align-items:center;justify-content:space-around;background:var(--s-50);border:none;border-radius:var(--r-xl);padding:18px 8px;margin-bottom:20px}
.ts-stat{text-align:center;flex:1}
.ts-v{font-size:var(--fs-2xl);font-weight:900;color:var(--t1);line-height:1}
.ts-l{font-size:11px;color:var(--t3);margin-top:5px;font-weight:600}
.ts-div{width:1px;height:32px;background:var(--border)}
.trip-card{background:var(--card-solid);border:none;border-radius:var(--r-2xl);overflow:hidden;margin-bottom:16px;box-shadow:none;transition:transform var(--motion-slow) var(--spring),box-shadow var(--motion-slow) var(--ease)}
.trip-card:active{transform:scale(.98)}
.trip-card.up{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--blue) 40%,transparent)}
.trip-card-hero{position:relative;height:104px;display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden;container-type:inline-size}
.trip-card-word{margin:12px 16px;white-space:nowrap;font-size:min(11cqi,calc(44cqi / var(--len,4)));font-weight:var(--weight-display);line-height:var(--lh-tight);color:rgba(255,255,255,.96);text-shadow:0 2px 14px rgba(0,0,0,.22)}
.trip-card-status{position:absolute;top:12px;right:12px;z-index:1;font-size:11px;font-weight:800;padding:5px 11px;border-radius:100px;background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.28);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.trip-card-status.up{background:rgba(18,161,80,.32);border-color:rgba(52,211,153,.5)}
.trip-card-status.cancelled{background:rgba(0,0,0,.28)}
.trip-card-body{padding:16px}
.trip-card-name{font-size:var(--fs-xl);font-weight:800;color:var(--t1);margin-bottom:8px}
.trip-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--t2);margin-bottom:6px}
.tcm-dot{color:var(--t4)}
.trip-card-code{font-size:12px;color:var(--t3)}
.trip-card-code b{color:var(--t1);letter-spacing:.5px}
.trip-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.trips-empty{text-align:center;padding:60px 20px}
.trips-empty-emoji{font-size:var(--fs-4xl);margin-bottom:16px}
.trips-empty-title{font-size:18px;font-weight:800;color:var(--t1)}
.trips-empty-sub{font-size:14px;color:var(--t3);margin-top:4px}

/* ═══ Loyalty: کارت سینمایی + count-up ═══ */
.loy-card{position:relative;overflow:hidden}
.loy-card-mesh{position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 55% at 82% 15%,rgba(255,255,255,.28),transparent 60%),radial-gradient(50% 55% at 15% 85%,rgba(255,138,75,.35),transparent 62%);mix-blend-mode:screen;animation:rpMesh 12s ease-in-out infinite alternate;z-index:0}
.loy-card>*{position:relative;z-index:1}

/* ═══ Accessibility: نشانگرِ فوکوسِ کیبورد (فقط برای کاربرانِ کیبورد، نه موس) ═══ */
:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:8px}
/* عناصرِ تعاملی حداقلِ اندازه‌ی لمسیِ ۴۴px (استانداردِ موبایل) */
button,[role="button"],.botnav-item,a{min-height:0}
.botnav-item{min-height:44px}
/* احترام به کاهشِ حرکت — برای کاربرانی که حرکت اذیتشان می‌کند */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ═══ Waitlist: تجربه‌ی سینمایی (نسل‌Z) ═══ */
.wl-join-hero{position:relative;height:88px;border-radius:var(--r-2xl);overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:linear-gradient(135deg,#6A4BFF,#9D4EDD)}
.wl-join-mesh{position:absolute;inset:0;background:radial-gradient(50% 60% at 78% 20%,rgba(255,255,255,.3),transparent 60%),radial-gradient(55% 60% at 18% 82%,rgba(255,138,75,.35),transparent 62%);mix-blend-mode:screen;animation:rpMesh 11s ease-in-out infinite alternate}
.wl-join-emoji{font-size:var(--fs-4xl);z-index:1;filter:drop-shadow(0 6px 16px rgba(0,0,0,.3))}
.wl-join .wl-benefits{display:flex;flex-direction:column;gap:10px}
.wl-benefit{display:flex;align-items:center;gap:12px;text-align:right;background:var(--glass-2);border:1px solid var(--glass-brd);border-radius:var(--r-lg);padding:12px 14px}
.wl-bene-ic{font-size:22px;flex-shrink:0}
.wl-benefit b{display:block;font-size:14px;color:var(--t1);font-weight:700}
.wl-benefit small{display:block;font-size:12px;color:var(--t3);margin-top:2px}
/* بنر آفر (میز آماده شد) — سینمایی */
.wl-offer-banner{position:relative;overflow:hidden;background:linear-gradient(135deg,#12A150,#16A34A);border-radius:var(--r-2xl);padding:24px 16px;box-shadow:0 12px 40px rgba(18,161,80,.35)}
.wl-offer-mesh{position:absolute;inset:0;background:radial-gradient(50% 60% at 75% 15%,rgba(255,255,255,.32),transparent 60%),radial-gradient(50% 55% at 20% 85%,rgba(255,255,255,.18),transparent 62%);mix-blend-mode:screen;animation:rpMesh 8s ease-in-out infinite alternate}
.wl-offer-emoji{display:block;text-align:center;font-size:var(--fs-4xl);position:relative}
.wl-timer{text-align:center;font-size:30px;font-weight:900;color:#fff;letter-spacing:2px;margin:10px 0 4px;position:relative;font-variant-numeric:tabular-nums}
/* حلقه‌ی موقعیت در صف — با پالسِ زنده */
.wl-position-ring{position:relative;width:132px;height:132px;margin:8px auto;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--grad);box-shadow:0 10px 34px rgba(106,75,255,.4)}
.wl-ring-pulse{position:absolute;inset:0;border-radius:50%;border:2.5px solid var(--blue);animation:wlPulse 2s ease-out infinite}
@keyframes wlPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.wl-pos-num{font-size:48px;font-weight:900;color:#fff;line-height:1;text-shadow:0 2px 10px rgba(0,0,0,.2)}
.wl-pos-label{font-size:12px;color:rgba(255,255,255,.9);font-weight:600;margin-top:2px}
.wl-eta{text-align:center;font-size:14px;color:var(--t2);margin-top:12px}
.wl-eta b{color:var(--t1);font-size:16px}
.wl-vip-badge{display:inline-block;margin-top:12px;background:linear-gradient(135deg,#FBBF24,#F59E0B);color:#3D2E00;font-weight:800;font-size:12px;padding:6px 14px;border-radius:100px}
.wl-hint{font-size:12px;color:var(--t3);margin-top:16px;line-height:1.6;padding:0 12px}

/* ═══════════ چت مشتری ↔ رستوران ═══════════ */
.chat-list-head,.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;background:var(--bg,#0b0b12);z-index:5}
.chat-list-head h2{font-size:18px;font-weight:800;margin:0}
.icon-btn{background:rgba(255,255,255,.06);border:none;color:inherit;width:38px;height:38px;border-radius:12px;font-size:18px;cursor:pointer;display:grid;place-items:center}
.chat-list{padding:8px 0}
.chat-row{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;transition:background .15s}
.chat-row:active{background:rgba(255,255,255,.05)}
.chat-row-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;flex-shrink:0}
.chat-row-main{flex:1;min-width:0}
.chat-row-top{display:flex;align-items:center;gap:8px}
.chat-row-name{font-weight:700;font-size:15px}
.chat-row-tag{font-size:11px;color:var(--blue);background:rgba(106,75,255,.12);padding:2px 8px;border-radius:8px}
.chat-row-preview{font-size:13px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.chat-badge{background:var(--red);color:#fff;font-size:12px;font-weight:800;min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;padding:0 6px}
.chat-empty,.chat-empty-thread{text-align:center;color:rgba(255,255,255,.45);padding:48px 20px;font-size:14px;line-height:1.9}
/* thread */
#page-chat{display:flex;flex-direction:column;height:100vh;height:100dvh}
.chat-head-title{font-weight:800;font-size:16px}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.chat-bubble{max-width:78%;padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.6;word-break:break-word}
.chat-bubble.mine{align-self:flex-start;background:linear-gradient(135deg,var(--blue),#5a3fe0);color:#fff;border-bottom-right-radius:4px}
.chat-bubble.theirs{align-self:flex-end;background:rgba(255,255,255,.09);border-bottom-left-radius:4px}
.chat-bubble.pending{opacity:.6}
.chat-bubble-time{font-size:10px;opacity:.7;margin-top:4px;text-align:left}
.chat-input-bar{display:flex;gap:8px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);background:var(--bg,#0b0b12)}
.chat-input{flex:1;background:rgba(255,255,255,.07);border:none;border-radius:22px;padding:11px 16px;color:inherit;font-size:14px;font-family:inherit}
.chat-input:focus{outline:2px solid var(--blue)}
.chat-send{width:44px;height:44px;border-radius:50%;border:none;background:var(--blue);color:#fff;font-size:18px;cursor:pointer;flex-shrink:0}
.rp-msg-btn{width:52px;flex-shrink:0;font-size:20px;padding:0}

/* نشانگرِ وضعیتِ «باز» — رنگِ semantic از Design System (جایگزینِ emoji) */
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--success);display:inline-block;
  box-shadow:0 0 0 3px rgba(18,161,80,0.25);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent);animation:live-pulse 2s var(--ease-out) infinite}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.55}}


/* Pull-to-Refresh (C15) */
.ptr{position:fixed;top:-52px;left:50%;transform:translateX(-50%);z-index:80;
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--card,#12131a);border:1px solid var(--s-200,rgba(255,255,255,.10));
  box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .18s ease}
.ptr.show{opacity:1}
.ptr-spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--s-300,rgba(255,255,255,.25));
  border-top-color:var(--brand,#7c5cff);transition:transform .12s ease}
.ptr.ready .ptr-spin{border-top-color:var(--brand,#7c5cff);transform:rotate(180deg)}
.ptr.spinning .ptr-spin{animation:ptr-rot .7s linear infinite}
@keyframes ptr-rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .ptr{transition:none}.ptr-spin{transition:none}.ptr.spinning .ptr-spin{animation:none}
  .ptr.ready .ptr-spin{transform:none}
}

/* Swipe-actions روی کارت‌های رزرو (C16) */
.trip-card.has-swipe{position:relative}
/* ۰۹-۱۳: سطحِ مات. با var(--s-50) (۴٪ سفید در تمِ تاریک) پدِ قرمزِ swipe از پشتِ کارت دیده می‌شد (اسکرین‌شات). */
.trip-card-inner{position:relative;z-index:1;background:var(--card-solid);border-radius:inherit;
  transition:transform .3s var(--spring);will-change:transform}
.trip-card.swiping .trip-card-inner{transition:none}
.trip-swipe-pad{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;
  gap:8px;font-weight:800;font-size:14px;color:#fff}
.trip-swipe-pad.cancel{background:linear-gradient(90deg,var(--red,#e5484d),rgb(173,51,72));background:linear-gradient(90deg,var(--red,#e5484d),color-mix(in srgb,var(--red,#e5484d) 68%,#000))}
.trip-swipe-pad.repeat{background:linear-gradient(90deg,var(--brand,#7c5cff),rgb(72,51,173));background:linear-gradient(90deg,var(--brand,#7c5cff),color-mix(in srgb,var(--brand,#7c5cff) 68%,#000))}
.trip-card.ready .trip-swipe-pad{filter:brightness(1.08)}
@media (prefers-reduced-motion: reduce){ .trip-card-inner{transition:none} }

/* ویرایشِ inline پروفایل (C17) */
.set-edit{padding:14px 16px;border-radius:14px;background:var(--s-50);border:1px solid var(--glass-brd);margin:2px 0}
.set-edit-row{display:flex;gap:10px;flex-wrap:wrap}
.set-input{flex:1;min-width:120px;padding:11px 13px;border-radius:11px;border:1px solid var(--s-200,rgba(255,255,255,.10));
  background:var(--s-100,rgba(255,255,255,.04));color:var(--t1);font-family:inherit;font-size:15px;outline:none;
  transition:border-color .18s ease}
.set-input:focus-visible{border-color:var(--brand,#7c5cff)}
.set-edit-acts{display:flex;gap:8px;margin-top:12px}

/* ── موجودی‌های اقتصاد (سکه و تجربه) ────────────────────────────
   این دو یک جفت‌اند — هر دو «چیزی که داری» — پس روی صفحه‌ی بزرگ‌تر کنارِ
   هم می‌نشینند نه پشتِ سرِ هم. margin-top کارت داخل صفر می‌شود چون
   فاصله را خودِ گرید می‌دهد. */
.econ-balances{display:grid;gap:12px;margin-top:12px}
.econ-balances > .loy-action-card{margin-top:0}
@media (min-width:560px){.econ-balances{grid-template-columns:1fr 1fr}}

/* ═══ مدیای واقعیِ رستوران (ممیزیِ ۲۰۲۶-۰۸-۲۴) — عکسِ تأییدشده، لوگو، گالری ═══ */
.rp-hero--photo{background-size:cover;background-position:center}
.rp-hero-logo{position:absolute;top:44%;left:50%;transform:translate(-50%,-58%);width:96px;height:96px;border-radius:24px;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.35);z-index:1}
.rp-gallery{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.rp-gallery-item{flex:0 0 auto;margin:0;scroll-snap-align:start}
.rp-gallery-item img{width:210px;height:140px;object-fit:cover;border-radius:var(--radius-lg,14px);display:block;background:var(--s-100,#222)}
.rp-gallery-item figcaption{font-size:11.5px;color:var(--t3);margin-top:4px;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-address{font-size:13px;color:var(--t2);display:flex;align-items:center;gap:6px;margin-top:8px}
.menu-thumb{width:44px;height:44px;border-radius:var(--radius-sm);object-fit:cover;display:block}

/* ═══ ۰۹-۱۳: کشف روی دسکتاپ — یک ستونِ هم‌عرض، نه نوارهای راست‌چینِ نیمه‌پر ═══
   پیش از این در ۱۴۴۰px ردیفِ مناسبت‌ها (۶ × ۱۰۴px) و چیپ‌ها به راست چسبیده بودند و
   نیمه‌ی چپِ صفحه خالی بود، در حالی که شبکه ۱۱۴۰px عرض داشت (اسکرین‌شاتِ ۰۹-۱۳).
   حالا همه‌ی صفحه‌ی کشف در عرضِ اکسپلورِ وبِ اینستاگرام (۹۳۵px) می‌نشیند: مناسبت‌ها
   شش ستونِ برابر، چیپ‌ها می‌شکنند، شبکه همان سه ستون. */
@media(min-width:880px){
  #page-discover .wrap{max-width:975px}
  #page-discover .occ-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible}
  #page-discover .occ-card{width:auto}
  #page-discover .chips{flex-wrap:wrap;overflow:visible}
  /* بخشِ فید پدینگِ افقی ندارد (لبه‌به‌لبه روی موبایل)؛ روی دسکتاپ با ردیف‌های بالا هم‌لبه می‌شود */
  #page-discover .wrap.section{padding-inline:var(--sp-5)}
}