/* ============================================
   ORDERZY MODERN DESIGN SYSTEM
   Optimized for performance and premium look
   ============================================ */

/* ========== GLOBAL UI FOUNDATION ========== */
/* This file enforces consistency across the entire app */

/* ========== CSS VARIABLES ========== */
:root {
  /* Brand Color - Orderzy Identity (ACCENT ONLY) */
  --orderzy-brand: #F28500;
  --orderzy-brand-dark: #D97706;
  --orderzy-brand-light: #FFA94D;

  /* Primary Action Color - Uses Brand Color */
  --color-primary: #F28500;
  --color-primary-dark: #D97706;
  --color-primary-light: #FFA94D;

  /* Accent Color - Replaced with brand color */
  --color-accent: #F28500;
  --color-accent-light: #FFA94D;
  --color-accent-bg: #FFF5F3;

  /* Semantic Colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF5350;
  --color-info: #3B82F6;

  /* Neutral Colors - Modern, clean */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #4A4A4A;
  --color-text-muted: #9E9E9E;
  --color-border: #E0E0E0;
  --color-bg-light: #FAFAFA;
  --color-bg-white: #FFFFFF;

  /* Typography - Montserrat + Open Sans */
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;

  /* 8px-Based Spacing System */
  --space-1: 4px;   /* 0.25rem */
  --space-2: 8px;   /* 0.5rem */
  --space-3: 12px;  /* 0.75rem */
  --space-4: 16px;  /* 1rem */
  --space-5: 20px;  /* 1.25rem */
  --space-6: 24px;  /* 1.5rem */
  --space-8: 32px;  /* 2rem */
  --space-12: 48px; /* 3rem */
  --space-16: 64px; /* 4rem */

  /* Legacy spacing (mapped to 8px scale) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Transitions - Performance optimized: max 150ms, opacity/color only */
  --transition-fast: 100ms ease-in-out;
  --transition-base: 150ms ease-in-out;
  --transition-slow: 150ms ease-in-out;
}

/* ========== GLOBAL TYPOGRAPHY ========== */
body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.heading,
.restaurant-title,
.section-title {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5, h6 { font-size: var(--text-base); }

/* ========== BUTTONS ========== */
/* Global Button System - Enforced Rules */
.btn {
  font-family: var(--font-heading);
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 40px; /* Desktop minimum */
  padding: var(--space-2) var(--space-4);
}

/* Primary Button - Filled, Brand Color, White Text */
.btn-primary,
.get-start-btn,
.request-btn {
  background: var(--orderzy-brand) !important;
  color: white !important;
  border: none !important;
}

.btn-primary:hover,
.get-start-btn:hover,
.request-btn:hover {
  background: var(--orderzy-brand-dark) !important;
  /* Removed transform for performance - opacity change only */
  opacity: 0.9;
}

/* Never use outline style for primary actions */
.btn-primary.btn-outline-primary,
.get-start-btn.btn-outline-primary {
  background: var(--orderzy-brand) !important;
  color: white !important;
  border: none !important;
}

/* Danger Button - Only for destructive actions */
.btn-danger {
  background: var(--color-error) !important;
  color: white !important;
  border: none !important;
}

.btn-danger:hover {
  background: #DC2626 !important;
  /* Removed transform for performance - opacity change only */
  opacity: 0.9;
}

.btn-primary:active,
.btn-danger:active {
  /* Removed transform for performance */
  opacity: 1;
}

/* Success Button */
.btn-success {
  background: var(--color-success) !important;
  color: white !important;
}

.btn-success:hover {
  background: #43A047 !important;
  /* Removed transform for performance - opacity change only */
  opacity: 0.9;
}

/* Secondary Buttons - Outline Style Only */
.btn-outline-primary,
.btn-outline-brand,
.btn-cart {
  border: 1px solid var(--orderzy-brand) !important;
  color: var(--orderzy-brand) !important;
  background: transparent !important;
  min-height: 40px; /* Desktop minimum */
}

.btn-outline-primary:hover,
.btn-outline-brand:hover,
.btn-cart:hover {
  background: var(--orderzy-brand) !important;
  color: white !important;
  /* Removed transform for performance - opacity change only */
  opacity: 0.9;
}

/* Button Sizes - Enforced Minimum Heights */
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  min-height: 40px; /* Desktop minimum */
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-lg);
  border-radius: var(--radius-lg);
  min-height: 44px; /* Desktop minimum */
}

/* Mobile Button Heights */
@media (max-width: 768px) {
  .btn,
  .btn-sm,
  .btn-primary,
  .get-start-btn,
  .btn-outline-primary,
  .btn-outline-brand,
  .btn-cart {
    min-height: 44px !important; /* Mobile minimum */
  }
}

/* ========== BUTTON SAFETY & INTERACTION RULES ========== */
/* Enforce tap target sizes and spacing for usability */

/* 1. TAP TARGETS - Styled interactive elements must meet minimum sizes */
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
[role="button"],
.clickable {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile: Styled interactive elements must be 44px × 44px minimum */
@media (max-width: 768px) {
  a.btn,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  [role="button"],
  .clickable {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* 2. QUANTITY CONTROLS - Minimum 40px × 40px for rapid clicking */
.add_to_cart,
.decrease_cart,
.qty-control-btn,
.qty-minus,
.qty-plus,
.qty-btn,
.quantity button,
.quantity .qtyplus,
.quantity .qtyminus {
  min-width: 40px !important;
  min-height: 40px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Fast Order Entry quantity controls - override inline styles */
.item-qty-controls .qty-control-btn,
.item-controls .qty-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
}

/* Mobile: Quantity controls maintain 40px minimum */
@media (max-width: 768px) {
  .add_to_cart,
  .decrease_cart,
  .qty-control-btn,
  .qty-minus,
  .qty-plus,
  .qty-btn {
    min-width: 40px !important;
    min-height: 40px !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* 3. ICON-ONLY BUTTONS - Must meet tap size even if visually small */
/* Icon buttons need padding to create tap target */
.btn i,
.btn .icon,
.btn .fa,
.btn [class*="icon-"],
.icon-only,
button i,
a i[class*="icon"],
.btn-cart i {
  /* Icons themselves can be small, but parent button must be large enough */
}

/* Ensure icon-only buttons have proper tap target */
.btn:has(> i:only-child),
.btn:has(> .icon:only-child),
.btn:has(> .fa:only-child) {
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2);
}

/* Fallback for browsers without :has() support */
.btn.icon-only-btn,
button.icon-only-btn,
a.icon-only-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: var(--space-2) !important;
}

@media (max-width: 768px) {
  .btn:has(> i:only-child),
  .btn:has(> .icon:only-child),
  .btn.icon-only-btn,
  button.icon-only-btn,
  a.icon-only-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* 4. BUTTON SPACING - Enforce minimum gaps */
/* Related buttons: minimum 12px gap */
.btn + .btn:not(.btn-danger):not([class*="danger"]):not([class*="delete"]):not([class*="remove"]) {
  margin-left: 12px !important;
}

/* Button groups with flexbox */
.d-flex .btn:not(:last-child):not(.btn-danger):not([class*="danger"]):not([class*="delete"]):not([class*="remove"]) {
  margin-right: 12px !important;
}

/* Primary and destructive actions: minimum 24px gap */
.btn-primary + .btn-danger,
.btn-danger + .btn-primary,
.btn-primary + [class*="delete"],
[class*="delete"] + .btn-primary,
.btn-primary + [class*="remove"],
[class*="remove"] + .btn-primary,
.get-start-btn + .btn-danger,
.btn-danger + .get-start-btn {
  margin-left: 24px !important;
}

/* Button groups: 8px gap within group, 16px gap between groups */
.btn-group .btn:not(:last-child) {
  margin-right: 8px;
}

.btn-group + .btn-group,
.btn-group + .btn {
  margin-left: 16px;
}

/* Quantity control groups: 12px gap between controls */
.add_to_cart + label,
label + .add_to_cart,
.decrease_cart + label,
label + .decrease_cart,
.qty-minus + .qty-control-display,
.qty-control-display + .qty-plus,
.qty-minus + .qty-display,
.qty-display + .qty-plus,
.item-qty-controls .qty-control-btn + .qty-control-display,
.item-qty-controls .qty-control-display + .qty-control-btn {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

/* Fast Order Entry quantity control groups */
.item-qty-controls {
  gap: 12px !important;
}

.item-controls .qty-widget {
  gap: 12px !important;
}

/* 5. DESTRUCTIVE ACTIONS - Red color only, visually separated, not dominant */
/* Destructive buttons: red only, subdued styling */
.btn-danger,
.delete_cart,
[class*="delete"],
[class*="remove"],
button[class*="delete"],
a[class*="delete"],
button[class*="remove"],
a[class*="remove"] {
  background: var(--color-error) !important;
  color: white !important;
  border: 1px solid var(--color-error) !important;
  /* Not visually dominant - same size as other buttons */
  min-height: 40px;
  font-weight: 500; /* Not bold to avoid dominance */
}

.btn-danger:hover,
.delete_cart:hover,
[class*="delete"]:hover,
[class*="remove"]:hover {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  /* Subtle hover effect - no dramatic transform */
  opacity: 0.9;
}

/* Ensure destructive buttons are visually separated */
.btn-danger,
.delete_cart,
[class*="delete"]:not([class*="delete_cart"]),
[class*="remove"] {
  /* Add visual separation through spacing (handled above) */
  /* Add subtle visual indicator */
  position: relative;
}

/* Destructive actions in button groups need extra spacing */
.btn-group .btn-danger,
.d-flex .btn-danger:not(:first-child),
.d-flex [class*="delete"]:not(:first-child) {
  margin-left: 24px !important;
}

/* Small destructive buttons (like delete icons) still need proper tap target */
.btn-danger.btn-sm,
.delete_cart.btn-sm,
[class*="delete"].btn-sm {
  min-width: 40px !important;
  min-height: 40px !important;
}

@media (max-width: 768px) {
  .btn-danger,
  .delete_cart,
  [class*="delete"],
  [class*="remove"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* Prevent accidental destructive actions - ensure adequate spacing from primary actions */
.price-holder .btn-danger,
.price-holder [class*="delete"],
.price-holder [class*="remove"] {
  margin-left: 24px !important;
}

/* Cart item delete buttons - ensure proper spacing */
.cart-item .delete_cart,
.cart-item [class*="delete"] {
  margin-left: 24px !important;
}

/* ========== CARDS ========== */
/* Card Padding Limits: max 20px (desktop), 16px (mobile) */
/* NOTE: .card must NOT have padding it breaks card-header/card-footer edge-to-edge layout.
   Only .card-body, .listing, .restaurant-card get padding. */
.card,
.listing,
.restaurant-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
  overflow: hidden;
}

.listing,
.restaurant-card {
  padding: var(--space-5); /* 20px desktop */
}

.card:hover,
.listing:hover,
.restaurant-card:hover {
  /* Removed transform for performance - subtle opacity change only */
  opacity: 0.95;
  box-shadow: var(--shadow-md);
}

.card-body {
  padding: var(--space-5); /* 20px desktop */
}

@media (max-width: 768px) {
  .listing,
  .restaurant-card,
  .card-body {
    padding: var(--space-4) !important; /* 16px mobile */
  }
}

/* Food Item Cards */
.food-item-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5); /* 20px desktop */
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.food-item-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--orderzy-brand-light);
}

@media (max-width: 768px) {
  .food-item-card {
    padding: var(--space-4) !important; /* 16px mobile */
  }
}

/* ========== FORM INPUTS ========== */
.form-control,
.field-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  transition: all var(--transition-base);
  font-size: var(--text-base);
}

.form-control:focus,
.field-input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--orderzy-brand);
  box-shadow: 0 0 0 3px rgba(242, 133, 0, 0.1);
}

/* ========== BADGES & PILLS ========== */
.badge {
  font-family: var(--font-heading);
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
}

.badge-primary {
  background: var(--orderzy-brand);
  color: white;
}

.badge-brand {
  background: var(--orderzy-brand);
  color: white;
}

.badge-accent {
  background: var(--orderzy-brand);
  color: white;
}

.badge-success {
  background: var(--color-success);
  color: white;
}

.badge-warning {
  background: var(--color-warning);
  color: white;
}

/* ========== CART BADGE (Sticky) ========== */
.cart-badge-sticky {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--orderzy-brand);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xl);
  z-index: 1000;
  cursor: pointer;
  transition: all var(--transition-base);
  font-family: var(--font-heading);
  font-weight: 600;
}

.cart-badge-sticky:hover {
  /* Removed transform for performance - opacity change only */
  opacity: 0.9;
}

/* Removed bounce animation for performance */
.cart-badge-sticky.bounce {
  /* Animation disabled - no visual noise */
}

/* ========== NAVBAR ========== */
.navbar {
  background: var(--color-bg-white);
  box-shadow: var(--shadow-sm);
  padding: 1rem 0;
}

.navbar-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--orderzy-brand) !important;
}

.nav-link {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--transition-base);
}

.nav-link:hover {
  color: var(--orderzy-brand);
}

/* ========== ALERTS ========== */
.alert {
  border-radius: var(--radius-md);
  border-left: 4px solid;
  padding: 1rem 1.25rem;
  font-family: var(--font-body);
}

.alert-info {
  background: #E3F2FD;
  border-color: var(--color-info);
  color: #1565C0;
}

.alert-success {
  background: #E8F5E9;
  border-color: var(--color-success);
  color: #2E7D32;
}

.alert-warning {
  background: #FFF3E0;
  border-color: var(--color-warning);
  color: #E65100;
}

.alert-danger,
.alert-error {
  background: #FFEBEE;
  border-color: var(--color-error);
  color: #C62828;
}

/* ========== LOADING SKELETON ========== */
.skeleton {
  /* Removed gradient and animation for performance */
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
}

/* ========== IMAGES ========== */
img {
  max-width: 100%;
  height: auto;
}

.img-rounded {
  border-radius: var(--radius-md);
}

.img-circle {
  border-radius: 50%;
}

/* Restaurant/Food Images */
.restaurant-img,
.food-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ========== TABLES ========== */
.table {
  font-family: var(--font-body);
}

.table thead th {
  font-family: var(--font-heading);
  font-weight: 600;
  background: var(--color-bg-light);
  border-bottom: 2px solid var(--color-border);
}

/* ========== UTILITIES ========== */
.text-primary {
  color: var(--orderzy-brand) !important;
}

.bg-primary {
  background: var(--orderzy-brand) !important;
}

.border-primary {
  border-color: var(--orderzy-brand) !important;
}

.text-brand {
  color: var(--orderzy-brand) !important;
}

.bg-brand {
  background: var(--orderzy-brand) !important;
}

.border-brand {
  border-color: var(--orderzy-brand) !important;
}

.bg-accent {
  background: var(--color-accent-bg) !important;
}

.text-accent {
  color: var(--color-accent) !important;
}

/* Spacing Utilities - 8px-Based Scale */
/* Section Padding Limits: max 48px (desktop), 32px (mobile) */
.section-spacing { 
  padding: var(--space-12) 0; /* 48px desktop */
}
.section-spacing-sm { 
  padding: var(--space-8) 0; /* 32px desktop */
}
.section-spacing-lg { 
  padding: var(--space-12) 0; /* 48px desktop (reduced from 100px) */
}

.card-spacing { 
  padding: var(--space-8); /* 32px */
}
.card-spacing-sm { 
  padding: var(--space-5); /* 20px */
}
.card-spacing-lg { 
  padding: var(--space-12); /* 48px */
}

.element-spacing { 
  margin-bottom: var(--space-8); /* 32px */
}
.element-spacing-sm { 
  margin-bottom: var(--space-4); /* 16px */
}
.element-spacing-lg { 
  margin-bottom: var(--space-12); /* 48px */
}

@media (max-width: 768px) {
  .section-spacing,
  .section-spacing-lg {
    padding: var(--space-8) 0 !important; /* 32px mobile */
  }
}

.mt-custom { margin-top: var(--space-lg); }
.mb-custom { margin-bottom: var(--space-lg); }
.py-custom { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.px-custom { padding-left: var(--space-lg); padding-right: var(--space-lg); }

/* Text Utilities */
.text-muted {
  color: var(--color-text-muted) !important;
}

.font-heading {
  font-family: var(--font-heading) !important;
}

/* ========== MOBILE OPTIMIZATIONS ========== */
@media (max-width: 768px) {
  :root {
    --text-3xl: 1.75rem;
    --text-2xl: 1.5rem;
    --text-xl: 1.25rem;
  }

  .btn-lg {
    width: 100%;
    justify-content: center;
  }

  .card,
  .listing,
  .restaurant-card {
    margin-bottom: var(--space-md);
  }
}

/* ========== ACCESSIBILITY ========== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--orderzy-brand);
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========== BRAND SPECIFIC OVERRIDES ========== */
/* Ensure Orderzy brand color is always correct */
.brand_name h5,
.brand-logo,
h1.hero-headline .brand-logo {
  color: var(--orderzy-brand) !important;
}

/* Links in brand color */
a.text-color,
.cs-color {
  color: var(--orderzy-brand) !important;
}

a.text-color:hover,
.cs-color:hover {
  color: var(--orderzy-brand-dark) !important;
}

/* Food item add/remove buttons */
/* Note: Size constraints handled in Button Safety section above */
.add_to_cart,
.decrease_cart {
  transition: all var(--transition-base);
  /* Ensure proper tap target - size enforced in safety section */
  cursor: pointer;
}

.add_to_cart:hover {
  background: var(--orderzy-brand) !important;
  color: white !important;
  border-color: var(--orderzy-brand) !important;
}

.decrease_cart:hover {
  background: var(--color-error) !important;
  color: white !important;
  border-color: var(--color-error) !important;
}

/* Quantity control display - ensure proper spacing */
[id^="qty-"],
.qty-control-display {
  min-width: 32px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 12px; /* Spacing from controls */
}

/* View menu buttons */
.viewmenu-btn {
  color: var(--orderzy-brand) !important;
  transition: all var(--transition-base);
}

.viewmenu-btn:hover {
  color: var(--orderzy-brand-dark) !important;
  text-decoration: none;
}

/* Status badges */
.restaurant-status.open,
.status-open {
  background: #D1FAE5 !important;
  color: #065F46 !important;
}

.restaurant-status.close,
.status-closed {
  background: #FEE2E2 !important;
  color: #991B1B !important;
}

/* Category buttons */
.catName.btn-primary {
  background: var(--orderzy-brand) !important;
  border-color: var(--orderzy-brand) !important;
}

.catName.btn-primary:hover {
  background: var(--orderzy-brand-dark) !important;
}

/* ========== GLOBAL FOUNDATION RULES ========== */
/* Enforce 8px-based spacing system globally */

/* Reduce excessive padding/margins to nearest 8px value */
* {
  /* Normalize spacing values to 8px scale */
}

/* Remove decorative borders (>1px) - enforce 1px max */
/* Target specific border utility classes, excluding borderless variants */
.card,
.listing,
.restaurant-card,
.btn,
input,
textarea,
select,
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-primary,
.border-secondary,
.border-success,
.border-danger,
.border-warning,
.border-info,
.border-light,
.border-dark,
.border-white {
  border-width: 1px !important;
}

/* Explicitly preserve borderless classes */
.table-borderless,
.borderless,
.border-0 {
  border-width: 0 !important;
}

/* Exception: Only allow 2px+ borders for specific focus states */
*:focus {
  outline-width: 2px;
}

/* NOTE: Removed aggressive gradient-stripping rule.
   It was nuking intentional gradients (e.g. cover header, offer banners). */

/* Replace gradient backgrounds with solid colors */
.bg-gradient-primary,
.bg-gradient-brand {
  background: var(--orderzy-brand) !important;
  background-image: none !important;
}

/* Clean white/neutral backgrounds - remove decorative colored blocks */
.page-section,
.main-section {
  background-color: var(--color-bg-white);
}

/* Exception: Allow light gray backgrounds for subtle sections */
.bg-light,
.bg-gray {
  background-color: var(--color-bg-light) !important;
}

/* Global padding reduction - enforce 8px scale */
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.p-6 { padding: var(--space-6) !important; }
.p-8 { padding: var(--space-8) !important; }
.p-12 { padding: var(--space-12) !important; }

/* Global margin reduction - enforce 8px scale */
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-5 { margin: var(--space-5) !important; }
.m-6 { margin: var(--space-6) !important; }
.m-8 { margin: var(--space-8) !important; }
.m-12 { margin: var(--space-12) !important; }

/* Replace all orange color variants with brand color */
/* Note: CSS attribute selectors only support substring matching, not regex */
/* These selectors match inline styles containing the color codes */
[style*="#f3623a"],
[style*="#F3623A"],
[style*="#FF8F7A"],
[style*="#ff8f7a"] {
  color: var(--orderzy-brand) !important;
}

/* Match common background style patterns */
[style*="background-color: #f3623a"],
[style*="background-color: #F3623A"],
[style*="background-color: #FF8F7A"],
[style*="background-color: #ff8f7a"],
[style*="background: #f3623a"],
[style*="background: #F3623A"],
[style*="background: #FF8F7A"],
[style*="background: #ff8f7a"],
[style*="background-color:#f3623a"],
[style*="background-color:#F3623A"],
[style*="background-color:#FF8F7A"],
[style*="background-color:#ff8f7a"],
[style*="background:#f3623a"],
[style*="background:#F3623A"],
[style*="background:#FF8F7A"],
[style*="background:#ff8f7a"] {
  background-color: var(--orderzy-brand) !important;
}

/* Match common border style patterns */
[style*="border-color: #f3623a"],
[style*="border-color: #F3623A"],
[style*="border-color: #FF8F7A"],
[style*="border-color: #ff8f7a"],
[style*="border: #f3623a"],
[style*="border: #F3623A"],
[style*="border: #FF8F7A"],
[style*="border: #ff8f7a"],
[style*="border-color:#f3623a"],
[style*="border-color:#F3623A"],
[style*="border-color:#FF8F7A"],
[style*="border-color:#ff8f7a"],
[style*="border:#f3623a"],
[style*="border:#F3623A"],
[style*="border:#FF8F7A"],
[style*="border:#ff8f7a"] {
  border-color: var(--orderzy-brand) !important;
}

/* 4. REMOVE ALL GRADIENT BACKGROUNDS */
[style*="gradient"],
[class*="gradient"],
.bg-gradient-primary,
.bg-gradient-brand,
.bg-gradient,
.skeleton {
  background-image: none !important;
  background: var(--color-bg-white) !important;
}

/* Fast Order Entry specific - remove gradients */
.item-qty-badge,
.order-item.manager {
  background-image: none !important;
}

/* 5. SIMPLIFY VISUAL STATES - Remove multiple states */
/* Cards: Only default and hover (no active, focus-within, etc.) */
.card:active,
.card:focus,
.card:focus-within {
  opacity: 1 !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Buttons: Simplify to default and hover only */
.btn:active,
.btn:focus {
  opacity: 1 !important;
  transform: none !important;
}

/* Quantity controls: Remove active state transforms */
.qty-control-btn:active,
.qty-control-btn:hover {
  transform: none !important;
  transition: opacity 150ms ease-in-out, background-color 150ms ease-in-out !important;
}

/* Fast Order Entry: Remove badge animation and transforms */
.item-qty-badge {
  animation: none !important;
}

.item-qty-badge.visible {
  display: flex;
  /* No animation - instant display */
}

/* Fast Order Entry quantity controls: Remove hover transforms */
.qty-control-btn:hover {
  transform: none !important;
  transition: opacity 150ms ease-in-out, background-color 150ms ease-in-out !important;
}

.qty-control-btn:active {
  transform: none !important;
  opacity: 1 !important;
}

/* 6. REMOVE DECORATIVE SHADOWS ON HOVER */
.card:hover,
.listing:hover,
.restaurant-card:hover,
.btn:hover {
  box-shadow: var(--shadow-sm) !important;
}

/* ========== LOCAL USABILITY FIXES ========== */
/* Fixes where global rules were insufficient */

/* 1. CART PAGE: Delete button too close to quantity controls */
/* Error Prevention: Increase separation to prevent accidental clicks */
.price-holder .delete_cart {
  margin-left: 24px !important; /* Minimum 24px gap from quantity controls */
  order: 999; /* Move to end of flex container */
}

.price-holder .d-flex.align-items-center + .delete_cart {
  margin-left: 24px !important;
}

/* Visual separation: Add subtle visual indicator */
.delete_cart {
  position: relative;
}

.delete_cart::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--color-border);
  opacity: 0.5;
}

/* 2. FAST ORDER ENTRY: Delete button in order panel */
/* Error Prevention: Increase separation from quantity controls */
.item-controls .item-delete {
  margin-left: 24px !important; /* Minimum 24px gap from quantity widget */
}

/* Add visual separator */
.item-controls .item-delete::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--color-border);
  opacity: 0.5;
}

/* 3. FAST ORDER ENTRY: Clear Items button separation */
/* Error Prevention: Increase gap from primary actions */
.action-btn.btn-danger-outline {
  margin-left: 24px !important; /* Minimum 24px gap from primary actions */
}

/* Visual separation for action button groups */
.action-btn.btn-secondary + .btn-danger-outline,
.action-btn:not(.btn-danger-outline) + .btn-danger-outline {
  margin-left: 24px !important;
  position: relative;
}

/* Add visual separator before destructive action */
.action-btn.btn-danger-outline::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--color-border);
  opacity: 0.5;
}

/* 4. FAST ORDER ENTRY: Quick add button click area */
/* Speed: Increase size and ensure proper z-index for easier targeting */
.item-quick-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  z-index: 10 !important; /* Ensure button is above card */
  position: relative !important; /* Ensure z-index works */
}

/* 5. VISUAL CLARITY: Error states and destructive actions */
/* Make error states more visible */
.errorlist,
.errorlist li {
  color: var(--color-error) !important;
  font-weight: 500;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Destructive buttons: Ensure they're visually distinct but not dominant */
.btn-danger,
.delete_cart,
.item-delete,
.btn-danger-outline {
  /* Already styled in global rules, but ensure consistency */
  border-color: var(--color-error) !important;
}

/* Disabled state clarity */
.btn:disabled,
button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* 6. FORM ERROR STATES: Visual clarity */
.form-control.is-invalid,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: var(--color-error) !important;
  border-width: 1px !important;
}

.form-control.is-invalid:focus {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.1) !important;
}

/* 7. CART: Visual separation for disabled states */
.btn-danger:disabled {
  background: var(--color-bg-light) !important;
  color: var(--color-text-muted) !important;
  border-color: var(--color-border) !important;
}

/* ========== PRINT STYLES ========== */
@media print {
  .navbar,
  .cart-badge-sticky,
  .btn,
  button {
    display: none;
  }
}

/* ============================================
   HOMEPAGE REDESIGN - V2
   Mobile-first, action-oriented
   ============================================ */

/* ========== NAVBAR V2 ========== */
.navbar-v2 {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 48px;
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.navbar-v2__logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--orderzy-brand);
  text-decoration: none;
}

.navbar-v2__logo:hover {
  color: var(--orderzy-brand);
  text-decoration: none;
}

.navbar-v2__links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.navbar-v2__link {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  padding: 6px 0;
}

.navbar-v2__link:hover {
  color: var(--orderzy-brand);
  text-decoration: none;
}

.navbar-v2__link--danger {
  color: #EF4444;
}

.navbar-v2__link--danger:hover {
  color: #DC2626;
}

.navbar-v2__refer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid #FDBA74;
  border-radius: 999px;
  background: #FFF7ED;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.navbar-v2__refer i { color: var(--orderzy-brand); }
.navbar-v2__refer:hover {
  background: var(--orderzy-brand);
  color: #FFFFFF;
  text-decoration: none;
}
.navbar-v2__refer:hover i { color: #FFFFFF; }

@media (max-width: 640px) {
  .navbar-v2__refer {
    padding: 6px 8px;
    font-size: 0;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    justify-content: center;
  }
  .navbar-v2__refer i { font-size: 14px; }
  .navbar-v2__refer-text { display: none; }
}

.navbar-v2__btn {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  background: var(--orderzy-brand);
  color: #FFFFFF;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s;
}

.navbar-v2__btn:hover {
  background: var(--orderzy-brand-dark);
  color: #FFFFFF;
  text-decoration: none;
}

.navbar-v2__cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #374151;
  text-decoration: none;
}

.navbar-v2__cart:hover {
  color: var(--orderzy-brand);
}

.navbar-v2__cart-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  background: var(--orderzy-brand);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.navbar-v2__cart-badge.hidden {
  display: none;
}

.navbar-v2__cart--empty {
  opacity: 0.5;
}

.navbar-v2__cart--empty:hover {
  opacity: 1;
}

/* ========== HOME HERO V2 - EMOTIONAL REDESIGN ========== */
.home-hero {
  background: var(--color-bg-light);
  padding: 24px 16px;
}

/* Warm gradient background for emotional appeal */
.home-hero--warm {
  background: linear-gradient(180deg, #FFF9F0 0%, #FFFFFF 100%);
  padding: 32px 16px 24px;
}

@media (min-width: 768px) {
  .home-hero {
    padding: 32px 24px;
  }

  .home-hero--warm {
    padding: 48px 24px 32px;
  }
}

.home-hero__inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.home-hero__headline {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.home-hero__headline--accent {
  color: var(--orderzy-brand);
  display: block;
}

@media (min-width: 768px) {
  .home-hero__headline {
    font-size: 36px;
    margin-bottom: 16px;
  }
}

@media (min-width: 1024px) {
  .home-hero__headline {
    font-size: 42px;
  }
}

.home-hero__subline {
  font-family: var(--font-body);
  font-size: 15px;
  color: #6B7280;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .home-hero__subline {
    font-size: 17px;
    margin-bottom: 28px;
  }
}

/* ========== TRUST BADGES ========== */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
  margin-top: 20px;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: #4B5563;
  background: rgba(255, 255, 255, 0.8);
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid #E5E7EB;
  transition: all 0.2s ease;
}

.trust-badge i {
  color: var(--orderzy-brand);
  font-size: 14px;
}

.trust-badge:hover {
  border-color: var(--orderzy-brand);
  background: #FFFFFF;
  transform: translateY(-1px);
}

@media (min-width: 768px) {
  .trust-badges {
    gap: 16px 20px;
    margin-top: 28px;
  }

  .trust-badge {
    font-size: 14px;
    padding: 10px 18px;
  }
}

/* ========== HOW IT WORKS SECTION ========== */
.how-it-works {
  background: #FFFFFF;
  padding: 32px 16px;
  border-bottom: 1px solid #F3F4F6;
}

@media (min-width: 768px) {
  .how-it-works {
    padding: 48px 24px;
  }
}

.how-it-works__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
  margin: 0 0 24px 0;
}

@media (min-width: 768px) {
  .how-it-works__title {
    font-size: 22px;
    margin-bottom: 32px;
  }
}

.how-it-works__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 600px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .how-it-works__steps {
    gap: 16px;
    max-width: 700px;
  }
}

.how-it-works__step {
  flex: 1;
  text-align: center;
  max-width: 140px;
}

@media (min-width: 768px) {
  .how-it-works__step {
    max-width: 180px;
  }
}

.how-it-works__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, #FFF5EB 0%, #FFE8D6 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.how-it-works__icon i {
  font-size: 22px;
  color: var(--orderzy-brand);
}

.how-it-works__step:hover .how-it-works__icon {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(242, 133, 0, 0.2);
}

@media (min-width: 768px) {
  .how-it-works__icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    margin-bottom: 16px;
  }

  .how-it-works__icon i {
    font-size: 28px;
  }
}

.how-it-works__step-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
}

@media (min-width: 768px) {
  .how-it-works__step-title {
    font-size: 16px;
    margin-bottom: 6px;
  }
}

.how-it-works__step-desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: #6B7280;
  margin: 0;
}

@media (min-width: 768px) {
  .how-it-works__step-desc {
    font-size: 14px;
  }
}

.how-it-works__arrow {
  color: #D1D5DB;
  font-size: 14px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .how-it-works__arrow {
    font-size: 18px;
  }
}

/* ========== SEARCH BAR V2 ========== */
.search-bar {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  height: 48px;
  overflow: hidden;
  transition: all 0.2s ease;
}

/* Focus glow effect for search bar */
.search-bar:focus-within {
  border-color: var(--orderzy-brand);
  box-shadow: 0 0 0 3px rgba(242, 133, 0, 0.12);
}

@media (min-width: 768px) {
  .search-bar {
    height: 52px;
    border-radius: 10px;
  }
}

.search-bar__icon {
  padding: 0 12px;
  color: #6B7280;
  font-size: 16px;
  flex-shrink: 0;
}

.search-bar__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: var(--font-body);
  padding: 0;
  min-width: 0;
}

.search-bar__input::placeholder {
  color: #6B7280;
}

.search-bar__btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--orderzy-brand);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.search-bar__btn:hover {
  background: var(--orderzy-brand-dark);
}

.search-bar__btn:active {
  transform: scale(0.95);
}

@media (min-width: 768px) {
  .search-bar__btn {
    width: 52px;
    height: 52px;
  }
}

.search-bar__location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
  color: #6B7280;
}

.search-bar__location i {
  color: var(--orderzy-brand);
}

.search-bar__location-change {
  background: none;
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  color: #6B7280;
  cursor: pointer;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  min-height: 32px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.search-bar__location-change:hover {
  color: var(--orderzy-brand);
  border-color: var(--orderzy-brand);
  background: rgba(242, 133, 0, 0.05);
}

.location-change-label {
  font-family: 'Open Sans', sans-serif;
}

@media (max-width: 480px) {
  .location-change-label {
    display: none;
  }

  .search-bar__location-change {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    border: none;
    padding: 8px;
  }
}

/* ========== RESTAURANT SECTION - COHESIVE DESIGN ========== */
/* Designed to flow seamlessly from Hero → How It Works → Restaurants */

.restaurant-section {
  padding: 32px 16px 48px;
  background: #FFFFFF;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .restaurant-section {
    padding: 48px 24px 64px;
  }
}

.restaurant-section__header {
  text-align: center;
  margin-bottom: 28px;
}

@media (min-width: 768px) {
  .restaurant-section__header {
    margin-bottom: 36px;
  }
}

/* Eyebrow text - matches "How Orderzy Works" visual language */
.restaurant-section__eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--orderzy-brand);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px 0;
}

@media (min-width: 768px) {
  .restaurant-section__eyebrow {
    font-size: 15px;
    margin-bottom: 10px;
  }
}

/* Section title - matches "How Orderzy Works" title */
.restaurant-section__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

@media (min-width: 768px) {
  .restaurant-section__title {
    font-size: 22px;
  }
}

/* Grid layout for 4+ restaurants */
.restaurant-section__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .restaurant-section__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .restaurant-section__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* Stacked layout for 1-3 restaurants */
.restaurant-section__list--stacked {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .restaurant-section__list--stacked {
    gap: 20px;
    max-width: 700px;
  }
}

/* Legacy support - keep old classes working */
.restaurant-grid {
  padding: 32px 16px 48px;
  background: #FFFFFF;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .restaurant-grid {
    padding: 48px 24px 64px;
  }
}

.restaurant-grid__header {
  text-align: center;
  margin-bottom: 28px;
}

@media (min-width: 768px) {
  .restaurant-grid__header {
    margin-bottom: 36px;
  }
}

.restaurant-grid__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

@media (min-width: 768px) {
  .restaurant-grid__title {
    font-size: 22px;
  }
}

.restaurant-grid__count {
  display: none; /* Hide count for cleaner look */
}

.restaurant-grid__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .restaurant-grid__items {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .restaurant-grid__items {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* ========== RESTAURANT CARD V2 ========== */
.restaurant-card-v2 {
  display: block;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1px solid rgba(0,0,0,0.04);
}

.restaurant-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.06);
  text-decoration: none;
  border-color: transparent;
}

.restaurant-card-v2__image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-bg-light);
  overflow: hidden;
}

.restaurant-card-v2__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Image zoom on card hover */
.restaurant-card-v2:hover .restaurant-card-v2__image img {
  transform: scale(1.05);
}

.restaurant-card-v2__status {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.restaurant-card-v2__status--open {
  background: #22C55E;
  color: #FFFFFF;
}

.restaurant-card-v2__status--closed {
  background: #EF4444;
  color: #FFFFFF;
}

.restaurant-card-v2__info {
  padding: 10px 12px 12px;
}

.restaurant-card-v2__name {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.restaurant-card-v2__meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: #6B7280;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== EMPTY STATE - COHESIVE ========== */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  max-width: 400px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .empty-state {
    padding: 64px 24px;
  }
}

.empty-state__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #FFF5EB 0%, #FFE8D6 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state__icon i {
  font-size: 28px;
  color: var(--orderzy-brand);
}

.empty-state__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 8px 0;
}

@media (min-width: 768px) {
  .empty-state__title {
    font-size: 20px;
  }
}

.empty-state__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: #6B7280;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.empty-state__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--orderzy-brand);
  text-decoration: none;
  padding: 12px 24px;
  border: 1px solid var(--orderzy-brand);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.empty-state__action:hover {
  background: var(--orderzy-brand);
  color: #FFFFFF;
  text-decoration: none;
}

.empty-state__suggestions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #E5E5E5;
}

.empty-state__suggestions-title {
  font-family: var(--font-body);
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 12px;
}

.empty-state__suggestion-link {
  display: block;
  padding: 10px 16px;
  margin-bottom: 6px;
  background: #F9FAFB;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #1A1A1A;
  text-decoration: none;
  transition: all 0.15s ease;
}

.empty-state__suggestion-link:hover {
  border-color: var(--orderzy-brand);
  color: var(--orderzy-brand);
  text-decoration: none;
}

.empty-state__status--open {
  font-size: 11px;
  font-weight: 600;
  color: #059669;
  margin-left: 8px;
}

/* ========== UTILITIES V2 ========== */
.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;
}

/* ============================================
   HOMEPAGE MERGE - ADAPTIVE LAYOUTS
   Stacked layout for 1-3 restaurants,
   Grid layout for 4+ restaurants
   ============================================ */

/* ========== STACKED RESTAURANT LIST ========== */
.restaurant-list--stacked {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ========== FULL-WIDTH CARD VARIANT ========== */
.restaurant-card-v2--full {
  display: flex;
  flex-direction: row;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.restaurant-card-v2--full .restaurant-card-v2__image {
  flex: 0 0 140px;
  aspect-ratio: auto;
  height: 120px;
}

@media (min-width: 480px) {
  .restaurant-card-v2--full .restaurant-card-v2__image {
    flex: 0 0 180px;
    height: 140px;
  }
}

@media (min-width: 768px) {
  .restaurant-card-v2--full .restaurant-card-v2__image {
    flex: 0 0 220px;
    height: 160px;
  }
}

.restaurant-card-v2--full .restaurant-card-v2__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 20px;
}

.restaurant-card-v2--full .restaurant-card-v2__name {
  font-size: 18px;
  margin-bottom: 8px;
  white-space: normal;
}

@media (min-width: 768px) {
  .restaurant-card-v2--full .restaurant-card-v2__name {
    font-size: 20px;
  }
}

.restaurant-card-v2--full .restaurant-card-v2__meta {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* ========== OFFER TAG (ribbon above title) ========== */
.restaurant-card-v2__offer-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #FFF7ED;
  color: #C2410C;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.2px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.restaurant-card-v2__offer-tag i {
  font-size: 9px;
  color: #EA580C;
}

.restaurant-card-v2--full .restaurant-card-v2__offer-tag {
  font-size: 12px;
  padding: 4px 10px;
}

/* ========== DISTANCE DISPLAY ========== */
.restaurant-card-v2__distance {
  color: #6B7280;
  font-size: 12px;
}

.restaurant-card-v2__distance::before {
  content: '\f3c5'; /* Font Awesome map marker */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 4px;
  color: var(--orderzy-brand);
}

.restaurant-card-v2--full .restaurant-card-v2__distance {
  font-size: 14px;
}

/* ========== INLINE STATUS BADGES ========== */
.restaurant-card-v2__status-inline {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.restaurant-card-v2__status-inline--open {
  background: #D1FAE5;
  color: #065F46;
}

.restaurant-card-v2__status-inline--closed {
  background: #FEE2E2;
  color: #991B1B;
}

.restaurant-card-v2--full .restaurant-card-v2__status-inline {
  font-size: 12px;
  padding: 3px 10px;
}

/* ========== NAVBAR PROFILE ICON ========== */
.navbar-v2__profile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #374151;
  text-decoration: none;
  font-size: 20px;
}

.navbar-v2__profile:hover {
  color: var(--orderzy-brand);
  text-decoration: none;
}

/* ========== META DISPLAY TWEAKS ========== */
.restaurant-card-v2__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Separator between meta items */
.restaurant-card-v2__distance + .restaurant-card-v2__status-inline::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  background: #9CA3AF;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* ========== MARKETING & INFO PAGES ========== */
/* Shared styles for: About, Contact, Privacy, Refund, Terms,
   Restaurant Software, Dine-In Ordering, Blog, City Landing */

/* Page wrapper  clean, centered, breathing room */
.oz-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 24px 72px;
  font-family: var(--font-body);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}
.oz-page--wide { max-width: 980px; }

/* Page title */
.oz-page__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.oz-page__subtitle {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-bottom: 32px;
}
.oz-page__lead {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  margin-bottom: 36px;
  line-height: 1.7;
}

/* Content card  white card with soft shadow (legal, about, contact) */
.oz-card {
  background: var(--color-bg-white);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03);
}

/* Prose  body content inside cards */
.oz-prose {
  font-family: var(--font-body);
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--color-text-secondary);
}
.oz-prose h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 28px 0 10px;
  letter-spacing: -0.2px;
}
.oz-prose h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 20px 0 8px;
}
.oz-prose p {
  margin-bottom: 14px;
}
.oz-prose ul, .oz-prose ol {
  padding-left: 20px;
  margin-bottom: 16px;
}
.oz-prose li {
  margin-bottom: 6px;
  line-height: 1.8;
}
.oz-prose a {
  color: var(--orderzy-brand);
  text-decoration: none;
  font-weight: 500;
}
.oz-prose a:hover {
  color: var(--orderzy-brand-dark);
  text-decoration: underline;
}
.oz-prose h4 {
  font-family: var(--font-heading);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 16px 0 6px;
}
.oz-prose strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Accent bar (positioning paragraphs) */
.oz-accent-bar {
  border-left: 3px solid var(--orderzy-brand);
  padding-left: 18px;
  margin-bottom: 32px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
}

/* Section label (small uppercase orange) */
.oz-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--orderzy-brand);
  margin-bottom: 8px;
}

/* Section heading */
.oz-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 3vw, 1.65rem);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 12px;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

/* Feature grid cards */
.oz-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.oz-feature-card {
  background: var(--color-bg-white);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  transition: transform 0.2s, box-shadow 0.2s;
}
.oz-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.oz-feature-card__title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--orderzy-brand);
  margin-bottom: 6px;
}
.oz-feature-card__text {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Comparison table */
.oz-table-wrap {
  background: var(--color-bg-white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  margin-bottom: 36px;
}
.oz-table-wrap table {
  font-family: var(--font-body);
  font-size: 0.88rem;
}
.oz-table-wrap thead {
  background: var(--orderzy-brand);
  color: #fff;
}
.oz-table-wrap thead th {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}
.oz-table-wrap tbody td {
  color: var(--color-text-secondary);
}

/* FAQ accordion */
.oz-faq details {
  background: var(--color-bg-white);
  border-radius: 10px;
  padding: 16px 22px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}
.oz-faq details:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.oz-faq details[open] {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.oz-faq summary {
  font-family: var(--font-heading);
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: 0.92rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s;
}
.oz-faq summary:hover { color: var(--orderzy-brand); }
.oz-faq summary::-webkit-details-marker { display: none; }
.oz-faq summary::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--orderzy-brand);
  font-weight: 300;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(242,133,0,0.08);
  flex-shrink: 0;
  transition: background 0.2s;
}
.oz-faq details[open] summary::after {
  content: '\2212';
  background: rgba(242,133,0,0.15);
}
.oz-faq details p {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.75;
  padding-right: 36px;
}

/* CTA box */
.oz-cta-box {
  text-align: center;
  background: linear-gradient(135deg, var(--orderzy-brand), var(--orderzy-brand-dark));
  color: #fff;
  border-radius: 18px;
  padding: 48px 28px;
  margin-top: 48px;
  box-shadow: 0 8px 32px rgba(242,133,0,0.2);
}
.oz-cta-box h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 10px;
}
.oz-cta-box p {
  color: rgba(255,255,255,0.88);
  margin-bottom: 28px;
  font-size: 1rem;
}
.oz-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--orderzy-brand);
  padding: 14px 32px;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.oz-cta-btn:hover {
  color: var(--orderzy-brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Breadcrumb */
.oz-breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.oz-breadcrumb li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--color-text-muted);
}
.oz-breadcrumb a {
  color: var(--orderzy-brand);
  text-decoration: none;
}
.oz-breadcrumb a:hover { text-decoration: underline; }

/* Blog card grid */
.oz-blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.oz-blog-card {
  background: var(--color-bg-white);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  transition: transform 0.2s, box-shadow 0.2s;
}
.oz-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}
.oz-blog-card__meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  font-family: var(--font-body);
}
.oz-blog-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 10px;
}
.oz-blog-card__title a {
  color: inherit;
  text-decoration: none;
}
.oz-blog-card__title a:hover { color: var(--orderzy-brand); }
.oz-blog-card__excerpt {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  flex-grow: 1;
  margin-bottom: 16px;
}
.oz-blog-card__link {
  font-family: var(--font-heading);
  color: var(--orderzy-brand);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}
.oz-blog-card__link:hover { text-decoration: underline; }

/* Contact form */
.oz-form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.oz-form-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: var(--color-text-primary);
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.oz-form-input:focus { border-color: var(--orderzy-brand); }
textarea.oz-form-input {
  height: auto;
  padding: 12px 16px;
  resize: vertical;
}
.oz-form-btn {
  width: 100%;
  height: 48px;
  background: var(--orderzy-brand);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(242,133,0,0.2);
}
.oz-form-btn:hover {
  background: var(--orderzy-brand-dark);
  transform: translateY(-1px);
}

/* Direct contact links row */
.oz-contact-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.oz-contact-links a {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--orderzy-brand);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.oz-contact-links a:hover { color: var(--orderzy-brand-dark); }

/* Responsive */
@media (max-width: 768px) {
  .oz-card { padding: 28px 20px; }
  .oz-page { padding: 32px 16px 60px; }
  .oz-feature-grid { grid-template-columns: 1fr; }
  .oz-blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .oz-page__title { font-size: 1.5rem; }
  .oz-card { padding: 24px 16px; }
}