/* Mekk Burger - themed stylesheet.
   Colours come from semantic tokens. Each theme below just redefines the tokens,
   so the layout never changes - only the palette. Add a new theme by copying a
   [data-theme="..."] block and changing the colours. */

:root{
  /* ----- Classic - Cream Paper (light). This is also the default. ----- */
  --bg:#FCEFC2;
  --bg-2:#F7E4A0;
  --surface:#fffdf6;
  --line:#e7d8a8;
  --text:#1c1407;
  --muted:#8a7948;
  --edge:#141414;
  --shadow-color:#141414;
  --accent:#F5C518;
  --on-accent:#141414;
  --accent-2:#6e2f0d;
  --on-accent-2:#ffffff;
  --wordmark:#141414;

  /* fixed across all themes (back-of-house bars + status colours) */
  --chip-dark:#141414;
  --on-dark:#FCEFC2;
  --ok:#1f8a4c;
  --danger:#c0392b;

  --shadow:4px 4px 0 var(--shadow-color);
  --shadow-sm:3px 3px 0 var(--shadow-color);
}

[data-theme="ruler"]{
  /* Midnight - black + bright yellow + cream. Matches the printed menu. */
  --bg:#141210; --bg-2:#211c15; --surface:#241f18; --line:#3a3228;
  --text:#f6ecce; --muted:#ad9e7c;
  --edge:#f6ecce; --shadow-color:#F5C518;
  --accent:#F5C518; --on-accent:#141210;
  --accent-2:#f0b429; --on-accent-2:#141210;
  --wordmark:#F5C518;
}

[data-theme="ember"]{
  /* Charcoal and Flame - smoky charcoal with a flame-orange pop. */
  --bg:#17151a; --bg-2:#221f26; --surface:#211e25; --line:#34303a;
  --text:#f3e9e2; --muted:#a99f98;
  --edge:#f3e9e2; --shadow-color:#ff5a1f;
  --accent:#ff6a1a; --on-accent:#1a1206;
  --accent-2:#ffb020; --on-accent-2:#1a1206;
  --wordmark:#ff6a1a;
}

[data-theme="diner"]{
  /* Mint and Cherry - retro American diner, light and playful. */
  --bg:#e9f7f2; --bg-2:#d4efe6; --surface:#ffffff; --line:#bfe3d8;
  --text:#143230; --muted:#5b8079;
  --edge:#0f2f2c; --shadow-color:#0f2f2c;
  --accent:#e63946; --on-accent:#ffffff;
  --accent-2:#0f8f7e; --on-accent-2:#ffffff;
  --wordmark:#0f2f2c;
}

[data-theme="espresso"]{
  /* Coffee and Gold - warm dark, nods to the coffee on the menu. */
  --bg:#211610; --bg-2:#2e2018; --surface:#2b1f17; --line:#3e2e22;
  --text:#f4e9d8; --muted:#b39c82;
  --edge:#f4e9d8; --shadow-color:#caa14a;
  --accent:#d8a24a; --on-accent:#211610;
  --accent-2:#c8743a; --on-accent-2:#211610;
  --wordmark:#d8a24a;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:.5px;line-height:1;text-transform:uppercase;margin:0}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:3px solid var(--edge)}
.nav-inner{max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;gap:6px;align-items:baseline}
.brand-mark{font-family:'Anton',sans-serif;font-size:26px;color:var(--wordmark);letter-spacing:1px;line-height:1}
.brand-mark--y{color:var(--accent);-webkit-text-stroke:1.5px var(--edge);text-shadow:2px 2px 0 var(--shadow-color)}
.brand-mark--sm{font-size:22px}
.nav-links{display:flex;align-items:center;gap:22px;font-weight:700}
.nav-links a{padding:6px 2px}
.nav-cart{position:relative;background:var(--accent);color:var(--on-accent);border:2.5px solid var(--edge);border-radius:10px;padding:8px 16px!important;box-shadow:var(--shadow-sm)}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;margin-left:8px;background:var(--chip-dark);color:var(--accent);border-radius:20px;font-size:12px;font-weight:800;vertical-align:middle}

/* ---------- flash ---------- */
.flash-wrap{max-width:1100px;margin:14px auto 0;padding:0 20px;display:grid;gap:8px}
.flash{border:2.5px solid var(--edge);border-radius:10px;padding:10px 14px;font-weight:600;box-shadow:var(--shadow-sm);color:#16110a}
.flash--success{background:#dff5e6}
.flash--info{background:#fff7d6}
.flash--error{background:#ffe0db}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Inter';font-weight:800;color:var(--text);
  border:2.5px solid var(--edge);border-radius:12px;padding:12px 22px;cursor:pointer;background:var(--surface);
  box-shadow:var(--shadow);transition:transform .05s ease,box-shadow .05s ease;font-size:16px;text-transform:uppercase;letter-spacing:.4px}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--shadow-color)}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--dark{background:var(--chip-dark);color:var(--accent)}
.btn--ghost{background:transparent;box-shadow:none;border-color:var(--line);color:var(--text)}
.btn--block{width:100%}
.btn--sm{padding:8px 14px;font-size:13px;box-shadow:var(--shadow-sm)}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ---------- hero ---------- */
.hero{padding:30px 0 10px}
.hero-banner{border:3px solid var(--edge);border-radius:18px;overflow:hidden;box-shadow:6px 6px 0 var(--shadow-color);background:var(--bg-2)}
.hero-banner img{width:100%}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:26px 0 6px}
.hero-strip{margin-top:18px;border-top:3px solid var(--edge);border-bottom:3px solid var(--edge);background:var(--accent);overflow:hidden;white-space:nowrap}
.hero-strip .run{display:inline-block;padding:8px 0;font-family:'Anton';font-size:18px;letter-spacing:2px;color:var(--on-accent);animation:slide 22s linear infinite}
.hero-strip .run span{padding:0 22px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- section ---------- */
.section{padding:42px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.section-title{font-size:40px;color:var(--text)}
.section-title em{font-style:normal;color:var(--accent);-webkit-text-stroke:1.5px var(--edge);text-shadow:2px 2px 0 var(--shadow-color)}
.eyebrow{display:inline-block;background:var(--accent-2);color:var(--on-accent-2);font-weight:800;font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:5px 12px;border-radius:20px;margin-bottom:10px}

/* ---------- menu grid ---------- */
.cat-block{margin-bottom:40px}
.cat-name{font-size:28px;color:var(--accent-2);margin-bottom:16px;padding-bottom:8px;border-bottom:3px dashed var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{background:var(--surface);border:2.5px solid var(--edge);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card-img{aspect-ratio:4/3;background:var(--bg-2);display:grid;place-items:center;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-img .ph{font-family:'Anton';font-size:34px;color:var(--muted);opacity:.6}
.card-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-title{font-weight:800;font-size:18px}
.card-desc{color:var(--muted);font-size:14px;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.price{font-family:'Anton';font-size:22px;color:var(--accent-2)}
.price small{font-family:'Inter';font-size:12px;font-weight:700;color:var(--muted)}
.qty{display:inline-flex;border:2.5px solid var(--edge);border-radius:10px;overflow:hidden}
.qty button{width:34px;height:36px;border:0;background:var(--bg-2);color:var(--text);font-size:18px;font-weight:800;cursor:pointer}
.qty input{width:40px;text-align:center;border:0;border-left:2.5px solid var(--edge);border-right:2.5px solid var(--edge);font-weight:800;font-size:15px;background:var(--surface);color:var(--text)}

/* ---------- cart / checkout ---------- */
.layout{display:grid;grid-template-columns:1fr 360px;gap:26px;align-items:start}
.panel{background:var(--surface);border:2.5px solid var(--edge);border-radius:16px;box-shadow:var(--shadow);padding:20px}
.panel h3{font-size:22px;color:var(--text);margin-bottom:14px}
.line{display:flex;gap:14px;padding:14px 0;border-bottom:2px dashed var(--line)}
.line:last-child{border-bottom:0}
.line-main{flex:1}
.line-name{font-weight:800}
.line-note input{width:100%;margin-top:8px;border:2px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;background:var(--surface);color:var(--text)}
.line-side{text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.totrow{display:flex;justify-content:space-between;padding:7px 0;font-weight:600}
.totrow.big{font-family:'Anton';font-size:22px;color:var(--text);border-top:3px solid var(--edge);margin-top:8px;padding-top:12px}
.summary{position:sticky;top:90px}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;margin-bottom:6px}
.field input[type=text],.field input[type=tel],.field input[type=password],.field input[type=email],.field input[type=number],.field input[type=url],.field textarea,.field select{
  width:100%;border:2.5px solid var(--edge);border-radius:10px;padding:11px 13px;font-size:15px;font-family:inherit;background:var(--surface);color:var(--text)}
.field textarea{resize:vertical}
.field .help{color:var(--muted);font-size:13px;margin-top:5px}
.err{color:var(--danger);font-size:13px;font-weight:600;margin-top:5px}
.radios{display:grid;gap:10px}
.radio-card{display:flex;gap:12px;align-items:flex-start;border:2.5px solid var(--edge);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--surface)}
.radio-card input{margin-top:3px}
.radio-card .t{font-weight:800}
.radio-card .s{color:var(--muted);font-size:13px}
.pay-accounts{margin-top:6px;display:grid;gap:10px}
.acct{border:2px dashed var(--line);border-radius:10px;padding:10px 12px;background:var(--bg-2)}
.acct .lbl{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-2)}
.acct .num{font-family:'Anton';font-size:18px;letter-spacing:1px}
.notice{border:2.5px solid var(--edge);background:#fff7d6;color:#16110a;border-radius:12px;padding:12px 14px;font-weight:600;box-shadow:var(--shadow-sm)}

/* ---------- confirmation / track ---------- */
.center-card{max-width:620px;margin:40px auto;padding:0 20px}
.big-number{font-family:'Anton';font-size:34px;letter-spacing:1px;color:var(--accent-2)}
.status-pill{display:inline-block;font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-size:13px;padding:6px 14px;border-radius:20px;border:2.5px solid var(--edge);color:#16110a}
.s-pending{background:#fff2c2}.s-confirmed{background:#d8ecff}.s-preparing{background:#ffe2bd}
.s-ready{background:#d7f5dd}.s-out_for_delivery{background:#e3dcff}.s-completed{background:#cdeccd}.s-cancelled{background:#ffd9d3}
.track-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.track-steps .st{flex:1;min-width:90px;text-align:center;border:2.5px solid var(--edge);border-radius:10px;padding:8px 4px;font-size:12px;font-weight:700;background:var(--surface);color:var(--text);opacity:.4}
.track-steps .st.on{opacity:1;background:var(--accent);color:var(--on-accent)}

/* ---------- staff (fixed dark back-of-house, picks up theme accent) ---------- */
.staff-bar{background:var(--chip-dark);color:var(--on-dark);position:sticky;top:0;z-index:30}
.staff-bar .in{max-width:1200px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.staff-bar .l{font-family:'Anton';font-size:20px;color:var(--accent)}
.staff-bar a{color:var(--on-dark);font-weight:700}
.staff-wrap{max-width:1200px;margin:0 auto;padding:22px 20px}
.kpi{display:inline-flex;gap:8px;align-items:baseline;background:#241d10;color:var(--on-dark);border:2px solid var(--accent);border-radius:10px;padding:6px 12px;font-weight:700}
.kpi b{font-family:'Anton';font-size:20px;color:var(--accent)}
.ocard{background:var(--surface);border:2.5px solid var(--edge);border-radius:14px;box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.ocard.flash-new{animation:pop 1s ease}
@keyframes pop{0%{box-shadow:0 0 0 4px var(--accent),var(--shadow)}100%{box-shadow:var(--shadow)}}
.ocard-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.ocard-num{font-family:'Anton';font-size:20px}
.ocard-meta{color:var(--muted);font-size:13px;font-weight:600}
.tag{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:20px;border:2px solid var(--edge);margin-left:6px;color:#16110a}
.tag--cod{background:#e7f7ea}.tag--bank{background:#fff0c2}.tag--unpaid{background:#ffd9d3}.tag--paid{background:#cdeccd}
.tag--delivery{background:#e3dcff}.tag--pickup{background:#d8ecff}
.oitems{margin:10px 0;display:grid;gap:5px}
.oitem{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.oitem .n{color:var(--muted);font-style:italic}
.oinstr{background:#fff7d6;color:#16110a;border:2px solid var(--edge);border-radius:10px;padding:10px 12px;font-weight:600;margin:10px 0}
.oactions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.muted-link{color:var(--muted);font-weight:700;font-size:13px}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty .big{font-family:'Anton';font-size:30px;color:var(--muted);opacity:.8}

.login-box{max-width:380px;margin:8vh auto;padding:0 20px}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .layout{grid-template-columns:1fr}
  .summary{position:static}
  .section-title{font-size:30px}
  .nav-links{gap:14px;font-size:14px}
  .brand-mark{font-size:22px}
}

/* keyboard focus + reduced motion floors */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- footer + home info pills (fixed dark footer, theme accent) ---------- */
.footer{background:var(--chip-dark);color:var(--on-dark);margin-top:46px}
.footer-inner{max-width:1100px;margin:0 auto;padding:30px 20px;display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
.footer .brand-mark{color:var(--on-dark)}
.footer .brand-mark--y{color:var(--accent)}
.footer-tag{color:var(--accent);font-weight:700;margin:8px 0 0}
.footer-cols{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.footer-cols a{color:var(--on-dark);font-weight:600}
.footer-cols a:hover{color:var(--accent)}
.footer-addr{color:var(--on-dark);opacity:.75;font-size:14px}
.footer-staff{opacity:.55;font-size:13px}
.footer-base{text-align:center;padding:12px;background:#0c0a07;color:var(--accent);font-family:'Anton';letter-spacing:1px}

.info-strip{display:flex;gap:14px;flex-wrap:wrap}
.info-pill{flex:1;min-width:200px;background:var(--surface);border:2.5px solid var(--edge);border-radius:14px;box-shadow:var(--shadow-sm);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.info-pill b{font-family:'Anton';font-weight:400;font-size:18px;letter-spacing:.5px;color:var(--accent-2)}
.info-pill span{color:var(--muted);font-weight:600;font-size:14px}

/* ---------- accounts / auth pages ---------- */
.auth-wrap{max-width:440px;margin:40px auto;padding:0 20px}
.auth-card{padding:26px}
.auth-guest{text-align:center;margin-top:16px;color:var(--muted);font-size:14px}
.social-col{display:grid;gap:10px}
.social-btn{background:var(--surface);color:var(--text)}
.or-sep{display:flex;align-items:center;gap:12px;color:var(--muted);font-weight:700;font-size:13px;margin:16px 0}
.or-sep::before,.or-sep::after{content:"";height:2px;background:var(--line);flex:1}
.auth-links{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-weight:600;font-size:14px}
.auth-links a:hover{color:var(--accent-2)}
.auth-swap{text-align:center;margin-top:14px;color:var(--muted)}
.field--check label{display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}
.field--check input{width:18px;height:18px}
.acc-links{display:flex;flex-direction:column;gap:8px;font-weight:600}
.acc-links a:hover{color:var(--accent-2)}

/* GPS pin control */
.gps-row{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.gps-status{font-weight:700;font-size:13px;color:var(--muted)}
.gps-status.ok{color:var(--ok)}