@font-face{font-family:'Inter';src:url(/fonts/inter-latin.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* DMI Food pelanggan v4.1 (figma bro spec-customer-v4 r2–r4). Hanya untuk body.v4; admin tetap app.css + admin.css. */
.v4{--brand:#7A0F1F;--brand-d:#5C0A17;--brand-soft:#FBEFF0;--ink:#1A1416;--ink2:#5E5458;--line:#ECE6E7;--bg2:#F7F5F5;--ok:#15803D;--ok-soft:#E8F5EC;--err:#B91C1C;--err-soft:#FDECEC;--wa:#147A3F;--unk:#6B7280;
  --r1:8px;--r2:12px;--r3:16px;--r4:24px;--sh1:0 1px 2px rgba(26,20,22,.06),0 1px 3px rgba(26,20,22,.08);--sh2:0 -4px 16px rgba(26,20,22,.08);
  --font-ui:Inter,'Plus Jakarta Sans',system-ui,sans-serif;background:#fff;color:var(--ink);font-family:var(--font-ui)}
.v4 svg{flex:none}
.v4 .bd{padding:0 16px 24px}
.v4 .one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.v4 .sm2{font-size:13px;color:var(--ink2)}.v4 .muted{color:var(--ink2)}
.v4 .b1{padding:12px 16px 0;background:#fff}
.v4 .area{display:inline-flex;align-items:center;gap:2px;min-height:44px;font-size:13px;color:var(--ink2);text-decoration:none}.v4 .area svg{color:var(--unk)}.v4 .area b{font-weight:600}
.v4 .disp{font:800 26px/1.15 var(--font-ui);letter-spacing:-.02em}
.v4 .search{height:48px;border-radius:999px;background:var(--bg2);display:flex;align-items:center;gap:10px;padding:0 16px;margin-top:12px;color:var(--ink2)}
.v4 .search input{flex:1;min-width:0;border:0;background:transparent;font:15px var(--font-ui);color:var(--ink);height:44px;outline:0}
.v4 .search:focus-within{outline:2px solid var(--brand);outline-offset:1px}
.v4 .s-ic{display:flex;color:var(--unk)}.v4 .s-ic svg{width:24px;height:24px}
/* r4 tombol layanan */
.v4 .svc{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;padding:0}
.v4 .svc-b{min-width:0;min-height:72px;border-radius:var(--r3);padding:12px 8px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;box-shadow:var(--sh1);border:1px solid var(--line);text-decoration:none;font:inherit;text-align:left;cursor:pointer}
.v4 .svc-b.f{background:var(--brand);color:#fff;border:0}.v4 .svc-b.k{background:#fff;color:var(--ink)}
.v4 .svc-b b{font-size:15px;letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;gap:6px}
.v4 .svc-b b svg{width:20px;height:20px}.v4 .svc-b.f b svg{color:#fff}.v4 .svc-b.k b svg{color:var(--brand)}
.v4 .svc-b span{font-size:13px}.v4 .svc-b .wa-t{color:var(--wa);font-weight:600}
.v4 .sec{font:800 20px/1.2 var(--font-ui);letter-spacing:-.01em;margin:24px 0 12px}
/* placeholder foto: gradien per kategori + nama kategori */
.v4 .tile{background:#F3ECEC;border-radius:var(--r3);display:flex;align-items:center;justify-content:center;flex:none;position:relative;overflow:hidden}
.v4 .tile .tl{font-size:13px;font-weight:600;color:#3B2A1E;background:#FFFFFFCC;border-radius:999px;padding:2px 10px;text-align:center}
.v4 .tile.t56,.v4 .tile.t72{border-radius:var(--r2)}.v4 .tile.t56 .tl,.v4 .tile.t72 .tl{background:none;padding:0;font-weight:700}
.v4 .t56{width:56px;height:56px}.v4 .t72{width:72px;height:72px}.v4 .t-hero{width:100%;height:150px}
.v4 .tile.abu{position:relative;overflow:hidden}.v4 .tile.abu::before{content:"";position:absolute;inset:0;border-radius:inherit;-webkit-backdrop-filter:grayscale(1);backdrop-filter:grayscale(1);background:rgba(255,255,255,.55)}.v4 .tile.abu .tl{position:relative;z-index:1;color:#3B2A1E}
.v4 .hscroll{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 4px;scroll-snap-type:x mandatory;scroll-padding-left:16px}
.v4 .hcard{flex:none;width:260px;text-decoration:none;color:var(--ink);scroll-snap-align:start}.v4 .hcard>b{display:block;font-size:17px;margin-top:10px}
.v4 .lrow{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);min-height:56px}
.v4 .lrow-b{flex:1;min-width:0}.v4 .lrow-b>b{display:block}.v4 .chev{color:var(--unk);display:flex}
.v4 .jam{font-size:13px;font-weight:600}.v4 .jam.buka{color:var(--ok)}.v4 .jam.tutup{color:var(--err)}.v4 .jam.kosong{color:#6B7280;font-weight:400}
/* bottom nav 64px */
.v4 .bnav{position:sticky;bottom:0;z-index:6;height:calc(64px + env(safe-area-inset-bottom));display:flex;border-top:1px solid var(--line);background:#fff;padding-bottom:env(safe-area-inset-bottom);margin-top:auto}
.v4 .bnav a{flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;font-weight:600;color:#6B7280;text-decoration:none}
.v4 .bnav a.on{color:var(--brand)}
/* header layar dalam */
.v4 .tb{display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 16px;background:#fff;position:sticky;top:0;z-index:5}
.v4 .tb-t{font:700 17px/1.25 var(--font-ui)}.v4 .tb-s{font-size:13px;color:var(--ink2)}
.v4 .bk{width:44px;height:44px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;color:var(--unk);flex:none}
.v4 .hero{position:relative}.v4 .t-heroL{width:100%;height:200px;border-radius:0}.v4 .hero .bk{position:absolute;top:12px;left:16px;background:#fff;box-shadow:var(--sh1)}
.v4 .hm{font:800 26px/1.15 var(--font-ui);letter-spacing:-.02em;margin-bottom:4px}
.v4 .mrow{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.v4 .mrow-b{flex:1;min-width:0}.v4 .mrow-b b{display:block;line-height:1.3}.v4 .pr{font-weight:600;margin-top:4px}

.v4 .badge-habis{flex:none;height:28px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;background:var(--bg2);color:var(--ink2);border:1px solid var(--line)}
.v4 .add{width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--sh1);border:0;display:flex;align-items:center;justify-content:center;color:var(--brand);cursor:pointer}
.v4 .add:disabled{cursor:not-allowed;color:#B9A9AC}
.v4 .qty{display:flex;align-items:center;gap:4px;background:var(--brand-soft);border-radius:999px;flex:none}
.v4 .qty button{width:44px;height:44px;border:0;background:transparent;border-radius:999px;color:var(--brand);display:flex;align-items:center;justify-content:center;cursor:pointer}
.v4 .qty output{min-width:16px;text-align:center;font-weight:700}
.v4 .banner-err{display:flex;gap:10px;align-items:flex-start;margin:16px 0 8px;background:var(--err-soft);border:1px solid #F5C2C2;border-radius:var(--r3);padding:14px 16px;font-size:14px}.v4 .banner-err svg{color:var(--err)}.v4 .banner-err b{color:var(--err)}
/* tombol & dock */
.v4 .btn{min-height:52px;border-radius:var(--r3);font:700 16px var(--font-ui);gap:8px}
.v4 .b-ruby{background:var(--brand);color:#fff}.v4 .b-wa{background:var(--wa);color:#fff}
.v4 .btn:disabled{background:#E3DCDD;color:#5E5458}
.v4 .dock{position:sticky;bottom:0;z-index:6;background:#fff;box-shadow:var(--sh2);padding:12px 16px calc(16px + env(safe-area-inset-bottom));margin-top:auto}
.v4 .dock-btn{justify-content:space-between;padding:0 20px}
.v4 .dock-tot{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:16px}
.v4 .txtbtn{width:100%;min-height:44px;background:none;border:0;color:var(--brand);font:700 15px var(--font-ui);display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;margin-top:4px}
.v4 .link{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);margin-top:12px}
/* form */
.v4 .lbl,.v4 .field label{font-size:13px;font-weight:600;color:var(--ink2);margin:14px 0 6px;display:block}
.v4 .field{margin-bottom:0}
.v4 .inp{min-height:48px;border-radius:var(--r2);border:1px solid #CFC6C8;padding:12px;font:15px var(--font-ui);color:var(--ink);background:#fff;width:100%}
.v4 textarea.inp{min-height:96px}
.v4 .inp.bad{border:2px solid var(--err)}.v4 .ferr{color:var(--err);font-size:13px;margin-top:6px}
.v4 .two{display:flex;gap:8px}.v4 .two .inp{flex:1;min-width:0}.v4 .two.a2 select{flex:0 0 46%;padding-right:40px;background-position:right 8px center}
.v4 .seg{display:flex;gap:8px}.v4 .segb{flex:1;min-height:44px;border-radius:var(--r2);border:1px solid var(--line);background:#fff;font:600 14px var(--font-ui);color:var(--ink);cursor:pointer}
.v4 .segb.on{border:2px solid var(--brand);color:var(--brand);background:var(--brand-soft)}
.v4 .sumcard,.v4 .totcard{border-radius:var(--r3);background:#fff;box-shadow:var(--sh1);border:1px solid var(--line);padding:14px 16px;margin-top:16px}
.v4 .sumcard .row{min-height:28px}
.v4 .totcard{color:var(--ink2)}.v4 .totcard .row{gap:12px}.v4 .totcard b{color:var(--ink);font-size:16px}
.v4 .chips-w{margin:12px -16px 0}.v4 .chips-w::after{background:linear-gradient(90deg,rgba(255,255,255,0),#fff)}
/* lacak */
.v4 .now{background:var(--brand-soft);border-radius:var(--r3);padding:16px;margin-top:4px}
.v4 .now-t{font:800 24px/1.2 var(--font-ui);color:var(--brand-d);letter-spacing:-.01em;margin:2px 0}
.v4 .now.batal{background:var(--err-soft)}.v4 .now.batal .now-t{color:var(--err)}
.v4 .dotm{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:4px;vertical-align:middle}.v4 .dotm.err{background:var(--err)}
.v4 .tl{list-style:none;margin:16px 0 0;padding:0}
.v4 .tl li{display:flex;gap:14px;position:relative;padding-bottom:18px}
.v4 .tl li:not(:last-child)::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:#E3DCDD}.v4 .tl li.ok::before{background:var(--ok)}
.v4 .tdot{width:24px;height:24px;border-radius:50%;flex:none;border:2px solid #CFC6C8;background:#fff;z-index:1;display:flex;align-items:center;justify-content:center;color:#fff}
.v4 .tl li.ok .tdot{background:var(--ok);border-color:var(--ok)}.v4 .tl li.cur .tdot{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 5px var(--brand-soft)}
.v4 .tl li:not(.ok):not(.cur) b{color:var(--ink2)}
/* riwayat */
.v4 .pill{flex:none;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);display:inline-flex;align-items:center;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none}
.v4 .pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.v4 .b1 .chips{margin:12px 0 4px;padding:0}
.v4 .hrow{display:flex;flex-direction:column;border-bottom:1px solid var(--line);padding:12px 0}
.v4 .hrow-a{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:var(--ink)}
.v4 .badge{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;margin-top:6px;background:var(--bg2);color:var(--ink2)}
.v4 .badge.br{background:var(--brand-soft);color:var(--brand)}.v4 .badge.ok{background:var(--ok-soft);color:var(--ok)}.v4 .badge.err{background:var(--err-soft);color:var(--err)}
.v4 .again{align-self:flex-end;min-height:44px;display:inline-flex;align-items:center;color:var(--brand);font-weight:700;font-size:14px;text-decoration:none;margin-top:-8px}
/* state */
.v4 .empty{text-align:center;padding:40px 8px;display:flex;flex-direction:column;align-items:center;gap:12px}.v4 .empty h2{font:700 18px var(--font-ui)}.v4 .empty .btn{max-width:320px}
.v4 .eic{width:72px;height:72px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center}
.v4 .sk{background:#F0ECEC;border-radius:var(--r2);margin-top:12px}.v4 .sk-row{display:flex;gap:12px;align-items:center;margin-top:12px}.v4 .sk-row .sk{margin-top:0}
.v4 .note{background:#FEF3C7;color:#92400E;border-radius:var(--r2);padding:10px 12px;font-size:13px;margin-top:12px}
.v4 .spin svg{display:block}
.v4 .sheet .btn{width:100%}
@media (prefers-reduced-motion:reduce){.v4 *{transition:none!important}}
.v4 .btn:active,.v4 .add:active,.v4 .segb:active{transform:scale(.97)}
.v4 select.inp{-webkit-appearance:none;appearance:none;padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/24px 24px}
.v4 .hrow-f{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:68px}.v4 .hrow-f .badge{margin-top:6px}.v4 .again{margin-top:0;align-self:auto}
.v4 .hrow-a .lrow-b{padding-bottom:0}
.v4 .qchip{flex:none;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--brand);font:600 14px var(--font-ui);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}
.v4 .chips-w .chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 16px;margin:0}
.v4 .wrow{display:flex;align-items:center;gap:8px;min-height:58px;box-sizing:border-box;padding:8px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}.v4 .wrow .jam{display:inline}