/* ============================================
   SPICE ROUTE — Customer Menu Design System
   Warm, tactile, "printed menu card" aesthetic
   ============================================ */

:root {
  --color-maroon-900: #4A1414;
  --color-maroon-700: #7A2E2E;
  --color-maroon-600: #8F3A35;
  --color-cream-100: #FBF6EC;
  --color-cream-200: #F3EBDA;
  --color-brass-500: #C68A2E;
  --color-brass-600: #B07A22;
  --color-ink-900: #2A1F1A;
  --color-ink-600: #5C4F44;
  --color-green-veg: #3F7D3F;
  --color-red-nonveg: #A33B3B;
  --color-white: #FFFFFF;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  --radius-card: 14px;
  --shadow-card: 0 2px 12px rgba(74, 20, 20, 0.08);
  --shadow-lifted: 0 8px 28px rgba(74, 20, 20, 0.16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-cream-100);
  color: var(--color-ink-900);
  -webkit-font-smoothing: antialiased;
}

/* ============ TOP BAR / RESTAURANT HEADER ============ */
.menu-header {
  background: linear-gradient(135deg, var(--color-maroon-900) 0%, var(--color-maroon-700) 100%);
  color: var(--color-cream-100);
  padding: 28px 20px 36px;
  position: relative;
  overflow: hidden;
}

.menu-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 14px;
  background: repeating-linear-gradient(
    -45deg,
    var(--color-brass-500) 0px, var(--color-brass-500) 8px,
    transparent 8px, transparent 16px
  );
  opacity: 0.5;
}

.menu-header__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.menu-header__brand {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 0;
}

.menu-header__tagline {
  font-size: 13px;
  color: var(--color-cream-200);
  opacity: 0.85;
  margin: 4px 0 0;
  font-style: italic;
}

.menu-header__table {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.browse-banner {
  background: var(--color-brass-500);
  color: var(--color-maroon-900);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
}

.menu-header__table span {
  color: var(--color-brass-500);
  font-weight: 700;
}

/* ============ SEARCH / CATEGORY NAV ============ */
.category-nav {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  background: var(--color-cream-100);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--color-cream-200);
  scrollbar-width: none;
}
.category-nav::-webkit-scrollbar { display: none; }

.category-chip {
  flex-shrink: 0;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 600;
  background: var(--color-white);
  border: 1.5px solid var(--color-cream-200);
  color: var(--color-ink-600);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.category-chip.active {
  background: var(--color-maroon-700);
  border-color: var(--color-maroon-700);
  color: var(--color-cream-100);
}

/* ============ MENU SECTIONS ============ */
.menu-section {
  padding: 24px 16px 4px;
}

.menu-section__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-maroon-900);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-section__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--color-brass-500) 0, var(--color-brass-500) 4px, transparent 4px, transparent 9px);
  opacity: 0.6;
}

/* ============ DISH CARD ============ */
.dish-card {
  display: flex;
  gap: 14px;
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
  position: relative;
}

.dish-card__image {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-cream-200);
}

.dish-card__body {
  flex: 1;
  min-width: 0;
}

.dish-card__title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.veg-dot {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-green-veg);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 3px;
}
.veg-dot::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-green-veg);
}
.veg-dot.nonveg { border-color: var(--color-red-nonveg); }
.veg-dot.nonveg::after { background: var(--color-red-nonveg); border-radius: 0; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }

.dish-card__name {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  margin: 0;
  color: var(--color-ink-900);
  line-height: 1.3;
}

.dish-card__desc {
  font-size: 13px;
  color: var(--color-ink-600);
  margin: 4px 0 8px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dish-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dish-card__price {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-maroon-700);
}

.featured-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-brass-600);
  background: rgba(198, 138, 46, 0.12);
  padding: 3px 8px;
  border-radius: 100px;
  margin-left: auto;
}

/* ============ ADD BUTTON / STEPPER ============ */
.add-btn {
  background: var(--color-white);
  border: 1.5px solid var(--color-maroon-700);
  color: var(--color-maroon-700);
  font-weight: 700;
  font-size: 13px;
  padding: 7px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.add-btn:hover { background: var(--color-maroon-700); color: white; }

.stepper {
  display: flex;
  align-items: center;
  background: var(--color-maroon-700);
  border-radius: 8px;
  overflow: hidden;
}
.stepper button {
  background: none;
  border: none;
  color: white;
  width: 30px;
  height: 30px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 700;
}
.stepper span {
  color: white;
  font-weight: 700;
  font-size: 13px;
  min-width: 22px;
  text-align: center;
}

/* ============ CART BAR ============ */
.cart-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--color-maroon-900);
  color: white;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.2);
  z-index: 30;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.cart-bar.visible { transform: translateY(0); }

.cart-bar__info { font-size: 13px; }
.cart-bar__count { font-weight: 700; font-family: var(--font-display); font-size: 16px; }

.cart-bar__btn {
  background: var(--color-brass-500);
  color: var(--color-maroon-900);
  border: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

/* ============ MODAL (customization / cart) ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 31, 26, 0.55);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal-sheet {
  background: var(--color-cream-100);
  width: 100%;
  max-width: 480px;
  max-height: 86vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 20px 20px 24px;
  transform: translateY(40px);
  transition: transform 0.25s ease;
}
.modal-overlay.open .modal-sheet { transform: translateY(0); }

.modal-sheet__handle {
  width: 40px;
  height: 4px;
  background: var(--color-cream-200);
  border-radius: 100px;
  margin: 0 auto 16px;
}

.modal-sheet h3 {
  font-family: var(--font-display);
  font-size: 19px;
  margin: 0 0 14px;
  color: var(--color-maroon-900);
}

.option-group {
  margin-bottom: 18px;
}
.option-group__label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-ink-600);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.option-group__required {
  color: var(--color-red-nonveg);
  font-size: 11px;
  font-weight: 600;
}

.option-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-cream-200);
  font-size: 14px;
  cursor: pointer;
}
.option-row:last-child { border-bottom: none; }
.option-row__price { color: var(--color-ink-600); font-size: 13px; margin-left: auto; margin-right: 12px; }

.btn-primary-full {
  width: 100%;
  background: var(--color-maroon-700);
  color: white;
  border: none;
  padding: 15px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  margin-top: 8px;
}

/* ============ CART ITEMS LIST ============ */
.cart-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-cream-200);
}
.cart-line__name { font-weight: 600; font-size: 14.5px; }
.cart-line__custom { font-size: 12px; color: var(--color-ink-600); margin-top: 2px; }
.cart-line__price { font-weight: 700; font-size: 14px; color: var(--color-maroon-700); }

.bill-row {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  padding: 6px 0;
  color: var(--color-ink-600);
}
.bill-row.total {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-ink-900);
  border-top: 1.5px dashed var(--color-cream-200);
  margin-top: 8px;
  padding-top: 12px;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--color-cream-200);
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.payment-option.selected {
  border-color: var(--color-maroon-700);
  background: rgba(122, 46, 46, 0.04);
}
.payment-option__icon {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--color-cream-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.payment-option__label { font-weight: 600; font-size: 14px; }
.payment-option__sub { font-size: 12px; color: var(--color-ink-600); }

/* ============ ORDER STATUS PAGE ============ */
.status-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

.status-ring {
  width: 120px; height: 120px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: conic-gradient(var(--color-brass-500) 0deg, var(--color-cream-200) 0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.status-ring__inner {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--color-cream-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.status-ring__time { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--color-maroon-900); }
.status-ring__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-ink-600); }

.status-title { font-family: var(--font-display); font-size: 22px; margin: 0 0 8px; color: var(--color-maroon-900); }
.status-sub { color: var(--color-ink-600); font-size: 14px; margin-bottom: 28px; }

.status-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
  position: relative;
}
.status-steps::before {
  content: '';
  position: absolute;
  top: 14px; left: 5%; right: 5%;
  height: 2px;
  background: var(--color-cream-200);
  z-index: 0;
}
.status-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
  flex: 1;
}
.status-step__dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-cream-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--color-ink-600);
  border: 2px solid var(--color-cream-100);
}
.status-step.done .status-step__dot { background: var(--color-green-veg); color: white; }
.status-step.active .status-step__dot { background: var(--color-brass-500); color: white; }
.status-step__label { font-size: 11px; color: var(--color-ink-600); font-weight: 600; }

.empty-cart {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-ink-600);
}
.empty-cart__icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }