/* Let's Coffee POS billing - combined design: left rail + LCverse cards + upsell cart */
:root{--acc:#024CAD;--acc2:#e4ecfa;--ink:#111418;--mut:#5c6470;--line:#e7e9ee;--bg:#f6f3ee;--card:#fff;--bad:#a33327;--ok:#1a7a2e}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg)}
h1,h2,h3,.brandmark{font-family:'League Spartan',Inter,system-ui,sans-serif}
.brandmark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:var(--acc);color:#fff;font-weight:800;font-size:15px;letter-spacing:.3px}
header.top h1{color:var(--ink);font-size:19px}
nav.tabs button.on{background:var(--acc2);color:var(--acc)}
main{max-width:1440px}
.pos3{display:grid;grid-template-columns:172px minmax(0,1fr) 360px;gap:14px;align-items:start}
.rail{position:sticky;top:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 150px);overflow:auto}
.rail .railtitle{font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.6px;padding:4px 10px}
.rail button{display:flex;justify-content:space-between;align-items:center;gap:6px;border:0;background:none;text-align:left;padding:9px 10px;border-radius:10px;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;border-left:3px solid transparent}
.rail button .n{font-size:11.5px;color:var(--mut);background:#f1f2f5;border-radius:999px;padding:1px 7px}
.rail button.on{background:var(--acc2);color:var(--acc);font-weight:700;border-left-color:var(--acc)}
.rail button.on .n{background:#fff;color:var(--acc)}
.menuarea{min-width:0}
.msearch{width:100%;margin-bottom:10px;border-radius:12px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.itm{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;text-align:left;font:inherit;min-height:96px;display:flex;flex-direction:column;gap:3px}
.itm:hover{border-color:var(--acc);box-shadow:0 2px 10px rgba(2,76,173,.10)}
.itm.off{opacity:.45;cursor:not-allowed}
.itm b{font-size:14.5px;line-height:1.25}
.itm .pr{color:var(--acc);font-weight:700;font-size:14px;margin-top:auto}
.itm small{color:var(--mut);font-size:12px}
.vegd{width:12px;height:12px;border:1.6px solid var(--ok);border-radius:3px;display:inline-block;position:relative}
.vegd:after{content:'';position:absolute;inset:2.4px;background:var(--ok);border-radius:50%}
.vegd.n{border-color:#8a4b2a}.vegd.n:after{background:#8a4b2a;border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
.cartcard{position:sticky;top:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 150px);overflow:auto}
.cartcard h3{font-size:18px}
.sugg{background:#f3f7ff;border:1px solid #cdd9f2;border-radius:12px;padding:10px}
.sugg .sh{margin-bottom:4px;color:var(--acc)}
.sugg .sg{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-top:1px dashed #dbe4f5;font-size:13.5px}
.sugg .sg:first-of-type{border-top:0}
.btn.sm{padding:5px 12px;font-size:13px;border-radius:8px}
.x{border:0;background:none;font-size:16px;cursor:pointer;color:var(--mut);padding:2px 6px}
.linkbtn{border:0;background:none;color:var(--acc);cursor:pointer;font:inherit;font-size:13px}
.clines{display:flex;flex-direction:column}
.cline{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.cline .ct b{font-size:14px}
.cline .cr{display:flex;align-items:center;gap:8px;white-space:nowrap}
.step{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;padding:1px}
.step button{border:0;background:none;width:24px;height:24px;font-size:15px;cursor:pointer;color:var(--acc);font-weight:700}
.step b{min-width:18px;text-align:center;font-size:13.5px}
.amt{font-weight:600;font-size:14px;min-width:56px;text-align:right}
.plab{width:44px;font-size:13px;font-weight:600;color:var(--mut)}
.partbox input{width:110px}
.sm.ok{color:var(--ok);font-weight:600}
.cartbar{display:none}
@media(max-width:1100px){
  .pos3{grid-template-columns:minmax(0,1fr) 340px}
  .rail{position:static;grid-column:1 / -1;flex-direction:row;overflow-x:auto;max-height:none;padding:6px}
  .rail .railtitle{display:none}
  .rail button{border-left:0;border-bottom:3px solid transparent;white-space:nowrap;padding:8px 12px}
  .rail button.on{border-bottom-color:var(--acc)}
}
@media(max-width:820px){.pos3{grid-template-columns:minmax(0,1fr)}.cartcard{position:static;max-height:none}}
@media(max-width:640px){
  .pos3 .cartcard{display:none}
  .cartbar{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:15;background:var(--acc);color:#fff;border:0;border-radius:14px;padding:13px 16px;font:inherit;font-size:15px;justify-content:space-between;align-items:center;box-shadow:0 6px 20px rgba(2,76,173,.35);cursor:pointer}
  body{padding-bottom:70px}
  .mgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .modal{padding:0;align-items:flex-end}
  .modal>div{border-radius:18px 18px 0 0;max-width:none;width:100%;max-height:88vh}
}
/* product photos + payment-first cart + prep flow */
.itmimg{display:block;width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#efe9e1;margin:-4px 0 6px}
.itmimg img{width:100%;height:100%;object-fit:cover;display:block}
.itmimg.init{display:flex;align-items:center;justify-content:center;font-family:'League Spartan',Inter,sans-serif;font-weight:700;font-size:24px;color:#a89c8d;letter-spacing:1px}
.btnrow{display:flex;gap:8px}
.pill.prep-arrived{background:#fff0d0;color:#7a5200}
.pill.prep-accepted{background:#e3f0ff;color:#1a4a8a}
.pill.prep-preparing{background:#e4ecfa;color:#024CAD}
.pill.prep-ready{background:#dff3e3;color:#1d6b32;font-weight:700}