/* Burgers & More TX — dark theme, mobile-first */
:root{
  --bg:#12100e; --card:#1e1b18; --card2:#272320; --line:#3a342e;
  --txt:#f5efe6; --dim:#a89c8c; --gold:#f2b705; --red:#d94f3d; --grn:#4caf6d;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* iOS Safari: 100% / 100vh both ignore the dynamic toolbar, which hides the
   bottom bar behind Safari's chrome. 100dvh is the correct unit; the 100vh
   line above it is the fallback for older iOS that ignores dvh. */
html,body{height:100vh; height:100dvh}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior-y:none;
  /* stop iOS rubber-band scrolling the whole page behind the app */
  position:fixed; width:100%;
  -webkit-text-size-adjust:100%;   /* iOS enlarges text on rotate without this */
}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:none; cursor:pointer}
.hide{display:none !important}

.app{max-width:520px; margin:0 auto; height:100vh; height:100dvh;
     display:flex; flex-direction:column;
     background:var(--bg); position:relative; overflow:hidden}
section{position:absolute; inset:0; display:flex; flex-direction:column}

/* ---- header ---- */
header{flex:0 0 auto; background:var(--gold); color:#231c05;
       padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;
       display:flex; align-items:center; gap:10px}
.hh{flex:1; min-width:0}
header h1{margin:0; font-size:16px; font-weight:800; letter-spacing:.3px;
          white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
header .sub{font-size:11px; opacity:.78; font-weight:600}
.back{font-size:26px; line-height:1; width:26px; color:#231c05; padding:0}
.iconbtn{font-size:21px; position:relative; color:#231c05; padding:2px 4px}
.iconbtn.txt{font-size:12px; font-weight:800}
.badge{position:absolute; top:-3px; right:-6px; background:var(--red); color:#fff;
       font-size:10px; font-weight:700; min-width:17px; height:17px; border-radius:9px;
       display:flex; align-items:center; justify-content:center; padding:0 4px}

.openbar{flex:0 0 auto; background:#14301d; color:#7fe0a0; font-size:12px;
         padding:6px 14px; border-bottom:1px solid var(--line)}
.openbar.closed{background:#3a1410; color:#ff9b8a}

/* ---- tabs ---- */
.tabs{flex:0 0 auto; display:flex; gap:6px; overflow-x:auto; padding:9px 12px;
      background:var(--card); border-bottom:1px solid var(--line);
      scrollbar-width:none; -webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto; padding:6px 13px; border-radius:20px; background:var(--card2);
     color:var(--dim); font-size:13px; font-weight:600; white-space:nowrap;
     border:1px solid transparent}
.tab.on{background:var(--gold); color:#231c05; border-color:var(--gold)}

/* ---- scroll area ---- */
.scroll{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
        padding:12px 12px calc(120px + var(--safe-b))}
/* cart and confirmation stack two buttons, so they need more clearance */
#cart .scroll,
#conf .scroll{padding-bottom:calc(190px + var(--safe-b))}
.scroll::-webkit-scrollbar{width:0}

h2.cat{font-size:12px; letter-spacing:1.4px; color:var(--gold); text-transform:uppercase;
       margin:18px 0 8px; font-weight:800}
h2.cat:first-child{margin-top:2px}
.catnote{color:var(--dim); font-size:11.5px; margin:-4px 0 9px}

.item{display:flex; gap:11px; width:100%; text-align:left; background:var(--card);
      border:1px solid var(--line); border-radius:13px; padding:11px; margin-bottom:8px}
.item:active{background:var(--card2)}
.thumb{flex:0 0 60px; height:60px; border-radius:10px; font-size:28px;
       display:flex; align-items:center; justify-content:center;
       background:linear-gradient(140deg,#3a2f22,#241c14)}
.item .txt{flex:1; min-width:0; display:flex; flex-direction:column}
.item .nm{font-weight:700; font-size:14.5px}
.item .ds{color:var(--dim); font-size:12px; margin-top:2px}
.item .pr{color:var(--gold); font-weight:800; font-size:14.5px; margin-top:4px}

/* ---- item detail ---- */
.hero{height:150px; border-radius:14px; margin-bottom:12px; font-size:60px;
      display:flex; align-items:center; justify-content:center;
      background:linear-gradient(140deg,#4a3a25,#241c14)}
.idesc{color:var(--dim); font-size:13px; margin:0 0 16px}
.grp{margin-bottom:16px}
.grp .lbl{font-size:12px; font-weight:800; letter-spacing:.6px;
          text-transform:uppercase; margin-bottom:8px}
.req{color:var(--red); font-size:10px; margin-left:6px; font-weight:700}

.opt{display:flex; align-items:center; gap:11px; width:100%; text-align:left;
     background:var(--card); border:1px solid var(--line); border-radius:10px;
     padding:11px; margin-bottom:6px; font-size:14px}
.opt.stack{align-items:flex-start}
.opt.on{border-color:var(--gold); background:#2b2410}
.dot{width:18px; height:18px; border-radius:50%; border:2px solid var(--dim); flex:0 0 auto}
.opt.on .dot{border-color:var(--gold); background:var(--gold); box-shadow:inset 0 0 0 3.5px #2b2410}
.sq{width:18px; height:18px; border-radius:5px; border:2px solid var(--dim); flex:0 0 auto}
.opt.on .sq{border-color:var(--gold); background:var(--gold)}
.opt .up{margin-left:auto; color:var(--gold); font-weight:700; font-size:13px}
.opt .nm{display:block; font-weight:700; font-size:13.5px}
.opt .ds{display:block; color:var(--dim); font-size:11.5px; margin-top:2px}

/* font-size MUST be >=16px: iOS Safari auto-zooms the page on focus below that
   and never zooms back out. This is the single most common iOS form bug. */
textarea,input,select{width:100%; background:var(--card); color:var(--txt);
  border:1px solid var(--line); border-radius:10px; padding:11px;
  font-size:16px; resize:none; -webkit-appearance:none; appearance:none}
textarea:focus,input:focus,select:focus{outline:none; border-color:var(--gold)}
/* appearance:none removed the native arrow — draw our own */
select{font-weight:600; padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23a89c8c' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center}
.hint{color:var(--dim); font-size:11.5px; margin-top:6px}
.fine{color:var(--dim); font-size:11.5px; text-align:center; margin:14px 0 0}
.err{background:#3a1410; border:1px solid var(--red); color:#ff9b8a;
     border-radius:9px; padding:9px 11px; font-size:12.5px; margin-top:10px}

.qty{display:flex; align-items:center; gap:18px; justify-content:center;
     background:var(--card); border:1px solid var(--line); border-radius:11px; padding:8px}
.qty button{width:38px; height:38px; border-radius:9px; background:var(--card2); font-size:20px}
.qty span{font-size:18px; font-weight:800; min-width:28px; text-align:center}

.fld{margin-bottom:10px}
.fld label{display:block; font-size:11.5px; color:var(--dim); margin-bottom:5px; font-weight:600}

/* ---- cart ---- */
.line{background:var(--card); border:1px solid var(--line); border-radius:12px;
      padding:12px; margin-bottom:8px}
.line .top{display:flex; gap:8px}
.line .nm{font-weight:700; font-size:14px; flex:1}
.line .pr{color:var(--gold); font-weight:800; font-size:14px}
.line .mods{color:var(--dim); font-size:12px; margin-top:3px}
.line .nt{color:#ffd9a0; background:#332612; border-left:3px solid var(--gold);
          padding:6px 9px; border-radius:0 7px 7px 0; font-size:12px;
          margin-top:7px; font-weight:600}
.line .acts{display:flex; gap:16px; margin-top:9px}
.line .acts button{font-size:12px; color:var(--dim); text-decoration:underline; padding:0}
.empty{text-align:center; color:var(--dim); font-size:14px; padding:40px 0}

.tiprow{display:flex; gap:6px}
.tip{flex:1; text-align:center; background:var(--card); border:1px solid var(--line);
     border-radius:10px; padding:10px 3px; font-size:13px; font-weight:700}
.tip b{display:block; font-size:11px; font-weight:600; color:var(--dim); margin-top:2px}
.tip.on{border-color:var(--gold); background:#2b2410; color:var(--gold)}
.tip.on b{color:var(--gold); opacity:.85}
.tip.dis{opacity:.35; cursor:not-allowed}

.info{background:var(--card); border:1px solid var(--line); border-radius:12px;
      padding:12px; font-size:13px}
.info.who{display:flex; align-items:center; gap:11px; margin-bottom:14px}
.info.who .av{font-size:22px}
.info.who .grow{flex:1; min-width:0}
.info.who b{display:block; font-size:14px}
.info.who span span{color:var(--dim); font-size:12px}
.link{color:var(--gold); font-size:12.5px; font-weight:700; padding:0}
.info.block{margin-top:12px}
.info .ttl{font-weight:700; margin-bottom:7px}
.info .r{display:flex; justify-content:space-between; gap:12px; padding:4px 0; color:var(--dim)}
.info .r b{color:var(--txt); font-weight:600; white-space:nowrap}
.info .r.sep{border-top:1px solid var(--line); margin-top:7px; padding-top:9px}
.info .r.grand{color:var(--txt); font-weight:800; font-size:15px}
.info .sm{font-size:11.5px}
.info .note{color:#ffd9a0; font-size:11.5px}

.tot{background:var(--card); border:1px solid var(--line); border-radius:12px;
     padding:13px; margin-top:12px}
.tot .r{display:flex; justify-content:space-between; font-size:13.5px;
        margin-bottom:6px; color:var(--dim)}
.tot .r i{font-style:normal; opacity:.7}
.tot .r.big{color:var(--txt); font-weight:800; font-size:18px;
            border-top:1px solid var(--line); padding-top:10px; margin:10px 0 0}
.nofee{color:var(--grn); font-size:12px; margin-top:10px}

/* ---- confirmation ---- */
.big{text-align:center; padding:24px 0 6px}
.big .ic{font-size:54px}
.big h3{margin:10px 0 4px; font-size:21px}
.big p{color:var(--dim); font-size:13.5px; margin:0}
.ordno{font-size:33px; font-weight:800; color:var(--gold);
       letter-spacing:2px; text-align:center; margin:14px 0}
.steps{display:flex; gap:5px; margin:18px 0}
.step{flex:1; text-align:center; font-size:10.5px; color:var(--dim)}
.step .b{height:5px; border-radius:3px; background:var(--card2); margin-bottom:6px}
.step.on .b{background:var(--grn)}
.step.on{color:var(--grn); font-weight:700}

/* ---- bottom bar ---- */
.bar{position:absolute; left:0; right:0; bottom:0; z-index:50;
     padding:11px 12px calc(14px + var(--safe-b));
     background:linear-gradient(180deg,rgba(18,16,14,0),var(--bg) 26%);
     display:flex; flex-direction:column; gap:8px}
.btn{width:100%; border-radius:13px; padding:15px; font-size:15.5px; font-weight:800;
     background:var(--gold); color:#231c05; display:flex; justify-content:center;
     align-items:center; gap:9px; text-decoration:none}
.btn.dark{background:var(--card2); color:var(--txt); border:1px solid var(--line)}
.btn:active{transform:scale(.985)}

/* ---- toast ---- */
.toast{position:absolute; left:12px; right:12px; bottom:calc(90px + var(--safe-b)); z-index:70;
       background:var(--grn); color:#05230f; border-radius:12px; padding:13px 14px;
       font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:9px;
       box-shadow:0 8px 24px rgba(0,0,0,.5); cursor:pointer;
       opacity:0; transform:translateY(16px); pointer-events:none;
       transition:opacity .22s ease, transform .22s ease}
.toast.show{opacity:1; transform:translateY(0); pointer-events:auto}

/* iPhone "add to home screen" hint */
/* menu screen has no bottom bar, so this can sit low — but it is only ever
   shown on the menu, never over a screen with a primary action button */
.ioshint{position:absolute; left:10px; right:10px; bottom:calc(14px + var(--safe-b)); z-index:80;
  background:var(--card2); border:1px solid var(--gold); border-radius:13px;
  padding:12px; display:flex; align-items:center; gap:11px;
  box-shadow:0 10px 30px rgba(0,0,0,.6)}
.ioshint .ic{font-size:24px}
.ioshint .tx{flex:1; font-size:12.5px; color:var(--dim); line-height:1.35}
.ioshint .tx b{color:var(--txt); display:block; font-size:13.5px; margin-bottom:2px}
.ioshint .tx b:last-child{display:inline; font-size:12.5px}
.ioshint .shr{color:var(--gold); font-weight:700}
.ioshint button{color:var(--dim); font-size:17px; padding:4px 6px; align-self:flex-start}

/* visually-hidden label, still read by screen readers */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

@media (min-width:560px){
  .app{border-left:1px solid var(--line); border-right:1px solid var(--line)}
}