/* Estética Brasa Burger: chapa vermelha, fita de mostarda, Bowlby One nos títulos e Figtree no texto */
:root{
  --bg:#fff9f2; --surface:#ffffff; --surface2:#fbefe1; --ink:#26140a; --muted:#87705f; --line:#efdfcd;
  --ketchup:#d93a1f; --ketchup-ink:#ffffff; --mustard:#f6b519; --mustard-ink:#2a1606; --leaf:#3f9a3a; --danger:#c42b17;
  --band:#d93a1f; --band2:#b92c14;
  --shadow:0 1px 2px rgba(60,25,5,.06),0 8px 24px -12px rgba(60,25,5,.22);
  --display:"Bowlby One","Arial Black",Impact,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#160d08; --surface:#21150e; --surface2:#2a1b12; --ink:#f8ece0; --muted:#b39b88; --line:#3a281c;
  --ketchup:#ff5b3a; --ketchup-ink:#1b0a03; --mustard:#ffc23d; --mustard-ink:#241304; --leaf:#62c255; --danger:#ff6a52;
  --band:#a82a13; --band2:#7f1f0d; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -12px rgba(0,0,0,.7); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#160d08; --surface:#21150e; --surface2:#2a1b12; --ink:#f8ece0; --muted:#b39b88; --line:#3a281c;
  --ketchup:#ff5b3a; --ketchup-ink:#1b0a03; --mustard:#ffc23d; --mustard-ink:#241304; --leaf:#62c255; --danger:#ff6a52;
  --band:#a82a13; --band2:#7f1f0d; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -12px rgba(0,0,0,.7); color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%}
a{color:var(--ketchup)}
:focus-visible{outline:3px solid var(--mustard);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.col{max-width:560px;margin:0 auto}
.col.wide{max-width:960px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.display{font-family:var(--display);letter-spacing:.3px;font-weight:400}

/* ---------- Faixa de chapa (topo) ---------- */
.band{background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.12) 0 2px,transparent 3px) 0 0/34px 34px,radial-gradient(circle at 70% 60%,rgba(255,255,255,.08) 0 1.5px,transparent 2.5px) 0 0/26px 26px,linear-gradient(180deg,var(--band),var(--band2));color:#fff;position:relative;overflow:hidden}
.ticker{background:var(--mustard);color:var(--mustard-ink);overflow:hidden;white-space:nowrap;border-block:2px solid var(--mustard-ink)}
.ticker div{display:inline-block;font:14px/1 var(--display);letter-spacing:1px;padding:10px 0 8px;animation:marquee 26s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}

/* barra dos painéis */
.top{position:sticky;top:0;z-index:20}
.top .bar{display:flex;align-items:center;gap:10px;padding-block:12px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-width:0}
.brand .mark{width:36px;height:36px;border-radius:50%;background:#fff;border:3px solid var(--mustard);display:grid;place-items:center;font:15px/1 var(--display);color:var(--ketchup);flex:none}
.brand b{font:18px/1 var(--display);letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:block;font-size:12px;opacity:.85;font-weight:600}
.top .grow{flex:1}
.ghost{border:1.5px solid rgba(255,255,255,.35);background:rgba(0,0,0,.18);color:#fff;border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.ghost:hover{background:rgba(0,0,0,.3)}

/* ---------- Botões e campos ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;padding:13px 18px;background:var(--ketchup);color:var(--ketchup-ink);font-weight:800;font-size:15px;text-decoration:none;text-align:center;transition:transform .12s,filter .12s}
.btn:hover{filter:brightness(1.06)}.btn:active{transform:scale(.98)}
.btn.alt{background:var(--surface2);color:var(--ink)}
.btn.dark{background:var(--ink);color:var(--bg)}
.btn.ok{background:var(--leaf);color:#fff}
.btn.wa{background:#1f9d55;color:#fff}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.sm{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:6px 10px;font-weight:700;font-size:13px;text-decoration:none;color:var(--ink)}
.sm:hover{border-color:var(--ink)}
.sm.danger{color:var(--danger)}
.sm.dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sm.ok{background:var(--leaf);color:#fff;border-color:var(--leaf)}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label,.lbl{font-size:13px;font-weight:700}
.field small{color:var(--muted);font-size:12.5px}
.field.full{grid-column:1/-1}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],select,textarea{width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 12px;outline:0;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
textarea{min-height:76px;resize:vertical}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--ketchup);margin:0}
.err{color:var(--danger);font-size:13.5px;font-weight:600;margin:6px 0 0}

/* ---------- Cartões, chips e status ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card h3{margin:0 0 4px;font:18px/1.15 var(--display);letter-spacing:.3px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:999px;padding:7px 12px;font-size:13.5px;font-weight:700;background:var(--surface);cursor:pointer;white-space:nowrap}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip input{margin:0;accent-color:var(--ketchup)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:4px 9px;border-radius:999px;background:var(--surface2);color:var(--ink);white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8}
.pill.ok{background:color-mix(in srgb,var(--leaf) 16%,transparent);color:var(--leaf)}
.pill.warn{background:color-mix(in srgb,var(--mustard) 26%,transparent);color:var(--mustard-ink)}
.pill.bad{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.pill.info{background:color-mix(in srgb,var(--ketchup) 12%,transparent);color:var(--ketchup)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pill.warn{color:var(--mustard)}}
:root[data-theme="dark"] .pill.warn{color:var(--mustard)}
.tg{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 7px;border-radius:6px;background:var(--surface2);color:var(--ink)}
.tg.hot{background:var(--ketchup);color:var(--ketchup-ink)}
.tg.new{background:var(--mustard);color:var(--mustard-ink)}
.tg.veg{background:var(--leaf);color:#fff}
.tg.ia{background:#6d4cff;color:#fff}
.notice{padding:12px 14px;border-radius:14px;background:var(--mustard);color:var(--mustard-ink);font-weight:700;font-size:14px}
.notice.soft{background:var(--surface2);color:var(--ink);font-weight:600}
.notice.bad{background:color-mix(in srgb,var(--danger) 14%,var(--surface));color:var(--ink);border:1.5px solid var(--danger)}
.empty{text-align:center;color:var(--muted);padding:40px 16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty .seal{width:72px;height:72px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;font-size:32px}
.empty h2{margin:0;color:var(--ink);font:22px/1.1 var(--display)}

/* miniatura (foto ou letra) */
.mini{width:52px;height:52px;border-radius:12px;background:var(--surface2);display:grid;place-items:center;overflow:hidden;flex:none;font:22px/1 var(--display);color:var(--ketchup)}
.mini img{width:100%;height:100%;object-fit:cover}

/* ---------- Abas ---------- */
.tabs{position:sticky;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.tabs-in{display:flex;gap:6px;overflow-x:auto;padding-block:10px;scrollbar-width:none}
.tabs-in::-webkit-scrollbar{display:none}
.tab{flex:none;border:1.5px solid var(--line);background:var(--surface);padding:8px 14px;border-radius:999px;font-weight:700;font-size:14px;transition:all .2s;color:var(--ink);text-decoration:none}
.tab.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tab .count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--ketchup);color:var(--ketchup-ink);font-size:12px}

/* ---------- Folha (bottom sheet) ---------- */
.ov{position:fixed;inset:0;z-index:40;background:rgba(20,8,2,.55);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet{width:100%;max-width:560px;max-height:92%;overflow:auto;background:var(--bg);border-radius:24px 24px 0 0;padding-top:8px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));animation:up .35s cubic-bezier(.2,1.2,.4,1);overscroll-behavior:contain}
@media (min-width:700px){.ov{align-items:center}.sheet{border-radius:24px;max-height:88%}}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(60px);opacity:.4}}
.grab{width:42px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 6px}
.sh-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:6px 10px}
.sh-head h2{font:22px/1.1 var(--display);margin:0}
.x{border:0;background:var(--surface2);width:36px;height:36px;border-radius:50%;font-size:20px;line-height:1;flex:none;color:var(--ink)}
.sticky-cta{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--bg) 30%);padding-top:18px;padding-bottom:4px;margin-top:8px;display:flex;gap:10px}
.sticky-cta .btn{flex:1}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:var(--shadow);animation:up .3s;max-width:calc(100% - 32px);text-align:center}
.toast.bad{background:var(--danger);color:#fff}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:rot .7s linear infinite;display:inline-block;flex:none}
@keyframes rot{to{transform:rotate(360deg)}}
.loading{display:flex;justify-content:center;padding:60px 0;color:var(--muted)}

/* o plano grátis da Netlify põe um selo fixo no canto de baixo: os botões fixos sobem para não ficarem embaixo dele */
body:has(#nl-badge-frame) .sheet{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
body:has(#nl-badge-frame) .sticky-cta{bottom:calc(-64px - env(safe-area-inset-bottom,0px));padding-bottom:48px}
body:has(#nl-badge-frame) .cartbar{bottom:48px}
body:has(#nl-badge-frame) .toast{bottom:calc(72px + env(safe-area-inset-bottom,0px))}

@media (max-width:520px){.fields{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}.ticker div{animation:none}}