/* ============================================================
   IndianBistro14 — Design System: COMPONENTS
   One block per reusable component. Values verbatim from the
   Phase 1 frozen UI. Each component is independently styled so
   it can be reused across pages without change.
   ============================================================ */

/* ---------- Buttons: back / favorite / signature ---------- */
.back{border:none;background:var(--white);color:var(--burg);border-radius:11px;padding:11px 17px;
  font-weight:700;cursor:pointer;box-shadow:var(--shadow-sm);display:flex;gap:7px;align-items:center}
.fav{border:none;background:rgba(255,255,255,.92);color:var(--red);font-weight:700;cursor:pointer;
  padding:11px 16px;border-radius:11px;display:flex;gap:8px;align-items:center;box-shadow:var(--shadow-sm)}
.sig{background:var(--red);color:#fff;border:none;border-radius:11px;padding:11px 18px;font-weight:700;
  display:flex;gap:8px;align-items:center;box-shadow:var(--shadow-sm)}

/* ---------- Sauce flag (over photo) ---------- */
.sauceflag{position:absolute;left:20px;bottom:20px;z-index:3;background:rgba(255,255,255,.94);
  border:1px solid var(--gold);border-radius:12px;padding:9px 14px;font-size:13px;box-shadow:var(--shadow-sm)}
.sauceflag b{color:var(--red)}

/* ---------- Dietary badge row ---------- */
.diet{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;min-height:28px}
.dbadge{font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;border:1px solid transparent;
  display:inline-flex;align-items:center;gap:5px}
.d-veg{background:var(--green-wash);color:var(--green);border-color:#cfe8cf}
.d-vgn{background:#e6f4ea;color:#1f7a3d;border-color:#bfe4cb}
.d-fav{background:#fbf2dc;color:#9a7414;border-color:#ecd9a6}
.d-nut{background:#f3ece4;color:#7a5a32;border-color:#e2d2bf}
.d-gf{background:#e7f1f5;color:var(--gf);border-color:#c4dee8}
.d-dairy{background:#eef3fb;color:#3a5a8a;border-color:#cfe0f2}
.d-gluten{background:#f6efe0;color:#8a6a2a;border-color:#e6d3ab}
.d-egg{background:#fdf4e3;color:#9a7414;border-color:#eddcae}
.d-spicy{background:#fdeaea;color:var(--red);border-color:#f2c9c9}
.d-ask{background:#f1ece6;color:#6a5f52;border-color:#ddd2c4}

/* ---------- Description + filling note ---------- */
.desc{font-size:16.5px;line-height:1.55;color:var(--ink);max-width:430px;min-height:74px}
.fillnote{font-size:15px;line-height:1.5;color:var(--burg);max-width:430px;margin-top:10px;
  padding-left:12px;border-left:3px solid var(--gold);font-style:italic;
  opacity:0;transform:translateY(-2px);transition:.25s}
.fillnote.show{opacity:1;transform:translateY(0)}

/* ---------- Info strip (Flavor / Spice / Best For) ---------- */
.infostrip{display:grid;grid-template-columns:1fr 1fr 1fr;margin:20px 0 0;border-radius:13px;
  overflow:hidden;background:var(--faint);border:1px solid #ecd29c;max-width:470px}
.ibox{padding:13px 14px;border-right:1px solid #e3c98f;font-size:13px;color:var(--ink);
  display:flex;gap:9px;align-items:flex-start}
.ibox:last-child{border-right:0}.ibox .ic{font-size:17px;line-height:1}
.ibox b{display:block;color:var(--red);font-size:13px;margin-bottom:3px}

/* ---------- Lower grid (choices | did-you-know) ---------- */
.lower{display:grid;grid-template-columns:1fr 320px;gap:0;border-top:1px solid #e9d9b3}
.choosecol{padding:22px 28px}
.dyk-col{padding:22px 24px;border-left:1px solid #e9d9b3;background:linear-gradient(180deg,#fffdf7,#f7ecd3)}
@media(max-width:900px){.lower{grid-template-columns:1fr}}

/* ---------- Veg/Non-Veg fork selector ---------- */
.lab{font-weight:700;font-size:15px;margin-bottom:9px}
.fork{display:grid;grid-template-columns:1fr 1fr;gap:11px;max-width:560px}
.forkbtn{cursor:pointer;border:2px solid #e6ddcf;background:#fff;border-radius:14px;padding:13px 15px;
  display:flex;gap:11px;align-items:center;transition:.15s;text-align:left}
.forkbtn:hover{transform:translateY(-2px)}
.dotmark{width:20px;height:20px;border-radius:5px;border:2px solid;display:grid;place-items:center;flex:none}
.dotmark::after{content:"";width:9px;height:9px;border-radius:50%}
.forkbtn .ft{font-weight:700;font-size:15px}.forkbtn .fs{font-size:11.5px;color:var(--mute)}
.fork-veg .dotmark{border-color:var(--green)}.fork-veg .dotmark::after{background:var(--green)}
.fork-non .dotmark{border-color:#7a3b12}.fork-non .dotmark::after{background:#7a3b12}
.fork-non[aria-pressed="true"]{border-color:#7a3b12;background:#fdf6f0;box-shadow:0 0 0 3px rgba(122,59,18,.10)}
.fork-veg[aria-pressed="true"]{border-color:var(--green);background:#f3faf3;box-shadow:0 0 0 3px rgba(47,125,50,.12)}

/* ---------- Filling / protein selector ---------- */
.choose{margin-top:18px}
.hint{font-size:12.5px;color:var(--mute);margin:-4px 0 10px}
/* Compact protein selector (RC2): horizontal pills that wrap, instead of a
   4-up grid of large cards. Saves vertical space on tablets, cleaner look. */
.choices{display:flex;flex-wrap:wrap;gap:8px;max-width:600px}
.choice{cursor:pointer;border:1.5px solid #e6ddcf;background:#fff;border-radius:999px;
  padding:5px 15px 5px 5px;transition:.15s;display:flex;flex-direction:row;gap:9px;align-items:center}
.choice:hover{border-color:var(--gold);transform:translateY(-1px)}
.choice[aria-pressed="true"]{border-color:var(--red);background:#fff6f6;box-shadow:0 0 0 3px rgba(177,18,23,.10)}
.choice .thumb{width:34px;height:34px;border-radius:50%;background-size:cover;background-position:center;flex:none}
.choice .nm{font-weight:700;font-size:13.5px;color:#4a453c;line-height:1}
.choice[aria-pressed="true"] .nm{color:var(--red)}
.choice .pr{font-size:12px;color:var(--mute);font-weight:600;line-height:1}

/* Optional add-ons (RC2, item pages): light "make it a meal" chips */
.addon-block{margin-top:20px}
.addon-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;max-width:600px}
.addon-chip{cursor:pointer;border:1.5px solid #e6ddcf;background:#fff;border-radius:999px;
  padding:9px 15px;display:flex;gap:9px;align-items:center;transition:.15s;font-family:var(--font-body)}
.addon-chip:hover{border-color:var(--gold);transform:translateY(-1px)}
.addon-chip .ac-nm{font-weight:700;font-size:13px;color:var(--ink)}
.addon-chip .ac-pr{font-size:12px;color:var(--red);font-weight:700}
.addon-chip[data-added="true"]{border-color:var(--green);background:#f3faf3}
.addon-chip[data-added="true"] .ac-nm{color:var(--green)}

/* ---------- Make-it-vegan bar + switch ---------- */
.veganbar{margin-top:16px;max-width:560px;display:none;align-items:center;gap:12px;
  background:#f3faf3;border:1px solid #cfe8cf;border-radius:13px;padding:12px 14px}
.veganbar.show{display:flex}
.veganbar .vt{font-size:13px;color:#256b2b;line-height:1.4}
.veganbar .vt b{color:#1f7a3d}
.vswitch{margin-left:auto;width:46px;height:26px;border-radius:999px;background:#cdd6cd;position:relative;
  cursor:pointer;transition:.18s;flex:none;border:none}
.vswitch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.vswitch[aria-pressed="true"]{background:#1f7a3d}.vswitch[aria-pressed="true"]::after{left:23px}

/* ---------- Spice / heat selector (six levels) ---------- */
.heatblock{margin-top:20px;max-width:600px}
.heatopts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:4px}
.heat{cursor:pointer;border:1.5px solid #e6ddcf;background:#fff;border-radius:13px;padding:10px 11px;
  text-align:left;transition:.15s}
.heat:hover{border-color:var(--gold);transform:translateY(-1px)}
.heat[aria-pressed="true"]{border-color:var(--red);background:#fff6f6;box-shadow:0 0 0 3px rgba(177,18,23,.10)}
.heat .hn{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px}
.heat .hn .flames{font-size:10px;letter-spacing:-1px}
.heat .hd{font-size:11px;color:var(--mute);line-height:1.3;margin-top:3px}
.heat[aria-pressed="true"] .hn{color:var(--red)}
@media(max-width:560px){.heatopts{grid-template-columns:1fr 1fr}}

/* ---------- Perfect pairings ---------- */
.pairhead{display:flex;align-items:center;gap:12px;color:var(--red);font-weight:700;margin:24px 0 12px;
  font-family:var(--font-display);font-size:20px}
.pairhead::after{content:"";flex:1;height:1px;background:#e3d3a8}
/* Perfect With cards — reduced size (RC2): smaller image + tighter body so
   the recommendation row is lighter and less scroll-heavy on tablets. */
.pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;max-width:640px}
.pcard{background:#fff;border:1px solid #ead4a4;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column}
.pcard .pi{position:relative;height:70px;background-size:cover;background-position:center}
.pcard .pi .pkind{position:absolute;top:7px;left:7px;background:rgba(255,255,255,.93);color:var(--burg);
  font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:999px;box-shadow:var(--shadow-sm)}
.pcard .pb{padding:9px 11px;display:flex;flex-direction:column;gap:5px;flex:1}
.pcard h4{font-family:var(--font-display);color:var(--red);font-size:14.5px;line-height:1.05}
.pcard p{font-size:11px;color:var(--mute);line-height:1.3;flex:1}
.addpair{border:1.5px solid var(--red);background:#fff;color:var(--red);border-radius:9px;padding:7px;
  font-weight:700;font-size:11.5px;cursor:pointer;transition:.15s;display:flex;align-items:center;
  justify-content:center;gap:6px}
.addpair:hover{background:var(--red);color:#fff}
.addpair[data-added="true"]{background:var(--green);border-color:var(--green);color:#fff}
.addpair.is-off{border-color:#d9cdb6;color:#b3a891;cursor:default;background:#faf7f0}
.addpair.is-off:hover{background:#faf7f0;color:#b3a891}

/* ---------- Did You Know panel ---------- */
.dyk{border:1px solid #e3c98f;border-radius:16px;background:rgba(255,255,255,.55);padding:18px;position:relative;overflow:hidden}
.dyk h3{font-family:var(--font-display);font-size:21px;color:var(--char);margin-bottom:9px}
.dyk p{font-size:14px;line-height:1.55;color:var(--ink)}
.dyk .gw{position:absolute;right:-10px;bottom:-10px;width:120px;opacity:.13}

/* ---------- Price line ---------- */
.priceline{margin-top:20px;display:flex;align-items:baseline;gap:10px}
.priceline .p{font-family:var(--font-display);font-size:30px;color:var(--red);font-weight:700}
.priceline .n{font-size:12.5px;color:var(--mute)}

/* ---------- Server bar (bottom action bar) ---------- */
.serverbar{display:flex;align-items:center;gap:14px;padding:16px 28px;border-top:1px solid #e2c98e;
  background:rgba(255,253,247,.9);flex-wrap:wrap}
.picks{font-size:13.5px;color:var(--ink)}.picks b{color:var(--red)}
.btn-primary{margin-left:auto;background:var(--red);color:#fff;border:none;border-radius:13px;padding:15px 24px;
  font-size:15.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:9px;transition:.15s}
.btn-primary:hover{background:var(--burg)}
.btn-primary.is-off{background:#d9cdb6;color:#8a7f6a;cursor:default}
.btn-primary.is-off:hover{background:#d9cdb6}
.btn-ghost{background:#fff;border:1.5px solid #e6ddcf;border-radius:13px;padding:15px 20px;font-weight:700;
  font-size:15px;color:var(--ink);cursor:pointer}
.btn-ghost:hover{border-color:var(--gold)}

/* ---------- My Picks holder (slide-in dialog) ---------- */
.picks-overlay{position:fixed;inset:0;background:rgba(31,31,31,.45);opacity:0;pointer-events:none;
  transition:.25s;z-index:70}
.picks-overlay.show{opacity:1;pointer-events:auto}
.picks-panel{position:absolute;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--cream);
  box-shadow:-14px 0 40px rgba(0,0,0,.22);transform:translateX(100%);transition:.28s;
  display:flex;flex-direction:column}
.picks-overlay.show .picks-panel{transform:translateX(0)}
.picks-head{display:flex;align-items:flex-start;gap:12px;padding:22px 22px 16px;border-bottom:1px solid #e6dcc7}
.picks-head h3{font-size:26px;color:var(--burg)}
.picks-head p{font-size:12.5px;color:var(--mute);margin-top:3px;line-height:1.4}
.picks-close{margin-left:auto;border:none;background:#fff;border-radius:10px;width:38px;height:38px;
  font-size:16px;cursor:pointer;color:var(--ink);box-shadow:var(--shadow-sm);flex:none}
.picks-list{flex:1;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:12px}
.picks-empty{color:var(--mute);font-size:14px;text-align:center;margin-top:40px;line-height:1.5}
.pick-item{background:#fff;border:1px solid #ead4a4;border-radius:14px;padding:13px 14px;
  display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow-sm)}
.pick-item .pk-main{flex:1}
.pick-item .pk-title{font-weight:700;font-size:15px;color:var(--char);font-family:var(--font-display)}
.pick-item .pk-meta{font-size:12.5px;color:var(--mute);margin-top:3px;line-height:1.4}
.pick-item .pk-adds{font-size:12px;color:var(--green);margin-top:5px}
.pick-item .pk-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pick-item .pk-price{font-weight:700;color:var(--red);font-size:15px}
.pick-remove{border:none;background:#f6efe3;color:#9a6a4a;border-radius:8px;padding:5px 9px;
  font-size:11.5px;font-weight:700;cursor:pointer}
.pick-remove:hover{background:#f0dfce}
.picks-footer{border-top:1px solid #e6dcc7;padding:16px 22px 20px;background:#fffdf7}
.picks-total{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--ink)}
.picks-total b{font-family:var(--font-display);font-size:24px;color:var(--red)}
.picks-note{font-size:11.5px;color:var(--mute);margin:8px 0 14px;line-height:1.4}
.picks-clear{width:100%;text-align:center}
#openPicks{position:relative}

/* ---------- Admin Mode developer labels (hidden from guests) ----------
   Only visible when <body data-admin="true">. Guests never see these. */
.admin-label{display:none}
body[data-admin="true"] .admin-label{
  display:inline-block;position:absolute;z-index:40;
  background:#1F1F1F;color:#7CFC9A;font-family:ui-monospace,Menlo,monospace;
  font-size:10px;line-height:1.3;padding:3px 7px;border-radius:6px;
  box-shadow:var(--shadow-sm);pointer-events:none;opacity:.92;
  max-width:260px;white-space:normal}
body[data-admin="true"] [data-admin-anchor]{position:relative;outline:1px dashed rgba(177,18,23,.35);outline-offset:3px}

/* ---------- Video placeholder (charter: reserve elegant space) ---------- */
.video-ph{position:relative;border-radius:var(--r-lg);overflow:hidden;margin-bottom:16px;
  background:linear-gradient(135deg,#2a2320,#1F1F1F);color:#f4ece0;padding:26px 18px;text-align:center;
  border:1px solid rgba(212,166,74,.3)}
.video-ph .vp-play{width:52px;height:52px;border-radius:50%;background:rgba(212,166,74,.9);color:#1F1F1F;
  display:flex;align-items:center;justify-content:center;font-size:20px;margin:0 auto 10px;padding-left:3px}
.video-ph .vp-label{font-family:var(--font-display);font-size:16px;color:#fff}
.video-ph .vp-sub{font-size:12px;color:#c7b48c;margin-top:3px}

/* ---------- Chef Recommends card ---------- */
.chefrec{background:linear-gradient(160deg,#fff,#fbf1dd);border:1px solid #ead4a4;border-radius:var(--r-lg);
  padding:16px 16px 15px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.chefrec .cr-badge{display:inline-block;background:var(--red);color:#fff;font-weight:700;font-size:12px;
  padding:5px 11px;border-radius:999px;margin-bottom:9px}
.chefrec p{font-size:14px;line-height:1.55;color:var(--ink);font-style:italic}

/* ============================================================
   RC1 additions (Charter / Guest Experience sprint)
   All values reference frozen tokens — no palette/spacing drift.
   ============================================================ */

/* ---- Breadcrumbs (wayfinding on dish/item pages) ---- */
.crumbs{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  font-family:var(--font-body);font-size:var(--fs-xs);color:var(--mute)}
.crumbs a{color:var(--burg);cursor:pointer;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{color:var(--mute);opacity:.6}
.crumbs .here{color:var(--ink);font-weight:600}

/* ---- First Time Here — guided flow ---- */
.ftflow{margin-top:var(--sp-4)}
.ftq{font-size:var(--fs-h3);color:var(--char);margin:var(--sp-4) 0 var(--sp-4)}
.ft-lead{font-family:var(--font-body);font-size:var(--fs-body);color:var(--ink);
  background:var(--faint);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);
  margin-bottom:var(--sp-5);border:1px solid var(--line)}
.ft-empty{font-family:var(--font-body);font-size:var(--fs-body);color:var(--ink);
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-5);margin:var(--sp-3) 0}
.ft-empty .ic{margin-right:var(--sp-2)}
.ft-nudge-h{font-size:var(--fs-lg);color:var(--char);margin:var(--sp-6) 0 var(--sp-3)}
.ft-alsoask{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--ink);
  margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-left:3px solid var(--gold);
  background:var(--faint);border-radius:var(--r-sm)}
.ft-server{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--mute);
  margin-top:var(--sp-6);font-style:italic}
.ft-controls{display:flex;gap:var(--sp-3);margin-top:var(--sp-4)}
.ft-step-back{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--burg);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--sp-2) var(--sp-4);cursor:pointer;box-shadow:var(--shadow-sm)}
.ft-step-back:hover{background:var(--cream)}

/* ---- Taste of India — Famous For + educational meta ---- */
.td-famous{margin-top:var(--sp-4)}
.td-famous .tf-h{font-family:var(--font-body);font-size:var(--fs-xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);margin-bottom:var(--sp-2)}
.tf-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-2)}
.tf-chip{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--ink);
  background:var(--cream);border:1px solid var(--line);border-radius:999px;
  padding:var(--sp-1) var(--sp-3)}
.tf-chip.on{color:var(--burg);background:var(--white);border-color:var(--gold);
  cursor:pointer;font-weight:600}
.tf-chip.on:hover{background:var(--faint)}
.tf-chip .tf-tag{font-size:var(--fs-xxs);color:var(--gold);font-weight:600;margin-left:var(--sp-1)}
.tf-note{font-size:var(--fs-xxs);color:var(--mute);font-style:italic;width:100%}
.td-meta{display:flex;gap:var(--sp-3);margin-top:var(--sp-3);font-family:var(--font-body)}
.td-meta .tm-k{font-size:var(--fs-xs);color:var(--mute);min-width:120px}
.td-meta .tm-v{font-size:var(--fs-sm);color:var(--ink)}
.td-dyk{margin-top:var(--sp-4);font-family:var(--font-body);font-size:var(--fs-sm);
  color:var(--ink);background:var(--faint);border-radius:var(--r-md);padding:var(--sp-4)}
.td-dyk b{color:var(--burg)}

/* ---- Admin / Owner Console (admin mode only) ---- */
.admin-health{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5);box-shadow:var(--shadow-sm);margin-bottom:var(--sp-5)}
.admin-health h2{font-size:var(--fs-h3);margin-bottom:var(--sp-2)}
.ah-sum{font-family:var(--font-body);font-size:var(--fs-body);color:var(--ink)}
.ah-list{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2)}
.ah-row{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--ink);
  display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;
  border-bottom:1px solid var(--line)}
.ah-flag{display:inline-block;font-size:var(--fs-xxs);color:var(--red);background:;
  background:rgba(177,18,23,.08);border-radius:999px;padding:1px var(--sp-2);margin-left:var(--sp-1)}
.admin-exportbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  background:var(--faint);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-4);margin-bottom:var(--sp-6)}
.admin-exportbar .ax-note{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--ink);flex:1 1 240px}
.admin-grid{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-5)}
.admin-row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow-sm)}
.admin-row.is-hidden{opacity:.6;background:var(--cream)}
.ar-name{font-family:var(--font-body);font-size:var(--fs-body);color:var(--char);font-weight:600}
.ar-hidtag{font-size:var(--fs-xxs);color:var(--mute);font-weight:400;
  border:1px solid var(--line);border-radius:999px;padding:1px var(--sp-2);margin-left:var(--sp-2)}
.ar-toggles{display:flex;gap:var(--sp-2)}
.ar-t{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--sp-2) var(--sp-3);cursor:pointer}
.ar-t.on{background:var(--gold);border-color:var(--gold);color:var(--char);font-weight:600}
.ar-t.on.danger{background:var(--burg);border-color:var(--burg);color:var(--white)}