/* Modern Gourmet Palette Design Tokens (Canary Yellow, Onyx Black, Crisp White) */
:root {
  --primary: #FFD600;              /* Vibrant Canary Yellow */
  --primary-hover: #E6C200;        /* Slightly deeper yellow on hover */
  --primary-contrast: #111111;     /* Bold black text inside yellow elements */
  --header-bg: #111111;            /* Deep Onyx Black Header */
  --dark-surface: #18181B;         /* Charcoal dark for modals/footers */
  --accent: #FFD600;
  --accent-hover: #E6C200;
  --text-primary: #111111;         /* Crisp black text */
  --text-secondary: #71717A;       /* Muted neutral grey */
  --bg-body: #F8F9FA;              /* Ultra-clean light greyish white */
  --bg-card: #FFFFFF;              /* Crisp white cards */
  --border-subtle: #E4E4E7;
  --badge-cart-bg: #FFD600;        /* Canary yellow cart badge */
  --badge-cart-text: #111111;

  /* Backward-compatible token mappings */
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-soft: rgba(255, 214, 0, 0.16);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-bg: var(--bg-body);
  --color-surface: var(--bg-card);
  --color-text: var(--text-primary);
  --color-muted: var(--text-secondary);
  --color-border: var(--border-subtle);
  --color-danger: #e53e3e;
  --color-warning: #dd6b20;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.04);
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-pop: 0 20px 50px rgba(0, 0, 0, 0.18);
  --font-ar: 'Cairo', system-ui, -apple-system, sans-serif;
  --font-en: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html[lang="ar"] body,
html[dir="rtl"] body,
body[dir="rtl"],
body[lang="ar"],
html[lang="ar"],
html[dir="rtl"] { font-family: var(--font-ar); }
html[lang="en"] body { font-family: var(--font-en); }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
img { max-width: 100%; display: block; }
/* Global: navigation links & buttons are never underlined (any state) */
a, button, .btn, .nav-btn, .back-btn, .hero-cta { text-decoration: none !important; }
a:hover, a:focus, a:active, a:focus-visible,
button:hover, button:focus, button:active, button:focus-visible,
.btn:hover, .btn:focus, .btn:active, .btn:focus-visible,
.nav-btn:hover, .nav-btn:focus, .nav-btn:active, .nav-btn:focus-visible,
.back-btn:hover, .back-btn:focus, .back-btn:active, .back-btn:focus-visible,
.hero-cta:hover, .hero-cta:focus, .hero-cta:active, .hero-cta:focus-visible { text-decoration: none !important; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--primary); color: var(--primary-contrast); border: 0; border-radius: var(--radius-md);
  padding-inline: 20px; padding-block: 12px; cursor: pointer; font-weight: 800; letter-spacing: 0.01em;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 2px 10px rgba(255, 214, 0, 0.28);
}
.btn:hover { background: var(--primary-hover); color: var(--primary-contrast); box-shadow: 0 4px 16px rgba(255, 214, 0, 0.4); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-accent { background: var(--accent); color: var(--primary-contrast); box-shadow: 0 2px 10px rgba(255, 214, 0, 0.28); }
.btn-accent:hover { background: var(--accent-hover); color: var(--primary-contrast); }
/* Canary Yellow primary and checkout button variants */
.btn-primary, .btn-checkout {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--primary); color: var(--primary-contrast); border: 0; border-radius: var(--radius-md);
  padding-inline: 20px; padding-block: 12px; cursor: pointer; font-weight: 800; letter-spacing: 0.01em;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 2px 10px rgba(255, 214, 0, 0.28);
}
.btn-primary:hover, .btn-checkout:hover { background: var(--primary-hover); color: var(--primary-contrast); box-shadow: 0 4px 16px rgba(255, 214, 0, 0.4); transform: translateY(-1px); }
.btn-primary:active, .btn-checkout:active { transform: translateY(1px) scale(0.99); }
.btn-lg { padding-inline: 26px; padding-block: 13px; border-radius: var(--radius-md); }
.btn-ghost { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: none; }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-contrast); background: #fff; box-shadow: var(--shadow-card); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.field { display: grid; gap: 6px; margin-block-end: 12px; }
.field label { font-weight: 700; font-size: 0.9rem; }
.field input, .field select, .field textarea {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding-inline: 12px; padding-block: 10px; background: #fff; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--color-primary-soft); border-color: var(--primary); }
/* Sleek High-Contrast Category Badges & Tags */
.badge,
.product-category-badge,
.category-pill,
.badge-cat,
.meal-cat-pill,
.p-meta-tags .badge {
  display: inline-block;
  background: var(--dark-surface, #18181B) !important;
  color: var(--primary, #FFD600) !important;
  font-weight: 700 !important;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  border: none;
  line-height: 1.2;
}

/* Matgary icon system — slate-gray inline SVGs (stroke #718096, 1.8, fill none) */
.icon { width: 19px; height: 19px; flex: none; color: #718096; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 22px; height: 22px; }
.btn .icon, .pill .icon { color: inherit; }
.stat-icon { width: 20px; height: 20px; color: #718096; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.pill { display: inline-flex; align-items: center; gap: 7px; }
.pill .icon { width: 18px; height: 18px; }
.cod .icon, .receipt .icon { width: 22px; height: 22px; }
.qty button { display: inline-grid; place-items: center; }
.qty button .icon { width: 14px; height: 14px; }
.cart-btn .icon { width: 20px; height: 20px; }
.logo-icon { width: 22px; height: 22px; color: var(--primary); stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.header-search .search-icon { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: rgba(255, 255, 255, 0.7); stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.spin { animation: matgary-spin 0.9s linear infinite; }
@keyframes matgary-spin { to { transform: rotate(360deg); } }

/* Modern Gourmet Category Pill & Tab Active States (Deep black background with Canary yellow border/text) */
.pill.active,
.lang-switch button.active,
.category-chip.active,
.cat-tab.active {
  background: var(--header-bg, #111111) !important;
  color: var(--primary, #FFD600) !important;
  border-color: var(--primary, #FFD600) !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.pill.active:hover,
.category-chip.active:hover,
.cat-tab.active:hover {
  background: #1e1e1e !important;
  border-color: var(--primary-hover, #E6C200) !important;
  color: var(--primary-hover, #E6C200) !important;
}

/* ==========================================================================
   Strict UI Contrast Rules (Canary Yellow #FFD600 & Deep Onyx Black #111111)
   ========================================================================== */

/* 1. Meal Prices on White Backgrounds (Deep Solid Black #111111) */
.price,
.product-price,
.current-price,
.meal-price,
.item-price,
.meal-main-price,
.mc-hero-price {
  color: #111111 !important;
  font-weight: 800 !important;
}

/* Currency symbol / suffix */
.currency,
.curr,
.price-currency,
.c-curr,
.price .currency,
.price-row .currency {
  color: #71717A !important;
  font-weight: 600 !important;
  font-size: 0.85em !important;
}

/* Strikethrough Compare Price */
.price-row s,
.meal-strike-price,
.compare-price,
s.muted {
  color: #A1A1AA !important;
  text-decoration: line-through !important;
}

/* 2. Discount & Promo Badges (Canary Yellow #FFD600 background with Bold Black #111111 text) */
.off,
.discount-badge,
.badge-discount,
.promo-badge,
.meal-badge-off {
  background: var(--primary, #FFD600) !important;
  color: #111111 !important;
  font-weight: 900 !important;
  font-size: 0.8rem !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  border-radius: 999px;
  padding-inline: 10px;
  padding-block: 4px;
  border: none;
}

/* 3. Breadcrumbs Navigation Contrast */
.crumbs,
.breadcrumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.86rem;
}
.crumbs a,
.breadcrumbs a,
.crumb-link {
  color: #71717A !important;
  text-decoration: none !important;
  font-weight: 600;
  transition: color 0.15s ease;
}
.crumbs a:hover,
.breadcrumbs a:hover,
.crumb-link:hover {
  color: #111111 !important;
  text-decoration: underline !important;
}
.crumbs span:not(#crumbName),
.breadcrumbs .crumb-sep,
.crumb-sep {
  color: #D4D4D8 !important;
}
.crumbs strong,
.crumbs #crumbName,
.breadcrumbs .crumb-active {
  color: #111111 !important;
  font-weight: 700 !important;
}