/* 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;
    /* #6b6259 clears WCAG 1.4.3 AA (4.5:1) for muted body text on every surface it
       lands on: 5.6:1 on cream (--color-cream-100), 6.0:1 on white, and 4.65:1 on
       the gray .alert-secondary tint (#e2e3e5). The original #7a7067 was 4.49:1 —
       failing by a hair. Darkening a foreground only raises contrast, so decorative
       uses (borders, icon tints, gradients) stay safe. */
    --color-stone: #6b6259;
    --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;

        /* Bootstrap primary override for dark mode — #5dae66 (light green) gives
           sufficient contrast on dark backgrounds; the light-mode value (#1a472a)
           is near-black and fails on dark surfaces. */
        --bs-primary: #5dae66;
        --bs-primary-rgb: 93, 174, 102;

        /* 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;
    /* Prevent labels from wrapping to a second line at medium widths,
       which produced uneven heights between two-word and one-word items. */
    white-space: nowrap;
}

/* xl–xxl gap: full nav fits but the standard 1140px container is too tight
   for 8 nav items. Widen the navbar's container and tighten link padding. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar > .container {
        max-width: 100%;
    }
    .navbar .nav-link {
        padding: var(--space-2) var(--space-2) !important;
    }
    .navbar .nav-link i {
        margin-right: 0.125rem !important;
    }
}

@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;
}

/* Saved/Recipe Book Button — amber/yellow star (MM-255).
   Distinct from .btn-loved (red heart) so users can tell at a glance
   which gesture they're making: Love = in-menu reaction, Save = keep in
   Recipe Book. */
.btn-saved,
.btn-outline-saved {
    /* Keep the tap target large enough for mobile without stretching it
       when sitting inline next to a recipe name. */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.6rem;
    line-height: 1;
    transition: background-color 150ms ease, border-color 150ms ease,
                color 150ms ease, transform 120ms ease;
}

.btn-saved {
    background: var(--color-highlight-500);  /* amber: #eab308 */
    border: 2px solid var(--color-highlight-500);
    color: #fff;
}

.btn-saved:hover,
.btn-saved:focus {
    background: var(--color-highlight-400);  /* lighter amber */
    border-color: var(--color-highlight-400);
    color: #fff;
}

.btn-saved:focus-visible,
.btn-outline-saved:focus-visible {
    outline: 3px solid var(--color-highlight-300);
    outline-offset: 2px;
}

.btn-saved:active,
.btn-outline-saved:active {
    transform: scale(0.94);
}

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

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

/* When the star lives inside dense list rows (menu calendar, mobile cards)
   we want it to read as an icon affordance, not a big chunky button. */
/* Assumes save-star.html always renders `btn btn-sm` on the button — if the
   fragment's class combo ever changes, this selector goes silent. */
.save-star.btn-sm i {
    font-size: 1rem;
}

/* 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;
    }

    .btn-saved {
        background: var(--color-highlight-500);
        border-color: var(--color-highlight-500);
        color: #000;
    }

    .btn-saved:hover,
    .btn-saved:focus {
        background: var(--color-highlight-400);
        border-color: var(--color-highlight-400);
        color: #000;
    }

    .btn-outline-saved {
        color: var(--color-highlight-400);
        border-color: var(--color-highlight-400);
    }

    .btn-outline-saved:hover,
    .btn-outline-saved:focus {
        background: var(--color-highlight-500);
        color: #000;
    }
}

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

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

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

/* Nutrition preferences loading spinner: opacity-based .htmx-indicator above still
   reserves layout space (opacity:0) even when idle, which reads as a large empty
   gap between the Nutrition Mode row and the mode-specific content below it. This
   spinner is shared by all three modes (Simple/Balanced/Precise), so collapse it
   out of the layout entirely until htmx actually adds .htmx-request to it. */
#nutrition-loading {
    display: none;
}

#nutrition-loading.htmx-request {
    display: block;
}

/* 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;
    /* Darker burnt-orange (not accent-500 #ff6b35, which is only 2.4:1) so the
       label clears 4.5:1 on the badge's translucent-accent tint (~#fbe8de). */
    color: #b23a0c;
    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-top: 0;
    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.75); /* WCAG AA: boosted from 0.6 opacity for sufficient contrast on dark background */
    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.75) !important; /* WCAG AA: boosted from 0.5 opacity for sufficient contrast on dark background */
}

/* 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);
}

/* ============================================
   WEEKLY DASHBOARD
   ============================================ */

.weekly-dashboard {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: clamp(var(--space-5), 4vw, var(--space-8));
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-md);
}

.weekly-dashboard-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: var(--color-accent-100);
    color: var(--color-accent-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex: 0 0 auto;
}

.weekly-dashboard-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.12;
    color: var(--heading-color);
}

.weekly-dashboard-copy {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 58ch;
}

.dashboard-panels {
    display: grid;
    gap: var(--space-3);
}

.dashboard-panel {
    background: var(--color-cream-50);
    border: 1px solid var(--color-cream-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.dashboard-panel-label {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dashboard-panel-value {
    color: var(--heading-color);
    font-size: 1.05rem;
    font-weight: 700;
}

.dashboard-progress {
    height: 8px;
}

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

@media (max-width: 575.98px) {
    .weekly-dashboard .d-flex.align-items-start {
        flex-direction: column;
    }
}

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

/* ============================================
   AI RECIPE CHAT (MM-259)
   ============================================ */

#recipe-chat-panel .recipe-chat-messages {
    max-height: 420px;
    overflow-y: auto;
}

#recipe-chat-panel .recipe-chat-bubble {
    display: inline-block;
    padding: .5rem .75rem;
    border-radius: .75rem;
    max-width: 85%;
    white-space: pre-wrap;
    word-break: break-word;
}

#recipe-chat-panel .recipe-chat-bubble-user {
    background: var(--color-primary-700, #1a472a);
    color: #fff;
    border-bottom-right-radius: .2rem;
}

#recipe-chat-panel .recipe-chat-assistant-card {
    background: var(--color-cream-100, #faf6f1);
}

#recipe-chat-panel .recipe-chat-added {
    color: #15803d;
}

#recipe-chat-panel .recipe-chat-removed {
    color: #b91c1c;
    text-decoration: line-through;
}

#recipe-chat-panel .recipe-chat-disclaimer {
    font-size: .75rem;
}

/* ============================================
   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 EDITING — per-meal action sheet (MM-283, Phase 3)
   ============================================ */

/* Toolbar above the calendar: swaps-left pill + Select button */
.swaps-left-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary-600, var(--color-primary-500));
    background: var(--color-cream-100);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    white-space: nowrap;
}

/* Per-card top row: select checkbox (select mode) + "⋯" action trigger */
.meal-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.meal-action-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    color: var(--light-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    line-height: 1;
}

.meal-action-trigger:hover,
.meal-action-trigger:focus-visible {
    background: var(--color-cream-100);
    color: var(--text-color);
}

.add-meal-btn {
    border-style: dashed;
}

/* Select mode: checkboxes are hidden until the Weekly Menu "Select" button is on */
.regen-select {
    display: none;
}

#menu-calendar-container.select-mode .regen-select {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    margin: 0;
    padding-left: 0;
    cursor: pointer;
}

.regen-select .regen-select-checkbox {
    float: none;
    margin: 0;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    cursor: pointer;
}

.regen-select .form-check-label {
    cursor: pointer;
}

/* Shared per-meal action sheet (Bootstrap offcanvas, bottom placement).
   Mobile: full-width bottom sheet. Desktop: same element, content centered to a
   compact column (avoids fighting Bootstrap's slide-up transform). */
.meal-action-sheet {
    height: auto;
    max-height: 85vh;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.meal-sheet-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.meal-sheet-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.6rem 0.75rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-color);
    text-decoration: none;
    font-size: 1rem;
    text-align: left;
}

.meal-sheet-action:hover,
.meal-sheet-action:focus-visible {
    background: var(--color-cream-100);
    color: var(--text-color);
}

.meal-sheet-action i {
    font-size: 1.15rem;
    width: 1.5rem;
    text-align: center;
    color: var(--color-primary-500);
}

.meal-sheet-action--danger,
.meal-sheet-action--danger i {
    color: var(--bs-danger, #dc3545);
}

@media (min-width: 768px) {
    .meal-action-sheet .offcanvas-header,
    .meal-action-sheet .offcanvas-body {
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
        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); }

/* ============================================
   SUBSCRIPTION TRIAL MESSAGING (MM-226)
   ============================================
   Used by /subscription/plans, /subscription/checkout, and /subscription/success
   to highlight the 14-day free trial as a selling point. Mobile overrides live
   in the MOBILE RESPONSIVE OVERRIDES block below at the project's standard
   767.98px breakpoint. */

.trial-callout {
    display: inline-block;
    padding: 0.5rem 0.875rem;
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 8px;
    color: var(--text-color, #212529);
}
.trial-callout > i {
    color: var(--color-accent-500, #f59e0b);
}

.trial-banner {
    background: linear-gradient(135deg, #f0fff4 0%, #e6fff0 100%);
    border: 1px solid #28a745;
    border-radius: 8px;
    padding: 20px;
}
.trial-banner-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.trial-banner-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.trial-banner-item > i {
    font-size: 1.5rem;
    color: #28a745;
    flex-shrink: 0;
    margin-top: 2px;
}
.billing-summary .due-today {
    font-size: 1.5rem;
    color: #28a745;
}

@media (prefers-color-scheme: dark) {
    .trial-banner {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.10) 0%, rgba(40, 167, 69, 0.18) 100%);
        border-color: rgba(40, 167, 69, 0.5);
        color: var(--text-color);
    }
    .trial-callout {
        background: rgba(255, 193, 7, 0.10);
        border-color: rgba(255, 193, 7, 0.35);
    }
}

/* ============================================
   WCAG AA COLOR CONTRAST OVERRIDES (MM-264)
   ============================================
   Bootstrap 5 ships with several colors that narrowly miss the 4.5:1
   contrast ratio required by WCAG 1.4.3 (Minimum, Level AA). These
   overrides darken those colors just enough to pass while preserving
   the design intent. */

/* text-muted: Bootstrap default #6c757d = 4.48:1 on white — just below 4.5:1.
   Override to #5a6472 = 5.2:1 on white. Scoped to light mode only so dark
   mode text-muted retains its own contrast-appropriate color. */
@media (prefers-color-scheme: light) {
    .text-muted {
        color: #5a6472 !important;
    }

    /* Bootstrap's default inline <code> color #d63384 = 4.18:1 on the cream page
       background — just below 4.5:1. Darken to #b02a6f = 5.7:1 on cream / 6.6:1 on
       white. Scoped to light mode so dark mode keeps its own code styling. */
    code {
        color: #b02a6f;
    }
}

/* Bootstrap's default --bs-primary (#0d6efd) is 3.06:1 on white — fails AA for
   normal-weight text. Override to the project's primary forest green (#1a472a)
   which is 12.6:1 on white. This affects text-primary, spinner-border.text-primary,
   and other Bootstrap primary-colour utilities.
   Scoped to light mode so the dark-mode override at the top of the file wins in
   dark mode (equal :root specificity, source order would otherwise cause this
   later rule to override the dark-mode block). */
@media (prefers-color-scheme: light) {
    :root {
        --bs-primary: #1a472a;
        --bs-primary-rgb: 26, 71, 42;
    }
}

/* --- Overflow ("...") menu trigger: no Bootstrap caret (Menu UX Phase 1) --- */
.dropdown-toggle-no-caret::after {
    display: none;
}

/* Icon-only trigger must still meet the 44px touch-target minimum */
.dropdown-toggle-no-caret {
    min-width: 44px;
}

/* Grouped shopping list renders only in print output (Menu UX Phase 1) */
.shopping-list-print-only { display: none; }

@media print {
    .shopping-list-print-only { display: block !important; }
}

#menu-subtitle {
    font-size: 0.95rem;
}

/* ============================================
   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;
    }
    .page-header-mobile .page-header-actions form {
        flex: 1 1 auto;
        display: grid;
    }

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

    /* --- Recipe Book: show cards, hide table (MM-256) --- */
    .recipe-book-table { display: none !important; }
    .recipe-book-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; }

    /* --- 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-top: 1px solid var(--color-cream-200);
    }
    /* border-top + :first-child (not border-bottom + :last-child, Task 12): the compact
       add-row below is always present in the DOM as a trailing sibling of the meal-item
       list, so ":last-child" no longer reliably identifies the last visible row. Anchoring
       the divider to the top and suppressing it on the first item is order-independent. */
    .menu-calendar-cards .meal-item:first-child {
        border-top: 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 calendar: compact add-row for unplanned meal slots (Task 12) ---
       Horizontal-only padding on the row means it collapses to zero height when no
       unplanned slots are missing (the common case for users who planned all 4 meal
       types); vertical spacing lives on the links themselves so they only take up
       room when actually rendered. */
    .menu-calendar-cards .compact-add-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 1rem;
        padding: 0 1rem;
    }
    .menu-calendar-cards .compact-add-link {
        font-size: 0.8125rem;
        color: var(--light-text);
        text-decoration: underline;
        padding: 0;
        margin: 0.5rem 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .menu-calendar-cards .compact-add-link:hover,
    .menu-calendar-cards .compact-add-link:focus {
        color: var(--primary-color);
    }

    /* --- 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;
    }

    /* --- Mobile Recipe Book card styles (MM-256) --- */
    .recipe-book-cards .card {
        border-left: 3px solid var(--color-accent-500);
    }
    .recipe-book-cards .card .btn {
        font-size: 0.8125rem;
        min-height: 44px;
    }

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

    /* --- AI assistant launcher: icon-only + reserve space below it (Task 10) ---
       The launcher pill (#menu-assistant-launcher / .ai-assistant-launcher,
       styled in menu-assistant.css) floats bottom-right above the Gleap bubble.
       On phones it was wide enough (~150px) to sit over meal-card titles and the
       save-star tap targets. Hiding the text label shrinks it to an icon-only
       button (the flex gap collapses automatically); the button's accessible
       name still comes from the button's own aria-label (set in
       menu-chat.html), so this is a purely visual change. */
    .ai-assistant-launcher .ai-launcher-label {
        display: none;
    }

    /* Reserve space at the bottom of <main> so the last meal card/shopping-list
       row can always scroll clear of the fixed launcher instead of sitting
       underneath it. :has() scopes this to pages that actually render the
       launcher (COMPLETED menu details, owner only) so no other page gets
       extra bottom padding. Sized from the launcher's own mobile geometry in
       menu-assistant.css: bottom offset 5.25rem (84px) + ~48px pill height +
       breathing room ≈ 160px; when the cookie banner is also visible the
       launcher is lifted further (bottom offset ~180px), so that combination
       needs more clearance still. This padding is on <main> and composes with
       (does not replace) the `body.cookie-banner-visible` padding above, which
       shifts the footer down instead. */
    body:has(.ai-assistant-launcher) main {
        padding-bottom: 160px;
    }
    body.cookie-banner-visible:has(.ai-assistant-launcher) main {
        padding-bottom: 260px;
    }

    /* --- Preferences "Saved" confirmation pill: top-center on mobile (Task 10) ---
       .pref-save-toast (created by preferences/index.html's showPrefSaveToast())
       defaults to bottom-right, which the Gleap support bubble sits on top of on
       phones. Move it to a top-center banner instead. The base rule's
       `animation: prefToastAnim 1.8s ease-in-out forwards;` shorthand still
       supplies duration/easing/fill-mode here — only animation-name is
       overridden below with a variant that keeps the horizontal centering
       transform through every keyframe (the original keyframes only translateY,
       which would fight the translateX(-50%) needed for centering). */
    .pref-save-toast {
        top: 12px;
        bottom: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        animation-name: prefToastAnimMobile;
    }

    @keyframes prefToastAnimMobile {
        0% { opacity: 0; transform: translate(-50%, -20px); }
        15% { opacity: 1; transform: translate(-50%, 0); }
        75% { opacity: 1; transform: translate(-50%, 0); }
        100% { opacity: 0; transform: translate(-50%, -10px); }
    }

    /* --- Preference tabs: mobile overflow affordance (Task 11) ---
       #preferenceTabs (base overflow-x:auto scrolling is set up in the
       "PREFERENCE TAB MOBILE SCROLLING" block earlier in this file) renders
       951px wide across 6 tabs in a 332px viewport with zero visual hint
       that more tabs exist off-screen — 4 of the 6 tabs were effectively
       undiscoverable. Two changes, both mobile-only:
       1) A right-edge mask-image fade so the cut-off tab visibly trails off
          instead of ending in a hard edge. This fades #preferenceTabs's own
          pixels near the right edge, so it works directly on the scroll
          container without needing an extra wrapper div; -webkit- prefix
          required for Safari/iOS mask support.
       2) Tighter tab padding/font-size (overrides the values from the
          earlier block by appearing later in the cascade at equal
          specificity) so more of the next tab peeks into view as a scroll
          hint, without dropping below the 44px touch-target floor already
          enforced by accessibility.css's `.nav-link { min-height/min-width:
          44px }` rule (min-height/min-width are a floor, not a fixed size,
          so reduced padding on a multi-word label never shrinks below it).
       The active-tab scroll-into-view-on-load behavior lives in
       preferences/index.html's nonce'd script, not here. */
    #preferenceTabs {
        mask-image: linear-gradient(to right, black 85%, transparent);
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent);
    }
    #preferenceTabs .nav-link {
        padding: 0.5rem 0.625rem;
        font-size: 0.8rem;
    }
}

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

    /* --- Trial banner: stack columns vertically on phones (MM-226) --- */
    .trial-banner-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* --- 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;
    }
}

/* Sticky batch-regenerate bar (select mode). Checkbox sizing + select-mode reveal
   live in the "MENU EDITING" block above. */
.regen-selected-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--color-cream-100, #fff);
    border: 1px solid var(--color-cream-300, #e5e0d8);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.regen-selected-bar .regen-selected-count {
    font-weight: 600;
    color: var(--light-text);
}
@media (max-width: 767.98px) {
    /* Lift the sticky bar above the cookie-consent banner when it's visible.
       --cookie-banner-height defaults to 120px (matches the body.cookie-banner-visible
       padding-bottom value at line 3613). */
    body.cookie-banner-visible .regen-selected-bar {
        bottom: var(--cookie-banner-height, 120px);
    }
}