/* In style.css */

/*============================
    Global Colors & Fonts
============================*/

/*---------------------------

#667eea - Main button color (purple-blue)

#5a6fd6 - Main button hover color (darker purple-blue)

#c95100 - Recipe title color (orange)


Admin Section Colors:
#856404 - Warning section text (yellow theme)
#ffc107 - Warning section border

#155724 - Success section text (green theme)
#28a745 - Success section border

#0c5460 - Info section text (blue theme)

#495057 - Purple section text
#6f42c1 - Purple section border

----------------------------*/

:root {
    /* Brand */
    --brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Danger / destructive actions — rose-coral, complements the purple-blue brand */
    --danger-color: #e8445a;
    --danger-hover: #d03550;
    --danger-gradient: linear-gradient(135deg, #e8445a 0%, #c0364d 100%);

    /* Warning tokens — semantic amber (matches Bootstrap warning palette) */
    --warning-text: #856404;
    --warning-bg: #fff3cd;
    --warning-border: #ffc107;

    /* Admin theme tokens */
    --admin-warning-text: #856404;
    --admin-warning-border: #ffc107;
    --admin-success-text: #155724;
    --admin-success-border: #28a745;
    --admin-info-text: #0c5460;
    --admin-info-border: #0c5460;
    --admin-purple-text: #495057;
    --admin-purple-border: #6f42c1;

    /* ── Spacing scale ──────────────────────────────────────────
       Use: padding, margin, gap values throughout the project.
       xs → 2xl mirrors a standard 4-pt grid. */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;

    /* ── Typography scale ──────────────────────────────────────
       Use: font-size values. Anchored to 1rem = 16px browser default. */
    --font-size-xs:   0.75rem;   /*  12px */
    --font-size-sm:   0.875rem;  /*  14px */
    --font-size-base: 1rem;      /*  16px */
    --font-size-md:   1.125rem;  /*  18px */
    --font-size-lg:   1.25rem;   /*  20px */
    --font-size-xl:   1.5rem;    /*  24px */
    --font-size-2xl:  2rem;      /*  32px */

    /* ── Breakpoints (reference only — use in media queries, not var()) ──
       --bp-mobile:  480px
       --bp-tablet:  768px  */
}

/* Basic Reset */
body, h1, h2, h3, h4, h5, h6, p, ul, li, header, nav, main, footer, div, section, article, aside, form, input, button, label, select {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Universal layout wrapper — centers and constrains all page content */
main {
    max-width: 1350px;
    margin: 0 auto;
    padding: 12px 20px 0;
}

/* General body styles for all pages (like all-recipes.html) */
body {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    color: #333;
    background-color: #f4f7f6; /* Default light background for content pages */
}

/* Specific styles for the login page body */
body.login-page-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Specific font stack for login page if desired */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f2f5; /* Specific background for login page */
}

/* ============================================= */
/* --- BUTTON & ACTION BAR STYLES --- */
/* ============================================= */

/* 1. SHARED RULE: Normalizes all common properties for ALL buttons */
.main-action-btn,
.secondary-action-btn {
    display: inline-block;
    vertical-align: middle;
    padding: 12px 25px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1.05em;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

/* 2. INDIVIDUAL COLORS: Apply brand gradient */
.main-action-btn {
    background: var(--brand-gradient);
    color: white;
}

.secondary-action-btn {
    background: var(--brand-gradient);
    color: white;
}

/* 3. HOVER AND DISABLED STATES */
.main-action-btn:hover {
    opacity: 0.92;
}

.secondary-action-btn:hover {
    opacity: 0.92;
}

.main-action-btn:disabled {
    background: #cccccc;
    color: #666666;
    cursor: not-allowed;
    opacity: 1;
}

/* ============================================= */
/* --- GLOBAL UTILITY CLASSES --- */
/* ============================================= */

/* 4. ACTION BAR LAYOUT: This wrapper holds all the buttons */
.page-actions-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;              /* Reduced from 20px for tighter spacing */
    padding: 10px 0 5px;    /* Reduced padding: 10px top, 5px bottom */
    margin-top: 10px;       /* Reduced from 20px to bring it closer to filters */
    border-top: none;
    flex-basis: 100%;
}

/* This group holds the Clear button. */
.page-actions-wrapper .clear-filters-btn-wrapper {
    width: 100%;
    text-align: center;
    border-top: none;
    padding: 0;
    margin: 0;
}

/* Style for active filters row in its new position */
.page-actions-wrapper .active-filters-row {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

    /* This holds the status message below the buttons */
.status-message {
    font-size: 0.95em;
    border-radius: 4px;
    text-align: center;
    line-height: 1.5;
    word-break: break-word;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 16px;
    padding: 10px;
}

/* This rule makes the container "disappear" when it has no text */
.status-message:empty {
    display: none; /* This completely removes it from the layout, ignoring parent spacing */
}

.status-message.success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

.status-message.error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

/* --- Styles for index.html (Login Page) Elements --- */
/* (These .login-container, etc. styles were already in your CSS and should work with body.login-page-body) */
.login-container {
    background: #fff;
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    text-align: center;
    width: 100%;
    max-width: 450px;
}

/* In style.css */
.login-container > img { /* <-- ADD the '>' here */
    width: 100%;
    max-height: 150px; 
    object-fit: contain; 
    border-radius: 8px;
    margin-bottom: 25px;
}

/* --- CORRECTED STYLES for Google Sign-In Button --- */
#signinBtn {
    display: flex;
    justify-content: center; /* This horizontally centers the Google button inside */
    margin-top: 25px;
    margin-bottom: 25px;
    min-height: 40px;
}

.login-title { /* Renamed from .login-title h2 to apply to the div */
    font-size: 1.8em; 
    margin-bottom: 10px; 
    font-weight: bold; 
    color:#333; 
    font-family: 'Merriweather', serif; /* Consistent header font */
}

.login-secure { 
    font-size: 0.95em; 
    margin-bottom: 25px; 
    color:#555; 
}

#g_id_onload, .g_id_signin { /* From your original CSS */
    display: inline-block !important;
}

/* (Keep other login page specific styles like .website-name, .prompt-text, .google-login-button etc. as they were) */
/* ... your other existing styles for .google-login-button, #user-info-view etc. ... */

/* ============================================= */
/* --- NEW LOADING SPINNER STYLES --- */
/* ============================================= */

.loading-spinner-wrapper {
    /* Ensures the spinner is centered within the grid column */
    grid-column: 1 / -1; 
    text-align: center;
    padding: 40px 20px;
}

.loading-spinner-wrapper.hidden {
    display: none;
}

.loading-spinner {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #667eea;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
    margin-bottom: 15px;
}

.loading-spinner-text {
    font-size: 1.1em;
    color: #6c757d;
    text-align: center;
}

/* Keyframes for the spinning animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- NEW OVERLAY AND FADE-IN STYLES --- */

/* The full-screen overlay */
.loading-overlay {
    position: fixed; /* Sits on top of everything */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6); /* Less opaque white */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.5s ease-in-out; /* Fade out transition */
}

/* Dim the login container while loading */
.login-container {
    opacity: 0.7; /* More visible behind the spinner */
    transition: opacity 0.5s ease-in-out; /* Fade in transition */
}

/* When the body has the 'loaded' class, fade the overlay out... */
body.loaded .loading-overlay {
    opacity: 0;
    pointer-events: none; /* Allows clicks to pass through after fading */
}

/* ...and make the login container fully visible. */
body.loaded .login-container {
    opacity: 1;
}

/* ============================================= */

/* ===========================
    Headers & Navigation (Intercom nav + Scope hero shrink)
   =========================== */

/* Fixed Nav (Intercom-style – always on top, always white) */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;               /* Always on top of hero text */
    background-color: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 12px 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

nav ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1350px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

nav ul li {
    position: relative;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-family: 'Lato', sans-serif;
    font-size: 1.02rem;
    font-weight: 400;
    padding: 12px 8px;
    position: relative;
    transition: color 0.2s ease;
    display: inline-block;
}

nav ul li a:hover {
    color: #667eea;
}

/* Hover underline on non-dropdown links only */
nav ul li:not(.dropdown) > a::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #667eea;
    transition: width 0.3s ease;
}

nav ul li:not(.dropdown) > a:hover::after {
    width: 100%;
}

nav ul li a.active,
nav ul li a.active-parent {
    color: #667eea;
    font-weight: bold;
}

/* Sign Out button styled as a plain nav link */
button.nav-link-btn {
    background: none;
    border: none;
    margin: 0;
    padding: 12px 8px;
    color: #333;
    font-family: 'Lato', sans-serif;
    font-size: 1.02rem;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.2s ease;
}
button.nav-link-btn:hover {
    color: #667eea;
}

/* Dropdown chevron span injected by nav.js */
.nav-chevron {
    font-size: 0.62em;
    opacity: 0.5;
    margin-left: 4px;
    vertical-align: middle;
    display: inline-block;
    transition: transform 0.2s ease;
}

nav ul li.dropdown:hover .nav-chevron,
nav ul li.dropdown:focus-within .nav-chevron {
    transform: rotate(180deg);
}

/* Dropdown menu – Intercom style */
nav ul li.dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    min-width: 220px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 12px 0;
    margin-top: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1200;
    border: 1px solid #f0f0f0;
    text-align: left;
    pointer-events: none;
    /* Override the parent nav ul flex layout so items stack vertically */
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
    align-items: stretch;
}

/* Invisible bridge on the LI itself — extends 20px below the li's bottom
   edge into the gap. The li is always visible so this ::after is always
   hoverable, keeping li:hover alive as the mouse crosses the gap.
   (A ::before on the hidden dropdown doesn't work because
   visibility:hidden suppresses pointer events on pseudo-elements too.) */
nav ul li.dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 20px; /* must match .dropdown-menu margin-top */
}

nav ul li.dropdown:hover .dropdown-menu,
nav ul li.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

nav ul .dropdown-menu li {
    display: block;
    margin-left: 0;
    margin-bottom: 0;
    width: 100%;
}

nav ul .dropdown-menu li a {
    font-weight: 400;
    padding: 12px 20px;
    display: block;
    color: #333;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
    border-radius: 0;
}

nav ul .dropdown-menu li a:hover {
    background-color: #f8f9fa;
    color: #667eea;
    padding-left: 24px;
}

/* Suppress underline pseudo-element inside dropdown links */
nav ul .dropdown-menu li a::after {
    display: none;
}

/* Divider line inside dropdown menus (desktop) */
nav ul .dropdown-menu li.divider {
    height: 1px;
    background: #f0f0f0;
    margin: 4px 16px;
}

/* ── "Keep recipe private" toggle — page-level row ── */
.privacy-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px 16px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.privacy-toggle-label {
    font-size: 0.9rem;
    color: #495057;
    line-height: 1.3;
}

.privacy-toggle-label strong {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

.privacy-toggle-label span {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Pill toggle button */
.privacy-toggle-btn {
    flex-shrink: 0;
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    background: #ccc;
    transition: background 0.2s ease;
    padding: 0;
    outline-offset: 2px;
}

.privacy-toggle-btn::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.privacy-toggle-btn--on {
    background: #667eea;
}

.privacy-toggle-btn--on::after {
    transform: translateX(20px);
}


/* ===========================
    Main Content & Search/Filter Area (for all-recipes.html)
   =========================== */

.active-filters-row {
    max-width: 1350px;
    width: 100%;
    margin: 0 auto 20px auto;
    box-sizing: border-box;
    padding: 0 16px;
}


#active-filters-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 8px;
    align-items: baseline;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    overflow: visible;
}

#active-filters-display .active-filter-tag {
    background-color: #20b26c; 
    color: white;
    padding: 6px 12px; 
    border-radius: 15px;
    font-size: 0.9em;
}
#active-filters-display .active-filter-tag .remove-filter {
    margin-left: 8px; color: #fff; cursor: pointer; font-weight: bold;
}
#active-filters-display .active-filter-tag .remove-filter:hover { color: #f0f0f0; }

/* Filtered by label styling */
.filtered-by-label {
    font-weight: bold;
    color: #495057;
    margin-right: 8px;
    font-size: 0.95em;
    white-space: nowrap;
}

/* Main Content Area with Sidebar Flex Layout */
.main-content-area-flex {
    display: flex; 
    flex-wrap: nowrap; 
    padding: 0 20px 20px 20px; 
    gap: 25px; 
    max-width: 1350px;  
    margin-left: auto;
    margin-right: auto;
}

.filter-list {    /* CHANGED: Flexbox layout for filter list */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
/* 
CHANGED: Each filter item is an inline-block for better spacing 
---------------------------------------
.filter-list li {
    display: inline-block; 
    margin-left: 25px; 
    position: relative;
}
---------------------------------------------------*/

.filter-list li a {
    background-color: #e9ecef;
    color: #222;
    text-decoration: none;
    display: block;
    padding: 10px 18px;
    font-size: 0.95em;
    border-radius: 20px;
    font-weight: normal;
    transition: background 0.2s, color 0.2s;
}

.filter-list li.active-filter a {
    background-color: #0f6e40; /* green — WCAG AA #fff on #0f6e40 ~4.6:1 */
    color: #fff;
    font-weight: bold;
}

.checkbox-filter-container {
    max-height: 150px;
    overflow-y: auto;
    padding-right: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    padding-top: 5px;
    /* Custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #667eea #f8f9fa;
}

.checkbox-filter-container::-webkit-scrollbar {
    width: 6px;
}

.checkbox-filter-container::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 3px;
}

.checkbox-filter-container::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 3px;
}

.checkbox-filter-container::-webkit-scrollbar-thumb:hover {
    background: #764ba2;
}

.checkbox-filter-container div { margin-bottom: 0; display: flex; align-items: center; } 
.checkbox-filter-container label {
    font-weight: normal; color: #495057; cursor: pointer;
    font-size: 0.95em; margin-left: 6px; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex-grow: 1; 
}
.checkbox-filter-container input[type="checkbox"] { 
    margin-right: 0; 
    cursor: pointer; 
    flex-shrink: 0; 
}


/* Featured Recipes Section (Recipe Cards List) */
#featured-recipes {
    flex-grow: 1; 
    padding: 0; 
    text-align: left; 
}
.results-container {
    display: grid;
    /* MODIFIED LINE: Columns will be 230px wide and will not expand with 1fr.
       'auto-fit' will still create as many 230px columns as can fit. */
    grid-template-columns: repeat(auto-fit, 230px);
    gap: 25px;
    padding: 0;
    /* text-align: left; /* This can be kept or removed, your choice */
    justify-items: start; /* IMPORTANT: Keeps cards aligned to the start (left) of their individual 230px cells */
    /* ADDED LINE: Aligns the entire group of grid columns to the start (left) of the container.
       If the cards don't fill the full width, the empty space will be on the right. */
    justify-content: center;
}

.recipe-card {
    position: relative; /* Required for absolute positioning of favorite button */
    max-width: 230px; /* Ensure this matches the column width in grid-template-columns */
    min-width: 230px; /* Ensure this matches the column width in grid-template-columns */
    background-color: #ffffff; 
    border: 1px solid #dee2e6; 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 3px 10px rgba(0,0,0,0.08); 
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex; 
    flex-direction: column;
    max-width: 230px; 
    min-width: 230px;
}
.recipe-card:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,0.12); }

.recipe-card img, .recipe-card .no-image { 
    width: 100%; 
    height: 200px; 
    object-fit: cover; 
    border-bottom: 1px solid #dee2e6;
}
.recipe-card .no-image { 
    display: flex; 
    align-items: center; 
    justify-content: center;
    background-color: #f8f9fa; 
    color: #6c757d; font-style: italic;
    text-align: center; 
    padding: 10px; 
    font-family: 'Lato', sans-serif; 
    font-weight: 300;
}
.recipe-card .card-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.recipe-card .card-content h2 {
    font-family: 'Merriweather', serif; color: #667eea; 
    font-size: 1.25em; 
    font-weight: 700; line-height: 1.35; margin-top: 0; margin-bottom: 12px; 
    min-height: 2.7em; 
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; 
    line-clamp: 2;
    -webkit-box-orient: vertical; 
    text-align: left; 
}
.metadata-and-button-group { margin-top: auto; }

.recipe-card .recipe-times {
    font-size: 0.9em; color: #6c757d; margin-bottom: 10px; 
    line-height: 1.5; text-align: left; 
}
.recipe-card .time-line { margin-bottom: 4px; }
.recipe-card .time-line:last-child { margin-bottom: 0; }
.recipe-card .time-item { display: block; margin: 2px 0; } 
.recipe-card .time-item strong { font-weight: 600; color: #495057; }

.recipe-tags {
    display: none; /* ADD THIS LINE to hide the section */
    margin-bottom: 15px; /* This was already here */
    text-align: left;    /* This was already here */
}
.recipe-tags p {
    margin: 4px 0; 
    font-size: 0.9em; color: #6c757d;
}
.recipe-tags .info-badge { 
    background-color: #e9ecef; color: #495057; 
    padding: 3px 8px; border-radius: 4px; 
    font-size: 0.85em; 
    margin-right: 5px; margin-bottom: 5px; 
    display: inline-block; 
    text-transform: capitalize;
}
.recipe-tags .info-badge strong { font-weight: 600; color: #343a40;}

.recipe-card .card-actions {
    display: flex;
    justify-content: center; /* ADDED: This will center the button horizontally */
    /* The margin-top: 15px; was an inline style in your HTML, 
       which provides space above the button. This change won't affect that. */
}
.recipe-card a.button-link.details-link {
    flex-grow: 0;
    /* margin-left: auto; */ /* REMOVED: No longer needed for centering */
    background-color: #667eea;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.recipe-card a.button-link.details-link:hover { background-color: #5a6fd6; }

.loading-message, .no-recipes-message {
    grid-column: 1 / -1; 
    text-align: center; padding: 40px 20px; font-size: 1.2em; color: #6c757d;
}

/* Styles for Login Page Elements from your original CSS (ensure they are correctly scoped if body.login-page is used) */
/* The .login-container selector below is already defined above for body.login.page */
/* .login-container img { (already defined) } */
/* .login-title { (already defined) } */
/* .login-secure { (already defined) } */

/* Other styles from your original CSS (e.g., .website-name, .prompt-text, .google-login-button, .prompt-footer, #user-info-view) */
/* should be reviewed to ensure they are correctly placed and don't conflict if they are general. */
/* For now, assuming they are mostly for the login page context. */


/* =================================== */
/* Styles for Recipe Detail Page       */
/* =================================== */
.back-link-container {
    max-width: 1100px;
    margin: 0 auto; /* Centers the container */
    padding: 5px 30px 0; /* Adds padding to align with recipe container below */
}

.back-link-container + .planner-container {
    margin-top: 2px; /* Adjust this value as needed */
}

/* Ensure the main flex container grows vertically */
.recipe-container {
    /* Add this if not present */
    display: block; /* or remove display:flex if present */
    /* If you want a border and padding, keep them */
    border: 2px solid #007bff;
    border-radius: 8px;
    padding: 24px 20px;
    background: #fff;
    margin-bottom: 32px;
    /* This allows children to grow and the container to expand */
    box-sizing: border-box;
    width: 100%;
}
/* The flex layout for the two columns */
.recipe-container .flex-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
    width: 100%;
}
.recipe-ingredients,
.recipe-instructions {
    min-width: 240px;
    flex: 1 1 320px;
    box-sizing: border-box;
    /* Remove any fixed heights if present */
}
.recipe-title-detail { 
    font-family: 'Merriweather', serif;
    color: #667eea; 
    text-align: center;
    margin-bottom: 25px;
    font-size: 2.8em; 
    font-weight: 700;
    line-height: 1.2;
    padding-top: 10px;
}
/* ... (keep other recipe-detail specific styles from your provided CSS) ... */

/* Footer */
footer {
    text-align: center; padding: 20px; background-color: #333;
    color: #fff; margin-top: 30px; font-weight: 300;
}


#addRecipeForm .form-row {
    display: flex;
    align-items: flex-start; 
    gap: 15px; 
    margin-bottom: 20px;
}

#recipeUrlsInput {
    flex-grow: 1; 
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-family: 'Lato', sans-serif;
    font-size: 1em;
    min-height: 100px; 
    resize: vertical; 
}

#recipeUrlsInput:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102,126,234,.25);
    outline: none;
}

/* Divider */
hr.section-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
    margin: 40px auto;
    max-width: 900px;
}




/* Status Message Styling (can be shared) */
.status-message {
    margin-top: 20px;
    font-size: 0.95em;
    padding: 10px;
    border-radius: 4px;
    min-height: 1.5em; 
    text-align: left;
    line-height: 1.5;
    word-break: break-word; /* Prevent long URLs from breaking layout */
}

.status-message.success {
    color: #155724; 
    background-color: #d4edda; 
    border: 1px solid #c3e6cb;
}

.status-message.error {
    color: #721c24; 
    background-color: #f8d7da; 
    border: 1px solid #f5c6cb;
}

/* Styles for weekly-planner.html */

.planner-container > h1 { /* Main page title if you add one */
    text-align: center; 
    font-family: 'Merriweather', serif;
    color: #343a40; 
    margin-bottom: 30px;
    font-size: 2.5em;
}

/* ============================================= */
/* --- ISOLATED FILTER SECTION STYLING --- */
/* ============================================= */
/* These styles are ONLY for filter sections and isolated from other page elements */


#global-filters-area h3 {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    color: #667eea;
    font-family: 'Merriweather', serif;
    font-size: 1.6em;
}

.filter-controls-wrapper {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px; 
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Filter control group - ONLY for filter sections */
.filter-control-group {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    min-width: 250px; 
    flex: 1; 
    max-width: 300px;
}

/* Filter group label - ONLY for filter sections */
.filter-group-label {
    display: block;
    margin-bottom: 0px;
    font-weight: bold;
    color: #667eea;
    font-family: 'Merriweather', serif;
    font-size: 1.1em;
}

/* Input styling for filter sections - ONLY for filter sections */
.filter-control-group input[type="text"] {
    width: 100%;
    padding: 8px 15px; /* Increased padding to make boxes taller */
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
    background-color: #fff;
    box-sizing: border-box;
    margin-top: 8px;
}

.filter-control-group input[type="text"]:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    outline: none;
}

/* ============================================= */

/* COMMENTED OUT - Replaced with consolidated rule at end of file
.save-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 10px;
}

.save-btn:hover {
    background-color: #0056b3;
}

.save-btn:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}
*/

.status-message.success {
    color: #28a745;
    font-weight: bold;
}

.status-message.error {
    color: #dc3545;
    font-weight: bold;
}

/* Shopping List Checked Items */
.shopping-list-item.checked {
    opacity: 0.6;
}

.shopping-list-item.checked .item-label {
    text-decoration: line-through;
}

/* Shopping List Actions Layout - MOVED TO LINE 2142 */

/* Missing plan-edit-actions CSS for view-plan.html */
.plan-edit-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Consistent button spacing and sizing across all pages */
.top-actions-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px !important;
    padding-top: 15px !important;
    padding-bottom: 0px;
    min-height: 44px; /* Ensure consistent height */
}

/* Fix recipe-template.html specific button layout */
.top-actions-container #editRecipeBtn {
    margin-left: auto;
}

.top-actions-container #edit-mode-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

.top-actions-container #edit-mode-actions.hidden {
    display: none;
}

/* COMMENTED OUT - Replaced with consolidated rule at end of file
.main-action-btn, .secondary-action-btn {
    padding: 10px 20px;
    font-size: 1em;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
*/

/* Fix any button alignment issues */
.plan-edit-actions .main-action-btn {
    flex-shrink: 0;
}

/* --- Plan History (List View) --- */
.plan-link-btn {
    display: block;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    color: #667eea;
}
.plan-link-btn:hover {
    color: #fff;
    border-color: #667eea;
    background: var(--brand-gradient);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* --- Plan Detail (Grid View) --- */
.plan-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px; /* Space between the cards */
}
.day-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
}
.day-card h3 {
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    font-family: 'Merriweather', serif;
    color: #667eea;
    border-bottom: 2px solid #f0f0f0;
    font-size: 1.3em;
}
.meals-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}
.meals-list li {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.meal-slot-label {
    font-weight: 700;
    color: #667eea;
    font-size: 0.95em;
}
.recipe-button-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.recipe-link-btn {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #212529;
    padding: 6px 10px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}
.recipe-link-btn:hover {
    background-color: #e9ecef;
    border-color: #667eea;
}
.recipe-time {
    font-size: 0.85em;
    color: #6c757d;
}

/* --- Shared Message Styles --- */
.loading-message, .error-message, .empty-message {
    text-align: center;
    padding: 40px;
    font-size: 1.1em;
    color: #6c757d;
}
.error-message {
    color: #dc3545; /* Red */
}

/* --- Filter UI Brand Theme --- */
.active-filter-tag {
    background-color: #eef0fd;
    border-color: #667eea;
    color: #3d4999;
}
ul.filter-list li.active-filter a {
    background: var(--brand-gradient);
    color: #fff;
    border-radius: 4px;
}

/* ============================================= */
/* --- NEW STYLES FOR ADJUSTED SERVINGS --- */
/* ============================================= */

/* In weekly-planner.html */
.meal-slot-inputs {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between the dropdown and the input */
    width: 100%;
}

.meal-slot-inputs .recipe-select {
    flex-grow: 1; /* Allows the select box to take up available space */
}

.serving-adjust-input {
    width: 100px; /* A fixed width for the servings input */
    padding: 10px 8px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 0.95em;
}

/* In view-plan.html */
.recipe-adjusted-servings {
    font-size: 0.85em;
    color: #667eea;
    font-weight: bold;
    margin-left: 5px;
    white-space: nowrap;
}

.recipe-button-group {
    /* This existing rule is fine, but let's ensure vertical alignment is good */
    align-items: center;
}

/* For view-plan.html - Final alignment solution */
.top-actions-container {
    display: flex;
    justify-content: space-between; /* Back to space-between for perfect alignment */
    align-items: center;            /* Use center for horizontal button alignment */
    margin-bottom: 10px;   /* Reduced from 8px to 10px for better spacing */
    padding-top: 0px;     /* Reduced from 5px */
    padding-bottom: 0px;  /* Reduced from 5px */
}

/* Handle the Edit Recipe button and its hidden actions within top-actions-container */
.top-actions-container #editRecipeBtn {
    margin-left: auto; /* Push Edit Recipe button to the right */
}

.top-actions-container #edit-mode-actions {
    margin-left: auto; /* Push edit mode actions to the right when visible */
    display: flex;
    gap: 10px; /* Space between Save and Cancel buttons */
}

.top-actions-container #edit-mode-actions.hidden {
    display: none;
}

/* =================================================== */
/* UNIFIED HEADER-TO-BUTTON SPACING STYLES */
/* =================================================== */

/* Universal rules for consistent spacing between header and buttons */
.top-actions-container {
    margin-top: 0 !important;
    padding-top: 5px !important;
    margin-bottom: 10px !important;
}

/* Override back-link-container padding to minimize header spacing */
.back-link-container {
    padding: 0 30px 0 !important;
}

/* Override the empty back-to-plan-container to have no spacing */
#back-to-plan-container {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Override planner-container margin when it follows back-to-plan-container */
#back-to-plan-container + .planner-container {
    margin-top: 0 !important;
}

/* Fix serving size adjuster centering (recipe-template.html specific) */
.serving-size-adjuster-wrapper {
    text-align: center;
    margin: 20px 0;
}

.serving-size-adjuster {
    display: inline-block;
    text-align: center;
    padding: 10px 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.serving-size-adjuster label {
    margin-right: 10px;
    font-weight: 600;
}

.serving-size-input {
    width: 60px;
    padding: 5px 8px;
    margin: 0 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    text-align: center;
}

.small-btn {
    padding: 6px 12px;
    font-size: 0.9em;
}

/* =================================================== */
/* END UNIFIED HEADER-TO-BUTTON SPACING STYLES */
/* =================================================== */

/* ============================================= */
/* --- ADMIN / UTENSILS PAGE STYLES --- */
/* ============================================= */

.admin-action-card {
    background-color: #ffffff;
    padding: 25px 30px;
    margin-bottom: 25px;
}

.admin-action-card h3 {
    font-family: 'Merriweather', serif;
    color: #343a40;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.admin-action-card p {
    color: #6c757d;
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 20px;
}

.admin-button-container {
    text-align: right;
}

.admin-results-container {
    margin-top: 20px;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    min-height: 40px;
    font-size: 0.95em;
    line-height: 1.7;
    white-space: pre-wrap; /* Allows wrapping for long lines */
    word-break: break-all;
}

/* Hide the results container until it has content */
.admin-results-container:empty {
    display: none;
}

/* Admin Section Variants with Color Themes */
.admin-action-card.warning {
    background-color: #fff3cd;
    border-left: 4px solid var(--admin-warning-border);
}

.admin-action-card.success {
    background-color: #d4edda;
    border-left: 4px solid var(--admin-success-border);
}

.admin-action-card.info {
    background-color: #d1ecf1;
    border-left: 4px solid var(--admin-info-border);
}

.admin-action-card.purple {
    background-color: #e2e3f3;
    border-left: 4px solid var(--admin-purple-border);
}

.admin-action-card.warning h3 {
    color: var(--admin-warning-text);
}

.admin-action-card.success h3 {
    color: var(--admin-success-text);
}

.admin-action-card.info h3 {
    color: var(--admin-info-text);
}

.admin-action-card.purple h3 {
    color: var(--admin-purple-text);
}

.admin-action-card.warning p,
.admin-action-card.warning .admin-details {
    color: var(--admin-warning-text);
}

.admin-action-card.success p,
.admin-action-card.success .admin-details {
    color: var(--admin-success-text);
}

.admin-action-card.info p,
.admin-action-card.info .admin-details {
    color: var(--admin-info-text);
}

.admin-action-card.purple p,
.admin-action-card.purple .admin-details {
    color: var(--admin-purple-text);
}

.admin-details {
    font-size: 0.9em;
    line-height: 1.4;
    margin-top: 10px;
}

.admin-status-message {
    color: #666;
    font-style: italic;
    margin-top: 10px;
}

.admin-action-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.admin-status-text {
    font-weight: bold;
}

.admin-form-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.admin-form-group label {
    font-weight: bold;
    white-space: nowrap;
}

.admin-form-group select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 200px;
}

/* Recipe selection section for admin page */
#recipe-selection-section {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 25px 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

#recipe-selection-section h3 {
    font-family: 'Merriweather', serif;
    color: #343a40;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 20px;
}

.recipe-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.recipe-selection-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Admin page container - single column centered layout */
.admin-page-container {
    /* Layout handled by main */
}

.admin-page-container .admin-action-card {
    margin-bottom: 25px;
}

.admin-page-container #recipe-selection-section {
    margin-bottom: 0;
}

/* Admin recipe list items */
.admin-recipe-item {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-recipe-item:hover {
    background-color: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.admin-recipe-item input[type="checkbox"] {
    margin-top: 3px;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.admin-recipe-info {
    flex: 1;
}

.admin-recipe-info h4 {
    margin: 0 0 5px 0;
    color: #667eea;
    font-size: 1.1em;
    font-weight: 600;
}

.admin-recipe-info p {
    margin: 0;
    color: #666;
    font-size: 0.9em;
}

/* Override results-container for admin page */
#recipe-selection-section .results-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ============================================= */
/* --- END OF ADMIN / UTENSILS PAGE STYLES --- */
/* ============================================= */

/* ============================================= */
/* --- RECIPE EDIT MODE STYLES --- */
/* ============================================= */

/* Hides elements gracefully */
.hidden {
    display: none !important;
}

#instructions-editor {
    /* Remove fixed height! */
    min-height: 350px; /* optional, for a nice starting size */
    height: auto;      /* allow to grow with content */
    max-height: none;  /* ensure no max-height is set anywhere else */
}

/* ============================================= */
/* --- DYNAMIC RECIPE INPUT ROW STYLES --- */
/* ============================================= */

/* Make sure dynamic input containers expand naturally */
.dynamic-input-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.ingredient-input,
.instruction-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.dynamic-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dynamic-input-row input[type="text"],
.dynamic-input-row textarea {
    flex-grow: 1; /* Allows the input/textarea to fill available space */
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
}

.dynamic-input-row textarea {
    resize: vertical;
    min-height: 50px; /* A good starting height for instruction steps */
}

.remove-item-btn {
    padding: 6px 12px;
    font-size: 0.9em;
    background: var(--danger-gradient);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0; /* Prevents the button from shrinking */
    transition: opacity 0.2s;
}

.remove-item-btn:hover {
    opacity: 0.9;
}

.add-item-btn {
    margin-top: 10px;
    font-size: 0.9em;
    padding: 8px 12px;
    background: var(--brand-gradient);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    align-self: flex-start; /* Aligns button to the left */
    display: block;
}

/* ===========================
   Consolidated Modal Styles
   =========================== */

/* The main overlay for ANY modal. Handles background, position, and transitions. */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.25s;
    z-index: 1000;
}

/* This class is used by JavaScript to hide any modal */
.modal-hidden {
    opacity: 0;
    pointer-events: none;
}

/* The white content box shared by all modals */
.modal-content {
    background: #fff;
    border-radius: 8px;
    padding: 25px 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 450px;
    position: relative;
    text-align: center;
}

/* The close 'X' button in the corner */
.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.6em;
    cursor: pointer;
    color: #999;
    line-height: 1;
}
.modal-close-btn:hover {
    color: #333;
}

/* Container for the action buttons (e.g., "Confirm", "Cancel") */
.modal-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* --- Button Variations --- */

/* Base style for all buttons inside a modal */
.modal-btn {
    border: none;
    border-radius: 5px;
    padding: 10px 24px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}
.modal-btn:hover {
    transform: translateY(-1px);
}

/* Brand button for "Confirm", "Share", "OK" */
.modal-btn-confirm {
    background: var(--brand-gradient);
    color: white;
}
.modal-btn-confirm:hover {
    opacity: 0.9;
}

/* Red button for "Delete", "Discard" */
.modal-btn-danger {
    background: var(--danger-gradient);
    color: white;
}
.modal-btn-danger:hover {
    opacity: 0.9;
}

/* Gray button for "Cancel" */
.modal-btn-cancel {
    background-color: #6c757d;
    color: white;
}
.modal-btn-cancel:hover {
    background-color: #5a6268;
}

/* --- Share Modal Specific Styles --- */
.share-modal-title {
    margin-top: 0;
}

.share-email-input {
    width: 100%;
    padding: 8px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

.share-email-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.share-error-message {
    display: none;
    color: #d32f2f;
    margin: 10px 0;
    font-size: 0.9em;
}

/* ============================================= */
/* --- DEDICATED PLAN NAME STYLING --- */
/* ============================================= */
/* These styles are ONLY for plan name elements and completely separate from filter styling */

/* Plan name container - put label to the left of input */
.plan-name-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Plan name label styling - specific to plan name only */
.plan-name-label {
    display: inline-block;
    font-weight: bold;
    color: #667eea;
    font-family: 'Merriweather', serif;
    font-size: 1.1em;
    margin-bottom: 0;
    margin-right: 4px;
    white-space: nowrap;
}

/* Plan name input styling - dedicated for plan name only */
.plan-name-inline input[type="text"] {
    padding: 8px 15px; /* Reduced for shorter height */
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
    background-color: #fff;
    width: 250px;
}

.plan-name-inline input[type="text"]:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    outline: none;
}


/* Day tab styling */
.day-tab {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background: none;
    border: none;
    text-align: left;
    font-size: 1.1em;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #e9ecef;
    font-family: 'Lato', sans-serif;
}

.day-tab:hover {
    background-color: #e9ecef;
    color: #343a40;
}

.day-tab.active {
    background: var(--brand-gradient);
    color: white;
    font-weight: 600;
}

.day-tab:last-child {
    border-bottom: none;
}

/* Right content area */
.week-planner-content {
    flex: 1;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 0 8px 8px 0;
}

/* Day content sections */
.day-content {
    display: none;
}

.day-content.active {
    display: block;
}

.day-content h3 {
    font-family: 'Merriweather', serif;
    color: #667eea;
    font-size: 1.8em;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* Meal slots styling */
.meal-slots-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.meal-slot {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: box-shadow 0.2s ease;
}

.meal-slot:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.meal-slot label {
    display: block;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-family: 'Lato', sans-serif;
}

.meal-slot-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.meal-slot-inputs .recipe-select {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
    background-color: #fff;
    min-width: 0;
}

.meal-slot-inputs .recipe-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    outline: none;
}

.meal-slot-inputs .serving-adjust-input {
    width: 120px;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 0.95em;
}

/* Enhanced servings input styling - only for weekly planner */
#week-planner-days-container .meal-slot-inputs .serving-adjust-input {
    background-color: #f8f9fa;
    border: 2px solid #667eea;
    font-weight: 600;
    color: #343a40;
    width: 140px;
    margin-right: 10px;
    flex-shrink: 0;
    order: 1; /* Ensures servings input comes first */
}

#week-planner-days-container .meal-slot-inputs .recipe-select {
    flex: 1;
    order: 2; /* Ensures recipe select comes after servings input */
    min-width: 0; /* Prevents overflow issues */
}

#week-planner-days-container .meal-slot-inputs .serving-adjust-input::placeholder {
    color: #4a55c4;
    font-weight: 500;
    font-size: 0.95em;
}

#week-planner-days-container .meal-slot-inputs .serving-adjust-input:focus {
    background-color: #fff;
    border-color: #667eea;
    outline: none;
}

#week-planner-days-container .meal-slot-inputs .serving-adjust-input:not(:placeholder-shown) {
    background-color: #eef0fd;
    border-color: #667eea;
    color: #3a4a8a;
}

/* Loading and error messages */
.week-planner-content .loading-message,
.week-planner-content .error-message {
    text-align: center;
    padding: 40px;
    font-size: 1.2em;
    color: #6c757d;
}

.week-planner-content .error-message {
    color: #dc3545;
}

/* Duplicate Recipe Warning Styling - Specific to Week Planner */
#week-planner-days-container .duplicate-warning {
    color: #dc3545 !important;
    font-size: 0.85em;
    font-style: italic;
    margin-left: 10px;
    font-weight: 500;
    display: none;
}

/* ============================================= */
/* --- RECIPE SELECTION MODE STYLES --- */
/* ============================================= */

/* Initially hide the selection action bar */
.selection-actions-wrapper.hidden {
    display: none;
}

/* Style the selection action bar when it's visible */
.selection-actions-wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 15px;
}

/* Add a red color for the delete button */
.main-action-btn.danger-btn {
    background: var(--danger-gradient);
}
.main-action-btn.danger-btn:hover {
    opacity: 0.9;
}
.main-action-btn.danger-btn:disabled {
    background: var(--danger-gradient);
    opacity: 0.65;
    color: #fff;
}

/* Make the recipe card position relative to contain elements */
.recipe-card {
    position: relative;
}

/* --- SELECTION MODE ACTIVE STYLES --- */

/* When selection mode is active, hide the 'Manage Recipes' button */
.selection-active .manage-recipes-wrapper {
    display: none;
}

/* Make cards clickable in selection mode */
.selection-active .recipe-card {
    cursor: pointer;
}

/* Add a visual indicator to selected cards */
.selection-active .recipe-card.is-selected {
    box-shadow: 0 0 0 3px #667eea;
    border-color: #667eea;
}

/* Disable the link behavior on the card itself in selection mode */
.selection-active .recipe-card .details-link {
    pointer-events: none;
    opacity: 0.6;
}

/* ============================================= */
/* --- SHOPPING LIST PAGE STYLES --- */
/* ============================================= */

/* Shopping list actions container */
#shopping-list-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 15px;
    flex-wrap: wrap !important; /* Allows buttons to wrap on smaller screens */
}

/* COMMENTED OUT - Replaced with consolidated rule at end of file
#shopping-list-actions .main-action-btn,
#shopping-list-actions .secondary-action-btn {
    display: inline-flex !important;
    flex-shrink: 1 !important;
    white-space: nowrap;
    padding: 10px 15px !important;
    box-sizing: border-box;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}
*/

/* Shopping list content area */
.shopping-list-content {
    margin-top: 30px;
}

/* Category headers in shopping list */
.category-header {
    font-family: 'Merriweather', serif;
    color: #667eea;
    font-size: 1.5em;
    font-weight: 700;
    margin: 25px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

.category-header:first-child {
    margin-top: 0;
}

/* Warning category header styling */
.category-header.warning {
    color: #dc3545;
    border-bottom-color: #f8d7da;
}

/* Shopping list content area */
.shopping-list-content {
    text-align: left;
    margin-top: 20px;
}

/* Make sure shopping list title matches other pages */
#shopping-list-main-content .manual-recipe-container h2 {
    text-align: center;
    margin-bottom: 25px;
}

/* Shopping list items container */
.shopping-list-content ul {
    list-style: none;
    margin: 0 0 25px 0;
    padding: 0;
}

/* Individual shopping list items - clean row layout */
.shopping-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    margin-bottom: 10px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    transition: all 0.2s ease;
    min-height: 50px;
}

.shopping-list-item:hover {
    background-color: #e9ecef;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Checked shopping list items */
.shopping-list-item.checked {
    opacity: 0.6;
    text-decoration: line-through;
    background-color: #d4edda;
}

/* Shopping list item main content - left side */
.item-main-content {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 15px;
    min-width: 0; /* Allows text to wrap if needed */
}

/* Checkbox styling */
.shopping-list-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 5px;
}

/* Item label styling - ingredient text */
.item-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    cursor: pointer;
    font-size: 1.05em;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

.item-label .quantity {
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}

.item-label .unit {
    font-weight: 500;
    color: #6c757d;
    white-space: nowrap;
}

.item-label .name {
    color: #333;
    font-weight: 500;
    word-wrap: break-word;
}

/* Prep notes styling */
.prep-notes {
    font-style: italic;
    color: #6c757d;
    font-size: 0.95em;
}

/* Item actions container - right side buttons */
.item-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: 20px;
}

.shopping-list-item.needs-review {
    background-color: #fff3cd;
    border-color: #ffd32a;
    border-width: 2px;
}

.shopping-list-item.needs-review:hover {
    background-color: #ffeaa7;
}

/* Warning icon styling */
.warning-icon {
    font-size: 1.2em;
    margin-right: 12px;
    flex-shrink: 0;
    color: #856404;
}

/* Warning message styling */
.warning-message {
    background-color: #fff3cd;
    color: #856404;
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid #ffeaa7;
    margin-top: 20px;
    font-size: 0.95em;
    line-height: 1.5;
    text-align: center;
}

/* Fix in Recipe link styling - matches secondary button style */
.fix-in-recipe-link {
    display: inline-block;
    padding: 8px 16px;
    background-color: #6c757d;
    color: white;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    border-radius: 5px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.fix-in-recipe-link:hover {
    background-color: #5a6268;
    color: white;
    text-decoration: none;
}

/* Success button state */
.main-action-btn.success {
    background-color: #28a745;
    color: white;
}

.main-action-btn.success:disabled {
    background-color: #28a745;
    opacity: 0.8;
    cursor: not-allowed;
}

/* Empty and loading message styling for shopping list */
.shopping-list-content .loading-message,
.shopping-list-content .error-message,
.shopping-list-content .empty-message {
    text-align: center;
    padding: 40px 20px;
    font-size: 1.2em;
    color: #6c757d;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.shopping-list-content .error-message {
    color: #dc3545;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

/* Responsive adjustments for shopping list */
@media (max-width: 768px) {
    #shopping-list-main-content .manual-recipe-container {
        margin: 5px 15px;
        padding: 20px 15px;
    }
    
    .shopping-list-item {
        flex-direction: column;
        align-items: stretch;
        padding: 15px;
    }
    
    .item-main-content {
        gap: 10px;
        margin-bottom: 10px;
    }
    
    .item-actions {
        justify-content: center;
        margin-left: 0;
        gap: 8px;
    }
    
    #shopping-list-actions {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .fix-in-recipe-link {
        padding: 6px 12px;
        font-size: 0.85em;
    }
}

/* Very small screens - stack buttons vertically */
@media (max-width: 480px) {
    #shopping-list-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    #shopping-list-actions .main-action-btn,
    #shopping-list-actions .secondary-action-btn {
        width: 100%;
        max-width: 280px;
    }
}

/* Final, definitive styling for shopping list action buttons */

/* Parent container for alignment */
#shopping-list-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap; /* Allows wrapping on small screens */
}

/* All buttons inside the action bar */
#shopping-list-actions a,
#shopping-list-actions button {
    /* Resetting all conflicting properties */
    display: inline-flex;
    flex-shrink: 1; /* Allow buttons to shrink */
    min-width: 0;   /* Crucial: Prevents buttons from overflowing */
    margin: 0;
    padding: 10px 15px; /* Use a consistent, compact padding */
    box-sizing: border-box;

    /* Apply visual styling once here to avoid conflicts */
    border: 1px solid transparent;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1em;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Individual colors for the shopping list buttons */
#shopping-list-actions .secondary-action-btn,
#shopping-list-actions .main-action-btn {
    background: var(--brand-gradient);
    color: white;
}
#shopping-list-actions .save-btn {
    background-color: #007bff;
    color: white;
}
#shopping-list-actions .main-action-btn:hover,
#shopping-list-actions .secondary-action-btn:hover {
    opacity: 0.9;
}
#shopping-list-actions .save-btn:hover {
    background-color: #0056b3;
}
#shopping-list-actions button:disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

/* --- AUTHENTIC GOOGLE BUTTON STYLES --- */
.google-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    height: 40px;
    border: 1px solid #747775;
    border-radius: 4px;
    background-color: #ffffff;
    color: #1f1f1f;
    font-family: 'Roboto', sans-serif; /* Google's font */
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.25px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s, box-shadow .3s;
}

.google-login-button:hover {
    background-color: #f7fafe;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
}

.google-login-button:active {
    background-color: #f0f5fe;
}

.google-login-button img {
    margin-right: 12px;
    width: 18px;
    height: 18px;
}

/* ============================================= */
/* --- FAVORITE STAR/HEART STYLES --- */
/* ============================================= */

/* 1. Base button style */
.favorite-toggle-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    z-index: 10; /* Ensure it's above the image/card content */
    opacity: 0.8;
    transition: transform 0.2s, opacity 0.2s;
}

.favorite-toggle-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* 2. Icon styles for both states (Material Symbols) */
.favorite-toggle-btn .material-symbols-rounded {
    font-size: 28px;
    /* Use the outlined icon by default */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 28;
    color: #fff; /* White icon, visible on a dark image background */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Shadow for better visibility */
}

/* 3. Favorite (Filled) State - activated by [data-is-favorite="true"] */
.favorite-toggle-btn[data-is-favorite="true"] .material-symbols-rounded {
    /* Switch to the filled icon style */
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 28;
    color: #FFC107; /* Yellow/Gold for filled star (or a red for a heart) */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* 4. Loading/Busy State */
.favorite-toggle-btn.is-busy {
    cursor: wait;
    opacity: 0.5;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1.0); }
}

/* --- Favorite Icon Styles (Final Version) --- */
.recipe-card {
    position: relative;
}

.favorite-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    width: 44px;
    height: 44px;
    /* This is the crucial part that creates the dark circular background */
    background-color: rgba(0, 0, 0, 0.4); 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.favorite-toggle:hover {
    transform: scale(1.1);
    background-color: rgba(0, 0, 0, 0.6); /* Darker on hover */
}

.favorite-star {
    width: 24px;
    height: 24px;
    transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
}

.favorite-star path {
    /* The SVG path fills are controlled by JS (gold or white), but this sets the stroke */
    /* fill is set via JS: fill="${recipe.isFavorite ? 'gold' : 'white'}" */
    stroke: gold; /* Ensures the gold border is always visible */
    stroke-width: 1.5;
    transition: fill 0.2s ease-in-out;
}

/* --- Always Awake (Screen Wake Lock) Toggle Styles --- */
.wake-lock-toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95em;
    color: #495057;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.wake-lock-toggle-container:hover {
    background-color: #e2e6ea;
}

/* The actual switch element */
.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 25px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 25px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 17px;
    width: 17px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #28a745; /* Success Green */
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* ============================================= */
/* --- USER SETTINGS FORM STYLES --- */
/* ============================================= */

#userSettingsForm {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

#userSettingsForm .form-group {
    margin-bottom: 20px;
    padding: 15px;
    background-color: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

#userSettingsForm input[type="radio"] {
    margin-right: 10px;
    transform: scale(1.2);
}

#userSettingsForm label {
    font-weight: 600;
    color: #212529;
    cursor: pointer;
    display: block;
    margin-bottom: 5px;
}

.option-description {
    font-size: 0.9em;
    color: #6c757d;
    margin: 5px 0 0 30px;
    font-style: italic;
}

#username_controls {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e9ecef;
}

#username_input {
    width: 100%;
    max-width: 300px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1em;
    margin-bottom: 10px;
}

#username_input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
}

.form-actions {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
    margin-top: 20px;
}

#save_button {
    background: var(--brand-gradient);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 6px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

#save_button:hover:not(:disabled) {
    opacity: 0.92;
    transform: translateY(-1px);
}

#save_button:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    transform: none;
}

.feedback-message {
    display: none;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.9em;
    margin-top: 10px;
}

.feedback-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
}

.feedback-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

/* Hide username controls by default */
#username_controls {
    display: none;
}

#preview_text {
    font-weight: bold;
    color: #667eea;
}

/* Admin role management styles */
.role-badge { padding: 4px 8px; border-radius: 4px; font-size: 0.8em; font-weight: bold; }
.role-badge.admin { background: #d4edda; color: #155724; }
.role-badge.moderator { background: #fff3cd; color: #856404; }
.role-badge.user { background: #f8d7da; color: #721c24; }
.role-toggle-btn { padding: 6px 10px; font-size: 0.85em; }

.allow-form-section {
    margin: 20px 0;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.allow-form-section h2 { margin-bottom: 10px; }
.allow-form-section p { margin-bottom: 15px; color: #666; }

.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; }
.form-group input, .form-group select {
    width: 100%; padding: 8px; border: 1px solid #ced4da; border-radius: 4px;
}

.revoke-access-btn {
    margin-left: 8px; padding: 4px 8px; background: var(--danger-gradient); color: white;
    border: none; border-radius: 4px; font-size: 0.8em; cursor: pointer;
    transition: opacity 0.2s;
}
.revoke-access-btn:hover { opacity: 0.9; }
.revoke-access-btn:disabled { background: #6c757d; opacity: 1; }

/* ============================================= */
/* --- Shared Meal Plans Page Styles --- */
/* ============================================= */

.shared-plans-container {
    max-width: 1350px;
    margin: 5px auto;
    padding: 0 20px;
}

.shared-section {
    margin-bottom: 40px;
}

.shared-section > h2 {
    font-family: 'Merriweather', serif;
    color: #343a40;
    font-size: 1.8em;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
}

.shared-plan-list {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.plan-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    transition: background-color 0.2s ease;
}

.plan-item:hover {
    background-color: #e9ecef;
}

.plan-item:last-child {
    margin-bottom: 0;
}

.plan-item-info {
    flex: 1;
}

.plan-name {
    font-size: 1.1em;
    font-weight: 600;
    color: #343a40;
    display: block;
    margin-bottom: 5px;
}

.plan-name-link {
    font-size: 1.1em;
    font-weight: 600;
    color: #667eea;
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
    transition: color 0.2s ease;
}

.plan-name-link:hover {
    color: #4a5bba;
    text-decoration: underline;
}

.owner-info {
    font-size: 0.9em;
    color: #6c757d;
    font-style: italic;
}

.shared-with-emails {
    font-size: 0.9em;
    color: #6c757d;
    margin-top: 8px;
}

.email-tag {
    display: inline-flex;
    align-items: center;
    background-color: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 4px;
    padding: 4px 8px;
    margin-right: 8px;
    margin-top: 4px;
    font-size: 0.9em;
    color: #004085;
}

.stop-sharing-btn {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 6px;
    transition: color 0.2s ease;
}

.stop-sharing-btn:hover {
    color: #c82333;
}

.remove-me-btn {
    padding: 8px 16px;
    background: var(--danger-gradient);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.9em;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.remove-me-btn:hover {
    opacity: 0.9;
}

.remove-me-btn:active {
    opacity: 0.85;
}

/* ============================================= */
/* --- Toast Notification Styles --- */
/* ============================================= */

#toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background-color: #333;
    color: white;
    padding: 16px 24px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateX(400px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
    min-width: 250px;
    max-width: 400px;
    font-size: 0.95em;
    line-height: 1.4;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast.success {
    background-color: #28a745;
}

.toast.error {
    background-color: var(--danger-color);
}

.toast.warning {
    background-color: #ffc107;
    color: #333;
}

.toast.info {
    background-color: #17a2b8;
}



/* =====================================================================
   == MealNuzzle Page Header (mn-page-header) ==
   SCOPE Copenhagen sticky header pattern.
   Used on all interior pages except index.html.
   All selectors are namespaced with mn- to prevent collisions.
   ===================================================================== */

/* Outer sticky wrapper — pins the entire header stack to top of viewport */
.mn-page-header {
    position: sticky;
    top: 0;
    z-index: 1300;
    width: 75%;
    background-color: #ffffff;
}

/* Brand block — contains the animated title + subtitle */
.mn-page-brand {
    text-align: center;
    padding: 28px 20px 22px;
    background-color: #ffffff;
    overflow: hidden;
    max-height: 160px;
    transition: padding 0.45s cubic-bezier(0.4, 0.0, 0.2, 1),
                max-height 0.45s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Animated inner group — scales down as a unit on scroll */
.mn-page-brand__inner {
    display: block;
    transform-origin: center top;
    transition: transform 0.45s cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 0.45s ease;
}

/* Page title (h1) inside brand block */
.mn-page-brand__title {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: #2a2d3e;
    margin: 0 0 6px;
    line-height: 1.15;
}

/* Page subtitle (p) inside brand block */
.mn-page-brand__subtitle {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
}

/* Shrunk modifier — toggled by initPageHeaderShrink() in utils.js */
.mn-page-brand--shrunk {
    padding: 8px 20px;
    max-height: 52px;
}

.mn-page-brand--shrunk .mn-page-brand__inner {
    transform: scale(0.72);
    opacity: 0.75;
}

/* Nav strip container — always a direct child of .mn-page-header */
#site-nav-header {
    position: relative;
    width: 100%;
}

/* Override global nav's fixed positioning on all mn-page-header pages */
#site-nav-header nav {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    padding: 4px 0 !important;
    box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.14) !important;
    overflow: visible !important;
}

/* Tighter link padding for the compact nav strip */
#site-nav-header nav ul li a {
    padding: 6px 8px;
}

/* Dropdown gap: 4px nav padding + 8px visual gap = 12px total margin */
#site-nav-header nav ul li.dropdown .dropdown-menu {
    margin-top: 12px;
}

/* Hover bridge height must match the dropdown margin-top above */
#site-nav-header nav ul li.dropdown::after {
    height: 12px;
}
/* == End MealNuzzle Page Header == */