/* =============================================================================
   Sertaurant Kiosk — Design System
   Theme tokens match wtable/src/index.css exactly so the same DB value applies.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Theme Variables ─────────────────────────────────────────────────────────
   Raw HSL values (no hsl() wrapper) — consumed as hsl(var(--token)).
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  --background: 0 0% 4%;
  --foreground: 0 0% 98%;
  --card: 0 0% 8%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 8%;
  --popover-foreground: 0 0% 98%;
  --primary: 84 81% 44%;
  --primary-foreground: 0 0% 4%;
  --secondary: 0 0% 15%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 60%;
  --accent: 84 81% 44%;
  --accent-foreground: 0 0% 4%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 20%;
  --input: 0 0% 20%;
  --ring: 84 81% 44%;
  --radius: 0.75rem;
  --surface: 0 0% 10%;
  --surface-hover: 0 0% 15%;
  --lime: 84 81% 44%;
  --lime-glow: 84 81% 60%;
}

:root[data-theme="dark"] {
  --background: 0 0% 4%;
  --foreground: 0 0% 98%;
  --card: 0 0% 8%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 8%;
  --popover-foreground: 0 0% 98%;
  --primary: 84 81% 44%;
  --primary-foreground: 0 0% 4%;
  --secondary: 0 0% 15%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 60%;
  --accent: 84 81% 44%;
  --accent-foreground: 0 0% 4%;
  --border: 0 0% 20%;
  --input: 0 0% 20%;
  --ring: 84 81% 44%;
  --surface: 0 0% 10%;
  --surface-hover: 0 0% 15%;
  --lime: 84 81% 44%;
  --lime-glow: 84 81% 60%;
}

:root[data-theme="light"] {
  --background: 0 0% 98%;
  --foreground: 224 71% 4%;
  --card: 0 0% 100%;
  --card-foreground: 224 71% 4%;
  --popover: 0 0% 100%;
  --popover-foreground: 224 71% 4%;
  --primary: 220 90% 56%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 14% 96%;
  --secondary-foreground: 224 71% 4%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 8% 46%;
  --accent: 220 14% 93%;
  --accent-foreground: 224 71% 4%;
  --border: 220 13% 89%;
  --input: 220 13% 89%;
  --ring: 220 90% 56%;
  --surface: 0 0% 100%;
  --surface-hover: 220 14% 96%;
  --lime: 220 90% 56%;
  --lime-glow: 220 95% 65%;
}

:root[data-theme="ocean"] {
  --background: 214 76% 10%;
  --foreground: 210 40% 98%;
  --card: 214 62% 14%;
  --card-foreground: 210 40% 98%;
  --popover: 214 62% 14%;
  --popover-foreground: 210 40% 98%;
  --primary: 190 95% 50%;
  --primary-foreground: 222 47% 11%;
  --secondary: 214 40% 22%;
  --secondary-foreground: 210 40% 98%;
  --muted: 214 40% 22%;
  --muted-foreground: 215 20% 70%;
  --accent: 199 89% 48%;
  --accent-foreground: 222 47% 11%;
  --border: 214 36% 28%;
  --input: 214 36% 28%;
  --ring: 190 95% 50%;
  --surface: 214 62% 14%;
  --surface-hover: 214 40% 22%;
  --lime: 190 95% 50%;
  --lime-glow: 187 92% 58%;
}

:root[data-theme="nebula"] {
  --background: 255 32% 10%;
  --foreground: 260 30% 96%;
  --card: 255 28% 14%;
  --card-foreground: 260 30% 96%;
  --popover: 255 28% 14%;
  --popover-foreground: 260 30% 96%;
  --primary: 271 89% 66%;
  --primary-foreground: 0 0% 100%;
  --secondary: 255 18% 22%;
  --secondary-foreground: 260 30% 96%;
  --muted: 255 18% 22%;
  --muted-foreground: 248 14% 72%;
  --accent: 292 84% 61%;
  --accent-foreground: 0 0% 100%;
  --border: 255 16% 30%;
  --input: 255 16% 30%;
  --ring: 271 89% 66%;
  --surface: 255 28% 14%;
  --surface-hover: 255 18% 22%;
  --lime: 271 89% 66%;
  --lime-glow: 292 84% 61%;
}

:root[data-theme="arctic"] {
  --background: 215 24% 10%;
  --foreground: 210 24% 96%;
  --card: 215 20% 14%;
  --card-foreground: 210 24% 96%;
  --popover: 215 20% 14%;
  --popover-foreground: 210 24% 96%;
  --primary: 222 84% 64%;
  --primary-foreground: 0 0% 100%;
  --secondary: 215 14% 23%;
  --secondary-foreground: 210 24% 96%;
  --muted: 215 14% 23%;
  --muted-foreground: 216 10% 72%;
  --accent: 196 70% 55%;
  --accent-foreground: 0 0% 100%;
  --border: 215 12% 30%;
  --input: 215 12% 30%;
  --ring: 222 84% 64%;
  --surface: 215 20% 14%;
  --surface-hover: 215 14% 23%;
  --lime: 222 84% 64%;
  --lime-glow: 196 70% 55%;
}

:root[data-theme="ember"] {
  --background: 18 32% 10%;
  --foreground: 30 45% 96%;
  --card: 20 30% 14%;
  --card-foreground: 30 45% 96%;
  --popover: 20 30% 14%;
  --popover-foreground: 30 45% 96%;
  --primary: 24 95% 56%;
  --primary-foreground: 0 0% 100%;
  --secondary: 18 20% 24%;
  --secondary-foreground: 30 45% 96%;
  --muted: 18 20% 24%;
  --muted-foreground: 25 14% 72%;
  --accent: 10 85% 60%;
  --accent-foreground: 0 0% 100%;
  --border: 18 14% 30%;
  --input: 18 14% 30%;
  --ring: 24 95% 56%;
  --surface: 20 30% 14%;
  --surface-hover: 18 20% 24%;
  --lime: 24 95% 56%;
  --lime-glow: 10 85% 60%;
}

:root[data-theme="mint"] {
  --background: 162 42% 10%;
  --foreground: 160 28% 96%;
  --card: 162 36% 14%;
  --card-foreground: 160 28% 96%;
  --popover: 162 36% 14%;
  --popover-foreground: 160 28% 96%;
  --primary: 155 70% 52%;
  --primary-foreground: 0 0% 100%;
  --secondary: 162 22% 22%;
  --secondary-foreground: 160 28% 96%;
  --muted: 162 22% 22%;
  --muted-foreground: 160 12% 72%;
  --accent: 172 70% 45%;
  --accent-foreground: 0 0% 100%;
  --border: 162 16% 30%;
  --input: 162 16% 30%;
  --ring: 155 70% 52%;
  --surface: 162 36% 14%;
  --surface-hover: 162 22% 22%;
  --lime: 155 70% 52%;
  --lime-glow: 172 70% 45%;
}

:root[data-theme="rose"] {
  --background: 336 34% 10%;
  --foreground: 330 30% 96%;
  --card: 336 30% 14%;
  --card-foreground: 330 30% 96%;
  --popover: 336 30% 14%;
  --popover-foreground: 330 30% 96%;
  --primary: 338 82% 62%;
  --primary-foreground: 0 0% 100%;
  --secondary: 336 18% 22%;
  --secondary-foreground: 330 30% 96%;
  --muted: 336 18% 22%;
  --muted-foreground: 334 14% 72%;
  --accent: 316 70% 60%;
  --accent-foreground: 0 0% 100%;
  --border: 336 14% 30%;
  --input: 336 14% 30%;
  --ring: 338 82% 62%;
  --surface: 336 30% 14%;
  --surface-hover: 336 18% 22%;
  --lime: 338 82% 62%;
  --lime-glow: 316 70% 60%;
}

:root[data-theme="slate"] {
  --background: 220 14% 10%;
  --foreground: 210 20% 96%;
  --card: 220 12% 14%;
  --card-foreground: 210 20% 96%;
  --popover: 220 12% 14%;
  --popover-foreground: 210 20% 96%;
  --primary: 210 18% 70%;
  --primary-foreground: 220 14% 10%;
  --secondary: 220 10% 23%;
  --secondary-foreground: 210 20% 96%;
  --muted: 220 10% 23%;
  --muted-foreground: 215 10% 72%;
  --accent: 200 20% 60%;
  --accent-foreground: 220 14% 10%;
  --border: 220 8% 30%;
  --input: 220 8% 30%;
  --ring: 210 18% 70%;
  --surface: 220 12% 14%;
  --surface-hover: 220 10% 23%;
  --lime: 210 18% 70%;
  --lime-glow: 200 20% 60%;
}

/* ── Base Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font-family: inherit; outline: none; }
img { max-width: 100%; display: block; }
svg { display: block; }

.hidden { display: none !important; }

/* ── Loading Overlay ─────────────────────────────────────────────────────────── */
.overlay-loading {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: hsl(var(--background) / 0.92);
  backdrop-filter: blur(8px);
}

.spinner {
  width: 44px;
  height: 44px;
  border: 3px solid hsl(var(--border));
  border-top-color: hsl(var(--primary));
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-text {
  font-size: 0.95rem;
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.03em;
}

/* ── Toast ───────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 190;
  padding: 12px 24px;
  border-radius: 100px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 8px 32px hsl(0 0% 0% / 0.3);
  white-space: nowrap;
  animation: toastIn 0.25s ease;
}

.toast.toast-error {
  background: hsl(var(--destructive) / 0.15);
  border-color: hsl(var(--destructive) / 0.5);
  color: hsl(var(--destructive));
}

.toast.toast-success {
  background: hsl(var(--primary) / 0.15);
  border-color: hsl(var(--primary) / 0.4);
  color: hsl(var(--lime-glow));
}

/* ── Screens ─────────────────────────────────────────────────────────────────── */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.screen.active { animation: fadeIn 0.22s ease; }

/* ── Nav Bar ─────────────────────────────────────────────────────────────────── */
.nav-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: hsl(var(--card) / 0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid hsl(var(--border));
}

.nav-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: hsl(var(--primary));
  transition: background 0.15s;
  flex-shrink: 0;
  min-width: 80px;
}

.nav-back:hover, .nav-back:active { background: hsl(var(--primary) / 0.12); }
.nav-back svg { width: 18px; height: 18px; }

.nav-breadcrumb {
  flex: 1;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-right {
  flex-shrink: 0;
  min-width: 80px;
  text-align: right;
}

.nav-company {
  font-size: 0.78rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.02em;
}

/* ── Cart FAB ────────────────────────────────────────────────────────────────── */
.cart-fab {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  height: 56px;
  border-radius: 100px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 4px 24px hsl(var(--primary) / 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
  animation: fabIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cart-fab:hover { transform: scale(1.04); box-shadow: 0 6px 32px hsl(var(--primary) / 0.55); }
.cart-fab:active { transform: scale(0.97); }

.cart-fab-icon { width: 22px; height: 22px; }

.cart-fab-label { font-size: 0.88rem; font-weight: 600; }

.cart-fab-count {
  background: hsl(var(--primary-foreground));
  color: hsl(var(--primary));
  font-size: 0.78rem;
  font-weight: 800;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Inner screen layout (below nav bar) ─────────────────────────────────────── */
.screen-inner {
  background: hsl(var(--background));
}

.screen-scroll-body {
  margin-top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 24px 120px;
  -webkit-overflow-scrolling: touch;
}

.screen-page-header {
  margin-bottom: 24px;
}

.screen-page-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: hsl(var(--foreground));
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.screen-page-subtitle {
  margin-top: 6px;
  font-size: 0.95rem;
  color: hsl(var(--muted-foreground));
}

.screen-page-header--products { margin-bottom: 20px; }

/* ── Items Grid ──────────────────────────────────────────────────────────────── */
.items-grid {
  display: grid;
  gap: 16px;
}

.items-grid--menus {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.items-grid--categories {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.items-grid--products {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* ── Menu Cards ──────────────────────────────────────────────────────────────── */
.menu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 160px;
  padding: 28px 20px;
  border-radius: 20px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  text-align: center;
}

.menu-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px hsl(0 0% 0% / 0.25);
  border-color: hsl(var(--primary) / 0.5);
}

.menu-card:active { transform: scale(0.97); }

.menu-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background: hsl(var(--primary) / 0.15);
}

.menu-card-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.menu-card-desc {
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.4;
}

/* ── Menu Card – image variant ───────────────────────────────────────────────── */
.menu-card--img {
  position: relative;
  overflow: hidden;
  padding: 0;
  align-items: stretch;
  justify-content: flex-end;
  aspect-ratio: 4 / 3;
}

.menu-card-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-card-bg-fallback {
  position: absolute;
  inset: 0;
}

.menu-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 35%, hsl(0 0% 0% / 0.72));
}

.menu-card--img .menu-card-info {
  position: relative;
  z-index: 2;
  padding: 14px 16px;
  width: 100%;
}

.menu-card--img .menu-card-name {
  color: #fff;
  text-shadow: 0 1px 4px hsl(0 0% 0% / 0.5);
}

.menu-card--img .menu-card-desc {
  color: rgba(255,255,255,0.8);
}

/* ── Category Cards ──────────────────────────────────────────────────────────── */
.category-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.category-card:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 32px hsl(0 0% 0% / 0.3);
}

.category-card:active { transform: scale(0.97); }

.category-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, hsl(0 0% 0% / 0.72));
}

.category-card-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 800;
  color: hsl(var(--primary-foreground));
}

.category-card-info {
  position: relative;
  z-index: 2;
  padding: 14px 16px;
}

.category-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px hsl(0 0% 0% / 0.5);
}

.category-card-count {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
}

/* ── Product Cards ───────────────────────────────────────────────────────────── */
.product-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px hsl(0 0% 0% / 0.25);
  border-color: hsl(var(--primary) / 0.4);
}

.product-card:active { transform: scale(0.97); }

.product-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: hsl(var(--secondary));
}

.product-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-card:hover .product-card-img { transform: scale(1.05); }

.product-card-img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  color: hsl(var(--primary-foreground));
}

.product-card-body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
}

.product-card-name {
  font-size: 0.97rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-desc {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.product-card-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: hsl(var(--primary));
}

.product-card-price-original {
  font-size: 0.8rem;
  text-decoration: line-through;
  color: hsl(var(--muted-foreground));
  margin-right: 4px;
}

.product-card-add {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.12s;
  flex-shrink: 0;
}

.product-card-add:hover { background: hsl(var(--lime-glow)); }
.product-card-add:active { transform: scale(0.9); }

.product-badge-hh {
  position: absolute;
  top: 8px;
  right: 8px;
  background: hsl(28 100% 55%);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 100px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Product Detail Modal ────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: hsl(0 0% 0% / 0.65);
  backdrop-filter: blur(4px);
  animation: backdropIn 0.3s ease;
}

.modal-sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  background: hsl(var(--card));
  border-radius: 28px 28px 0 0;
  overflow: hidden;
  animation: sheetUp 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -8px 48px hsl(0 0% 0% / 0.4);
}

.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.modal-close-btn svg { width: 16px; height: 16px; }
.modal-close-btn:hover { background: hsl(var(--muted)); }
.modal-close-btn:active { transform: scale(0.9); }

.modal-image-area {
  position: relative;
  width: 100%;
  height: 230px;
  background: hsl(var(--secondary));
  flex-shrink: 0;
}

.modal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: 900;
  color: hsl(var(--primary-foreground));
}

.modal-body-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px 0;
}

.modal-product-info { margin-bottom: 20px; }

.modal-product-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.modal-product-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: hsl(var(--foreground));
  line-height: 1.25;
  flex: 1;
}

.modal-product-price {
  font-size: 1.2rem;
  font-weight: 800;
  color: hsl(var(--primary));
  white-space: nowrap;
}

.modal-product-desc {
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.55;
}

/* Modifier groups */
.modal-modifiers-area { margin-bottom: 20px; }

.mod-group {
  margin-bottom: 20px;
}

.mod-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.mod-group-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.mod-group-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  background: hsl(var(--secondary));
  color: hsl(var(--muted-foreground));
}

.mod-group-required {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  background: hsl(var(--destructive) / 0.12);
  color: hsl(var(--destructive));
}

/* ── Modifier option wrappers ────────────────────────────────────────────── */

/* Grid: used when options have photos */
.mod-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

/* List: used when options are text-only — wrapping flex row */
.mod-cards-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Base card button ────────────────────────────────────────────────────── */
.mod-chip.mod-card {
  position: relative;
  cursor: pointer;
  border: 2px solid hsl(var(--border));
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
  touch-action: manipulation;
}
.mod-chip.mod-card:active { transform: scale(0.95); }
.mod-chip.mod-card:hover {
  border-color: hsl(var(--primary) / 0.5);
  box-shadow: 0 4px 14px hsl(var(--primary) / 0.15);
}

/* ── Photo variant (.mod-card--img) — vertical card ─────────────────────── */
.mod-card--img {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  text-align: center;
}

.mod-card-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: hsl(var(--muted));
  overflow: hidden;
  flex-shrink: 0;
}

.mod-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mod-card-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: hsl(var(--muted-foreground) / 0.6);
}

.mod-card-body {
  padding: 8px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* ── Text-only variant (.mod-card--text) — horizontal chip ──────────────── */
.mod-card--text {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  border-radius: 14px;
  font-size: 0.92rem;
  white-space: nowrap;
}

/* ── Shared text elements ────────────────────────────────────────────────── */
.mod-card-name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

.mod-card-price {
  font-size: 0.78rem;
  font-weight: 700;
  color: hsl(var(--primary));
}

.mod-card--text .mod-card-name {
  font-size: 0.92rem;
}

.mod-card--text .mod-card-price {
  font-size: 0.85rem;
}

/* ── Checkmark badge ─────────────────────────────────────────────────────── */
.mod-card-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 0.68rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}

.mod-card--text .mod-card-check {
  position: static;
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
  flex-shrink: 0;
}

/* ── Selected state ──────────────────────────────────────────────────────── */
.mod-chip.mod-card.selected {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.35),
              0 4px 16px hsl(var(--primary) / 0.18);
}

.mod-chip.mod-card.selected .mod-card-check {
  opacity: 1;
  transform: scale(1);
}

.mod-chip.mod-card.selected .mod-card-name {
  color: hsl(var(--primary));
  font-weight: 700;
}

/* ── Max reached: dim unselected options ────────────────────────────────── */
.mod-chip--disabled,
.mod-chip[disabled]:not(.selected) {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Legacy plain chips (backward compat) ────────────────────────────────── */
.mod-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.mod-chip:not(.mod-card) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  background: transparent;
  border: 1.5px solid hsl(var(--border));
  cursor: pointer;
  transition: all 0.15s;
}
.mod-chip:not(.mod-card):hover { border-color: hsl(var(--primary) / 0.6); background: hsl(var(--primary) / 0.08); }
.mod-chip:not(.mod-card):active { transform: scale(0.95); }
.mod-chip:not(.mod-card).selected {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 700;
}
.mod-chip-price { font-size: 0.8rem; opacity: 0.85; }

/* Note input */
.modal-note-area { margin-bottom: 8px; }

.modal-note-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-size: 0.9rem;
  resize: none;
  margin-top: 6px;
  transition: border-color 0.15s;
}

.modal-note-input:focus { border-color: hsl(var(--primary) / 0.6); }
.modal-note-input::placeholder { color: hsl(var(--muted-foreground)); }

/* Modal footer */
.modal-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px 28px;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  flex-shrink: 0;
}

.modal-qty-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.qty-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.12s;
}

.qty-btn:hover { background: hsl(var(--muted)); }
.qty-btn:active { transform: scale(0.9); }

.qty-display {
  min-width: 36px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: hsl(var(--foreground));
}

.modal-add-btn { flex: 1; }

/* ── Setup Screen ────────────────────────────────────────────────────────────── */
.screen-setup {
  background: hsl(var(--background));
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}

.setup-wrap {
  width: 100%;
  max-width: 520px;
  padding: 40px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 24px;
}

.setup-header { text-align: center; margin-bottom: 32px; }

.setup-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: hsl(var(--primary) / 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.setup-icon svg { width: 32px; height: 32px; color: hsl(var(--primary)); }

.setup-title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

.setup-subtitle {
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
  margin-top: 6px;
}

.setup-form { display: flex; flex-direction: column; gap: 16px; }

.setup-status {
  min-height: 20px;
  font-size: 0.88rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
  transition: color 0.2s;
}

.setup-status.error { color: hsl(var(--destructive)); }
.setup-status.ok { color: hsl(var(--primary)); }

/* ── Welcome Screen ──────────────────────────────────────────────────────────── */
/* ── Welcome Screen ──────────────────────────────────────────────────────────
   Portrait-first, touch-optimised. Uses full vertical height.
   ─────────────────────────────────────────────────────────────────────────── */
.screen-welcome {
  background: hsl(var(--background));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  min-height: 100%;
}

/* Ambient glows */
.w-glow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}
.w-glow--top {
  top: -10%;
  width: 130%;
  height: 55%;
  background: radial-gradient(ellipse, hsl(var(--primary) / 0.22) 0%, transparent 65%);
}
.w-glow--bottom {
  bottom: -15%;
  width: 110%;
  height: 45%;
  background: radial-gradient(ellipse, hsl(var(--primary) / 0.12) 0%, transparent 65%);
}

/* ── Brand section (upper half) ── */
.w-brand {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px 40px;
  gap: 22px;
  text-align: center;
}

/* Animated ring behind logo */
.w-logo-ring {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1.5px solid hsl(var(--primary) / 0.2);
  animation: logoRing 3.5s ease-in-out infinite;
  pointer-events: none;
}
.w-logo-ring--outer {
  width: 260px;
  height: 260px;
  border-color: hsl(var(--primary) / 0.1);
  animation-delay: -1.75s;
}
@keyframes logoRing {
  0%, 100% { transform: scale(1);    opacity: 0.6; }
  50%       { transform: scale(1.08); opacity: 1;   }
}

/* Logo */
.welcome-logo-wrap {
  position: relative;
  z-index: 1;
  width: 148px;
  height: 148px;
  border-radius: 36px;
  overflow: hidden;
  background: hsl(var(--card));
  border: 2px solid hsl(var(--primary) / 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 6px hsl(var(--primary) / 0.08),
    0 20px 48px hsl(0 0% 0% / 0.35);
}
.welcome-logo         { width: 100%; height: 100%; object-fit: cover; }
.welcome-logo-fallback {
  font-size: 4rem;
  font-weight: 900;
  color: hsl(var(--primary));
  line-height: 1;
}

/* Company name */
.welcome-company-name {
  font-size: clamp(2.4rem, 9vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  color: hsl(var(--foreground));
  line-height: 1;
  text-shadow: 0 2px 24px hsl(var(--primary) / 0.18);
}

/* Divider accent */
.welcome-divider {
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)));
}

/* "Open" status badge */
.w-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 22px;
  border-radius: 100px;
  background: hsl(var(--primary) / 0.12);
  border: 1px solid hsl(var(--primary) / 0.28);
  color: hsl(var(--primary));
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.w-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--primary));
  flex-shrink: 0;
  animation: statusBlink 2s ease-in-out infinite;
}
@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* ── CTA section (lower half) ── */
.w-cta-wrap {
  position: relative;
  z-index: 1;
  padding: 16px 24px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.w-hint {
  font-size: 0.78rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Big tap button */
.btn-welcome {
  position: relative;
  width: 100%;
  min-height: 128px;
  border-radius: 28px;
  background: linear-gradient(140deg,
    hsl(var(--primary)),
    hsl(var(--primary) / 0.78));
  color: hsl(var(--primary-foreground));
  overflow: hidden;
  box-shadow:
    0 8px 40px hsl(var(--primary) / 0.38),
    0 2px 8px  hsl(0 0% 0% / 0.2);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-welcome:active {
  transform: scale(0.975);
  box-shadow: 0 4px 20px hsl(var(--primary) / 0.28);
}

/* Ripple animation inside button */
.btn-welcome-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: hsl(var(--primary-foreground) / 0.12);
  animation: btnRipple 2.8s ease-out infinite;
  pointer-events: none;
}
.btn-welcome-ripple--2 { animation-delay: 1.4s; }
@keyframes btnRipple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0;   }
}

/* Button inner layout */
.btn-welcome-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px 32px;
}
.btn-welcome-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  opacity: 0.9;
}
.btn-welcome-text-wrap { flex: 1; text-align: left; }
.btn-welcome-label {
  display: block;
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1;
}
.btn-welcome-sub {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  opacity: 0.7;
  margin-top: 5px;
}
.btn-welcome-arrow {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  opacity: 0.65;
}

/* Settings button — bigger for touch */
.welcome-settings-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: hsl(var(--secondary));
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.welcome-settings-btn svg { width: 22px; height: 22px; }
.welcome-settings-btn:active { background: hsl(var(--muted)); color: hsl(var(--foreground)); }

/* ── Cart Screen ─────────────────────────────────────────────────────────────── */
.screen-cart { background: hsl(var(--background)); }

.cart-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 56px;
}

.cart-scroll-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 28px 20px 16px;
}

.cart-items-list { display: flex; flex-direction: column; gap: 12px; }

.cart-item {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  align-items: flex-start;
}

.cart-item-img-wrap {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: hsl(var(--secondary));
}

.cart-item-img { width: 100%; height: 100%; object-fit: cover; }

.cart-item-img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: hsl(var(--primary-foreground));
}

.cart-item-info { flex: 1; min-width: 0; }

.cart-item-name {
  font-size: 0.97rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: 4px;
}

.cart-item-mods {
  font-size: 0.8rem;
  color: hsl(var(--primary));
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 4px;
}

.cart-item-note {
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
  font-style: italic;
}

.cart-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.cart-item-price {
  font-size: 1rem;
  font-weight: 800;
  color: hsl(var(--foreground));
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-ctrl-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, transform 0.1s;
  flex-shrink: 0;
}

.cart-ctrl-btn:hover { background: hsl(var(--muted)); }
.cart-ctrl-btn:active { transform: scale(0.88); }

.cart-ctrl-btn.remove {
  background: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  font-size: 0.85rem;
}

.cart-ctrl-btn.remove:hover { background: hsl(var(--destructive) / 0.2); }

.cart-qty-display {
  min-width: 28px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: hsl(var(--muted-foreground));
}

.cart-empty-icon { font-size: 3rem; margin-bottom: 12px; }
.cart-empty-text { font-size: 1rem; font-weight: 500; margin-bottom: 20px; }

.cart-table-row {
  margin-top: 16px;
  padding: 16px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
}

.cart-footer {
  padding: 16px 20px 28px;
  background: hsl(var(--card) / 0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}

.cart-customer-wrap { display: flex; flex-direction: column; gap: 4px; }

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

.summary-total {
  font-size: 1.1rem;
  font-weight: 800;
  color: hsl(var(--foreground));
  padding-top: 8px;
  border-top: 1px solid hsl(var(--border));
}

/* ── Confirmation Screen ─────────────────────────────────────────────────────── */
.screen-confirm {
  background: hsl(var(--background));
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.confirm-glow {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(ellipse, hsl(var(--primary) / 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.confirm-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: 40px 24px;
  max-width: 400px;
}

.confirm-check {
  width: 88px;
  height: 88px;
}

.confirm-checkmark { width: 100%; height: 100%; }

.confirm-circle {
  stroke: hsl(var(--primary));
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: strokeDash 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards;
}

.confirm-tick {
  stroke: hsl(var(--primary));
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: strokeDash 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.65s forwards;
}

.confirm-title {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

.confirm-order-number {
  font-size: 2.5rem;
  font-weight: 900;
  color: hsl(var(--primary));
  letter-spacing: -0.02em;
}

.confirm-subtitle {
  font-size: 1rem;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

.confirm-timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.confirm-timer-label { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }

.confirm-countdown {
  font-size: 2.2rem;
  font-weight: 900;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  height: 44px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.15s, transform 0.12s, opacity 0.15s;
  cursor: pointer;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; pointer-events: none; }

.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.btn-primary:hover { background: hsl(var(--lime-glow)); }

.btn-ghost {
  background: transparent;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}

.btn-ghost:hover { background: hsl(var(--secondary)); }

.btn-lg {
  height: 54px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 14px;
}

.btn-full { width: 100%; }

/* ── Form Fields ─────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.field-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.field-hint {
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
}

.field-input {
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-size: 0.95rem;
  font-weight: 500;
  transition: border-color 0.15s;
  user-select: auto;
  -webkit-user-select: auto;
}

.field-input:focus { border-color: hsl(var(--primary) / 0.6); }
.field-input::placeholder { color: hsl(var(--muted-foreground)); }

.field-input--lg {
  height: 56px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ── OTP Code Slots ──────────────────────────────────────────────────────────── */
.code-slots {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.code-slot {
  width: 72px;
  height: 80px;
  border-radius: 16px;
  background: hsl(var(--secondary));
  border: 2px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
  caret-color: hsl(var(--primary));
  user-select: auto;
  -webkit-user-select: auto;
}

.code-slot:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.25);
}

.code-slot.filled {
  border-color: hsl(var(--primary) / 0.6);
  color: hsl(var(--primary));
}

/* ── Cart page header (title + Add More btn) ─────────────────────────────────── */
.cart-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.btn-add-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 2px solid hsl(var(--primary) / 0.6);
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
  white-space: nowrap;
}

.btn-add-more:hover {
  background: hsl(var(--primary) / 0.18);
  border-color: hsl(var(--primary));
}

.btn-add-more:active { transform: scale(0.95); }

/* ── Card Number Modal ───────────────────────────────────────────────────────── */
.card-modal-overlay {
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.card-modal-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: hsl(var(--card));
  border-radius: 28px;
  padding: 36px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 24px 80px hsl(0 0% 0% / 0.5);
  animation: cardModalIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cardModalIn {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.card-modal-icon {
  font-size: 3rem;
  line-height: 1;
}

.card-modal-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: hsl(var(--foreground));
  text-align: center;
  margin: 0;
}

.card-modal-hint {
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

.card-modal-input {
  width: 100%;
  font-size: 2rem;
  height: 72px;
  border-radius: 16px;
  text-align: center;
  letter-spacing: 0.1em;
  border: 2px solid hsl(var(--primary) / 0.4);
}

.card-modal-input:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.2);
}

.card-modal-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
}

.card-modal-cancel {
  flex: 0 0 auto;
  padding: 0 20px;
  height: 54px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--secondary));
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.card-modal-cancel:hover { background: hsl(var(--border)); }

.card-modal-confirm {
  flex: 1;
  height: 54px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
}

.indicator-required {
  color: hsl(var(--destructive));
  margin-left: 3px;
}

/* ── Animations ──────────────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fabIn {
  from { opacity: 0; transform: scale(0.5) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


@keyframes strokeDash {
  to { stroke-dashoffset: 0; }
}

/* ── Scrollbar Styling ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }

/* ═══════════════════════════════════════════════════════════════════════════════
   VIRTUAL ON-SCREEN KEYBOARD
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Container */
#vkb-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
              opacity   0.22s ease;
  transform: translateY(100%);
  opacity: 0;
}

#vkb-container.vkb-hidden { display: none; }

#vkb-container.vkb-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Active input highlight */
.vkb-active-field {
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.25) !important;
  outline: none !important;
}

/* Body adjustment: add scroll room on regular screens */
body.vkb-body-open .screen-inner,
body.vkb-body-open .screen-welcome {
  padding-bottom: calc(var(--vkb-height, 300px) + 16px);
}

/* ── Product modal rises above the keyboard when it opens ────────────── */

/* Push the overlay's content (the sheet) up by the keyboard height.
   Only applies to the product modal (bottom sheet), not the card modal. */
/* When the keyboard opens, shift the card-number modal upward so it
   sits in the visible area above the keyboard. */
body.vkb-body-open .card-modal-overlay {
  padding-bottom: calc(var(--vkb-height, 0px) + 24px);
}

body.vkb-body-open .modal-overlay:not(.card-modal-overlay) {
  padding-bottom: var(--vkb-height, 300px);
  transition: padding-bottom 0.22s ease;
}

/* Cap the sheet so it doesn't overflow the remaining space */
body.vkb-body-open .modal-sheet {
  max-height: calc(100vh - var(--vkb-height, 300px));
  transition: max-height 0.22s ease;
}

/* Collapse the decorative image area so content fits */
body.vkb-body-open .modal-image-area {
  height: 72px;
  min-height: 72px;
  transition: height 0.22s ease, min-height 0.22s ease;
  overflow: hidden;
}

body.vkb-body-open .modal-img-fallback {
  font-size: 1.8rem;
}

/* ── Panel (shared by both layouts) ─────────────────────────────────── */
.vkb-panel {
  background: linear-gradient(180deg, #1e1e1e 0%, #111111 100%);
  border-top: 2px solid hsl(var(--primary) / 0.35);
  box-shadow: 0 -12px 48px hsl(0 0% 0% / 0.55),
              0 0 0 0 transparent;
  position: relative;
  width: 100%;
}

/* ── Close button ────────────────────────────────────────────────────── */
.vkb-close-btn {
  position: absolute;
  top: -22px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border: 2px solid #f87171;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px hsl(0 0% 0% / 0.4);
  transition: transform 0.1s, background 0.15s;
  z-index: 1;
}
.vkb-close-btn:active { transform: scale(0.92); }

/* ── QWERTY Layout ───────────────────────────────────────────────────── */
.vkb-qwerty {
  padding: 10px 10px 14px;
}

.vkb-grid { display: flex; flex-direction: column; gap: 6px; }

.vkb-row {
  display: flex;
  align-items: stretch;
  gap: 5px;
  width: 100%;
}

.vkb-row-bottom { gap: 5px; }

/* Base key — flex:1 so all keys share the full row width equally */
.vkb-key {
  flex: 1 1 0;
  height: 62px;
  min-width: 0;
  padding: 0 4px;
  border-radius: 10px;
  background: #2c2c2c;
  border: 1px solid hsl(var(--primary) / 0.3);
  color: #f0f0f0;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, transform 0.08s;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vkb-key:active {
  background: hsl(var(--primary) / 0.45);
  border-color: hsl(var(--primary));
  transform: scale(0.93);
}

/* Backspace / Enter: slightly wider than a regular key */
.vkb-key-wide { flex: 1.6 1 0; }

/* Action keys: backspace color */
.vkb-key-action {
  background: #3a2e14;
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--primary));
  font-size: 1.3rem;
}
.vkb-key-action:active { background: hsl(var(--primary) / 0.35); }

/* Enter key */
.vkb-key-enter {
  background: hsl(var(--primary) / 0.15);
  border-color: hsl(var(--primary) / 0.55);
  color: hsl(var(--primary));
  font-size: 1.35rem;
  flex: 2 1 0;
}
.vkb-key-enter:active { background: hsl(var(--primary) / 0.4); }

/* Space bar — eats most of the bottom row */
.vkb-key-space {
  flex: 5 1 0;
  color: hsl(var(--primary) / 0.6);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

/* Mode toggle (123 / ABC / #+=) */
.vkb-key-mode {
  flex: 1.4 1 0;
  color: hsl(var(--primary));
  font-size: 0.9rem;
  background: #1e1e1e;
}

/* Clear */
.vkb-key-clear {
  flex: 1.4 1 0;
  background: #3a1212;
  border-color: #ef4444aa;
  color: #f87171;
  font-size: 0.88rem;
}
.vkb-key-clear:active { background: #ef444433; }

/* Shift */
.vkb-key-shift {
  flex: 1.4 1 0;
  font-size: 1.4rem;
}
.vkb-key-shift--on {
  background: hsl(var(--primary) / 0.4) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}

/* ── Numeric Pad Layout ──────────────────────────────────────────────── */
.vkb-numpad {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 14px 18px;
  gap: 10px;
  /* Right-aligned panel like wtable — max 420px so it doesn't get absurdly wide */
  max-width: 420px;
  width: 100%;
  margin-left: auto;
  margin-right: 0;
  border-radius: 28px 28px 0 0;
  border-left: 2px solid hsl(var(--primary) / 0.35);
}

.vkb-numpad-display {
  font-size: 2rem;
  font-weight: 800;
  color: hsl(var(--primary));
  letter-spacing: 0.1em;
  min-height: 2.8rem;
  text-align: center;
  width: 100%;
  padding: 8px 16px;
  background: hsl(var(--primary) / 0.08);
  border-radius: 12px;
  border: 1px solid hsl(var(--primary) / 0.25);
}

.vkb-numpad-grid { display: flex; flex-direction: column; gap: 8px; width: 100%; }

.vkb-numpad-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

/* Keys fill the row equally */
.vkb-numpad-key {
  flex: 1 1 0;
  height: 76px;
  border-radius: 14px;
  background: #2c2c2c;
  border: 1px solid hsl(var(--primary) / 0.3);
  color: #f0f0f0;
  font-size: 1.9rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s, transform 0.08s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vkb-numpad-key:active {
  background: hsl(var(--primary) / 0.4);
  border-color: hsl(var(--primary));
  transform: scale(0.93);
}

.vkb-numpad-key--back {
  background: #3a2e14;
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--primary));
  font-size: 1.5rem;
}
.vkb-numpad-key--back:active { background: hsl(var(--primary) / 0.3); }

.vkb-numpad-bottom {
  display: flex;
  gap: 10px;
  width: 100%;
}

.vkb-numpad-action {
  flex: 1;
  height: 62px;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s, transform 0.08s;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vkb-numpad-action:active { transform: scale(0.95); }

.vkb-numpad-abc {
  background: #2c2c2c;
  border-color: hsl(var(--primary) / 0.4);
  color: hsl(var(--primary));
}
.vkb-numpad-abc:active { background: hsl(var(--primary) / 0.25); }

.vkb-numpad-clear {
  background: #3a1212;
  border-color: #ef4444aa;
  color: #f87171;
}
.vkb-numpad-clear:active { background: #ef444433; }

.vkb-numpad-enter {
  flex: 2;
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 1.05rem;
}
.vkb-numpad-enter:active { background: hsl(var(--primary) / 0.8); }

/* ── Numpad close button variant ────────────────────────────────── */
.vkb-close-btn--numpad {
  right: auto;
  left: 16px;
}