:root {
  --tomato:   #C1272D;
  --tomato-dark: #8E1D22;
  --basil:    #2F6B3A;
  --cheese:   #F2B705;
  --cream:    #FFF8F0;
  --crust:    #2B1B12;
  --ink:      #3A2A20;
  --card-radius: 16px;
  --ease: cubic-bezier(.25, .8, .35, 1);
  --ease-bounce: cubic-bezier(.34, 1.45, .64, 1);
}

* { box-sizing: border-box; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', -apple-system, sans-serif;
  margin: 0;
}

h1, h2, h3, h4, .pos-header-title, .cart-header {
  font-family: 'Poppins', 'Inter', sans-serif;
}

/* ---------- Header ---------- */
.pos-header {
  background: linear-gradient(135deg, var(--tomato), var(--tomato-dark));
  height: 64px;
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.pos-logo { font-size: 1.6rem; }
.pos-header-title { color: #fff; font-weight: 700; font-size: 1.1rem; line-height: 1.1; }
.pos-header-sub { color: rgba(255,255,255,.75); font-size: .78rem; }
.pos-header .btn-outline-light {
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.pos-header .btn-outline-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* ---------- Layout ---------- */
.pos-body {
  display: flex;
  height: calc(100vh - 64px);
}
.pos-menu {
  flex: 1 1 auto;
  padding: 16px;
  overflow-y: auto;
}
.pos-cart {
  width: 360px;
  flex-shrink: 0;
  background: #fff;
  border-left: 1px solid #eee0d3;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 18px rgba(43,27,18,.05);
}

/* ---------- Search ---------- */
.menu-search {
  position: relative;
  margin-bottom: 14px;
}
.menu-search input {
  width: 100%;
  padding: 11px 16px 11px 40px;
  border-radius: 999px;
  border: 1px solid #ecdfcb;
  background: #fff;
  font-size: .9rem;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.menu-search input:focus {
  outline: none;
  border-color: var(--tomato);
  box-shadow: 0 0 0 4px rgba(193,39,45,.12);
}
.menu-search::before {
  content: "🔍";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .85rem;
  opacity: .5;
}

/* ---------- Category tabs (modern icon chips, sticky) ---------- */
.category-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 10px 4px 14px;
  margin: -4px -4px 14px;
  background: linear-gradient(var(--cream), var(--cream) 80%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.category-tab {
  --tab-color: #C1272D;
  scroll-snap-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  background: color-mix(in srgb, var(--tab-color) 10%, #fff);
  color: var(--tab-color);
  border: 1.5px solid color-mix(in srgb, var(--tab-color) 22%, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition: transform .22s var(--ease-bounce), background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.category-tab .cat-icon { font-size: 1.05rem; line-height: 1; }
.category-tab:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--tab-color) 18%, #fff);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--tab-color) 20%, transparent);
}
.category-tab:active { transform: translateY(1px) scale(.97); }
.category-tab.active {
  background: var(--tab-color);
  color: #fff;
  border-color: var(--tab-color);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--tab-color) 45%, transparent);
}

/* ---------- Product tiles (soft, smooth, tactile) ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.product-tile {
  background: #fff;
  border-radius: var(--card-radius);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #f2e7d8;
  box-shadow: 0 2px 4px rgba(43,27,18,.04), 0 8px 20px rgba(43,27,18,.06);
  transition: transform .25s var(--ease-bounce), box-shadow .25s var(--ease), border-color .2s var(--ease);
  user-select: none;
}
.product-tile:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 4px 8px rgba(43,27,18,.06), 0 16px 28px rgba(43,27,18,.14);
  border-color: #ecd9bb;
}
.product-tile:active {
  transform: translateY(-1px) scale(.98);
  box-shadow: 0 2px 6px rgba(43,27,18,.1);
}
.product-tile.just-added {
  animation: tile-pop .35s var(--ease-bounce);
}
@keyframes tile-pop {
  0%   { box-shadow: 0 0 0 0 rgba(47,107,58,.5); }
  60%  { box-shadow: 0 0 0 10px rgba(47,107,58,0); }
  100% { box-shadow: 0 2px 4px rgba(43,27,18,.04), 0 8px 20px rgba(43,27,18,.06); }
}
.product-tile .emoji { font-size: 1.8rem; display: block; margin-bottom: 6px; transition: transform .25s var(--ease-bounce); }
.product-tile .product-photo {
  width: 100%; height: 72px; object-fit: cover; border-radius: 10px;
  margin-bottom: 6px; transition: transform .25s var(--ease-bounce);
}
.product-tile:hover .emoji { transform: scale(1.12) rotate(-4deg); }
.product-tile:hover .product-photo { transform: scale(1.05); }
.product-tile .name { font-weight: 600; font-size: .85rem; line-height: 1.25; min-height: 2.2em; }
.product-tile .price { color: var(--tomato); font-weight: 700; font-size: .85rem; margin-top: 4px; display: block; }
.product-tile .was-price { color: #b3a794; text-decoration: line-through; font-size: .72rem; display: block; margin-top: 4px; }
.product-tile.is-deal { background: linear-gradient(160deg, #FFFBF0, #FFF6DC); border-color: var(--cheese); }
.product-tile.is-deal:hover { box-shadow: 0 4px 8px rgba(242,183,5,.1), 0 16px 28px rgba(242,183,5,.22); }
.deal-includes {
  font-size: .68rem;
  color: #8a7a5c;
  margin-top: 6px;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---------- Cart ---------- */
.cart-header {
  padding: 14px 16px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0e4d4;
}
.cart-header.pulse { animation: header-pulse .4s var(--ease); }
@keyframes header-pulse {
  0% { background: rgba(47,107,58,.12); }
  100% { background: transparent; }
}
.cart-items {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 16px;
}
.cart-empty { color: #aaa; text-align: center; padding: 30px 0; font-size: .9rem; }

.cart-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 6px;
  margin: 0 -6px;
  border-bottom: 1px dashed #f0e4d4;
  border-radius: 8px;
  gap: 8px;
  transition: background .18s var(--ease);
}
.cart-line:hover { background: #FFF9F0; }
.cart-line.just-added { animation: tile-pop .35s var(--ease-bounce); }
.cart-line .line-name { font-weight: 600; font-size: .88rem; }
.cart-line .line-variant { color: #999; font-size: .75rem; }
.cart-line .qty-controls { display: flex; align-items: center; gap: 6px; }
.cart-line .qty-btn {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid #ddd; background: #fff; line-height: 1;
  font-weight: 700; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), transform .15s var(--ease-bounce), border-color .18s var(--ease);
}
.cart-line .qty-btn:hover { background: var(--tomato); border-color: var(--tomato); color: #fff; transform: scale(1.1); }
.cart-line .qty-btn:active { transform: scale(.92); }
.cart-line .line-total { font-weight: 700; min-width: 64px; text-align: right; font-size: .85rem; }
.cart-line .remove-btn {
  color: var(--tomato); cursor: pointer; font-size: .85rem;
  transition: transform .18s var(--ease-bounce), opacity .18s var(--ease);
  opacity: .6;
}
.cart-line .remove-btn:hover { opacity: 1; transform: scale(1.25) rotate(90deg); }

.cart-summary { padding: 12px 16px; border-top: 1px solid #f0e4d4; }
.row-line { display: flex; justify-content: space-between; margin-bottom: 10px; }
.discount-input { max-width: 100px; text-align: right; }

.order-type-toggle { display: flex; gap: 6px; }
.order-type-btn {
  border: 1.5px solid #ecdfcb;
  background: #fff;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease-bounce);
}
.order-type-btn:hover { transform: translateY(-1px); border-color: var(--tomato); }
.order-type-btn.active {
  background: var(--tomato);
  border-color: var(--tomato);
  color: #fff;
}
#serviceChargeRow { color: #8a7a5c; font-size: .9rem; }
#serviceChargeRow.hidden { display: none; }
.discount-input, #amountPaid, #paymentMethod {
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.discount-input:focus, #amountPaid:focus, #paymentMethod:focus {
  box-shadow: 0 0 0 3px rgba(193,39,45,.12);
  border-color: var(--tomato);
}

.btn-checkout {
  background: linear-gradient(135deg, #3f8a4d, var(--basil));
  color: #fff;
  font-weight: 700;
  padding: 13px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(47,107,58,.28);
  transition: transform .2s var(--ease-bounce), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn-checkout:disabled { background: #d8d2c8; box-shadow: none; }
.btn-checkout:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(47,107,58,.35); }
.btn-checkout:not(:disabled):active { transform: translateY(0); }

/* ---------- Login screen ---------- */
.login-body {
  min-height: 100vh;
  background: radial-gradient(circle at top, var(--tomato-dark), var(--crust));
}
.login-card { width: 100%; max-width: 380px; border-radius: 20px; transition: transform .3s var(--ease); }
.login-logo { font-size: 2.6rem; }
.login-card .btn-danger {
  background: linear-gradient(135deg, var(--tomato), var(--tomato-dark));
  border: none;
  transition: transform .2s var(--ease-bounce), box-shadow .2s var(--ease);
}
.login-card .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(193,39,45,.35); }

/* ---------- Toasts ---------- */
.toast-host {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
}
.toast-msg {
  background: var(--crust);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  margin-top: 8px;
  font-size: .85rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast-msg.show { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) {
  .pos-body { flex-direction: column; height: auto; }
  .pos-cart { width: 100%; border-left: none; border-top: 1px solid #eee0d3; }
}

/* =====================================================================
   GLASS LAYER — POS screen ("warm oven glass")
   ---------------------------------------------------------------------
   Sab se aakhir mein hai, isliye upar wali styles ko override karta hai.
   Purana look wapas chahiye? Yahan se neeche tak delete kar dein.

   POS din bhar chalti hai aur ungli se chhui jati hai — isliye yahan
   glass halka rakha gaya hai: tile ka rang aur qeemat pehle jitni hi
   saaf, bas surface sheeshe jaisa aur touch zyada narm.
   ===================================================================== */

:root {
  --glass:         rgba(255, 255, 255, .62);
  --glass-strong:  rgba(255, 255, 255, .80);
  --glass-line:    rgba(255, 255, 255, .9);
  --glass-brd:     rgba(255, 255, 255, .6);
  --glass-blur:    16px;
  --glass-shadow:  0 1px 2px rgba(43,27,18,.05), 0 14px 32px -12px rgba(43,27,18,.24);
  --glass-shadow-h:0 2px 5px rgba(43,27,18,.07), 0 24px 48px -14px rgba(43,27,18,.32);
}

/* ---- Backdrop ---- */
body { background: var(--cream); }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(56rem 40rem at  6% -14%, rgba(242,183,5,.32), transparent 62%),
    radial-gradient(48rem 36rem at 98%  2%, rgba(193,39,45,.20), transparent 64%),
    radial-gradient(44rem 38rem at 40% 114%, rgba(47,107,58,.14), transparent 62%);
}

/* ---- Header ---- */
.pos-header {
  background: linear-gradient(135deg, rgba(193,39,45,.90), rgba(142,29,34,.86));
  -webkit-backdrop-filter: blur(16px) saturate(155%);
  backdrop-filter: blur(16px) saturate(155%);
  border-bottom: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 10px 30px -12px rgba(142,29,34,.6);
}

/* ---- Menu side ---- */
.pos-menu { background: transparent; }

.menu-search input {
  background: rgba(255,255,255,.7);
  border-color: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(43,27,18,.04), 0 8px 20px -10px rgba(43,27,18,.2);
}
.menu-search input:focus {
  background: rgba(255,255,255,.96);
  box-shadow: 0 0 0 4px rgba(193,39,45,.14);
}

/* Sticky tab strip ko bhi frosted karna parta hai, warna neeche ki
   tiles scroll karte waqt is ke peeche se dikhti hain. */
.category-tabs {
  background: linear-gradient(rgba(255,248,240,.82), rgba(255,248,240,.58) 72%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.category-tab {
  background: color-mix(in srgb, var(--tab-color) 12%, rgba(255,255,255,.68));
  border-color: color-mix(in srgb, var(--tab-color) 26%, rgba(255,255,255,.7));
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 1px 2px rgba(43,27,18,.04), 0 6px 14px -8px rgba(43,27,18,.2);
}
.category-tab.active {
  background: color-mix(in srgb, var(--tab-color) 92%, #fff);
  border-color: color-mix(in srgb, var(--tab-color) 92%, #fff);
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--tab-color) 55%, transparent),
              inset 0 1px 0 rgba(255,255,255,.35);
}

/* ---- Product tiles ---- */
.product-grid { gap: 15px; }

.product-tile {
  position: relative;
  isolation: isolate;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.5);
  overflow: hidden;
}
.product-tile::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 38%;
  background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent);
  pointer-events: none;
  z-index: -1;
}
.product-tile:hover {
  background: var(--glass-strong);
  border-color: rgba(255,255,255,.85);
  box-shadow: var(--glass-shadow-h), inset 0 1px 0 rgba(255,255,255,.6);
}
.product-tile:active {
  transform: translateY(-1px) scale(.975);
  box-shadow: 0 2px 8px rgba(43,27,18,.14), inset 0 1px 0 rgba(255,255,255,.5);
}
.product-tile.is-deal {
  background: linear-gradient(160deg, rgba(255,251,240,.8), rgba(255,246,220,.72));
  border-color: rgba(242,183,5,.6);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.6),
              0 0 0 1px rgba(242,183,5,.18);
}

/* Tile daalne par sabz ring — pehle se tha, glass ke saath dobara tuned */
@keyframes tile-pop {
  0%   { box-shadow: 0 0 0 0 rgba(47,107,58,.55), var(--glass-shadow); }
  60%  { box-shadow: 0 0 0 12px rgba(47,107,58,0), var(--glass-shadow); }
  100% { box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.5); }
}

/* ---- Cart: gehra frosted panel ---- */
.pos-cart {
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  backdrop-filter: blur(26px) saturate(165%);
  border-left: 1px solid rgba(255,255,255,.7);
  box-shadow: -18px 0 46px -22px rgba(43,27,18,.42);
}
.cart-header {
  background: linear-gradient(135deg, rgba(43,27,18,.9), rgba(74,47,30,.84));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.cart-line {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 14px;
  transition: background .2s var(--ease), transform .2s var(--ease-bounce), box-shadow .2s var(--ease);
}
.cart-line:hover {
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 18px -10px rgba(43,27,18,.3);
}
.cart-summary {
  background: rgba(255,251,246,.78);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.75);
}
.btn-checkout {
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 10px 26px -10px rgba(47,107,58,.7), inset 0 1px 0 rgba(255,255,255,.32);
}
.btn-checkout:active { transform: scale(.985); }

.order-type-btn {
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---- Toasts ---- */
.toast-msg {
  background: rgba(43,27,18,.82);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 44px -16px rgba(0,0,0,.55);
}

/* ---- Variant / payment modal ---- */
.modal-content {
  background: rgba(255,251,246,.84);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid var(--glass-brd);
  border-radius: 20px;
  box-shadow: 0 40px 90px -30px rgba(43,27,18,.5);
}
.modal-backdrop.show { opacity: .35; }

/* ---- Login card ---- */
.login-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50rem 36rem at 15% 0%,  rgba(242,183,5,.35), transparent 62%),
    radial-gradient(44rem 34rem at 88% 96%, rgba(193,39,45,.28), transparent 64%);
}
.login-card {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  backdrop-filter: blur(28px) saturate(165%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(43,27,18,.06), 0 40px 80px -30px rgba(43,27,18,.45),
              inset 0 1px 0 rgba(255,255,255,.7);
}

/* ---- Inputs ---- */
.form-control, .form-select {
  background: rgba(255,255,255,.74);
  border-color: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,.96);
  border-color: var(--tomato);
  box-shadow: 0 0 0 4px rgba(193,39,45,.14);
}

/* ---------------------------------------------------------------
   Fallbacks & access
   --------------------------------------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .product-tile   { background: #fff; }
  .pos-cart       { background: #fff; }
  .cart-summary   { background: #FFFBF6; }
  .cart-line      { background: #fff; }
  .category-tabs  { background: linear-gradient(var(--cream), var(--cream) 80%, transparent); }
  .pos-header     { background: linear-gradient(135deg, var(--tomato), var(--tomato-dark)); }
  .cart-header    { background: linear-gradient(135deg, #2B1B12, #4a2f1e); }
  .modal-content  { background: #FFFBF6; }
  .login-card     { background: #fff; }
  .toast-msg      { background: #2B1B12; }
  .form-control, .form-select { background: #fff; }
}

a:focus-visible, button:focus-visible,
.product-tile:focus-visible, .category-tab:focus-visible,
.form-control:focus-visible, .form-select:focus-visible {
  outline: 3px solid rgba(193,39,45,.55);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .product-tile:hover, .category-tab:hover { transform: none; }
}

/* Tablet/phone par blur sasta rakhein — waiter ki tablet purani ho sakti hai */
@media (max-width: 900px) {
  :root { --glass-blur: 10px; }
  .pos-cart { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}

/* ---- Deal savings badge (POS / waiter / online menu) ---- */
.product-tile { position: relative; }
.product-tile .save-badge {
  position: absolute; top: 8px; right: 8px;
  background: var(--tomato); color: #fff; font-weight: 800; font-size: .64rem;
  padding: 3px 7px; border-radius: 999px; box-shadow: 0 3px 8px rgba(193,39,45,.35);
}
.cart-line .line-variant { max-width: 170px; white-space: normal; line-height: 1.25; }

/* ---- Responsive header: chhoti screen par buttons wrap hon, overflow na ho ---- */
@media (max-width: 900px) {
  .pos-header { height: auto; min-height: 56px; flex-wrap: wrap; gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .pos-header > div:last-child { flex-wrap: wrap; gap: 6px !important; justify-content: flex-end; }
  .pos-header #clock { display: none; }
  .pos-body { height: calc(100vh - 56px); }
}
@media (max-width: 768px) {
  .pos-body { height: auto; }
  .pos-menu { overflow: visible; padding: 12px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .pos-cart { position: relative; }
  .pos-header .text-white.small { display: none; }
}

/* =====================================================================
   POS HEADER v2 — cashier / manager / waiter (ek jaisa)
   Baen: brand + counter.  Beech: New Order | Orders Queue tabs.
   Daen: waqt, Admin button (manager/admin), user menu (logout).
   ===================================================================== */
.pos-header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 16px !important;
  position: sticky; top: 0; z-index: 1030;
}
.ph-left, .ph-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ph-right { justify-content: flex-end; }
.ph-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ph-mark {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 1.2rem; flex: 0 0 auto;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.ph-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ph-name { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-sub { color: rgba(255,255,255,.78); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ph-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.18); box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
.ph-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px;
  color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600; font-size: .88rem; white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.ph-tab:hover { color: #fff; background: rgba(255,255,255,.1); }
.ph-tab.active { background: #fff; color: var(--tomato); box-shadow: 0 4px 12px -4px rgba(0,0,0,.35); }
.ph-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cheese); color: var(--crust); font-size: .72rem; display: inline-grid; place-items: center; }

.ph-clock { color: rgba(255,255,255,.8); font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ph-btn, .ph-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 11px;
  color: #fff; text-decoration: none; font-weight: 600; font-size: .85rem; white-space: nowrap;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  transition: background .15s var(--ease);
}
.ph-icon-btn { width: 40px; padding: 0; flex: 0 0 auto; }
.ph-btn:hover, .ph-icon-btn:hover { background: rgba(255,255,255,.26); color: #fff; }
.ph-user {
  display: flex; align-items: center; gap: 9px; height: 44px; padding: 3px 10px 3px 3px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.ph-user:hover { background: rgba(255,255,255,.24); }
.ph-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--tomato); font-weight: 800; font-size: .8rem; flex: 0 0 auto; }
.ph-user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.ph-user-name { font-weight: 600; font-size: .84rem; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-user-role { font-size: .68rem; opacity: .8; }
.ph-logout { background: rgba(0, 0, 0, .22); }
.ph-logout:hover { background: rgba(0, 0, 0, .34); color: #fff; }
/* Bootstrap ki CSS/JS na bhi chale to menu phir bhi khulta hai */
.dropdown { position: relative; }
.ph-menu.show { display: block; position: absolute; right: 0; top: calc(100% + 6px); z-index: 1200;
                background: #fff; list-style: none; margin: 0; }
.ph-menu { border-radius: 14px; padding: 6px; min-width: 190px; border: 1px solid rgba(43,27,18,.08); box-shadow: 0 18px 40px -12px rgba(43,27,18,.35); }
.ph-menu .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 9px; padding: 8px 10px; font-size: .88rem; }

.pos-body { height: calc(100vh - 64px) !important; }

/* Darmiyani screen (laptop) par daen wale buttons apne khane se bahar nikal kar
   beech wale tabs par char jate the — pehle unke labels chhup jate hain, phir
   ghari, phir user ka naam. Dono taraf overflow band, taake kabhi overlap na ho. */
/* .ph-right par overflow:hidden na dein — us ke andar ka user menu kat jata hai */
.ph-left { overflow: hidden; }
.ph-right { min-width: 0; }
.ph-tabs { flex: 0 0 auto; }
@media (max-width: 1500px) {
  .ph-right .ph-btn span { display: none; }
  .ph-right .ph-btn { width: 40px; padding: 0; }
}
@media (max-width: 1280px) {
  .ph-clock { display: none; }
}
@media (max-width: 1100px) {
  .ph-clock { display: none; }
  .ph-user-meta { display: none; }
  .ph-user { padding-right: 8px; gap: 4px; }
  .ph-net span { display: none; }
}
@media (max-width: 768px) {
  /* Baen taraf ko utni hi jagah jitni zaroorat hai (wapas ka teer + logo),
     baqi daen walon ke liye. Pehle "1fr auto" tha: daen ke button apni poori
     jagah le lete the aur 320px ke phone par baen ka khana sukar kar SIFAR
     reh jata tha — wapas jane wala teer poora kat jata tha. */
  .pos-header { grid-template-columns: auto 1fr; height: auto; padding: 8px 12px !important; row-gap: 8px; }
  .ph-left { flex: 0 0 auto; }
  .ph-icon-btn { flex: 0 0 40px; }
  /* Teeno tab neeche apni line par — aur ab wo waqai sukar bhi jate hain.
     Pehle `flex: 1 1 0` likha tha magar `min-width` khuli chhori thi, is liye
     tab apne naam se chhote ho hi nahi sakte the aur poora header (432px)
     chhoti screen se bahar nikal jata tha. */
  .ph-tabs { grid-column: 1 / -1; grid-row: 2; justify-content: stretch; width: 100%; min-width: 0; }
  .ph-tab { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 8px; gap: 6px; }
  .ph-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ph-btn span { display: none; }
  .ph-btn { width: 40px; padding: 0; }
  .pos-body { height: auto !important; }
}

/* Chhote phone par shop ka naam header se hata dete hain — wahan sirf
   "I. T." jaisa kata hua tukra bachta tha. Logo rehta hai, aur safhe ka
   unwaan neeche saaf likha hota hai. */
@media (max-width: 600px) { .ph-sub { display: none; } }
@media (max-width: 480px) {
  .ph-brand-text { display: none; }
  .ph-tab { font-size: .78rem; padding: 0 6px; gap: 5px; }
  .ph-right { gap: 6px; }
  .ph-count { min-width: 18px; height: 18px; padding: 0 5px; font-size: .66rem; }
}

/* ---- Cart panel v2: saaf header, seedhi alignment ---- */
.cart-header {
  background: rgba(255,255,255,.7) !important;
  color: var(--crust);
  padding: 14px 16px;
  border-bottom: 1px solid rgba(43,27,18,.08) !important;
}
.cart-title { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; }
.cart-count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--tomato); color: #fff; font-size: .75rem; font-family: 'Inter', sans-serif; }
.cart-clear { color: var(--tomato); background: transparent; border: 1px solid rgba(193,39,45,.35); border-radius: 9px; font-weight: 600; }
.cart-clear:hover { background: var(--tomato); color: #fff; }

.cart-summary { background: rgba(255,250,244,.85); border-top: 1px solid rgba(43,27,18,.08); padding: 14px 16px 16px; }
.cart-summary .row-line { align-items: center; min-height: 34px; margin-bottom: 6px; gap: 12px; font-size: .9rem; }
.cart-summary .row-line > label, .cart-summary .row-line > span:first-child { color: #6b5a4a; font-weight: 500; }
.cart-summary .discount-input, .cart-summary #amountPaid { width: 120px; max-width: 120px; text-align: right; border-radius: 9px; }
.cart-summary #paymentMethod { width: 120px !important; border-radius: 9px; }
.cart-summary .row-line.fw-bold { border-top: 1px dashed rgba(43,27,18,.18); padding-top: 10px; margin-top: 4px; }
.cart-summary .row-line.fw-bold > span { color: var(--crust) !important; font-weight: 800; }
.cart-summary .row-line.fw-bold > span:last-child { color: var(--tomato) !important; }
.cart-summary #changeDue { font-weight: 700; color: var(--basil); }
.btn-checkout { height: 52px; font-size: 1.02rem; }

/* ---- No-counter warning ke saath layout na toote ---- */
body:has(.pos-counter-warn) .pos-body { height: calc(100vh - 104px) !important; }
@media (max-width: 768px) { body:has(.pos-counter-warn) .pos-body { height: auto !important; } }

/* ---- Login v2 ---- */
.login-card { max-width: 400px; background: rgba(255,251,246,.9) !important; }
.login-card .card-body { padding: 32px 28px !important; }
.login-logo { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; background: linear-gradient(145deg, var(--tomato), var(--tomato-dark)); box-shadow: 0 10px 24px -8px rgba(193,39,45,.7); }
.login-title { font-family: 'Poppins', sans-serif; font-size: 1.45rem; font-weight: 700; color: var(--crust); margin: 0 0 2px; }
.login-card .form-label { font-size: .82rem; font-weight: 600; color: #6b5a4a; }
.login-card .form-control { height: 46px; background: #fff; border: 1px solid #e6d6bf; border-radius: 12px; }
.login-card .btn-danger { height: 48px; border-radius: 12px; font-size: 1rem; }
.counter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.counter-pill { position: relative; cursor: pointer; margin: 0; }
.counter-pill input { position: absolute; opacity: 0; pointer-events: none; }
.counter-pill span { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 11px; border: 1.5px solid #e6d6bf; background: #fff; font-weight: 600; font-size: .86rem; color: var(--ink); transition: all .15s var(--ease); }
.counter-pill:hover span { border-color: var(--tomato); }
.counter-pill input:checked + span { background: var(--tomato); border-color: var(--tomato); color: #fff; box-shadow: 0 6px 14px -6px rgba(193,39,45,.7); }
.counter-pill input:focus-visible + span { outline: 3px solid rgba(193,39,45,.45); outline-offset: 2px; }
.counter-pill-none span { color: #8a7a68; font-weight: 500; }

/* ---------- Glow on the queue cards ---------- */
.q-card { transition: transform .16s ease, box-shadow .25s ease; }
.q-card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -20px rgba(43,27,18,.7); }
.q-card.has-addon { animation: qAddonGlow 3s ease-in-out infinite; }
@keyframes qAddonGlow {
  0%, 100% { box-shadow: 0 10px 24px -18px rgba(43,27,18,.5); }
  50%      { box-shadow: 0 14px 30px -14px rgba(217,119,6,.75), 0 0 0 2px rgba(243,201,119,.45); }
}
@media (prefers-reduced-motion: reduce) { .q-card.has-addon { animation: none; } }

/* ---------- Kitchen status on the queue cards ---------- */
.q-kitchen { margin: 0 14px 10px; padding: 7px 12px; border-radius: 10px; font-size: .8rem; font-weight: 700; }
.q-kitchen.k-wait    { background: #F3EFE9; color: #7a6a58; }
.q-kitchen.k-queued  { background: #DBEAFE; color: #1D4ED8; }
.q-kitchen.k-cooking { background: #FEF3C7; color: #B45309; }
.q-kitchen.k-ready   { background: #DCFCE7; color: #15803D; box-shadow: inset 0 0 0 1.5px #22C55E; }
.q-btn-send { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; font-weight: 700; }
.q-btn-send:hover { filter: brightness(1.06); }
.q-card:has(.k-ready) { box-shadow: 0 0 0 2px rgba(34,197,94,.5), 0 16px 32px -20px rgba(34,197,94,.8); }

/* ---------- Payment collected by the waiter ---------- */
.q-payreq { margin: 0 14px 10px; padding: 10px 12px; border-radius: 12px; background: #DCFCE7;
            color: #14532D; font-size: .82rem; display: flex; flex-direction: column; gap: 8px;
            box-shadow: inset 0 0 0 1.5px #22C55E; }
.q-payreq small { display: block; color: #3f6b4e; font-weight: 600; }
.q-payreq-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.q-payreq-actions .q-btn { flex: 1; }

/* ---------- Queue filter: this counter / all ---------- */
.q-filters { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.q-filter { border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: .84rem;
            background: rgba(255,255,255,.75); color: #5b4a3a; }
.q-filter.on { background: var(--tomato, #C8102E); color: #fff; }
.ot-note-other { font-size: .78rem; color: #8a5a10; background: #FFF6E5; border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; }

/* ---------- Connection / offline queue pill ---------- */
.ph-net { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px;
          padding: 7px 14px; font-weight: 700; font-size: .8rem; cursor: pointer;
          background: rgba(255,255,255,.18); color: #fff; }
.ph-net i { width: 9px; height: 9px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 3px rgba(52,199,89,.25); }
.ph-net.is-offline { background: #B45309; }
.ph-net.is-offline i { background: #FDE68A; box-shadow: 0 0 0 3px rgba(253,230,138,.3); animation: netBlink 1.4s ease-in-out infinite; }
.ph-net.is-syncing i { background: #60A5FA; box-shadow: 0 0 0 3px rgba(96,165,250,.3); animation: netBlink 1s linear infinite; }
.ph-net.has-queue { background: #C8102E; }
@keyframes netBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.net-panel { position: fixed; right: 14px; top: 64px; z-index: 60; width: min(360px, calc(100vw - 28px));
             background: #fff; border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(43,27,18,.7); padding: 16px; }
.net-panel h6 { font-family: 'Poppins', sans-serif; margin: 0 0 6px; }
.net-panel p { font-size: .84rem; color: #6b5a4a; margin: 0 0 10px; }
.net-list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 40vh; overflow: auto; }
.net-list li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px dashed #efe2cf; font-size: .82rem; }
.net-list .err { color: #B91C1C; font-weight: 600; }
.net-actions { display: flex; gap: 8px; }
.net-actions .btn { flex: 1; }
@media (prefers-reduced-motion: reduce) { .ph-net i { animation: none !important; } }

/* Logo uploaded in Admin → Settings */
.ph-logo { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; background: #fff; flex: 0 0 auto; }
.login-logo-img { width: 76px; height: 76px; margin: 0 auto 10px; border-radius: 20px; object-fit: contain; background: #fff; display: block; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }

/* ---------- Hand an order to a rider (counter) ---------- */
.q-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
           background: rgba(17, 24, 39, .55); backdrop-filter: blur(3px); padding: 16px; }
.q-sheet[hidden] { display: none; }
.q-sheet-card { width: min(460px, 100%); background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); }
.q-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.q-sheet-head h3 { font-family: 'Poppins', sans-serif; font-size: 1.1rem; margin: 0; }
.q-sheet-head small { color: #6B7280; font-size: .82rem; }
.q-x { background: #F3F4F6; border: 0; border-radius: 10px; width: 34px; height: 34px; cursor: pointer; }
.q-rider-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; }
.q-rider { display: flex; flex-direction: column; gap: 2px; text-align: left; background: #F9FAFB; border: 1.5px solid #E5E7EB;
           border-radius: 14px; padding: 12px 14px; cursor: pointer; }
.q-rider:hover { border-color: #C8102E; background: #fff; }
.q-rider-name { font-family: 'Poppins', sans-serif; font-weight: 700; }
.q-rider-meta { color: #6B7280; font-size: .82rem; }
.q-rider-empty { color: #6B7280; font-size: .88rem; text-align: center; padding: 14px; }
.q-rider-note { color: #6B7280; font-size: .8rem; margin: 12px 0 0; }
.q-track { background: #EFF6FF; color: #1E40AF; border-radius: 10px; padding: 7px 11px; font-size: .82rem; margin: 6px 0; }

/* "Install app" — sirf tab nazar aata hai jab browser sach much laga sakta ho */
.ph-install { border: 0; cursor: pointer; font-family: inherit; }
.ph-install[hidden] { display: none; }
.ph-install { background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
.ph-install:hover { background: #fff; color: #C8102E; }

/* Counter par member dhoondne ka khana */
.member-box { margin-top: 12px; border: 1px dashed rgba(0,0,0,.14); border-radius: 14px; padding: 12px 14px; background: rgba(0,0,0,.02); }
.member-box[hidden] { display: none; }
.member-find { display: flex; gap: 8px; }
.member-find input {
  flex: 1; min-width: 0; border: 1.5px solid rgba(0,0,0,.14); border-radius: 11px; padding: 11px 13px;
  font-size: .95rem; font-family: inherit;
}
.member-find input:focus { outline: none; border-color: #C8102E; box-shadow: 0 0 0 4px rgba(200,16,46,.12); }
.btn-find { border: 0; border-radius: 11px; padding: 0 18px; font-weight: 800; cursor: pointer; background: #14110F; color: #fff; }
.btn-find:hover { background: #C8102E; }
.member-hit { margin: 10px 0 0; border-radius: 11px; padding: 10px 12px; font-size: .88rem; font-weight: 700; }
.member-hit[hidden] { display: none; }
.member-hit.is-ok { background: #DCFCE7; color: #15803D; }
.member-hit.is-bad { background: #FEE2E2; color: #B91C1C; }
.member-hint { margin: 8px 0 0; font-size: .78rem; color: #6B7280; }