/* پایه‌ی مشترکِ صفحه‌های عمومی: رنگ‌ها، نوارِ بالا (حساب، اعتبار، پخت‌های من)، کارتِ رسپی، تعرفه، پیامِ کوتاه، تور.
   همان هویتِ بصریِ 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}
*{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,.sv-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{min-width:170px}
.u-menu.on,.sv-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)}
.u-plan{display:inline-block;margin:4px 10px 6px;font-size:11px;font-weight:800;border-radius:99px;padding:2px 9px;background:var(--cream);color:var(--muted)}
.u-plan.pro{background:var(--gold-s);color:#7A5A1E}
/* شمارنده‌ی اعتبار (ص۲۸) و حلقه‌ی «چقدر از اعتبارِ جاری مانده» (۴ اکتبر) */
.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)}
.sv-chip{position:relative;flex:0 0 auto}
.my-saved-btn{background:#fff;border:1px solid var(--line);color:var(--ink);font:inherit;font-weight:700;border-radius:99px;
  padding:8px 14px;font-size:12px;cursor:pointer;white-space:nowrap}
.sv-menu{width:min(290px,calc(100vw - 24px));max-height:60vh;overflow-y:auto}
.sv-row{display:flex;align-items:center;gap:4px}
.sv-row a{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;padding:9px 10px;border-radius:9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-row a:hover{background:var(--cream)}
.sv-row button{border:0;background:none;color:var(--muted);font-size:17px;cursor:pointer;padding:4px 8px;border-radius:8px}
.sv-empty{font-size:12.5px;color:var(--muted);line-height:1.9;padding:8px 10px}
@media(max-width:640px){
  .nav{padding:0 12px;gap:8px}
  .my-saved-btn{padding:6px 10px;font-size:11.5px}
  .my-saved-btn .l{display:none}
  .u-btn span:not(.u-av){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}
}

/* ---------- کارتِ رسپی ---------- */
.rcard{position:relative;min-width:0}
.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;transition:transform .2s}
.rcard:hover .rimg{transform:translateY(-3px)}
.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}
.rbadge{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.94);color:var(--green);font-size:11px;font-weight:800;border-radius:99px;padding:3px 9px}
.rbadge.low{color:#8A5A12}
.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:30px;height:30px;border-radius:50%;border:2px solid #fff;overflow:hidden;
  background:var(--orange);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.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}

/* ---------- تعرفه و «درِ آزمایشی»: برگه‌ای از پایین روی گوشی، وسطِ صفحه روی دسکتاپ؛ بالای گفتگو ---------- */
.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}
.pw-plan{display:block;width:100%;text-align:right;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 14px;
  margin-bottom:10px;font-family:inherit;color:var(--ink);cursor:pointer}
.pw-plan.on{border-color:var(--orange);box-shadow:0 0 0 4px var(--acc-s)}
.pw-plan .t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pw-plan .t b{font-size:14px}
.pw-plan .t span:last-child{font-size:13px;font-weight:900;color:var(--acc-d);white-space:nowrap}
.pw-plan .q{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.pw-plan .tag{display:inline-block;background:var(--orange);color:#fff;font-size:10px;font-weight:800;border-radius:99px;padding:1px 8px;margin-right:6px}
.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)}}