/* QR Restaurant Menu - Black minimalist theme */
:root{
  --bg:#0b0b0c; /* near-black */
  --card:#141416;
  --muted:#9ca3af;
  --text:#f5f5f5;
  --accent:#22d3ee; /* cyan */
  --accent-2:#f59e0b; /* amber */
}

.qrm, .qrm * { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }
.qrm{ color:var(--text); background:var(--bg); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; padding-bottom: var(--footer-h, 0px); min-height: 100svh; }
.qrm{ -webkit-touch-callout: none; }
.qrm img{ -webkit-user-drag: none; -webkit-user-select:none; user-select: none; }
.qrm a{ color:inherit; text-decoration:none; }
/* Normalize appearance */
.qrm a, .qrm button, .qrm input, .qrm select { -webkit-appearance: none; appearance: none; }
/* Avoid white flash on tap/click (mobile) */
.qrm a, .qrm .card, .qrm .pill, .qrm .btn { -webkit-tap-highlight-color: rgba(0,0,0,0); }
.qrm .card, .qrm .pill{ -ms-user-select:none; -webkit-user-select:none; user-select:none; }
.qrm .card *{ -ms-user-select:none; -webkit-user-select:none; user-select:none; }
/* Prevent UA default active/focus styles from inverting colors */
.qrm a:active, .qrm a:focus{ background:transparent; color:inherit; }
.qrm *:focus{ outline:none; }
.qrm *:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Global tap highlight suppression (iOS Safari) */
html, body { -webkit-tap-highlight-color: rgba(0,0,0,0); }
/* Ensure card never flips to white on press */
.qrm .card:active, .qrm .card:focus { background-color: var(--card); color: var(--text); }
.qrm .card:active * { color: inherit; background-color: transparent !important; }
.qrm .card *:active{ background-color: transparent !important; }
.qrm .card *:focus{ background-color: transparent !important; }
.qrm .card .media img{ -webkit-transform: translateZ(0); transform: translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.qrm .card{ -webkit-transform: translateZ(0); transform: translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.qrm .card, .qrm .card *{ -webkit-tap-highlight-color: transparent !important; -webkit-text-fill-color: inherit; }
.qrm ::selection{ background:#1f2937; color:var(--text); }

/* Containers */
.qrm .qrm-container{ max-width:1200px; margin:0 auto; padding:16px; }

/* Header */
.qrm .qrm-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; position:sticky; top:0; background:rgba(11,11,12,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index:10; border-bottom:1px solid #1f2937; }
/* Hide header on menu pages (keep visible on cart/info) */
.qrm:not(.qrm-cart):not(.qrm-info) .qrm-header{ display:none !important; }
.qrm .qrm-header .brand{ display:flex; align-items:center; gap:12px; }
.qrm .qrm-header img{ width:36px; height:36px; object-fit:contain; border-radius:8px; }
.qrm .qrm-header .title{ font-weight:700; letter-spacing:.3px; }

/* Footer */
.qrm .qrm-footer{ position:fixed; left:0; right:0; bottom:0; height:var(--footer-h, 50px); background:rgba(11,11,12,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top:1px solid #1f2937; z-index:11; }

/* Grid */
.qrm .grid{ display:grid; gap:16px; }
.qrm .grid.cats{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.qrm .grid.products{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Cards */
.qrm .card{ position:relative; background:var(--card); border:1px solid #1f2937; border-radius:16px; overflow:hidden; transition: none; contain: paint; background-clip: padding-box; touch-action: manipulation; }
.qrm .card::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); pointer-events:none; }
.qrm .card::after{ content:""; position:absolute; inset:0; background:transparent; pointer-events:none; transition: none; }
.qrm .card:hover{ transform: none; box-shadow: none; }
.qrm .card:active{ transform: none; box-shadow: none; }
.qrm .card:active::after{ background: transparent; }
.qrm .card:active .title, .qrm .card:active .desc, .qrm .card:active .price{ color:inherit; }

.qrm .card .media{ position:relative; width:100%; padding-top:66%; overflow:hidden; background:#111; }
.qrm .card .media img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; filter:saturate(.98); }
.qrm .card .content{ padding:12px 14px; }
.qrm .card .title{ font-weight:600; margin:0 0 6px; }
.qrm .card .desc{ color:var(--muted); font-size:.92rem; line-height:1.4; height:3.6em; overflow:hidden; }
.qrm .card .price{ margin-top:8px; font-weight:700; color:var(--accent) !important; }
.qrm .card .price *{ color:var(--accent) !important; }

/* Pills and buttons */
.qrm .pill{ display:inline-flex; align-items:center; gap:8px; background:#0f172a; color:#cbd5e1; border:1px solid #1f2937; border-radius:999px; padding:8px 12px; }
.qrm .pill.active{ background:#1f2937; color:#fff; border-color:#334155; }
.qrm .pill:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.qrm .btn{ display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:#001219; border:none; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer; transition: transform .15s ease; }
.qrm .btn:active{ transform: scale(.98); }

/* Chips (Classic top filter styled like Neo) */
.qrm .h-scroll{ border-bottom:1px solid #1f2937; padding-bottom: 12px; margin-bottom: 8px; }
/* Make category chips sticky at top on menu pages */
.qrm:not(.qrm-cart):not(.qrm-info) .h-scroll{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11,11,12,.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* JS fallback: force fixed when needed */
.qrm .qrm-fixed-chips{ position:fixed !important; top:0; left:0; right:0; z-index:30; background:rgba(11,11,12,.95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom:1px solid #1f2937; }
.qrm .chip{ position:relative; display:inline-flex; align-items:center; padding:10px 14px; border-radius:12px; background: var(--chip-bg, #171717); border:1px solid var(--chip-border, #27272a); color: var(--chip-text, #e5e5e5); white-space:nowrap; font-weight:700; letter-spacing:.2px; }
.qrm .chip.active{ background: var(--chip-active-bg, var(--accent)); border-color: var(--chip-active-bg, var(--accent)); color:#fff; }
.qrm .chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.qrm .chip.active::after{ content:""; position:absolute; left:50%; transform: translateX(-50%); width: var(--chip-underline-width, 56px); height: var(--chip-underline-height, 3px); bottom:-10px; background: var(--chip-underline, var(--accent)); border-radius:999px; }

/* Info page */
.qrm.qrm-info{ background: var(--bg); color: var(--text); }
.qrm .info-hero{ position:relative; width:100%; height:320px; background:#111 center/cover no-repeat; }
.qrm .info-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.7) 55%, rgba(0,0,0,.88) 85%); }
.qrm .info-icon-ring{ display:flex; justify-content:center; margin-top:-48px; margin-bottom:6px; }
.qrm .info-icon-ring .ring{ position:relative; width:88px; height:88px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:transparent; box-shadow: 0 6px 22px rgba(0,0,0,.46); }
.qrm .info-icon-ring .ring::before{ content:""; position:absolute; inset:0; border-radius:999px; background: radial-gradient(circle at center, var(--info-accent, var(--accent)) 0 52%, transparent 53%); }
.qrm .info-icon-ring .ring::after{ content:""; position:absolute; inset:8px; border-radius:999px; border:8px solid var(--info-accent, var(--accent)); opacity:.85; }
.qrm .info-icon-ring .ring span{ position:relative; width:54px; height:54px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#2a1e1e; color:#fff; font-weight:900; }
.qrm .info-icon-ring .ring img{ position:relative; width:54px; height:54px; border-radius:999px; display:block; object-fit:contain; background:#2a1e1e; }
.qrm .info-card{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid #1f2937; border-radius:18px; padding:22px 18px; max-width:680px; margin:0 auto; text-align:center; }
.qrm .info-title{ margin:8px 0 12px; font-size:1.8rem; font-weight:800; }
.qrm .info-desc{ color: var(--muted); line-height:1.6; margin-bottom:16px; }
.qrm .info-rows{ display:grid; gap:10px; margin-top:8px; }
.qrm .irow{ display:flex; gap:12px; align-items:center; background: rgba(255,255,255,.02); border:1px solid #1f2937; border-radius:14px; padding:10px 12px; }
.qrm .irow .ico{ width:40px; height:40px; border-radius:12px; background: color-mix(in oklab, var(--info-accent, var(--accent)) 15%, #000); border:1px solid color-mix(in oklab, var(--info-accent, var(--accent)) 45%, #1f2937); color: var(--info-accent, var(--accent)); display:flex; align-items:center; justify-content:center; font-size:18px; }
.qrm .irow .val a{ color: var(--text); text-decoration:underline; text-underline-offset:3px; }
.qrm .wifi-box{ margin-top:12px; background: rgba(255,255,255,.02); border:1px solid #1f2937; border-radius:12px; padding:12px; }
.qrm .wifi-box .wifi-title{ font-weight:800; color: var(--info-accent, var(--accent)); margin-bottom:6px; }
.qrm .wifi-box .wifi-row{ display:flex; gap:8px; color: var(--muted); align-items:center; justify-content:space-between; padding:8px 10px; border:1px solid #1f2937; border-radius:10px; background: rgba(255,255,255,.02); }
.qrm .wifi-box .wifi-row + .wifi-row{ margin-top:8px; }
.qrm .wifi-box .wifi-row .left{ display:flex; gap:8px; align-items:center; }
.qrm .wifi-box .wifi-row .k{ color:#e5e7eb; min-width:90px; }
.qrm .wifi-box .wifi-row .v{ color:#fff; }
.qrm .wifi-box .wifi-copy{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 10px; border-radius:10px; border:1px solid #2a2a2a; background:#1f1f1f; color:#e5e5e5; cursor:pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.qrm .wifi-box .wifi-copy:hover{ background: var(--info-accent, var(--accent)); color:#fff; border-color: var(--info-accent, var(--accent)); transform: translateY(-1px); }

/* Micro responsive offsets for hero/ring */
@media (max-height: 740px) {
  .qrm .info-hero{ height: 280px; }
  .qrm .info-icon-ring{ margin-top: -42px; }
}
@media (max-height: 640px) {
  .qrm .info-hero{ height: 240px; }
  .qrm .info-icon-ring{ margin-top: -38px; }
}
.qrm .info-socials{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.qrm .info-socials .soc{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; background:#1f1f1f; border:1px solid #2a2a2a; color:#e5e5e5; font-weight:800; }
.qrm .info-socials .soc{ transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.qrm .info-socials .soc:hover{ background: var(--info-accent, var(--accent)); color:#fff; border-color: var(--info-accent, var(--accent)); transform: translateY(-1px); }

/* Info topbar over hero */
.qrm .info-topbar{ position:absolute; top:10px; left:10px; right:10px; z-index:15; display:flex; align-items:center; }
.qrm .info-topbar .spacer{ flex:1; }
.qrm .info-topbar .top-btn{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(0,0,0,.35); color:#fff; border:1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Toolbar */
.qrm .toolbar{ display:flex; gap:10px; align-items:center; padding:8px 16px; position:sticky; top:60px; background:rgba(11,11,12,.9); z-index:9; }
.qrm .toolbar input{ flex:1; background:#0f172a; color:#fff; border:1px solid #1f2937; border-radius:12px; padding:10px 12px; }

/* Swipe helper */
.qrm .h-scroll{ display:flex; gap:10px; overflow-x:auto; padding:8px 0 10px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.qrm .h-scroll > *{ scroll-snap-align:start; }
/* Optional scrollbar polish */
.qrm .h-scroll::-webkit-scrollbar{ height:6px; }
.qrm .h-scroll::-webkit-scrollbar-thumb{ background:#1f2937; border-radius:999px; }

/* Responsive typography */
@media (max-width: 480px){
  .qrm .qrm-header .title{ font-size:1rem; }
  .qrm .card .desc{ display:none; }
}