/* ============================================================
   Restaurant Telegram WebApp — Main Stylesheet
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ── CSS Variables ── */
:root {
  --bg:         #f9f7f4;
  --surface:    #ffffff;
  --surface2:   #f3f0eb;
  --text:       #1a1208;
  --text-muted: #6b6460;
  --border:     #e8e2da;
  --brand:      #f97316;
  --brand-dark: #c2410c;
  --radius:     16px;
  --radius-sm:  12px;
}

.dark {
  --bg:         #111010;
  --surface:    #1c1b1b;
  --surface2:   #252423;
  --text:       #f5f0eb;
  --text-muted: #9c948d;
  --border:     #2e2c2a;
  --brand:      #fb923c;
  --brand-dark: #f97316;
}

/* ── Base ── */
html, body {
  font-family: 'Manrope', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 0; height: 0; }

/* ── Scroll X helper ── */
.scroll-x {
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scroll-x::-webkit-scrollbar { display: none; }

/* ── Cards ── */
.card    { background: var(--surface);  border: 1px solid var(--border); border-radius: var(--radius); }
.card-sm { background: var(--surface);  border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ── Buttons ── */
.btn-brand {
  background:   var(--brand);
  color:        white;
  font-family:  'Syne', sans-serif;
  font-weight:  600;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-brand:hover   { background: var(--brand-dark); }
.btn-brand:active  { transform: scale(0.97); opacity: 0.9; }
.btn-brand:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-ghost {
  background:   var(--surface2);
  color:        var(--text);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-ghost:active  { transform: scale(0.97); }
.btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Category pills ── */
.cat-pill {
  white-space:  nowrap;
  padding:      8px 16px;
  border-radius: 99px;
  font-size:    13px;
  font-weight:  600;
  font-family:  'Syne', sans-serif;
  background:   var(--surface2);
  color:        var(--text-muted);
  transition:   all 0.2s ease;
  cursor:       pointer;
  border:       1.5px solid transparent;
}
.cat-pill.active {
  background:   var(--brand);
  color:        white;
  border-color: var(--brand);
}

/* ── Skeleton loader ── */
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 50%, var(--surface2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 12px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Spinner ── */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Image placeholder ── */
.img-placeholder {
  background: linear-gradient(135deg, var(--surface2) 0%, var(--border) 100%);
}

/* ── Modal / Bottom sheet ── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 40;
  display: flex;
  align-items: flex-end;
}
.bottom-sheet {
  background:    var(--surface);
  border-radius: 24px 24px 0 0;
  width:         100%;
  max-height:    92vh;
  overflow-y:    auto;
  animation:     slideUp 0.35s cubic-bezier(.16, 1, .3, 1);
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Views ── */
.view { display: none; }
.view.active {
  display: block;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Toast ── */
.toast {
  position:    fixed;
  bottom:      90px;
  left:        50%;
  transform:   translateX(-50%) translateY(20px);
  background:  var(--text);
  color:       var(--bg);
  padding:     10px 20px;
  border-radius: 99px;
  font-size:   13px;
  font-weight: 600;
  font-family: 'Syne', sans-serif;
  z-index:     100;
  opacity:     0;
  transition:  all 0.3s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
  white-space: nowrap;
  max-width:   90vw;
  text-overflow: ellipsis;
  overflow: hidden;
}
.toast.show {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* ── Banner slider ── */
.banner-slider { scroll-snap-type: x mandatory; }
.banner-slide  { scroll-snap-align: start; flex-shrink: 0; }

/* ── Quantity control ── */
.qty-btn {
  width:  32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  background: var(--surface2);
  color: var(--text);
}
.qty-btn:active { transform: scale(0.88); }

/* ── Modifier item ── */
.mod-item {
  display:     flex;
  align-items: center;
  padding:     10px 14px;
  border-radius: 10px;
  border:      1.5px solid var(--border);
  cursor:      pointer;
  transition:  all 0.15s;
  margin-bottom: 6px;
  user-select: none;
}
.mod-item.selected {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

/* ── Cart badge ── */
.cart-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--brand); color: white;
  border-radius: 99px;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif;
  border: 2px solid var(--bg);
}

/* ── Cart item row ── */
.cart-item {
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.cart-item:last-child { border-bottom: none; }

/* ── Bottom nav ── */
.nav-btn {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            3px;
  flex:           1;
  padding:        8px 4px;
  border-radius:  10px;
  cursor:         pointer;
  transition:     all 0.2s;
  font-size:      9px;
  font-weight:    600;
  font-family:    'Syne', sans-serif;
  color:          var(--text-muted);
  background:     transparent;
  border:         none;
  letter-spacing: 0.02em;
}
.nav-btn.active { color: var(--brand); }
.nav-btn svg    { stroke: currentColor; transition: stroke 0.2s; }
.nav-btn:active { transform: scale(0.92); }

/* ── Guests selector button ── */
.guests-btn {
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Syne', sans-serif;
}
.guests-btn:active { transform: scale(0.93); }

/* ── Input focus ── */
input:focus, textarea:focus, select:focus {
  border-color: var(--brand) !important;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}

/* ── Star rating ── */
.star {
  cursor: pointer;
  transition: transform 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}
.star:hover { transform: scale(1.25); }

/* ── Order status badge ── */
.status-badge {
  display:      inline-flex;
  align-items:  center;
  padding:      4px 12px;
  border-radius: 99px;
  font-size:    12px;
  font-weight:  700;
  font-family:  'Syne', sans-serif;
}

/* ── Dish card active state ── */
.dish-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.dish-card:active { transform: scale(0.97); }

/* ── Utility ── */
.hidden { display: none !important; }
.text-brand { color: var(--brand); }
.bg-surface { background: var(--surface); }
.bg-surface2 { background: var(--surface2); }
.border-default { border-color: var(--border); }

/* ── Safe area ── */
.pb-safe {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}