:root{--accent:#1d4ed8;--bg:#f6f7fb;--card:#fff;--ink:#0f172a;--muted:#64748b;--line:#e5e7eb;--radius:16px}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;padding-bottom:96px}
body.noscroll{overflow:hidden}
.hidden{display:none!important}
.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}.nowrap{white-space:nowrap}
button{font:inherit;cursor:pointer}

.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--accent);color:#fff}
.brand{font-weight:800;font-size:19px;letter-spacing:-.01em}
.tagline{font-size:12.5px;opacity:.85}
.table-badge{background:#fff;color:var(--accent);font-weight:800;padding:7px 12px;border-radius:999px;font-size:14px;white-space:nowrap}

.chips{position:sticky;top:62px;z-index:4;display:flex;gap:8px;overflow-x:auto;padding:12px 16px;background:var(--bg);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{border:0;background:#e9edf5;color:var(--ink);padding:9px 16px;border-radius:999px;font-weight:600;font-size:14px;white-space:nowrap}
.chip.active{background:var(--accent);color:#fff}

main{max-width:720px;margin:0 auto;padding:0 16px}
.cat h2{font-size:17px;margin:18px 2px 10px}
.item{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--radius);padding:10px;margin-bottom:10px;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.thumb{width:78px;height:78px;border-radius:12px;object-fit:cover;flex:none;background:#eef2ff}
.thumb-ph{display:grid;place-items:center;font-size:30px;font-weight:800;color:var(--accent);background:linear-gradient(135deg,#eef2ff,#e0f2fe)}
.info{flex:1;min-width:0}
.info h3{margin:0 0 3px;font-size:15.5px;line-height:1.25}
.info p{margin:0 0 5px;color:var(--muted);font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price{font-weight:800;font-size:15px}

.qty-ctl{display:flex;align-items:center;gap:4px;flex:none}
.qty-ctl button{width:34px;height:34px;border-radius:50%;border:0;font-size:20px;line-height:1;display:grid;place-items:center}
.qty-ctl .plus{background:var(--accent);color:#fff}
.qty-ctl .minus{background:#e9edf5;color:var(--ink)}
.qty-ctl .q{min-width:18px;text-align:center;font-weight:700}
.qty-ctl:not(.has) .minus,.qty-ctl:not(.has) .q{display:none}

.cart-bar{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));max-width:688px;margin:0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;border-radius:14px;background:var(--accent);color:#fff;padding:15px 18px;font-weight:700;font-size:16px;box-shadow:0 10px 25px rgba(29,78,216,.35)}
.cart-count{background:rgba(255,255,255,.22);border-radius:8px;padding:2px 9px}

.sheet-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:9}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:10;max-width:720px;margin:0 auto;max-height:92vh;overflow-y:auto;background:#fff;border-radius:20px 20px 0 0;padding:8px 18px calc(22px + env(safe-area-inset-bottom));animation:up .22s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.sheet-handle{width:44px;height:5px;border-radius:5px;background:#d1d5db;margin:4px auto 10px}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet-head h2{font-size:18px;margin:0}
.x{border:0;background:#f1f5f9;width:34px;height:34px;border-radius:50%;font-size:22px}
.line{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.line>div:first-child{flex:1;min-width:0}
.ln{font-weight:600}.lp{font-size:12.5px;color:var(--muted)}
.lt{width:64px;text-align:right;font-weight:700}
.total-row{display:flex;justify-content:space-between;font-size:18px;padding:14px 0 6px}

form label,.label{display:block;font-size:13px;font-weight:600;color:#334155;margin:12px 0 0}
form input[type=text],form input:not([type]),form input[inputmode]{display:block;width:100%;margin-top:6px;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
form input:focus{outline:none;border-color:var(--accent)}
.methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-top:6px}
.method{margin:0!important;position:relative}
.method input{position:absolute;opacity:0}
.method span{display:block;text-align:center;padding:13px 6px;border:2px solid var(--line);border-radius:12px;font-weight:700;color:var(--ink);font-size:14.5px}
.method input:checked+span{border-color:var(--mc);background:color-mix(in srgb,var(--mc) 10%,#fff);color:var(--mc)}
.method input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.pay-hint{margin-top:10px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px;padding:11px 12px;font-size:13.5px;line-height:1.45;color:#334155}
.form-err{color:#b91c1c;background:#fef2f2;border-radius:10px;padding:10px 12px;font-size:14px}
.btn-primary,.btn-secondary{display:block;width:100%;text-align:center;text-decoration:none;border:0;border-radius:14px;padding:15px;font-weight:700;font-size:16px;margin-top:16px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:disabled{opacity:.6}
.btn-secondary{background:#e9edf5;color:var(--ink)}

.empty-state{min-height:80vh;display:grid;place-content:center;text-align:center;padding:24px}
.empty-state h1{margin:6px 0}
.big-emoji{font-size:44px}
.empty-note{color:var(--muted);text-align:center;padding:20px}

.order-wrap{padding-top:18px;padding-bottom:30px}
.order-no{font-size:28px;font-weight:800;text-align:center;color:var(--accent);letter-spacing:.02em}
.steps{list-style:none;margin:18px 0;padding:0;background:#fff;border-radius:var(--radius);padding:6px 16px}
.steps li{display:flex;align-items:center;gap:12px;padding:12px 0;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
.steps li:last-child{border:0}
.steps li span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#e9edf5;font-size:14px;flex:none}
.steps li.done{color:var(--ink)}
.steps li.done span{background:#16a34a;color:#fff}
.steps li.now span{background:var(--accent);color:#fff;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 20%,transparent)}
.pay-card,.status-card{background:#fff;border-radius:var(--radius);padding:18px;text-align:center;margin-bottom:14px}
.pay-card h2,.status-card h2{margin:4px 0 8px;font-size:20px}
.pay-card p,.status-card p{margin:6px 0;line-height:1.45}
.status-card.good{border:2px solid #bbf7d0}.status-card.bad{border:2px solid #fecaca}
.ussd{-webkit-user-select:all;user-select:all;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:22px;font-weight:700;background:#f1f5f9;border-radius:12px;padding:12px;margin:12px 0 0;letter-spacing:.03em;word-break:break-all}
.receipt{background:#fff;border-radius:var(--radius);padding:8px 16px}
.rl{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.rl.total{border:0;font-weight:800;font-size:16px}
.ios-steps{text-align:left;background:#f0fdf4;border:1.5px solid #86efac;border-radius:12px;padding:12px 14px;margin-top:12px}
.ios-steps .ok-line{font-weight:800;color:#15803d;margin-bottom:4px}
.ios-steps ol{margin:0;padding-left:20px;line-height:1.7}
.pay-card a[href^="tel"]:not(.btn-primary){color:inherit;text-decoration:none;pointer-events:none}
.top-right{display:flex;align-items:center;gap:8px}
.help-btn{color:#fff;text-decoration:none;font-weight:700;font-size:13px;border:1.5px solid rgba(255,255,255,.6);border-radius:999px;padding:6px 11px;white-space:nowrap}
.help-btn:hover{background:rgba(255,255,255,.15)}
@media (max-width:360px){.help-btn{font-size:12px;padding:5px 8px}}
/* Guide on the menu page */
.guide{max-width:720px;margin:12px auto 0;padding:0 16px}
.guide>*:not(.guide-head){}
.guide .demo{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,#fff),#fff7ed);border-radius:18px;padding:12px;overflow:hidden}
.guide-head{display:flex;justify-content:space-between;align-items:center;margin:0 2px 8px}
.guide-head b{display:block;font-size:17px}
.guide-head span{font-size:12.5px;color:var(--muted)}
.guide-x{border:0;background:#e9edf5;color:#334155;border-radius:999px;padding:6px 12px;font-weight:700;font-size:13px}
.guide-show{display:block;margin:12px auto 0;border:1.5px dashed color-mix(in srgb,var(--accent) 50%,#fff);background:#fff;color:var(--accent);border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px}
/* Payment buttons: even 2-column grid */
.methods{grid-template-columns:repeat(2,1fr)}
.method span{height:100%;display:flex;align-items:center;justify-content:center;min-height:52px}
.methods .method:last-child:nth-child(odd){grid-column:1/-1}
/* Call bell button (bottom-left so it never covers the + buttons) */
.bell{position:fixed;left:16px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:7;display:flex;flex-direction:row-reverse;align-items:center;gap:10px;pointer-events:none}
.bell.low,body:has(#cartBar.hidden) .bell{bottom:calc(20px + env(safe-area-inset-bottom))}
.bell-btn{pointer-events:auto;width:60px;height:60px;border-radius:50%;border:0;background:#f59e0b;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(245,158,11,.45);transition:transform .15s}
.bell-btn:active{transform:scale(.92)}
.bell-btn svg{transform-origin:50% 10%}
.bell.ringing .bell-btn svg{animation:swing .5s ease-in-out 2}
@keyframes swing{20%{transform:rotate(18deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(9deg)}80%{transform:rotate(-5deg)}}
.bell.ok .bell-btn{background:#16a34a;box-shadow:0 10px 24px rgba(22,163,74,.4)}
.bell-bubble{max-width:230px;background:#fff;border-radius:14px;padding:9px 12px;box-shadow:0 8px 24px rgba(15,23,42,.18);font-size:13px;line-height:1.35;opacity:0;transform:translateX(-10px);transition:opacity .25s,transform .25s}
.bell-bubble b{display:block;font-size:13.5px}
.bell-bubble span{color:#64748b;font-size:12px}
.bell.show .bell-bubble{opacity:1;transform:none}
.bell.ok .bell-bubble b{color:#15803d}
.bell.err .bell-bubble b{color:#b91c1c}
body.noscroll .bell{display:none}
/* SO | EN language switch */
.lang-sw{display:flex;background:rgba(255,255,255,.18);border-radius:999px;padding:3px;gap:2px;flex:none}
.lang-sw a{color:#fff;text-decoration:none;font-weight:800;font-size:12px;padding:5px 9px;border-radius:999px;line-height:1}
.lang-sw a.on{background:#fff;color:var(--accent)}
.top{flex-wrap:nowrap}
.top>div:first-child{min-width:0}
@media (max-width:420px){.top-right{gap:5px}.help-btn{padding:5px 8px;font-size:12px}.top .brand{font-size:17px}.table-badge{padding:6px 9px;font-size:13px}}