/* Base layout and handheld mimic */
:root {
  --device-width: 390px; /* portrait */
  --device-height: 780px;
  --radius-outer: 34px;
  --radius-inner: 28px;
  --safe-bottom: max(env(safe-area-inset-bottom), 16px);
}
html, body { height: 100%; }
body {
  background: radial-gradient(1200px 800px at 20% -10%, #f3f6ff 0, #e9eefc 40%, #e5ebff 60%, #dde7ff 100%);
  display: grid; place-items: center; padding: 20px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.phone-shell {
  width: min(var(--device-width), 100%);
  height: min(var(--device-height), calc(100vh - 40px));
  background: #0b0d14; border-radius: var(--radius-outer); position: relative; padding: 10px; display: flex;
  box-shadow: 0 20px 60px rgba(20, 30, 80, .35), 0 6px 20px rgba(20, 30, 80, .25), inset 0 0 0 2px rgba(255,255,255,.05);
}
.notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 180px; height: 24px; background:#0b0d14; border-bottom-left-radius:16px; border-bottom-right-radius:16px; box-shadow: inset 0 -6px 10px rgba(0,0,0,.4); z-index:10; }
.screen { flex:1; border-radius: var(--radius-inner); overflow: hidden; background:#fff; display:grid; grid-template-rows: auto 52px 1fr auto; }

/* Header */
.app-header { position: sticky; top:0; z-index:5; background:#fff; border-bottom:1px solid #eef1f6; padding:10px 14px 8px; }
.brand-logo{ width:28px; height:28px; border-radius:8px; object-fit:cover; }
.brand-name{ font-size:1rem; }
.brand-sub{ font-size:.75rem; }

/* Category bar */
.cat-bar { display:flex; gap:.5rem; padding:8px 12px; overflow:auto; border-bottom:1px solid #f1f4f9; scrollbar-width:none; }
.cat-bar::-webkit-scrollbar{ display:none; }
.cat-pill{ white-space:nowrap; border:1px solid #e3e8f3; padding:.35rem .7rem; border-radius:999px; font-size:.85rem; background:#fff; cursor:pointer; }
.cat-pill.active{ background:#0d6efd; color:#fff; border-color:#0d6efd; }

/* Content grid */
.content{ padding:14px; overflow:auto; }
.menu-card{ border:1px solid #eef1f6; border-radius:16px; overflow:hidden; box-shadow: 0 1px 0 rgba(10,20,40,.04); margin-bottom:14px; }
.menu-card .thumb{ width:100%; height:156px; object-fit:cover; background:#f5f7fb; }
.menu-card .meta{ padding:10px 12px; display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.menu-card .title{ font-weight:600; font-size:1rem; line-height:1.2; }
.menu-card .desc{ font-size:.85rem; color:#6b7280; }
.price{ font-weight:700; }
.add-btn{ white-space:nowrap; }
.badge-unavail{ position:absolute; top:10px; left:10px; }

/* Bottom bar */
.bottom-bar{ position: sticky; bottom:0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 30%); padding:10px 12px var(--safe-bottom); border-top:1px solid #eef1f6; }

/* Offcanvas tweaks */
.offcanvas-bottom{ height:65vh; border-top-left-radius:18px; border-top-right-radius:18px; }
.cart-line{ display:grid; grid-template-columns: auto 1fr auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px dashed #e9edf6; }
.cart-qty{ display:flex; gap:.35rem; align-items:center; }
.cart-qty .btn{ padding:.2rem .45rem; }
.summary-row{ display:flex; justify-content:space-between; margin-bottom:.35rem; }

/* Small pulse on cart button after add */
.btn-pulse{ transform: translateZ(0); animation: btnpulse .35s ease-out; }
@keyframes btnpulse { from{ box-shadow:0 0 0 0 rgba(13,110,253,.45);} to{ box-shadow:0 0 0 12px rgba(13,110,253,0);} }

/* Responsive fallback (when no bezel wanted) */
/* Responsive fallback: on phones/tablets show just the content (no bezel) */
@media (max-width: 480px), (hover: none) and (pointer: coarse) {
  body {
    background: #fff;           /* remove gradient frame */
    display: block;
    padding: 0;
  }
  .phone-shell {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    padding: 0;
    background: transparent;    /* no dark bezel */
    box-shadow: none;           /* no outer shadow */
  }
  .notch { display: none; }
  .screen { border-radius: 0; } /* edge-to-edge app */
}