/* Epic Burger & Fries — shared styles for the site (index.html) and the QR menu (menu.html) */
:root{
  --ink:#0c0b0f; --steel:#15141a; --steel-2:#1d1c24; --steel-3:#29282f;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17);
  --text:#f7f5fa; --muted:#aba7b6; --dim:#7b7787;
  --pink:#ff0a91; --pink-2:#ff4fae; --pink-soft:rgba(255,10,145,.14);
  --mint:#3ce8d0; --mint-2:#8af2e3; --on-mint:#04201c; --sky:#6fd5ec;
  --hot:#ff6b4a; --veg:#8bd46a; --cy:#f2c14e; --pork:#ff9fb8;
  --wa:#25d366;
  --r:20px; --head-h:66px;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* no CSS smooth scrolling: app.js goTo() animates every jump itself (CSS smooth can throw the page back after a #-link) */
section[id],main[id]{scroll-margin-top:var(--head-h)}
/* the page keeps its place itself (keepPlace/goTo); the browser's own scroll anchoring would correct twice */
html,body{overflow-anchor:none}
body{font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--ink);color:var(--text);font-size:16px;line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
[hidden]{display:none!important}
.wrap{width:min(1200px,100% - 32px);margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:6px}

/* ---------- type ---------- */
.display{font-family:"Anton",Impact,sans-serif;font-weight:400;letter-spacing:.005em;line-height:.95;text-transform:uppercase}
h2.display{font-size:clamp(40px,7vw,84px);line-height:1.04}
.mhead h2{margin-top:14px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:currentColor}
.neon{font-family:"Pacifico",cursive;font-weight:400;text-transform:none;color:var(--pink-2);text-shadow:0 0 6px rgba(255,10,145,.85),0 0 22px rgba(255,10,145,.55),0 0 46px rgba(255,10,145,.35);letter-spacing:0}
.lead{color:var(--muted);font-size:clamp(16px,1.6vw,18.5px);max-width:58ch}

/* ---------- logo: the white label with the glitchy EPIC ---------- */
.logo{display:inline-flex;align-items:center;flex:none}
.lbl{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;background:#fff;color:#0c0b0f;padding:5px 10px 4px 9px;border-radius:3px 3px 3px 10px;transform:rotate(-3deg);box-shadow:0 6px 16px -8px rgba(0,0,0,.7)}
.lbl b{font-family:"Lilita One","Anton",sans-serif;font-weight:400;font-size:27px;line-height:.9;letter-spacing:.01em;text-shadow:-2px 0 var(--mint),2px 0 var(--pink)}
.lbl small{font-family:"Anton",sans-serif;font-size:8.5px;letter-spacing:.14em;line-height:1;margin-top:3px;align-self:flex-end}
.logo:hover .lbl b{animation:glitch .5s steps(2) 1}
@keyframes glitch{25%{text-shadow:-4px 0 var(--mint),4px 0 var(--pink)}50%{text-shadow:3px 0 var(--mint),-3px 0 var(--pink)}75%{text-shadow:-1px 0 var(--mint),1px 0 var(--pink)}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;font-weight:800;font-size:16px;white-space:nowrap;transition:transform .15s ease,background .15s ease,box-shadow .2s,border-color .15s}
.btn:active{transform:scale(.97)}
.btn.pink{background:var(--pink);color:#fff;box-shadow:0 10px 30px -10px rgba(255,10,145,.8)}
.btn.pink:hover{background:var(--pink-2);box-shadow:0 12px 36px -8px rgba(255,10,145,.95)}
.btn.mint{background:var(--mint);color:var(--on-mint)}
.btn.mint:hover{background:var(--mint-2)}
.btn.wa{background:var(--wa);color:#062b14}
.btn.ghost{border:1.5px solid var(--line-2);color:var(--text)}
.btn.ghost:hover{border-color:var(--text)}
.btn.dark{background:#0c0b0f;color:#fff}
.btn svg{width:20px;height:20px;flex:none}
.btn.sm{height:44px;padding:0 18px;font-size:15px}

/* ---------- notice ---------- */
.notice{background:var(--mint);color:var(--on-mint);font-weight:800;font-size:14.5px;text-align:center;padding:9px 16px;line-height:1.35}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:40;background:rgba(12,11,15,.84);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--line)}
.head .wrap{height:var(--head-h);display:flex;align-items:center;gap:14px}
.head nav{display:flex;gap:2px;margin-left:auto}
.head nav a{padding:8px 12px;border-radius:999px;font-weight:700;font-size:15px;color:var(--muted)}
.head nav a:hover{color:var(--text);background:var(--steel-2)}
.brpill{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px 0 10px;border-radius:999px;border:1.5px solid var(--line-2);font-weight:800;font-size:14px;white-space:nowrap}
.brpill:hover{border-color:var(--mint)}
.brpill i{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none}
.brpill.open i{background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.2)}
.brpill svg{width:14px;height:14px;opacity:.7}
.lang{display:flex;background:var(--steel-2);border-radius:999px;padding:3px}
.lang button{padding:5px 9px;border-radius:999px;font-weight:800;font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.lang button.on{background:var(--text);color:var(--ink)}
.cartbtn{position:relative;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;background:var(--pink);color:#fff;font-weight:800}
.cartbtn svg{width:20px;height:20px}
.cartbtn .n{min-width:22px;height:22px;border-radius:11px;background:#fff;color:var(--pink);font-size:12.5px;display:grid;place-items:center;padding:0 6px}
.cartbtn.bump{animation:bump .35s ease}
@keyframes bump{40%{transform:scale(1.12)}}
@media (max-width:980px){.head nav{display:none}.head .brpill{margin-left:auto}}
@media (max-width:420px){.head .wrap{gap:8px}.lbl b{font-size:23px}.brpill{padding:0 9px;font-size:13px}.lang button{padding:5px 7px}}

/* ---------- status pill ---------- */
.status{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14px;padding:7px 14px 7px 12px;border-radius:999px;background:rgba(12,11,15,.6);border:1px solid var(--line-2);backdrop-filter:blur(6px)}
.status i{width:9px;height:9px;border-radius:50%;background:var(--dim);flex:none}
.status.open i{background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}

/* ---------- menu ---------- */
.mhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 30px}
.search{position:relative;flex:1 1 300px;max-width:420px}
.search input{width:100%;height:52px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--steel);padding:0 18px 0 48px;font-size:16px;outline:none}
.search input:focus{border-color:var(--mint)}
.search svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted)}
.chips{position:sticky;top:var(--head-h);z-index:30;background:rgba(12,11,15,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);margin-top:24px}
.chips .wrap{display:flex;gap:8px;overflow-x:auto;padding:12px 0;scrollbar-width:none}
.chips .wrap::-webkit-scrollbar{display:none}
.chips button{flex:none;height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line-2);font-weight:800;font-size:14.5px;color:var(--muted);white-space:nowrap}
.chips button.on{background:var(--pink);border-color:var(--pink);color:#fff}
.cat{padding-top:36px;scroll-margin-top:calc(var(--head-h) + 66px)}
.cat h3{font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(30px,4vw,44px);text-transform:uppercase;letter-spacing:.01em;line-height:1;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cat h3 small{font-family:"Manrope",sans-serif;font-weight:700;text-transform:none;font-size:14px;color:var(--mint);letter-spacing:0}
.items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
@media (max-width:820px){.items{grid-template-columns:1fr}}
.it{display:flex;gap:14px;background:var(--steel);border:1px solid var(--line);border-radius:var(--r);padding:14px;position:relative;min-height:124px;transition:border-color .15s,background .15s}
.it:hover{border-color:var(--line-2);background:#18171e}
.it .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.it h4{font-weight:800;font-size:17px;line-height:1.25}
.it .orig{font-size:12.5px;color:var(--dim);font-weight:600;margin-top:1px}
.it p{color:var(--muted);font-size:14px;line-height:1.45;margin-top:5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.it .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tag{font-size:11.5px;font-weight:800;letter-spacing:.02em;padding:3px 8px;border-radius:999px;background:var(--steel-3);color:var(--muted);white-space:nowrap}
.tag.new{background:var(--mint);color:var(--on-mint)}
.tag.hit{background:var(--pink-soft);color:var(--pink-2)}
.tag.hot{background:rgba(255,107,74,.15);color:#ff9a80}
.tag.veg{background:rgba(139,212,106,.15);color:#b3e69a}
.tag.cy{background:rgba(242,193,78,.15);color:var(--cy)}
.tag.pork{background:rgba(255,159,184,.12);color:var(--pork);border:1px dashed rgba(255,159,184,.45)}
.tag.kids{background:rgba(111,213,236,.14);color:var(--sky)}
.tag.share{background:rgba(255,255,255,.08);color:#ddd9e6}
.it .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.price{font-weight:900;font-size:18px;color:var(--text);white-space:nowrap}
.price small{font-weight:700;font-size:12.5px;color:var(--muted);margin-right:4px}
.price.multi{display:flex;flex-direction:column;gap:1px;font-size:16.5px;line-height:1.25}
.price.ask{font-size:14px;color:var(--muted);font-weight:700}
.add{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 15px;border-radius:999px;background:var(--pink);color:#fff;font-weight:800;font-size:14.5px;flex:none;transition:background .15s,transform .1s}
.add:hover{background:var(--pink-2)}
.add svg{width:16px;height:16px}
.add:active{transform:scale(.94)}
.it .ph{flex:none;width:136px;align-self:flex-start;position:relative}
.it .ph img{width:136px;height:102px;object-fit:cover;border-radius:14px;background:var(--steel-2);cursor:zoom-in}
@media (max-width:420px){.it .ph,.it .ph img{width:110px}.it .ph img{height:83px}}
.it.off{opacity:.55}
.it.off .add{background:var(--steel-3);color:var(--muted);pointer-events:none}
.offnote{font-size:12.5px;font-weight:800;color:var(--hot)}
.empty{padding:40px 0;color:var(--muted);text-align:center;font-weight:600}
.mupd{color:var(--dim);font-size:13px;margin-top:26px}

/* ---------- sheets (sizes, branch) ---------- */
.ovl{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center}
.sheet{position:relative;width:min(520px,100%);background:var(--steel);border:1px solid var(--line);border-radius:24px 24px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));max-height:88svh;overflow:auto;animation:up .22s ease}
@media (min-width:700px){.ovl{align-items:center}.sheet{border-radius:24px}}
@keyframes up{from{transform:translateY(30px);opacity:0}}
.sheet h4{font-family:"Anton",sans-serif;font-weight:400;font-size:28px;text-transform:uppercase;line-height:1.05;padding-right:46px}
.sheet .sub{color:var(--muted);font-size:14px;margin-top:5px}
.opts{display:grid;gap:8px;margin-top:16px}
.opts button{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:58px;padding:8px 18px;border-radius:14px;border:1.5px solid var(--line-2);font-weight:800;font-size:16px;text-align:left}
.opts button:hover{border-color:var(--pink)}
.opts button b{color:var(--pink-2)}
.opts button small{display:block;color:var(--muted);font-weight:600;font-size:13px}
.opts button.cur{border-color:var(--mint);background:rgba(60,232,208,.07)}
.x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;background:var(--steel-3);display:grid;place-items:center}
.x svg{width:18px;height:18px}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.9);display:grid;place-items:center;padding:20px;cursor:zoom-out}
.lb img{max-width:min(900px,100%);max-height:86svh;border-radius:16px}

/* ---------- cart drawer ---------- */
.drawer{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.62);display:flex;justify-content:flex-end}
.dpanel{width:min(470px,100%);height:100%;background:var(--steel);border-left:1px solid var(--line);display:flex;flex-direction:column;animation:slide .22s ease}
@keyframes slide{from{transform:translateX(40px);opacity:0}}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.dhead h4{font-family:"Anton",sans-serif;font-weight:400;font-size:28px;text-transform:uppercase}
.dhead .x{position:static}
.dbody{flex:1;overflow:auto;padding:14px 20px 24px}
.cl{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.cl .nm{flex:1;min-width:0;font-weight:700;font-size:15px;line-height:1.3}
.cl .nm small{display:block;color:var(--muted);font-weight:600;font-size:13px}
.qty{display:flex;align-items:center;gap:2px;background:var(--steel-3);border-radius:999px;padding:3px}
.qty button{width:30px;height:30px;border-radius:50%;font-weight:800;font-size:18px;line-height:1}
.qty button:hover{background:var(--steel)}
.qty span{min-width:22px;text-align:center;font-weight:800}
.cl .lp{font-weight:800;min-width:78px;text-align:right}
.cempty{text-align:center;color:var(--muted);padding:30px 10px}
.cempty b{display:block;font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;color:var(--text);font-size:26px;margin-bottom:6px}
.total{display:flex;justify-content:space-between;font-weight:900;font-size:19px;padding:14px 0 4px}
.lbl2{display:block;font-size:13px;font-weight:800;color:var(--muted);margin:18px 0 6px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg.two{grid-template-columns:1fr 1fr}
.seg button{min-height:50px;border-radius:12px;border:1.5px solid var(--line-2);font-weight:800;font-size:14.5px;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 6px;line-height:1.2}
.seg button small{font-weight:600;font-size:11.5px;color:var(--dim)}
.seg button.on{border-color:var(--pink);color:var(--text);background:var(--pink-soft)}
.seg button.on small{color:var(--muted)}
.fld{display:block;margin-top:12px}
.fld>span{display:block;font-size:13px;font-weight:800;color:var(--muted);margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;height:48px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--steel-2);padding:0 14px;font-size:16px;outline:none}
.fld textarea{height:auto;min-height:70px;padding:11px 14px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--mint)}
.fld .bad,.fld input.bad,.fld textarea.bad{border-color:var(--hot);box-shadow:0 0 0 3px rgba(255,107,74,.2)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.45}
.dfoot{padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--steel)}
.dfoot .btn{width:100%}
.dfoot small{display:block;text-align:center;color:var(--dim);font-size:12.5px;margin-top:8px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);opacity:0;z-index:95;background:var(--text);color:var(--ink);font-weight:800;padding:12px 20px;border-radius:999px;transition:.25s;pointer-events:none;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- demo badge ---------- */
.demo{position:fixed;right:10px;top:calc(var(--head-h) + 10px);z-index:60;background:#ff3b30;color:#fff;font-weight:800;font-size:11px;letter-spacing:.12em;padding:5px 9px;border-radius:7px;opacity:.9;pointer-events:none}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}