/* ===== UNIFIED CSS FOR RECIPES, DRINKS, AND SNACKS ===== */

/* ===== BASE STYLING AND ANIMATIONS (SHARED) ===== */
.hover-shadow {
    transition: box-shadow 0.3s, transform 0.3s;
}

.hover-shadow:hover {
    box-shadow: 0 0.5rem 1rem var(--glass-black-15) !important;
    transform: translateY(-3px);
}

@keyframes popoverFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes filterFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes btnPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes highlightPulse {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(40, 167, 69, 0.5);
        transform: translateY(-3px);
    }

    50% {
        box-shadow: 0 0 25px rgba(40, 167, 69, 0.8);
        transform: translateY(-5px);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.8;
    }
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== SHARED ITEM STYLING (Recipe, Drink, Snack) ===== */
/* Images */
.recipe-img,
.drink-img,
.snack-img {
    height: 200px;
    object-fit: contain;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

/* Highlighted Names */
.recipe-name-highlight,
.drink-name-highlight,
.snack-name-highlight {
    font-size: 1.25rem !important;
    color: var(--bs-body-color) !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
    position: relative;
    padding-bottom: 0.25rem;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    text-decoration-color: var(--bs-body-color);
}

.card-title.recipe-name-highlight,
.card-title.drink-name-highlight,
.card-title.snack-name-highlight {
    font-size: 1.5rem !important;
    padding-bottom: 0.5rem;
}

[data-bs-theme="dark"] .recipe-name-highlight,
[data-bs-theme="dark"] .drink-name-highlight,
[data-bs-theme="dark"] .snack-name-highlight {
    border-bottom-color: var(--glass-white-10);
}

/* Highlight Items (Active State) */
.highlight-recipe,
.highlight-drink,
.highlight-snack {
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.5) !important;
    transform: translateY(-5px);
    transition: all 0.3s ease;
    animation: highlightPulse 1.5s infinite;
    border: 2px solid #28a745 !important;
    background-color: rgba(40, 167, 69, 0.05);
    position: relative;
    z-index: 2;
}

#table-view .highlight-recipe,
#table-view .highlight-drink,
#table-view .highlight-snack {
    box-shadow: none !important;
    animation: none;
    background-color: rgba(40, 167, 69, 0.1);
    border: none !important;
    border-left: 4px solid #28a745 !important;
}

/* Table Thumbnail */
.table-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* ===== NUTRITION MACROS (Consolidated Colors) ===== */
.nutrition-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.nutrition-pill {
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-weight: normal;
    font-size: var(--fs-body);
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    position: relative;
    box-shadow: 0 2px 4px var(--glass-black-5);
    white-space: nowrap;
}

.nutrition-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 5px var(--glass-black-10);
}

.nutrition-pill:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Macro Logic: Calories (Purple), Protein (Blue), Carbs (Green), Fat (Orange) */
/* Backgrounds & Text */
.bg-calories,
.macro-card.calories .macro-value,
.nutrition-card.calories .nutrition-icon {
    background-color: var(--bg-calories) !important;
    color: var(--bg-calories-text) !important;
}

.bg-protein,
.macro-card.protein .macro-value,
.nutrition-card.protein .nutrition-icon {
    background-color: var(--bg-protein) !important;
    color: var(--bg-protein-text) !important;
}

.bg-carbs,
.macro-card.carbs .macro-value,
.nutrition-card.carbs .nutrition-icon {
    background-color: var(--bg-carbs) !important;
    color: var(--bg-carbs-text) !important;
}

.bg-fat,
.macro-card.fat .macro-value,
.nutrition-card.fat .nutrition-icon {
    background-color: var(--bg-fat) !important;
    color: var(--bg-fat-text) !important;
}

/* Borders & Text Colors */
.border-calories {
    border-color: var(--bg-calories) !important;
}

.calories,
.calories .nutrition-value {
    color: var(--bg-calories-text) !important;
}

.border-protein {
    border-color: var(--bg-protein) !important;
}

.protein,
.protein .nutrition-value {
    color: var(--bg-protein-text) !important;
}

.border-carbs {
    border-color: var(--bg-carbs) !important;
}

.carbs,
.carbs .nutrition-value {
    color: var(--bg-carbs-text) !important;
}

.border-fat {
    border-color: var(--bg-fat) !important;
}

.fat,
.fat .nutrition-value {
    color: var(--bg-fat-text) !important;
}

/* Cards & Icons backgrounds */
.nutrition-card.calories {
    background-color: var(--bg-calories) !important;
    border: 1px solid var(--bg-calories) !important;
}

.calories .nutrition-icon {
    background-color: var(--bg-calories) !important;
    color: var(--bg-calories-text) !important;
}

.nutrition-card.protein {
    background-color: var(--bg-protein) !important;
    border: 1px solid var(--bg-protein) !important;
}

.protein .nutrition-icon {
    background-color: var(--bg-protein) !important;
    color: var(--bg-protein-text) !important;
}

.nutrition-card.carbs {
    background-color: var(--bg-carbs) !important;
    border: 1px solid var(--bg-carbs) !important;
}

.carbs .nutrition-icon {
    background-color: var(--bg-carbs) !important;
    color: var(--bg-carbs-text) !important;
}

.nutrition-card.fat {
    background-color: var(--bg-fat) !important;
    border: 1px solid var(--bg-fat) !important;
}

.fat .nutrition-icon {
    background-color: var(--bg-fat) !important;
    color: var(--bg-fat-text) !important;
}

/* Popover Content Borders */
/* Chart Colors */
.chart-calories {
    border-color: rgb(147, 51, 234) !important;
    background-color: rgba(147, 51, 234, 0.1) !important;
}

.chart-protein {
    border-color: rgb(59, 130, 246) !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.chart-carbs {
    border-color: rgb(34, 197, 94) !important;
    background-color: rgba(34, 197, 94, 0.1) !important;
}

.chart-fat {
    border-color: rgb(251, 146, 60) !important;
    background-color: rgba(251, 146, 60, 0.1) !important;
}

/* Dark mode adjustments for Macros */
[data-bs-theme="dark"] .bg-calories,
[data-bs-theme="dark"] .bg-protein,
[data-bs-theme="dark"] .bg-carbs,
[data-bs-theme="dark"] .bg-fat {
    filter: brightness(1.2);
}

[data-bs-theme="dark"] .nutrition-card.calories,
[data-bs-theme="dark"] .nutrition-card.protein,
[data-bs-theme="dark"] .nutrition-card.carbs,
[data-bs-theme="dark"] .nutrition-card.fat {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===== POPOVERS & TOOLTIPS ===== */
.popover {
    box-shadow: 0 0.5rem 1rem var(--glass-black-15) !important;
    border-radius: 0.5rem !important;
    border: 1px solid var(--glass-black-10) !important;
    animation: popoverFadeIn 0.2s ease !important;
    max-width: 300px;
}

.popover-header {
    display: flex !important;
    align-items: center !important;
    background-color: rgba(var(--bs-light-rgb), 0.8) !important;
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0.5rem 0.75rem !important;
}

.popover-body {
    padding: 0 !important;
}

.nutrition-value {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Comprehensive Popover */
.nutrition-popover-comprehensive .nutrition-value-card .card {
    border-radius: var(--radius-md);
    border: none;
    box-shadow: 0 2px 4px var(--glass-black-5);
    transition: all 0.2s ease;
}

.nutrition-popover-comprehensive .nutrition-value-card .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px var(--glass-black-10);
}

.nutrition-popover-comprehensive .nutrition-value-card .card-title {
    font-size: var(--fs-xl);
    font-weight: 600;
}

.nutrition-popover-comprehensive .nutrition-value-card .card-subtitle {
    font-size: var(--fs-body-sm);
    font-weight: 500;
}

.nutrition-popover-comprehensive .alert-light {
    background-color: rgba(var(--bs-light-rgb), 0.5);
    border: 1px solid var(--glass-black-5);
    border-radius: var(--radius-md);
}

/* ===== INGREDIENTS LIST ===== */
.ingredients-list-compact {
    max-height: 250px;
    overflow-y: auto;
    border-radius: var(--radius-xs);
    padding: 0.5rem;
    background-color: rgba(var(--bs-light-rgb), 0.5);
    border: 1px solid var(--glass-black-5);
}

.ingredient-name-container {
    flex: 1;
    min-width: 0;
}

.form-check {
    margin-bottom: 0;
}

.form-check-label {
    word-wrap: break-word;
    word-break: break-word;
}
.ingredient-details{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    gap: 0.5rem;
}
.ingredient-amount {
    white-space: nowrap;
    margin-left: 8px;
}

.list-group-item {
    transition: background-color 0.2s;
}

.list-group-item:hover {
    background-color: var(--glass-black-2);
}

.list-group-item .form-check-input:checked+.form-check-label {
    text-decoration: line-through;
    color: #6c757d;
}

.ingredient-row {
    font-size: var(--fs-body);
    padding: 0.25rem 0;
    transition: background-color 0.2s;
}

.ingredient-row:hover {
    background-color: var(--glass-black-3);
}

.ingredient-name {
    flex: 1;
    margin-right: 0.5rem;
}

.ingredients-toggle-btn {
    cursor: pointer;
    font-size: var(--fs-body);
    color: var(--bs-primary);
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    margin-top: 0.5rem;
    transition: all 0.2s ease;
}

.ingredients-toggle-btn:hover {
    text-decoration: underline;
    color: var(--bs-primary-hover);
}

.ingredients-toggle-btn i {
    transition: transform 0.3s;
}

.ingredients-toggle-btn.active i {
    transform: rotate(180deg);
}

.extra-ingredients-table {
    background-color: rgba(var(--bs-light-rgb), 0.5);
    padding-left: 1rem;
    border-left: 2px solid var(--bs-primary);
}

/* ===== FILTERS & SEARCH ===== */
.active-filter {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: var(--bs-tertiary-bg);
    border-radius: 50px;
    border: 1px solid var(--bs-border-color);
    font-size: var(--fs-body-lg);
    transition: all 0.2s ease;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.active-filter:hover {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color-translucent);
}

.active-filter .remove-filter {
    transition: all 0.2s ease;
    color: var(--bs-danger);
    margin-left: 0.5rem;
}

.active-filter .remove-filter:hover {
    transform: scale(1.2);
    opacity: 0.85;
}

.quick-filter-btn {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 50px;
    font-size: var(--fs-body);
    transition: all 0.3s ease;
    border-width: 1px;
}

.quick-filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 5px var(--glass-black-10);
}

.quick-filter-btn.active {
    box-shadow: 0 0.25rem 0.5rem rgba(var(--bs-primary-rgb), 0.2);
}

/* Advanced Search Panel */
#advancedSearch {
    transition: all 0.3s ease;
}

.advanced-search-button,
.more-filters-button {
    transition: all 0.2s ease;
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.advanced-search-button:hover,
.more-filters-button:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.advanced-search-button i.fa-chevron-down,
.filter-toggle-icon {
    transition: transform 0.3s ease;
}

.advanced-search-button[aria-expanded="true"] i.fa-chevron-down,
.more-filters-button[aria-expanded="true"] .filter-toggle-icon {
    transform: rotate(180deg);
}

/* Search Card */
.search-input-wrapper .form-control:focus {
    box-shadow: none;
    border-color: var(--bs-primary);
}

.search-input-wrapper .input-group-text {
    border-color: var(--bs-border-color);
}

.search-input-wrapper .form-control:focus+.input-group-text,
.search-input-wrapper .input-group-text+.form-control:focus {
    border-color: var(--bs-primary);
}

/* Glassmorphism Search */
.search-input-wrapper {
    position: relative;
}

.search-input-wrapper .form-control {
    padding: 0.5rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px var(--glass-black-10);
    transition: all 0.3s ease;
}

.search-input-wrapper .form-control:focus {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-color: rgba(255, 255, 255, 0.8);
}

.search-icon {
    color: var(--bs-secondary-color);
    z-index: 5;
}

/* Specific Search Overrides */
.search-input-wrapper .form-control.drinks-search,
.search-input-wrapper .form-control.snacks-search {
    padding-left: 2.5rem;
}

/* ===== SETTINGS, SELECT2 & TOGGLES ===== */
.select2-container--bootstrap-5 .select2-selection {
    border-radius: var(--radius-sm);
    border: 1px solid var(--bs-border-color);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--bs-primary);
    border-radius: var(--radius-sm);
    box-shadow: 0 0.5rem 1rem var(--glass-black-15);
}

/* Select2 Cleanup */
.select2-selection__choice,
.select2-search.select2-search--inline {
    list-style-type: none !important;
    list-style: none !important;
}

.select2-selection__choice::marker,
.select2-search.select2-search--inline::marker {
    display: none !important;
    content: none !important;
    font-size: 0 !important;
}

.select2-selection__choice::before,
.select2-search.select2-search--inline::before {
    display: none !important;
    content: none !important;
}

.select2-selection__rendered {
    list-style-type: none !important;
    list-style: none !important;
    padding-left: 0.5rem !important;
}

.select2-selection--multiple .select2-selection__rendered li,
.select2-selection--multiple .select2-search--inline {
    list-style-type: none !important;
    list-style: none !important;
}

.select2-search--inline .select2-search__field {
    margin-left: 0 !important;
    padding-left: 0.5rem !important;
    background: transparent !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    padding-left: 0.5rem !important;
    margin-bottom: 5px;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.select2-selection--multiple li {
    list-style-type: none !important;
    list-style-position: inside !important;
}

/* Toggles & View Options */
.btn-modern {
    padding: 0.5rem 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
    transition: all 0.3s ease;
}

.btn-modern:hover {
    background-color: var(--bs-secondary-bg);
}

.toggle-track {
    width: 36px;
    height: 20px;
    background-color: var(--bs-tertiary-bg);
    border-radius: var(--radius-md);
    margin: 0 0.5rem;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.toggle-track.active {
    background-color: var(--bs-primary);
}

.toggle-track.active .toggle-thumb {
    transform: translateX(16px);
}

.view-icon,
.format-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    width: 24px;
    height: 24px;
    transition: color 0.3s ease;
}

.view-icon.active,
.format-icon.active {
    color: var(--bs-primary);
}

.btn-pulse {
    animation: btnPulse 0.4s;
}

/* Settings Panels */
.settings-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-end;
}

.btn-group {
    background: var(--glass-black-4);
    border-radius: var(--radius-md);
    padding: 4px;
    display: flex;
    width: 100%;
    position: relative;
    z-index: 1;
}

.view-type-btn,
.nutrition-mode-btn {
    border-radius: 8px !important;
    margin: 0 2px;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    height: 36px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.view-type-btn:hover,
.nutrition-mode-btn:hover {
    transform: translateY(-1px);
}

.view-type-btn:hover i,
.nutrition-mode-btn:hover i {
    transform: scale(1.15);
}

.view-type-btn.btn-primary,
.nutrition-mode-btn.btn-primary {
    box-shadow: 0 3px 10px rgba(var(--bs-primary-rgb), 0.3);
}

.view-type-btn.btn-primary::after,
.nutrition-mode-btn.btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(var(--bs-primary-rgb), 0.3) 0%, transparent 70%);
    opacity: 0.6;
    z-index: -1;
    animation: pulse 2s infinite;
}

.view-type-btn.btn-primary i,
.nutrition-mode-btn.btn-primary i {
    animation: iconPulse 2s infinite;
}

.view-type-btn.btn-outline-primary,
.nutrition-mode-btn.btn-outline-primary {
    background-color: transparent;
    color: var(--bs-secondary-color);
}

.view-type-btn.btn-outline-primary:hover,
.nutrition-mode-btn.btn-outline-primary:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

/* Nutrition Toggle */
.toggle-label-mini.active {
    color: var(--bs-primary);
    font-weight: 500;
}

.progress-track {
    height: 2px;
    width: 90%;
    background-color: transparent;
    border-radius: 1px;
    position: relative;
    border: 1px solid var(--bs-border-color);
    margin: 6px 0;
}

.nutrition-toggle-container .progress-track {
    height: 4px;
    background-color: var(--glass-black-8);
    border-radius: 2px;
    border: none;
    width: 100%;
}

.progress-indicator {
    height: 8px;
    width: 8px;
    background-color: var(--bs-primary);
    border-radius: var(--radius-full);
    position: absolute;
    top: -4px;
    transition: transform 0.3s ease;
}

.nutrition-toggle-container .progress-indicator {
    height: 14px;
    width: 14px;
    border: 2px solid white;
    transform: translateY(-50%);
    top: 50%;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 1px 3px var(--glass-black-20);
}

.progress-indicator.position-1 {
    left: 7.5%;
    transform: translateX(0%);
}

.progress-indicator.position-2 {
    left: 45%;
    transform: translateX(0%);
}

.progress-indicator.position-3 {
    left: 83.5%;
    transform: translateX(0%);
}

/* Override positions for container specific */
.nutrition-toggle-container .progress-indicator.position-1 {
    left: 11.5%;
}

.nutrition-toggle-container .progress-indicator.position-2 {
    left: 46%;
}

.nutrition-toggle-container .progress-indicator.position-3 {
    left: 80.5%;
}

.nutrition-icon {
    width: 33.33%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--bs-gray-500);
    transition: color 0.3s;
    font-size: var(--fs-body-lg);
}

.nutrition-icon.active {
    color: var(--bs-primary);
    font-weight: 600;
}

/* ===== MAIN ITEM CARDS (Unified Recipe, Drink, Snack) ===== */
.recipe-card,
.drink-card,
.snack-card {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background-color: var(--bs-body-bg);
    box-shadow: 0 10px 20px var(--glass-black-10);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ===== COMPACT PAIRING CARD (Meal Pairing Suggestions) ===== */
.pairing-card .pairing-img {
    height: 110px;
    object-fit: cover;
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
}

.pairing-card .card-title {
    font-size: 0.95rem !important;
    padding-bottom: 0 !important;
    text-decoration: none;
}

.pairing-card .badge {
    font-size: 0.7rem;
}

.pairing-card .btn-add-pairing {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

@media (max-width: 768px) {
    .pairing-card .pairing-img {
        height: 90px;
    }
}

.recipe-image,
.drink-image,
.snack-image {
    height: 160px;
    position: relative;
    overflow: hidden;
}

.recipe-image img,
.drink-image img,
.snack-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.recipe-card:hover .recipe-image img,
.drink-card:hover .drink-image img,
.snack-card:hover .snack-image img {
    transform: scale(1.05);
}

.recipe-badge,
.drink-badge,
.snack-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 1;
}

.recipe-badge.private,
.drink-badge.private,
.snack-badge.private {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
}

.recipe-details,
.drink-details,
.snack-details {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.recipe-name,
.drink-name,
.snack-name {
    font-size: var(--fs-xl);
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--bs-body-color);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipe-nutrition,
.drink-nutrition,
.snack-nutrition {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.recipe-actions,
.drink-actions,
.snack-actions {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Buttons & Pills */
.nutrition-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--fs-body);
}

.btn-recipe,
.btn-drink,
.btn-snack {
    border-radius: var(--radius-2xl);
    padding: 8px 12px;
    font-size: var(--fs-body);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.btn-recipe i,
.btn-drink i,
.btn-snack i {
    margin-right: 4px;
}

.btn-details {
    background-color: var(--bs-primary);
    color: white;
}

.btn-details:hover {
    background-color: var(--bs-primary-hover, var(--bs-primary-dark, #0d6efd));
    color: white;
    transform: translateY(-2px);
}

.btn-clone,
.btn-add {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
}

.btn-clone i,
.btn-add i {
    margin: 0;
}

.btn-edit {
    background-color: var(--bs-gray-200);
    color: var(--bs-gray-700);
}

.btn-clone {
    background-color: var(--bs-info-bg-subtle, rgba(13, 202, 240, 0.1));
    color: var(--bs-info);
}

.btn-add {
    background-color: var(--bs-success-bg-subtle, rgba(25, 135, 84, 0.1));
    color: var(--bs-success);
}

.btn-edit:hover,
.btn-clone:hover,
.btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px var(--glass-black-10);
}

/* Swiper for Cards */
.swiper {
    width: 300px;
    height: auto;
    margin: 0 auto;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 280px;
    height: fit-content;
    border-radius: var(--radius-2xl);
}

.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
    border-radius: var(--radius-2xl);
}

/* Collections Containers */
.recipe-collections,
.drink-collections,
.snack-collections {
    display: flex;
    flex-direction: row;
    gap: 50px;
    padding: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.recipe-collection,
.drink-collection,
.snack-collection {
    position: relative;
}

.collection-title {
    font-size: var(--fs-3xl);
    font-weight: 600;
    color: var(--bs-primary);
    margin: 0;
    padding-bottom: 8px;
    position: relative;
    display: inline-block;
}

.collection-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 3px;
    background-color: var(--bs-primary);
    border-radius: 3px;
}

.recipe-count,
.drink-count,
.snack-count {
    font-size: var(--fs-body-lg);
    color: var(--bs-secondary);
    background-color: var(--bs-light);
    padding: 4px 12px;
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
}

/* ===== COLLECTION VIEW (Unified) ===== */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.collection-item {
    transition: transform 0.2s ease-in-out;
}

.collection-item:hover {
    transform: translateY(-5px);
}

.collection-img {
    height: 120px;
    object-fit: cover;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.nutrition-pills-mini .badge {
    padding: 0.35em 0.5em;
}

.collection-actions {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
}

.collection-actions .btn {
    padding: 0.2rem 0.4rem;
    font-size: var(--fs-sm);
}

/* Collection Specific Containers */
#collection-view .collection-recipes-container,
#collection-view .collection-drinks-container,
#collection-view .collection-snacks-container {
    padding: 2rem 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 4rem;
}

#collection-view .collection-category-section {
    position: relative;
}

#collection-view .collection-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

#collection-view .collection-category-title {
    font-size: var(--fs-4xl);
    font-weight: 700;
    color: var(--bs-primary);
    margin: 0;
    display: flex;
    align-items: center;
    position: relative;
}

#collection-view .collection-category-title::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60%;
    height: 4px;
    background: var(--bs-primary);
    border-radius: 2px;
}

#collection-view .collection-category-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#collection-view .collection-recipe-count,
#collection-view .collection-drink-count,
#collection-view .collection-snack-count {
    background: var(--bs-primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: var(--fs-body-lg);
    font-weight: 600;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.3);
}

/* Collection Swiper */
#collection-view .collection-swiper-container {
    position: relative;
    margin-top: 2rem;
}

#collection-view .swiper {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    position: relative;
}

#collection-view .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 280px;
    height: fit-content !important;
    border-radius: var(--radius-2xl);
}

/* Swipe Instructions */
#collection-view .collection-swipe-instruction {
    text-align: center;
    padding: 0.6rem 1rem;
    background: rgba(var(--bs-primary-rgb), 0.95);
    border: 2px solid var(--bs-primary);
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: white;
    font-size: var(--fs-body);
    font-weight: 600;
    position: absolute;
    top: -4.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    animation: collectionSwipePulse 2s infinite;
    box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
    white-space: nowrap;
}

#collection-view .collection-swipe-instruction.fade-out {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
    pointer-events: none;
}

#collection-view .collection-swipe-arrows {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
}

#collection-view .collection-swipe-arrows i {
    font-size: var(--fs-sm);
    animation: collectionSwipeArrow 1.5s infinite alternate;
    color: white;
}

#collection-view .collection-swipe-arrows i:nth-child(2) {
    animation-delay: 0.2s;
}

/* Collection Cards */
#collection-view .collection-recipe-card,
#collection-view .collection-drink-card,
#collection-view .collection-snack-card {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--bs-body-bg);
    box-shadow: 0 15px 35px var(--glass-black-10);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    border: 1px solid var(--glass-black-5);
}

#collection-view .collection-recipe-card:hover,
#collection-view .collection-drink-card:hover,
#collection-view .collection-snack-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px var(--glass-black-15);
}

/* Headers & Images */
#collection-view .collection-recipe-header,
#collection-view .collection-drink-header,
#collection-view .collection-snack-header {
    position: relative;
    height: 140px;
    flex-shrink: 0;
}

#collection-view .collection-recipe-image,
#collection-view .collection-drink-image,
#collection-view .collection-snack-image {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#collection-view .collection-recipe-image img,
#collection-view .collection-drink-image img,
#collection-view .collection-snack-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#collection-view .collection-recipe-card:hover .collection-recipe-image img,
#collection-view .collection-drink-card:hover .collection-drink-image img,
#collection-view .collection-snack-card:hover .collection-snack-image img {
    transform: scale(1.08);
}

#collection-view .collection-recipe-overlay,
#collection-view .collection-drink-overlay,
#collection-view .collection-snack-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 50%, rgba(0, 0, 0, 0.1) 100%);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
}

/* Badges */
#collection-view .collection-recipe-badges,
#collection-view .collection-drink-badges,
#collection-view .collection-snack-badges {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: auto;
}

#collection-view .collection-recipe-badge,
#collection-view .collection-drink-badge,
#collection-view .collection-snack-badge {
    padding: 0.3rem;
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    font-size: var(--fs-xs);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
}

#collection-view .collection-private {
    background: rgba(220, 53, 69, 0.9);
}

#collection-view .collection-difficulty {
    background: rgba(0, 0, 0, 0.7);
}

#collection-view .collection-easy {
    background: rgba(40, 167, 69, 0.9);
}

#collection-view .collection-medium {
    background: rgba(255, 193, 7, 0.9);
}

#collection-view .collection-hard {
    background: rgba(255, 123, 0, 0.9);
}

#collection-view .collection-expert {
    background: rgba(220, 53, 69, 0.9);
}

/* Content */
#collection-view .collection-recipe-content,
#collection-view .collection-drink-content,
#collection-view .collection-snack-content {
    flex: 1;
    padding: 1rem 1rem 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow: hidden;
}

#collection-view .collection-recipe-name,
#collection-view .collection-drink-name,
#collection-view .collection-snack-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--bs-body-color);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.3rem;
}

#collection-view .collection-recipe-meta,
#collection-view .collection-drink-meta,
#collection-view .collection-snack-meta {
    margin: 0.3rem 0;
}

#collection-view .collection-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
}

#collection-view .collection-meta-item {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--bs-secondary-color);
    background: var(--bs-light);
    padding: 0.2rem 0.4rem;
    border-radius: 15px;
    font-weight: 500;
    border: 1px solid var(--bs-border-color);
}

#collection-view .collection-meta-item i {
    font-size: var(--fs-xs);
    color: var(--bs-primary);
}

#collection-view .collection-meta-item.collection-time {
    background: rgba(var(--bs-info-rgb), 0.1);
    color: var(--bs-info);
    border-color: rgba(var(--bs-info-rgb), 0.2);
}

#collection-view .collection-meta-item.collection-servings {
    background: rgba(var(--bs-success-rgb), 0.1);
    color: var(--bs-success);
    border-color: rgba(var(--bs-success-rgb), 0.2);
}

#collection-view .collection-meta-item.collection-cuisine {
    background: rgba(var(--bs-warning-rgb), 0.1);
    color: var(--bs-warning-text-emphasis);
    border-color: rgba(var(--bs-warning-rgb), 0.2);
}

#collection-view .collection-time-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.3rem 0;
    justify-content: center;
}

#collection-view .collection-time-detail {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--bs-secondary-color);
    background: var(--bs-light);
    padding: 0.15rem 0.3rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    border: 1px solid var(--bs-border-color);
}

#collection-view .collection-time-detail i {
    font-size: var(--fs-2xs);
    color: var(--bs-primary);
}

/* Nutrition Section */
#collection-view .collection-nutrition-section {
    margin: 0.4rem 0;
}

#collection-view .collection-nutrition-header {
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--bs-border-color);
}

#collection-view .collection-nutrition-section .nutrition-pills {
    justify-content: center;
    gap: 0.3rem;
}

#collection-view .nutrition-pill {
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    border: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 1px 3px var(--glass-black-10);
    white-space: nowrap;
}

#collection-view .nutrition-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px var(--glass-black-15);
}

#collection-view .nutrition-pill i {
    font-size: var(--fs-2xs);
    margin-right: 0.2rem;
}

/* Tags */
#collection-view .collection-tags-section {
    margin: 0.4rem 0;
    flex-shrink: 0;
}

#collection-view .collection-recipe-tags,
#collection-view .collection-drink-tags,
#collection-view .collection-snack-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
}

#collection-view .collection-tag-link {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    text-decoration: none;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
}

#collection-view .collection-tag-link:hover {
    background: var(--bs-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.3);
}

#collection-view .collection-tag-more {
    background: rgba(var(--bs-secondary-rgb), 0.1);
    color: var(--bs-secondary);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-lg);
    font-size: var(--fs-2xs);
    font-weight: 600;
    border: 1px solid rgba(var(--bs-secondary-rgb), 0.2);
}

/* Collection Actions */
#collection-view .collection-recipe-actions,
#collection-view .collection-drink-actions,
#collection-view .collection-snack-actions {
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem 1rem 1rem;
    border-top: 1px solid var(--bs-border-color);
}

#collection-view .collection-btn-details {
    background: var(--bs-primary);
    color: white;
    text-decoration: none;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 3px 12px rgba(var(--bs-primary-rgb), 0.3);
}

#collection-view .collection-btn-details:hover {
    background: var(--bs-primary-hover, #0d6efd);
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(var(--bs-primary-rgb), 0.4);
    color: white;
}

#collection-view .collection-btn-details i {
    margin-right: 0.3rem;
    font-size: var(--fs-sm);
}

#collection-view .collection-actions-secondary {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}

#collection-view .collection-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: var(--bs-body-color);
}

#collection-view .collection-btn-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px var(--glass-black-15);
}

#collection-view .collection-btn-edit {
    border-color: #ffc107;
    color: #ffc107;
}

#collection-view .collection-btn-edit:hover {
    background: #ffc107;
    color: white;
}

#collection-view .collection-btn-clone {
    border-color: #0dcaf0;
    color: #0dcaf0;
}

#collection-view .collection-btn-clone:hover {
    background: #0dcaf0;
    color: white;
}

#collection-view .collection-btn-add {
    border-color: #20c997;
    color: #20c997;
}

#collection-view .collection-btn-add:hover {
    background: #20c997;
    color: white;
}

/* Navigation & Pagination */
#collection-view .swiper-button-next.collection-swiper-nav,
#collection-view .swiper-button-prev.collection-swiper-nav {
    width: 40px;
    height: 40px;
    margin-top: -25px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-full);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px var(--glass-black-10);
    transition: all 0.3s ease;
    border: 2px solid var(--bs-border-color);
}

#collection-view .swiper-button-next.collection-swiper-nav:hover,
#collection-view .swiper-button-prev.collection-swiper-nav:hover {
    background: white;
    transform: scale(1.1);
    box-shadow: 0 10px 30px var(--glass-black-15);
}

#collection-view .swiper-button-next.collection-swiper-nav:after,
#collection-view .swiper-button-prev.collection-swiper-nav:after {
    content: "";
}

#collection-view .swiper-button-next.collection-swiper-nav i,
#collection-view .swiper-button-prev.collection-swiper-nav i {
    color: var(--bs-primary);
    font-size: 1.2rem;
}

#collection-view .swiper-pagination.collection-swiper-pagination {
    bottom: -40px !important;
}

#collection-view .swiper-pagination.collection-swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(var(--bs-primary-rgb), 0.3);
    opacity: 1;
    transition: all 0.3s ease;
}

#collection-view .swiper-pagination.collection-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--bs-primary);
    transform: scale(1.3);
}

/* Highlights & Navigation Fix */
#collection-view .collection-recipe-card.recipe-highlight,
#collection-view .collection-drink-card.drink-highlight,
#collection-view .collection-snack-card.snack-highlight {
    background: rgba(40, 167, 69, 0.05);
    border: 2px solid #28a745;
    box-shadow: 0 0 25px rgba(40, 167, 69, 0.3);
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, -40px) !important;
    right: auto;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, -40px) !important;
    left: auto;
}

/* Ingredients Toggle */
#collection-view .collection-ingredients-toggle {
    width: 100%;
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.05) 0%, rgba(var(--bs-primary-rgb), 0.02) 100%);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.15);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

#collection-view .collection-ingredients-toggle:hover {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.1) 0%, rgba(var(--bs-primary-rgb), 0.05) 100%);
    border-color: rgba(var(--bs-primary-rgb), 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.15);
}

#collection-view .collection-ingredients-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.2);
}

#collection-view .collection-ingredients-toggle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-info) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#collection-view .collection-ingredients-toggle:hover::before {
    opacity: 1;
}

#collection-view .ingredients-header {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    position: relative;
}

#collection-view .ingredients-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--bs-body-color);
    font-size: var(--fs-body-lg);
}

#collection-view .ingredients-title i {
    color: var(--bs-primary);
    font-size: var(--fs-body-sm);
}

#collection-view .ingredients-count {
    color: var(--bs-secondary);
    font-weight: 500;
    margin-left: 0.25rem;
}

#collection-view .ingredients-preview {
    display: flex;
    align-items: center;
    margin-left: 1.5rem;
}

#collection-view .first-ingredient {
    color: var(--bs-secondary-color);
    font-size: var(--fs-sm);
    font-style: italic;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

#collection-view .toggle-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-primary);
    font-size: var(--fs-body-sm);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#collection-view .collection-ingredients-toggle[aria-expanded="true"] .toggle-icon {
    transform: translateY(-50%) rotate(180deg);
}

#collection-view .collection-ingredients-toggle[aria-expanded="true"] {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.1) 0%, rgba(var(--bs-primary-rgb), 0.05) 100%);
    border-color: var(--bs-primary);
}

#collection-view .collection-ingredients-toggle[aria-expanded="true"] .ingredients-preview {
    opacity: 0.5;
}

#collection-view .ingredients-content {
    background: rgba(var(--bs-light-rgb), 0.3);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    margin-top: 0.5rem;
    border: 1px solid rgba(var(--bs-border-color-rgb), 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#collection-view .ingredients-content .list-group-item {
    background: transparent;
    margin-bottom: 0.25rem;
    transition: background-color 0.2s ease;
    padding: 0.5rem 0.75rem;
}

#collection-view .ingredients-content .list-group-item:hover {
    background: rgba(var(--bs-primary-rgb), 0.05);
}

#collection-view .ingredients-content .list-group-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

#collection-view .ingredients-content .form-check-input:checked+.form-check-label {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
    opacity: 0.6;
}

#collection-view .ingredients-content .ingredient-amount {
    color: var(--bs-primary);
    font-weight: 600;
    white-space: nowrap;
}

/* ===== DETAILS VIEWS (Recipe & Snack Combined) ===== */
.recipe-details-view .recipe-main-card,
.snack-details-view .snack-main-card {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 10px 30px var(--glass-black-10);
    transition: all 0.3s ease;
}

.recipe-details-view .recipe-image-container,
.snack-details-view .snack-image-container {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin: 15px;
    box-shadow: 0 8px 25px var(--glass-black-15);
    height: calc(100% - 30px);
    transition: all 0.3s ease;
    cursor: pointer;
}

.recipe-details-view .recipe-image-container:hover,
.snack-details-view .snack-image-container:hover {
    transform: scale(1.01);
}

.recipe-details-view .recipe-image-container:hover .image-zoom-hint,
.snack-details-view .snack-image-container:hover .image-zoom-hint {
    opacity: 1;
}

.recipe-details-view .recipe-image-container:focus,
.snack-details-view .snack-image-container:focus {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

.recipe-details-view .image-zoom-hint,
.snack-details-view .image-zoom-hint {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

.recipe-details-view .recipe-image,
.snack-details-view .snack-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.recipe-details-view .private-badge,
.snack-details-view .private-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px 10px;
    border-radius: var(--radius-2xl);
    font-size: var(--fs-body-sm);
    backdrop-filter: blur(4px);
}

.recipe-details-view .recipe-header-content,
.snack-details-view .snack-header-content {
    padding: 25px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.recipe-details-view .recipe-title,
.snack-details-view .snack-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--bs-primary);
}

.recipe-details-view .action-btn,
.snack-details-view .action-btn {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    transition: background-color 0.2s;
}

.recipe-details-view .action-btn:hover,
.snack-details-view .action-btn:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
}

.recipe-details-view .recipe-info-cards,
.snack-details-view .snack-info-cards {
    margin-top: 20px;
}

.recipe-details-view .info-card,
.snack-details-view .info-card {
    display: flex;
    padding: 20px;
    border-radius: var(--radius-lg);
    background-color: var(--bs-body-bg);
    box-shadow: 0 2px 12px var(--glass-black-4);
    border: 1px solid var(--glass-black-5);
    transition: transform 0.2s, box-shadow 0.2s;
}

.recipe-details-view .info-card:hover,
.snack-details-view .info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.recipe-details-view .info-card-icon,
.snack-details-view .info-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    margin-right: 16px;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.recipe-details-view .info-card-content,
.snack-details-view .info-card-content {
    flex: 1;
    min-width: 0;
}

.recipe-details-view .info-card-title,
.snack-details-view .info-card-title {
    font-size: var(--fs-md);
    font-weight: 600;
    margin-bottom: 12px;
}

.recipe-details-view .info-label,
.snack-details-view .info-label {
    color: var(--bs-secondary-color);
}

.recipe-details-view .info-value,
.snack-details-view .info-value {
    font-weight: 500;
}

.snack-details-view .total-time {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--glass-black-5);
}

/* Timeline & Progress */
.recipe-details-view .time-timeline {
    margin-bottom: 15px;
}

.recipe-details-view .time-breakdown {
    display: flex;
    flex-direction: column;
}

.recipe-details-view .time-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    position: relative;
}

.recipe-details-view .time-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 17px;
    top: 32px;
    bottom: 0;
    width: 2px;
    height: 30px;
    background-color: rgba(var(--bs-secondary-rgb), 0.4);
}

.recipe-details-view .time-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    color: white;
    flex-shrink: 0;
    z-index: 1;
}

.recipe-details-view .time-icon.preparation,
.recipe-details-view .progress-bar-prep,
.snack-details-view .progress-bar-prep {
    background-color: #7eb6c5;
}

.recipe-details-view .time-icon.cooking,
.recipe-details-view .progress-bar-cooking,
.snack-details-view .progress-bar-cooking {
    background-color: #e2aa76;
}

.recipe-details-view .time-icon.resting,
.recipe-details-view .progress-bar-rest,
.snack-details-view .progress-bar-rest {
    background-color: #a3a9b1;
}

.recipe-details-view .time-icon.total {
    background-color: #6b7b8e;
}

.recipe-details-view .time-content {
    flex: 1;
}

.recipe-details-view .time-label {
    font-size: var(--fs-body);
    color: var(--bs-secondary-color);
    margin-bottom: 2px;
}

.recipe-details-view .time-value {
    font-weight: 600;
}

.recipe-details-view .progress,
.snack-details-view .progress {
    box-shadow: 0 2px 6px var(--glass-black-4);
    background-color: var(--glass-black-3);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.recipe-details-view .progress-label,
.snack-details-view .progress-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 8px;
    font-size: var(--fs-sm);
    font-weight: 500;
}

/* Time Legend (Snack) */
.snack-details-view .time-visual {
    margin-top: 20px;
}

.snack-details-view .time-breakdown-container {
    padding: 20px;
    border-radius: var(--radius-lg);
    background-color: var(--bs-body-bg);
    box-shadow: 0 2px 8px var(--glass-black-4);
    border: 1px solid var(--glass-black-5);
}

.snack-details-view .time-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.snack-details-view .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.snack-details-view .legend-color {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-xs);
}

.snack-details-view .legend-item.prep .legend-color {
    background-color: var(--bs-primary);
}

.snack-details-view .legend-item.cook .legend-color {
    background-color: var(--bs-danger);
}

.snack-details-view .legend-item.rest .legend-color {
    background-color: var(--bs-info);
}

.snack-details-view .legend-text {
    display: flex;
    flex-direction: column;
}

.snack-details-view .legend-label {
    font-size: var(--fs-body-sm);
    color: var(--bs-secondary-color);
}

.snack-details-view .legend-value {
    font-weight: 600;
    font-size: var(--fs-body-lg);
}

/* Nutrition Overview & Cards (Details) */
.recipe-details-view .nutrition-overview,
.snack-details-view .nutrition-overview {
    margin-top: 20px;
}

.recipe-details-view .nutrition-cards,
.snack-details-view .nutrition-cards {
    margin-bottom: 1rem;
}

.recipe-details-view .nutrition-card,
.snack-details-view .nutrition-card {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 2px 8px var(--glass-black-4);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}

.recipe-details-view .nutrition-card:hover,
.snack-details-view .nutrition-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--glass-black-8);
}

.recipe-details-view .nutrition-card.calories,
.snack-details-view .nutrition-card.calories {
    background-color: rgba(var(--bs-success-rgb), 0.1);
    border: 1px solid rgba(var(--bs-success-rgb), 0.2);
}

.recipe-details-view .nutrition-card.protein,
.snack-details-view .nutrition-card.protein {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
}

.recipe-details-view .nutrition-card.carbs,
.snack-details-view .nutrition-card.carbs {
    background-color: rgba(var(--bs-info-rgb), 0.1);
    border: 1px solid rgba(var(--bs-info-rgb), 0.2);
}

.recipe-details-view .nutrition-card.fat,
.snack-details-view .nutrition-card.fat {
    background-color: rgba(var(--bs-warning-rgb), 0.1);
    border: 1px solid rgba(var(--bs-warning-rgb), 0.2);
}

.recipe-details-view .nutrition-icon,
.snack-details-view .nutrition-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    margin-right: 12px;
    font-size: var(--fs-md);
    flex-shrink: 0;
}

.recipe-details-view .calories .nutrition-icon,
.snack-details-view .calories .nutrition-icon {
    background-color: rgba(var(--bs-success-rgb), 0.2);
    color: var(--bs-success);
}

.recipe-details-view .protein .nutrition-icon,
.snack-details-view .protein .nutrition-icon {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
    color: var(--bs-primary);
}

.recipe-details-view .carbs .nutrition-icon,
.snack-details-view .carbs .nutrition-icon {
    background-color: rgba(var(--bs-info-rgb), 0.2);
    color: var(--bs-info);
}

.recipe-details-view .fat .nutrition-icon,
.snack-details-view .fat .nutrition-icon {
    background-color: rgba(var(--bs-warning-rgb), 0.2);
    color: var(--bs-warning);
}

.recipe-details-view .nutrition-data,
.snack-details-view .nutrition-data {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.recipe-details-view .nutrition-value,
.snack-details-view .nutrition-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

.recipe-details-view .calories .nutrition-value,
.snack-details-view .calories .nutrition-value {
    color: var(--bs-success);
}

.recipe-details-view .protein .nutrition-value,
.snack-details-view .protein .nutrition-value {
    color: var(--bs-primary);
}

.recipe-details-view .carbs .nutrition-value,
.snack-details-view .carbs .nutrition-value {
    color: var(--bs-info);
}

.recipe-details-view .fat .nutrition-value,
.snack-details-view .fat .nutrition-value {
    color: var(--bs-warning);
}

.recipe-details-view .nutrition-label,
.snack-details-view .nutrition-label {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--bs-body-color);
}

.recipe-details-view .nutrition-details-toggle,
.snack-details-view .nutrition-details-toggle {
    color: var(--bs-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.recipe-details-view .nutrition-details-toggle:hover,
.snack-details-view .nutrition-details-toggle:hover {
    text-decoration: underline;
}

.recipe-details-view .detailed-nutrition-card,
.snack-details-view .detailed-nutrition-card {
    padding: 16px;
    border-radius: var(--radius-lg);
    background-color: var(--bs-body-bg);
    box-shadow: 0 2px 8px var(--glass-black-4);
    border: 1px solid var(--glass-black-5);
}

.recipe-details-view .detailed-label,
.snack-details-view .detailed-label {
    color: var(--bs-secondary-color);
    font-size: var(--fs-body-lg);
}

.recipe-details-view .detailed-value,
.snack-details-view .detailed-value {
    font-weight: 600;
    font-size: var(--fs-body-lg);
}

/* Tags, Tabs & Content Containers */
.recipe-details-view .recipe-tags,
.snack-details-view .snack-tags {
    margin-top: 1rem;
}

.recipe-details-view .tag-pill,
.snack-details-view .tag-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-2xl);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    font-size: var(--fs-body);
    font-weight: 500;
    margin-bottom: 6px;
    transition: background-color 0.2s ease;
}

.recipe-details-view .tag-pill:hover,
.snack-details-view .tag-pill:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
}

.recipe-details-view .section-subtitle,
.snack-details-view .section-subtitle,
.drink-details-view .section-subtitle {
    font-size: 1.3rem;
    font-weight: 600;
}

.recipe-details-view .custom-tabs,
.snack-details-view .custom-tabs,
.drink-details-view .custom-tabs {
    border-bottom: 2px solid var(--glass-black-5);
    margin-bottom: 1.5rem;
}

.recipe-details-view .custom-tabs .nav-link,
.snack-details-view .custom-tabs .nav-link,
.drink-details-view .custom-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--bs-secondary-color);
    font-weight: 600;
    padding: 12px 20px;
    transition: all 0.2s ease;
}

.recipe-details-view .custom-tabs .nav-link:hover,
.snack-details-view .custom-tabs .nav-link:hover,
.drink-details-view .custom-tabs .nav-link:hover {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.recipe-details-view .custom-tabs .nav-link.active,
.snack-details-view .custom-tabs .nav-link.active,
.drink-details-view .custom-tabs .nav-link.active {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
    background-color: transparent;
}

.recipe-details-view .custom-tab-content,
.snack-details-view .custom-tab-content,
.drink-details-view .custom-tab-content {
    padding: 1rem 0;
}

.recipe-details-view .ingredients-container,
.recipe-details-view .instructions-container,
.recipe-details-view .notes-container,
.snack-details-view .ingredients-container,
.snack-details-view .instructions-container,
.snack-details-view .notes-container,
.drink-details-view .ingredients-container,
.drink-details-view .instructions-container,
.drink-details-view .notes-container {
    padding: 20px;
    border-radius: var(--radius-lg);
    background-color: var(--bs-body-bg);
    box-shadow: 0 2px 8px var(--glass-black-4);
    border: 1px solid var(--glass-black-5);
}

.recipe-details-view .ingredient-item,
.snack-details-view .ingredient-item,
.drink-details-view .ingredient-item {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    margin-bottom: 8px;
    border-radius: var(--radius-md);
    background-color: rgba(var(--bs-primary-rgb), 0.03);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.05);
    transition: all 0.2s ease;
}

.recipe-details-view .ingredient-item:hover,
.snack-details-view .ingredient-item:hover,
.drink-details-view .ingredient-item:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
    transform: translateX(3px);
}

.recipe-details-view .ingredient-icon-container,
.snack-details-view .ingredient-icon-container,
.drink-details-view .ingredient-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background-color: rgba(var(--bs-primary-rgb), 0.15);
    margin-right: 12px;
    margin-top: 2px;
    flex-shrink: 0;
    color: var(--bs-primary);
    transition: all 0.2s ease;
}

.recipe-details-view .ingredient-item:hover .ingredient-icon-container,
.snack-details-view .ingredient-item:hover .ingredient-icon-container,
.drink-details-view .ingredient-item:hover .ingredient-icon-container {
    transform: scale(1.1);
}

.recipe-details-view .ingredient-icon,
.snack-details-view .ingredient-icon,
.drink-details-view .ingredient-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recipe-details-view .ingredient-item .form-check,
.snack-details-view .ingredient-item .form-check,
.drink-details-view .ingredient-item .form-check {
    margin-right: 10px;
    margin-top: 6px;
}

.recipe-details-view .ingredient-content,
.snack-details-view .ingredient-content,
.drink-details-view .ingredient-content {
    flex: 1;
    min-width: 0;
}

.recipe-details-view .ingredient-name,
.snack-details-view .ingredient-name,
.drink-details-view .ingredient-name {
    font-weight: 600;
    font-size: var(--fs-md);
}

.recipe-details-view .optional-tag,
.snack-details-view .optional-tag,
.drink-details-view .optional-tag {
    font-size: var(--fs-body-sm);
    color: var(--bs-secondary-color);
    font-style: italic;
}

.recipe-details-view .ingredient-quantity,
.snack-details-view .ingredient-quantity,
.drink-details-view .ingredient-quantity {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    font-weight: 500;
    margin-left: 8px;
    white-space: nowrap;
    color: var(--bs-primary);
}

.recipe-details-view .ingredient-brand,
.recipe-details-view .ingredient-notes,
.snack-details-view .ingredient-brand,
.snack-details-view .ingredient-notes,
.drink-details-view .ingredient-brand,
.drink-details-view .ingredient-notes {
    display: block;
    color: var(--bs-secondary-color);
    margin-top: 4px;
}

.recipe-details-view .ingredient-notes,
.snack-details-view .ingredient-notes,
.drink-details-view .ingredient-notes {
    font-style: italic;
}

.recipe-details-view .ingredient-item.checked,
.snack-details-view .ingredient-item.checked,
.drink-details-view .ingredient-item.checked {
    opacity: 0.6;
    background-color: var(--glass-black-2);
}

.recipe-details-view .ingredient-item.checked .ingredient-name,
.snack-details-view .ingredient-item.checked .ingredient-name,
.drink-details-view .ingredient-item.checked .ingredient-name {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}

.recipe-details-view .ingredient-item.checked .ingredient-icon-container,
.snack-details-view .ingredient-item.checked .ingredient-icon-container,
.drink-details-view .ingredient-item.checked .ingredient-icon-container {
    opacity: 0.5;
}

.recipe-details-view .empty-state,
.snack-details-view .empty-state,
.drink-details-view .empty-state {
    text-align: center;
    padding: 40px 20px;
}

.recipe-details-view .empty-state i,
.snack-details-view .empty-state i,
.drink-details-view .empty-state i {
    font-size: var(--fs-5xl);
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.recipe-details-view .empty-state h5,
.snack-details-view .empty-state h5,
.drink-details-view .empty-state h5 {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.recipe-details-view .empty-state p,
.snack-details-view .empty-state p,
.drink-details-view .empty-state p {
    color: var(--bs-secondary-color);
}

.recipe-details-view #imageModal .modal-content,
.snack-details-view #imageModal .modal-content,
.drink-details-view #imageModal .modal-content {
    background: transparent;
}

.recipe-details-view #imageModal .modal-body img,
.snack-details-view #imageModal .modal-body img,
.drink-details-view #imageModal .modal-body img {
    max-height: 85vh;
    object-fit: contain;
}

.recipe-details-view #imageModal .btn-close-white,
.snack-details-view #imageModal .btn-close-white,
.drink-details-view #imageModal .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Nutrition View Toggle */
.recipe-details-view .nutrition-view-toggle,
.snack-details-view .nutrition-view-toggle,
.drink-details-view .nutrition-view-toggle {
    display: inline-flex;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: 50px;
    padding: 4px;
    gap: 4px;
    box-shadow: 0 2px 8px var(--glass-black-5);
    transition: all 0.3s ease;
    position: relative;
}

.recipe-details-view .nutrition-toggle-input,
.snack-details-view .nutrition-toggle-input,
.drink-details-view .nutrition-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.recipe-details-view .nutrition-toggle-label,
.snack-details-view .nutrition-toggle-label,
.drink-details-view .nutrition-toggle-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--bs-secondary-color);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
    user-select: none;
    position: relative;
    z-index: 1;
}

.recipe-details-view .nutrition-toggle-label:hover,
.snack-details-view .nutrition-toggle-label:hover,
.drink-details-view .nutrition-toggle-label:hover {
    color: var(--bs-sky);
    background: rgba(var(--bs-sky-rgb), 0.05);
}

.recipe-details-view .nutrition-toggle-label i,
.snack-details-view .nutrition-toggle-label i,
.drink-details-view .nutrition-toggle-label i {
    font-size: var(--fs-body-sm);
    transition: transform 0.3s ease;
}

.recipe-details-view .nutrition-toggle-input:checked+.nutrition-toggle-label,
.snack-details-view .nutrition-toggle-input:checked+.nutrition-toggle-label,
.drink-details-view .nutrition-toggle-input:checked+.nutrition-toggle-label {
    color: var(--bs-sky-text-emphasis);
    background: var(--bs-sky-bg-subtle);
    box-shadow: 0 4px 12px rgba(var(--bs-sky-rgb), 0.4);
    transform: scale(1.05);
    animation: nutritionToggleSwitch 0.3s ease;
}

.recipe-details-view .nutrition-toggle-input:checked+.nutrition-toggle-label i,
.snack-details-view .nutrition-toggle-input:checked+.nutrition-toggle-label i,
.drink-details-view .nutrition-toggle-input:checked+.nutrition-toggle-label i {
    transform: scale(1.1);
}

.recipe-details-view .nutrition-toggle-input:focus+.nutrition-toggle-label,
.snack-details-view .nutrition-toggle-input:focus+.nutrition-toggle-label,
.drink-details-view .nutrition-toggle-input:focus+.nutrition-toggle-label {
    outline: 2px solid var(--bs-sky);
    outline-offset: 2px;
}

.recipe-details-view .nutrition-toggle-label:active,
.snack-details-view .nutrition-toggle-label:active,
.drink-details-view .nutrition-toggle-label:active {
    transform: scale(0.95);
}

.recipe-details-view .nutrition-view-toggle:hover,
.snack-details-view .nutrition-view-toggle:hover,
.drink-details-view .nutrition-view-toggle:hover {
    border-color: rgba(var(--bs-sky-rgb), 0.3);
    box-shadow: 0 4px 16px var(--glass-black-8);
}

@keyframes nutritionToggleSwitch {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1.05);
    }
}

/* Filter Buttons & Pricing (Details) */
.difficulty-selector {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.difficulty-btn {
    padding: 0.35rem 0.75rem;
    border-radius: 2rem;
    font-size: var(--fs-body-sm);
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.difficulty-btn:hover {
    transform: translateY(-1px);
}

.difficulty-btn.easy {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border-color: rgba(40, 167, 69, 0.3);
}

.difficulty-btn.easy:hover,
.difficulty-btn.easy.active {
    background: #28a745;
    color: white;
}

.difficulty-btn.medium {
    background: rgba(255, 193, 7, 0.1);
    color: #d39e00;
    border-color: rgba(255, 193, 7, 0.3);
}

.difficulty-btn.medium:hover,
.difficulty-btn.medium.active {
    background: #ffc107;
    color: #212529;
}

.difficulty-btn.hard {
    background: rgba(253, 126, 20, 0.1);
    color: #fd7e14;
    border-color: rgba(253, 126, 20, 0.3);
}

.difficulty-btn.hard:hover,
.difficulty-btn.hard.active {
    background: #fd7e14;
    color: white;
}

.difficulty-btn.expert {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border-color: rgba(220, 53, 69, 0.3);
}

.difficulty-btn.expert:hover,
.difficulty-btn.expert.active {
    background: #dc3545;
    color: white;
}

.time-selector {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.time-btn {
    padding: 0.35rem 0.65rem;
    border-radius: 2rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.time-btn:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.time-btn.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.time-btn .time-icon {
    font-size: var(--fs-body);
}

.time-btn.quick .time-icon {
    color: #28a745;
}

.time-btn.fast .time-icon {
    color: #17a2b8;
}

.time-btn.medium .time-icon {
    color: #fd7e14;
}

.time-btn.long .time-icon {
    color: #6f42c1;
}

.time-btn.active .time-icon {
    color: inherit;
}

.filter-group-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group-compact .filter-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.combined-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.item-price-container {
    min-width: 80px;
}

.item-price-input {
    width: 60px;
    text-align: right;
}

.item-price-input:focus {
    box-shadow: none;
    background-color: var(--bs-body-bg) !important;
    border-bottom: 1px solid var(--bs-primary) !important;
}

.item-price-input::placeholder {
    color: var(--bs-secondary);
    opacity: 0.5;
}

.price-edit-group {
    transition: all 0.2s ease;
}

.price-edit-group:hover,
.price-edit-group:focus-within {
    background-color: var(--bs-body-bg);
    border-radius: var(--radius-xs);
}

.cost-summary-card {
    border-radius: var(--radius-lg);
}

.cost-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.cost-summary-item:not(:last-child) {
    border-bottom: 1px solid var(--bs-border-color);
}

.cost-summary-total {
    font-size: var(--fs-lg);
    font-weight: 600;
}

.cost-value {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-weight: 600;
}

.smaller {
    font-size: var(--fs-xs);
}

/* ===== SETTINGS INLINE & SEARCH MODERN ===== */
.settings-inline-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bs-tertiary-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--bs-border-color);
}

.setting-inline-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.setting-inline-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.setting-inline-divider {
    width: 1px;
    height: 24px;
    background: var(--bs-border-color);
}

.settings-inline-panel .btn-group .btn {
    padding: 0.25rem 0.75rem;
    font-size: var(--fs-sm);
    border-radius: 0.375rem !important;
    transition: all 0.2s ease;
}

.settings-inline-panel .btn-group .btn:not(:last-child) {
    margin-right: 2px;
}

.settings-inline-panel .btn-group .btn.btn-primary {
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.3) !important;
}

.setting-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-xl);
    transition: all 0.2s ease;
    cursor: pointer;
}

.setting-toggle-btn:hover {
    border-color: var(--bs-primary);
}

.toggle-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: var(--fs-xs);
    color: var(--bs-secondary-color);
    transition: all 0.2s ease;
}

.toggle-option.active {
    color: var(--bs-primary);
}

.toggle-slider {
    width: 28px;
    height: 14px;
    background: var(--bs-secondary-bg);
    border-radius: 7px;
    position: relative;
    transition: background 0.2s ease;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--bs-primary);
    border-radius: var(--radius-full);
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
}

.setting-toggle-btn.active .toggle-slider::after {
    transform: translateX(14px);
}

.setting-toggle-btn.active .toggle-slider {
    background: rgba(var(--bs-primary-rgb), 0.2) !important;
}

/* ===== UNIFIED SETTINGS PANEL BUTTON GROUPS =====
   Forces view-type-btn and nutrition-mode-btn to look identical.
   Override every Bootstrap/previous-rule variance in one place. */

.settings-inline-panel .btn-group {
    background: var(--glass-black-4);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 0;
    width: auto;
}

[data-bs-theme="dark"] .settings-inline-panel .btn-group {
    background: rgba(255, 255, 255, 0.06);
}

/* Inactive state — shared by both btn classes */
.settings-inline-panel .view-type-btn,
.settings-inline-panel .nutrition-mode-btn {
    height: 30px;
    min-width: 30px;
    padding: 0 0.5rem;
    font-size: var(--fs-body-sm);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px !important;
    border: none !important;
    background: transparent !important;
    color: var(--bs-secondary-color) !important;
    box-shadow: none !important;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    position: relative;
    overflow: hidden;
    margin: 0;
}

/* Neutralise Bootstrap .active class on nutrition buttons */
.settings-inline-panel .nutrition-mode-btn.active:not(.btn-primary) {
    background: transparent !important;
    color: var(--bs-secondary-color) !important;
    box-shadow: none !important;
}

/* Hover */
.settings-inline-panel .view-type-btn:hover,
.settings-inline-panel .nutrition-mode-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
    color: var(--bs-primary) !important;
    transform: translateY(-1px);
}

/* Active / selected */
.settings-inline-panel .view-type-btn.btn-primary,
.settings-inline-panel .nutrition-mode-btn.btn-primary {
    background: rgba(var(--bs-primary-rgb), 0.3) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.4) !important;
}

.settings-inline-panel .view-type-btn.btn-primary:hover,
.settings-inline-panel .nutrition-mode-btn.btn-primary:hover {
    transform: translateY(-1px);
    background: rgba(var(--bs-primary-rgb), 0.6) !important;
    color: var(--bs-primary-text-emphasis) !important;
}

.search-card-modern {
    background: var(--bs-body-bg);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(var(--bs-primary-rgb), 0.08);
    transition: all 0.3s ease;
}

.search-card-modern:focus-within {
    box-shadow: 0 8px 30px rgba(var(--bs-primary-rgb), 0.15);
}

.search-wrapper-modern {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon-modern {
    position: absolute;
    left: 1rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-body-lg);
    pointer-events: none;
    transition: color 0.2s ease;
    z-index: 2;
}

.search-input-modern {
    width: 100%;
    padding: 0.6rem 6rem 0.6rem 2.75rem;
    font-size: var(--fs-body-lg);
    border: 2px solid var(--bs-border-color);
    border-radius: 2rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: all 0.3s ease;
}

.search-input-modern:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.1);
}

.search-input-modern:focus+.search-icon-modern,
.search-wrapper-modern:focus-within .search-icon-modern {
    color: var(--bs-primary);
}

.search-input-modern::placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.7;
}

.btn-clear-search {
    position: absolute;
    right: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.btn-clear-search:hover {
    background: var(--bs-danger);
    color: white;
    transform: scale(1.1);
}

.btn-search-modern {
    position: absolute;
    right: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(var(--bs-primary-rgb), 0.3) !important;
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.btn-search-modern:hover {
    background: var(--bs-primary);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.4);
}

.btn-search-modern i {
    font-size: var(--fs-body-sm);
}

.filter-badge-count {
    font-size: var(--fs-2xs);
    padding: 0.2rem 0.4rem;
    min-width: 1.25rem;
}

.advanced-filters-panel {
    background: var(--bs-tertiary-bg);
    border-radius: var(--radius-lg);
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
}

/* ===== MEDIA QUERIES ===== */
@media (max-width: 991px) {
    .settings-inline-panel {
        justify-content: center;
    }

    .recipe-details-view .recipe-image-container,
    .snack-details-view .snack-image-container {
        margin-bottom: 0;
        height: auto;
        aspect-ratio: 16/9;
    }

    .recipe-details-view .recipe-header-content,
    .snack-details-view .snack-header-content {
        padding-top: 10px;
    }

    .recipe-details-view .recipe-title,
    .snack-details-view .snack-title {
        font-size: 1.8rem;
    }

    .recipe-details-view .nutrition-card,
    .snack-details-view .nutrition-card {
        flex-direction: column;
        justify-content: center;
        gap: 0.5rem;
    }
}

@media (max-width: 768px) {

    .recipe-img,
    .drink-img,
    .snack-img {
        height: 150px;
    }

    .table-thumbnail {
        width: 40px;
        height: 40px;
    }

    .toggle-label,
    .setting-inline-label {
        display: none;
    }

    .swiper {
        width: 300px;
    }

    .recipe-name,
    .drink-name,
    .snack-name {
        font-size: var(--fs-lg);
    }

    .nutrition-item {
        padding: 4px 6px;
        font-size: var(--fs-body-sm);
    }

    .btn-recipe,
    .btn-drink,
    .btn-snack {
        font-size: var(--fs-body-sm);
        padding: 6px 10px;
    }

    .swiper-slide {
        width: 240px;
        height: fit-content;
    }

    .toggle-track {
        width: 38px;
        height: 20px;
    }

    .toggle-track.active .toggle-thumb {
        transform: translateX(18px);
    }

    .progress-indicator.position-1 {
        left: 13.5%;
    }

    .progress-indicator.position-2 {
        left: 47.5%;
    }

    .progress-indicator.position-3 {
        left: 81.5%;
    }

    .collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .collection-img {
        height: 100px;
    }

    .collection-actions .btn {
        padding: 0.1rem 0.3rem;
        font-size: var(--fs-xs);
    }

    /* Collection View Mobile */
    #collection-view .collection-recipes-container,
    #collection-view .collection-drinks-container,
    #collection-view .collection-snacks-container {
        padding: 1rem 0.5rem;
        gap: 3rem;
    }

    #collection-view .collection-category-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    #collection-view .collection-category-title {
        font-size: var(--fs-2xl);
    }

    #collection-view .swiper {
        max-width: 320px;
    }

    #collection-view .collection-recipe-header,
    #collection-view .collection-drink-header,
    #collection-view .collection-snack-header {
        height: 120px;
    }

    #collection-view .collection-recipe-content,
    #collection-view .collection-drink-content,
    #collection-view .collection-snack-content {
        padding: 0.8rem 0.8rem 0.6rem 0.8rem;
        gap: 0.5rem;
    }

    #collection-view .collection-recipe-name,
    #collection-view .collection-drink-name,
    #collection-view .collection-snack-name {
        font-size: var(--fs-md);
        min-height: 2rem;
    }

    #collection-view .collection-meta-row {
        gap: 0.3rem;
    }

    #collection-view .collection-meta-item {
        font-size: var(--fs-xs);
        padding: 0.15rem 0.3rem;
    }

    #collection-view .collection-time-detail {
        font-size: var(--fs-2xs);
        padding: 0.1rem 0.25rem;
    }

    #collection-view .nutrition-pill {
        font-size: var(--fs-2xs);
        padding: 0.2rem 0.3rem;
    }

    #collection-view .collection-tag-link,
    #collection-view .collection-tag-more {
        font-size: 0.55rem;
        padding: 0.1rem 0.3rem;
    }

    #collection-view .collection-btn-details {
        padding: 0.5rem 0.8rem;
        font-size: var(--fs-sm);
    }

    #collection-view .collection-btn-icon {
        width: 28px;
        height: 28px;
        font-size: var(--fs-xs);
    }

    #collection-view .collection-swipe-instruction {
        font-size: var(--fs-body-sm);
        padding: 0.5rem 0.75rem;
        top: -2.5rem;
    }

    #collection-view .swiper-button-next.collection-swiper-nav,
    #collection-view .swiper-button-prev.collection-swiper-nav {
        width: 40px;
        height: 40px;
        margin-top: -20px;
    }

    #collection-view .swiper-button-next.collection-swiper-nav i,
    #collection-view .swiper-button-prev.collection-swiper-nav i {
        font-size: var(--fs-md);
    }

    #collection-view .collection-ingredients-toggle {
        padding: 0.6rem 0.8rem;
    }

    #collection-view .ingredients-title {
        font-size: var(--fs-body);
    }

    #collection-view .first-ingredient {
        font-size: var(--fs-xs);
        max-width: 120px;
    }

    #collection-view .ingredients-content {
        padding: 0.5rem;
    }

    /* Settings Inline */
    .settings-inline-panel {
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .setting-inline-divider {
        height: 20px;
    }

    .search-input-modern {
        padding: 0.5rem 5.5rem 0.5rem 2.5rem;
        font-size: var(--fs-body);
    }

    .btn-clear-search {
        width: 22px;
        height: 22px;
        right: 3rem;
    }

    .item-price-container {
        min-width: 70px;
    }

    .price-edit-group {
        width: 85px !important;
    }

    .combined-filter-row {
        flex-direction: column;
        gap: 1rem;
    }

    .difficulty-selector,
    .time-selector {
        width: 100%;
    }

    .difficulty-btn,
    .time-btn {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }

    /* Details View Mobile */
    .recipe-details-view .nutrition-icon,
    .snack-details-view .nutrition-icon,
    .drink-details-view .nutrition-icon {
        width: 32px;
        height: 32px;
        margin: 0;
    }

    .recipe-details-view .nutrition-value,
    .snack-details-view .nutrition-value,
    .drink-details-view .nutrition-value {
        font-size: var(--fs-lg);
    }

    .recipe-details-view .custom-tabs .nav-link,
    .snack-details-view .custom-tabs .nav-link,
    .drink-details-view .custom-tabs .nav-link {
        padding: 10px 15px;
        font-size: var(--fs-body-lg);
    }

    .recipe-details-view .btn-group-sm .btn,
    .drink-details-view .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        font-size: var(--fs-sm);
    }

    .recipe-details-view .nutrition-view-toggle,
    .snack-details-view .nutrition-view-toggle,
    .drink-details-view .nutrition-view-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .recipe-details-view .nutrition-toggle-label,
    .snack-details-view .nutrition-toggle-label,
    .drink-details-view .nutrition-toggle-label {
        flex: 1;
        padding: 0.4rem 0.75rem;
        font-size: var(--fs-body-sm);
    }

    .recipe-details-view .nutrition-toggle-label .label-text,
    .snack-details-view .nutrition-toggle-label .label-text,
    .drink-details-view .nutrition-toggle-label .label-text {
        display: none;
    }

    .recipe-details-view .nutrition-toggle-label i,
    .snack-details-view .nutrition-toggle-label i,
    .drink-details-view .nutrition-toggle-label i {
        margin-right: 0 !important;
        font-size: var(--fs-body-lg);
    }
}

@media (max-width: 576px) {
    .collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .collection-img {
        height: 100px;
    }

    #collection-view .swiper {
        max-width: 280px;
    }

    #collection-view .collection-recipe-header,
    #collection-view .collection-drink-header,
    #collection-view .collection-snack-header {
        height: 110px;
    }

    #collection-view .collection-swipe-instruction {
        font-size: var(--fs-xs);
        padding: 0.4rem 0.6rem;
        top: -3rem;
    }

    #collection-view .collection-swiper-container {
        margin-top: 1rem;
    }

    .settings-inline-panel {
        width: 100%;
        justify-content: space-between;
    }

    .setting-inline-divider {
        display: none;
    }

    .setting-inline-item {
        flex: 1;
        justify-content: center;
    }

    .search-input-modern {
        padding: 0.5rem 5rem 0.5rem 2.25rem;
        font-size: var(--fs-body-sm);
    }

    .recipe-details-view .recipe-title,
    .snack-details-view .snack-title {
        font-size: var(--fs-2xl);
    }

    .recipe-details-view .info-card,
    .snack-details-view .info-card {
        flex-direction: column;
    }

    .recipe-details-view .info-card-icon,
    .snack-details-view .info-card-icon {
        margin-right: 0;
        margin-bottom: 12px;
    }

    .recipe-details-view .ingredient-icon-container,
    .snack-details-view .ingredient-icon-container,
    .drink-details-view .ingredient-icon-container {
        width: 28px;
        height: 28px;
    }

    .recipe-details-view .ingredient-icon,
    .snack-details-view .ingredient-icon,
    .drink-details-view .ingredient-icon {
        font-size: 16px;
    }

    .recipe-details-view .ingredient-name,
    .snack-details-view .ingredient-name,
    .drink-details-view .ingredient-name {
        font-size: var(--fs-body-lg);
    }

    .recipe-details-view .progress-label {
        font-size: var(--fs-2xs);
    }

    .recipe-details-view .section-subtitle,
    .snack-details-view .section-subtitle,
    .drink-details-view .section-subtitle {
        font-size: var(--fs-lg);
    }

    .recipe-details-view .nutrition-toggle-label,
    .snack-details-view .nutrition-toggle-label {
        padding: 0.35rem 0.5rem;
    }
}

@media (min-width: 992px) {
    .collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .collection-img {
        height: 140px;
    }
}

/* ===== SHARED DARK MODE ===== */
[data-bs-theme="dark"] .ingredients-list-compact {
    background-color: var(--glass-white-5);
    border-color: var(--glass-white-10);
}

[data-bs-theme="dark"] .ingredient-row:hover {
    background-color: var(--glass-white-8);
}

[data-bs-theme="dark"] .popover {
    background-color: var(--bs-dark);
}

[data-bs-theme="dark"] .popover-header {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--bs-light);
}

[data-bs-theme="dark"] .nutrition-popover-comprehensive .nutrition-value-card .card {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .nutrition-popover-comprehensive .alert-light {
    background-color: var(--glass-white-5);
    border-color: var(--glass-white-10);
    color: var(--bs-light);
}

[data-bs-theme="dark"] .extra-ingredients-table {
    background-color: var(--glass-white-3);
}

[data-bs-theme="dark"] .search-input-wrapper .form-control {
    background-color: rgba(33, 37, 41, 0.75);
    border-color: var(--glass-white-10);
}

[data-bs-theme="dark"] .recipe-card,
[data-bs-theme="dark"] .drink-card,
[data-bs-theme="dark"] .snack-card {
    background-color: var(--bs-dark-bg-subtle, #343a40);
    box-shadow: 0 10px 20px var(--glass-black-20);
}

[data-bs-theme="dark"] .recipe-count,
[data-bs-theme="dark"] .drink-count,
[data-bs-theme="dark"] .snack-count {
    background-color: var(--bs-dark-bg-subtle, #343a40);
    color: var(--bs-light);
}

[data-bs-theme="dark"] .btn-edit {
    background-color: var(--bs-dark-bg-subtle, #343a40);
    color: var(--bs-light);
}

[data-bs-theme="dark"] .recipe-tag,
[data-bs-theme="dark"] .recipe-tag-more,
[data-bs-theme="dark"] .drink-tag,
[data-bs-theme="dark"] .drink-tag-more,
[data-bs-theme="dark"] .snack-tag,
[data-bs-theme="dark"] .snack-tag-more {
    background-color: var(--bs-dark-bg-subtle, #343a40);
    color: var(--bs-light);
}

[data-bs-theme="dark"] .btn-group {
    background: var(--glass-white-10);
}

[data-bs-theme="dark"] .toggle-track {
    background-color: var(--glass-white-20);
}

[data-bs-theme="dark"] .progress-track {
    background-color: var(--glass-white-20);
}

[data-bs-theme="dark"] .progress-indicator {
    border-color: var(--bs-dark);
}

/* Collection View Dark Mode */
[data-bs-theme="dark"] #collection-view .collection-recipe-card,
[data-bs-theme="dark"] #collection-view .collection-drink-card,
[data-bs-theme="dark"] #collection-view .collection-snack-card {
    background-color: var(--bs-dark-bg-subtle, #343a40);
    box-shadow: 0 20px 40px var(--glass-black-30);
}

[data-bs-theme="dark"] #collection-view .collection-recipe-count,
[data-bs-theme="dark"] #collection-view .collection-drink-count,
[data-bs-theme="dark"] #collection-view .collection-snack-count {
    background-color: var(--bs-primary);
}

[data-bs-theme="dark"] #collection-view .collection-btn-icon {
    background: var(--bs-dark-bg-subtle, #343a40);
    border-color: var(--glass-white-20);
    color: var(--bs-light);
}

[data-bs-theme="dark"] #collection-view .collection-tag-link,
[data-bs-theme="dark"] #collection-view .collection-tag-more {
    background-color: var(--glass-white-10);
    border-color: var(--glass-white-20);
    color: var(--bs-light);
}

[data-bs-theme="dark"] #collection-view .collection-meta-item,
[data-bs-theme="dark"] #collection-view .collection-time-detail {
    background: var(--glass-white-10);
    border-color: var(--glass-white-20);
    color: var(--bs-light);
}

[data-bs-theme="dark"] #collection-view .swiper-button-next.collection-swiper-nav,
[data-bs-theme="dark"] #collection-view .swiper-button-prev.collection-swiper-nav {
    background: rgba(33, 37, 41, 0.95);
    border-color: var(--glass-white-20);
}

[data-bs-theme="dark"] #collection-view .collection-nutrition-header {
    color: var(--bs-light);
    border-bottom-color: var(--glass-white-20);
}

[data-bs-theme="dark"] #collection-view .collection-swipe-instruction {
    background: rgba(var(--bs-primary-rgb), 0.9);
    border-color: var(--bs-primary);
    color: white;
}

[data-bs-theme="dark"] #collection-view .collection-ingredients-toggle {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] #collection-view .collection-ingredients-toggle:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-color: var(--glass-white-30);
}

[data-bs-theme="dark"] #collection-view .ingredients-content {
    background: var(--glass-white-5);
    border-color: var(--glass-white-10);
}

[data-bs-theme="dark"] #collection-view .ingredients-content .list-group-item:hover {
    background: var(--glass-white-8);
}

/* Settings & Search Dark Mode */
[data-bs-theme="dark"] .settings-inline-panel {
    background: var(--glass-white-3);
    border-color: var(--glass-white-10);
}

[data-bs-theme="dark"] .setting-toggle-btn {
    background: var(--glass-white-5);
    border-color: var(--glass-white-10);
}

[data-bs-theme="dark"] .toggle-slider {
    background: var(--glass-white-10);
}

[data-bs-theme="dark"] .nutrition-mode-btn:not(:last-child)::after {
    background: transparent;
}

[data-bs-theme="dark"] .nutrition-mode-btn:hover,
[data-bs-theme="dark"] .view-type-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.12) !important;
    color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .search-input-modern {
    background: var(--glass-white-3);
    border-color: var(--glass-white-10);
}

[data-bs-theme="dark"] .search-input-modern:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.15);
}

[data-bs-theme="dark"] .search-card-modern {
    box-shadow: 0 4px 20px var(--glass-white-5);
}

[data-bs-theme="dark"] .search-card-modern:focus-within {
    box-shadow: 0 8px 30px rgba(var(--bs-primary-rgb), 0.2);
}

[data-bs-theme="dark"] .advanced-filters-panel {
    border-color: var(--glass-white-10);
    background: var(--glass-white-3);
}

/* Details View Dark Mode */
[data-bs-theme="dark"] .recipe-details-view .recipe-main-card,
[data-bs-theme="dark"] .snack-details-view .snack-main-card {
    box-shadow: 0 10px 30px var(--glass-black-30);
}

[data-bs-theme="dark"] .recipe-details-view .info-card,
[data-bs-theme="dark"] .snack-details-view .info-card {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--glass-white-10);
}

[data-bs-theme="dark"] .recipe-details-view .progress,
[data-bs-theme="dark"] .snack-details-view .progress {
    background-color: var(--glass-white-10);
}

[data-bs-theme="dark"] .snack-details-view .time-breakdown-container {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--glass-white-10);
}

[data-bs-theme="dark"] .recipe-details-view .detailed-nutrition-card,
[data-bs-theme="dark"] .snack-details-view .detailed-nutrition-card {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--glass-white-10);
}

[data-bs-theme="dark"] .recipe-details-view .custom-tabs,
[data-bs-theme="dark"] .snack-details-view .custom-tabs,
[data-bs-theme="dark"] .drink-details-view .custom-tabs {
    border-bottom-color: var(--glass-white-10);
}

[data-bs-theme="dark"] .recipe-details-view .ingredients-container,
[data-bs-theme="dark"] .recipe-details-view .instructions-container,
[data-bs-theme="dark"] .recipe-details-view .notes-container,
[data-bs-theme="dark"] .snack-details-view .ingredients-container,
[data-bs-theme="dark"] .snack-details-view .instructions-container,
[data-bs-theme="dark"] .snack-details-view .notes-container,
[data-bs-theme="dark"] .drink-details-view .ingredients-container,
[data-bs-theme="dark"] .drink-details-view .instructions-container,
[data-bs-theme="dark"] .drink-details-view .notes-container {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--glass-white-10);
}

[data-bs-theme="dark"] .recipe-details-view .ingredient-item,
[data-bs-theme="dark"] .snack-details-view .ingredient-item,
[data-bs-theme="dark"] .drink-details-view .ingredient-item {
    background-color: var(--glass-white-5);
    border-color: var(--glass-white-5);
}

[data-bs-theme="dark"] .recipe-details-view .ingredient-item:hover,
[data-bs-theme="dark"] .snack-details-view .ingredient-item:hover,
[data-bs-theme="dark"] .drink-details-view .ingredient-item:hover {
    background-color: var(--glass-white-8);
}

[data-bs-theme="dark"] .recipe-details-view .ingredient-item.checked,
[data-bs-theme="dark"] .snack-details-view .ingredient-item.checked,
[data-bs-theme="dark"] .drink-details-view .ingredient-item.checked {
    background-color: var(--glass-white-3);
}

[data-bs-theme="dark"] .recipe-details-view .nutrition-view-toggle,
[data-bs-theme="dark"] .snack-details-view .nutrition-view-toggle,
[data-bs-theme="dark"] .drink-details-view .nutrition-view-toggle {
    background: var(--glass-white-5);
    border-color: var(--glass-white-10);
}

[data-bs-theme="dark"] .item-price-input {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .price-edit-group:hover,
[data-bs-theme="dark"] .price-edit-group:focus-within {
    background-color: var(--bs-dark);
}

/* ========================================================
   HOME DASHBOARD - AUTHENTICATED EXPERIENCE
   ======================================================== */

/* ===== SHARED — Entity-type utilities ===== */
/* Reusable icon boxes, badges, and accents for entity types */

.entity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
}

.entity-icon-sm { width: 36px; height: 36px;}
.entity-icon-sm i {
    font-size: var(--fs-lg);
}
.entity-icon-md { width: 44px; height: 44px;}
.entity-icon-md i {
    font-size: 1.35rem;
}
.entity-icon-lg { width: 52px; height: 52px; } 
.entity-icon-lg i {
    font-size: 1.6rem;
}

.entity-icon-recipe     { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.entity-icon-drink      { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.entity-icon-snack      { background: rgba(249, 115, 22, 0.12); color: #f97316; }
.entity-icon-mealplan   { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.entity-icon-grocery    { background: rgba(234, 179, 8, 0.12); color: #eab308; }
.entity-icon-ingredient { background: rgba(236, 72, 153, 0.12); color: #ec4899; }
.entity-icon-post       { background: rgba(20, 184, 166, 0.12); color: #14b8a6; }
.entity-icon-task       { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.entity-icon-all        { background: rgba(var(--bs-primary-rgb), 0.12); color: var(--bs-primary); }
.entity-icon-nutrition  { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.entity-icon-exercise   { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.entity-icon-coach      { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }
.entity-icon-mealentry  { background: rgba(244, 63, 94, 0.12); color: #f43f5e; }

.entity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-2xl);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.entity-badge-recipe     { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.entity-badge-drink      { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.entity-badge-snack      { background: rgba(249, 115, 22, 0.12); color: #f97316; }
.entity-badge-mealplan   { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.entity-badge-grocery    { background: rgba(234, 179, 8, 0.12); color: #ca8a04; }
.entity-badge-ingredient { background: rgba(236, 72, 153, 0.12); color: #ec4899; }
.entity-badge-post       { background: rgba(20, 184, 166, 0.12); color: #14b8a6; }
.entity-badge-task       { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }

.entity-stripe {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px 0 0 4px;
}

.entity-stripe-recipe     { background: #3b82f6; }
.entity-stripe-drink      { background: #a855f7; }
.entity-stripe-snack      { background: #f97316; }
.entity-stripe-mealplan   { background: #22c55e; }
.entity-stripe-grocery    { background: #eab308; }
.entity-stripe-ingredient { background: #ec4899; }
.entity-stripe-post       { background: #14b8a6; }
.entity-stripe-task       { background: #8b5cf6; }

/* ===== HOME DASHBOARD ===== */
.home-dashboard {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Welcome Banner */
.home-welcome {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-white-10);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(8px);
}

[data-bs-theme="light"] .home-welcome {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.07);
}

.home-welcome h2 {
    font-size: 1.6rem;
}

/* ── Quick Stat Cards ── */
.home-stat-card {
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-white-10);
    border-radius: var(--radius-xl);
    padding: 1.25rem 1rem 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    backdrop-filter: blur(8px);
    height: 100%;
    overflow: hidden;
}

[data-bs-theme="light"] .home-stat-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 2px 8px var(--glass-black-5);
}

.home-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

[data-bs-theme="light"] .home-stat-card:hover {
    box-shadow: 0 8px 24px var(--glass-black-10);
}

.home-stat-body {
    flex: 1;
    min-width: 0;
}

.home-stat-value {
    font-size: var(--fs-4xl);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.25rem;
    color: var(--bs-body-color);
}

.home-stat-label {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.home-stat-icon-wrap i {
    font-size: 2.25rem;
    line-height: 1;
}

/* Stat card type variants */
.home-stat-recipes .home-stat-accent  { background: #f59e0b; }
.home-stat-recipes .home-stat-icon-wrap { color: #f59e0b; }
.home-stat-snacks .home-stat-accent   { background: #06b6d4; }
.home-stat-snacks .home-stat-icon-wrap { color: #06b6d4; }
.home-stat-drinks .home-stat-accent   { background: #3b82f6; }
.home-stat-drinks .home-stat-icon-wrap { color: #3b82f6; }
.home-stat-tasks .home-stat-accent    { background: #ef4444; }
.home-stat-tasks .home-stat-icon-wrap  { color: #ef4444; }

/* ── Navigation Module Cards ── */
.home-nav-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-white-10);
    border-radius: var(--radius-xl);
    padding: 1.25rem 1rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    backdrop-filter: blur(8px);
    height: 100%;
}

[data-bs-theme="light"] .home-nav-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 2px 8px var(--glass-black-4);
}

.home-nav-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: var(--glass-white-20);
}

[data-bs-theme="light"] .home-nav-card:hover {
    box-shadow: 0 12px 32px var(--glass-black-10);
    border-color: rgba(0, 0, 0, 0.12);
}

.home-nav-card .entity-icon {
    margin: 0 auto 0.75rem;
}

.home-nav-title {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0.2rem;
}

.home-nav-desc {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
    line-height: 1.3;
}

/* ── Section Cards (Favorites / Trending) ── */
.home-section-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-white-10);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    backdrop-filter: blur(8px);
    height: 100%;
}

[data-bs-theme="light"] .home-section-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 2px 12px var(--glass-black-5);
}

/* ── Pill Tabs inside sections ── */
.home-content-tabs {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0;
    flex-wrap: wrap;
}

.home-tab-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-white-8);
    border-radius: var(--radius-md);
    color: var(--bs-secondary-color);
    font-size: var(--fs-body-sm);
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

[data-bs-theme="light"] .home-tab-btn {
    background: var(--glass-black-3);
    border-color: var(--glass-black-8);
}

.home-tab-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--bs-body-color);
}

[data-bs-theme="light"] .home-tab-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.home-tab-btn.active {
    background: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb), 0.25);
    font-weight: 600;
}

.home-tab-count {
    background: rgba(255, 255, 255, 0.12);
    color: var(--bs-secondary-color);
    border-radius: var(--radius-md);
    padding: 0 0.4rem;
    font-size: var(--fs-xs);
    min-width: 1.3rem;
    text-align: center;
}

[data-bs-theme="light"] .home-tab-count {
    background: rgba(0, 0, 0, 0.06);
}

.home-tab-btn.active .home-tab-count {
    background: rgba(var(--bs-primary-rgb), 0.2);
    color: var(--bs-primary);
}

/* ── Favorite content item cards (grid inside tabs) ── */
.home-content-item {
    background: var(--glass-white-5);
    border: 1px solid var(--glass-white-8);
    border-radius: var(--radius-lg);
    padding: 0.75rem 0.6rem;
    text-align: center;
    transition: transform 0.15s ease, background 0.15s ease;
}

[data-bs-theme="light"] .home-content-item {
    background: var(--glass-black-2);
    border-color: rgba(0, 0, 0, 0.07);
}

.home-content-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.09);
}

[data-bs-theme="light"] .home-content-item:hover {
    background: var(--glass-black-5);
}

.home-content-item-icon {
    font-size: var(--fs-2xl);
    line-height: 1;
    margin-bottom: 0.35rem;
}

.home-content-item-name {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Popular / Trending list ── */
.home-popular-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.home-popular-item {
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.home-popular-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--glass-white-8);
}

[data-bs-theme="light"] .home-popular-item:hover {
    background: var(--glass-black-4);
    border-color: rgba(0, 0, 0, 0.06);
}

.home-popular-rank {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--bs-secondary-color);
    width: 1.4rem;
    text-align: center;
    flex-shrink: 0;
}

.home-popular-name {
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-popular-views {
    font-size: 0.73rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Empty states ── */
.home-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    text-align: center;
}

/* ── Misc ── */
.home-badge-subtle {
    background: var(--glass-white-8);
    border: 1px solid var(--glass-white-10);
    border-radius: var(--radius-md);
    padding: 0.3rem 0.6rem;
    font-size: 0.73rem;
}

[data-bs-theme="light"] .home-badge-subtle {
    background: var(--glass-black-4);
    border-color: var(--glass-black-8);
}

/* Utilities used across multiple pages */
.fs-xs {
    font-size: 0.7rem !important;
}

.min-width-0 {
    min-width: 0;
}

/* ── App Navigation Tree ── */
.app-tree-container {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-white-10);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
}

[data-bs-theme="light"] .app-tree-container {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.07);
}

.app-tree,
.app-tree-branch {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-tree-branch {
    margin-left: 0.75rem;
    padding-left: 1rem;
    border-left: 1px dashed rgba(var(--bs-body-color-rgb), 0.15);
}

.app-tree-node {
    position: relative;
}

.app-tree-item {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 1px 0;
}

/* Horizontal connector line from vertical border to node */
.app-tree-branch > .app-tree-node > .app-tree-item::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 50%;
    width: 0.75rem;
    border-top: 1px dashed rgba(var(--bs-body-color-rgb), 0.15);
}

/* Toggle button */
.app-tree-toggle {
    background: none;
    border: none;
    color: var(--bs-secondary-color);
    width: 1.375rem;
    height: 1.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s;
}

.app-tree-toggle:hover {
    background: rgba(var(--bs-body-color-rgb), 0.08);
}

.app-tree-toggle > .mdi {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.app-tree-toggle[aria-expanded="true"] > .mdi {
    transform: rotate(90deg);
}

/* Links */
.app-tree-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--bs-body-color);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.app-tree-link:hover {
    background: rgba(var(--bs-body-color-rgb), 0.07);
    color: var(--bs-primary);
    text-decoration: none;
}

[data-bs-theme="light"] .app-tree-link:hover {
    background: rgba(0, 0, 0, 0.05);
}

.app-tree-link-group {
    cursor: default;
}

.app-tree-link-group:hover {
    background: transparent;
    color: var(--bs-body-color);
}

/* Icon sizing */
.app-tree-icon {
    font-size: 1.05rem;
    width: 1.125rem;
    text-align: center;
    flex-shrink: 0;
}

/* Root node */
.app-tree-link-root {
    font-weight: 700;
    font-size: 0.9375rem;
}

/* Area-level nodes */
.app-tree-link-area {
    font-weight: 600;
    font-size: 0.875rem;
}

/* Leaf node indentation to align with toggle-nodes */
.app-tree-item-leaf {
    padding-left: 1.375rem;
}

/* Mobile adjustments — Dashboard */
@media (max-width: 576px) {
    .home-dashboard {
        padding: 0 0.5rem;
    }

    .home-welcome h2 {
        font-size: 1.3rem;
    }

    .home-stat-value {
        font-size: 1.6rem;
    }

    .home-stat-icon-wrap {
        font-size: var(--fs-3xl);
    }

    .home-section-card {
        padding: 1rem;
    }

    .app-tree-container {
        padding: 1rem;
    }

    .app-tree-link {
        font-size: 0.78rem;
    }

    .app-tree-branch {
        margin-left: 0.5rem;
        padding-left: 0.75rem;
    }
}

/* ===== FAVORITES PAGE ===== */

/* Header */
.fav-header {
    margin-bottom: 1.5rem;
}

.fav-header-title {
    font-size: var(--fs-3xl);
    font-weight: 800;
    color: var(--bs-emphasis-color);
    letter-spacing: -0.02em;
}

.fav-header-subtitle {
    font-size: var(--fs-body-lg);
    color: var(--bs-secondary-color);
}

.fav-header-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    background: rgba(239, 68, 68, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fav-header-icon i {
    font-size: var(--fs-3xl);
    color: #ef4444;
}

/* Filter chips */
.fav-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.fav-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
    font-size: var(--fs-body);
    font-weight: 500;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-white-10);
    color: var(--bs-body-color);
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

[data-bs-theme="light"] .fav-filter-chip {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--glass-black-8);
}

.fav-filter-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--bs-body-color);
}

[data-bs-theme="light"] .fav-filter-chip:hover {
    background: var(--glass-black-5);
    color: var(--bs-body-color);
}

.fav-filter-chip.active {
    background: rgba(var(--bs-primary-rgb), 0.15);
    border-color: rgba(var(--bs-primary-rgb), 0.3);
    color: var(--bs-primary);
    font-weight: 600;
}

.fav-filter-count {
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 0.1rem 0.4rem;
    font-size: var(--fs-xs);
    font-weight: 600;
}

[data-bs-theme="light"] .fav-filter-count {
    background: rgba(0, 0, 0, 0.06);
}

.fav-filter-chip.active .fav-filter-count {
    background: rgba(var(--bs-primary-rgb), 0.2);
}

/* Favorites grid */
.fav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

/* Favorite card */
.fav-card {
    position: relative;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-white-10);
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[data-bs-theme="light"] .fav-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--glass-black-8);
    box-shadow: 0 2px 8px var(--glass-black-4);
}

.fav-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

[data-bs-theme="light"] .fav-card:hover {
    box-shadow: 0 12px 32px var(--glass-black-8);
}

.fav-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.fav-card-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.fav-card-title a {
    color: var(--bs-emphasis-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.fav-card-title a:hover {
    color: var(--bs-primary);
}

.fav-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-body-sm);
    color: var(--bs-secondary-color);
    margin-bottom: 0.75rem;
}

.fav-card-notes {
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: var(--bs-secondary-bg);
    margin-bottom: 0.75rem;
    font-size: var(--fs-body);
    color: var(--bs-body-color);
    border-left: 3px solid var(--bs-primary);
}

.fav-card-notes-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--bs-secondary-color);
    margin-bottom: 0.35rem;
}

.fav-card-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.fav-btn-view {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--fs-body);
    background: var(--bs-primary);
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
}

.fav-btn-view:hover {
    filter: brightness(1.1);
    color: white;
    transform: translateY(-1px);
}

.fav-btn-remove {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    transition: all 0.2s ease;
    cursor: pointer;
}

.fav-btn-remove:hover {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
}

/* Favorites empty state */
.fav-empty {
    text-align: center;
    padding: 4rem 2rem;
    border-radius: var(--radius-xl);
    background: var(--glass-white-5);
    backdrop-filter: blur(10px);
    border: 2px dashed rgba(255, 255, 255, 0.12);
}

[data-bs-theme="light"] .fav-empty {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--glass-black-10);
}

.fav-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: rgba(239, 68, 68, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.fav-empty-icon i {
    font-size: 2.5rem;
    color: #ef4444;
    opacity: 0.7;
}

.fav-empty-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--bs-emphasis-color);
    margin-bottom: 0.5rem;
}

.fav-empty-text {
    color: var(--bs-secondary-color);
    max-width: 400px;
    margin: 0 auto 1.5rem;
    line-height: 1.5;
}

.fav-empty-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Mobile — Favorites */
@media (max-width: 768px) {
    .fav-header-title {
        font-size: 1.35rem;
    }

    .fav-header-icon {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-lg);
    }

    .fav-header-icon i {
        font-size: 1.35rem;
    }

    .fav-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.5rem;
    }

    .fav-filters::-webkit-scrollbar {
        display: none;
    }

    .fav-filter-chip {
        flex-shrink: 0;
    }

    .fav-grid {
        grid-template-columns: 1fr;
    }

    .fav-card-actions {
        flex-direction: column;
    }

    .fav-btn-remove {
        width: 100%;
    }

    .fav-empty {
        padding: 3rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .fav-filter-chip {
        padding: 0.4rem 0.75rem;
        font-size: var(--fs-body-sm);
    }
}


/* ===== FEED VIEW — Video/Image Scroll-Snap Feed ===== */
#feed-view-container {
    height: calc(100dvh - 120px);
    min-height: 320px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
    transition: height 0.3s ease;
}

#feed-view-container::-webkit-scrollbar {
    width: 4px;
}

#feed-view-container::-webkit-scrollbar-track {
    background: transparent;
}

#feed-view-container::-webkit-scrollbar-thumb {
    background: var(--glass-white-30);
    border-radius: var(--radius-xs);
}

.feed-container {
    display: flex;
    flex-direction: column;
}

.feed-item {
    height: calc(100dvh - 120px);
    min-height: 320px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    transition: height 0.3s ease;
}

/* Video and image both use object-fit cover to fill the item */
.feed-item-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: filter 0.3s, opacity 0.6s ease;
}

/* Video starts hidden; JS fades it in once canplaythrough fires */
.feed-item-video {
    opacity: 0;
    z-index: 1;
}

/* Spinner overlay shown while video is buffering */
.feed-video-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    z-index: 2;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.feed-item:hover .feed-item-media {
    filter: brightness(0.85);
}

/* Gradient overlay for text readability over any media */
.feed-item-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 1.25rem;
    padding-right: 3.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.65) 20%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.05) 70%, transparent 85%);
    z-index: 5;
    pointer-events: none;
}

.feed-item-overlay * {
    pointer-events: auto;
}

/* Light mode: slightly softer gradient, action buttons use dark text */
[data-bs-theme="light"] .feed-item-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.55) 20%, rgba(0, 0, 0, 0.18) 50%, rgba(0, 0, 0, 0.03) 70%, transparent 85%);
}

.feed-item-info {
    flex: 1;
    color: #fff;
    padding-right: 1rem;
}

.feed-item-title {
    font-size: 1.35rem;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    margin-bottom: 0.35rem;
    line-height: 1.25;
}

.feed-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.feed-item-badge {
    font-size: var(--fs-sm);
    padding: 0.2rem 0.5rem;
    border-radius: 50rem;
    background: var(--glass-white-20);
    color: #fff;
    backdrop-filter: blur(4px);
}

button.feed-item-badge {
    border: none;
    cursor: pointer;
    line-height: inherit;
}

.feed-item-nutrition {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.feed-item-actions {
    position: absolute;
    right: 0.5rem;
    bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    z-index: 10;
    pointer-events: auto;
}

.feed-item-actions .btn {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border: none;
}

.btn-feed-action {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(8px);
    color: #fff !important;
    transition: background 0.2s ease;
}

.btn-feed-action:hover,
.btn-feed-action:focus {
    background: rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
}

.feed-item-actions .btn-favorite {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    color: #fff;
    border: none;
}

.feed-item-actions .btn-favorite.btn-outline-danger {
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
}

.feed-item-actions .btn-favorite.btn-danger {
    background: rgba(220, 53, 69, 0.7);
    color: #fff;
    border: none;
}

.feed-scroll-hint {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--bs-body-color);
    text-align: center;
    font-size: var(--fs-sm);
    animation: feedHintBounce 1.5s ease-in-out infinite;
    pointer-events: none;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

/* Empty state uses theme color so it's readable in both modes */
.feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--bs-body-color);
    text-align: center;
    padding: 2rem;
}

@keyframes feedHintBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(-5px); }
}

@media (max-width: 767px) {
    #feed-view-container {
        height: calc(100dvh - 60px);
        min-height: 280px;
    }

    .feed-item {
        height: calc(100dvh - 60px);
        min-height: 280px;
    }

    .feed-item-title {
        font-size: 1.15rem;
    }

    .feed-item-overlay {
        padding: 0.75rem;
        padding-right: 3rem;
    }

    .feed-item-actions {
        right: 0.4rem;
        bottom: 0.75rem;
        gap: 0.5rem;
    }

    .feed-item-actions .btn {
        width: 2.2rem;
        height: 2.2rem;
        font-size: var(--fs-body-sm);
    }

    .feed-item-badge {
        font-size: var(--fs-xs);
        padding: 0.15rem 0.4rem;
    }
}

/* Landscape phones: shorter viewport, use smaller elements */
@media (max-height: 500px) {
    #feed-view-container {
        height: calc(100dvh - 50px);
        min-height: 240px;
    }

    .feed-item {
        height: calc(100dvh - 50px);
        min-height: 240px;
    }

    .feed-item-title {
        font-size: var(--fs-md);
        margin-bottom: 0.2rem;
    }

    .feed-item-meta {
        margin-bottom: 0.25rem;
        gap: 0.25rem;
    }

    .feed-item-badge {
        font-size: var(--fs-2xs);
        padding: 0.1rem 0.35rem;
    }

    .feed-item-overlay {
        padding: 0.5rem 0.75rem;
        padding-right: 2.8rem;
    }

    .feed-item-actions {
        bottom: 0.5rem;
        gap: 0.4rem;
    }

    .feed-item-actions .btn {
        width: 2rem;
        height: 2rem;
        font-size: var(--fs-sm);
    }

    .feed-item-nutrition .feed-item-badge {
        font-size: var(--fs-2xs);
    }
}

/* ════════════════════════════════════════════════════════════ */
/* Extracted inline styles (css_extract.py)                    */
/* ════════════════════════════════════════════════════════════ */

/* ═══ Source: Areas/Kitchen/Views/Drinks/Create.cshtml ═══ */
.nutrition-circle {
        background-color: #f8f9fa;
        border-radius: var(--radius-full);
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 8px auto;
        font-weight: bold;
        box-shadow: 0 2px 5px var(--glass-black-10);
    }

    #instructionsEditor {
        resize: vertical;
    }

    .image-preview {
        background-color: transparent;
        border-radius: var(--radius-md);
        border: 1px dashed #ced4da;
        padding: 10px;
        min-height: 240px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mobile responsiveness improvements */
    @media(max-width: 768px) {
        .nutrition-circle {
            width: 50px;
            height: 50px;
            font-size: var(--fs-body-lg);
        }
    }

/* ═══ Source: Areas/Kitchen/Views/Drinks/Details.cshtml ═══ */
/* Modern drink details styling */
.drink-main-card {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 10px 30px var(--glass-black-10);
    transition: all 0.3s ease;
}

/* Drink Header Section */
.drink-image-container {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin: 15px;
    box-shadow: 0 8px 25px var(--glass-black-15);
    height: calc(100% - 30px);
    transition: all 0.3s ease;
}

.drink-image-container:hover {
    transform: scale(1.01);
}

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

.private-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px 10px;
    border-radius: var(--radius-2xl);
    font-size: var(--fs-body-sm);
    backdrop-filter: blur(4px);
}

.drink-header-content {
    padding: 25px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.drink-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--bs-primary);
}

.action-btn {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    transition: background-color 0.2s;
}

.action-btn:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
}

/* Drink Info Cards */
.drink-info-cards {
    margin-top: 20px;
}

.info-card {
    display: flex;
    padding: 20px;
    border-radius: var(--radius-lg);
    background-color: var(--bs-body-bg);
    box-shadow: 0 2px 12px var(--glass-black-4);
    border: 1px solid var(--glass-black-5);
    transition: transform 0.2s, box-shadow 0.2s;
}

.info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.info-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    margin-right: 16px;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    font-size: 1.2rem;
}

.info-card-content {
    flex: 1;
}

.info-card-title {
    font-size: var(--fs-md);
    font-weight: 600;
    margin-bottom: 12px;
}

.info-label {
    color: var(--bs-secondary-color);
}

.info-value {
    font-weight: 500;
}

/* Modern Time Breakdown Styles */
.time-timeline {
    margin-bottom: 15px;
}

.time-breakdown {
    display: flex;
    flex-direction: column;
}

.time-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    position: relative;
}

.time-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 17px;
    top: 32px;
    bottom: 0;
    width: 2px;
    height: 30px;
    background-color: rgba(var(--bs-secondary-rgb), 0.4);
}

.time-icon.preparation {
    background-color: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
}

.time-icon.cooking {
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.time-icon.resting {
    background-color: var(--bs-info);
}

.time-icon.total {
    background-color: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary-text-emphasis);
}

.time-content {
    flex: 1;
}

.time-label {
    font-size: var(--fs-body);
    color: var(--bs-secondary-color);
    margin-bottom: 2px;
}

.time-value {
    font-weight: 600;
}

/* Nutrition Overview */
.nutrition-overview {
    margin-top: 20px;
}

.nutrition-cards {
    margin-bottom: 1rem;
}

.nutrition-card {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 2px 8px var(--glass-black-4);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}

.nutrition-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--glass-black-8);
}

.nutrition-card.calories {
    background-color: rgba(var(--bs-success-rgb), 0.1);
    border: 1px solid rgba(var(--bs-success-rgb), 0.2);
}

.nutrition-card.protein {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
}

.nutrition-card.carbs {
    background-color: rgba(var(--bs-info-rgb), 0.1);
    border: 1px solid rgba(var(--bs-info-rgb), 0.2);
}

.nutrition-card.fat {
    background-color: rgba(var(--bs-warning-rgb), 0.1);
    border: 1px solid rgba(var(--bs-warning-rgb), 0.2);
}

.nutrition-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    margin-right: 12px;
    font-size: var(--fs-md);
    flex-shrink: 0;
}

.calories .nutrition-icon {
    background-color: rgba(var(--bs-success-rgb), 0.2);
    color: var(--bs-success);
}

.protein .nutrition-icon {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
    color: var(--bs-primary);
}

.carbs .nutrition-icon {
    background-color: rgba(var(--bs-info-rgb), 0.2);
    color: var(--bs-info);
}

.fat .nutrition-icon {
    background-color: rgba(var(--bs-warning-rgb), 0.2);
    color: var(--bs-warning);
}

.nutrition-data {
    flex: 1;
}

.nutrition-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

.calories .nutrition-value {
    color: var(--bs-success);
}

.protein .nutrition-value {
    color: var(--bs-primary);
}

.carbs .nutrition-value {
    color: var(--bs-info);
}

.fat .nutrition-value {
    color: var(--bs-warning);
}

.nutrition-label {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--bs-body-color);
}

.nutrition-details-toggle {
    padding: 0;
    color: var(--bs-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.nutrition-details-toggle:hover {
    text-decoration: underline;
    color: var(--bs-primary-darker, var(--bs-primary));
}

.detailed-nutrition-card {
    padding: 16px;
    border-radius: var(--radius-lg);
    background-color: var(--bs-body-bg);
    box-shadow: 0 2px 8px var(--glass-black-4);
    border: 1px solid var(--glass-black-5);
}

.detailed-label {
    color: var(--bs-secondary-color);
    font-size: var(--fs-body-lg);
}

.detailed-value {
    font-weight: 600;
    font-size: var(--fs-body-lg);
}

/* Tags */
.drink-tags {
    margin-top: 1rem;
}

.tag-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-2xl);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    font-size: var(--fs-body);
    font-weight: 500;
    margin-bottom: 6px;
    transition: background-color 0.2s ease;
}

.tag-pill:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
}

/* Section Titles */
.section-title {
    font-size: var(--fs-2xl);
    font-weight: 600;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.3rem;
    font-weight: 600;
}

/* Custom Tabs */
.custom-tabs {
    border-bottom: 2px solid var(--glass-black-5);
    margin-bottom: 1.5rem;
}

.custom-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--bs-secondary-color);
    font-weight: 600;
    padding: 12px 20px;
    transition: all 0.2s ease;
}

.custom-tabs .nav-link:hover {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.custom-tabs .nav-link.active {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
    background-color: transparent;
}

.custom-tab-content {
    padding: 1rem 0;
}

/* Instructions */
/* Time Visual - To be removed since we moved it to the info card */
/* Empty States */
.empty-state {
    text-align: center;
    padding: 40px 20px;
}

.empty-state i {
    font-size: var(--fs-5xl);
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h5 {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: var(--bs-secondary-color);
}

/* Print button enhancements */
#printDrink {
    transition: all 0.3s ease;
}

#printDrink:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}


/* Progress bar styling */
.progress {
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    background-color: rgba(0,0,0,0.03);
}

/* Custom progress bars with subtle gradients */
.progress-bar-prep {
    background: linear-gradient(135deg, #7eb6c5 0%, #6ea6b5 100%);
    color: white;
    font-size: var(--fs-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.progress-bar-cooking {
    background: linear-gradient(135deg, #e2aa76 0%, #d29966 100%);
    color: white;
    font-size: var(--fs-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.progress-bar-rest {
    background: linear-gradient(135deg, #a3a9b1 0%, #939ba3 100%);
    color: white;
    font-size: var(--fs-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Progress label for smaller segments */
.progress-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 8px;
}

/* Matching icon backgrounds to progress bars */
.time-icon.preparation {
    background: linear-gradient(135deg, #7eb6c5 0%, #6ea6b5 100%);
    color: white;
    box-shadow: 0 3px 6px rgba(110, 166, 181, 0.2);
}

.time-icon.cooking {
    background: linear-gradient(135deg, #e2aa76 0%, #d29966 100%);
    color: white;
    box-shadow: 0 3px 6px rgba(210, 153, 102, 0.2);
}

.time-icon.resting {
    background: linear-gradient(135deg, #a3a9b1 0%, #939ba3 100%);
    color: white;
    box-shadow: 0 3px 6px rgba(147, 155, 163, 0.2);
}

.time-icon.total {
    background: linear-gradient(135deg, #6b7b8e 0%, #5b6b7e 100%);
    color: white;
    box-shadow: 0 3px 6px rgba(91, 107, 126, 0.2);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .progress-label {
        font-size: var(--fs-2xs);
    }
}
/* Print Styles */
@media print {
    body * {
        visibility: hidden;
    }
    
    #print-content, #print-content * {
        visibility: visible;
    }
    
    #print-content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    
    .print-container {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    }

/* For dark mode compatibility */
@media (prefers-color-scheme: dark) {
    .ingredient-item {
        background-color: var(--glass-white-5);
        border-color: var(--glass-white-5);
    }
    
    .ingredient-item:hover {
        background-color: var(--glass-white-8);
    }
    
    .ingredient-icon-container {
        background-color: rgba(var(--bs-primary-rgb), 0.3);
    }
    
    .ingredient-item.checked {
        background-color: var(--glass-white-3);
    }
    }

/* Responsive Adjustments */
@media (max-width: 991px) {
    .drink-image-container {
        margin-bottom: 0;
        height: auto;
        aspect-ratio: 16/9;
    }
    
    .drink-header-content {
        padding-top: 10px;
    }
    
    .drink-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    
    .nutrition-value {
        font-size: var(--fs-lg);
    }
    
    .custom-tabs .nav-link {
        padding: 10px 15px;
    }
}

@media (max-width: 576px) {
    .drink-title {
        font-size: var(--fs-2xl);
    }
    
    .info-card-icon {
        width: 36px;
        height: 36px;
    }
    
    .ingredient-icon-container {
        width: 28px;
        height: 28px;
    }
    
    .ingredient-icon {
        font-size: 16px;
    }
    
    .ingredient-name {
        font-size: var(--fs-body-lg);
    }
}

/* ═══ Source: Areas/Kitchen/Views/Drinks/Edit.cshtml ═══ */
.nutrition-circle {
            background-color: #f8f9fa;
            border-radius: var(--radius-full);
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            font-weight: bold;
            font-size: var(--fs-lg);
            box-shadow: 0 2px 5px var(--glass-black-10);
        }
        
        #instructionsEditor {
            resize: vertical;
        }
        
        .image-preview {
            background-color: transparent;
            border-radius: var(--radius-md);
            border: 1px dashed #ced4da;
            padding: 10px;
            min-height: 240px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .ingredients-list {
            overflow-y: auto;
        }
        
        .ingredient-item {
            transition: all 0.2s ease;
            border-left: 3px solid transparent;
        }
        
        .ingredient-item:hover {
            border-left: 3px solid #0d6efd;
            background-color: #828282;
        }
        
        .empty-state {
            padding: 2rem 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        /* Mobile responsiveness improvements */
        @media (max-width: 768px) {
            .nutrition-circle {
                width: 60px;
                height: 60px;
                font-size: var(--fs-body-lg);
            }
            
            .ingredient-actions {
                margin-left: 10px;
            }
        }

/* ═══ Source: Areas/Kitchen/Views/Ingredients/Create.cshtml ═══ */
[data-bs-theme="dark"] .card {
        background: var(--glass-white-5);
        border-color: var(--glass-white-10);
    }
    
    [data-bs-theme="light"] .card {
        background: white;
    }
    
    .nutrition-card {
        transition: all 0.3s ease;
    }
    
    .nutrition-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px var(--glass-black-10);
    }
    
    .nav-tabs .nav-link {
        border-radius: 0.5rem 0.5rem 0 0;
        transition: all 0.3s ease;
    }
    
    .nav-tabs .nav-link:hover {
        background: rgba(var(--bs-primary-rgb), 0.1);
    }
    
    .nav-tabs .nav-link.active {
        border-bottom-color: transparent;
    }
    
    .additional-nutrient {
        transition: all 0.3s ease;
    }
    
    .additional-nutrient:hover {
        background: var(--glass-black-2);
    }
    
    [data-bs-theme="dark"] .additional-nutrient:hover {
        background: rgba(255, 255, 255, 0.02);
    }
    
    .link-card {
        transition: all 0.3s ease;
        border-left: 3px solid var(--bs-success);
    }
    
    .link-card:hover {
        transform: translateX(5px);
        box-shadow: 0 2px 8px var(--glass-black-10);
    }
    
    @media (max-width: 768px) {
        .form-floating {
            margin-bottom: 1rem;
        }
        
        .nav-tabs {
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
        }
        
        .nav-tabs .nav-link {
            white-space: nowrap;
        }
    }

/* ═══ Source: Areas/Kitchen/Views/Ingredients/Details.cshtml ═══ */
.nutrition-block {
            transition: transform 0.3s ease;
        }
        
        .nutrition-block-hover {
            transform: translateY(-5px);
        }
        
        .rounded-circle {
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .nutrition-block:hover .rounded-circle {
            transform: scale(1.1);
        }

/* ═══ Source: Areas/Kitchen/Views/Ingredients/Index.cshtml ═══ */
/* Pulse animation for nutrition badges */
    @keyframes pulse {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.1);
        }

        100% {
            transform: scale(1);
        }
    }

    .pulse-animation {
        animation: pulse 0.8s infinite;
    }

    .nutrition-badge {
        transition: all 0.2s ease;
    }

    .nutrition-badge:hover {
        cursor: pointer;
    }

    .ingredient-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .ingredient-card:hover {
        transform: translateY(-5px);
    }

    /* Make accordion buttons more compact */
    .accordion-button {
        padding: 0.5rem 1rem;
    }

    .accordion-body {
        padding: 0.75rem;
    }

    /* Enhanced range slider styling */
    .range-slider-container {
        position: relative;
        height: 30px;
        padding: 0;
        width: 100%;
        margin: 15px 0;
    }

    /* Base track styling - this is the background track */
    .range-slider-container::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 8px;
        background-color: #e9ecef;
        border-radius: var(--radius-xs);
        transform: translateY(-50%);
    }

    /* Active range track */
    .range-track {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 8px;
        border-radius: var(--radius-xs);
        z-index: 1;
        pointer-events: none;
    }

    /* Form range inputs */
    .form-range {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Set to 100% of container height */
        margin: 0;
        /* Remove any default margins */
        padding: 0;
        /* Remove any default padding */
        pointer-events: none;
        background: transparent;
        z-index: 2;
    }

    /* Make thumbs visible with custom styling */
    .form-range::-webkit-slider-thumb {
        appearance: none;
        opacity: 1;
        pointer-events: auto;
        cursor: pointer;
        height: 20px;
        width: 20px;
        border-radius: var(--radius-full);
        background-color: white;
        box-shadow: 0 2px 4px var(--glass-black-30);
        border: 2px solid var(--glass-black-10);
        z-index: 3;
        transition: transform 0.2s, box-shadow 0.2s;
        margin-top: -7.5px;
        /* Adjust vertical centering */
    }

    .form-range::-moz-range-thumb {
        appearance: none;
        opacity: 1;
        pointer-events: auto;
        cursor: pointer;
        height: 20px;
        width: 20px;
        border-radius: var(--radius-full);
        background-color: white;
        box-shadow: 0 2px 4px var(--glass-black-30);
        border: 2px solid var(--glass-black-10);
        z-index: 3;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    /* Thumb hover and active states */
    .form-range::-webkit-slider-thumb:hover,
    .form-range::-webkit-slider-thumb:active {
        transform: scale(1.1);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
    }

    .form-range::-moz-range-thumb:hover,
    .form-range::-moz-range-thumb:active {
        transform: scale(1.1);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
    }

    /* Hide the default track completely */
    .form-range::-webkit-slider-runnable-track {
        height: 0;
        background: transparent;
    }

    .form-range::-moz-range-track {
        height: 0;
        background: transparent;
    }

    /* Min handle gets a different z-index to be properly draggable */
    .min-range {
        z-index: 3;
    }

    /* Color variations for the tracks */
    .primary-range {
        background-color: var(--bs-primary);
    }

    .info-range {
        background-color: var(--bs-info);
    }

    .danger-range {
        background-color: var(--bs-danger);
    }

    .warning-range {
        background-color: var(--bs-warning);
    }

    /* Pagination styling */
    .pagination-container {
        display: flex;
        justify-content: center;
    }

    .page-item.active .page-link {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

    /* Loading spinner and fade effects */
    .fade-in {
        animation: fadeIn 0.3s ease-in;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    /* Search input highlight when active/focused */
    .search-input:focus {
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    /* Mobile optimizations */
    @media (max-width: 768px) {
        .card-body {
            padding: 0.75rem;
        }

        .row {
            margin-right: -8px;
            margin-left: -8px;
        }

        .col,
        .col-lg-6,
        .col-md-6,
        .col-md-3 {
            padding-right: 8px;
            padding-left: 8px;
        }

        h5 {
            font-size: var(--fs-md);
        }

        h6 {
            font-size: var(--fs-body-lg);
        }

        .form-check-label,
        .btn {
            font-size: var(--fs-body-lg);
        }

        .input-group-sm>.form-control {
            font-size: var(--fs-body-sm);
            padding: 0.25rem;
        }

        .input-group-text {
            font-size: var(--fs-body-sm);
            padding: 0.25rem 0.5rem;
        }

        .range-slider-container {
            height: 24px;
        }

        .form-range::-webkit-slider-thumb {
            height: 16px;
            width: 16px;
            margin-top: -7.5px;
            /* Adjusted for smaller height on mobile */
        }

        .form-range::-moz-range-thumb {
            height: 16px;
            width: 16px;
        }

        /* Additional Firefox-specific fix for mobile */
        @supports (-moz-appearance:none) {
            .form-range {
                margin-top: 4px;
                /* Firefox needs specific adjustment */
            }
        }
    }

/* ═══ Source: Areas/Kitchen/Views/RecipeCategories/Index.cshtml ═══ */
/* Recipe Categories Page Custom Styles */
    .rc-category-section {
        margin-bottom: 1rem;
        border-radius: var(--radius-xl);
        overflow: hidden;
        background: var(--bs-card-bg, #fff);
        box-shadow: 0 4px 12px var(--glass-black-8);
        transition: box-shadow 0.3s ease, transform 0.2s ease;
    }

    .rc-category-section:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

    .rc-category-section.rc-all-recipes {
        background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.1) 0%, rgba(var(--bs-primary-rgb), 0.02) 100%);
        border: 2px solid rgba(var(--bs-primary-rgb), 0.2);
    }

    .rc-category-header {
        display: flex;
        align-items: center;
        padding: 0;
    }

    .rc-category-toggle {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem 1.5rem;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .rc-category-toggle:hover {
        background: rgba(var(--bs-primary-rgb), 0.05);
    }

    .rc-category-icon {
        width: 56px;
        height: 56px;
        border-radius: var(--radius-lg);
        background: linear-gradient(135deg, var(--bs-primary) 0%, rgba(var(--bs-primary-rgb), 0.7) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .rc-category-icon i {
        font-size: var(--fs-2xl);
        color: #fff;
    }

    .rc-all-recipes .rc-category-icon {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    }

    .rc-category-info {
        flex: 1;
        min-width: 0;
    }

    .rc-category-name {
        font-size: var(--fs-xl);
        font-weight: 600;
        margin: 0;
        color: var(--bs-body-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rc-category-description {
        display: block;
        font-size: var(--fs-body);
        color: var(--bs-secondary-color);
        margin-top: 0.25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rc-category-stats {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem 1rem;
        background: rgba(var(--bs-success-rgb), 0.1);
        border-radius: var(--radius-lg);
        min-width: 80px;
    }

    .rc-recipe-count {
        font-size: var(--fs-2xl);
        font-weight: 700;
        color: var(--bs-success);
        line-height: 1;
    }

    .rc-recipe-count.rc-empty {
        color: var(--bs-secondary);
    }

    .rc-recipe-label {
        font-size: var(--fs-sm);
        color: var(--bs-secondary-color);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .rc-category-chevron {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-full);
        background: rgba(var(--bs-secondary-rgb), 0.1);
        transition: transform 0.3s ease, background 0.2s ease;
    }

    .rc-category-chevron i {
        font-size: var(--fs-body);
        color: var(--bs-secondary-color);
        transition: transform 0.3s ease;
    }

    .rc-category-chevron.rc-expanded {
        background: rgba(var(--bs-primary-rgb), 0.1);
    }

    .rc-category-chevron.rc-expanded i {
        transform: rotate(180deg);
        color: var(--bs-primary);
    }

    .rc-category-actions {
        display: flex;
        gap: 0.5rem;
        padding: 0 1rem;
        border-left: 1px solid rgba(var(--bs-secondary-rgb), 0.2);
        margin-left: 0;
    }

    .rc-category-actions .btn {
        padding: 0.5rem 0.75rem;
    }

    .category-recipes-container {
        background: var(--bs-body-bg);
        border-top: 1px solid rgba(var(--bs-secondary-rgb), 0.1);
    }

    /* Dark mode adjustments */
    [data-bs-theme="dark"] .rc-category-section {
        background: var(--glass-white-3);
        box-shadow: 0 4px 12px var(--glass-black-20);
    }

    [data-bs-theme="dark"] .rc-category-section:hover {
        box-shadow: 0 6px 20px var(--glass-black-30);
    }

    [data-bs-theme="dark"] .rc-category-section.rc-all-recipes {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
        border-color: rgba(99, 102, 241, 0.3);
    }

    [data-bs-theme="dark"] .rc-category-toggle:hover {
        background: var(--glass-white-5);
    }

    [data-bs-theme="dark"] .rc-category-stats {
        background: rgba(var(--bs-success-rgb), 0.15);
    }

    [data-bs-theme="dark"] .rc-category-chevron {
        background: var(--glass-white-10);
    }

    [data-bs-theme="dark"] .rc-category-actions {
        border-left-color: var(--glass-white-10);
    }

    [data-bs-theme="dark"] .category-recipes-container {
        border-top-color: var(--glass-white-10);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .rc-category-toggle {
            flex-wrap: wrap;
            gap: 0.75rem;
            padding: 1rem;
        }

        .rc-category-icon {
            width: 48px;
            height: 48px;
        }

        .rc-category-icon i {
            font-size: var(--fs-xl);
        }

        .rc-category-info {
            flex: 1 1 calc(100% - 140px);
            order: 1;
        }

        .rc-category-name {
            font-size: var(--fs-lg);
        }

        .rc-category-stats {
            order: 2;
            min-width: 70px;
            padding: 0.375rem 0.75rem;
        }

        .rc-recipe-count {
            font-size: var(--fs-xl);
        }

        .rc-category-chevron {
            order: 3;
            width: 28px;
            height: 28px;
        }

        .rc-category-actions {
            padding: 0.75rem 1rem;
            border-left: none;
            border-top: 1px solid rgba(var(--bs-secondary-rgb), 0.2);
            width: 100%;
            justify-content: flex-end;
        }
    }

/* ═══ Source: Areas/Kitchen/Views/Recipes/Create.cshtml ═══ */
.nutrition-circle {
        background-color: #f8f9fa;
        border-radius: var(--radius-full);
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 8px auto;
        font-weight: bold;
        box-shadow: 0 2px 5px var(--glass-black-10);
    }

    #instructionsEditor {
        resize: vertical;
    }

    .image-preview {
        background-color: transparent;
        border-radius: var(--radius-md);
        border: 1px dashed #ced4da;
        padding: 10px;
        min-height: 240px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mobile responsiveness improvements */
    @media(max-width: 768px) {
        .nutrition-circle {
            width: 50px;
            height: 50px;
            font-size: var(--fs-body-lg);
        }
    }

/* ═══ Source: Areas/Kitchen/Views/Recipes/Edit.cshtml ═══ */
.nutrition-circle {
            background-color: #f8f9fa;
            border-radius: var(--radius-full);
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            font-weight: bold;
            font-size: var(--fs-lg);
            box-shadow: 0 2px 5px var(--glass-black-10);
        }
        
        #instructionsEditor {
            resize: vertical;
        }
        
        .image-preview {
            background-color: transparent;
            border-radius: var(--radius-md);
            border: 1px dashed #ced4da;
            padding: 10px;
            min-height: 240px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .ingredients-list {
            overflow-y: auto;
        }
        
        .ingredient-item {
            transition: all 0.2s ease;
            border-left: 3px solid transparent;
        }
        
        .ingredient-item:hover {
            border-left: 3px solid #0d6efd;
            background-color: #828282;
        }
        
        .empty-state {
            padding: 2rem 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        /* Mobile responsiveness improvements */
        @media (max-width: 768px) {
            .nutrition-circle {
                width: 60px;
                height: 60px;
                font-size: var(--fs-body-lg);
            }
            
            .ingredient-actions {
                margin-left: 10px;
            }
        }

/* ═══ Source: Areas/Kitchen/Views/Recipes/_AddIngredient.cshtml ═══ */
/* Make the nutrition panels more compact */
    #ingredientNutritionInfo .card-body,
    #calculatedNutrition .card-body {
        padding: 0.5rem;
    }

    /* Improve nutrition panels appearance */
    #ingredientNutritionInfo p,
    #calculatedNutrition p {
        margin-bottom: 0.5rem;
        font-size: var(--fs-body-lg);
    }

    /* Sticky footer for modal to ensure save button is always visible */
    .modal-footer {
        box-shadow: 0 -2px 10px var(--glass-black-10);
    }

    /* Accordion style for nutrition sections to save space */
    /* Loading indicator for AJAX calls */
    .spinner-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(140, 140, 140, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1060;
    }

/* ═══ Source: Areas/Kitchen/Views/Snacks/Create.cshtml ═══ */
.nutrition-circle {
        background-color: #f8f9fa;
        border-radius: var(--radius-full);
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 8px auto;
        font-weight: bold;
        box-shadow: 0 2px 5px var(--glass-black-10);
    }

    #instructionsEditor {
        resize: vertical;
    }

    .image-preview {
        background-color: transparent;
        border-radius: var(--radius-md);
        border: 1px dashed #ced4da;
        padding: 10px;
        min-height: 240px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mobile responsiveness improvements */
    @media(max-width: 768px) {
        .nutrition-circle {
            width: 50px;
            height: 50px;
            font-size: var(--fs-body-lg);
        }
    }

/* ═══ Source: Areas/Kitchen/Views/Snacks/Edit.cshtml ═══ */
.nutrition-circle {
            background-color: #f8f9fa;
            border-radius: var(--radius-full);
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            font-weight: bold;
            font-size: var(--fs-lg);
            box-shadow: 0 2px 5px var(--glass-black-10);
        }
        
        #instructionsEditor {
            resize: vertical;
        }
        
        .image-preview {
            background-color: transparent;
            border-radius: var(--radius-md);
            border: 1px dashed #ced4da;
            padding: 10px;
            min-height: 240px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .ingredients-list {
            overflow-y: auto;
        }
        
        .ingredient-item {
            transition: all 0.2s ease;
            border-left: 3px solid transparent;
        }
        
        .ingredient-item:hover {
            border-left: 3px solid #0d6efd;
            background-color: #828282;
        }
        
        .empty-state {
            padding: 2rem 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        /* Mobile responsiveness improvements */
        @media (max-width: 768px) {
            .nutrition-circle {
                width: 60px;
                height: 60px;
                font-size: var(--fs-body-lg);
            }
            
            .ingredient-actions {
                margin-left: 10px;
            }
        }

/* ═══ Source: Areas/Kitchen/Views/Snacks/_AddIngredient.cshtml ═══ */
/* Make the nutrition panels more compact */
    #ingredientNutritionInfo .card-body,
    #calculatedNutrition .card-body {
        padding: 0.5rem;
    }

    /* Improve nutrition panels appearance */
    #ingredientNutritionInfo p,
    #calculatedNutrition p {
        margin-bottom: 0.5rem;
        font-size: var(--fs-body-lg);
    }

    /* Sticky footer for modal to ensure save button is always visible */
    .modal-footer {
        box-shadow: 0 -2px 10px var(--glass-black-10);
    }

    /* Accordion style for nutrition sections to save space */
    /* Loading indicator for AJAX calls */
    .spinner-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(140, 140, 140, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1060;
    }

/* ═══════════════════════════════════════════════════ */
/* Edit Mode Ingredient Cards (Recipe/Snack/Drink)    */
/* ═══════════════════════════════════════════════════ */

.ingredients-edit-list {
    padding: 4px;
}

.ingredient-edit-card {
    border-radius: var(--radius-md);
    background: rgba(var(--bs-primary-rgb), 0.03);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.06);
    padding: 12px 14px;
    margin-bottom: 6px;
    transition: all 0.25s ease;
    position: relative;
}

.ingredient-edit-card:hover {
    background: rgba(var(--bs-primary-rgb), 0.06);
    border-color: rgba(var(--bs-primary-rgb), 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--glass-black-5);
}

.ingredient-edit-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ingredient-edit-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ingredient-edit-order {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-primary);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ingredient-edit-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: rgba(var(--bs-primary-rgb), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary);
    transition: transform 0.2s ease;
}

.ingredient-edit-icon i {
    font-size: 16px;
}

.ingredient-edit-card:hover .ingredient-edit-icon {
    transform: scale(1.1);
}

.ingredient-edit-body {
    flex: 1;
    min-width: 0;
}

.ingredient-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.ingredient-edit-name-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.ingredient-edit-name {
    font-weight: 600;
    font-size: var(--fs-md);
    color: var(--bs-body-color);
}

.ingredient-edit-optional {
    display: inline-block;
    font-size: 10px;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
}

.ingredient-edit-qty {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--fs-body-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

.ingredient-edit-meta {
    font-size: var(--fs-body-sm);
    color: var(--bs-secondary-color);
    margin-top: 2px;
}

.ingredient-edit-meta i {
    font-size: 13px;
    vertical-align: middle;
}

.ingredient-edit-notes {
    font-style: italic;
}

.ingredient-edit-macros {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.macro-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.macro-pill i {
    font-size: 12px;
}

.macro-cal {
    background: var(--bg-calories);
    color: var(--bg-calories-text);
}

.macro-protein {
    background: var(--bg-protein);
    color: var(--bg-protein-text);
}

.macro-carbs {
    background: var(--bg-carbs);
    color: var(--bg-carbs-text);
}

.macro-fat {
    background: var(--bg-fat);
    color: var(--bg-fat-text);
}

.ingredient-edit-actions {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}

.ingredient-edit-actions .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.ingredient-edit-links {
    margin-top: 6px;
}

.ingredient-edit-links .btn {
    font-size: var(--fs-body-sm);
    padding: 2px 8px;
}

/* Edit Empty State */
.ingredients-edit-empty {
    text-align: center;
    padding: 30px 20px;
}

.ingredients-edit-empty i {
    font-size: 48px;
    color: var(--bs-secondary-color);
    opacity: 0.4;
    display: block;
    margin-bottom: 12px;
}

.ingredients-edit-empty h5 {
    font-weight: 600;
    margin-bottom: 8px;
}

.ingredients-edit-empty p {
    color: var(--bs-secondary-color);
    margin-bottom: 16px;
}

/* Dark Theme - Edit Ingredient Cards */
[data-bs-theme="dark"] .ingredient-edit-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .ingredient-edit-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .ingredient-edit-order {
    background: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .ingredient-edit-icon {
    background: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .ingredient-edit-qty {
    background: rgba(255, 255, 255, 0.1);
}

/* Responsive - Edit Ingredient Cards */
@media (max-width: 768px) {
    .ingredient-edit-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ingredient-edit-qty {
        align-self: flex-start;
    }
}

@media (max-width: 576px) {
    .ingredient-edit-card {
        padding: 10px;
    }

    .ingredient-edit-main {
        gap: 8px;
    }

    .ingredient-edit-visual {
        gap: 3px;
    }

    .ingredient-edit-order {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .ingredient-edit-icon {
        width: 30px;
        height: 30px;
    }

    .ingredient-edit-icon i {
        font-size: 14px;
    }

    .ingredient-edit-name {
        font-size: var(--fs-body);
    }

    .ingredient-edit-actions .btn {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .macro-pill {
        font-size: 10px;
        padding: 1px 5px;
    }

    .macro-pill i {
        font-size: 10px;
    }

    /* Details View Ingredient Items - Mobile */
    .recipe-details-view .ingredient-item,
    .snack-details-view .ingredient-item,
    .drink-details-view .ingredient-item {
        padding: 10px;
        margin-bottom: 6px;
    }

    .recipe-details-view .ingredient-item .d-flex.justify-content-between,
    .snack-details-view .ingredient-item .d-flex.justify-content-between,
    .drink-details-view .ingredient-item .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .recipe-details-view .ingredient-quantity,
    .snack-details-view .ingredient-quantity,
    .drink-details-view .ingredient-quantity {
        margin-left: 0;
        margin-top: 4px;
    }

    .recipe-details-view .ingredients-container,
    .snack-details-view .ingredients-container,
    .drink-details-view .ingredients-container {
        padding: 12px;
    }
}

/* =============================================
   Ingredient Detail Cards (Details Views)
   ============================================= */

.ingredient-detail-card {
    border-radius: var(--radius-md);
    background: rgba(var(--bs-primary-rgb), 0.03);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.06);
    padding: 12px 14px;
    margin-bottom: 6px;
    transition: all 0.25s ease;
    position: relative;
}

.ingredient-detail-card:hover {
    background: rgba(var(--bs-primary-rgb), 0.06);
    border-color: rgba(var(--bs-primary-rgb), 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--glass-black-5);
}

.ingredient-detail-card.checked {
    opacity: 0.5;
}

.ingredient-detail-card.checked .ingredient-detail-name {
    text-decoration: line-through;
}

.ingredient-detail-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ingredient-detail-check {
    flex-shrink: 0;
    padding-top: 2px;
}

.ingredient-detail-check .form-check-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.ingredient-detail-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: rgba(var(--bs-primary-rgb), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.ingredient-detail-icon i {
    font-size: 16px;
}

.ingredient-detail-card:hover .ingredient-detail-icon {
    transform: scale(1.1);
}

.ingredient-detail-body {
    flex: 1;
    min-width: 0;
}

.ingredient-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.ingredient-detail-name-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.ingredient-detail-name {
    font-weight: 600;
    font-size: var(--fs-md);
    color: var(--bs-body-color);
    transition: text-decoration 0.2s ease;
}

.ingredient-detail-optional {
    display: inline-block;
    font-size: 10px;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
}

.ingredient-detail-qty {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--fs-body-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

.ingredient-detail-meta {
    font-size: var(--fs-body-sm);
    color: var(--bs-secondary-color);
    margin-top: 2px;
}

.ingredient-detail-meta i {
    font-size: 13px;
    vertical-align: middle;
}

.ingredient-detail-notes {
    font-style: italic;
}

.ingredient-detail-macros {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}


/* Dark Theme - Detail Ingredient Cards */
[data-bs-theme="dark"] .ingredient-detail-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .ingredient-detail-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .ingredient-detail-icon {
    background: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .ingredient-detail-qty {
    background: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .btn-details {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Responsive - Detail Ingredient Cards */
@media (max-width: 768px) {
    .ingredient-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ingredient-detail-qty {
        align-self: flex-start;
    }
}

@media (max-width: 576px) {
    .ingredient-detail-card {
        padding: 10px;
    }

    .ingredient-detail-main {
        gap: 8px;
    }

    .ingredient-detail-icon {
        width: 30px;
        height: 30px;
    }

    .ingredient-detail-icon i {
        font-size: 14px;
    }

    .ingredient-detail-name {
        font-size: var(--fs-body);
    }

    .ingredient-detail-macros {
        gap: 3px;
    }
}

/* ===== Recipe Chains ===== */

/* -- Card images (Index / Browse) -- */
.recipe-chain-card-img {
    height: 200px;
    object-fit: cover;
}

.recipe-chain-card-placeholder {
    height: 200px;
}

.recipe-chain-desc-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -- Detail header -- */
.recipe-chain-detail-img {
    height: 350px;
    object-fit: cover;
    border-radius: 0.5rem 0 0 0.5rem;
}

.recipe-chain-detail-placeholder {
    height: 350px;
    border-radius: 0.5rem 0 0 0.5rem;
}

.recipe-chain-base-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.recipe-chain-step-img {
    width: 70px;
    height: 70px;
    object-fit: cover;
}

.recipe-chain-placeholder-icon {
    font-size: 80px;
}

/* -- Stat boxes (Details page) -- */
.chain-stat-box {
    text-align: center;
    min-width: 80px;
}

.chain-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
}

/* -- Detail timeline -- */
.chain-detail-timeline {
    position: relative;
    padding-left: 40px;
}

.timeline-item {
    position: relative;
}

.timeline-marker {
    position: absolute;
    left: -40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-top: 14px;
    z-index: 1;
    flex-shrink: 0;
    border: 3px solid var(--bs-body-bg);
    box-shadow: 0 0 0 2px var(--bs-border-color);
}

.timeline-base .timeline-dot {
    width: 22px;
    height: 22px;
    margin-top: 12px;
}

.timeline-line {
    width: 2px;
    flex-grow: 1;
    background: var(--bs-border-color);
    min-height: 20px;
}

.timeline-item:last-child .timeline-line {
    display: none;
}

.timeline-content {
    padding-bottom: 0;
}

/* -- Edit page: inline timeline (steps list) -- */
.chain-timeline {
    position: relative;
    padding-left: 30px;
}

.chain-step-item {
    position: relative;
    display: flex;
}

.chain-step-marker {
    position: absolute;
    left: -30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chain-step-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-top: 18px;
    z-index: 1;
    flex-shrink: 0;
}

.chain-step-line {
    width: 2px;
    flex-grow: 1;
    background: var(--bs-border-color);
}

.chain-step-item:last-child .chain-step-line {
    display: none;
}

.chain-step-content {
    flex-grow: 1;
    min-width: 0;
}

/* -- Edit page: step card images -- */
.chain-step-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.chain-step-thumb-placeholder {
    width: 50px;
    height: 50px;
}

/* -- Edit page: base recipe preview -- */
.chain-base-preview-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

/* -- Edit page: chain image preview -- */
.chain-image-preview {
    max-height: 100px;
}

/* -- Delete page: preview image -- */
.chain-delete-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.chain-delete-placeholder {
    width: 80px;
    height: 80px;
}

/* -- Notes clamp in step list -- */
.chain-step-notes-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -- Responsive -- */
@media (max-width: 768px) {
    .recipe-chain-detail-img,
    .recipe-chain-detail-placeholder {
        height: 220px;
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .chain-detail-timeline {
        padding-left: 25px;
    }

    .timeline-marker {
        left: -25px;
    }

    .timeline-dot {
        width: 14px;
        height: 14px;
    }

    .timeline-base .timeline-dot {
        width: 16px;
        height: 16px;
    }

    .chain-stat-icon {
        width: 44px;
        height: 44px;
    }

    .recipe-chain-base-img {
        width: 60px;
        height: 60px;
    }

    .recipe-chain-step-img {
        width: 56px;
        height: 56px;
    }

    .recipe-chain-card-img,
    .recipe-chain-card-placeholder {
        height: 160px;
    }
}

/* ========================================================================
   Similar Items Modal (Recipes / Snacks) — compact header + tabs + cards
   ======================================================================== */
.similar-modal {
    display: flex;
    flex-direction: column;
}

.similar-modal-summary {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.similar-modal-thumb {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bs-body-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.similar-modal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.similar-modal .nav-tabs {
    border-bottom: 1px solid var(--bs-border-color);
    margin-top: 0;
}

.similar-modal .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--bs-secondary-color);
    font-weight: 500;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 0;
    background: transparent;
}

.similar-modal .nav-tabs .nav-link:hover {
    color: var(--bs-primary);
    background: var(--bs-tertiary-bg);
}

.similar-modal .nav-tabs .nav-link.active {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
    background: transparent;
}

.similar-modal-tabs {
    max-height: 280px;
    overflow-y: auto;
}

.similar-modal-tabs .list-group-item {
    border-color: var(--bs-border-color-translucent);
}

.similar-modal-similar {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 0.75rem;
}

/* Compact modern similar card */
.similar-card {
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.similar-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    border-color: var(--bs-primary);
}

.similar-card-img {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bs-tertiary-bg);
}

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

.similar-card-type-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.similar-card-body {
    padding: 0.6rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-grow: 1;
}

.similar-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--bs-body-color);
}

.similar-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}

.similar-card-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: auto;
}

.similar-reason-badge {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .similar-modal-thumb {
        width: 64px;
        height: 64px;
    }

    .similar-modal-tabs {
        max-height: 220px;
    }

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