/* Main Styles - MagicMenu Design System */
:root {
    /* Typography */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Primary palette - Warm forest green */
    --color-primary-50: #f0f9f1;
    --color-primary-100: #dcf0de;
    --color-primary-200: #bce2c0;
    --color-primary-300: #8ecc95;
    --color-primary-400: #5dae66;
    --color-primary-500: #3c9147;
    --color-primary-600: #2c7537;
    --color-primary-700: #1a472a;
    --color-primary-800: #1d3d25;
    --color-primary-900: #193220;

    /* Accent - Burnt orange */
    --color-accent-50: #fff7ed;
    --color-accent-100: #ffedd5;
    --color-accent-200: #fed7aa;
    --color-accent-300: #fdba74;
    --color-accent-400: #fb923c;
    --color-accent-500: #ff6b35;
    --color-accent-600: #ea580c;
    --color-accent-700: #c2410c;

    /* Highlight - Sunshine yellow */
    --color-highlight-300: #fde68a;
    --color-highlight-400: #ffd166;
    --color-highlight-500: #eab308;

    /* Neutral - Warm tones */
    --color-cream-50: #fdfcfa;
    --color-cream-100: #faf6f1;
    --color-cream-200: #f5ede3;
    --color-cream-300: #ebe0d0;
    --color-charcoal: #2d2926;
    --color-stone: #7a7067;
    --color-stone-light: #a39e95;

    /* Meal type colors */
    --color-breakfast: #f59e0b;
    --color-lunch: #10b981;
    --color-dinner: #8b5cf6;
    --color-snack: #ec4899;

    /* Semantic mappings (backward compatible) */
    --primary-color: var(--color-primary-700);
    --secondary-color: var(--color-primary-600);
    --accent-color: var(--color-accent-500);
    --text-color: var(--color-charcoal);
    --light-text: var(--color-stone);
    --background-color: var(--color-cream-50);
    --light-background: var(--color-cream-100);
    --border-color: var(--color-cream-300);
    --success-color: var(--color-primary-500);
    --warning-color: var(--color-highlight-500);
    --danger-color: #d64545;
    --info-color: #3a7ca5;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Border radius */
    --border-radius: 0.5rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows with warm tint */
    --box-shadow: 0 2px 8px rgba(45, 41, 38, 0.06);
    --shadow-sm: 0 1px 2px rgba(26, 71, 42, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(26, 71, 42, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(26, 71, 42, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(26, 71, 42, 0.1);
    --shadow-glow: 0 0 40px rgba(255, 107, 53, 0.15);

    /* Component tokens */
    --card-bg: var(--color-cream-50);
    --card-header-bg: rgba(26, 71, 42, 0.03);
    --input-bg: var(--color-cream-50);
    --navbar-bg: var(--color-primary-700);
    --navbar-text: #FFFFFF;

    /* Animation */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.font-display {
    font-family: var(--font-display);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        /* Adjusted primary for dark mode visibility */
        --color-primary-700: #5dae66;
        --color-primary-600: #8ecc95;
        --color-accent-500: #fb923c;

        /* Semantic mappings for dark */
        --primary-color: #5dae66;
        --secondary-color: #8ecc95;
        --accent-color: #fb923c;
        --text-color: #faf6f1;
        --light-text: #c9c3ba;
        --background-color: #1a1918;
        --light-background: #242220;
        --border-color: #3d3a37;
        --success-color: #5dae66;
        --warning-color: #ffd166;
        --danger-color: #ef5350;
        --info-color: #42a5f5;

        /* Shadows for dark mode */
        --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

        /* Component tokens for dark */
        --card-bg: #2d2a28;
        --card-header-bg: rgba(255, 255, 255, 0.06);
        --input-bg: #353230;
        --navbar-bg: #1a1918;
        --navbar-text: #faf6f1;

        /* Cream tones adjusted for dark */
        --color-cream-50: #2d2a28;
        --color-cream-100: #353230;
        --color-cream-200: #3d3a37;
        --color-cream-300: #4a4643;
    }
    
    /* Bootstrap overrides for dark mode */
    .bg-light {
        background-color: var(--light-background) !important;
    }
    
    .bg-white {
        background-color: var(--card-bg) !important;
    }
    
    /* Readonly form controls with .bg-light should be more visible */
    .form-control.bg-light,
    .input-group-text.bg-light {
        background-color: #3A3A3A !important;  /* Darker than regular inputs but still visible */
        color: #CCCCCC !important;
        border-color: var(--border-color) !important;
    }
    
    .text-dark {
        color: var(--text-color) !important;
    }
    
    .text-muted {
        color: var(--light-text) !important;
    }
    
    /* Form controls dark mode */
    .form-control, 
    .form-select {
        background-color: var(--input-bg);
        border-color: var(--border-color);
        color: var(--text-color);
        font-size: 1rem;  /* Ensure readable font size */
    }
    
    .form-control:focus, 
    .form-select:focus {
        background-color: var(--input-bg);
        border-color: var(--accent-color);
        color: var(--text-color);
        box-shadow: 0 0 0 0.25rem rgba(102, 187, 106, 0.25);
    }
    
    /* Disabled form controls - better contrast */
    .form-control:disabled,
    .form-select:disabled {
        background-color: #404040;  /* Darker but still readable */
        border-color: var(--border-color);
        color: #E0E0E0;  /* Light gray text for better visibility */
        opacity: 0.8;
    }
    
    .form-control::placeholder {
        color: #999999;  /* Lighter placeholder for better visibility */
        opacity: 1;
    }
    
    /* Form labels in dark mode */
    .form-label {
        color: var(--text-color);
        font-weight: 500;
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }
    
    /* Helper text under forms - improved contrast */
    .form-text {
        color: #BBBBBB;  /* Lighter gray for better readability */
        font-size: 0.95rem;  /* Slightly larger for readability */
        margin-top: 0.25rem;
        font-weight: 400;
    }
    
    /* Small text elements - improved contrast */
    small, .small {
        color: #BBBBBB;  /* Lighter gray for better readability */
        font-size: 0.95rem;  /* Slightly larger for readability */
        font-weight: 400;
    }
    
    /* Warning text should be more visible */
    .form-text.text-warning,
    .text-warning {
        color: #FFD54F !important;  /* Brighter warning color */
        font-weight: 500;
    }
    
    /* Input group dark mode */
    .input-group-text {
        background-color: var(--card-header-bg);
        border-color: var(--border-color);
        color: var(--text-color);
    }
    
    /* Dropdown dark mode */
    .dropdown-menu {
        background-color: var(--card-bg);
        border-color: var(--border-color);
    }
    
    .dropdown-item {
        color: var(--text-color);
    }
    
    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--card-header-bg);
        color: var(--text-color);
    }
    
    /* Modal dark mode */
    .modal-content {
        background-color: var(--card-bg);
        border-color: var(--border-color);
        color: var(--text-color);
    }
    
    .modal-header,
    .modal-footer {
        border-color: var(--border-color);
    }
    
    .btn-close {
        filter: invert(1);
    }
    
    /* Table dark mode */
    .table {
        color: var(--text-color);
        --bs-table-bg: transparent;
        --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
        --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
        --bs-table-border-color: var(--border-color);
    }
    
    .table > :not(caption) > * > * {
        background-color: var(--bs-table-bg);
        border-bottom-color: var(--border-color);
        color: var(--text-color);
    }
    
    /* Badge dark mode */
    .badge.bg-secondary {
        background-color: #616161 !important;
    }
    
    /* Alert dark mode */
    .alert {
        border-color: var(--border-color);
    }
    
    .alert-success {
        background-color: rgba(76, 175, 80, 0.2);
        border-color: rgba(76, 175, 80, 0.4);
        color: #A5D6A7;
    }
    
    .alert-danger {
        background-color: rgba(239, 83, 80, 0.2);
        border-color: rgba(239, 83, 80, 0.4);
        color: #EF9A9A;
    }
    
    .alert-warning {
        background-color: rgba(255, 183, 77, 0.2);
        border-color: rgba(255, 183, 77, 0.4);
        color: #FFD54F;
    }
    
    .alert-info {
        background-color: rgba(66, 165, 245, 0.2);
        border-color: rgba(66, 165, 245, 0.4);
        color: #90CAF9;
    }
    
    /* List group dark mode */
    .list-group-item {
        background-color: var(--card-bg);
        border-color: var(--border-color);
        color: var(--text-color);
    }
    
    .list-group-item:hover {
        background-color: var(--card-header-bg);
    }
    
    /* Pagination dark mode */
    .page-link {
        background-color: var(--card-bg);
        border-color: var(--border-color);
        color: var(--text-color);
    }
    
    .page-link:hover {
        background-color: var(--card-header-bg);
        border-color: var(--border-color);
        color: var(--accent-color);
    }
    
    .page-item.active .page-link {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }
    
    /* Progress bar dark mode */
    .progress {
        background-color: var(--card-header-bg);
    }
    
    /* Spinner dark mode */
    .spinner-border.text-primary {
        color: var(--primary-color) !important;
    }
    
    /* Button enhancements for dark mode */
    .btn {
        font-weight: 500;
        font-size: 0.95rem;
    }
    
    .btn-primary {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: #000000;  /* Black text on green for maximum contrast */
    }
    
    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
        color: #000000;
    }
    
    .btn-secondary {
        background-color: #616161;
        border-color: #616161;
        color: #FFFFFF;
    }
    
    .btn-secondary:hover,
    .btn-secondary:focus {
        background-color: #757575;
        border-color: #757575;
        color: #FFFFFF;
    }
    
    .btn-outline-primary {
        color: var(--primary-color);
        border-color: var(--primary-color);
    }
    
    .btn-outline-primary:hover {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: #000000;
    }
    
    /* Link styles in dark mode */
    a {
        color: var(--primary-color);
    }
    
    a:hover {
        color: var(--secondary-color);
    }
    
    /* Checkbox and radio — outline style for dark mode */
    .form-check-input {
        background-color: transparent;
        border-color: var(--color-stone);
    }

    .form-check-input:checked {
        background-color: transparent;
        border-color: #5dae66;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%235dae66' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    }

    .form-check-input[type="radio"]:checked {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%235dae66'/%3e%3c/svg%3e");
    }

    /* Form switch toggles — restore pill appearance (override generic checkbox styles above) */
    .form-switch .form-check-input {
        background-color: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.4%29'/%3e%3c/svg%3e");
    }

    .form-switch .form-check-input:checked {
        background-color: #5dae66;
        border-color: #5dae66;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }

    .form-check-label {
        color: var(--text-color);
        font-size: 0.95rem;
    }

    /* Preference button cards in dark mode — use border shorthand to override .btn */
    .preference-btn {
        border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
        background: var(--card-bg) !important;
        color: var(--text-color) !important;
    }

    .preference-btn:hover {
        border-color: var(--color-primary-400) !important;
        background: rgba(93, 174, 102, 0.06) !important;
    }

    .btn-check:checked + .preference-btn {
        border: 1.5px solid #5dae66 !important;
        background: linear-gradient(135deg, rgba(93, 174, 102, 0.08), rgba(93, 174, 102, 0.16)) !important;
        box-shadow: inset 0 0 0 1px #5dae66;
        color: var(--text-color) !important;
    }

    .btn-check[type="checkbox"]:checked + .preference-btn::after {
        color: #8ecc95;
    }

    .preference-btn .option-desc {
        color: #a39e95 !important;
    }

    /* Preference chips in dark mode */
    .preference-chip {
        border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
        background: var(--card-bg) !important;
        color: var(--text-color) !important;
    }

    .preference-chip:hover {
        border-color: var(--color-primary-400) !important;
        background: rgba(93, 174, 102, 0.06) !important;
    }

    .btn-check:checked + .preference-chip {
        border-color: #5dae66 !important;
        background: rgba(93, 174, 102, 0.12) !important;
        color: #8ecc95 !important;
    }
}

/* Subtle grain texture overlay */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    z-index: 1;
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--light-background);
    line-height: 1.6;
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure minimum font sizes for readability */
p, li, td, th {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--light-text);
}

/* Headings with display font */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-primary-700);
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.2;
}

h1 { font-size: clamp(2rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

/* Text highlight utility */
.text-highlight {
    background: linear-gradient(120deg, var(--color-highlight-400) 0%, var(--color-highlight-400) 100%);
    background-repeat: no-repeat;
    background-size: 100% 40%;
    background-position: 0 90%;
}

/* Text accent color */
.text-accent {
    color: var(--color-accent-500);
}

/* Custom selection */
::selection {
    background: var(--color-primary-200);
    color: var(--color-primary-900);
}

@media (prefers-color-scheme: dark) {
    h1, h2, h3, h4, h5, h6 {
        color: var(--text-color);
    }

    ::selection {
        background: var(--color-primary-600);
        color: #000;
    }
}

/* ============================================
   NAVBAR - Enhanced with gradient and accent
   ============================================ */

.navbar {
    background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-800) 100%);
    border-bottom: 3px solid var(--color-accent-500);
    padding: var(--space-3) 0;
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

.navbar-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--navbar-text) !important;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.navbar-brand .brand-accent {
    color: var(--color-accent-500);
}

.navbar .nav-link {
    font-family: var(--font-body);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: var(--space-2) var(--space-3) !important;
    position: relative;
    transition: color 0.2s ease;
}

@media (min-width: 1400px) {
    .navbar .nav-link {
        padding: var(--space-2) var(--space-4) !important;
    }
}

.navbar .nav-link:not(.dropdown-toggle)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-accent-500);
    transition: width 0.3s ease, left 0.3s ease;
}

.navbar .nav-link:hover {
    color: #fff !important;
}

.navbar .nav-link:not(.dropdown-toggle):hover::after {
    width: calc(100% - var(--space-6));
    left: var(--space-3);
}

.navbar .nav-link:not(.dropdown-toggle).active::after {
    width: calc(100% - var(--space-6));
    left: var(--space-3);
}

@media (min-width: 1400px) {
    .navbar .nav-link:not(.dropdown-toggle):hover::after,
    .navbar .nav-link:not(.dropdown-toggle).active::after {
        width: calc(100% - var(--space-8));
        left: var(--space-4);
    }
}

.navbar .dropdown-menu {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    margin-top: var(--space-2);
}

.navbar .dropdown-item {
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.navbar .dropdown-item:hover {
    background-color: var(--color-cream-100);
}

/* Legacy navbar support */
.navbar-dark.bg-primary {
    background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-800) 100%) !important;
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
    color: var(--navbar-text) !important;
}

.navbar-light.bg-light {
    background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-800) 100%) !important;
    border-bottom: 3px solid var(--color-accent-500);
}

.navbar-light .navbar-brand,
.navbar-light .nav-link {
    color: var(--navbar-text) !important;
}

@media (prefers-color-scheme: dark) {
    .navbar {
        background: linear-gradient(135deg, var(--navbar-bg) 0%, #141312 100%);
    }

    .navbar .dropdown-item:hover {
        background-color: var(--color-cream-200);
    }
}

/* ============================================
   CARDS - Enhanced with accent bar and better shadows
   ============================================ */

.card {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--text-color);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s var(--ease-out-expo),
                box-shadow 0.3s ease,
                background-color 0.3s ease;
}

/* Accent bar that appears on hover */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary-600), var(--color-accent-500));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.card:hover::before {
    opacity: 1;
}

/* Featured card variant */
.card--featured {
    border-color: var(--color-accent-400);
}

.card--featured::before {
    opacity: 1;
}

.card-header {
    background-color: var(--card-header-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    padding: var(--space-4) var(--space-5);
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5 {
    font-family: var(--font-display);
    margin-bottom: 0;
}

.card-body {
    padding: var(--space-5);
}

.card-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-primary-700);
}

@media (prefers-color-scheme: dark) {
    .card-title {
        color: var(--text-color);
    }
}

/* ============================================
   BUTTONS - Enhanced with gradients and effects
   ============================================ */

.btn {
    font-family: var(--font-body);
    font-weight: 600;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

/* Shine effect on hover */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

/* Primary button with gradient */
.btn-primary {
    background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(26, 71, 42, 0.25);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 71, 42, 0.35);
    color: #fff;
}

.btn-primary:active {
    transform: translateY(0);
}

/* Accent button (burnt orange) */
.btn-accent {
    background: linear-gradient(135deg, var(--color-accent-500) 0%, var(--color-accent-600) 100%);
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.3);
}

.btn-accent:hover,
.btn-accent:focus {
    background: linear-gradient(135deg, var(--color-accent-400) 0%, var(--color-accent-500) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
    color: #fff;
}

/* Outline primary */
.btn-outline-primary {
    color: var(--color-primary-700);
    border: 2px solid var(--color-primary-700);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--color-primary-700);
    border-color: var(--color-primary-700);
    color: #fff;
}

/* Outline accent */
.btn-outline-accent {
    color: var(--color-accent-500);
    border: 2px solid var(--color-accent-500);
    background: transparent;
}

.btn-outline-accent:hover {
    background: var(--color-accent-500);
    border-color: var(--color-accent-500);
    color: #fff;
}

/* Loved/Favorite Button - for meal feedback */
.btn-loved {
    background: linear-gradient(135deg, var(--color-accent-500) 0%, var(--color-accent-600) 100%);
    border: 2px solid var(--color-accent-500);
    color: #fff;
}

.btn-loved:hover,
.btn-loved:focus {
    background: linear-gradient(135deg, var(--color-accent-400) 0%, var(--color-accent-500) 100%);
    border-color: var(--color-accent-400);
    color: #fff;
}

.btn-outline-loved {
    color: var(--color-accent-500);
    border: 2px solid var(--color-accent-500);
    background: transparent;
}

.btn-outline-loved:hover,
.btn-outline-loved:focus {
    background: var(--color-accent-500);
    border-color: var(--color-accent-500);
    color: #fff;
}

/* Large button (for CTAs) */
.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: 1.125rem;
    border-radius: var(--radius-xl);
}

/* Pill button */
.btn-pill {
    border-radius: var(--radius-full);
}

@media (prefers-color-scheme: dark) {
    .btn-primary {
        background: linear-gradient(135deg, var(--primary-color) 0%, #4a9152 100%);
        color: #000;
    }

    .btn-primary:hover,
    .btn-primary:focus {
        background: linear-gradient(135deg, #6fc276 0%, var(--primary-color) 100%);
        color: #000;
    }

    .btn-outline-primary {
        color: var(--primary-color);
        border-color: var(--primary-color);
    }

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

    .btn-loved {
        background: linear-gradient(135deg, var(--color-accent-500) 0%, var(--color-accent-600) 100%);
        border-color: var(--color-accent-500);
        color: #fff;
    }

    .btn-loved:hover,
    .btn-loved:focus {
        background: linear-gradient(135deg, var(--color-accent-400) 0%, var(--color-accent-500) 100%);
        border-color: var(--color-accent-400);
        color: #fff;
    }

    .btn-outline-loved {
        color: var(--color-accent-500);
        border-color: var(--color-accent-500);
    }

    .btn-outline-loved:hover,
    .btn-outline-loved:focus {
        background: var(--color-accent-500);
        color: #fff;
    }
}

/* HTMX Loading Indicator */
.htmx-indicator {
    opacity: 0;
    transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Utility Classes */
.cursor-pointer {
    cursor: pointer;
}

/* Text utilities */
.text-light-muted {
    color: var(--light-text);
}

.fs-sm {
    font-size: 0.9rem;
}

/* Background utilities */
.bg-cream {
    background: var(--color-cream-100);
}

.bg-cream-subtle {
    background: var(--color-cream-50);
}

/* Icon size utilities */
.icon-sm {
    font-size: 1rem;
}

.icon-md {
    font-size: 1.5rem;
}

.icon-lg {
    font-size: 2rem;
}

.icon-xl {
    font-size: 2.5rem;
}

.icon-2xl {
    font-size: 3rem;
}

.icon-3xl {
    font-size: 4rem;
}

/* Icon color utilities */
.icon-primary {
    color: var(--color-primary-500);
}

.icon-accent {
    color: var(--color-accent-500);
}

.icon-highlight {
    color: var(--color-highlight-500);
}

.icon-success {
    color: var(--success-color);
}

.icon-lunch {
    color: var(--color-lunch);
}

/* Alert utilities */
.alert-success-subtle {
    background: linear-gradient(135deg, rgba(40, 97, 73, 0.1) 0%, rgba(60, 130, 100, 0.1) 100%);
    border-left: 4px solid var(--success-color);
    border-top: none;
    border-right: none;
    border-bottom: none;
}

.alert-warning-subtle {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    border-left: 4px solid var(--color-highlight-500);
    border-top: none;
    border-right: none;
    border-bottom: none;
}

/* Spinner utilities */
.spinner-accent {
    width: 3rem;
    height: 3rem;
    color: var(--color-accent-500);
}

/* Progress bar utilities */
.progress-cream {
    height: 12px;
    background: var(--color-cream-200);
    border-radius: var(--radius-md);
}

.progress-onboarding {
    height: 8px;
    background: var(--color-cream-200);
    border-radius: var(--radius-md);
}

.progress-bar-accent {
    background: var(--color-accent-500);
}

/* Touch target accessibility - ensure minimum 44x44px on touch devices */
@media (pointer: coarse) {
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 1rem;
    }

    .btn-group .btn-sm {
        padding: 0.5rem 0.75rem;
    }
}

/* Recipe Card */
.recipe-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.recipe-card .card-body {
    flex: 1;
}

.recipe-image {
    height: 200px;
    object-fit: cover;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

/* Menu Calendar - Enhanced for Epic 2 */
.menu-calendar {
    width: 100%;
}

.menu-calendar .card {
    height: 100%;
    margin-bottom: 1rem;
}

.menu-day {
    min-height: 300px;
}

/* ============================================
   MEAL TYPE BADGES
   ============================================ */

.meal-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.meal-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.meal-badge--breakfast {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
}

.meal-badge--lunch {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
}

.meal-badge--dinner {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    color: #5b21b6;
}

.meal-badge--snack {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
    color: #9d174d;
}

/* ============================================
   MEAL CARDS - Enhanced with type-specific styling
   ============================================ */

.meal-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.3s var(--ease-out-expo),
                box-shadow 0.3s ease,
                background-color 0.3s ease;
}

.meal-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Meal type specific borders */
.meal-card--breakfast {
    border-top: 3px solid var(--color-breakfast);
}

.meal-card--lunch {
    border-top: 3px solid var(--color-lunch);
}

.meal-card--dinner {
    border-top: 3px solid var(--color-dinner);
}

.meal-card--snack {
    border-top: 3px solid var(--color-snack);
}

.meal-card-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--card-header-bg);
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.meal-card-body {
    padding: var(--space-4);
    color: var(--text-color);
}

.meal-item {
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    background-color: var(--color-cream-100);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary-color);
    color: var(--text-color);
    transition: background-color 0.2s ease;
}

.meal-item:hover {
    background-color: var(--color-cream-200);
}

@media (prefers-color-scheme: dark) {
    .meal-badge--breakfast {
        background: linear-gradient(135deg, rgba(254, 243, 199, 0.2), rgba(253, 230, 138, 0.2));
        color: #fcd34d;
    }

    .meal-badge--lunch {
        background: linear-gradient(135deg, rgba(209, 250, 229, 0.2), rgba(167, 243, 208, 0.2));
        color: #6ee7b7;
    }

    .meal-badge--dinner {
        background: linear-gradient(135deg, rgba(237, 233, 254, 0.2), rgba(221, 214, 254, 0.2));
        color: #c4b5fd;
    }

    .meal-badge--snack {
        background: linear-gradient(135deg, rgba(252, 231, 243, 0.2), rgba(251, 207, 232, 0.2));
        color: #f9a8d4;
    }
}

/* Menu generation progress pane - completion celebration animation */
.completion-celebration .checkmark-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--success-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
}

.completion-celebration .checkmark-icon {
    font-size: 2.5rem;
    color: white;
    animation: fadeIn 0.3s ease-in 0.3s forwards;
    opacity: 0;
}

@keyframes scaleIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.completion-celebration .redirect-notice {
    transition: opacity 0.5s ease;
}

/* Navigate-away banner styles */
.navigate-away-banner {
    background: linear-gradient(135deg, rgba(58, 124, 165, 0.1) 0%, rgba(66, 165, 245, 0.1) 100%);
    border: 1px solid rgba(58, 124, 165, 0.2);
    border-radius: var(--radius-lg);
}

@media (prefers-color-scheme: dark) {
    /* Menu generation progress pane */
    #menu-generation-progress .alert {
        border-color: rgba(255, 255, 255, 0.1);
    }

    #menu-generation-progress .alert h5 {
        color: var(--text-color);
    }

    #menu-generation-progress .alert p {
        color: var(--light-text);
    }

    #menu-generation-progress .progress {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .navigate-away-banner {
        background: rgba(58, 124, 165, 0.15) !important;
        color: var(--text-color);
        border-color: rgba(58, 124, 165, 0.3) !important;
    }

    .completion-celebration {
        color: var(--text-color);
    }
}

/* Meal action buttons - mobile-friendly */
.meal-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.meal-actions .btn {
    min-height: 44px; /* WCAG touch target requirement */
    font-size: 0.875rem;
}

/* Calendar grid responsive behavior */
@media (min-width: 768px) {
    .menu-calendar-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1rem;
    }
    
    .menu-day-column {
        min-height: 400px;
    }
}

/* Mobile stack layout */
@media (max-width: 767.98px) {
    .menu-calendar-grid {
        display: block;
    }
    
    .menu-day-column {
        margin-bottom: 1.5rem;
    }
    
    .meal-actions {
        flex-direction: column;
    }
    
    .meal-actions .btn {
        width: 100%;
    }
}

/* Shopping List */
.shopping-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.shopping-item.checked {
    text-decoration: line-through;
    color: var(--light-text);
}

/* Form Styles */
.form-control:focus, .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.25rem rgba(129, 199, 132, 0.25);
}

/* Footer */
footer {
    border-top: 1px solid var(--border-color);
}

/* AlpineJS x-cloak */
[x-cloak] {
    display: none !important;
}

/* Menu deletion progress styles */
.deleting {
    opacity: 0.6;
    background-color: rgba(0, 0, 0, 0.05);
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

@media (prefers-color-scheme: dark) {
    .deleting {
        background-color: rgba(255, 255, 255, 0.05);
    }
}

.deleting .btn.disabled {
    pointer-events: none;
    opacity: 0.65;
}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-cream-200);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary-400);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-cream-200);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-500);
}

@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-track {
        background: var(--color-cream-200);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--color-primary-600);
        border-color: var(--color-cream-200);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-primary-500);
    }
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
    background: linear-gradient(135deg, var(--color-cream-100) 0%, var(--color-cream-200) 100%);
    position: relative;
    overflow: hidden;
    padding: var(--space-16) 0;
}

/* Decorative background blobs */
.hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 50%;
    height: 120%;
    background: radial-gradient(ellipse, rgba(255, 209, 102, 0.2) 0%, transparent 70%);
    transform: rotate(-15deg);
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 40%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(26, 71, 42, 0.08) 0%, transparent 70%);
    transform: rotate(10deg);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--color-primary-700);
    line-height: 1.1;
    margin-bottom: var(--space-6);
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: var(--color-stone);
    margin-bottom: var(--space-8);
    max-width: 600px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 107, 53, 0.1);
    border: 1px solid rgba(255, 107, 53, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent-500);
    margin-bottom: var(--space-6);
}

.hero-badge i {
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.15) rotate(10deg); }
}

.hero-stats {
    display: flex;
    gap: var(--space-10);
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-color);
}

.hero-stat {
    text-align: left;
}

.hero-stat-number {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary-700);
    line-height: 1;
}

.hero-stat-label {
    font-size: 0.875rem;
    color: var(--color-stone);
    margin-top: var(--space-1);
}

/* Floating decorative elements */
.floating-element {
    position: absolute;
    animation: float 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(3deg); }
}

@media (prefers-color-scheme: dark) {
    .hero {
        background: linear-gradient(135deg, var(--background-color) 0%, var(--light-background) 100%);
    }

    .hero::before {
        background: radial-gradient(ellipse, rgba(255, 209, 102, 0.1) 0%, transparent 70%);
    }

    .hero::after {
        background: radial-gradient(ellipse, rgba(93, 174, 102, 0.1) 0%, transparent 70%);
    }

    .hero-title {
        color: var(--text-color);
    }

    .hero-stat-number {
        color: var(--primary-color);
    }
}

@media (max-width: 768px) {
    .hero {
        padding: var(--space-10) 0;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--space-6);
    }
}

/* ============================================
   FEATURE CARDS
   ============================================ */

.feature-card {
    padding: var(--space-8);
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease-out-expo);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--color-accent-500);
    transition: height 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.feature-card:hover::before {
    height: 100%;
}

.feature-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: var(--space-6);
}

.feature-icon--primary {
    background: linear-gradient(135deg, rgba(26, 71, 42, 0.1) 0%, rgba(45, 90, 63, 0.1) 100%);
    color: var(--color-primary-600);
}

.feature-icon--accent {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 209, 102, 0.1) 100%);
    color: var(--color-accent-500);
}

.feature-icon--highlight {
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.2) 0%, rgba(234, 179, 8, 0.1) 100%);
    color: var(--color-highlight-500);
}

/* ============================================
   CTA SECTION
   ============================================ */

.cta-section {
    background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-800) 100%);
    color: white;
    padding: var(--space-16) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.cta-section h2 {
    color: white;
    margin-bottom: var(--space-4);
}

.cta-section p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.25rem;
    margin-bottom: var(--space-8);
}

.cta-section .btn-primary {
    background: white;
    color: var(--color-primary-700);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.cta-section .btn-primary:hover {
    background: var(--color-highlight-400);
    color: var(--color-primary-800);
}

.cta-steps {
    padding-left: var(--space-6);
    margin: 0;
    list-style: none;
    counter-reset: step-counter;
}

.cta-steps li {
    margin-bottom: var(--space-3);
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    padding-left: var(--space-8);
    counter-increment: step-counter;
}

.cta-steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Enhanced CTA Steps with Icons */
.cta-steps-enhanced {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cta-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.cta-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    color: var(--color-accent-400);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cta-step-text {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    padding-top: 0.5rem;
}

@media (prefers-color-scheme: dark) {
    .cta-step-icon {
        background: rgba(255, 255, 255, 0.1);
        color: var(--color-accent-500);
    }
}

/* ============================================
   ENHANCED FOOTER
   ============================================ */

.footer-enhanced {
    background: var(--color-charcoal);
    color: rgba(255, 255, 255, 0.7);
    padding: var(--space-12) 0 var(--space-6);
}

.footer-enhanced a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-enhanced a:hover {
    color: var(--color-accent-500);
}

.footer-brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.footer-brand span {
    color: var(--color-accent-500);
}

.footer-links h5 {
    color: white;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-6);
    margin-top: var(--space-8);
}

/* ============================================
   FORM ENHANCEMENTS
   ============================================ */

.form-control,
.form-select {
    font-family: var(--font-body);
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--input-bg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 4px rgba(26, 71, 42, 0.1);
}

.form-label {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: var(--space-2);
}

/* ============================================
   ALERT ENHANCEMENTS
   ============================================ */

.alert {
    border-radius: var(--radius-lg);
    border: none;
    padding: var(--space-4) var(--space-5);
}

.alert-success {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(129, 199, 132, 0.1) 100%);
    border-left: 4px solid var(--success-color);
}

.alert-danger {
    background: linear-gradient(135deg, rgba(214, 69, 69, 0.1) 0%, rgba(239, 83, 80, 0.1) 100%);
    border-left: 4px solid var(--danger-color);
}

.alert-warning {
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.15) 0%, rgba(234, 179, 8, 0.1) 100%);
    border-left: 4px solid var(--warning-color);
}

.alert-info {
    background: linear-gradient(135deg, rgba(58, 124, 165, 0.1) 0%, rgba(66, 165, 245, 0.1) 100%);
    border-left: 4px solid var(--info-color);
}

/* ============================================
   FOOTER - Enhanced Design
   ============================================ */

.site-footer {
    background: linear-gradient(180deg, var(--color-primary-800) 0%, var(--color-primary-900) 100%);
    border-top: 3px solid var(--color-accent-500);
    color: rgba(255, 255, 255, 0.9);
    padding: var(--space-12) 0 var(--space-8);
    margin-top: var(--space-16);
    position: relative;
}

/* Section headings */
.footer-heading {
    font-family: var(--font-display);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-4);
}

/* Brand styling */
.footer-brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.footer-brand .brand-icon {
    color: var(--color-accent-500);
    font-size: 1.25rem;
}

/* Tagline */
.footer-tagline {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

/* Navigation list */
.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li {
    margin-bottom: var(--space-2);
}

.footer-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.footer-link:hover {
    color: var(--color-accent-400);
    transform: translateX(3px);
}

/* Newsletter form */
.footer-newsletter {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-newsletter .form-control {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.9rem;
}

.footer-newsletter .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.footer-newsletter .form-control:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--color-accent-400);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

/* Bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-6);
    margin-top: var(--space-8);
}

.site-footer .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .site-footer {
        background: linear-gradient(180deg, #141312 0%, #0d0c0c 100%);
    }

    .footer-newsletter {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.08);
    }
}

/* Responsive: Mobile stack */
@media (max-width: 991.98px) {
    .site-footer {
        padding: var(--space-10) 0 var(--space-6);
    }

    .footer-brand-wrapper {
        text-align: center;
        margin-bottom: var(--space-6);
    }

    .footer-brand {
        justify-content: center;
    }

    .footer-heading {
        margin-top: var(--space-4);
    }
}

@media (max-width: 575.98px) {
    .footer-newsletter-form {
        flex-direction: column;
    }

    .footer-newsletter-form .btn {
        width: 100%;
    }
}

/* ============================================
   SUBSCRIPTION PLAN CARDS
   ============================================ */

.plan-card {
    position: relative;
    border-radius: var(--radius-xl);
    border: 2px solid var(--border-color);
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: visible;
}

.plan-card--current {
    border-color: var(--color-primary-500);
    background: linear-gradient(135deg, rgba(60, 145, 71, 0.03) 0%, rgba(60, 145, 71, 0.08) 100%);
}

.plan-card--featured {
    border-color: var(--color-accent-500);
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.03) 0%, rgba(255, 107, 53, 0.08) 100%);
    transform: scale(1.02);
}

.plan-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 600;
    font-size: 0.8rem;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    white-space: nowrap;
    z-index: 10;
}

.plan-badge--current {
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
    color: white;
}

.plan-badge--popular {
    background: linear-gradient(135deg, var(--color-accent-500) 0%, var(--color-accent-600) 100%);
    color: white;
}

.plan-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    font-size: 1.75rem;
    color: white;
}

.plan-icon--free {
    background: linear-gradient(135deg, var(--color-stone) 0%, var(--color-stone-light) 100%);
}

.plan-icon--foodie {
    background: linear-gradient(135deg, var(--color-accent-500) 0%, var(--color-accent-600) 100%);
}

.plan-icon--chef {
    background: linear-gradient(135deg, var(--color-dinner) 0%, #6d28d9 100%);
}

.plan-price {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.2;
}

.plan-price-period {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--light-text);
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.plan-features li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-cream-200);
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-feature-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-3);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.plan-feature-icon--check {
    background: rgba(60, 145, 71, 0.1);
    color: var(--color-primary-500);
}

.plan-feature-icon--x {
    background: rgba(214, 69, 69, 0.1);
    color: var(--danger-color);
}

/* ============================================
   AUTOMATION CARD
   ============================================ */

.automation-card {
    border-radius: var(--radius-xl);
    border: 2px solid var(--color-primary-200);
    overflow: hidden;
}

.automation-card .card-header {
    background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-600) 100%);
    color: white;
    border-bottom: none;
    padding: var(--space-4);
}

.automation-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* ============================================
   SHOPPING CARD
   ============================================ */

.shopping-card {
    border-radius: var(--radius-xl);
    border: 2px solid var(--color-primary-500);
    overflow: hidden;
}

.shopping-card .card-header {
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
    color: white;
    border-bottom: none;
    padding: var(--space-4);
}

.shopping-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.shopping-card .shopping-menu-name {
    color: var(--color-primary-600);
}

.shopping-card .shopping-stat-value {
    color: var(--color-primary-500);
}

.shopping-card .shopping-stat-label {
    font-size: 0.75rem;
}

.shopping-card .shopping-stat-divider {
    width: 1px;
    background: var(--color-cream-200);
}

.shopping-card .progress {
    height: 8px;
}

.shopping-card .progress-bar {
    background-color: var(--color-primary-500);
}

/* ============================================
   ACCORDION ENHANCEMENTS
   ============================================ */

.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg) !important;
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.accordion-button {
    font-family: var(--font-body);
    font-weight: 600;
    background: var(--color-cream-100);
    padding: var(--space-4) var(--space-5);
}

.accordion-button:not(.collapsed) {
    background: var(--color-cream-200);
    color: var(--text-color);
}

.accordion-button:focus {
    box-shadow: 0 0 0 4px rgba(26, 71, 42, 0.1);
}

.accordion-body {
    padding: var(--space-4) var(--space-5);
    background: var(--color-cream-50);
}

/* ============================================
   STATUS BADGES
   ============================================ */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-badge--success {
    background: rgba(60, 145, 71, 0.15);
    color: var(--color-primary-600);
}

.status-badge--pending {
    background: rgba(234, 179, 8, 0.15);
    color: #92700c;
}

.status-badge--failed {
    background: rgba(214, 69, 69, 0.15);
    color: var(--danger-color);
}

.status-badge--generating {
    background: rgba(255, 107, 53, 0.15);
    color: var(--color-accent-600);
}

.status-badge--info {
    background: rgba(58, 124, 165, 0.15);
    color: var(--info-color);
}

/* ============================================
   STAR RATING COMPONENT
   ============================================ */

.star-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.star-rating .star {
    font-size: 1.25rem;
    color: var(--color-cream-300);
    transition: color 0.15s ease, transform 0.15s ease;
}

.star-rating .star--filled {
    color: var(--color-highlight-400);
}

.star-rating--interactive .star {
    cursor: pointer;
}

.star-rating--interactive .star:hover {
    color: var(--color-highlight-400);
    transform: scale(1.15);
}

.star-rating--interactive .star:hover ~ .star {
    color: var(--color-cream-300);
}

/* Meal-type colored star ratings */
.star-rating--breakfast .star--filled { color: var(--color-breakfast); }
.star-rating--lunch .star--filled { color: var(--color-lunch); }
.star-rating--dinner .star--filled { color: var(--color-dinner); }
.star-rating--snack .star--filled { color: var(--color-snack); }

/* ============================================
   INVOICE & BILLING CARDS
   ============================================ */

.invoice-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    padding: var(--space-4);
    transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s ease;
}

.invoice-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.invoice-card-header {
    background: linear-gradient(135deg, var(--color-cream-100) 0%, var(--color-cream-200) 100%);
    padding: var(--space-4);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin: calc(var(--space-4) * -1);
    margin-bottom: var(--space-4);
}

.invoice-amount {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary-700);
}

.payment-method-card {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    padding: var(--space-4);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.payment-method-card:hover {
    border-color: var(--color-primary-300);
    box-shadow: var(--shadow-sm);
}

.payment-method-card--default {
    border-color: var(--color-primary-500);
    background: linear-gradient(135deg, rgba(60, 145, 71, 0.03) 0%, rgba(60, 145, 71, 0.08) 100%);
}

.payment-method-card--expired {
    border-color: var(--danger-color);
    opacity: 0.7;
}

.payment-method-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--color-cream-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-primary-600);
}

/* ============================================
   SHOPPING LIST ENHANCEMENTS
   ============================================ */

.shopping-section-header {
    background: var(--color-cream-100);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.shopping-section-header:hover {
    background: var(--color-cream-200);
}

.shopping-section-header i {
    font-size: 1.25rem;
}

/* Category-specific colors */
.shopping-section-header--produce i { color: var(--color-lunch); }
.shopping-section-header--meat i { color: #dc2626; }
.shopping-section-header--dairy i { color: #3b82f6; }
.shopping-section-header--bakery i { color: var(--color-breakfast); }
.shopping-section-header--pantry i { color: var(--color-stone); }
.shopping-section-header--frozen i { color: #06b6d4; }
.shopping-section-header--beverages i { color: var(--color-dinner); }
.shopping-section-header--other i { color: var(--color-stone-light); }

.shopping-item--checked {
    opacity: 0.5;
    text-decoration: line-through;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.shopping-item--checking {
    animation: slideOutRight 0.3s var(--ease-out-expo) forwards;
}

@keyframes slideOutRight {
    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

.shopping-progress {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-cream-50);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-4);
}

.shopping-progress-bar {
    height: 8px;
    background: var(--color-cream-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.shopping-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-400) 100%);
    border-radius: var(--radius-full);
    transition: width 0.5s var(--ease-out-expo);
}

.shopping-progress-text {
    font-size: 0.875rem;
    color: var(--light-text);
    margin-top: var(--space-2);
}

/* ============================================
   FORM CHECK CARDS
   ============================================ */

.form-check-card {
    position: relative;
    padding: var(--space-4);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s var(--ease-out-expo);
}

.form-check-card:hover {
    border-color: var(--color-primary-300);
    transform: translateY(-2px);
}

.form-check-card--selected {
    border-color: var(--color-primary-500);
    background: linear-gradient(135deg, rgba(60, 145, 71, 0.03) 0%, rgba(60, 145, 71, 0.08) 100%);
}

.form-check-card input[type="radio"],
.form-check-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.form-check-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-cream-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: var(--space-3);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.form-check-card--selected .form-check-card-icon {
    background: var(--color-primary-500);
    color: white;
}

/* ============================================
   FORM VALIDATION STATES
   ============================================ */

.form-control-valid {
    border-left: 3px solid var(--success-color) !important;
}

.form-control-invalid {
    border-left: 3px solid var(--danger-color) !important;
}

.validation-feedback {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    margin-top: var(--space-2);
}

.validation-feedback--success {
    color: var(--success-color);
}

.validation-feedback--error {
    color: var(--danger-color);
}

/* ============================================
   BUTTON LOADING STATE
   ============================================ */

.btn-loading {
    position: relative;
    pointer-events: none;
}

.btn-loading .btn-text {
    opacity: 0;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin-top: -0.5rem;
    margin-left: -0.5rem;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   MEAL FEEDBACK BUTTONS
   ============================================ */

.meal-feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.meal-feedback-btn:hover {
    border-color: var(--color-primary-300);
    background: var(--color-cream-100);
}

.meal-feedback-btn--love {
    color: var(--color-snack);
}

.meal-feedback-btn--love:hover,
.meal-feedback-btn--love.active {
    border-color: var(--color-snack);
    background: rgba(236, 72, 153, 0.1);
}

.meal-feedback-btn--dislike {
    color: var(--color-stone);
}

.meal-feedback-btn--dislike:hover,
.meal-feedback-btn--dislike.active {
    border-color: var(--danger-color);
    background: rgba(214, 69, 69, 0.1);
    color: var(--danger-color);
}

/* ============================================
   ONBOARDING ENHANCEMENTS
   ============================================ */

.onboarding-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) 0;
    margin-bottom: var(--space-6);
}

.onboarding-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    position: relative;
}

.onboarding-step::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--border-color);
    z-index: 0;
}

.onboarding-step:last-child::before {
    display: none;
}

.onboarding-step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-cream-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--light-text);
    z-index: 1;
    transition: all 0.3s ease;
}

.onboarding-step--active .onboarding-step-icon {
    background: var(--color-primary-500);
    color: white;
    transform: scale(1.1);
}

.onboarding-step--completed .onboarding-step-icon {
    background: var(--color-primary-500);
    color: white;
}

.onboarding-step--completed::before {
    background: var(--color-primary-500);
}

.onboarding-step-label {
    font-size: 0.75rem;
    color: var(--light-text);
    text-align: center;
    transition: color 0.2s ease;
}

.onboarding-step--active .onboarding-step-label {
    color: var(--color-primary-700);
    font-weight: 600;
}

/* ============================================
   PAGE TITLE WITH DISPLAY FONT
   ============================================ */

.page-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: var(--space-4);
}

.page-subtitle {
    font-family: var(--font-body);
    color: var(--light-text);
    font-size: 1.125rem;
    margin-bottom: var(--space-6);
}

/* ============================================
   SECTION HEADINGS
   ============================================ */

.section-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: var(--space-4);
}

/* ============================================
   RECIPE PAGE ENHANCEMENTS
   ============================================ */

.recipe-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    color: var(--text-color);
    margin-bottom: var(--space-4);
}

.recipe-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.recipe-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-cream-100);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.recipe-meta-item i {
    color: var(--color-primary-600);
}

.recipe-section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--text-color);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-cream-200);
}

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

.ingredient-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-cream-200);
}

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

.ingredient-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary-500);
    margin-top: 6px;
    flex-shrink: 0;
}

.nutrition-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.nutrition-item {
    background: var(--color-cream-100);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    text-align: center;
}

.nutrition-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary-600);
}

.nutrition-label {
    font-size: 0.75rem;
    color: var(--light-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   SERVINGS CONTROL
   ============================================ */

.servings-control {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-cream-100);
    padding: var(--space-2);
    border-radius: var(--radius-md);
}

.servings-control-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--color-primary-600);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.servings-control-btn:hover:not(:disabled) {
    background: var(--color-primary-500);
    color: white;
}

.servings-control-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.servings-control-value {
    min-width: 40px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.125rem;
}

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */

.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-800) 100%);
    color: white;
    padding: var(--space-4) 0;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    border-top: 3px solid var(--color-accent-500);
}

.cookie-consent-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.cookie-consent-text {
    flex: 1;
    min-width: 280px;
}

.cookie-consent-heading {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: var(--space-2);
    color: white;
    display: flex;
    align-items: center;
}

.cookie-consent-message {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

.cookie-consent-link {
    color: var(--color-accent-400);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-consent-link:hover {
    color: var(--color-accent-300);
}

.cookie-consent-actions {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
}

.cookie-consent-btn {
    font-weight: 600;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    white-space: nowrap;
    min-height: 44px;
}

.cookie-consent-btn-accept {
    background: white;
    color: var(--color-primary-700);
    border-color: white;
}

.cookie-consent-btn-accept:hover {
    background: var(--color-highlight-400);
    border-color: var(--color-highlight-400);
    color: var(--color-primary-800);
}

/* Mobile responsive */
@media (max-width: 575.98px) {
    .cookie-consent-banner {
        padding: var(--space-4);
    }

    .cookie-consent-content {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-consent-actions {
        flex-direction: column;
        width: 100%;
    }

    .cookie-consent-btn {
        width: 100%;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .cookie-consent-banner {
        background: linear-gradient(135deg, #1a1918 0%, #0d0c0c 100%);
        border-top-color: var(--color-accent-500);
    }

    .cookie-consent-btn-accept {
        background: var(--color-accent-500);
        border-color: var(--color-accent-500);
        color: white;
    }

    .cookie-consent-btn-accept:hover {
        background: var(--color-accent-400);
        border-color: var(--color-accent-400);
    }
}

/* ============================================
   MENU EDIT MODE
   ============================================ */

.edit-mode-table .meal-cell {
    vertical-align: top;
    min-width: 180px;
}

.meal-card-edit {
    padding: 0.5rem;
    border-radius: var(--radius-md);
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-200);
    transition: all 0.2s ease;
    animation: fadeIn 0.3s ease-in;
}

.meal-card-edit:hover {
    border-color: var(--color-primary-300);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.meal-card-edit.empty-slot {
    background: transparent;
    border-style: dashed;
    text-align: center;
    padding: 1rem 0.5rem;
}

.meal-card-edit .meal-name {
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.3;
}

.meal-card-edit .meal-actions {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

.meal-card-edit .meal-actions .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.edit-mode-table .date-cell {
    white-space: nowrap;
    vertical-align: middle;
}

.meal-card-edit .add-meal-form {
    width: 100%;
}

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

/* ============================================
   PREFERENCE BUTTON CARDS
   Used with Bootstrap btn-check for radio/checkbox groups
   ============================================ */

.preference-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--radius-md);
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    font-weight: normal;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.preference-btn:hover {
    border-color: var(--color-primary-300);
    background: rgba(60, 145, 71, 0.04);
    color: var(--text-color);
}

.btn-check:checked + .preference-btn {
    border-color: var(--color-primary-500) !important;
    background: linear-gradient(135deg, rgba(60, 145, 71, 0.04), rgba(60, 145, 71, 0.10)) !important;
    box-shadow: inset 0 0 0 1px var(--color-primary-500);
    color: var(--text-color) !important;
}

.btn-check:focus-visible + .preference-btn {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
    box-shadow: none;
}

.preference-btn .option-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.preference-btn .option-desc {
    font-size: 0.85rem;
    color: var(--light-text);
    margin-top: 2px;
}

/* Multi-select checkmark indicator on preference buttons */
.btn-check[type="checkbox"] + .preference-btn {
    position: relative;
}

.btn-check[type="checkbox"]:checked + .preference-btn::after {
    content: '\2713';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--color-primary-500);
    line-height: 1;
}

/* ============================================
   PREFERENCE CHIP / PILL SELECTORS
   Compact selectable items for tags, cuisines, etc.
   Used with Bootstrap btn-check to hide native inputs
   ============================================ */

.preference-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--radius-full);
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    font-size: 0.875rem;
    font-weight: 500;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.preference-chip:hover {
    border-color: var(--color-primary-300);
    background: rgba(60, 145, 71, 0.04);
    color: var(--text-color);
}

.btn-check:checked + .preference-chip {
    border-color: var(--color-primary-500) !important;
    background: rgba(60, 145, 71, 0.08) !important;
    color: var(--color-primary-600) !important;
    font-weight: 600;
}

.btn-check:checked + .preference-chip::before {
    content: '\2713\00a0';
    font-weight: bold;
}

.btn-check:focus-visible + .preference-chip {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* ============================================
   FORM SWITCH TOGGLES
   Override Bootstrap default blue with app primary green
   ============================================ */

.form-switch .form-check-input:checked {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

.form-switch .form-check-input:focus {
    border-color: var(--color-primary-300);
    box-shadow: 0 0 0 0.25rem rgba(60, 145, 71, 0.25);
}

/* ============================================
   UNIFIED SAVE TOAST
   Single global save indicator for all preference tabs.
   Replaces per-fragment inline save indicators.
   ============================================ */

.pref-save-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: var(--success-color);
    color: white;
    border-radius: var(--radius-md);
    z-index: 10000;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: var(--shadow-md);
    animation: prefToastAnim 1.8s ease-in-out forwards;
}

@keyframes prefToastAnim {
    0% { opacity: 0; transform: translateY(20px); }
    15% { opacity: 1; transform: translateY(0); }
    75% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}

/* ============================================
   AUTO-CALCULATED FIELD STYLING
   Replaces hardcoded #2196F3 blue with design system green.
   ============================================ */

.pref-auto-calculated {
    background-color: rgba(60, 145, 71, 0.06) !important;
    border-color: var(--color-primary-400) !important;
}

/* ============================================
   PREFERENCE SECTION VISUAL DISTINCTION
   ============================================ */

.pref-section-allergens {
    border-left: 3px solid var(--color-highlight-500);
    padding-left: var(--space-4);
}

.pref-section-disliked {
    border-left: 3px solid var(--border-color);
    padding-left: var(--space-4);
}

/* ============================================
   CUISINE REGION HEADINGS
   ============================================ */

.cuisine-region-heading {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   PREFERENCE TAB MOBILE SCROLLING
   ============================================ */

@media (max-width: 767.98px) {
    #preferenceTabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 2px;
    }
    #preferenceTabs .nav-link {
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ============================================
   TOUCH TARGET ENFORCEMENT
   ============================================ */

@media (pointer: coarse) {
    .preference-chip {
        min-height: 44px;
    }
}

/* ============================================
   MEAL-SPECIFIC CARD HEADER COLORS
   ============================================ */

.meal-card-breakfast { border-top: 3px solid var(--color-breakfast); }
.meal-card-lunch { border-top: 3px solid var(--color-lunch); }
.meal-card-dinner { border-top: 3px solid var(--color-dinner); }
.meal-card-snack { border-top: 3px solid var(--color-snack); }

/* ============================================
   MOBILE RESPONSIVE OVERRIDES (MM-193)
   ============================================ */

@media (max-width: 767.98px) {

    /* --- Cookie banner body padding (mobile only — desktop banner is fixed, no content shift needed) --- */
    body.cookie-banner-visible {
        padding-bottom: calc(var(--cookie-banner-height, 120px) + 1rem);
    }

    /* --- Page headers: stack title above buttons (MM-194, MM-195) --- */
    .page-header-mobile {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
    .page-header-mobile .page-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .page-header-mobile .page-header-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.8125rem;
        padding: 0.375rem 0.75rem;
    }

    /* --- Menu history: show cards, hide table (MM-197) --- */
    .menu-history-table { display: none !important; }
    .menu-history-cards { display: block !important; }

    /* --- Menu calendar: show cards, hide table (MM-196) --- */
    .menu-calendar-table { display: none !important; }
    .menu-calendar-cards { display: block !important; }

    /* --- Recipe: show mobile action bar, hide sidebar (MM-200) --- */
    .recipe-mobile-actions { display: flex !important; flex-wrap: wrap; }
    .recipe-sidebar-desktop { display: none !important; }

    /* --- Shopping list inline: collapse to CTA (MM-202) --- */
    .shopping-list-inline-full { display: none !important; }
    .shopping-list-inline-cta { display: block !important; }

    /* --- Homepage: collapse onboarding sections (MM-201) --- */
    .onboarding-collapsible { display: none !important; }

    /* --- Footer touch targets (MM-203) --- */
    footer a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* --- Mobile calendar card styles --- */
    .menu-calendar-cards .card-header {
        background: var(--color-cream-100);
    }
    .menu-calendar-cards .meal-item {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--color-cream-200);
    }
    .menu-calendar-cards .meal-item:last-child {
        border-bottom: none;
    }
    .menu-calendar-cards .meal-type-label {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--light-text);
        margin-bottom: 0.25rem;
    }
    .menu-calendar-cards .meal-item a {
        font-weight: 500;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .menu-calendar-cards .meal-meta {
        font-size: 0.8125rem;
        color: var(--light-text);
        margin-top: 0.25rem;
    }

    /* --- Mobile history card styles --- */
    .menu-history-cards .card {
        border-left: 3px solid var(--color-primary-500);
    }
    .menu-history-cards .card .btn {
        font-size: 0.8125rem;
        min-height: 44px;
    }

    /* --- Recipe mobile action bar --- */
    .recipe-mobile-actions .btn {
        min-height: 44px;
    }
}

/* --- Desktop: inverse visibility --- */
@media (min-width: 768px) {
    .menu-history-cards { display: none !important; }
    .menu-calendar-cards { display: none !important; }
    .recipe-mobile-actions { display: none !important; }
    .shopping-list-inline-cta { display: none !important; }
}

/* --- Small phone overrides (MM-204) --- */
@media (max-width: 375px) {
    .page-title {
        font-size: 1.5rem;
    }
    .menu-calendar-cards .card-body,
    .menu-history-cards .card-body {
        padding: 0.75rem;
    }
    .page-header-mobile .page-header-actions .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}