/* ==========================================================================
   VERNEX demos — shared styles for the POS, store, LMS and booking samples.
   Light "client app" look with the VERNEX teal accent; mobile first.
   ========================================================================== */
:root{
  --bg:#F3F6F6; --surface:#FFFFFF; --surface-2:#F7FAFA; --ink:#0C1C1D; --muted:#5E7273;
  --line:#E2E9E9; --accent:#00957E; --accent-2:#01C1A3; --accent-soft:#E3F6F2;
  --warn:#B45309; --warn-soft:#FEF3C7; --danger:#B42318; --danger-soft:#FEE4E2; --ok:#067647; --ok-soft:#DCFAE6;
  --r-sm:10px; --r:16px; --r-lg:22px;
  --shadow:0 1px 2px rgba(12,28,29,.06), 0 6px 20px rgba(12,28,29,.06);
  --shadow-lg:0 20px 50px rgba(12,28,29,.18);
  --bar-h:54px;
  --font:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; }
body{ font-family:var(--font); background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── VERNEX demo bar ─────────────────────────────────────────────────── */
.demo-bar{
  position:sticky; top:0; z-index:50; height:var(--bar-h);
  display:flex; align-items:center; gap:.75rem; padding:0 .9rem;
  background:#04090A; color:#E8F1F0; border-bottom:1px solid rgba(1,193,163,.25);
}
.demo-bar__back{ display:flex; align-items:center; gap:.5rem; font-weight:700; letter-spacing:.04em; font-size:.9rem; }
.demo-bar__back img{ width:28px; height:28px; border-radius:8px; }
.demo-bar__label{ font-size:.78rem; color:#8FA3A2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.demo-bar__label b{ color:#68FAE6; font-weight:600; }
.demo-bar__cta{
  margin-left:auto; flex-shrink:0; padding:.45rem .9rem; border-radius:999px; font-size:.8rem; font-weight:600;
  background:linear-gradient(135deg,#68FAE6,#01C1A3); color:#04090A;
}
@media (max-width:420px){ .demo-bar__label{ display:none; } }

/* ── layout ──────────────────────────────────────────────────────────── */
.wrap{ width:min(1200px, 100%); margin-inline:auto; padding:0 1rem; }
.h1{ font-size:clamp(1.3rem,3vw,1.7rem); font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.h2{ font-size:1.05rem; font-weight:700; letter-spacing:-.01em; }
.muted{ color:var(--muted); }
.small{ font-size:.82rem; }
.row{ display:flex; align-items:center; gap:.6rem; }
.spacer{ flex:1; }
.stack{ display:grid; gap:.8rem; }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.pad{ padding:1rem; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:44px; padding:.6rem 1.1rem; border-radius:12px; font-weight:600; font-size:.92rem;
  background:var(--surface); border:1px solid var(--line); transition:transform .15s, background .2s, box-shadow .2s;
}
.btn:active{ transform:scale(.98); }
.btn--primary{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 6px 16px rgba(0,149,126,.28); }
.btn--primary:hover{ background:#007F6B; }
.btn--primary:disabled{ background:#9FB7B4; border-color:#9FB7B4; box-shadow:none; cursor:not-allowed; }
.btn--ghost{ background:transparent; }
.btn--block{ width:100%; }
.btn--sm{ min-height:36px; padding:.35rem .75rem; font-size:.84rem; border-radius:10px; }
.icon-btn{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line); background:var(--surface); font-weight:700; }
.icon-btn:active{ transform:scale(.94); }

/* chips (horizontal category bar — swipeable on phones) */
.chips{ display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; padding:.15rem 0 .35rem; scroll-snap-type:x proximity; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0; scroll-snap-align:start; padding:.5rem .95rem; border-radius:999px; font-size:.86rem; font-weight:600;
  background:var(--surface); border:1px solid var(--line); color:var(--muted); white-space:nowrap;
}
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* form fields */
.field{ display:grid; gap:.3rem; }
.field label{ font-size:.8rem; font-weight:600; color:var(--muted); }
.input{
  width:100%; min-height:44px; padding:.6rem .8rem; border-radius:12px; border:1px solid var(--line); background:var(--surface);
  font-size:16px; /* 16px stops iOS zooming into fields */
}
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.seg{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.4rem; }
.seg button{ min-height:42px; border-radius:10px; border:1px solid var(--line); background:var(--surface); font-weight:600; font-size:.86rem; }
.seg button[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }

/* badges */
.badge{ white-space:nowrap; display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.badge--ok{ background:var(--ok-soft); color:var(--ok); }
.badge--warn{ background:var(--warn-soft); color:var(--warn); }
.badge--danger{ background:var(--danger-soft); color:var(--danger); }
.badge--accent{ background:var(--accent-soft); color:var(--accent); }

/* stat tiles */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; }
@media (min-width:760px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ padding:.9rem 1rem; }
.stat b{ display:block; font-size:1.3rem; letter-spacing:-.02em; }
.stat span{ font-size:.78rem; color:var(--muted); }

/* list rows */
.list{ display:grid; }
.list > *{ display:flex; align-items:center; gap:.75rem; padding:.8rem 1rem; border-top:1px solid var(--line); }
.list > *:first-child{ border-top:0; }

/* bottom navigation (phones) / top tabs (desktop) */
.tabs{ display:flex; gap:.35rem; }
.tabs button{ padding:.55rem .9rem; border-radius:10px; font-weight:600; font-size:.88rem; color:var(--muted); }
.tabs button[aria-selected="true"]{ background:var(--ink); color:#fff; }
.bnav{ display:none; }
@media (max-width:759px){
  .tabs--top{ display:none; }
  .bnav{
    position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
    background:rgba(255,255,255,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line); padding:.35rem .4rem calc(.35rem + env(safe-area-inset-bottom));
  }
  .bnav button{ display:grid; justify-items:center; gap:.1rem; padding:.35rem 0; border-radius:10px; font-size:.7rem; font-weight:600; color:var(--muted); }
  .bnav button span{ font-size:1.15rem; line-height:1; }
  .bnav button[aria-selected="true"]{ color:var(--accent); background:var(--accent-soft); }
  body.has-bnav{ padding-bottom:76px; }
}

/* bottom sheet / modal */
.overlay{ position:fixed; inset:0; z-index:60; background:rgba(4,9,10,.45); display:flex; align-items:flex-end; justify-content:center; }
.overlay[hidden]{ display:none; }
.sheet{
  width:min(560px,100%); max-height:88vh; overflow:auto; background:var(--surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:var(--shadow-lg); padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  animation:up .28s cubic-bezier(.22,1,.36,1);
}
.sheet__grip{ width:42px; height:5px; border-radius:3px; background:var(--line); margin:0 auto .8rem; }
@media (min-width:760px){
  .overlay{ align-items:center; }
  .sheet{ border-radius:var(--r-lg); }
}
@keyframes up{ from{ transform:translateY(30px); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .sheet{ animation:none; } }

/* toast */
.toast{
  position:fixed; left:50%; top:calc(var(--bar-h) + 12px); z-index:70; translate:-50% -12px; opacity:0;
  background:var(--ink); color:#fff; padding:.65rem 1rem; border-radius:12px; font-size:.88rem; font-weight:500;
  box-shadow:var(--shadow-lg); transition:opacity .25s, translate .25s; pointer-events:none; max-width:90vw;
}
.toast.is-on{ opacity:1; translate:-50% 0; }

/* small helpers */
.qty{ display:inline-flex; align-items:center; gap:.4rem; }
.qty b{ min-width:1.4rem; text-align:center; }
.price{ font-weight:700; font-variant-numeric:tabular-nums; }
.tile-emoji{ display:grid; place-items:center; aspect-ratio:1/1; border-radius:12px; font-size:2rem; }
.empty{ padding:2rem 1rem; text-align:center; color:var(--muted); }
.note{ font-size:.78rem; color:var(--muted); text-align:center; padding:1.2rem 1rem 1.6rem; }