/* =============================================================================
   Joy Curry & Tandoor — Design System (styles.css)

   Structure:
     1. Design Tokens  (custom properties in :root)
     2. Reset          (box model, element defaults)
     3. Typography     (type scale, heading/body styles)
     4. Layout         (container, page grid, section spacing)
     5. Components     (navbar, menu card, badges, buttons, cart, modal, forms)
     6. Utilities      (screen-reader, skip-nav, flex helpers)
     7. Responsive     (tablet / laptop / desktop overrides)
     8. Accessibility  (reduced-motion, focus rings)
     9. Print

   Conventions:
     - Mobile-first: base styles target ≤480px; media queries widen outward.
     - BEM-lite: .block__element--modifier. No deep nesting.
     - Every value references a token — never raw px/rem/colors in components.
     - Color contrast targets WCAG AA (4.5:1 for normal text, 3:1 for large text
       and UI components). Verified pairs documented in comments.
   =========================================================================== */


/* =============================================================================
   1. DESIGN TOKENS
   =========================================================================== */

:root {
  /* ---- Brand colors ---- */
  --color-primary:         #c94a1a;   /* Warm spice orange — buttons, links, accents */
  --color-primary-hover:   #a83d15;   /* Darker for hover/focus states */
  --color-primary-light:   #fceadb;   /* Tinted background for primary content */
  --color-secondary:       #c8953a;   /* Saffron gold — accents, highlights */
  --color-secondary-light: #fdf3d8;   /* Tinted background */

  /* ---- Navbar ---- */
  --color-navbar-bg:       #180800;   /* Rich dark brown — premium restaurant feel */
  --color-navbar-text:     #f0e4d0;   /* Warm cream — readable on dark */
  --color-navbar-hover:    rgba(255, 255, 255, 0.08);

  /* ---- Semantic colors ---- */
  /* WCAG AA verified against white (#fff) unless noted */
  --color-success:         #2e7d32;   /* 4.57:1 — in-stock, confirmation */
  --color-success-light:   #e8f5e9;
  --color-warning:         #e65100;   /* 4.55:1 — low-stock, notice */
  --color-warning-light:   #fff3e0;
  --color-error:           #c62828;   /* 5.91:1 — out-of-stock, validation */
  --color-error-light:     #ffebee;

  /* ---- Dietary badge colors (verified 3:1+ against white for UI components) ---- */
  --color-veg:             #388e3c;   /* Vegetarian — green dot/pill */
  --color-vegan:           #1b5e20;   /* Vegan — dark green pill */
  --color-nonveg:          #c62828;   /* Non-veg — red dot/pill */
  --color-spicy:           #d84315;   /* Hot spice — orange-red pepper */
  --color-allergen:        #f9a825;   /* Contains allergens — amber */
  --color-gf:              #558b2f;   /* Gluten-free — olive green */

  /* ---- Neutral palette ---- */
  --color-text-primary:    #1a0d00;   /* Rich dark brown — body text */
  --color-text-secondary:  #5c3d1e;   /* Warm brown — secondary text */
  --color-text-muted:      #9a7050;   /* Muted warm — placeholders */
  --color-text-inverse:    #fff;      /* Text on dark backgrounds */
  --color-bg:              #faf6ef;   /* Warm cream — main background */
  --color-bg-alt:          #f2e8d8;   /* Deeper cream — alternating sections */
  --color-surface:         #ffffff;   /* Card / elevated surface */
  --color-surface-raised:  #ffffff;   /* Higher elevation — modals, drawers */
  --color-border:          #e0cdb5;   /* Warm tan borders */
  --color-border-light:    #ecdec8;   /* Subtle warm dividers */
  --color-overlay:         rgba(24, 8, 0, 0.6);  /* Modal / drawer backdrop */

  /* ---- Typography ---- */
  --font-family-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                          Roboto, sans-serif;
  --font-family-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-family-mono:    'Monaco', 'Courier New', monospace;
  --font-size-xs:       0.75rem;    /* 12px */
  --font-size-sm:       0.875rem;   /* 14px */
  --font-size-base:     1rem;       /* 16px */
  --font-size-md:       1.125rem;   /* 18px */
  --font-size-lg:       1.25rem;    /* 20px */
  --font-size-xl:       1.5rem;     /* 24px */
  --font-size-2xl:      2rem;       /* 32px */
  --font-size-3xl:      2.5rem;     /* 40px */
  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  /* ---- Spacing scale ---- */
  --spacing-2xs:  2px;
  --spacing-xs:   4px;
  --spacing-sm:   8px;
  --spacing-md:   16px;
  --spacing-lg:   24px;
  --spacing-xl:   32px;
  --spacing-2xl:  48px;
  --spacing-3xl:  64px;

  /* ---- Border radius ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:    0 1px 4px rgba(80, 30, 0, 0.08);
  --shadow-md:    0 4px 16px rgba(80, 30, 0, 0.12);
  --shadow-lg:    0 8px 32px rgba(80, 30, 0, 0.18);
  --shadow-focus: 0 0 0 3px rgba(201, 74, 26, 0.35);  /* Primary color ring */

  /* ---- Transitions ---- */
  --transition-fast:   150ms ease-out;
  --transition-normal: 250ms ease-out;
  --transition-slow:   400ms ease-out;

  /* ---- Z-index scale ---- */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   100;
  --z-overlay:  500;
  --z-modal:    1000;

  /* ---- Breakpoints (documented here; cannot be used directly in media queries
        but serve as the reference for all responsive rules below) ----
     Mobile:  ≤ 480px  (base)
     Tablet:  481–768px  (@media min-width: 481px)
     Laptop:  769–1200px (@media min-width: 769px)
     Desktop: ≥ 1201px  (@media min-width: 1201px)
  ----------------------------------------------------------------------- */
}


/* =============================================================================
   2. RESET
   =========================================================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Enforce the HTML spec: [hidden] elements must not be visible */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-tight);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Remove default number spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}


/* =============================================================================
   3. TYPOGRAPHY
   =========================================================================== */

h1 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); }
h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); }
h3 { font-size: var(--font-size-xl);  font-weight: var(--font-weight-bold); }
h4 { font-size: var(--font-size-lg);  font-weight: var(--font-weight-bold); }

.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md   { font-size: var(--font-size-md); }
.text-lg   { font-size: var(--font-size-lg); }
.text-xl   { font-size: var(--font-size-xl); }

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-bold   { font-weight: var(--font-weight-bold); }

.text-muted    { color: var(--color-text-secondary); }
.text-muted--l { color: var(--color-text-muted); }

/* Price display */
.price {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;  /* Aligned decimal columns */
}


/* =============================================================================
   4. LAYOUT
   =========================================================================== */

/* Centered container with padding */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--spacing-md);
}

/* Page layout: main content + optional sidebar */
.page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  min-height: calc(100vh - 80px - 60px); /* viewport - navbar - footer */
}

/* Category section */
.section {
  padding-block: var(--spacing-lg);
}

.section__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-secondary);
  margin-bottom: var(--spacing-md);
  letter-spacing: 0.01em;
}

/* Menu card grid — 1 column by default (mobile) */
.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

/* Flex utilities */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-xs  { gap: var(--spacing-xs); }
.gap-sm  { gap: var(--spacing-sm); }
.gap-md  { gap: var(--spacing-md); }
.gap-lg  { gap: var(--spacing-lg); }


/* =============================================================================
   5. COMPONENTS
   =========================================================================== */

/* ---- 5a. NAVBAR ---- */

.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--spacing-sm);
  padding-inline: var(--spacing-md);
  background-color: var(--color-navbar-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.navbar__logo {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-secondary);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.navbar__logo span {
  color: var(--color-navbar-text);
}

/* Hamburger toggle — CSS-only: input + label */
.navbar__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.navbar__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-navbar-text);
  border-radius: 1px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Hidden checkbox drives mobile nav */
.navbar__toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Nav links — hidden on mobile, shown when checkbox is checked */
.navbar__nav {
  position: fixed;
  top: 0;
  right: 0;
  width: min(300px, 80vw);
  height: 100vh;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-xl) var(--spacing-lg);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  z-index: var(--z-modal);
}

.navbar__toggle-input:checked ~ .navbar__nav {
  transform: translateX(0);
}

.navbar__links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.navbar__links a {
  display: block;
  padding-block: var(--spacing-sm);
  padding-inline: var(--spacing-xs);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  transition: background-color var(--transition-fast);
}

.navbar__links a:hover,
.navbar__links a:focus-visible {
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
}

/* Cart button in navbar */
.navbar__cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-navbar-text);
  transition: background-color var(--transition-fast);
}

.navbar__cart-btn:hover {
  background-color: var(--color-navbar-hover);
}

.navbar__cart-icon {
  font-size: var(--font-size-lg);
}

.navbar__cart-count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  padding-inline: var(--spacing-2xs);
}

/* Close button inside mobile nav */
.navbar__nav-close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.navbar__nav-close:hover {
  background-color: var(--color-bg-alt);
}


/* ---- 5b. SEARCH & FILTER TOOLBAR ---- */

.toolbar {
  position: sticky;
  top: var(--navbar-height, 64px);
  z-index: 90;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  box-shadow: 0 2px 8px rgba(80, 30, 0, 0.06);
}

.toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.toolbar__search {
  flex: 1 1 240px;
  min-width: 0;
}

.toolbar__input {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.toolbar__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(201, 74, 26, 0.15);
}

.toolbar__input::placeholder {
  color: var(--color-text-muted);
}

.toolbar__control {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-shrink: 0;
}

.toolbar__select {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.toolbar__select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(201, 74, 26, 0.15);
}

/* Dietary toggle buttons */
.toolbar__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}

.toolbar__toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.toolbar__toggle[aria-pressed="true"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-medium);
}

/* Price range container */
.toolbar__price {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.toolbar__range {
  width: 120px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Mobile: full-width search, wrap controls */
@media (max-width: 480px) {
  .toolbar__search {
    flex: 1 1 100%;
  }

  .toolbar__range {
    width: 90px;
  }
}


/* ---- 5c. MENU CARD ---- */

.menu-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal),
              border-color var(--transition-normal);
}

.menu-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--color-secondary);
}

/* Image area — placeholder with warm spice gradient */
.menu-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #e8c890;
  background-image:
    linear-gradient(145deg, #f5dba0 0%, #e8bc70 45%, #c8953a 100%);
  overflow: hidden;
}

/* Food emoji watermark — centered in every card image placeholder */
.menu-card__image::before {
  content: "🍛";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  font-size: 4rem;
  line-height: 1;
  opacity: 0.28;
  pointer-events: none;
  user-select: none;
}

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

/* Price badge overlaid on image */
.menu-card__image-price {
  position: absolute;
  bottom: var(--spacing-sm);
  right: var(--spacing-sm);
  background-color: rgba(24, 8, 0, 0.72);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  letter-spacing: 0.02em;
}

/* Out-of-stock overlay */
.menu-card--out-of-stock {
  opacity: 0.6;
  pointer-events: none;
}

.menu-card--out-of-stock::after {
  content: 'Sold Out';
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  background-color: var(--color-error);
  color: var(--color-text-inverse);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Card body */
.menu-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--spacing-md);
  gap: var(--spacing-sm);
}

.menu-card__name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  line-height: 1.3;
}

.menu-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  flex: 1;
}

/* Meta row: badges, spice level, add button */
.menu-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border-light);
}

.menu-card__badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.menu-card__price-mobile {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.menu-card__add-btn {
  display: none;  /* Shown on tablet+ in responsive overrides */
}


/* ---- 5d. DIETARY BADGES ---- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  padding: 2px var(--spacing-xs);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
}

/* Vegetarian — green dot */
.badge--veg {
  background-color: var(--color-success-light);
  color: var(--color-veg);
}

/* Vegan — dark green pill */
.badge--vegan {
  background-color: #e8f5e9;
  color: var(--color-vegan);
}

/* Non-veg — red dot */
.badge--nonveg {
  background-color: var(--color-error-light);
  color: var(--color-nonveg);
}

/* Spice level — pepper icon inherits color */
.badge--spicy {
  background-color: #fbe9e7;
  color: var(--color-spicy);
}

/* Allergen warning — amber */
.badge--allergen {
  background-color: #fff8e1;
  color: var(--color-allergen);
}

/* Gluten-free */
.badge--gf {
  background-color: #f1f8e9;
  color: var(--color-gf);
}

/* Popular / chef special */
.badge--popular {
  background-color: var(--color-secondary-light);
  color: #b7840a;
}

/* Spice level indicator (pepper icons) */
.spice-level {
  font-size: var(--font-size-base);
  line-height: 1;
}


/* ---- 5d. BUTTONS ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

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

.btn--secondary {
  background-color: var(--color-bg-alt);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.btn--secondary:hover {
  background-color: var(--color-border-light);
}

.btn--danger {
  background-color: var(--color-error);
  color: var(--color-text-inverse);
}

.btn--danger:hover {
  background-color: #b71c1c;
}

.btn--sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
}

.btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-full);
}

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


/* ---- 5e. CART DRAWER ---- */

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(380px, 90vw);
  height: 100vh;
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  z-index: var(--z-modal);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
}

/* JS will toggle .cart-drawer--open; CSS-only preview for Phase 2 */
.cart-drawer--open {
  transform: translateX(0);
}

/* Overlay behind cart drawer */
.cart-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-overlay);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.cart-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
}

.cart-drawer__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.cart-drawer__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.cart-drawer__close:hover {
  background-color: var(--color-bg-alt);
}

/* Scrollable item list */
.cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Empty cart state */
.cart-drawer__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  color: var(--color-text-muted);
  padding: var(--spacing-xl);
  text-align: center;
}

.cart-drawer__empty-icon {
  font-size: 3rem;
}

/* Footer with totals + checkout */
.cart-drawer__footer {
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  background-color: var(--color-bg-alt);
}

.cart-drawer__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-drawer__total-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.cart-drawer__total-value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.cart-drawer__checkout-btn {
  width: 100%;
}


/* ---- 5f. CART ITEM ---- */

.cart-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
}

.cart-item__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.cart-item__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  flex: 1;
}

.cart-item__remove {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  padding: var(--spacing-2xs);
  transition: color var(--transition-fast);
}

.cart-item__remove:hover {
  color: var(--color-error);
}

.cart-item__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-item__qty {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.cart-item__qty-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  transition: background-color var(--transition-fast);
}

.cart-item__qty-btn:hover {
  background-color: var(--color-bg-alt);
}

.cart-item__qty-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  min-width: 20px;
  text-align: center;
}

.cart-item__price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}


/* ---- 5g. CHECKOUT MODAL ---- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-overlay);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.modal-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.checkout-modal {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.checkout-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-light);
}

.checkout-modal__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.checkout-modal__body {
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.checkout-modal__summary {
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.checkout-modal__submit {
  margin-top: var(--spacing-sm);
}

/* Order summary rows (rendered by CheckoutModal.js) */
.checkout-summary__heading {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
}

.checkout-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xs);
}

.checkout-summary__row--total {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  margin-top: var(--spacing-xs);
  margin-bottom: 0;
}

/* Confirmation screen */
.checkout-confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
}

.checkout-confirmation__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-success);
  color: #fff;
  font-size: 1.75rem;
  line-height: 56px;
  text-align: center;
}

.checkout-confirmation__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.checkout-confirmation__msg,
.checkout-confirmation__detail,
.checkout-confirmation__total,
.checkout-confirmation__contact {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  max-width: 340px;
}

.checkout-confirmation__total {
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.checkout-confirmation__close-btn {
  margin-top: var(--spacing-sm);
  min-width: 160px;
}


/* ---- 5h. FORM INPUTS ---- */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  background-color: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.form-input--error {
  border-color: var(--color-error);
}

.form-input--error:focus {
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.25);
}

.form-error-msg {
  font-size: var(--font-size-xs);
  color: var(--color-error);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Radio / checkbox group (e.g. delivery vs pickup) */
.form-radio-group {
  display: flex;
  gap: var(--spacing-sm);
}

.form-radio-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.form-radio-label:has(input:checked) {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.form-radio-label input[type="radio"] {
  accent-color: var(--color-primary);
}


/* ---- 5i. ALLERGEN BANNER ---- */

.allergen-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-warning-light);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.allergen-banner__icon {
  flex-shrink: 0;
  font-size: var(--font-size-lg);
}

/* ---- 5j. FOOTER ---- */

.site-footer {
  padding-block: var(--spacing-xl);
  padding-inline: var(--spacing-md);
  border-top: 1px solid var(--color-border-light);
  background-color: var(--color-bg-alt);
  text-align: center;
}

.site-footer__info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.site-footer__info a {
  color: var(--color-primary);
  transition: text-decoration var(--transition-fast);
}

.site-footer__info a:hover {
  text-decoration: underline;
}


/* =============================================================================
   5k. MENU STATE MESSAGES (loading / empty / error)
   =========================================================================== */

.state-loading,
.state-empty,
.state-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl) var(--spacing-lg);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  gap: var(--spacing-sm);
}

.state-empty::before {
  content: '🍽️';
  font-size: var(--font-size-3xl);
}

.state-error::before {
  content: '⚠️';
  font-size: var(--font-size-3xl);
}

/* Skeleton loading cards — shimmer animation until real content replaces them */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.menu-card--skeleton {
  pointer-events: none;
}

.menu-card--skeleton .menu-card__image,
.menu-card--skeleton .menu-card__name,
.menu-card--skeleton .menu-card__description,
.menu-card--skeleton .menu-card__meta {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 25%,
    var(--color-bg-tertiary, #e8e8e8) 50%,
    var(--color-bg-secondary) 75%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent;
}

.menu-card--skeleton .menu-card__name {
  height: 1.25rem;
  width: 60%;
  margin-bottom: var(--spacing-xs);
}

.menu-card--skeleton .menu-card__description {
  height: 0.875rem;
  width: 85%;
}

.menu-card--skeleton .menu-card__meta {
  height: 2rem;
  width: 40%;
}

/* =============================================================================
   6. UTILITIES
   =========================================================================== */

/* Screen-reader only — visually hidden but accessible to assistive tech */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip-nav link — visible only when focused via keyboard */
.skip-nav {
  position: absolute;
  top: -100%;
  left: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  z-index: calc(var(--z-modal) + 1);
  transition: top var(--transition-fast);
}

.skip-nav:focus {
  top: var(--spacing-sm);
}

/* Truncate long text */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin-block: var(--spacing-md);
}

/* Toast notification — temporary feedback messages (session expiry, cart changes) */
#toast-container {
  position: fixed;
  bottom: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: calc(var(--z-modal) + 10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  pointer-events: none;
}

.toast {
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--color-text-primary, #1a1a1a);
  color: var(--color-text-inverse, #fff);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 480px;
  text-align: center;
  pointer-events: auto;
}

.toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--error {
  background-color: var(--color-error, #c0392b);
}

.toast--success {
  background-color: var(--color-success, #27ae60);
}


/* =============================================================================
   7. RESPONSIVE — Tablet (≥ 481px)
   =========================================================================== */

@media (min-width: 481px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .container {
    padding-inline: var(--spacing-lg);
  }

  /* Show image price on desktop sizes; hide mobile price */
  .menu-card__image-price {
    display: block;
  }

  .menu-card__price-mobile {
    display: none;
  }
}


/* =============================================================================
   7b. RESPONSIVE — Laptop (≥ 769px)
   =========================================================================== */

@media (min-width: 769px) {
  .menu-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Page layout with sidebar space */
  .page-layout {
    grid-template-columns: 1fr 320px;
  }

  /* Navbar: show links inline, hide hamburger */
  .navbar__toggle {
    display: none;
  }

  .navbar__nav {
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    transform: none;
  }

  .navbar__links {
    flex-direction: row;
    gap: var(--spacing-xs);
  }

  .navbar__links a {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-navbar-text);
  }

  .navbar__links a:hover,
  .navbar__links a:focus-visible {
    background-color: var(--color-navbar-hover);
    color: var(--color-secondary);
  }

  .navbar__nav-close {
    display: none;
  }

  /* Show add button on card meta row */
  .menu-card__add-btn {
    display: inline-flex;
  }

  .section {
    padding-block: var(--spacing-xl);
  }
}


/* =============================================================================
   7c. RESPONSIVE — Desktop (≥ 1201px)
   =========================================================================== */

@media (min-width: 1201px) {
  .menu-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }

  .container {
    padding-inline: var(--spacing-xl);
  }

  .page-layout {
    grid-template-columns: 1fr 360px;
  }
}


/* =============================================================================
   8. ACCESSIBILITY
   =========================================================================== */

/* Reduced motion — disable all transitions and animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus-visible — visible ring on keyboard navigation, not on mouse click */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Remove default focus outline; :focus-visible handles it */
:focus:not(:focus-visible) {
  outline: none;
}


/* =============================================================================
   9. PRINT
   =========================================================================== */

/* ============================================================================
   ORDER HISTORY DRAWER (Phase 7D)
   Slides in from the left; same z-index tier as cart drawer (right).
   ============================================================================ */

.order-history-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: min(420px, 92vw);
  height: 100vh;
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  z-index: var(--z-modal);
  transform: translateX(-100%);
  transition: transform var(--transition-normal);
  overflow: hidden;
}

.order-history-drawer--open {
  transform: translateX(0);
}

.order-history-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.order-history-drawer__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.order-history-drawer__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
  cursor: pointer;
}

.order-history-drawer__close:hover {
  background-color: var(--color-bg-alt);
}

.order-history-drawer__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.order-history-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.order-history-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
}

.order-history-card__id {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono, monospace);
  color: var(--color-brand-primary);
  word-break: break-all;
}

.order-history-card__date {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  flex-shrink: 0;
  margin-left: var(--spacing-sm);
}

.order-history-card__type {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-xs);
}

.order-history-card__items {
  list-style: none;
  margin: 0 0 var(--spacing-sm);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.order-history-card__item {
  font-size: var(--font-size-sm);
}

.order-history-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border-light);
}

.order-history-card__total {
  font-weight: var(--font-weight-bold);
}

.order-history__empty,
.order-history__loading {
  text-align: center;
  color: var(--color-text-secondary);
  padding: var(--spacing-xl) var(--spacing-md);
}

.order-history__error {
  text-align: center;
  color: var(--color-error, #c0392b);
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
}

/* "My Orders" button in the navbar */
.navbar__orders-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  color: var(--color-navbar-text);
  transition: background-color var(--transition-fast);
}

.navbar__orders-btn:hover {
  background-color: var(--color-navbar-hover);
}

/* Inline form-level error in checkout modal */
.checkout-form__global-error {
  background-color: #fef2f2;
  color: var(--color-error, #c0392b);
  border: 1px solid var(--color-error, #c0392b);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-sm);
}

/* Real order ID line in confirmation screen */
.checkout-confirmation__order-id {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

/* Brief reorder-skipped notice in cart drawer header */
.cart-drawer__reorder-notice {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-warning, #d97706);
  margin-top: var(--spacing-xs);
  width: 100%;
}

/* ============================================================================
   Admin Panel — right-side drawer (Phase 7F)
   ============================================================================ */

.admin-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(640px, 96vw);
  height: 100vh;
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  z-index: var(--z-modal);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  overflow: hidden;
}

.admin-panel--open {
  transform: translateX(0);
}

.admin-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
  background-color: var(--color-primary);
  color: #fff;
}

.admin-panel__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.admin-panel__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  border-radius: var(--radius-sm);
  color: #fff;
  transition: background-color var(--transition-fast);
  cursor: pointer;
}

.admin-panel__close:hover {
  background-color: rgba(0,0,0,0.15);
}

.admin-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.admin-panel__toolbar {
  display: flex;
  gap: var(--spacing-sm);
}

/* Table */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.admin-th {
  text-align: left;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 2px solid var(--color-border);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.admin-td {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.admin-td--name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-item-name {
  font-weight: var(--font-weight-medium);
}

.admin-item-cat {
  font-size: var(--font-size-xs, 0.7rem);
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.admin-td--price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.admin-td--actions {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  flex-wrap: wrap;
}

.admin-row--inactive {
  opacity: 0.5;
}

/* Badges */
.admin-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-xs, 0.7rem);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  border: none;
  transition: opacity var(--transition-fast);
}

.admin-badge--in {
  background-color: var(--color-success-light, #d1fae5);
  color: var(--color-success-dark, #065f46);
}

.admin-badge--out {
  background-color: var(--color-warning-light, #fef3c7);
  color: var(--color-warning-dark, #92400e);
}

.admin-badge--deactivated {
  background-color: var(--color-bg-alt);
  color: var(--color-text-muted);
  cursor: default;
}

/* Action buttons */
.admin-action-btn {
  font-size: var(--font-size-xs, 0.7rem);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.admin-action-btn:hover {
  background-color: var(--color-bg-alt);
}

.admin-action-btn--danger {
  border-color: var(--color-error, #c0392b);
  color: var(--color-error, #c0392b);
}

.admin-action-btn--danger:hover {
  background-color: #fef2f2;
}

.admin-stock-btn {
  font-size: var(--font-size-xs, 0.7rem);
}

.admin-row-error {
  font-size: var(--font-size-xs, 0.7rem);
  color: var(--color-error, #c0392b);
  width: 100%;
}

/* Forms */
.admin-form {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.admin-form__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-xs);
}

.admin-form__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-form__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.admin-form__input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
}

.admin-form__input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.admin-form__textarea {
  min-height: 72px;
  resize: vertical;
}

.admin-form__actions {
  display: flex;
  gap: var(--spacing-sm);
}

.admin-form__error {
  color: var(--color-error, #c0392b);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
}

/* State messages */
.admin-loading,
.admin-empty,
.admin-error {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.admin-error {
  color: var(--color-error, #c0392b);
}

/* Navbar admin button */
.navbar__admin-btn {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  background-color: var(--color-secondary);
  color: #1a0800;
  font-weight: var(--font-weight-bold);
  border: none;
  cursor: pointer;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}

.navbar__admin-btn:hover {
  opacity: 0.85;
}

/* ============================================================================
   PAGE HERO — atmospheric tagline below the toolbar
   ============================================================================ */

.page-hero {
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--spacing-sm);
}

.page-hero__tagline {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-style: italic;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
}

/* ============================================================================
   SITE FOOTER — dark version to bookend the dark navbar
   ============================================================================ */

.site-footer {
  background-color: var(--color-navbar-bg);
  border-top: 1px solid rgba(255,255,255,0.06);
  color: var(--color-navbar-text);
}

.site-footer .site-footer__info {
  color: rgba(240, 228, 208, 0.75);
}

.site-footer .site-footer__info a {
  color: var(--color-secondary);
}

.site-footer .allergen-banner {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(240, 228, 208, 0.7);
}

/* ============================================================================
   ADD TO CART BUTTON — more prominent on cards
   ============================================================================ */

.menu-card__add-btn.btn--primary {
  border-radius: var(--radius-full);
  padding: var(--spacing-xs) var(--spacing-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}

@media print {
  .navbar,
  .cart-drawer,
  .cart-overlay,
  .modal-overlay,
  .order-history-drawer,
  .admin-panel,
  .skip-nav,
  .menu-card__add-btn {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .menu-card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-layout {
    grid-template-columns: 1fr;
  }
}