/* ======================
   RECIPE BUILDER
   Multi-step wizard interface
   ====================== */

/* --- Builder Container --- */
.builder-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

.builder-start {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.page-header {
    margin-bottom: 0.5rem;
    text-align: center;
}

.page-header .lead {
    font-size: 1.2rem;
    color: var(--color-subtle);
    margin-top: 0.5rem;
}

/* --- Filter Result Count --- */
.filter-result-count {
    font-size: 0.9rem;
    color: var(--color-subtle);
    margin: 0.5rem 0 0.75rem;
    padding: 0 0.25rem;
}

.filter-result-count strong {
    color: var(--color-text);
}

/* --- Progress Hint --- */
.progress-hint {
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--color-accent-alpha-8), var(--color-accent-alpha-5));
    border-left: 3px solid var(--color-accent);
    border-radius: var(--border-radius-sm);
    margin: 0.75rem 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

.progress-hint strong {
    color: var(--color-accent);
}

/* --- First Visit Hint --- */
.first-visit-hint {
    background: linear-gradient(135deg, var(--color-accent-alpha-8), var(--color-accent-alpha-5));
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius-md);
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
}

.first-visit-hint .hint-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.first-visit-hint svg {
    flex-shrink: 0;
    color: var(--color-accent);
}

.first-visit-hint span {
    flex: 1;
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.4;
}

.first-visit-hint .hint-dismiss {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--color-subtle);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.first-visit-hint .hint-dismiss:hover {
    color: var(--color-text);
}

/* First visit highlight for occasion card */
.occasion-card.first-visit-active {
    border: 2px solid var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-alpha-15);
    animation: firstVisitPulse 2s ease-in-out infinite;
}

@keyframes firstVisitPulse {
    0%, 100% {
        box-shadow: 0 0 0 4px var(--color-accent-alpha-15);
    }
    50% {
        box-shadow: 0 0 0 8px transparent;
    }
}

/* --- Builder Start Page Header --- */
.builder-start__header {
    text-align: center;
    margin-bottom: 1rem;
}

.builder-start__subtitle {
    font-size: 1.1rem;
    color: var(--color-subtle);
    margin-top: 0.25rem;
}

.builder-start__empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-subtle);
}

.builder-start__empty svg {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.builder-start__empty p {
    margin-bottom: 1rem;
}

/* --- Draft Recovery Banner --- */
.draft-recovery-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--color-card);
    border: 1px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.draft-recovery-banner__content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 200px;
}

.draft-recovery-banner__icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

.draft-recovery-banner__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.draft-recovery-banner__text strong {
    font-size: 0.95rem;
}

.draft-recovery-banner__text span {
    font-size: 0.85rem;
    color: var(--color-subtle);
}

.draft-recovery-banner__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .draft-recovery-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .draft-recovery-banner__actions {
        justify-content: flex-end;
    }
}

/* --- Featured Section --- */
.featured-section {
    margin-bottom: 2rem;
}

.featured-section__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-accent);
}

.featured-section__header svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

.featured-section__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* --- Featured Occasions Row --- */
.featured-occasions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* --- Category Rows --- */
.category-row {
    margin-bottom: 2.5rem;
}

.category-row__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0 0 0.75rem 0;
    background: none;
    border: none;
    border-bottom: 2px solid var(--color-border);
    width: 100%;
    text-align: left;
}

.category-row__header--collapsible {
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.category-row__header--collapsible:hover {
    border-bottom-color: var(--color-accent);
}

.category-row__header--collapsible:hover .category-row__title {
    color: var(--color-accent-dark);
}

.category-row__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0;
    transition: color 0.2s ease;
    letter-spacing: 0.01em;
}

.category-row__count {
    font-size: 0.85rem;
    color: var(--color-subtle);
    font-weight: 500;
    margin-left: auto;
    padding: 0.2rem 0.6rem;
    background: var(--color-bg);
    border-radius: var(--border-radius-pill);
}

.category-row__toggle-icon {
    display: flex;
    align-items: center;
    color: var(--color-subtle);
    transition: transform 0.2s ease, color 0.2s ease;
    margin-left: 0.5rem;
}

.category-row__header--collapsible:hover .category-row__toggle-icon {
    color: var(--color-accent);
}

.category-row--collapsed .category-row__toggle-icon {
    transform: rotate(-90deg);
}

.category-row__content {
    /* Content visible by default */
}

.category-row__content--hidden {
    display: none;
}

/* --- Occasion Grid (4 columns to match featured section) --- */
.occasion-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* --- Occasion Cards (matching .card styling from cards.css) --- */
.occasion-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    cursor: pointer;
    /* Match .card styling exactly */
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 0.75rem;
    box-shadow: 0 2px 8px var(--color-shadow);
    transition: all 0.2s ease;
}

.occasion-card:hover,
.occasion-card:focus,
.occasion-card:active {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-shadow-hover);
    background: var(--color-card); /* Ensure no green background on any state */
}

/* Featured cards - same styling as regular cards now */
.occasion-card--featured {
    /* No special border or outline */
}

.occasion-card--featured:hover {
    /* Same hover as regular cards */
}

/* Image wrapper - matches .card img styling */
.occasion-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    margin-bottom: 0.3rem;
    background: var(--color-bg);
}

.occasion-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.occasion-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-subtle);
    background: var(--color-bg);
}

.occasion-card__image--placeholder svg {
    opacity: 0.4;
}

/* Title - matches .card-title styling from component/dish cards */
.occasion-card__name {
    width: 100%;
    margin: 0.25rem 0 0 0;
    padding: 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--color-accent);
    word-wrap: break-word;
}

/* Card wrapper for positioning favorite button */
.occasion-card-wrapper {
    position: relative;
}

/* Favorite button - matching .svg-star-button from cards.css */
.occasion-card__favorite {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: white;
    color: var(--color-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

.occasion-card__favorite:hover {
    transform: scale(1.05);
}

.occasion-card__favorite--active {
    color: var(--color-accent);
}

.occasion-card__favorite--active svg {
    fill: currentColor;
}

.occasion-card__favorite--active:hover {
    color: var(--color-accent-dark);
}

/* Dark mode adjustments */
:root[data-theme='dark'] .occasion-card__favorite {
    background-color: var(--color-card);
}

/* --- Mobile Adjustments --- */
@media (max-width: 1100px) {
    .featured-occasions,
    .occasion-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 800px) {
    .featured-occasions,
    .occasion-row {
        /* Switch to horizontal scroll on mobile */
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0.75rem;
        padding-bottom: 0.5rem; /* Space for scrollbar */
        margin: 0 -1rem; /* Extend to edges */
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .featured-occasions .occasion-card-wrapper,
    .occasion-row .occasion-card-wrapper {
        flex: 0 0 calc(45% - 0.375rem); /* Show ~2.2 cards */
        scroll-snap-align: start;
    }

    /* Hide scrollbar but keep functionality */
    .featured-occasions::-webkit-scrollbar,
    .occasion-row::-webkit-scrollbar {
        height: 4px;
    }

    .featured-occasions::-webkit-scrollbar-track,
    .occasion-row::-webkit-scrollbar-track {
        background: var(--color-border);
        border-radius: 2px;
    }

    .featured-occasions::-webkit-scrollbar-thumb,
    .occasion-row::-webkit-scrollbar-thumb {
        background: var(--color-subtle);
        border-radius: 2px;
    }
}

@media (max-width: 640px) {
    .featured-section__header {
        padding-bottom: 0.4rem;
    }

    .featured-section__title {
        font-size: 1rem;
    }

    .featured-occasions,
    .occasion-row {
        gap: 0.75rem;
    }

    .occasion-card {
        padding: 0.5rem;
    }

    .category-row__title {
        font-size: 1.05rem;
    }

    .category-row__count {
        font-size: 0.75rem;
        padding: 0.15rem 0.5rem;
    }

    .occasion-card__name {
        font-size: 0.9rem;
    }

    /* Slightly smaller favorite button on mobile */
    .occasion-card__favorite {
        width: 40px;
        height: 40px;
    }
}

/* --- Legacy Occasion Grid (for backward compatibility) --- */
.occasion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* Was 180px */
    gap: 0.75rem; /* Was 1rem */
    margin: 1rem 0; /* Was 1.5rem */
}

/* Legacy occasion card styles (kept for wizard page compatibility) */
.occasion-grid .occasion-card {
    width: auto;
}

.occasion-image-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3; /* Was 3/2 - now matches list cards */
    overflow: hidden;
    border-radius: var(--border-radius-md);
    margin-bottom: 0.4rem; /* Was 0.5rem */
    background: var(--color-bg);
}

.occasion-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.occasion-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
}

.placeholder-icon {
    width: 40px; /* Was 48px */
    height: 40px; /* Was 48px */
    color: var(--color-subtle);
}

.occasion-title,
.occasion-grid .occasion-card .card-title {
    font-size: 0.9rem; /* Was 1rem */
    font-weight: 600;
    margin: 0.2rem 0; /* Was 0.25rem */
    overflow-wrap: break-word;
    word-break: keep-all; /* Prevent single character orphans */
    hyphens: auto;
    -webkit-hyphens: auto;
}

.occasion-description {
    font-size: 0.75rem; /* Was 0.8rem */
    color: var(--color-subtle);
    margin-top: 0.2rem; /* Was 0.25rem */
    line-height: 1.3;
}

/* --- Wizard Container --- */
.builder-wizard {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 1rem;
}

.wizard-header {
    margin-bottom: 0.25rem;
    text-align: center;
    position: relative;
}

/* --- Autosave Status Indicator --- */
.autosave-status {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.75rem;
    color: var(--color-subtle);
    padding: 0.25rem 0.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.autosave-status:not(:empty) {
    opacity: 1;
}

.autosave-status.saving {
    color: var(--color-accent);
}

@media (max-width: 600px) {
    .autosave-status {
        position: static;
        display: block;
        text-align: center;
        margin-top: 0.25rem;
    }
}

/* --- Progress Bar --- */
.wizard-header .progress-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem auto 0.5rem;
    max-width: 800px;
    height: auto;
    overflow: visible;
    background: transparent;
    border-radius: 0;
}

.wizard-header .progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    position: relative;
}

.wizard-header .progress-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}

.wizard-header .progress-step.active:not(:last-child)::after,
.wizard-header .progress-step.completed:not(:last-child)::after {
    background: var(--color-accent);
}

.wizard-header .progress-step .number {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    z-index: 1;
    transition: all 0.3s ease;
}

.wizard-header .progress-step.active .number {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
    transform: scale(1.1);
}

.wizard-header .progress-step.completed .number {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

.wizard-header .progress-step .label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-subtle);
    text-align: center;
}

.wizard-header .progress-step.active .label {
    color: var(--color-accent);
    font-weight: 600;
}

/* --- View Mode Toggle --- */
.view-mode-toggle {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1.5rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px var(--color-shadow);
}

.toggle-label {
    display: block;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-accent);
    text-align: center;
}

.toggle-buttons {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem;
    background: var(--color-bg);
    border-radius: var(--border-radius-md);
    margin-bottom: 1rem;
}

.toggle-btn {
    flex: 1;
    padding: 0.85rem 1.25rem;
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    background: transparent;
    color: var(--color-text);
    border: none;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    transition: all 0.2s ease;
}

.toggle-btn:hover {
    background: var(--color-accent-alpha-8);
}

.toggle-btn.active {
    background: var(--color-accent);
    color: white;
}

.mode-description {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--color-accent-alpha-5), var(--color-accent-alpha-2));
    border-radius: var(--border-radius-sm);
    border-left: 4px solid var(--color-accent-light);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-subtle);
}

.mode-description p {
    margin: 0;
}

.mode-description p {
    margin: 0;
}

/* --- Component Grid --- */
/* Week 5 fix: Match dish list card sizing */
.component-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin: 0.5rem 0;
}

/* Align component grid with filter sidebar top in builder */
.builder-wizard .layout-main > .component-grid:first-child,
.builder-wizard .layout-main #availableComponentCards {
    margin-top: 0;
}

@media (max-width: 450px) {
    .component-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* --- Review Section --- */
.review-section {
    max-width: 1200px;
    margin: 2rem auto;
}

/* Review step cards - allow full width for 4+ cards */
.review-section .selected-components .component-grid {
    max-width: 100%;
}

.selected-components {
    margin-bottom: 2rem;
}

/* Existing Dish Notice */
.existing-dish-notice {
    margin: 0 0 2rem 0;
    padding: 1.5rem;
    background: var(--color-card);
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 8px var(--color-shadow);
}

.existing-dish-content h3 {
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
    color: var(--color-accent);
}

.dish-notice-description {
    margin: 0 0 1.25rem 0;
    padding: 1rem;
    background: var(--color-bg);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--border-radius-sm);
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.6;
}

.dish-title-highlight {
    font-weight: 600;
    color: var(--color-accent);
}

.dish-extras-details {
    margin: 1rem 0;
}

.dish-extras-details summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--color-accent);
    font-size: 0.9rem;
    padding: 0.5rem 0;
    list-style: none;
    user-select: none;
}

.dish-extras-details summary::-webkit-details-marker {
    display: none;
}

.dish-extras-details summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.2s ease;
}

.dish-extras-details[open] summary::before {
    transform: rotate(90deg);
}

.dish-extras-content {
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--color-bg);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
}

.extras-section {
    margin-bottom: 0.75rem;
}

.extras-section:last-child {
    margin-bottom: 0;
}

.extras-section strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text);
}

.extras-section ul {
    margin: 0;
    padding-left: 1.5rem;
    list-style: disc;
}

.extras-section li {
    margin-bottom: 0.25rem;
    color: var(--color-text);
}

.existing-dish-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.or-continue-text {
    font-size: 0.9rem;
    color: var(--color-subtle);
}

.review-variant-section {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 4px var(--color-shadow);
}

.review-variant-section h3 {
    margin-top: 0;
    color: var(--color-accent);
}

.section-description {
    color: var(--color-subtle);
    margin-bottom: 1.5rem;
}

/* --- Make-Ahead Selection --- */
.make-ahead-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.make-ahead-item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    transition: all 0.2s ease;
}

.make-ahead-item:has(.make-ahead-checkbox:checked) {
    background: var(--color-success-light);
    border-color: var(--color-accent);
}

.make-ahead-checkbox-label {
    display: flex;
    gap: 1rem;
    cursor: pointer;
    align-items: flex-start;
}

.make-ahead-checkbox {
    margin-top: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    flex-shrink: 0;
}

.make-ahead-info {
    flex: 1;
}

.make-ahead-title {
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: 0.5rem;
}

.make-ahead-storage {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-subtle);
    margin-bottom: 0.25rem;
}

.make-ahead-storage svg {
    flex-shrink: 0;
}

.make-ahead-notes {
    font-size: 0.9rem;
    color: var(--color-text);
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: white;
    border-left: 3px solid var(--color-accent);
    border-radius: 4px;
}

/* --- Make-Ahead Section in Generated View --- */
.make-ahead-section {
    margin-bottom: 3rem;
    padding: 1.5rem;
    background: var(--color-info-light);
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius-lg);
}

.make-ahead-section-header {
    margin-bottom: 1.5rem;
}

.make-ahead-section-header h3 {
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.make-ahead-card {
    border-left: 4px solid var(--color-accent);
}

.make-ahead-instructions {
    padding: 1rem;
    margin-bottom: 1rem;
    background: white;
    border-left: 3px solid var(--color-accent);
    border-radius: var(--border-radius-md);
}

.make-ahead-instructions h5 {
    margin: 0 0 0.5rem 0;
    color: var(--color-accent);
}

.make-ahead-instructions p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

.storage-info {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--color-accent);
    font-weight: 500;
    margin-left: 0.5rem;
}

.storage-info svg {
    flex-shrink: 0;
}

/* --- Make-Ahead Timeline Section --- */
.make-ahead-timeline-section {
    margin-bottom: 3rem;
    padding: 1.5rem;
    background: var(--color-info-light);
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius-lg);
}

.make-ahead-footer-note {
    margin-top: 1.5rem;
    padding: 1rem;
    background: white;
    border-left: 3px solid var(--color-accent);
    border-radius: var(--border-radius-md);
    font-size: 0.95rem;
}

/* --- Wizard Navigation --- */
.wizard-navigation {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: var(--color-header);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 8px var(--color-shadow);
    z-index: 100;
}

.wizard-navigation .nav-left,
.wizard-navigation .nav-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-next,
.btn-primary {
    padding: 0.6rem 1.6rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--color-accent);
    color: white;
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    margin-left: auto;
    transition: all 0.2s ease;
}

.btn-next:hover,
.btn-primary:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    transform: translateY(-1px);
}

.btn-outline {
    padding: 0.6rem 1.6rem;
    font-size: 1rem;
    font-weight: 600;
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-outline:hover {
    background: var(--color-accent);
    color: white;
    transform: translateY(-1px);
}

/* --- Builder Component Cards --- */
.builder-wizard .component-grid .card {
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.builder-wizard .component-grid .card.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-alpha-15);
}

.builder-wizard .component-grid .card:hover {
    transform: translateY(-2px);
}

/* Selection indicator for builder cards */
.builder-wizard .component-grid .card.selected::after {
    content: '✓';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: white;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Layout main section */
.layout-main h2,
.layout-main h3 {
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

.layout-main h3:first-child {
    margin-top: 0;
}

/* Selected components section styling */
#selectedComponentCards {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-border);
}

/* Hide border and spacing when no components selected */
#selectedComponentCards:empty {
    display: none;
}

/* Review mode adjustments */
.review-section .component-grid .card {
    cursor: default;
}

.review-section .component-grid .card:hover {
    transform: none;
}

/* ======================
   BUILDER COMPONENT CARDS
   Cards used in wizard component selection
   ====================== */

/* --- Builder Card Container --- */
.builder-card {
    display: flex;
    flex-direction: column;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 8px var(--color-shadow);
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Ensure clickable appearance */
.builder-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-shadow-hover);
}

.builder-card.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-alpha-15);
}

/* Season indicator for builder cards */
.builder-card.card--in-season {
    border: 2px solid var(--color-accent);
}

/* Suggested card for first-time users */
.builder-card.suggested {
    border-color: var(--color-accent);
    position: relative;
    animation: suggestedPulse 2s ease-in-out infinite;
}

.builder-card.suggested::before {
    content: 'Anbefalt';
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--color-accent);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    z-index: 10;
}

@keyframes suggestedPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--color-accent-alpha-40);
    }
    50% {
        box-shadow: 0 0 0 6px transparent;
    }
}

/* --- First-Time Suggestion Hint --- */
.first-time-suggestion {
    background: linear-gradient(135deg, var(--color-accent-alpha-8), var(--color-accent-alpha-5));
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius-md);
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.suggestion-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.suggestion-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.suggestion-text {
    flex: 1;
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.4;
}

.suggestion-dismiss {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--color-subtle);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.suggestion-dismiss:hover {
    color: var(--color-text);
}

@media (max-width: 600px) {
    .suggestion-content {
        flex-wrap: wrap;
    }

    .suggestion-text {
        width: calc(100% - 3rem);
    }
}

/* --- Builder Card Image --- */
/* Week 5 fix: Match list card aspect ratio */
.builder-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* Was 3/2 - now matches list cards */
    overflow: hidden;
    background: var(--color-bg);
}

.builder-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.builder-card-image .card-placeholder-image {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
}

/* --- Builder Card Body --- */
.builder-card-body {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    flex: 1;
}

.builder-card-title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: center;
    line-height: 1.3;
}

/* --- Builder Card Meta (Time Badges) --- */
.builder-card-meta {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.time-badge-small {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.4rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-pill);
    font-size: 0.7rem;
    color: var(--color-text);
    white-space: nowrap;
}

/* --- Builder Card Badges --- */
.builder-card-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

/* Add spacing for card badges in builder cards */
.builder-card-body .card-badges-container {
    margin-bottom: 0.75rem;
}
/* --- Builder Action Button --- */
.btn-builder-action {
    width: 100%;
    padding: 0.6rem 0.875rem;
    margin-top: auto;
    font-family: 'Lora', serif;
    font-size: 0.9rem;
    font-weight: 600;
    background: transparent;
    color: var(--color-accent);
    border: 2.5px solid var(--color-accent);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-builder-action:hover {
    background: var(--color-accent);
    color: white;
    transform: translateY(-1px);
}

/* Remove button - subtle/muted style */
.btn-builder-action.btn-remove {
    background: transparent;
    color: var(--color-subtle);
    border-color: var(--color-border);
}

.btn-builder-action.btn-remove:hover {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-subtle);
}

/* --- All Selected Message --- */
.all-selected-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-subtle);
}

.all-selected-message p {
    margin: 0;
    font-size: 1rem;
}

.all-selected-message .all-selected-hint {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-style: italic;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    .wizard-header .progress-bar {
        padding: 1rem;
    }

    .wizard-header .progress-step .label {
        font-size: 0.75rem;
    }

    .wizard-header .progress-step .number {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }

    .toggle-buttons {
        flex-direction: column;
    }

    .component-grid {
        grid-template-columns: repeat(2, 1fr); /* Week 5 fix: 2 columns on mobile, not 1 */
    }

    .wizard-navigation {
        flex-direction: column;
    }

    .btn-next,
    .btn-primary {
        margin-left: 0;
        width: 100%;
    }

    .builder-card-image {
        aspect-ratio: 4 / 3; /* Week 5 fix: Consistent aspect ratio */
    }

    .builder-card-body {
        padding: 0.625rem;
    }

    .builder-card-title {
        font-size: 0.95rem;
        margin-bottom: 0.4rem;
    }

    .builder-card-meta {
        gap: 0.3rem;
        margin-bottom: 0.4rem;
    }

    .time-badge-small {
        padding: 0.15rem 0.4rem;
        font-size: 0.7rem;
    }

    .builder-card-badges {
        margin-bottom: 0.5rem;
        gap: 0.3rem;
    }

    .btn-builder-action {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    /* Occasion cards mobile */
    .occasion-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .occasion-image-wrapper {
        margin-bottom: 0.4rem;
    }

    .occasion-title {
        font-size: 0.9rem;
    }

    .occasion-description {
        font-size: 0.75rem;
    }

    .btn-start-over {
        font-size: 0.85rem;
        padding: 0.6rem 0.8rem;
    }

    .btn-start-over span {
        display: none;
    }

    /* View mode toggle mobile */
    .view-mode-toggle {
        padding: 1rem;
        margin: 1rem 0.5rem;
    }

    .toggle-label {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .toggle-btn {
        padding: 0.65rem 0.85rem;
        font-size: 0.85rem;
    }

    .mode-description {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    /* Level selector mobile */
    .level-selector-description {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .step-level-tab {
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
    }

    .step-level-tab .tab-text {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .wizard-header .progress-step:not(:last-child)::after {
        display: none;
    }

    .wizard-header .progress-bar {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .wizard-header .progress-step {
        flex-basis: calc(50% - 0.5rem);
    }

    /* Builder cards extra compact - Week 5 fix: Consistent aspect ratio */
    .builder-card-image {
        aspect-ratio: 4 / 3; /* Was 16/9 - now consistent */
    }

    .builder-card-body {
        padding: 0.5rem;
    }

    .builder-card-title {
        font-size: 0.875rem;
        margin-bottom: 0.3rem;
    }

    .builder-card-meta {
        margin-bottom: 0.3rem;
    }

    .time-badge-small {
        font-size: 0.65rem;
        padding: 0.125rem 0.35rem;
    }

    .builder-card-badges {
        margin-bottom: 0.4rem;
    }

    .btn-builder-action {
        padding: 0.45rem 0.6rem;
        font-size: 0.8rem;
    }

    /* Occasion cards single column on very small screens */
    .occasion-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .occasion-image-wrapper {
        aspect-ratio: 4 / 3;
    }

    .occasion-title {
        font-size: 0.85rem;
    }

    .occasion-description {
        display: none;
    }

    .placeholder-icon {
        width: 32px;
        height: 32px;
    }
}

/* --- Equipment Conflict Warnings --- */
.timeline-conflicts,
.timeline-parallel-tasks {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--color-surface, #fff);
    border-radius: 8px;
    border-left: 4px solid var(--color-warning, #ffc107);
}

.timeline-parallel-tasks {
    border-left-color: var(--color-info, #17a2b8);
}

.timeline-conflicts h4,
.timeline-parallel-tasks h4 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: var(--color-text, #333);
}

.conflicts-intro,
.parallel-intro {
    margin: 0 0 1rem;
    color: var(--color-text-secondary, #666);
    font-size: 0.95rem;
}

.conflict-warning,
.parallel-suggestion {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    margin: 0.75rem 0;
    background: var(--color-warning-light, #fffbeb);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-warning, #fde68a);
}

.parallel-suggestion {
    background: var(--color-info-light);
    border-color: var(--color-info);
}

.conflict-icon,
.parallel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.6rem;
    background: var(--color-warning);
    color: white;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
}

.parallel-icon {
    background: var(--color-info);
}

.conflict-content,
.parallel-content {
    flex: 1;
}

.conflict-message,
.parallel-message {
    margin: 0 0 0.5rem;
    color: var(--color-text, #333);
    font-size: 0.95rem;
}

.conflict-details,
.parallel-details {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
    color: var(--color-text-secondary, #666);
    font-size: 0.9rem;
}

.conflict-details li,
.parallel-details li {
    margin: 0.25rem 0;
}

.conflict-suggestion {
    margin: 0.75rem 0 0;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--color-text-secondary, #666);
}

/* --- Variant Badges and Indicators --- */

/* Variant badges container */
.variant-badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Variant badge styling */
.variant-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

/* Dietary variant badge (accent green) */
.variant-badge-dietary {
    background: var(--color-success-light);
    color: var(--color-accent-dark);
    border: 1px solid var(--color-accent-light);
}

/* Flavor variant badge (info blue) */
.variant-badge-flavor {
    background: var(--color-info-light);
    color: var(--color-info);
    border: 1px solid var(--color-info);
}

/* Recommended badge (gold/yellow) */
.variant-badge-recommended {
    background: var(--color-warning-light);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

/* Optional variant badge (subtle gray) */
.variant-badge-optional {
    background: var(--color-bg);
    color: var(--color-subtle);
    border: 1px solid var(--color-border);
}

/* Variant notices styling improvements */
.variant-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.variant-notice .notice-icon {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.dietary-notice {
    background: var(--color-info-light);
    border: 1px solid var(--color-info);
    color: var(--color-info);
}

.recommendation-notice {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning-border);
    color: var(--color-warning-text);
}

/* Improve variant selector dropdown */
.variant-select {
    width: 100%;
    padding: 0.6rem;
    font-size: 0.95rem;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-card);
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.variant-select:hover {
    border-color: var(--color-accent-light);
}

.variant-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-alpha-10);
}

/* Style for select options (limited browser support) */
.variant-select option[data-importance="dietary"] {
    font-weight: 600;
}

.variant-select option[data-is-recommended="true"] {
    font-weight: 500;
}


/* --- Ingredient Choice UI  --- */

.ingredient-choices-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.ingredient-choice-item {
    padding: 1.25rem;
    background: var(--color-card);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
}

.ingredient-choice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.ingredient-choice-header strong {
    font-size: 1.1rem;
    color: var(--color-text);
}

.has-recipe-badge {
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
    background: var(--color-info-light);
    color: var(--color-info);
    border-radius: 12px;
    border: 1px solid var(--color-info);
}

.ingredient-choice-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.choice-option {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-card);
    cursor: pointer;
    transition: all 0.2s ease;
}

.choice-option:hover {
    border-color: var(--color-accent-light);
    background: var(--color-bg);
}

.choice-option.active {
    border-color: var(--color-accent);
    background: var(--color-success-light);
}

.choice-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
}

.choice-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.choice-text {
    flex: 1;
}

.choice-label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.choice-description {
    font-size: 0.9rem;
    color: var(--color-subtle);
    line-height: 1.4;
}

.choice-description a {
    color: var(--color-accent);
    text-decoration: underline;
}

.choice-description a:hover {
    color: var(--color-accent-dark);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .ingredient-choice-options {
        grid-template-columns: 1fr;
    }

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

/* --- Ingredient References in Steps --- */

.ingredient-ref {
    font-weight: 600;
}

/* ======================
   LIVE PREVIEW PANEL - REMOVED (Week 5 user testing feedback)
   The "Din rett" popup was removed as users found it redundant
   with the selected components shown at the top of the page.
   Keeping commented out for potential future reference.
   ====================== */

/* ======================
   MOBILE TOUCH IMPROVEMENTS
   ====================== */

@media (max-width: 768px) {
    /* Touch-friendly builder card buttons */
    .builder-card-actions button,
    .builder-card-actions .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem;
    }

    /* Larger tap targets for component selection */
    .builder-card {
        min-height: 100px;
    }

    .builder-card .card-select-overlay {
        min-height: 44px;
    }

    /* Touch-friendly servings controls */
    .servings-control button,
    .servings-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.25rem;
    }

    .servings-input {
        min-height: 44px;
        font-size: 1.1rem;
        text-align: center;
    }

    /* Touch-friendly skill level tabs */
    .step-level-tab {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    /* Progress bar - larger touch targets */
    .wizard-header .progress-step {
        min-height: 44px;
        padding: 0.75rem;
    }

    /* Occasion cards - easier to tap */
    .occasion-card {
        min-height: 80px;
        padding: 1rem;
    }

    /* Role filter chips */
    .role-chip,
    .filter-chip {
        min-height: 40px;
        padding: 0.5rem 1rem;
    }

    /* Generate/action buttons */
    .btn-generate,
    .btn-primary-large {
        min-height: 52px;
        font-size: 1rem;
        padding: 1rem 2rem;
    }

    /* Variant selector options */
    .variant-option,
    .variant-selector-option {
        min-height: 48px;
        padding: 0.75rem 1rem;
    }
}

/* Extra small screens (320px - iPhone SE) */
@media (max-width: 360px) {
    /* Single column grid on tiny screens */
    .component-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    /* Compact builder cards */
    .builder-card {
        border-radius: var(--border-radius-sm);
    }

    .builder-card-body {
        padding: 0.4rem;
    }

    .builder-card-title {
        font-size: 0.8rem;
    }

    /* Progress bar adjustments */
    .wizard-header .progress-bar {
        gap: 0.5rem;
    }

    .wizard-header .progress-step {
        flex-basis: 100%;
        padding: 0.5rem;
    }

    .wizard-header .progress-step-text {
        font-size: 0.75rem;
    }

    /* Compact action buttons */
    .btn-generate,
    .btn-primary-large {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}


/* ======================
   STEP GUIDANCE
   Text displayed below step headings
   ====================== */

.step-guidance-text {
    color: var(--color-subtle);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 0.25rem;
    margin-bottom: 1rem;
    max-width: 600px;
}

.role-guidance-text {
    color: var(--color-subtle);
    font-size: 0.875rem;
    line-height: 1.4;
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
}


/* ======================
   INGREDIENT SELECTION PANEL
   For steps with ingredient mode
   ====================== */

.ingredient-selection-panel {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.ingredient-selection-header h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: var(--color-heading);
}

.ingredient-selection-content {
    margin-top: 1rem;
}

/* Role group within ingredient selection */
.ingredient-role-group {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.ingredient-role-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.role-group-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-heading);
    margin: 0 0 0.5rem 0;
}

/* Ingredient suggestions list */
.ingredient-suggestions-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
}

/* Individual ingredient suggestion item */
.ingredient-suggestion-item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 0.75rem 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ingredient-suggestion-item:hover {
    border-color: var(--color-accent-light);
}

.ingredient-suggestion-item.selected {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-accent-alpha-5), var(--color-accent-alpha-2));
    box-shadow: 0 0 0 2px var(--color-accent-alpha-10);
}

/* Checkbox label */
.ingredient-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.ingredient-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    margin-top: 2px;
}

.ingredient-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ingredient-name {
    font-weight: 500;
    color: var(--color-text);
}

.ingredient-quantity {
    font-size: 0.85rem;
    color: var(--color-subtle);
}

/* Selection summary */
.ingredient-selection-summary {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected-count {
    font-size: 0.9rem;
    color: var(--color-subtle);
}

#ingredientCount {
    font-weight: 600;
    color: var(--color-accent);
}


/* Responsive styles for ingredient selection */
@media (max-width: 640px) {
    .ingredient-selection-panel {
        padding: 1rem;
    }

    .ingredient-suggestions-list {
        grid-template-columns: 1fr;
    }

    .ingredient-suggestion-item {
        padding: 0.625rem 0.875rem;
    }
}


/* ======================
   TILBEHØR SECTION
   Direct ingredient selections
   ====================== */

.tilbehor-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.tilbehor-section h3 {
    margin-bottom: 0.5rem;
}

.tilbehor-section .section-note {
    font-size: 0.875rem;
    color: var(--color-subtle);
    font-style: italic;
    margin-bottom: 1rem;
}

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

.tilbehor-list .check-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.tilbehor-list .check-item:last-child {
    border-bottom: none;
}

.tilbehor-list .ingredient-amount {
    min-width: 80px;
    color: var(--color-subtle);
    font-size: 0.9rem;
}

.tilbehor-list .ingredient-link {
    color: var(--color-text);
    text-decoration: none;
}

.tilbehor-list .ingredient-link:hover {
    text-decoration: underline;
    background: transparent;
}

/* ======================
   FIRST-TIME USER BANNER
   ====================== */

.first-time-banner {
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg));
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius-md, 8px);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.first-time-banner .banner-content p {
    margin: 0;
    color: var(--color-text);
    font-size: 0.95rem;
}

.first-time-banner .banner-dismiss {
    color: var(--color-accent);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.first-time-banner .banner-dismiss:hover {
    color: var(--color-accent-dark);
}

/* Start page tutorial banner */
.first-time-banner--start {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 2rem;
    margin: 1.5rem auto;
    max-width: 600px;
}

.first-time-banner--start .first-time-banner__text {
    text-align: center;
    margin-bottom: 1.25rem;
}

.first-time-banner__text strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-heading);
    font-size: 1.1rem;
}

.first-time-banner__text span {
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.5;
}

.first-time-banner__text em {
    font-style: normal;
    font-weight: 600;
    color: var(--color-accent);
}

.first-time-banner__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.first-time-banner--start .btn-link {
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* Icon styles for banners that use them (review step) */
.first-time-banner__content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.first-time-banner__icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

.first-time-banner__content .first-time-banner__text {
    text-align: left;
}

/* Review step tutorial banner */
.first-time-banner--review {
    margin-bottom: 1.5rem;
}

.first-time-banner--review .first-time-banner__content {
    margin-bottom: 0;
}

/* ======================
   SIGNUP PROMPT MODAL
   ====================== */

.signup-prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.signup-prompt-modal {
    background: var(--color-card);
    border-radius: var(--border-radius-lg, 12px);
    padding: 2rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.signup-prompt-modal h3 {
    margin: 0 0 0.75rem 0;
    color: var(--color-heading);
    font-size: 1.25rem;
}

.signup-prompt-modal p {
    margin: 0 0 1.5rem 0;
    color: var(--color-text);
    line-height: 1.5;
}

.signup-prompt-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.signup-prompt-actions .btn {
    flex: 1;
    max-width: 150px;
}

.signup-prompt-close {
    background: none;
    border: none;
    color: var(--color-subtle);
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0.5rem;
}

.signup-prompt-close:hover {
    color: var(--color-text);
}

/* ======================
   HIGHLIGHTED BUTTON
   For first-time users
   ====================== */

.btn-primary.highlighted,
.wizard-actions .btn-primary.highlighted {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent);
    animation: subtle-pulse 2s ease-in-out infinite;
}

@keyframes subtle-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent);
    }
    50% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 15%, transparent);
    }
}

/* ======================
   COMPONENT SERVINGS
   Per-component portion overrides
   ====================== */

.component-servings-section {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md, 8px);
    overflow: hidden;
}

.component-servings-section .section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 1rem;
}

.component-servings-section .section-toggle:hover {
    background: color-mix(in srgb, var(--color-border) 30%, transparent);
}

.component-servings-section .section-toggle-header {
    flex: 1;
}

.component-servings-section .section-toggle-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-heading);
}

.component-servings-section .section-toggle-hint {
    display: block;
    font-size: 0.85rem;
    color: var(--color-subtle);
    margin-top: 0.25rem;
}

.component-servings-section .section-toggle-icon {
    flex-shrink: 0;
    color: var(--color-subtle);
    transition: transform 0.2s ease;
}

.component-servings-section .section-toggle[aria-expanded="true"] .section-toggle-icon {
    transform: rotate(180deg);
}

.component-servings-section .section-content {
    padding: 0 1rem 1rem;
}

.component-servings-section .section-description {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--color-subtle);
}

/* Component servings list */
.component-servings-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.component-servings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.component-servings-row:last-child {
    border-bottom: none;
}

.component-servings-name {
    flex: 1;
    font-size: 0.95rem;
    color: var(--color-text);
}

.component-servings-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.component-servings-input-group .servings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.15s ease;
}

.component-servings-input-group .servings-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.component-servings-input-group .servings-btn:active {
    transform: scale(0.95);
}

.component-servings-input {
    width: 60px;
    height: 32px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
    background: var(--color-bg);
    color: var(--color-text);
}

.component-servings-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.component-servings-input-group .servings-label {
    font-size: 0.85rem;
    color: var(--color-subtle);
    min-width: 60px;
}

/* Reset button */
.btn-reset-component-servings {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
    font-size: 0.85rem;
    color: var(--color-subtle);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-reset-component-servings:hover {
    background: var(--color-bg);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-reset-component-servings svg {
    flex-shrink: 0;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .component-servings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .component-servings-input-group {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ======================
   BUILDER NUTRITION
   ====================== */

/* Nutrition toggle in footer navigation */
.nutrition-nav-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.nutrition-nav-toggle.active {
    color: var(--color-accent);
}

.nutrition-nav-toggle.active svg {
    stroke: var(--color-accent);
}

/* Nutrition panel - shown above selected components when toggled */
.builder-nutrition-panel {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius, 8px);
}

.builder-nutrition-panel.hidden {
    display: none;
}

/* Empty/error states */
.builder-nutrition-panel .nutrition-empty,
.builder-nutrition-panel .nutrition-error {
    font-size: 0.85rem;
    color: var(--color-subtle);
    text-align: center;
    padding: 0.5rem;
}

.builder-nutrition-panel .nutrition-error {
    color: var(--color-error, #c53030);
}