/*
Theme Name: Rotari Bakes - Deliveroo Style Ordering
Theme URI: https://rotaribakes.com
Author: Rotari Bakes
Author URI: https://rotaribakes.com
Description: A modern Deliveroo-style food ordering theme for WooCommerce with order ahead, add-ons, scheduling, delivery radius, and minimum spend enforcement features. Fully customizable with admin controls.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rotari-bakes
Tags: food-ordering, woocommerce, restaurant, delivery, collection, bakery, custom-menu
*/

/* ========================================
   CSS Variables - Rotari Bakes Branding
   ======================================== */
:root {
  --fo-primary: #1a1a1a;
  --fo-primary-hover: #000000;
  --fo-primary-light: rgba(26, 26, 26, 0.1);
  --fo-secondary: #333333;
  --fo-text: #1a1a1a;
  --fo-text-light: #4a4a4a;
  --fo-text-muted: #6a6a6a;
  --fo-background: #ffffff;
  --fo-surface: #f5f5f5;
  --fo-border: #e0e0e0;
  --fo-success: #00a651;
  --fo-warning: #ff8100;
  --fo-error: #e02020;
  --fo-badge-vegetarian: #00a651;
  --fo-badge-popular: #ff8100;
  --fo-badge-new: #1a1a1a;
  --fo-badge-offer: #e02020;
  --fo-badge-spicy: #e02020;
  --fo-badge-vegan: #00a651;
  --fo-badge-gluten-free: #8b4513;
  --fo-radius: 8px;
  --fo-radius-lg: 12px;
  --fo-radius-xl: 16px;
  --fo-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --fo-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --fo-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.16);
  --fo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fo-transition: 0.2s ease;
}

/* ========================================
   Reset & Base Styles
   ======================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body.rotari-bakes {
  font-family: var(--fo-font-family);
  color: var(--fo-text);
  background: var(--fo-background);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  padding-top: 73px;
}

/* Fix: Adjust body padding when paused banner is visible */
body.rotari-bakes.ordering-paused {
  padding-top: 129px;
}

body.modal-open {
  overflow: hidden;
}

body.ordering-paused .fo-menu-item,
body.ordering-paused .fo-add-btn,
body.ordering-paused .fo-checkout-btn,
body.ordering-paused .fo-mobile-checkout-btn {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

body.ordering-paused .fo-add-btn {
  display: none !important;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--fo-primary);
  text-decoration: none;
  transition: color var(--fo-transition);
}

a:hover {
  color: var(--fo-primary-hover);
}

/* ========================================
   Container
   ======================================== */
.fo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .fo-container {
    padding: 0 24px;
  }
}

/* ========================================
   Site Header - Fixed at top
   ======================================== */
.fo-site-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  padding: 16px 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Fix: Header position when paused banner is visible */
body.ordering-paused .fo-site-header {
  top: 56px;
}

.fo-site-header .fo-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.fo-site-branding a {
  display: flex;
  align-items: center;
}

.fo-site-branding img {
  max-height: 45px;
  width: auto;
}

.fo-site-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fo-text);
}

.fo-site-title:hover {
  color: var(--fo-primary);
}

/* Navigation */
.fo-main-nav {
  display: none;
}

@media (min-width: 768px) {
  .fo-main-nav {
    display: block;
  }
}

.fo-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 32px;
}

.fo-nav-menu li a {
  color: var(--fo-text);
  font-weight: 500;
  padding: 8px 0;
  position: relative;
}

.fo-nav-menu li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--fo-primary);
  transition: width var(--fo-transition);
}

.fo-nav-menu li a:hover::after,
.fo-nav-menu li.current-menu-item a::after {
  width: 100%;
}

/* Mobile Menu Toggle */
.fo-mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

@media (min-width: 768px) {
  .fo-mobile-menu-toggle {
    display: none;
  }
}

.fo-hamburger {
  position: relative;
  width: 24px;
  height: 2px;
  background: var(--fo-text);
  transition: var(--fo-transition);
}

.fo-hamburger::before,
.fo-hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--fo-text);
  transition: var(--fo-transition);
}

.fo-hamburger::before {
  top: -8px;
}

.fo-hamburger::after {
  bottom: -8px;
}

/* Header Actions */
.fo-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.fo-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fo-text);
  border-radius: 50%;
  transition: background var(--fo-transition);
}

.fo-header-btn:hover {
  background: var(--fo-surface);
}

.fo-header-btn svg {
  width: 20px;
  height: 20px;
}

/* Account Dropdown */
.fo-account-dropdown {
  position: relative;
}

.fo-account-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--fo-background);
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius);
  box-shadow: var(--fo-shadow-lg);
  min-width: 180px;
  z-index: 1001;
  display: none;
  overflow: hidden;
}

.fo-account-dropdown.active .fo-account-menu {
  display: block;
}

.fo-account-menu a {
  display: block;
  padding: 12px 16px;
  color: var(--fo-text);
  font-size: 0.875rem;
  transition: background var(--fo-transition);
}

.fo-account-menu a:hover {
  background: var(--fo-surface);
}

/* Search Overlay */
.fo-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2001;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px 16px;
}

.fo-search-modal {
  background: var(--fo-background);
  width: 100%;
  max-width: 600px;
  border-radius: var(--fo-radius-lg);
  overflow: hidden;
  box-shadow: var(--fo-shadow-xl);
}

.fo-search-header {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--fo-border);
  gap: 12px;
}

.fo-search-input {
  flex: 1;
  border: none;
  font-size: 1rem;
  padding: 8px;
  outline: none;
  background: transparent;
}

.fo-search-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--fo-text-muted);
  padding: 4px;
  line-height: 1;
}

.fo-search-results {
  max-height: 400px;
  overflow-y: auto;
}

.fo-search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background var(--fo-transition);
}

.fo-search-result-item:hover {
  background: var(--fo-surface);
}

.fo-search-result-image {
  width: 48px;
  height: 48px;
  border-radius: var(--fo-radius);
  object-fit: cover;
}

.fo-search-result-info {
  flex: 1;
}

.fo-search-result-name {
  font-weight: 600;
  margin: 0 0 2px;
}

.fo-search-result-price {
  font-size: 0.875rem;
  color: var(--fo-text-light);
  margin: 0;
}

.fo-search-no-results {
  padding: 24px;
  text-align: center;
  color: var(--fo-text-muted);
}

/* ========================================
   Store Hero Image with Brand Info
   ======================================== */
.fo-store-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 400px;
  background-size: cover;
  background-position: center;
  position: relative;
}

@media (min-width: 768px) {
  .fo-store-hero {
    aspect-ratio: 21 / 9;
    max-height: 450px;
  }
}

.fo-store-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
  display: flex;
  align-items: flex-end;
  padding: 32px;
}

.fo-store-hero-overlay.fo-hero-centered {
  align-items: center;
  justify-content: center;
}

.fo-hero-brand-info {
  color: white;
  max-width: 600px;
}

.fo-hero-brand-info.fo-hero-brand-centered {
  text-align: center;
  max-width: 800px;
}

.fo-hero-brand-name {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
  .fo-hero-brand-name {
    font-size: 3rem;
  }
}

.fo-hero-brand-tagline {
  font-size: 1rem;
  opacity: 0.95;
  margin: 0 0 12px;
}

.fo-hero-brand-description {
  font-size: 0.9rem;
  opacity: 0.85;
  margin: 0;
  line-height: 1.6;
}

/* Placeholder Hero */
.fo-store-hero-placeholder {
  height: 200px;
  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.fo-store-hero-placeholder .fo-hero-brand-info {
  text-align: center;
  max-width: 800px;
}

/* ========================================
   Store Header - Menu Page
   ======================================== */
.fo-store-header {
  background: var(--fo-background);
  border-bottom: 1px solid var(--fo-border);
  padding: 20px 0;
}

.fo-store-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.fo-store-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--fo-radius);
  object-fit: cover;
  box-shadow: var(--fo-shadow);
}

.fo-store-details h1,
.fo-store-details h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--fo-text);
}

.fo-store-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--fo-text-light);
}

.fo-store-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.fo-store-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.fo-store-status.open::before {
  background: var(--fo-success);
}

.fo-store-status.closed::before {
  background: var(--fo-error);
}

.fo-delivery-time,
.fo-collection-time {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fo-text-muted);
  font-size: 0.875rem;
}

.fo-delivery-time svg,
.fo-collection-time svg {
  width: 16px;
  height: 16px;
}

.fo-collection-time {
  color: var(--fo-success);
}

/* ========================================
   Order Controls
   ======================================== */
.fo-order-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

/* ========================================
   Order Controls Two-Column Layout (PC)
   ======================================== */
@media (min-width: 768px) {
  .fo-order-controls {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
    align-items: start;
  }
  
  .fo-order-type-row {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  
  .fo-datetime-card {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    margin-bottom: 0;
  }
  
  .fo-promo-section {
    grid-column: 1 / -1;
  }
}

/* Order Type Row - Toggle + Reviews */
.fo-order-type-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fo-order-type-toggle {
  display: inline-flex;
  background: var(--fo-surface);
  border-radius: var(--fo-radius);
  padding: 4px;
  width: 100%;
}

.fo-reviews-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fo-text-muted);
  text-decoration: none;
  padding: 10px 16px;
  background: var(--fo-surface);
  border-radius: var(--fo-radius);
  transition: all var(--fo-transition);
  box-sizing: border-box;
}

.fo-reviews-link:hover {
  color: var(--fo-primary);
  background: var(--fo-primary-light);
}

.fo-reviews-link svg {
  width: 16px;
  height: 16px;
  color: #f5a623;
  fill: #f5a623;
}

/* Mobile: Stack order controls */
@media (max-width: 767px) {
  .fo-order-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .fo-order-type-row {
    flex-direction: row;
    align-items: stretch;
  }
  
  .fo-order-type-toggle {
    flex: 1;
  }
  
  .fo-reviews-link {
    padding: 10px 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  
  .fo-datetime-card {
    width: 100%;
  }
  
  .fo-postcode-check {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.fo-order-time-selector {
  display: inline-flex;
  background: var(--fo-surface);
  border-radius: var(--fo-radius);
  padding: 4px;
}

.fo-order-type-btn,
.fo-time-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fo-text-light);
  cursor: pointer;
  border-radius: calc(var(--fo-radius) - 2px);
  transition: all var(--fo-transition);
}

.fo-order-type-btn svg,
.fo-time-btn svg {
  width: 18px;
  height: 18px;
}

.fo-order-type-btn:hover,
.fo-time-btn:hover {
  color: var(--fo-text);
}

.fo-order-type-btn.active,
.fo-time-btn.active {
  background: var(--fo-background);
  color: var(--fo-text);
  box-shadow: var(--fo-shadow);
}

/* Schedule Picker */
.fo-schedule-picker {
  background: var(--fo-surface);
  border-radius: var(--fo-radius);
  padding: 16px;
  margin-bottom: 16px;
}

.fo-schedule-picker-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--fo-text);
}

.fo-next-slot-display {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--fo-background);
  border: 2px solid var(--fo-primary);
  border-radius: var(--fo-radius);
}

.fo-next-slot-icon {
  width: 24px;
  height: 24px;
  color: var(--fo-primary);
}

.fo-next-slot-info {
  flex: 1;
}

.fo-next-slot-label {
  font-size: 0.75rem;
  color: var(--fo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fo-next-slot-time {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fo-text);
}

/* Date/Time Card - Enhanced Design */
.fo-datetime-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 2px solid var(--fo-border);
  border-radius: var(--fo-radius-xl);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.fo-datetime-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fo-border);
}

.fo-datetime-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--fo-primary);
  border-radius: var(--fo-radius);
  color: white;
}

.fo-datetime-icon svg {
  width: 18px;
  height: 18px;
}

.fo-datetime-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fo-text);
}

.fo-datetime-required {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fo-error);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  background: rgba(224, 32, 32, 0.08);
  border-radius: 4px;
}

.fo-datetime-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.fo-datetime-field {
  flex: 1;
}

.fo-datetime-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fo-text-light);
  margin-bottom: 8px;
}

.fo-select-wrapper {
  position: relative;
}

.fo-select-wrapper select {
  width: 100%;
  padding: 14px 44px 14px 16px;
  border: 2px solid var(--fo-border);
  border-radius: var(--fo-radius);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fo-text);
  background: white;
  cursor: pointer;
  transition: all var(--fo-transition);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.fo-select-wrapper select:hover {
  border-color: var(--fo-text-muted);
}

.fo-select-wrapper select:focus {
  outline: none;
  border-color: var(--fo-primary);
  box-shadow: 0 0 0 3px var(--fo-primary-light);
}

.fo-select-wrapper select:disabled {
  background-color: var(--fo-surface);
  color: var(--fo-text-muted);
  cursor: not-allowed;
  border-color: var(--fo-border);
}

.fo-select-wrapper select:invalid,
.fo-select-wrapper select option[value=""] {
  color: var(--fo-text-muted);
}

.fo-select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--fo-text-muted);
  transition: color var(--fo-transition);
}

.fo-select-wrapper select:focus + .fo-select-arrow {
  color: var(--fo-primary);
}

/* Date/Time Summary */
.fo-datetime-summary {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(0, 166, 81, 0.08);
  border: 1px solid rgba(0, 166, 81, 0.2);
  border-radius: var(--fo-radius);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fo-success);
}

.fo-datetime-summary svg {
  flex-shrink: 0;
}

/* Delivery Message inside card */
.fo-datetime-card .fo-delivery-message {
  margin: 12px 0 0;
}

/* Delivery Message */
.fo-delivery-message {
  padding: 12px 16px;
  border-radius: var(--fo-radius);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.fo-delivery-message svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.fo-delivery-message.error {
  background: rgba(224, 32, 32, 0.08);
  color: var(--fo-error);
  border: 1px solid rgba(224, 32, 32, 0.15);
}

.fo-delivery-message.success {
  background: rgba(0, 166, 81, 0.08);
  color: var(--fo-success);
  border: 1px solid rgba(0, 166, 81, 0.15);
}

.fo-delivery-message.info {
  background: rgba(26, 26, 26, 0.04);
  color: var(--fo-text);
  border: 1px solid var(--fo-border);
}

@media (max-width: 600px) {
  .fo-datetime-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .fo-datetime-header {
    flex-wrap: wrap;
  }
  
  .fo-datetime-title {
    order: 2;
    flex-basis: 100%;
    margin-top: 8px;
  }
  
  .fo-datetime-required {
    order: 1;
  }
  
  .fo-select-wrapper select {
    padding: 12px 40px 12px 14px;
    font-size: 0.875rem;
  }
}

/* Postcode Check - Improved Styling */
.fo-postcode-check {
  background: linear-gradient(135deg, var(--fo-surface) 0%, rgba(26, 26, 26, 0.03) 100%);
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.fo-postcode-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fo-text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fo-postcode-label::before {
  content: '📍';
  font-size: 1rem;
}

.fo-postcode-form {
  display: flex;
  gap: 10px;
}

.fo-postcode-input {
  flex: 1;
  padding: 14px 16px;
  border: 2px solid var(--fo-border);
  border-radius: var(--fo-radius);
  font-size: 1rem;
  font-weight: 500;
  transition: all var(--fo-transition);
  text-transform: uppercase;
  background: var(--fo-background);
}

.fo-postcode-input::placeholder {
  text-transform: none;
  color: var(--fo-text-muted);
}

.fo-postcode-input:focus {
  outline: none;
  border-color: var(--fo-primary);
  box-shadow: 0 0 0 3px var(--fo-primary-light);
}

.fo-postcode-btn {
  padding: 14px 28px;
  background: var(--fo-primary);
  color: white;
  border: none;
  border-radius: var(--fo-radius);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all var(--fo-transition);
  white-space: nowrap;
}

.fo-postcode-btn:hover {
  background: var(--fo-primary-hover);
  transform: translateY(-1px);
}

.fo-postcode-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.fo-postcode-result {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: var(--fo-radius);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fo-postcode-result.success {
  background: rgba(0, 166, 81, 0.1);
  color: var(--fo-success);
  border: 1px solid rgba(0, 166, 81, 0.2);
}

.fo-postcode-result.error {
  background: rgba(224, 32, 32, 0.1);
  color: var(--fo-error);
  border: 1px solid rgba(224, 32, 32, 0.2);
}

.fo-postcode-result svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .fo-postcode-form {
    flex-direction: column;
  }
  
  .fo-postcode-btn {
    width: 100%;
  }
}

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

.fo-postcode-result {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: var(--fo-radius);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fo-postcode-result svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.fo-postcode-result.success {
  background: rgba(0, 166, 81, 0.1);
  color: var(--fo-success);
}

.fo-postcode-result.error {
  background: rgba(224, 32, 32, 0.1);
  color: var(--fo-error);
}

/* Collection Address */
.fo-collection-address {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--fo-surface);
  border-radius: var(--fo-radius);
  margin-bottom: 16px;
}

.fo-collection-address-icon {
  width: 24px;
  height: 24px;
  color: var(--fo-primary);
}

.fo-collection-address-text strong {
  display: block;
  margin-bottom: 4px;
}

.fo-collection-address-text p {
  margin: 0;
  color: var(--fo-text-light);
  font-size: 0.875rem;
}

/* ========================================
   Category Navigation - Sticky
   ======================================== */
.fo-category-nav {
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  position: -webkit-sticky;
  position: sticky;
  top: 73px;
  z-index: 90;
  overflow: hidden;
}

/* Fix: Adjust sticky position when paused banner is visible */
body.ordering-paused .fo-category-nav {
  top: 129px;
}

.fo-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.fo-category-list::-webkit-scrollbar {
  display: none;
}

.fo-category-link {
  display: block;
  white-space: nowrap;
  padding: 8px 16px;
  background: var(--fo-surface);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fo-text);
  transition: all var(--fo-transition);
}

.fo-category-link:hover {
  background: var(--fo-primary-light);
  color: var(--fo-primary);
}

.fo-category-link.active {
  background: var(--fo-primary);
  color: white;
}

/* ========================================
   Main Layout
   ======================================== */
.fo-main-layout {
  display: grid;
  gap: 32px;
  padding: 24px 0;
}

@media (min-width: 992px) {
  .fo-main-layout {
    grid-template-columns: 1fr 380px;
    align-items: start;
  }
}

/* ========================================
   Menu Sections
   ======================================== */
.fo-menu-section {
  margin-bottom: 32px;
}

.fo-menu-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fo-border);
}

.fo-menu-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--fo-background);
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius);
  overflow: hidden;
}


/* ========================================
   Menu Item Card
   ======================================== */
.fo-menu-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--fo-background);
  cursor: pointer;
  transition: background var(--fo-transition);
  border-bottom: 1px solid var(--fo-border);
}

.fo-menu-item:last-child {
  border-bottom: none;
}

.fo-menu-item:hover {
  background: var(--fo-surface);
}

.fo-menu-item.fo-unavailable {
  opacity: 0.6;
  cursor: not-allowed;
}

.fo-menu-item-content {
  flex: 1;
  min-width: 0;
}

.fo-menu-item-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

.fo-menu-item-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--fo-text);
}

.fo-menu-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.fo-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
  color: white;
  background: var(--fo-primary);
}

.fo-badge-vegetarian { background: var(--fo-badge-vegetarian) !important; }
.fo-badge-vegan { background: var(--fo-badge-vegan) !important; }
.fo-badge-popular { background: var(--fo-badge-popular) !important; }
.fo-badge-new { background: var(--fo-badge-new) !important; }
.fo-badge-offer, .fo-badge-on-offer { background: var(--fo-badge-offer) !important; }
.fo-badge-spicy { background: var(--fo-badge-spicy) !important; }
.fo-badge-gluten-free { background: var(--fo-badge-gluten-free) !important; }
.fo-badge-halal { background: #2e7d32 !important; }
.fo-badge-dairy-free { background: #0277bd !important; }
.fo-badge-nut-free { background: #6d4c41 !important; }
.fo-badge-bestseller { background: #d32f2f !important; }
.fo-badge-chef-special, .fo-badge-chefs-special { background: #7b1fa2 !important; }

.fo-menu-item-description {
  font-size: 0.875rem;
  color: var(--fo-text-light);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fo-menu-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fo-menu-item-price {
  font-weight: 600;
  color: var(--fo-text);
}

.fo-menu-item-price-sale {
  color: var(--fo-error);
}

.fo-menu-item-price-original {
  text-decoration: line-through;
  color: var(--fo-text-muted);
  font-weight: 400;
  font-size: 0.875rem;
  margin-left: 4px;
}

.fo-unavailable-label,
.fo-soldout-label {
  font-size: 0.75rem;
  color: var(--fo-error);
  font-weight: 600;
  background: rgba(224, 32, 32, 0.1);
  padding: 4px 12px;
  border-radius: var(--fo-radius);
}

/* Menu Item Image */
.fo-menu-item-image-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
}

@media (min-width: 768px) {
  .fo-menu-item-image-wrapper {
    width: 128px;
    height: 128px;
  }
}

.fo-menu-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--fo-radius);
}

.fo-add-btn {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fo-primary);
  color: white;
  border: 3px solid var(--fo-background);
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--fo-transition);
  box-shadow: var(--fo-shadow);
}

.fo-add-btn:hover {
  background: var(--fo-primary-hover);
  transform: scale(1.1);
}

/* ========================================
   Basket (Desktop Sidebar)
   ======================================== */
.fo-basket {
  display: none;
  position: sticky;
  top: 100px;
  background: var(--fo-background);
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius-lg);
  overflow: hidden;
  box-shadow: var(--fo-shadow);
}

@media (min-width: 992px) {
  .fo-basket {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
  }
}

/* Fix: Adjust basket sticky position when paused banner is visible */
body.ordering-paused .fo-basket {
  top: 156px;
}

.fo-basket-header {
  padding: 20px;
  border-bottom: 1px solid var(--fo-border);
}

.fo-basket-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.fo-basket-order-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--fo-text-light);
}

.fo-basket-order-info svg {
  width: 16px;
  height: 16px;
}

.fo-basket-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  min-height: 120px;
}

.fo-basket-empty {
  text-align: center;
  padding: 24px;
  color: var(--fo-text-muted);
}

.fo-basket-empty svg {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  color: var(--fo-border);
}

.fo-basket-item {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--fo-border);
  align-items: center;
}

.fo-basket-item:last-child {
  border-bottom: none;
}

.fo-basket-item-image {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.fo-basket-item-qty {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fo-surface);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.fo-basket-item-details {
  flex: 1;
  min-width: 0;
}

.fo-basket-item-name {
  font-weight: 500;
  margin-bottom: 2px;
  font-size: 0.875rem;
}

.fo-basket-item-extras {
  font-size: 0.7rem;
  color: var(--fo-text-muted);
}

.fo-basket-item-price {
  font-weight: 600;
  font-size: 0.875rem;
}

.fo-basket-item-remove {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--fo-text-muted);
  transition: color var(--fo-transition);
}

.fo-basket-item-remove:hover {
  color: var(--fo-error);
}

.fo-basket-item-remove svg {
  width: 16px;
  height: 16px;
}

.fo-basket-footer {
  padding: 20px;
  border-top: 1px solid var(--fo-border);
  background: var(--fo-surface);
}

.fo-basket-subtotal {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 8px;
}

.fo-basket-delivery-fee {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--fo-text-light);
  margin-bottom: 8px;
}

.fo-basket-total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--fo-border);
}

.fo-basket-minimum {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 129, 0, 0.1);
  border-radius: var(--fo-radius);
  font-size: 0.875rem;
  color: var(--fo-warning);
  margin-bottom: 12px;
}

.fo-basket-minimum svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.fo-basket-minimum.met {
  background: rgba(0, 166, 81, 0.1);
  color: var(--fo-success);
}

.fo-checkout-btn {
  width: 100%;
  padding: 16px;
  background: var(--fo-primary);
  color: white;
  border: none;
  border-radius: var(--fo-radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--fo-transition);
}

.fo-checkout-btn:hover:not(:disabled) {
  background: var(--fo-primary-hover);
}

.fo-checkout-btn:disabled {
  background: var(--fo-border);
  color: var(--fo-text-muted);
  cursor: not-allowed;
}

/* ========================================
   Cart Popup Modal
   ======================================== */
.fo-cart-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

@media (min-width: 768px) {
  .fo-cart-popup-overlay {
    align-items: center;
  }
}

.fo-cart-popup {
  background: var(--fo-background);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  border-radius: var(--fo-radius-xl) var(--fo-radius-xl) 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

@media (min-width: 768px) {
  .fo-cart-popup {
    border-radius: var(--fo-radius-xl);
    max-height: 80vh;
  }
}

.fo-cart-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--fo-border);
}

.fo-cart-popup-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.fo-cart-popup-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--fo-text-muted);
  padding: 4px;
  line-height: 1;
}

.fo-cart-popup-items {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.fo-cart-popup-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--fo-text-muted);
}

.fo-cart-popup-empty svg {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  color: var(--fo-border);
}

.fo-cart-popup-footer {
  padding: 20px;
  border-top: 1px solid var(--fo-border);
  background: var(--fo-surface);
}

/* Cart Popup Clear Button */
.fo-cart-popup-clear {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--fo-error);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--fo-radius);
  margin-right: auto;
}

.fo-cart-popup-clear:hover {
  background: rgba(224, 32, 32, 0.1);
}

/* ========================================
   Mobile Basket Bar
   ======================================== */
.fo-mobile-basket-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--fo-primary);
  color: white;
  padding: 16px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
}

@media (min-width: 992px) {
  .fo-mobile-basket-bar {
    display: none !important;
  }
}

.fo-mobile-basket-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fo-mobile-basket-count {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: var(--fo-primary);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50%;
}

.fo-mobile-basket-text {
  font-size: 0.875rem;
}

.fo-mobile-basket-total {
  font-weight: 700;
  font-size: 1rem;
}

.fo-mobile-checkout-btn {
  background: white;
  color: var(--fo-primary);
  border: none;
  padding: 12px 24px;
  border-radius: var(--fo-radius);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--fo-transition);
}

.fo-mobile-checkout-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ========================================
   Product Modal
   ======================================== */
.fo-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

@media (min-width: 768px) {
  .fo-modal-overlay {
    align-items: center;
    padding: 24px;
  }
}

.fo-modal {
  background: var(--fo-background);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  border-radius: var(--fo-radius-xl) var(--fo-radius-xl) 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

@media (min-width: 768px) {
  .fo-modal {
    border-radius: var(--fo-radius-xl);
    max-height: 85vh;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.fo-modal-image-wrapper {
  position: relative;
  height: 200px;
  background: var(--fo-surface);
}

.fo-modal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fo-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: var(--fo-shadow);
  color: var(--fo-text);
}

.fo-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.fo-modal-header {
  margin-bottom: 12px;
}

.fo-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.fo-modal-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fo-text);
  margin: 0;
}

.fo-modal-description {
  font-size: 0.875rem;
  color: var(--fo-text-light);
  margin: 0 0 16px;
  line-height: 1.6;
}

.fo-modal-allergens {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 129, 0, 0.1);
  border-radius: var(--fo-radius);
  margin-bottom: 16px;
  font-size: 0.875rem;
  color: var(--fo-warning);
}

.fo-modal-allergens svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Addon Groups */
.fo-addon-group {
  margin-bottom: 20px;
}

.fo-addon-group-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.fo-addon-group-subtitle {
  font-size: 0.75rem;
  color: var(--fo-text-muted);
  margin: 0 0 12px;
}

.fo-addon-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fo-addon-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--fo-surface);
  border-radius: var(--fo-radius);
  cursor: pointer;
  transition: background var(--fo-transition);
}

.fo-addon-option:hover {
  background: var(--fo-border);
}

.fo-addon-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--fo-primary);
}

.fo-addon-label {
  flex: 1;
  font-weight: 500;
}

.fo-addon-price {
  color: var(--fo-text-light);
  font-size: 0.875rem;
}

.fo-addon-option-qty {
  flex-wrap: wrap;
}

.fo-addon-qty-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  background: var(--fo-background);
  border-radius: 20px;
  padding: 2px 4px;
  border: 1px solid var(--fo-border);
}

.fo-addon-qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--fo-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--fo-transition);
  line-height: 1;
  padding: 0;
}

.fo-addon-qty-btn:hover {
  opacity: 0.85;
}

.fo-addon-qty-value {
  min-width: 20px;
  text-align: center;
  font-weight: 600;
  font-size: 0.875rem;
}

.fo-modal-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-top: 1px solid var(--fo-border);
  background: var(--fo-surface);
}

.fo-modal-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--fo-background);
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius);
  padding: 4px;
}

.fo-modal-qty-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--fo-text);
  transition: background var(--fo-transition);
  border-radius: calc(var(--fo-radius) - 4px);
}

.fo-modal-qty-btn:hover {
  background: var(--fo-surface);
}

.fo-modal-qty-value {
  min-width: 24px;
  text-align: center;
  font-weight: 600;
}

.fo-modal-add-btn {
  flex: 1;
  padding: 16px 24px;
  background: var(--fo-primary);
  color: white;
  border: none;
  border-radius: var(--fo-radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fo-transition);
}

.fo-modal-add-btn:hover {
  background: var(--fo-primary-hover);
}

/* Required Addon Styles */
.fo-addon-required-badge {
  display: inline-block;
  background: var(--fo-error);
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.fo-addon-group.fo-addon-error {
  border: 2px solid var(--fo-error);
  border-radius: var(--fo-radius);
  padding: 12px;
  margin: -12px;
  margin-bottom: 8px;
  animation: shake 0.3s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ========================================
   Toast Notifications
   ======================================== */
.fo-toast-container {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

@media (min-width: 992px) {
  .fo-toast-container {
    bottom: 24px;
  }
}

.fo-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--fo-text);
  color: white;
  border-radius: var(--fo-radius);
  box-shadow: var(--fo-shadow-lg);
  animation: toastIn 0.3s ease;
  pointer-events: auto;
}

.fo-toast.hiding {
  animation: toastOut 0.3s ease forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-20px); }
}

.fo-toast-icon {
  display: flex;
}

.fo-toast-icon svg {
  width: 20px;
  height: 20px;
}

.fo-toast.success .fo-toast-icon { color: var(--fo-success); }
.fo-toast.error .fo-toast-icon { color: var(--fo-error); }
.fo-toast.warning .fo-toast-icon { color: var(--fo-warning); }

/* ========================================
   Paused / Closed Overlay
   ======================================== */
.fo-paused-banner {
  background: #1a1a1a;
  color: white;
  padding: 16px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}

.fo-paused-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.fo-paused-banner svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.fo-paused-banner-text {
  font-weight: 500;
}

.fo-closed-banner {
  background: var(--fo-warning);
  color: white;
  padding: 12px 16px;
}

.fo-closed-banner-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
}

.fo-closed-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.fo-closed-modal {
  background: white;
  padding: 48px;
  border-radius: var(--fo-radius-xl);
  text-align: center;
  max-width: 400px;
}

.fo-closed-icon {
  width: 64px;
  height: 64px;
  color: var(--fo-text-muted);
  margin-bottom: 24px;
}

.fo-closed-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 12px;
}

.fo-closed-message {
  color: var(--fo-text-light);
  margin: 0;
}

/* ========================================
   Footer
   ======================================== */
.fo-site-footer {
  background: var(--fo-text);
  color: white;
  padding: 48px 0 24px;
  margin-top: 64px;
  /* Fix: Add padding for mobile basket bar */
  padding-bottom: 100px;
}

@media (min-width: 992px) {
  .fo-site-footer {
    padding-bottom: 24px;
  }
}

.fo-footer-content {
  display: grid;
  gap: 32px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .fo-footer-content {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.fo-footer-info h3,
.fo-footer-title {
  font-size: 1.25rem;
  margin: 0 0 12px;
}

.fo-footer-info p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 8px;
  font-size: 0.875rem;
}

.fo-footer-info a {
  color: rgba(255, 255, 255, 0.8);
}

.fo-footer-info a:hover {
  color: white;
}

.fo-footer-hours h4 {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.5);
}

.fo-hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fo-hours-list li {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  padding: 4px 0;
}

.fo-footer-links h4 {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.5);
}

.fo-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fo-footer-menu li {
  margin-bottom: 8px;
}

.fo-footer-menu a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
}

.fo-footer-menu a:hover {
  color: white;
}

.fo-footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.fo-footer-bottom p {
  margin: 0 0 4px;
}

.fo-footer-bottom a {
  color: rgba(255, 255, 255, 0.7);
}

.fo-footer-bottom a:hover {
  color: white;
}

/* ========================================
   404 Page
   ======================================== */
.fo-404-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 48px 16px;
}

.fo-404-content {
  text-align: center;
  max-width: 400px;
}

.fo-404-icon {
  width: 80px;
  height: 80px;
  color: var(--fo-text-muted);
  margin-bottom: 24px;
}

.fo-404-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--fo-text);
}

.fo-404-message {
  color: var(--fo-text-light);
  margin: 0 0 24px;
  line-height: 1.6;
}

.fo-404-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fo-primary);
  color: white;
  padding: 14px 28px;
  border-radius: var(--fo-radius);
  font-weight: 600;
  transition: background var(--fo-transition);
}

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

.fo-404-btn svg {
  width: 20px;
  height: 20px;
}

/* ========================================
   Page & Post Styles
   ======================================== */
.fo-page,
.fo-main-content {
  padding: 32px 0;
}

.fo-page-header {
  margin-bottom: 24px;
}

.fo-page-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  color: var(--fo-text);
}

.fo-page-content {
  line-height: 1.8;
  color: var(--fo-text-light);
}

.fo-page-content h2,
.fo-page-content h3,
.fo-page-content h4 {
  color: var(--fo-text);
  margin: 24px 0 12px;
}

.fo-page-content p {
  margin: 0 0 16px;
}

.fo-page-content a {
  color: var(--fo-primary);
  text-decoration: underline;
}

.fo-page-content ul,
.fo-page-content ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.fo-page-content li {
  margin-bottom: 8px;
}

/* Posts Grid */
.fo-posts-grid {
  display: grid;
  gap: 24px;
}

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

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

.fo-post-card {
  background: var(--fo-background);
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--fo-transition);
}

.fo-post-card:hover {
  box-shadow: var(--fo-shadow-lg);
}

.fo-post-thumbnail img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.fo-post-content {
  padding: 20px;
}

.fo-post-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.fo-post-title a {
  color: var(--fo-text);
}

.fo-post-title a:hover {
  color: var(--fo-primary);
}

.fo-post-meta {
  font-size: 0.75rem;
  color: var(--fo-text-muted);
  margin-bottom: 8px;
}

.fo-post-excerpt {
  font-size: 0.875rem;
  color: var(--fo-text-light);
  line-height: 1.6;
}

.fo-no-posts {
  text-align: center;
  padding: 48px;
  color: var(--fo-text-muted);
}

/* ========================================
   WooCommerce Overrides
   ======================================== */
.woocommerce-notices-wrapper {
  margin: 16px 0;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  padding: 16px 20px;
  border-radius: var(--fo-radius);
  margin-bottom: 16px;
  list-style: none;
}

.woocommerce-message {
  background: rgba(0, 166, 81, 0.1);
  color: var(--fo-success);
  border-left: 4px solid var(--fo-success);
}

.woocommerce-error {
  background: rgba(224, 32, 32, 0.1);
  color: var(--fo-error);
  border-left: 4px solid var(--fo-error);
}

.woocommerce-info {
  background: rgba(255, 129, 0, 0.1);
  color: var(--fo-warning);
  border-left: 4px solid var(--fo-warning);
}

/* ========================================
   WooCommerce Cart Page
   ======================================== */
.woocommerce-cart .fo-main-content {
  padding: 32px 0;
}

.woocommerce-cart table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: var(--fo-background);
  border-radius: var(--fo-radius-lg);
  overflow: hidden;
  box-shadow: var(--fo-shadow);
}

.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid var(--fo-border);
}

.woocommerce-cart table.shop_table thead th {
  background: var(--fo-surface);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fo-text-muted);
}

.woocommerce-cart .product-thumbnail img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--fo-radius);
}

.woocommerce-cart .product-name a {
  font-weight: 600;
  color: var(--fo-text);
}

.woocommerce-cart .quantity input {
  width: 60px;
  padding: 8px 12px;
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius);
  text-align: center;
}

.woocommerce-cart .cart_totals {
  background: var(--fo-surface);
  border-radius: var(--fo-radius-lg);
  padding: 24px;
  margin-top: 24px;
}

.woocommerce-cart .cart_totals h2 {
  font-size: 1.25rem;
  margin: 0 0 16px;
}

.woocommerce-cart .cart_totals table {
  width: 100%;
}

.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
  padding: 12px 0;
  border-bottom: 1px solid var(--fo-border);
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  background: var(--fo-primary);
  color: white;
  text-align: center;
  padding: 16px;
  border-radius: var(--fo-radius);
  font-weight: 600;
  font-size: 1rem;
  margin-top: 16px;
  border: none;
  cursor: pointer;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
  background: var(--fo-primary-hover);
}

/* ========================================
   WooCommerce Container Override
   ======================================== */
.fo-woocommerce-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .fo-woocommerce-container {
    padding: 0 24px;
  }
}

.fo-woocommerce-page {
  min-height: calc(100vh - 200px);
}

/* ========================================
   Custom Checkout Page Layout
   Full-width Classic WooCommerce Checkout
   ======================================== */

/* Custom checkout page container */
.rb-checkout-page {
  width: 100%;
  min-height: calc(100vh - 200px);
  padding: 40px 0;
  background: var(--fo-background);
}

.rb-checkout-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.rb-checkout-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 32px;
  color: var(--fo-text);
}

/* Empty cart notice */
.rb-empty-cart-notice {
  text-align: center;
  padding: 48px 24px;
  background: var(--fo-surface);
  border-radius: var(--fo-radius-lg);
}

.rb-empty-cart-notice p {
  font-size: 1.125rem;
  color: var(--fo-text-muted);
  margin: 0 0 24px;
}

.rb-continue-shopping {
  display: inline-block;
  background: var(--fo-primary);
  color: white;
  padding: 12px 24px;
  border-radius: var(--fo-radius);
  font-weight: 600;
  transition: background var(--fo-transition);
}

.rb-continue-shopping:hover {
  background: var(--fo-primary-hover);
  color: white;
}

/* Classic WooCommerce Checkout Form */
.woocommerce-checkout {
  width: 100%;
  max-width: 100%;
}

/* Two-column layout for customer details */
@media (min-width: 992px) {
  .woocommerce-checkout .col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 32px;
  }
  
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    width: 100%;
    float: none;
    padding: 0;
  }
}

/* Mobile: Single column */
@media (max-width: 991px) {
  .rb-checkout-container {
    padding: 0 16px;
  }
  
  .rb-checkout-title {
    font-size: 1.5rem;
    margin-bottom: 24px;
  }
  
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    margin-bottom: 24px;
  }
}

.woocommerce-checkout h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 24px 0 16px;
  color: var(--fo-text);
}

.woocommerce-checkout h3:first-child {
  margin-top: 0;
}

.woocommerce-checkout .form-row {
  margin-bottom: 16px;
}

.woocommerce-checkout label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 0.875rem;
  color: var(--fo-text);
}

.woocommerce-checkout .required {
  color: var(--fo-error);
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce-checkout select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius);
  font-size: 1rem;
  font-family: inherit;
  background: var(--fo-background);
  transition: border-color var(--fo-transition), box-shadow var(--fo-transition);
}

.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
  outline: none;
  border-color: var(--fo-primary);
  box-shadow: 0 0 0 3px var(--fo-primary-light);
}

.woocommerce-checkout .button,
.woocommerce-checkout #place_order {
  display: block;
  width: 100%;
  background: var(--fo-primary);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: var(--fo-radius);
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fo-transition), transform var(--fo-transition);
}

.woocommerce-checkout .button:hover,
.woocommerce-checkout #place_order:hover {
  background: var(--fo-primary-hover);
  transform: translateY(-1px);
}

.woocommerce-checkout .button:disabled,
.woocommerce-checkout #place_order:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Order Review Section */
#order_review_heading {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--fo-border);
}

.woocommerce-checkout-review-order {
  background: var(--fo-surface);
  border-radius: var(--fo-radius-lg);
  padding: 24px;
  margin-top: 16px;
}

/* Order Review Table */
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--fo-border);
  text-align: left;
  vertical-align: top;
}

.woocommerce-checkout-review-order-table thead th {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.woocommerce-checkout-review-order-table tbody .product-name {
  font-weight: 500;
}

.woocommerce-checkout-review-order-table tfoot th {
  font-weight: 600;
}

.woocommerce-checkout-review-order-table tfoot td {
  text-align: right;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  font-size: 1.25rem;
  font-weight: 700;
  border-bottom: none;
  padding-top: 16px;
}

/* Cart addons display */
.rb-checkout-addons,
.rb-cart-addons {
  font-size: 12px;
  color: var(--fo-text-muted);
  margin-top: 4px;
  font-style: italic;
}

/* ========================================
   Fallback: WooCommerce Blocks Override
   In case Blocks checkout is still used
   ======================================== */
.is-layout-constrained,
[class*="wp-container-"] {
  max-width: none !important;
}

body.woocommerce-checkout .wp-block-woocommerce-checkout {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 32px 24px !important;
}

body.woocommerce-checkout .wc-block-checkout {
  display: grid !important;
  max-width: 100% !important;
}

@media (min-width: 992px) {
  body.woocommerce-checkout .wc-block-checkout {
    grid-template-columns: 1fr 380px !important;
    gap: 48px !important;
  }
}

@media (max-width: 991px) {
  body.woocommerce-checkout .wc-block-checkout {
    grid-template-columns: 1fr !important;
  }
}

/* Basic form field styling */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-combobox input {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-family: inherit;
}

.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus {
  outline: none;
  border-color: #1a1a1a;
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.1);
}

/* Place Order Button */
.wc-block-components-checkout-place-order-button {
  background: #1a1a1a;
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}

.wc-block-components-checkout-place-order-button:hover {
  background: #000000;
}

/* Error styling */
.wc-block-components-validation-error {
  color: #e02020;
  font-size: 0.8125rem;
  margin-top: 4px;
}

/* Order Summary */
.wc-block-components-order-summary-item__image {
  border-radius: 8px;
}

/* ========================================
   Checkout Order Type Selector
   ======================================== */
#rb-checkout-order-settings {
  background: #f8f9fa;
  padding: 24px;
  margin: 0 0 24px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

#rb-checkout-order-settings h3 {
  margin: 0 0 16px;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
}

.rb-order-type-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.rb-order-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px;
  border: 2px solid #dee2e6;
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #495057;
  transition: all 0.2s ease;
}

.rb-order-type-option:hover {
  border-color: #1a1a1a;
  color: #1a1a1a;
}

.rb-order-type-option.active {
  border-color: #1a1a1a;
  background: #1a1a1a;
  color: #fff;
}

.rb-order-type-option.active svg {
  stroke: #fff;
}

.rb-checkout-notice {
  background: #fff3cd;
  border: 1px solid #ffc107;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #856404;
  font-size: 14px;
}

.rb-checkout-notice svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.rb-checkout-info {
  background: #e8f4fd;
  border: 1px solid #b8daff;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #004085;
  font-size: 14px;
}

.rb-checkout-info svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #007bff;
}

.rb-checkout-info p {
  color: #495057;
}

/* ========================================
   Checkout Date/Time Picker
   ======================================== */
.rb-checkout-scheduling {
  background: var(--fo-surface);
  border-radius: var(--fo-radius);
  padding: 20px;
  margin-bottom: 24px;
}

.rb-checkout-scheduling h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rb-checkout-scheduling h3 svg {
  width: 20px;
  height: 20px;
  color: var(--fo-primary);
}

.rb-scheduling-fields {
  display: grid;
  gap: 16px;
}

@media (min-width: 480px) {
  .rb-scheduling-fields {
    grid-template-columns: 1fr 1fr;
  }
}

.rb-scheduling-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--fo-text);
}

.rb-scheduling-field select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius);
  font-size: 1rem;
  background: var(--fo-background);
  cursor: pointer;
}

.rb-scheduling-field select:focus {
  outline: none;
  border-color: var(--fo-primary);
}

.rb-minimum-spend-notice {
  background: rgba(224, 32, 32, 0.1);
  border: 1px solid var(--fo-error);
  border-radius: var(--fo-radius);
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.rb-minimum-spend-notice svg {
  width: 24px;
  height: 24px;
  color: var(--fo-error);
  flex-shrink: 0;
}

.rb-minimum-spend-notice p {
  margin: 0;
  color: var(--fo-error);
  font-weight: 500;
}

/* Checkout Notice Variants */
.rb-checkout-notice--warning {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.rb-checkout-notice--warning strong {
  color: #856404;
  display: block;
  margin-bottom: 4px;
}

.rb-checkout-notice--warning p {
  color: #856404;
  margin: 0;
  font-size: 14px;
}

.rb-checkout-notice--error {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}

.rb-checkout-notice--error strong {
  color: #721c24;
  display: block;
  margin-bottom: 4px;
}

.rb-checkout-notice--error p {
  color: #721c24;
  margin: 0;
  font-size: 14px;
}

/* Checkout Sections */
.rb-checkout-section {
  background: #f8f9fa;
  padding: 24px;
  margin-bottom: 24px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.rb-checkout-section h3 {
  margin: 0 0 16px;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rb-checkout-section h3 svg {
  color: #1a1a1a;
}

.rb-required-badge {
  font-size: 11px;
  font-weight: 500;
  background: #e02020;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
}

/* Address Checker */
.rb-address-checker {
  margin-bottom: 16px;
}

.rb-postcode-input-group {
  display: flex;
  gap: 12px;
}

.rb-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
}

.rb-input:focus {
  outline: none;
  border-color: #1a1a1a;
}

.rb-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.rb-btn--secondary {
  background: #1a1a1a;
  color: white;
  border: none;
}

.rb-btn--secondary:hover {
  background: #000;
}

.rb-postcode-result {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
}

.rb-postcode-result .rb-success {
  color: #00a651;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rb-postcode-result .rb-error {
  color: #e02020;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rb-address-note {
  color: #00a651;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 500;
}

/* Order Type Option with minimum label */
.rb-order-type-option small {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.7;
}

.rb-order-type-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========================================
   Offers Section
   ======================================== */
.fo-offers-section {
  padding: 48px 0;
  background: var(--fo-surface);
}

.fo-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 24px;
  text-align: center;
}

.fo-offers-grid {
  display: grid;
  gap: 16px;
}

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

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

.fo-offer-card {
  background: var(--fo-background);
  border-radius: var(--fo-radius-lg);
  padding: 24px;
  box-shadow: var(--fo-shadow);
  position: relative;
  overflow: hidden;
}

.fo-offer-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--fo-primary), var(--fo-warning));
}

.fo-offer-badge {
  display: inline-block;
  background: var(--fo-error);
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.fo-offer-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--fo-text);
}

.fo-offer-desc {
  font-size: 0.875rem;
  color: var(--fo-text-light);
  margin: 0 0 16px;
  line-height: 1.5;
}

.fo-offer-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fo-surface);
  padding: 8px 16px;
  border-radius: var(--fo-radius);
  font-size: 0.875rem;
}

.fo-offer-code strong {
  color: var(--fo-primary);
  font-family: monospace;
  font-size: 1rem;
}

/* ========================================
   Deals Section
   ======================================== */
.fo-deals-section {
  padding: 32px 0;
  background: var(--fo-surface);
}

.fo-deals-section .fo-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 20px;
}

.fo-deals-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.fo-deal-card {
  background: var(--fo-background);
  border-radius: var(--fo-radius-lg);
  padding: 20px;
  box-shadow: var(--fo-shadow);
  border: 1px solid var(--fo-border);
  transition: box-shadow var(--fo-transition), transform var(--fo-transition);
  cursor: pointer;
}

.fo-deal-card:hover {
  box-shadow: var(--fo-shadow-lg);
  transform: translateY(-2px);
}

.fo-deal-badge {
  display: inline-block;
  background: var(--fo-primary);
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.fo-deal-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--fo-text);
}

.fo-deal-desc {
  font-size: 0.875rem;
  color: var(--fo-text-light);
  margin: 0 0 12px;
  line-height: 1.5;
}

.fo-deal-min {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--fo-text-muted);
  background: var(--fo-surface);
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.fo-deal-code {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--fo-surface);
  border-radius: var(--fo-radius);
  font-size: 0.875rem;
}

.fo-deal-code span {
  color: var(--fo-text-muted);
}

.fo-deal-code strong {
  font-family: monospace;
  font-size: 1rem;
  color: var(--fo-primary);
  letter-spacing: 1px;
}

/* ========================================
   FAQs Section
   ======================================== */
.fo-faqs-section {
  padding: 48px 0;
}

.fo-faqs-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fo-faq-item {
  background: var(--fo-background);
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius);
  overflow: hidden;
}

.fo-faq-question {
  padding: 16px 20px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  transition: background var(--fo-transition);
}

.fo-faq-question::-webkit-details-marker {
  display: none;
}

.fo-faq-question::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--fo-text-muted);
  transition: transform var(--fo-transition);
}

.fo-faq-item[open] .fo-faq-question {
  background: var(--fo-surface);
}

.fo-faq-item[open] .fo-faq-question::after {
  content: '−';
}

.fo-faq-answer {
  padding: 0 20px 20px;
  color: var(--fo-text-light);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ========================================
   Page Wrapper
   ======================================== */
.fo-page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.fo-page-wrapper main {
  flex: 1;
}

/* ========================================
   Utility Classes
   ======================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.text-center {
  text-align: center;
}

.hidden {
  display: none !important;
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  .fo-site-header,
  .fo-mobile-basket-bar,
  .fo-basket,
  .fo-order-controls,
  .fo-category-nav {
    display: none !important;
  }
  
  .fo-menu-item {
    break-inside: avoid;
  }
}

/* ========================================
   Cross-Browser Compatibility Fixes
   ======================================== */

/* Universal box-sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Safari/iOS form element fixes */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  font-size: 16px; /* Prevents iOS zoom on focus */
}

/* iOS select dropdown fix */
.fo-select-wrapper select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  background-color: var(--fo-background);
  padding-right: 40px;
}

/* iOS tap highlight removal */
a, button, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Safari button fixes */
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
}

/* Smooth scrolling with fallback */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Firefox select styling fix */
@-moz-document url-prefix() {
  .fo-select-wrapper select {
    text-indent: 0.01px;
    text-overflow: '';
  }
}

/* Edge/IE flex gap fallback */
@supports not (gap: 1px) {
  .fo-order-controls > * {
    margin-right: 12px;
    margin-bottom: 12px;
  }
  
  .fo-order-controls > *:last-child {
    margin-right: 0;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --fo-border: #000;
    --fo-text-muted: #333;
  }
  
  .fo-order-type-btn.active,
  .fo-time-btn.active {
    border: 2px solid var(--fo-primary);
  }
}

/* Dark mode support (optional, for future) */
@media (prefers-color-scheme: dark) {
  /* Users can opt-in to dark mode support here */
}

/* ========================================
   Cart Expiry Countdown & Overlay
   ======================================== */
.fo-cart-expiry-countdown {
  background: #fff3cd;
  color: #856404;
  padding: 10px 15px;
  margin: 0 -15px 15px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid #ffeeba;
  font-weight: 500;
}

.fo-cart-expiry-countdown svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.fo-cart-expiry-countdown.urgent {
  background: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
  animation: pulse 1s infinite;
}

.fo-cart-expiry-countdown.expired {
  background: #dc3545;
  color: #fff;
  font-weight: 600;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Cart Expired Overlay */
.fo-cart-expired-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.fo-cart-expired-message {
  background: #fff;
  padding: 40px;
  border-radius: 16px;
  text-align: center;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
}

.fo-expired-icon {
  font-size: 64px;
  display: block;
  margin-bottom: 20px;
}

.fo-cart-expired-message h3 {
  margin: 0 0 12px;
  font-size: 26px;
  color: #1a1a1a;
  font-weight: 700;
}

.fo-cart-expired-message p {
  margin: 0 0 25px;
  color: #666;
  font-size: 15px;
  line-height: 1.6;
}

.fo-expired-dismiss {
  background: #1a1a1a;
  color: #fff;
  border: none;
  padding: 14px 35px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.fo-expired-dismiss:hover {
  background: #333;
  transform: translateY(-1px);
}

.fo-expired-dismiss:active {
  transform: translateY(0);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ========================================
   PWA Install Prompt - Compact Style
   ======================================== */
.rb-pwa-prompt {
  position: fixed;
  bottom: 80px;
  left: 16px;
  right: 16px;
  z-index: 99998;
  animation: slideUp 0.3s ease-out;
}

@media (min-width: 768px) {
  .rb-pwa-prompt {
    left: auto;
    right: 20px;
    bottom: 20px;
    max-width: 380px;
  }
}

.rb-pwa-content {
  background: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Compact style - small banner */
.rb-pwa-compact .rb-pwa-content {
  padding: 10px 14px;
}

.rb-pwa-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.rb-pwa-compact .rb-pwa-icon {
  font-size: 20px;
}

.rb-pwa-text {
  flex: 1;
  min-width: 0;
}

.rb-pwa-text strong {
  display: block;
  font-size: 13px;
  color: #1a1a1a;
  margin-bottom: 1px;
}

.rb-pwa-text p {
  font-size: 11px;
  color: #666;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rb-pwa-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.rb-pwa-install {
  background: #1a1a1a;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.rb-pwa-install:hover {
  background: #333;
}

.rb-pwa-dismiss {
  background: transparent;
  border: none;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.rb-pwa-dismiss:hover {
  color: #666;
}

/* Hide large benefits list in compact mode */
.rb-pwa-compact .rb-pwa-benefits,
.rb-pwa-compact .rb-pwa-close,
.rb-pwa-compact .rb-ios-steps {
  display: none;
}

@keyframes slideUp {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* ========================================
   Collection Location Selector
   ======================================== */
.rb-location-selector {
  margin: 15px 0;
}

.rb-location-selector label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

.rb-location-selector select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius);
  font-size: 14px;
  background: var(--fo-background);
}

.rb-location-details {
  margin-top: 10px;
  padding: 12px 15px;
  background: var(--fo-surface);
  border-radius: var(--fo-radius);
  font-size: 13px;
}

.rb-location-details p {
  margin: 4px 0;
}

.rb-location-details .address {
  color: var(--fo-text-light);
}

/* ========================================
   Loyalty Points Display
   ======================================== */
.rb-loyalty-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ffd700, #ffb347);
  color: #1a1a1a;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.rb-loyalty-badge svg {
  width: 14px;
  height: 14px;
}

.rb-checkout-loyalty {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--fo-radius);
  padding: 15px;
  margin: 15px 0;
}

.rb-checkout-loyalty h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rb-checkout-loyalty p {
  margin: 0;
  font-size: 13px;
  color: #92400e;
}

.rb-points-value {
  font-weight: 700;
  font-size: 16px;
}

/* ========================================
   Product Unavailable State
   ======================================== */
.fo-menu-item.unavailable {
  position: relative;
  pointer-events: none;
}

.fo-menu-item.unavailable::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--fo-radius-lg);
}

.fo-menu-item.unavailable .fo-add-btn {
  display: none;
}

.fo-unavailable-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #dc3545;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  z-index: 10;
  white-space: nowrap;
}

/* ========================================
   Store Status Badges
   ======================================== */
.fo-store-status.collection-only {
  background: #fff3cd;
  color: #856404;
  padding: 4px 10px;
  border-radius: 4px;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.fo-store-status.collection-only::before,
.fo-store-status.collection-only::after {
  display: none !important;
  border: none !important;
  background: transparent !important;
}

/* Ensure no border on any store status variant */
.fo-store-status {
  border-bottom: none !important;
  outline: none !important;
}

.fo-store-status.delivery-only {
  background: #d1ecf1;
  color: #0c5460;
}

/* ========================================
   Account Dropdown Enhancements
   ======================================== */
.fo-account-toggle {
  position: relative;
}

.fo-account-indicator {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: #00a651;
  border-radius: 50%;
  border: 2px solid #fff;
}

.fo-account-menu {
  min-width: 220px;
}

.fo-account-header {
  padding: 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.fo-account-name {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #1a1a1a;
}

.fo-account-points {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: #c9a86c;
  font-weight: 600;
}

.fo-account-subtitle {
  display: block;
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

.fo-guest-header {
  text-align: center;
}

.fo-account-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fo-account-menu a svg {
  flex-shrink: 0;
  color: #666;
}

.fo-account-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 4px 0;
}

.fo-logout-link {
  color: #dc3545 !important;
}

.fo-login-btn, .fo-register-btn {
  margin: 8px;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  justify-content: center;
  font-weight: 600 !important;
}

.fo-login-btn {
  background: #1a1a1a !important;
  color: #fff !important;
}

.fo-register-btn {
  background: #f0f0f0 !important;
  color: #1a1a1a !important;
}

/* ========================================
   Order Ahead Banner (Top)
   ======================================== */
.fo-order-ahead-banner {
  background: #fff3cd;
  padding: 8px 0;
  font-size: 13px;
}

.fo-order-ahead-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #856404;
}

.fo-order-ahead-content svg {
  flex-shrink: 0;
}

/* ========================================
   Mobile Cart Expiry
   ======================================== */
.fo-mobile-basket-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fo-mobile-cart-expiry {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #666;
}

.fo-mobile-cart-expiry.urgent {
  color: #dc3545;
  animation: pulse 1s infinite;
}

.fo-mobile-expiry-time {
  font-weight: 600;
  font-family: monospace;
}

/* ========================================
   Collection Location Selector - Modern UI
   ======================================== */
.fo-collection-location-wrap {
  margin-top: 16px;
}

.fo-collection-dropdown {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
  border: 2px solid var(--fo-border);
  border-radius: var(--fo-radius-lg);
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: border-color var(--fo-transition);
}

.fo-collection-dropdown:hover {
  border-color: var(--fo-primary);
}

.fo-collection-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  color: var(--fo-text);
}

.fo-collection-label svg {
  color: var(--fo-success);
}

.fo-collection-dropdown .fo-select-wrapper {
  flex: 1;
  min-width: 0;
}

.fo-collection-select {
  width: 100%;
  padding: 12px 40px 12px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 2px solid var(--fo-border);
  border-radius: var(--fo-radius);
  background: var(--fo-background);
  color: var(--fo-text);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: all var(--fo-transition);
}

.fo-collection-select:hover {
  border-color: var(--fo-text-muted);
}

.fo-collection-select:focus {
  outline: none;
  border-color: var(--fo-primary);
  box-shadow: 0 0 0 3px var(--fo-primary-light);
}

/* Single location address display - Modern Card */
.fo-collection-address {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
  border: 2px solid var(--fo-border);
  border-radius: var(--fo-radius-lg);
  padding: 20px;
  margin-top: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.fo-collection-address-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--fo-success), #2e7d32);
  border-radius: 50%;
  color: white;
}

.fo-collection-address-icon svg {
  width: 20px;
  height: 20px;
}

.fo-collection-address-text {
  flex: 1;
}

.fo-collection-address-text strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fo-text);
  margin-bottom: 4px;
}

.fo-collection-address-text p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--fo-text-muted);
  line-height: 1.5;
}

.fo-collection-address-text .fo-collection-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--fo-primary);
  font-weight: 500;
}

@media (max-width: 600px) {
  .fo-collection-dropdown {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
  }
  
  .fo-collection-label {
    justify-content: flex-start;
  }
  
  .fo-collection-address {
    padding: 16px;
    gap: 12px;
  }
  
  .fo-collection-address-icon {
    width: 36px;
    height: 36px;
  }
  
  .fo-collection-address-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* ========================================
   PWA Install Prompt Styles
   ======================================== */
.rb-pwa-prompt {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: #fff;
  z-index: 10000;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.4s ease-out;
}

/* Close button */
.rb-pwa-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rb-pwa-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.rb-pwa-content {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px 20px;
  padding-top: 16px;
}

.rb-pwa-icon-wrap {
  text-align: center;
  margin-bottom: 16px;
}

.rb-pwa-icon {
  font-size: 48px;
  display: inline-block;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.rb-pwa-text {
  text-align: center;
  margin-bottom: 20px;
}

.rb-pwa-text strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.rb-pwa-text p {
  margin: 0 0 16px;
  opacity: 0.9;
  font-size: 14px;
}

.rb-pwa-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
}

.rb-pwa-benefits li {
  font-size: 13px;
  opacity: 0.85;
  white-space: nowrap;
}

.rb-pwa-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rb-pwa-install {
  background: linear-gradient(135deg, #c9a86c 0%, #b8956a 100%);
  color: #1a1a1a;
  border: none;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rb-pwa-install:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(201, 168, 108, 0.4);
}

.rb-pwa-dismiss {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  padding: 10px;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s;
}

.rb-pwa-dismiss:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* iOS-specific PWA Prompt */
.rb-ios-prompt .rb-pwa-content {
  padding-bottom: 30px;
}

.rb-ios-steps {
  text-align: left;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}

.rb-ios-step {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 14px;
}

.rb-ios-step:last-child {
  margin-bottom: 0;
}

.rb-ios-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #c9a86c;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 13px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rb-ios-step svg {
  color: #007aff;
  vertical-align: middle;
}

.rb-ios-step strong {
  color: #fff;
}

/* PWA Prompt Mobile Adjustments */
@media (max-width: 480px) {
  .rb-pwa-content {
    padding: 20px 16px;
  }
  
  .rb-pwa-icon {
    font-size: 40px;
  }
  
  .rb-pwa-text strong {
    font-size: 18px;
  }
  
  .rb-pwa-benefits {
    flex-direction: column;
    align-items: center;
  }
  
  .rb-pwa-install {
    padding: 14px 24px;
    font-size: 15px;
  }
}

/* Notification blocked indicator */
.rb-notification-blocked {
  background: rgba(220, 53, 69, 0.2);
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  font-size: 12px;
  text-align: center;
}

.rb-notification-blocked a {
  color: #ffc107;
  text-decoration: underline;
}

/* ========================================
   Cart Expiry Countdown Timer
   ======================================== */
.fo-basket-expiry-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--fo-surface);
  border-radius: var(--fo-radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--fo-text);
  margin-bottom: 12px;
}

.fo-basket-expiry-timer .fo-timer-icon {
  font-size: 14px;
}

.fo-basket-expiry-timer .fo-timer-countdown {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-weight: 600;
  min-width: 36px;
  text-align: center;
}

.fo-basket-expiry-timer.fo-timer-warning {
  background: rgba(224, 32, 32, 0.1);
  color: var(--fo-error);
  animation: pulse-warning 1s ease-in-out infinite;
}

@keyframes pulse-warning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Cart popup timer */
.fo-cart-popup .fo-basket-expiry-timer {
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--fo-border);
}

/* ========================================
   Express Checkout Section
   ======================================== */
.rb-express-checkout-wrapper {
  background: #fff;
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius-lg);
  padding: 20px;
  margin-bottom: 24px;
}

.rb-express-checkout-header {
  margin-bottom: 16px;
}

.rb-express-checkout-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fo-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rb-express-checkout-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 48px;
}

/* Express checkout buttons - no fallback message, hidden if empty */

.rb-express-checkout-buttons > * {
  width: 100%;
}

.rb-express-checkout-divider {
  display: flex;
  align-items: center;
  margin-top: 20px;
  gap: 16px;
}

.rb-express-checkout-divider::before,
.rb-express-checkout-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--fo-border);
}

.rb-express-checkout-divider span {
  font-size: 12px;
  font-weight: 600;
  color: var(--fo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
   Login & Coupon Toggle Styling (Checkout)
   ======================================== */

/* Override WooCommerce default info notices for login/coupon toggles */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
  background: #fff !important;
  border: 1px solid var(--fo-border) !important;
  border-radius: var(--fo-radius) !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
  color: var(--fo-text) !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: none !important;
  max-width: 500px !important;
}

.woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-form-coupon-toggle .woocommerce-info::before {
  content: '' !important;
  display: none !important;
}

.woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--fo-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: opacity var(--fo-transition) !important;
}

.woocommerce-form-login-toggle .woocommerce-info a:hover,
.woocommerce-form-coupon-toggle .woocommerce-info a:hover {
  opacity: 0.7 !important;
}

/* Login Form Styling */
.woocommerce-form-login {
  background: #fff !important;
  border: 1px solid var(--fo-border) !important;
  border-radius: var(--fo-radius-lg) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  max-width: 500px !important;
}

.woocommerce-form-login p {
  margin-bottom: 16px !important;
}

.woocommerce-form-login label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--fo-text) !important;
  margin-bottom: 6px !important;
}

.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-login input[type="password"] {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid var(--fo-border) !important;
  border-radius: var(--fo-radius) !important;
  font-size: 15px !important;
  transition: border-color var(--fo-transition) !important;
}

.woocommerce-form-login input[type="text"]:focus,
.woocommerce-form-login input[type="email"]:focus,
.woocommerce-form-login input[type="password"]:focus {
  outline: none !important;
  border-color: var(--fo-primary) !important;
}

.woocommerce-form-login button[type="submit"],
.woocommerce-form-login .button {
  background: var(--fo-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--fo-radius) !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background var(--fo-transition) !important;
}

.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-form-login .button:hover {
  background: var(--fo-primary-hover) !important;
}

.woocommerce-form-login .lost_password {
  margin-top: 12px !important;
}

.woocommerce-form-login .lost_password a {
  color: var(--fo-text-muted) !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

.woocommerce-form-login .lost_password a:hover {
  color: var(--fo-primary) !important;
}

/* Coupon Form Styling */
.checkout_coupon,
form.checkout_coupon {
  background: #fff !important;
  border: 1px solid var(--fo-border) !important;
  border-radius: var(--fo-radius-lg) !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
  max-width: 500px !important;
  /* display is controlled by WooCommerce slideToggle - do not override */
}

/* Apply flex layout only when form is visible */
form.checkout_coupon[style*="block"],
.checkout_coupon:not([style*="none"]):not(:empty) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: flex-end !important;
}

.checkout_coupon p:first-child {
  width: 100% !important;
  margin: 0 0 8px 0 !important;
  font-size: 13px !important;
  color: var(--fo-text-muted) !important;
}

.checkout_coupon input[type="text"] {
  flex: 1 !important;
  min-width: 200px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--fo-border) !important;
  border-radius: var(--fo-radius) !important;
  font-size: 15px !important;
}

.checkout_coupon input[type="text"]:focus {
  outline: none !important;
  border-color: var(--fo-primary) !important;
}

.checkout_coupon button[type="submit"],
.checkout_coupon .button {
  background: var(--fo-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--fo-radius) !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background var(--fo-transition) !important;
}

.checkout_coupon button[type="submit"]:hover,
.checkout_coupon .button:hover {
  background: var(--fo-primary-hover) !important;
}

/* Mobile responsiveness for checkout toggles */
@media (max-width: 480px) {
  .woocommerce-form-login-toggle .woocommerce-info,
  .woocommerce-form-coupon-toggle .woocommerce-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 14px 16px !important;
  }
  
  .checkout_coupon {
    flex-direction: column !important;
  }
  
  .checkout_coupon input[type="text"] {
    width: 100% !important;
    min-width: unset !important;
  }
  
  .checkout_coupon button[type="submit"],
  .checkout_coupon .button {
    width: 100% !important;
  }
}

/* ========================================
   Sold Out Badge for Menu Items
   ======================================== */
.fo-menu-item.fo-unavailable {
    opacity: 0.6;
    cursor: not-allowed;
}

.fo-menu-item.fo-unavailable .fo-menu-item-content {
    pointer-events: none;
}

.fo-sold-out-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    z-index: 2;
}

/* ========================================
   Birthday Cake Corner Popup
   ======================================== */
.fo-birthday-popup {
    position: fixed;
    bottom: 100px;
    right: 20px;
    background: white;
    border-radius: var(--fo-radius-lg);
    box-shadow: var(--fo-shadow-xl);
    padding: 16px 20px;
    z-index: 999;
    width: 320px;
    max-width: calc(100vw - 40px);
    animation: fo-popup-slide-in 0.4s ease-out;
    border: 1px solid var(--fo-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@keyframes fo-popup-slide-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fo-birthday-popup.hidden {
    display: none;
}

.fo-birthday-popup-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--fo-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

.fo-birthday-popup-close:hover {
    color: var(--fo-text);
}

.fo-birthday-popup-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--fo-radius);
    margin-bottom: 4px;
}

.fo-birthday-popup-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.fo-birthday-popup-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.fo-birthday-popup-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fo-text);
    margin: 0;
    line-height: 1.4;
}

.fo-birthday-popup-link {
    display: block;
    background: var(--fo-primary);
    color: white;
    padding: 10px 16px;
    border-radius: var(--fo-radius);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s ease;
}

.fo-birthday-popup-link:hover {
    background: var(--fo-primary-hover);
    color: white;
}

@media (max-width: 767px) {
    .fo-birthday-popup {
        bottom: 80px;
        right: 12px;
        width: 280px;
        padding: 14px 16px;
    }
    
    .fo-birthday-popup-image {
        height: 100px;
    }
    
    .fo-birthday-popup-icon {
        font-size: 1.25rem;
    }
    
    .fo-birthday-popup-text {
        font-size: 0.8rem;
    }
}

/* ========================================
   Loyalty & Offers Section (Menu Page) - Grid Layout
   ======================================== */
.fo-promo-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 0;
}

.fo-promo-card {
    background: #fff;
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
}

.fo-promo-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fo-surface);
    border-radius: 50%;
    flex-shrink: 0;
}

.fo-promo-card-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--fo-primary);
}

/* Offer card styling - red accent */
.fo-promo-card-offer {
    border-color: var(--fo-error);
    background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
}

.fo-promo-card-icon-offer {
    background: linear-gradient(135deg, var(--fo-error), #c62828);
}

.fo-promo-card-icon-offer svg {
    stroke: white;
}

.fo-promo-card-content {
    flex: 1;
    min-width: 0;
}

.fo-promo-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fo-text);
    margin: 0 0 2px;
}

.fo-promo-card-desc {
    font-size: 0.75rem;
    color: var(--fo-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Points balance display */
.fo-promo-card-points {
    font-size: 0.75rem;
    color: var(--fo-success);
    font-weight: 600;
    margin: 0;
}

.fo-promo-card-link {
    font-size: 0.75rem;
    color: var(--fo-primary);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.fo-promo-card-link:hover {
    text-decoration: underline;
}

/* 2 columns for tablet */
@media (max-width: 900px) {
    .fo-promo-section {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .fo-promo-section {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ========================================
   Inline Postcode Form in Promo Card
   ======================================== */
.fo-promo-card-postcode {
    border-color: var(--fo-success);
    background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%);
}

.fo-promo-card-icon-location {
    background: linear-gradient(135deg, var(--fo-success), #2e7d32);
}

.fo-promo-card-icon-location svg {
    stroke: white;
}

.fo-postcode-content {
    flex: 1;
}

.fo-postcode-form-inline {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fo-postcode-input-inline {
    flex: 1;
    min-width: 100px;
    padding: 8px 12px;
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: border-color var(--fo-transition);
}

.fo-postcode-input-inline:focus {
    outline: none;
    border-color: var(--fo-primary);
}

.fo-postcode-input-inline::placeholder {
    color: var(--fo-text-muted);
}

.fo-postcode-btn-inline {
    padding: 8px 16px;
    background: var(--fo-primary);
    color: white;
    border: none;
    border-radius: var(--fo-radius);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--fo-transition);
}

.fo-postcode-btn-inline:hover {
    background: var(--fo-primary-hover);
}

.fo-postcode-result-inline {
    margin-top: 8px;
    font-size: 0.75rem;
}

.fo-postcode-result-inline.success {
    color: var(--fo-success);
}

.fo-postcode-result-inline.error {
    color: var(--fo-error);
}

/* ========================================
   Collection Location Card - Replaces Postcode on Collection
   ======================================== */
.fo-collection-location-wrap {
    display: none;
}

.fo-collection-location-wrap.fo-collection-promo-row {
    margin-top: 16px;
    margin-bottom: 0;
}

/* When collection is active, show collection card IN the promo section */
.fo-promo-section .fo-promo-card-collection {
    border-color: var(--fo-success);
    background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%);
}

.fo-promo-card-icon-collection {
    background: linear-gradient(135deg, var(--fo-success), #2e7d32);
}

.fo-promo-card-icon-collection svg {
    stroke: white;
}

.fo-collection-select-inline {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fo-text);
    background: white;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

.fo-collection-select-inline:focus {
    outline: none;
    border-color: var(--fo-primary);
}

.fo-collection-content {
    flex: 1;
    min-width: 0;
}

.fo-collection-content h4 {
    margin: 0 0 4px;
}

/* Hide old postcode check section on delivery */
.fo-postcode-check:not(.fo-promo-card-postcode) {
    display: none !important;
}

/* ========================================
   PC Layout: Promo Section with Dynamic Postcode/Collection
   ======================================== */
@media (min-width: 768px) {
    /* Promo section takes full width below the two-column layout */
    .fo-promo-section {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Hide postcode card when collection is active */
    body.order-type-collection .fo-promo-card-postcode {
        display: none !important;
    }
    
    /* Show collection card inline when collection is active */
    body.order-type-collection .fo-promo-section .fo-promo-card-collection-inline {
        display: flex !important;
    }
    
    /* Hide the separate collection row on PC - we show it inline */
    .fo-collection-promo-row {
        display: none !important;
    }
}