/* ==========================================================================
   Customer Menu - menu-themes.css
   Two selectable Customer Menu themes (Classic / Premium).
   --------------------------------------------------------------------------
   The theme is switched with a single attribute on <html>:
       <html data-menu-theme="classic|premium">
   set by js/app.js applyBranding() from the hotel's saved branding.theme.

   IMPORTANT:
   - Themes are PRESENTATION ONLY. They restyle the existing markup and never
     change menu data, cart logic, checkout or the order lifecycle.
   - Every theme styles the same existing components (menu cards, cart bar,
     cart drawer, modals, order status card), so one ordering implementation
     is shared by both.
   - Cart bar / View cart colours come from three custom properties that the
     hotel admin can override per hotel:
       --cart-bar-bg  --cart-cta-bg  --cart-cta-text
     (--cart-bar-text is derived automatically for readable contrast.)
   --------------------------------------------------------------------------
    Contents:
      0. Cart bar colour tokens (defaults per theme)
      1. Theme: Classic  (light, clean - the default look)
      2. Theme: Premium  (dark charcoal, gold detailing, serif)
      3. Shared cart bar / View cart button styling
      4. Responsive tweaks
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Cart bar colour tokens
   JS overrides these inline when the hotel saved custom colours.
   -------------------------------------------------------------------------- */
:root,
html[data-menu-theme="classic"] {
  --cart-bar-bg: var(--primary);
  --cart-bar-text: #ffffff;
  --cart-cta-bg: #ffffff;
  --cart-cta-text: var(--primary);
}

html[data-menu-theme="premium"] {
  --cart-bar-bg: #241f2c;
  --cart-bar-text: #f2ece0;
  --cart-cta-bg: #d6b678;
  --cart-cta-text: #1c1720;
}

/* --------------------------------------------------------------------------
   3. Shared cart bar / View cart button styling (all themes)
   The bar keeps the item count + total; the View cart pill is styled
   independently so its colours can be customised on their own.
   -------------------------------------------------------------------------- */
.cart-fab {
  background: var(--cart-bar-bg);
  color: var(--cart-bar-text);
}

.cart-fab-count,
.cart-fab-total {
  color: inherit;
  opacity: 0.95;
}

.cart-fab-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--cart-cta-bg);
  color: var(--cart-cta-text);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   1. THEME: CLASSIC
   Clean and simple restaurant menu: light warm background, white food cards,
   pill category navigation, serif headings, hotel accent colours.
   ========================================================================== */
:root,
html[data-menu-theme="classic"] {
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html[data-menu-theme="classic"] body {
  background: var(--bg);
}

html[data-menu-theme="classic"] .site-header {
  background: var(--surface);
  border-bottom: 3px solid var(--accent);
}

html[data-menu-theme="classic"] .brand-name {
  font-family: var(--font-heading);
  color: var(--primary);
}

html[data-menu-theme="classic"] .menu-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

html[data-menu-theme="classic"] .menu-card-title-row h3 {
  font-family: var(--font-heading);
  color: var(--primary);
}

html[data-menu-theme="classic"] .menu-card-image {
  border-radius: 0;
}

html[data-menu-theme="classic"] .chip-toggle {
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

html[data-menu-theme="classic"] .chip-toggle.active,
html[data-menu-theme="classic"] .chip-toggle[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

html[data-menu-theme="classic"] .category-nav {
  background: rgba(248, 246, 242, 0.96);
  border-bottom: 1px solid var(--border);
}

html[data-menu-theme="classic"] .cart-fab {
  border-radius: 16px;
}

html[data-menu-theme="classic"] .menu-grid {
  gap: var(--space-4);
}

/* ==========================================================================
   2. THEME: PREMIUM
   Substantially different: dark charcoal surfaces, champagne-gold detailing,
   elevated serif typography, gold food-card frames and a gold View cart pill.
   ========================================================================== */
html[data-menu-theme="premium"] {
  --bg: #121017;
  --surface: #1b1922;
  --surface-2: #24212e;
  --text: #e9e5ef;
  --text-muted: #a9a3b6;
  --text-light: #7d7789;
  --border: #332e3f;
  --border-strong: #453e54;
  --font-heading: "Playfair Display", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pm-gold: #d6b678;
  --pm-gold-soft: rgba(214, 182, 120, 0.28);
  --pm-heading: #f3ead8;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6);
  --primary-light: rgba(214, 182, 120, 0.12);
}

html[data-menu-theme="premium"] body {
  background:
    radial-gradient(1100px 420px at 50% -120px, rgba(214, 182, 120, 0.09), transparent 70%),
    var(--bg);
  color: var(--text);
}

html[data-menu-theme="premium"] h1,
html[data-menu-theme="premium"] h2,
html[data-menu-theme="premium"] h3,
html[data-menu-theme="premium"] h4 {
  color: var(--pm-heading);
  letter-spacing: 0.02em;
}

html[data-menu-theme="premium"] .site-header {
  background: linear-gradient(180deg, #1f1c28 0%, #1a1822 100%);
  border-bottom: 1px solid var(--pm-gold-soft);
  box-shadow: 0 1px 0 rgba(214, 182, 120, 0.18), 0 10px 26px rgba(0, 0, 0, 0.35);
}

html[data-menu-theme="premium"] .brand-name {
  font-family: var(--font-heading);
  color: var(--pm-heading);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1rem;
}

html[data-menu-theme="premium"] .brand-tagline,
html[data-menu-theme="premium"] .hotel-meta {
  color: var(--pm-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
}

html[data-menu-theme="premium"] .brand-logo {
  border: 1px solid var(--pm-gold-soft);
  box-shadow: 0 0 0 3px rgba(214, 182, 120, 0.1);
}

html[data-menu-theme="premium"] .icon-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--pm-heading);
}

html[data-menu-theme="premium"] .search-wrap {
  background: var(--bg);
}

html[data-menu-theme="premium"] .search-input {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

html[data-menu-theme="premium"] .search-input::placeholder {
  color: var(--text-light);
}

html[data-menu-theme="premium"] .category-nav {
  background: rgba(18, 16, 23, 0.96);
  border-bottom: 1px solid var(--border);
}

html[data-menu-theme="premium"] .chip-toggle {
  background: transparent;
  border: 1px solid var(--pm-gold-soft);
  color: var(--pm-heading);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 12px;
}

html[data-menu-theme="premium"] .chip-toggle.active,
html[data-menu-theme="premium"] .chip-toggle[aria-pressed="true"] {
  background: var(--pm-gold);
  border-color: var(--pm-gold);
  color: #1c1720;
}

html[data-menu-theme="premium"] .veg-dot {
  background: var(--surface);
}

html[data-menu-theme="premium"] .sort-select {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

html[data-menu-theme="premium"] .hero {
  background: linear-gradient(160deg, #221f2b 0%, #1b1922 100%);
  border: 1px solid var(--pm-gold-soft);
  box-shadow: var(--shadow-md);
}

html[data-menu-theme="premium"] .hero-description {
  color: var(--text-muted);
}

html[data-menu-theme="premium"] .badge {
  background: rgba(214, 182, 120, 0.12);
  color: var(--pm-gold);
  border: 1px solid var(--pm-gold-soft);
}

html[data-menu-theme="premium"] .menu-grid {
  gap: var(--space-5);
}

html[data-menu-theme="premium"] .menu-card {
  background: linear-gradient(180deg, #201d29 0%, #1b1922 100%);
  border: 1px solid rgba(214, 182, 120, 0.32);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

html[data-menu-theme="premium"] .menu-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(214, 182, 120, 0.14);
  border-radius: 10px;
  pointer-events: none;
}

html[data-menu-theme="premium"] .menu-card-image {
  filter: saturate(0.92) contrast(1.04);
}

html[data-menu-theme="premium"] .menu-card-title-row h3 {
  font-family: var(--font-heading);
  color: var(--pm-heading);
  letter-spacing: 0.02em;
}

html[data-menu-theme="premium"] .menu-card-description {
  color: var(--text-muted);
}

html[data-menu-theme="premium"] .menu-card-tags {
  color: var(--pm-gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}

html[data-menu-theme="premium"] .menu-card-bottom strong {
  color: var(--pm-gold);
  font-family: var(--font-heading);
  font-size: 1.1rem;
}

html[data-menu-theme="premium"] .add-btn,
html[data-menu-theme="premium"] .menu-card .add-btn {
  background: transparent;
  border: 1px solid var(--pm-gold);
  color: var(--pm-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}

html[data-menu-theme="premium"] .btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(214, 182, 120, 0.5), 0 8px 20px rgba(0, 0, 0, 0.35);
}

html[data-menu-theme="premium"] .btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
  color: var(--pm-heading);
}

html[data-menu-theme="premium"] .btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--pm-gold);
}

html[data-menu-theme="premium"] .cart-fab {
  border: 1px solid var(--pm-gold-soft);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

html[data-menu-theme="premium"] .cart-drawer,
html[data-menu-theme="premium"] .modal,
html[data-menu-theme="premium"] .modal-card {
  background: var(--surface);
  color: var(--text);
  border: 1px solid rgba(214, 182, 120, 0.28);
}

html[data-menu-theme="premium"] .cart-drawer-header h2,
html[data-menu-theme="premium"] .modal-header h2 {
  color: var(--pm-heading);
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
}

html[data-menu-theme="premium"] .cart-item,
html[data-menu-theme="premium"] .order-summary {
  background: var(--surface-2);
  border-color: var(--border);
}

html[data-menu-theme="premium"] .qty-btn,
html[data-menu-theme="premium"] .text-input,
html[data-menu-theme="premium"] .segmented-option {
  background: rgba(0, 0, 0, 0.25);
  border-color: var(--border-strong);
  color: var(--text);
}

html[data-menu-theme="premium"] .modal-price,
html[data-menu-theme="premium"] .summary-total,
html[data-menu-theme="premium"] .cart-row strong {
  color: var(--pm-gold);
}

html[data-menu-theme="premium"] .field label,
html[data-menu-theme="premium"] .order-type-fieldset legend,
html[data-menu-theme="premium"] .qty-row label {
  color: var(--pm-heading);
}

html[data-menu-theme="premium"] .order-status-card {
  background: var(--surface);
  border-color: rgba(214, 182, 120, 0.3);
}

html[data-menu-theme="premium"] .order-status-head h2 {
  color: var(--pm-heading);
}

html[data-menu-theme="premium"] .site-footer {
  background: #0d0c12;
  border-top: 1px solid var(--pm-gold-soft);
}

html[data-menu-theme="premium"] .site-footer p {
  color: #b9b2a4;
}

/* ==========================================================================
   4. Responsive tweaks
   ========================================================================== */
@media (min-width: 640px) {
  html[data-menu-theme="premium"] .menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  html[data-menu-theme="premium"] .menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html[data-menu-theme="premium"] .menu-card:hover {
    transform: translateY(-3px);
  }
}