/* پایه‌ی مشترکِ صفحه‌های عمومی: رنگ‌ها، نوارِ بالا (حساب و اعتبار)، کارتِ رسپی، ردیفِ افقیِ کارت‌ها، تعرفه، پیامِ کوتاه، تور.
   همان هویتِ بصریِ static/bachi-ui.css؛ صفحه‌های قدیمی تا جایگزین شدن همان را می‌خوانند. */
:root{--orange:#E06236;--ink:#1F1A17;--muted:#7A6F66;--faint:#A99E94;--cream:#F9F8F6;--paper:#fff;--line:#E9E3DA;
  --acc-d:#9C3F1C;--acc-s:#FBEDE6;--green:#2E6B47;--gold:#D4A359;--gold-s:#F6EBD5;--gold-d:#7A5A1E;--shadow:0 16px 40px rgba(60,40,20,.08);
  --chat:#FFFBF2;--side:#F4EEE8;--scrim:rgba(20,14,8,.45);--r-lg:22px;--r-md:16px;--r-sm:12px;--tap:44px;
  --teal:#0F7C80}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Vazirmatn,system-ui,sans-serif}
[hidden]{display:none!important}
bdi{unicode-bidi:isolate}

/* ---------- نوارِ بالا ---------- */
.nav{height:62px;padding:0 16px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;
  background:rgba(249,248,246,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .sp{flex:1}
.back{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;
  justify-content:center;cursor:pointer;color:var(--ink);text-decoration:none;font-size:18px;flex:0 0 auto}
.logo{font-size:22px;font-weight:900;color:var(--ink);text-decoration:none}.logo span{color:var(--orange)}
.nc-tag{font-size:12px;color:var(--muted)}
.u-chip{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px}
.u-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:99px;
  padding:4px 5px 4px 12px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.u-av{width:28px;height:28px;border-radius:50%;background:var(--acc-s);color:var(--acc-d);display:flex;align-items:center;
  justify-content:center;font-weight:900;font-size:13px;flex:0 0 auto}
.u-login{padding:7px 14px}
.u-menu{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.12);padding:6px;display:none;z-index:60}
.u-menu.on{display:block}
.u-menu a,.u-menu button{display:block;width:100%;text-align:right;border:0;background:none;font:inherit;font-size:13px;font-weight:600;
  color:var(--ink);padding:9px 10px;border-radius:9px;text-decoration:none;cursor:pointer}
.u-menu a:hover,.u-menu button:hover{background:var(--cream)}
/* شمارنده‌ی اعتبار (ص۲۸) و حلقه‌ی «چقدر از اعتبارِ جاری مانده» (۴ اکتبر) */
.cr-chip{display:inline-flex;align-items:center;gap:3px;background:var(--gold-s);color:#7A5A1E;border:0;border-radius:99px;
  padding:6px 11px;font:inherit;font-size:12px;font-weight:800;white-space:nowrap;cursor:pointer}
.cr-chip b{font-weight:900}
.cr-ring{width:15px;height:15px;border-radius:50%;flex:0 0 auto;margin-left:2px;
  background:conic-gradient(var(--gold) var(--p,0%),#EADBBE 0);-webkit-mask:radial-gradient(circle,transparent 4px,#000 4.5px);
  mask:radial-gradient(circle,transparent 4px,#000 4.5px)}
/* منوی حساب (۲۳ اکتبر): بخش‌های پنلِ کاربر همین‌جا؛ نقطه روی آواتار وقتی آشپز جوابِ تازه داده */
.u-btn{position:relative}
.u-dot{position:absolute;top:1px;left:1px;width:10px;height:10px;border-radius:50%;background:var(--orange);border:2px solid #fff}
.u-menu{width:min(270px,calc(100vw - 24px))}
.u-menu .u-who{display:flex;flex-direction:column;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.u-menu .u-who b{font-size:14px}
.u-menu a.u-item{display:flex;align-items:center;gap:8px;min-height:44px}
.u-item span{flex:1}
.u-item small{font-size:11px;color:var(--muted);font-weight:700}
.u-item .u-new{background:var(--orange);color:#fff;border-radius:99px;padding:1px 8px;font-size:10.5px;font-weight:800}
.u-menu hr{border:0;border-top:1px solid var(--line);margin:4px 6px}
@media(max-width:640px){
  .nav{padding:0 12px;gap:8px}
  .u-btn span:not(.u-av):not(.u-dot){display:none}
  .u-btn{padding:4px}
  .u-login{padding:7px 12px}
  .cr-chip{padding:5px 9px;font-size:11.5px}
  .cr-chip .w{display:none}
}

/* ---------- کارتِ رسپی ---------- */
/* بالا آمدنِ کارت روی موس مالِ خودِ کارت است، نه عکس: transform روی .rimg آن را لایه‌ی جدا می‌کرد و لینکِ کارت (.rhit)
   روی دکمه‌ی ذخیره می‌نشست — روی دسکتاپ زدنِ ذخیره رسپی را باز می‌کرد (عظیم، ۲۳ اکتبر) */
.rcard{position:relative;min-width:0;transition:transform .2s}
.rcard:hover{transform:translateY(-3px)}
.rhit{position:absolute;inset:0;z-index:1;border-radius:18px}
.rimg{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#EFE8DF}
.rimg img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dish-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px}
.rsave{position:absolute;top:7px;left:7px;z-index:2;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.94);
  border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.rsave svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.9;stroke-linejoin:round}
.rsave.on svg{fill:var(--orange);stroke:var(--orange)}
.rav{position:absolute;bottom:8px;left:8px;width:40px;height:40px;border-radius:50%;border:2px solid #fff;overflow:hidden;
  background:var(--orange);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.18)}
.rav img{width:100%;height:100%;object-fit:cover}
.rbrand{position:absolute;bottom:9px;right:8px;background:var(--orange);color:#fff;font-size:10px;font-weight:800;border-radius:99px;padding:3px 8px}
.rtitle{font-size:14px;font-weight:800;line-height:1.65;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rmeta{font-size:12px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- ردیفِ افقیِ کارت‌ها (ui/row.js): روی گوشی کارتِ بعدی از لبه پیداست؛ روی دسکتاپ فلش؛ تهِ ردیف بقیه می‌آید ---------- */
.hscroll{position:relative;flex-basis:100%;min-width:0;margin:2px 0 0}
.hscroll .track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 6px 6px;scrollbar-width:none;overscroll-behavior-x:contain}
.hscroll .track::-webkit-scrollbar{display:none}
.hscroll .nav{display:none;position:absolute;top:calc(50% - 22px);width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);box-shadow:var(--shadow);font-size:20px;line-height:1;z-index:2;cursor:pointer}
.hscroll .prev{right:-4px}.hscroll .next{left:-4px}
@media (hover:hover) and (min-width:700px){.hscroll .nav{display:block}.hscroll .nav[hidden]{display:none}}
.carousel .rcard{flex:0 0 138px;scroll-snap-align:start}
.carousel .nav{top:calc(50% - 40px)}
/* تهِ ردیف (s108): «…» تا کارت‌های بعدی برسند؛ «همه‌ش همین بود» وقتی تمام شد */
.carousel .more-tail,.carousel .more-end{display:grid;place-items:center;align-self:stretch;min-height:120px;border:1.5px dashed var(--line);
  border-radius:var(--r-sm);color:var(--muted);font-size:12.5px;text-align:center;padding:8px}
.more-tail .dots{font-size:22px;font-weight:900;letter-spacing:2px;animation:more-pulse 1.2s ease-in-out infinite}
@keyframes more-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.more-tail .dots{animation:none}}
@media (hover:hover) and (min-width:700px){.carousel .rcard{flex-basis:156px}}
.retry{display:block;margin-top:6px;border:1px solid var(--line);background:var(--cream);border-radius:99px;padding:3px 12px;font-size:12.5px;
  color:var(--acc-d);font-weight:700}

/* ---------- تعرفه و «درِ آزمایشی»: برگه‌ای از پایین روی گوشی، وسطِ صفحه روی دسکتاپ؛ بالای گفتگو ---------- */
.pw-mask{position:fixed;inset:0;background:rgba(20,14,8,.45);z-index:90}
.pw{position:fixed;z-index:91;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto;background:var(--cream);
  border-radius:24px 24px 0 0;padding:18px 16px 22px;box-shadow:0 -10px 40px rgba(0,0,0,.18)}
@media(min-width:700px){.pw{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:400px;border-radius:24px}}
.pw-x{position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:18px;cursor:pointer;color:var(--ink)}
.pw h3{font-size:16px;margin:4px 0 2px}
.pw-sub{font-size:12.5px;color:var(--muted);margin:0 0 12px}
.pw-meter{height:8px;background:#EFE6D6;border-radius:9px;overflow:hidden;margin:10px 0 4px}
.pw-meter i{display:block;height:100%;background:var(--gold);border-radius:9px}
.pw-meter-l{font-size:11.5px;color:var(--muted)}
.pw-how{background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px 30px 9px 12px;font-size:12px;margin:10px 0 12px;line-height:1.9}
/* کارتِ بسته (ui/plans.js): همین در پنجره‌ی خرید و در «اعتبار و بسته‌ها»ی پنلِ کاربر */
.pl-list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.pl-card{display:flex;flex-direction:column;gap:8px;width:100%;text-align:right;background:#fff;border:1.5px solid var(--line);
  border-radius:20px;padding:14px 16px;font-family:inherit;color:var(--ink);cursor:pointer}
.pl-card.on{background:#FFF8F4;border:2px solid var(--orange);box-shadow:0 6px 18px rgba(224,98,54,.14)}
.pl-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pl-name{font-size:15.5px;font-weight:900}
.pl-tag{display:inline-block;background:var(--orange);color:#fff;font-size:10.5px;font-weight:800;border-radius:99px;padding:1px 9px;margin-right:6px;
  vertical-align:middle}
.pl-price{font-size:18px;font-weight:900;white-space:nowrap}
.pl-price small{font-size:11.5px;font-weight:700}
.pl-chips{display:flex;gap:6px;flex-wrap:wrap}
.pl-chips span{background:var(--cream);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:700}
.pl-card.on .pl-chips span{background:#FBE6DC}
.pl-line{font-size:12.5px;color:var(--muted)}
.pl-pitch{font-size:12px;font-weight:800;color:var(--acc-d)}
.pl-note{font-size:11.5px;color:var(--muted);line-height:1.9;margin:8px 2px 0}
.pw-buy{display:block;width:100%;border:0;border-radius:16px;background:var(--orange);color:#fff;font-family:inherit;font-size:14px;
  font-weight:800;padding:12px;cursor:pointer;margin-top:4px}
.pw-buy:disabled{opacity:.6;cursor:default}
.pw-fine{font-size:11px;color:var(--faint);text-align:center;margin-top:8px}
.pw-soon{text-align:center;padding:12px 4px 4px}
.pw-soon .big{font-size:34px;line-height:1.3}
.pw-soon b{display:block;font-size:15px;margin:4px 0}
.pw-soon p{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.pw-soon .gift{display:inline-block;background:var(--gold-s);color:#7A5A1E;border-radius:99px;padding:3px 14px;font-size:12.5px;font-weight:800;margin-bottom:12px}

/* ---------- 👍/👎 زیرِ جواب (ui/vote.js) و خطِ «یک اعتبار مصرف شد» ---------- */
.vote{display:flex;flex-wrap:wrap;gap:6px}
.vote button[data-v]{border:1px solid var(--line);background:#fff;border-radius:99px;width:34px;height:28px;font-size:13px;line-height:1;
  cursor:pointer;opacity:.75}
.vote button[data-v].on{opacity:1;border-color:var(--orange);background:var(--acc-s)}
.vote-note{flex-basis:100%;display:flex;gap:6px;align-items:flex-end}
.vote-note textarea{flex:1;border:1px solid var(--line);border-radius:12px;padding:7px 9px;font:inherit;font-size:12.5px;resize:none;background:#fff;color:var(--ink)}
.vote-note button{border:0;background:var(--orange);color:#fff;border-radius:99px;padding:6px 14px;font:inherit;font-weight:800;font-size:12.5px;cursor:pointer}
.vote .ok{color:var(--green);font-weight:800;font-size:12.5px}
.cr-tick{align-self:center;font-size:11.5px;font-weight:700;color:#7A5A1E;background:var(--gold-s);border-radius:99px;padding:1px 12px}

/* ---------- پیامِ کوتاه و صفحه‌ی خالی ---------- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;
  border-radius:99px;font-size:13px;font-weight:700;z-index:95;opacity:0;transition:opacity .25s;max-width:calc(100vw - 32px);overflow-wrap:anywhere}
.toast.on{opacity:1}
.nf{text-align:center;padding:80px 20px;color:var(--muted);line-height:2}
.nf a{display:inline-block;margin-top:14px;background:var(--orange);color:#fff;text-decoration:none;font-weight:800;padding:11px 24px;border-radius:12px}

/* ---------- تورِ راهنما ---------- */
.tour-mask{position:fixed;inset:0;z-index:9000;background:rgba(20,14,8,.55);opacity:0;transition:opacity .25s}
.tour-mask.on{opacity:1}
.tour-hole{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(20,14,8,.55);transition:all .35s cubic-bezier(.4,0,.2,1);
  pointer-events:none;border:2px solid #ff7a18}
.tour-pop{position:fixed;z-index:9100;background:#fff;border-radius:16px;padding:16px 18px;width:min(320px,calc(100vw - 32px));
  box-shadow:0 18px 50px rgba(0,0,0,.28);transition:all .35s cubic-bezier(.4,0,.2,1)}
.tour-step{font-size:11px;font-weight:800;color:#e8590c;margin-bottom:6px}
.tour-title{font-size:15px;font-weight:800;color:#2c2621;margin-bottom:6px}
.tour-text{font-size:13px;line-height:1.95;color:#6b6259}
.tour-nav{display:flex;align-items:center;gap:8px;margin-top:14px}
.tour-btn{border:none;border-radius:99px;padding:9px 18px;font-family:inherit;font-weight:800;font-size:12.5px;cursor:pointer}
.tour-next{background:#e8590c;color:#fff}
.tour-prev{background:#f4efe9;color:#6b6259}
.tour-skip{margin-right:auto;background:none;border:none;font-family:inherit;font-size:11.5px;color:#9a9188;cursor:pointer;text-decoration:underline}
.tour-dots{display:flex;gap:4px;justify-content:center;margin-top:10px}
.tour-dots i{width:5px;height:5px;border-radius:50%;background:#e0d5c8}
.tour-dots i.on{background:#e8590c;width:14px;border-radius:99px}
@media(max-width:520px){.tour-pop{width:calc(100vw - 24px)}}