/* MenuCliQ v4.1 app shell */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --orange:#f97316; --orange-dark:#ea6c0a; --orange-soft:#fff4ea;
  --orange-grad:linear-gradient(135deg,#ff9248 0%,#f97316 50%,#ea580c 100%);
  --bg:#ffffff; --bg-soft:#f7f7f9; --surface:#ffffff;
  --text:#111418; --text-dim:#6b7280; --text-mute:#9ca3af;
  --border:#e9eaee; --border-soft:#f1f2f5;
  --veg:#16a34a; --nonveg:#dc2626;
  --radius:14px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(17,20,24,.06);
  --shadow:0 4px 14px rgba(17,20,24,.08);
  --nav-h:66px; --safe-bottom:env(safe-area-inset-bottom,0px);
}

html,body{height:100%;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;text-size-adjust:100%}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Plus Jakarta Sans",Helvetica,Arial,sans-serif;
  background:var(--bg-soft); color:var(--text); line-height:1.45;
  min-height:100dvh;
  padding-bottom:calc(var(--nav-h) + var(--safe-bottom) + 20px);
  overscroll-behavior-y:contain;
}
/* Warm gradient on home page only */
body.home-page{
  background:
    linear-gradient(180deg, #fff4ea 0%, #fffaf4 280px, #ffffff 520px);
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* Appbar — default is sticky */
.appbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-soft);padding:12px 16px;display:flex;align-items:center;gap:12px}
/* Non-sticky variant for main pages */
.appbar.appbar-static{
  position:relative;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:0;
}
body.home-page .appbar.appbar-static{ background:transparent; }

.appbar .brand{font-family:"Syne",system-ui,sans-serif;font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.appbar .brand span{color:var(--orange)}
.appbar .loc{flex:1;display:flex;flex-direction:column;min-width:0}
.appbar .loc-label{font-size:.7rem;color:var(--text-mute);line-height:1}
.appbar .loc-value{font-size:.9rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar .icon-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.8);box-shadow:var(--shadow-sm)}
.appbar .icon-btn:active{background:#eceef2}

.page{padding:14px 14px 24px}
.section-title{font-size:1rem;font-weight:700;margin:18px 2px 10px;letter-spacing:-.01em}
.muted{color:var(--text-dim);font-size:.85rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;font-weight:600;font-size:.95rem;transition:transform .12s,background .15s,box-shadow .15s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--orange);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:active{background:var(--orange-dark)}
.btn-ghost{background:var(--bg-soft);color:var(--text)}
.btn-outline{background:#fff;color:var(--orange);border:1.5px solid var(--orange)}
.btn-lg{padding:15px 22px;font-size:1rem}
.btn-block{width:100%}

.spinner-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;animation:dot-bounce 1s infinite ease-in-out both}
.spinner-dot:nth-child(2){animation-delay:.15s}
.spinner-dot:nth-child(3){animation-delay:.3s}
@keyframes dot-bounce{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1.1)}}

.radar-loader{width:110px;height:110px;position:relative;margin:0 auto 14px}
.radar-loader::before,.radar-loader::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--orange);animation:radar-pulse 1.8s infinite ease-out;opacity:0}
.radar-loader::after{animation-delay:.9s}
.radar-loader .pin{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(249,115,22,.25)}
@keyframes radar-pulse{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1);opacity:0}}

/* Bottom nav — orange gradient */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--orange-grad);padding-bottom:var(--safe-bottom);display:grid;height:calc(var(--nav-h) + var(--safe-bottom));box-shadow:0 -2px 16px rgba(234,88,12,.18)}
.bottom-nav.cols-3{grid-template-columns:repeat(3,1fr)}
.bottom-nav.cols-4{grid-template-columns:repeat(4,1fr)}
.bottom-nav.cols-5{grid-template-columns:repeat(5,1fr)}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:rgba(255,255,255,.78);font-size:.67rem;font-weight:600;padding-top:6px;position:relative;transition:color .15s}
.bottom-nav a svg{width:22px;height:22px;stroke-width:2;transition:transform .2s}
.bottom-nav a.active{color:#fff}
.bottom-nav a.active svg{transform:translateY(-2px) scale(1.08);filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.bottom-nav a.active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:30px;height:3px;background:#fff;border-radius:0 0 3px 3px;box-shadow:0 0 10px rgba(255,255,255,.7)}
.bottom-nav .live-dot{position:absolute;top:5px;right:calc(50% - 18px);width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 2px var(--orange);animation:livePulse 1.6s infinite ease-out}
@keyframes livePulse{0%{transform:scale(1);opacity:1}70%{transform:scale(1.6);opacity:0}100%{transform:scale(1);opacity:0}}

.skel{background:linear-gradient(90deg,#eef0f3 0%,#f7f8fa 50%,#eef0f3 100%);background-size:200% 100%;animation:shimmer 1.2s infinite linear;border-radius:10px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 16px + var(--safe-bottom));transform:translateX(-50%);background:#1f2937;color:#fff;padding:10px 16px;border-radius:24px;font-size:.85rem;font-weight:500;box-shadow:var(--shadow);z-index:500;animation:toast-in .18s ease-out;max-width:90vw;text-align:center}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1}}

.food-dot{width:14px;height:14px;border-radius:3px;display:inline-grid;place-items:center;border:1.5px solid var(--veg);background:#fff}
.food-dot::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--veg)}
.food-dot.nonveg{border-color:var(--nonveg)}
.food-dot.nonveg::after{background:var(--nonveg)}

.closed-strip{background:linear-gradient(135deg,#fef2f2,#fee2e2);color:#b91c1c;padding:10px 14px;font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:8px;border-bottom:1px solid #fecaca}
.closed-strip svg{flex-shrink:0}
.closed-strip .sub{color:#7f1d1d;font-weight:500;margin-left:4px}

/* ========== Modal — with drag-to-close support ========== */
.modal-backdrop{position:fixed;inset:0;background:rgba(17,20,24,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:300;animation:fade-in .15s ease-out;display:flex;align-items:flex-end;justify-content:center}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.modal-sheet{width:100%;max-width:560px;background:#fff;border-radius:20px 20px 0 0;max-height:92vh;overflow-y:auto;animation:sheet-up .22s cubic-bezier(.2,.8,.2,1);padding-bottom:calc(20px + var(--safe-bottom));position:relative;transition:transform .15s}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-sheet.closing{transform:translateY(100%);transition:transform .2s cubic-bezier(.4,.1,.8,.2)}
.modal-sheet .handle{
  width:46px;height:4px;border-radius:4px;background:#d1d5db;
  margin:8px auto 0;
  /* Bigger tap target */
  padding:16px 40px;
  margin:-10px auto -10px;
  background-clip:content-box;
  cursor:grab;
}
.modal-sheet .handle:active{cursor:grabbing}
/* X close button pinned top-right of sheet */
.modal-sheet .sheet-close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  background:rgba(17,20,24,.08);
  display:grid; place-items:center;
  z-index:10;
  transition:background .15s;
}
.modal-sheet .sheet-close:active{ background:rgba(17,20,24,.16); }
.modal-sheet .sheet-close svg{ width:16px; height:16px; color:#111418; }

.modal-sheet .img-wrap{position:relative;aspect-ratio:4/3;background:#f1f2f5;overflow:hidden}
.modal-sheet .img-wrap img{width:100%;height:100%;object-fit:cover}
.modal-sheet .close-btn{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:var(--shadow)}
.modal-sheet .body{padding:16px 18px 8px}
.modal-sheet h2{font-size:1.2rem;font-weight:700;display:flex;align-items:center;gap:8px;letter-spacing:-.01em;margin-bottom:6px}
.modal-sheet .desc{font-size:.88rem;color:var(--text-dim);margin:8px 0 14px;line-height:1.5}
.modal-sheet .badges{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.modal-sheet .badge{font-size:.7rem;font-weight:600;padding:4px 9px;border-radius:12px;background:var(--orange-soft);color:var(--orange)}
.modal-sheet .badge.chef{background:#fef3c7;color:#b45309}
.modal-sheet .badge.new{background:#dcfce7;color:#15803d}
.modal-sheet .badge.bestseller{background:#ffe4e6;color:#be123c}

.modal-sheet .price-row{display:flex;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-soft)}
.modal-sheet .price-chip{flex:1;padding:10px 12px;border:1.5px solid var(--border);border-radius:12px;display:flex;flex-direction:column;gap:2px}
.modal-sheet .price-chip .lbl{font-size:.7rem;color:var(--text-mute)}
.modal-sheet .price-chip .val{font-size:1.05rem;font-weight:700}
.modal-sheet .price-chip.half{border-color:#bbf7d0;background:#f0fdf4}
.modal-sheet .price-chip.half .val{color:var(--veg)}
.modal-sheet .price-chip.full{border-color:#fed7aa;background:#fff7ed}
.modal-sheet .price-chip.full .val{color:var(--orange)}
.modal-sheet .price-chip.single{border-color:#fed7aa;background:#fff7ed}
.modal-sheet .price-chip.single .val{color:var(--orange)}

.modal-title{font-family:"Syne",system-ui,sans-serif;font-size:1.3rem;font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
.modal-sub{color:var(--text-dim);font-size:.88rem;margin-bottom:18px}

/* Form inputs */
.input{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:.95rem;background:#fff;transition:border-color .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.input-label{display:block;font-size:.8rem;color:var(--text-dim);margin-bottom:6px;font-weight:500}
.input-group{margin-bottom:14px}
.input-error{font-size:.75rem;color:#dc2626;margin-top:4px}
.phone-prefix{position:relative}
.phone-prefix::before{content:"+91";position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:600;color:var(--text-dim);pointer-events:none}
.phone-prefix .input{padding-left:48px}

/* ========== Booking success QR modal ========== */
.bk-success-wrap{
  padding:28px 22px 10px; text-align:center;
}
.bk-check{
  width:68px; height:68px; border-radius:50%;
  background:linear-gradient(135deg,#dcfce7,#bbf7d0);
  color:#15803d;
  display:grid; place-items:center;
  margin:0 auto 14px;
  box-shadow:0 4px 14px rgba(22,163,74,.25);
}
.bk-success-wrap h2{
  font-family:"Syne",system-ui,sans-serif;
  font-size:1.35rem; font-weight:800; letter-spacing:-.01em;
  margin-bottom:6px;
}
.bk-meta{
  color:var(--text-dim); font-size:.9rem; line-height:1.55;
  margin-bottom:16px;
}
.bk-meta b{ color:var(--text); }
.bk-id-row{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 14px;
  background:var(--orange-soft); color:var(--orange);
  border-radius:10px;
  font-size:.82rem; font-weight:700;
  letter-spacing:.04em;
  margin:0 auto 18px;
  font-family:"Plus Jakarta Sans", monospace, sans-serif;
}
.bk-id-row svg{ width:14px; height:14px; }
.bk-qr-wrap{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:20px;
  padding:18px 18px 14px;
  max-width:300px; margin:0 auto 14px;
  box-shadow:var(--shadow-sm);
}
.bk-qr-wrap canvas, .bk-qr-wrap svg{
  display:block; margin:0 auto 10px;
  width:200px !important; height:200px !important;
}
.bk-qr-caption{
  font-size:.76rem; color:var(--text-mute);
  line-height:1.45;
}
.bk-actions{ padding:0 22px 10px; }

.hidden{display:none !important}
.flex{display:flex}
.center{display:flex;align-items:center;justify-content:center}
.gap-2{gap:8px}
.gap-3{gap:12px}