/* ------------------------------
   Premium Dining – Design System
   Palette: Deep Red (#B71C1C), Gold (#FFD700), Black (#000000), Cream (#FFF8E1)
   Mobile-first, highly responsive, accessible.
------------------------------ */
:root {
  --color-primary: #B71C1C; /* Deep Red */
  --color-primary-700: #8f1414; /* Darker shade */
  --color-primary-800: #6e0f0f; /* For hover/active */
  --color-gold: #FFD700; /* Gold */
  --color-black: #000000; /* Black */
  --color-cream: #FFF8E1; /* Cream */
  --color-card: #0b0b0b; /* near-black card */
  --color-muted: #9b9b9b;
  --color-border: rgba(255,255,255,0.08);

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --shadow-xl: 0 20px 45px rgba(0,0,0,0.55);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.35);
  --blur: saturate(120%) blur(8px);

  --space-1: .25rem;  /* 4px  */
  --space-2: .5rem;   /* 8px  */
  --space-3: .75rem;  /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem;  /* 24px */
  --space-7: 2rem;    /* 32px */
  --space-8: 3rem;    /* 48px */

  --container: 1200px;
  --nav-h: 72px; /* bottom nav height */
}

/* Reset + Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: radial-gradient(1200px 800px at 20% -10%, #210606 0%, #000 50%) fixed;
  min-height: 100vh;
  color: #eee;
  padding-bottom: env(safe-area-inset-bottom);
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
input, button { color: inherit; }
a { color: inherit; text-decoration: none; }

/* Utility */
.container { width: min(100%, var(--container)); margin: 0 auto; padding: 0 var(--space-4); }
.hide { display: none !important; }
.visually-hidden { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.badge { 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  min-width: 1.25rem; 
  height: 1.25rem; 
  padding: 0 .35rem; 
  border-radius: 999px; 
  font-size:.7rem; 
  background: var(--color-primary); 
  color:#fff; 
  border:1px solid var(--color-border);
  transition: all 0.2s ease;
}

/* Header */
header.appbar {
  position: sticky; 
  top: 0; 
  z-index: 50; /* Increased z-index */
  backdrop-filter: var(--blur);
  background: color-mix(in srgb, #000 80%, transparent);
  border-bottom: 1px solid var(--color-border);
}
.appbar .row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.brand {
  display:flex; align-items:center; gap:.6rem;
  font-weight: 800; letter-spacing:.5px;
}
.brand .mark { width: 34px; height: 34px; display:grid; place-items:center; border-radius: 10px; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-700)); box-shadow: 0 6px 16px rgba(183,28,28,.45) inset, 0 0 0 1px rgba(255,215,0,.25); }
.brand .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--color-gold); }
.brand span { font-size: 1rem; }
.brand .lux { color: var(--color-gold); font-weight: 900; }

.searchbar { display:flex; align-items:center; gap:.5rem; background: rgba(255,255,255,.06); border:1px solid var(--color-border); border-radius: 999px; padding:.5rem .75rem; }
.searchbar input { background: transparent; border:none; outline: none; width: 100%; font-size:.95rem; }
.icon { width: 20px; height: 20px; display:inline-block; }

.toolbar { display:flex; align-items:center; gap:.4rem; }
.btn-ghost { display:inline-grid; place-items:center; padding:.6rem; border-radius: 12px; border:1px solid var(--color-border); background: rgba(255,255,255,.04); cursor:pointer; transition: .2s ease; }
.btn-ghost:hover { transform: translateY(-1px); background: rgba(255,255,255,.06); }

/* Category Chips */
.categories { 
  position: sticky; 
  top: 64px; /* Height of the app bar */
  z-index: 45; 
  background: rgba(0,0,0,0.95); /* More opaque background */
  backdrop-filter: var(--blur);
  padding: var(--space-3) 0 var(--space-2); 
  border-bottom: 1px solid var(--color-border); /* Add border for visual separation */
}
.chip-row { display:flex; gap:.5rem; overflow:auto; scrollbar-width:none; -ms-overflow-style:none; }
.chip-row::-webkit-scrollbar { display:none; }
.chip { flex: 0 0 auto; padding:.55rem .9rem; border-radius: 999px; font-size:.9rem; border:1px solid var(--color-border); background:#0e0e0e; cursor:pointer; transition:.2s; }
.chip[data-active="true"] { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-700)); border-color: color-mix(in srgb, var(--color-gold) 60%, transparent); box-shadow: 0 4px 18px rgba(183,28,28,.35); }

/* Product Grid */
main { 
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px);
  padding-top: var(--space-6); /* Add space below sticky categories */
  min-height: calc(100vh - var(--nav-h) - env(safe-area-inset-bottom));
}
.grid { display:grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 380px) { .grid { grid-template-columns: 1fr; } }
@media (min-width: 820px) { .grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1080px) { .grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.card { 
  background: linear-gradient(180deg, #0e0e0e, #090909); 
  border:1px solid var(--color-border); 
  border-radius: var(--radius-lg); 
  overflow:hidden; 
  box-shadow: var(--shadow-md); 
  display:flex; 
  flex-direction:column; 
  height: 100%; /* Ensure all cards have same height */
}
.card-media { 
  aspect-ratio: 4/3; 
  background: linear-gradient(135deg, #1a1a1a, #0e0e0e); 
  position: relative; 
  cursor: pointer; 
  transition: transform 0.2s ease; 
  overflow: hidden; 
}

.card-media:hover { 
  transform: scale(1.02); 
}

.card-media .pill { 
  position: absolute; 
  left: .6rem; 
  top: .6rem; 
  padding:.25rem .5rem; 
  border-radius:999px; 
  background: rgba(255,215,0,.1); 
  border:1px solid rgba(255,215,0,.4); 
  color: var(--color-gold); 
  font-size:.75rem; 
  font-weight:600; 
  z-index: 3; /* make sure pill is always above image */
}

.thumb{
  position: absolute;
  inset: 0;        /* top:0; right:0; bottom:0; left:0 */
  z-index: 0;      /* image sits under the pill */
}

.thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;              /* fills the whole box */
  object-position: center center; /* centers the crop (fixes top-left bias) */
}

.card-body { 
  padding: var(--space-4); 
  display:flex; 
  flex-direction:column; 
  gap:.5rem; 
  flex: 1; /* Take up remaining space */
  position: relative;
  z-index: 2;

}
.title { font-weight: 800; letter-spacing:.2px; }
.meta { color: var(--color-muted); font-size:.9rem; }
.price-row { 
  margin-top: auto; /* Push to bottom */
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap: .5rem; 
  flex-wrap: wrap; 
}
.price { font-weight: 300; font-size: 1.0rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1rem; border-radius: 12px; border:1px solid transparent; cursor:pointer; transition: .2s ease; white-space: nowrap; }
.btn-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-700)); border-color: color-mix(in srgb, var(--color-gold) 55%, transparent); box-shadow: 0 8px 28px rgba(183,28,28,.35); min-width: 120px; }
.btn-primary:hover { transform: translateY(-2px); filter: saturate(115%); }
.btn-outline { background: transparent; border-color: var(--color-border); }
.stars { display:inline-flex; gap:2px; }

/* Cart Drawer */
.drawer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.drawer .backdrop { position:absolute; inset:0; background: rgba(0,0,0,.5); opacity: 0; transition: .25s ease; }
.drawer .panel { position:absolute; right:0; top:0; bottom:0; width: min(100%, 420px); background: #0b0b0b; border-left:1px solid var(--color-border); transform: translateX(100%); transition: .28s ease; display:flex; flex-direction:column; }
.drawer[data-open="true"] { pointer-events: auto; }
.drawer[data-open="true"] .backdrop { opacity: 1; }
.drawer[data-open="true"] .panel { transform: translateX(0); box-shadow: var(--shadow-xl); }

.panel header { display:flex; align-items:center; justify-content:space-between; padding: var(--space-4); border-bottom:1px solid var(--color-border); }
.panel header h3 { margin:0; font-size: 1.1rem; letter-spacing:.3px; }
.panel .content { padding: var(--space-4); display:flex; flex-direction:column; gap: var(--space-3); overflow:auto; }
.line { height: 1px; background: var(--color-border); margin: .25rem 0; }

.cart-item { display:grid; grid-template-columns: 64px 1fr auto; gap:.75rem; align-items:center; padding:.5rem; border:1px solid var(--color-border); border-radius: 12px; background: #0f0f0f; }
.cart-thumb { width:64px; height:64px; border-radius: 10px; display:grid; place-items:center; background: linear-gradient(135deg, #161616, #0d0d0d); font-size:1.4rem; }
.qty { display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--color-border); border-radius: 999px; padding:.25rem; }
.qty button { width:28px; height:28px; display:grid; place-items:center; border-radius: 999px; border:1px solid var(--color-border); background: #121212; }

.summary { margin-top:auto; padding: var(--space-4); border-top:1px solid var(--color-border); background: rgba(255,255,255,.02); }
.summary .row { display:flex; justify-content:space-between; margin:.35rem 0; color: #cfcfcf; }
.summary .total { font-weight: 900; color: #fff; font-size:1.05rem; }

/* Product Modal */
.modal { position: fixed; inset: 0; z-index: 70; display:grid; place-items:center; background: rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:.25s ease; padding: var(--space-4); }
.modal[data-open="true"] { opacity:1; pointer-events:auto; }
.modal-card { width:min(100%, 680px); background:#0c0c0c; border:1px solid var(--color-border); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-xl); }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding: var(--space-4); border-bottom:1px solid var(--color-border); }
.modal-body { display:grid; gap: var(--space-4); grid-template-columns: 1fr; padding: var(--space-4); }
@media (min-width: 760px) { .modal-body { grid-template-columns: 1fr 1.2fr; } }
.modal-media { 
  aspect-ratio: 4/3; 
  border-radius: 14px; 
  display:grid; 
  place-items:center; 
  background: linear-gradient(135deg, #161616, #0d0d0d); 
  overflow: hidden;
  font-size: 3rem;
  position: relative;
}
.modal-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

/* Bottom Nav (mobile) */
nav.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding: 0 0 env(safe-area-inset-bottom);
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: stretch;
  box-shadow: 0 -8px 30px rgba(0,0,0,.6);
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .5rem .25rem;
  font-size: .75rem;
  color: #999;
  position: relative;
  cursor: pointer;
  transition: all .2s ease;
  border: none;
  background: none;
  text-align: center;
  height: var(--nav-h);
}
.tab:hover { 
  color: #ccc; 
  background: rgba(255,255,255,.03);
}
.tab svg { 
  width: 22px; 
  height: 22px; 
  flex-shrink: 0;
}
.tab[data-active="true"] { 
  color: var(--color-gold); 
  font-weight: 600; 
}
.tab[data-active="true"]::after { 
  content: ""; 
  position: absolute; 
  bottom: 0; 
  left: 25%; 
  right: 25%; 
  height: 3px; 
  border-radius: 2px 2px 0 0; 
  background: var(--color-gold); 
  box-shadow: 0 0 8px rgba(255,215,0,.4); 
}

/* Bottom Nav Cart Counter Specific Styling */
.bottom-nav-badge {
  font-size: 0.6rem !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 0.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide badges when count is 0 */
.bottom-nav-badge:empty,
.badge:empty {
  display: none !important;
}

.bottom-nav-badge[data-count="0"],
.badge[data-count="0"] {
  display: none !important;
}

/* Animation for cart counter updates */
.badge.updated, 
.bottom-nav-badge.updated {
  animation: pulse 0.3s ease;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Toasts */
.toasts { position: fixed; right: 12px; bottom: calc(var(--nav-h) + 12px); z-index: 80; display:flex; flex-direction:column; gap:.6rem; }
.toast { padding:.7rem .9rem; border-radius: 12px; background: #111; border:1px solid var(--color-border); box-shadow: var(--shadow-md); }

/* Gold accent underline */
.gold-underline { text-decoration: underline; text-decoration-color: var(--color-gold); text-underline-offset: 4px; }

/* Additional styles for unavailable items */
.unavailable {
  opacity: 0.6;
  filter: grayscale(50%);
}

.unavailable-pill {
  background: rgba(183,28,28,.1) !important;
  border-color: rgba(183,28,28,.4) !important;
  color: var(--color-primary) !important;
  right: .6rem !important;
  left: auto !important;
}

.featured-badge {
  position: absolute;
  top: .6rem;
  right: .6rem;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: rgba(255,215,0,.1);
  border: 1px solid rgba(255,215,0,.4);
  color: var(--color-gold);
  font-size: .75rem;
  font-weight: 600;
}

.dietary-labels {
  display: flex;
  gap: .25rem;
  margin: .5rem 0;
  flex-wrap: wrap;
}

.dietary-labels .label {
  padding: .15rem .4rem;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--color-border);
  font-size: .7rem;
  color: var(--color-muted);
}

.prep-time {
  font-size: .8rem;
  color: var(--color-muted);
  margin-top: .25rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Ensure the body accounts for safe areas */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Pre-filled form styling */
    .form-input.pre-filled {
      background: rgba(255,215,0,0.1);
      border-color: rgba(255,215,0,0.3);
      color: var(--color-gold);
    }

    .auth-message {
      padding: var(--space-3);
      background: rgba(255,215,0,0.1);
      border: 1px solid rgba(255,215,0,0.3);
      border-radius: var(--radius-md);
      margin-bottom: var(--space-4);
    }