/* search */
.searchbox{display:flex;align-items:center;gap:11px;background:var(--surface);border:1.5px solid var(--line);
  border-radius:14px;padding:0 16px;height:52px;box-shadow:var(--shadow-sm);transition:border-color var(--dur)}
.searchbox:focus-within{border-color:var(--red)}
.searchbox svg{width:20px;height:20px;color:var(--text-3);flex:none}
.searchbox input{border:none;outline:none;background:none;width:100%;height:100%;font-size:16px;font-weight:500}
.searchbox .kbd{font-size:11px;color:var(--text-3);border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-weight:700}

/* category chips */
.cats{display:flex;gap:9px;margin-top:13px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{flex:none;padding:9px 18px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--surface);
  font-weight:700;font-size:14px;color:var(--text-2);transition:all var(--dur) var(--ease)}
.cat.on{background:var(--red);color:#fff;border-color:var(--red)}

/* menu grid */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:transform var(--dur) var(--ease),box-shadow var(--dur);min-height:96px;justify-content:space-between}
.mcard:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.mcard:active{transform:translateY(0) scale(.99)}
.mcard .mn{font-size:15px;font-weight:700;line-height:1.25}
.mcard .mp{color:var(--red);font-weight:800;font-size:14.5px}
.mcard .madd{align-self:flex-end;width:30px;height:30px;border-radius:9px;background:var(--red-soft);color:var(--red);
  display:grid;place-items:center;margin-top:-26px}
.mcard .madd svg{width:18px;height:18px}
.mempty{padding:50px 10px;text-align:center;color:var(--text-3);font-weight:600}

/* cart */
.cart-h{display:flex;align-items:center;gap:10px;padding:16px 18px 10px;flex:none;border-bottom:1px solid var(--line)}
.cart-h .ct{font-size:18px;font-weight:800}
.cart-h .cb{background:var(--red);color:#fff;font-size:12.5px;font-weight:800;min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;padding:0 6px}
.cart-h .clr{margin-left:auto;color:var(--red);width:34px;height:34px;border-radius:9px;display:grid;place-items:center}
.cart-h .clr:hover{background:var(--red-soft)}
.cart-h .clr svg{width:19px;height:19px}
.cart-items{flex:1;min-height:0;overflow-y:auto;padding:6px 18px}
.cart-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-3);text-align:center;padding:20px}
.cart-empty svg{width:64px;height:64px;opacity:.35}
.ci{padding:12px 0;border-bottom:1px dashed var(--line)}
.ci:last-child{border-bottom:none}
.ci-top{display:flex;align-items:flex-start;gap:10px}
.ci-name{font-weight:700;font-size:15px;flex:1;min-width:0}
.ci-price{font-weight:800;font-size:14px;white-space:nowrap}
.ci-note{font-size:12px;color:var(--text-2);margin-top:2px}
.ci-mid{display:flex;align-items:center;gap:12px;margin-top:9px}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.qty button{width:32px;height:32px;display:grid;place-items:center;color:var(--red);font-weight:800}
.qty button:hover{background:var(--red-soft)}
.qty .q{min-width:30px;text-align:center;font-weight:800;font-size:15px}
.ci-sub{margin-left:auto;font-weight:700;font-size:13px;color:var(--text-2)}
.ci-act{display:flex;gap:6px}
.ci-kebab,.ci-del{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--text-3)}
.ci-del{color:var(--red)} .ci-del:hover{background:var(--red-soft)}
.ci-kebab:hover{background:var(--surface-2)}
.ci-noteinput{margin-top:8px;width:100%;border:1.5px solid var(--line);border-radius:10px;padding:8px 11px;font-size:13px;background:var(--surface-2);outline:none}
.ci-noteinput:focus{border-color:var(--red)}

/* cart footer sticky */
.cart-foot{flex:none;border-top:1px solid var(--line);background:var(--surface)}
.sumrow{display:flex;justify-content:space-between;padding:5px 18px;font-size:14px;color:var(--text-2);font-weight:600}
.totrow{display:flex;justify-content:space-between;align-items:center;padding:10px 18px 6px}
.totrow .tl{font-size:17px;font-weight:800}
.totrow .tv{font-size:26px;font-weight:800;color:var(--red)}
.paysel{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 18px 6px}
.payopt{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--surface);font-weight:700;font-size:14.5px;color:var(--text-2);transition:all var(--dur)}
.payopt svg{width:20px;height:20px}
.payopt.on{border-color:var(--red);background:var(--red-soft);color:var(--red)}
.paybtn{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 18px 16px;height:66px;border-radius:16px;
  background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(196,0,0,.26);transition:filter var(--dur),transform var(--dur)}
.paybtn:hover{filter:brightness(1.05)} .paybtn:active{transform:scale(.99)}
.paybtn:disabled{opacity:.6;box-shadow:none}
.paybtn .p1{font-size:20px;font-weight:800;letter-spacing:.5px}
.paybtn .p2{font-size:12px;opacity:.9;font-weight:600;margin-top:-2px}
.paybtn svg{width:22px;height:22px}

/* generic button/card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.btn-red{background:var(--red);color:#fff;border-radius:14px;padding:14px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px}
.btn-red:hover{background:var(--red-dark)}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);background:var(--text);color:var(--surface);
  padding:13px 20px;border-radius:14px;font-weight:700;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;
  transition:opacity var(--dur),transform var(--dur);z-index:90;display:flex;align-items:center;gap:10px;max-width:80vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:20px;height:20px;flex:none}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(8,10,14,.5);display:grid;place-items:center;padding:20px;z-index:80;
  opacity:0;pointer-events:none;transition:opacity var(--dur)}
.overlay.show{opacity:1;pointer-events:auto}
.modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%;max-width:440px;overflow:hidden;animation:pop var(--dur) var(--ease)}
.modal.wide{max-width:560px}

/* drawer menu */
.drawer{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:86vw;background:var(--surface);z-index:85;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:slideL var(--dur) var(--ease)}
.drawer .dh{background:var(--red);color:#fff;padding:20px 20px 18px}
.drawer .dh .nm{font-size:19px;font-weight:800}
.drawer .dh .rl{font-size:12.5px;opacity:.9;font-weight:600;margin-top:2px}
.drawer .dnav{flex:1;padding:12px 12px;overflow-y:auto}
.ditem{display:flex;align-items:center;gap:14px;padding:14px 14px;border-radius:12px;font-weight:700;font-size:15.5px;color:var(--text)}
.ditem svg{width:22px;height:22px;color:var(--text-2)}
.ditem:hover{background:var(--surface-2)}
.ditem.on{background:var(--red-soft);color:var(--red)} .ditem.on svg{color:var(--red)}
.ditem.danger{color:var(--red)} .ditem.danger svg{color:var(--red)}
.drawer .df{padding:14px 20px;border-top:1px solid var(--line);color:var(--text-3);font-size:11.5px}
.cart-note{flex:none;padding:8px 18px 4px;border-top:1px solid var(--line)}
.cart-note input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13.5px;background:var(--surface-2);outline:none}
.cart-note input:focus{border-color:var(--red)}