/* Ingredients — fully visible, no scroll constraint */
.scroll-fade-wrapper {
    position: relative;
}

.ingredients-scroll {
    overflow: visible;
}

/* Nutrition stats scroll in prepare modal */
.nutrition-stats-scroll {
    max-height: 220px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.06);
}

.nutrition-stats-scroll::-webkit-scrollbar {
    width: 4px;
}

.nutrition-stats-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.nutrition-stats-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 10px;
}

/* Stat pill styling */
.stat-pill {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    transition: transform 0.2s;
}

.stat-pill:hover {
    transform: translateY(-2px);
    background-color: rgba(255, 255, 255, 0.08);
}

/* Meal-specific styling */
.meal-card {
    margin-bottom: 1.5rem;
    border-radius: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 40px rgba(5, 5, 6, 0.22);
}

.meal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 30px 48px rgba(5, 5, 6, 0.28);
}

/* Different colors for each meal */
.meal-breakfast {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, rgba(12, 13, 14, 0.96) 100%);
    border-left: 4px solid #ffc107;
    border-color: rgba(255, 193, 7, 0.24);
}

.meal-lunch {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.14) 0%, rgba(12, 13, 14, 0.96) 100%);
    border-left: 4px solid #28a745;
    border-color: rgba(40, 167, 69, 0.24);
}

.meal-dinner {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.14) 0%, rgba(12, 13, 14, 0.96) 100%);
    border-left: 4px solid #007bff;
    border-color: rgba(0, 123, 255, 0.24);
}

.meal-snacks {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.14) 0%, rgba(12, 13, 14, 0.96) 100%);
    border-left: 4px solid #e91e63;
    border-color: rgba(233, 30, 99, 0.24);
}

/* Add some spacing between meals */
.meal-separator {
    margin-bottom: 2rem;
}

.nutrition-meal-layout {
    gap: 1rem;
}

.nutrition-meal-summary,
.nutrition-meal-stats,
.nutrition-meal-actions,
.nutrition-meal-primary-actions {
    min-width: 0;
}

.nutrition-meal-stat-list {
    margin-bottom: 0;
    padding-right: 0 !important;
}

.nutrition-meal-actions {
    align-items: flex-start;
    flex-wrap: wrap;
}

.nutrition-meal-primary-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.nutrition-meal-feedback {
    flex-shrink: 0;
}

@media only screen and (min-width: 992px) {
    .nutrition-meal-layout {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        align-items: center;
    }

    .nutrition-meal-summary {
        width: auto !important;
        max-width: 100%;
    }

    .nutrition-meal-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.75rem;
        margin-top: 0 !important;
        margin-left: auto;
    }

    .nutrition-meal-primary-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .nutrition-meal-primary-actions .btn {
        width: 100%;
        white-space: nowrap;
    }
}

/* ===============================================
   MODAL FIX - Prevents modals from being trapped inside meal cards
   =============================================== */

/* Disable meal card transforms when modal is open */
body.modal-open .meal-card {
    transform: none !important;
}

body.modal-open .meal-card:hover {
    transform: none !important;
}

/* Ensure modals appear at the correct viewport level */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 3000 !important;
    width: 100% !important;
    height: 100% !important;
}

.modal-dialog {
    position: relative !important;
    margin: auto !important;
    pointer-events: auto !important;
    z-index: 3010 !important;
    filter: none !important;
    backdrop-filter: none !important;
}

.modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 2990 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* Ensure modal content is properly positioned */
.modal-content {
    position: relative !important;
    background: linear-gradient(180deg, rgba(20, 21, 24, 0.98), rgba(15, 16, 18, 0.96)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 20px 50px rgba(5, 5, 6, 0.35) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* ===============================================
   DATE INPUT FIELD STYLING - Enhanced visibility
   =============================================== */

#nutrition-datepicker {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 12px 20px;
    border: 1px solid rgba(var(--nf-primary-rgb), 0.45);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(22, 23, 26, 0.94) 0%, rgba(14, 15, 17, 0.9) 100%);
    color: #ecf2ff;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 12px 26px rgba(5, 5, 6, 0.22);
    max-width: 300px;
    margin: 0 auto;
    display: block;
}

#nutrition-datepicker:hover {
    border-color: rgba(var(--nf-primary-rgb), 0.7);
    box-shadow: 0 18px 30px rgba(5, 5, 6, 0.28);
    transform: translateY(-1px);
}

#nutrition-datepicker:focus {
    outline: none;
    border-color: rgba(var(--nf-primary-rgb), 0.7);
    box-shadow: 0 0 0 4px rgba(var(--nf-primary-rgb), 0.12);
}

/* ===============================================
   DATEPICKER CALENDAR - Modern redesign
   =============================================== */

/* Calendar container */
.picker {
    border-radius: 24px !important;
    box-shadow: 0 28px 60px rgba(5, 5, 6, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: hidden;
    z-index: 1200 !important;
}

.picker--opened .picker__holder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.2rem !important;
    background: rgba(6, 7, 8, 0.72) !important;
}

.picker--opened .picker__frame {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 auto !important;
    opacity: 1 !important;
}

/* Calendar header */
.picker__header {
    background: linear-gradient(135deg, rgba(var(--nf-primary-rgb), 0.92) 0%, rgba(var(--nf-secondary-rgb), 0.92) 100%) !important;
    padding: 20px 15px !important;
    border-bottom: none !important;
}

/* Month/Year nav wrapper - better alignment */
.picker__nav--prev,
.picker__nav--next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background-color: rgba(6, 7, 8, 0.18) !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.picker__nav--prev {
    left: 10px !important;
}

.picker__nav--next {
    right: 10px !important;
}

.picker__nav--prev:hover,
.picker__nav--next:hover {
    background-color: rgba(6, 7, 8, 0.28) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* Month and year selectors - fix cropping and sizing */
.picker__select--month,
.picker__select--year {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(10, 11, 13, 0.92) !important;
    color: #ecf2ff !important;
    transition: all 0.2s ease !important;
    height: auto !important;
    min-height: 36px !important;
    line-height: normal !important;
}

.picker__select--month {
    max-width: 110px !important;
    margin-right: 8px !important;
}

.picker__select--year {
    max-width: 80px !important;
}

.picker__select--month:hover,
.picker__select--year:hover {
    background-color: rgba(15, 16, 18, 0.98) !important;
    box-shadow: 0 2px 8px rgba(5, 5, 6, 0.22) !important;
}

/* Weekday headers */
.picker__weekday {
    color: #9aabaa !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    padding: 12px 0 !important;
}

/* Calendar table */
.picker__table {
    margin: 15px 0 !important;
}

/* Day cells - base styling */
.picker__day {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 50% !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    margin: 2px !important;
}

/* Available dates with light green background */
.picker__day--available {
    background-color: rgba(22, 23, 26, 0.88) !important;
    color: #ecf2ff !important;
    cursor: pointer !important;
    position: relative;
}

.picker__day--available::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: var(--nf-primary);
    border-radius: 50%;
}

.picker__day--available:hover {
    background-color: rgba(var(--nf-secondary-rgb), 0.24) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 2px 8px rgba(var(--nf-secondary-rgb), 0.3) !important;
}

/* Selected/current day with darker green */
.picker__day--selected,
.picker__day--selected:hover {
    background: linear-gradient(135deg, var(--nf-primary), var(--nf-secondary)) !important;
    color: #060809 !important;
    font-weight: 700 !important;
    transform: scale(1.15) !important;
    box-shadow: 0 4px 12px rgba(var(--nf-primary-rgb), 0.32) !important;
}

.picker__day--selected::after {
    display: none;
}

/* Today's date (if not selected) */
.picker__day--today {
    color: var(--nf-primary) !important;
    font-weight: 600 !important;
    border: 2px solid var(--nf-primary) !important;
}

/* Disabled dates remain grayed out */
.picker__day--disabled {
    color: rgba(154, 171, 170, 0.42) !important;
    background-color: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.4 !important;
}

.picker__day--disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Footer button container - equal spacing */
.picker__footer {
    padding: 15px !important;
    background-color: rgba(10, 11, 13, 0.96) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
}

.picker__button--today,
.picker__button--close {
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    border: none !important;
    flex: 1 !important;
    max-width: 150px !important;
    min-width: 100px !important;
}

/* Hide the Clear button */
.picker__button--clear {
    display: none !important;
}

.picker__button--today {
    background: linear-gradient(135deg, var(--nf-primary), var(--nf-secondary)) !important;
    color: #060809 !important;
}

.picker__button--today:hover {
    background: linear-gradient(135deg, #78c9bc, #6ea69f) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(var(--nf-primary-rgb), 0.28) !important;
}

.picker__button--close {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ecf2ff !important;
}

.picker__button--close:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-1px) !important;
}

/* Like/Dislike button states */
.like-meal-btn,
.dislike-meal-btn {
    background: rgba(22, 23, 26, 0.92) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: all 0.3s ease !important;
}

.like-meal-btn {
    color: var(--nf-warning);
}

.dislike-meal-btn {
    color: var(--nf-danger);
}

.like-meal-btn:hover {
    background-color: rgba(var(--nf-warning-rgb), 0.18) !important;
    transform: scale(1.05);
}

.dislike-meal-btn:hover {
    background-color: rgba(var(--nf-danger-rgb), 0.18) !important;
    transform: scale(1.05);
}

/* Active/Clicked states - filled icons */
.like-meal-btn.active .like-icon,
.like-meal-btn.clicked .like-icon {
    fill: var(--nf-warning);
}

.dislike-meal-btn.active .dislike-icon,
.dislike-meal-btn.clicked .dislike-icon {
    fill: var(--nf-danger);
}

/* Darker background when clicked */
.like-meal-btn.clicked {
    background-color: rgba(var(--nf-warning-rgb), 0.22) !important;
}

.dislike-meal-btn.clicked {
    background-color: rgba(var(--nf-danger-rgb), 0.22) !important;
}

body.todays-nutrition-2026 .picker.picker--opened {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(1rem, 3vw, 2rem) !important;
    background: rgba(6, 7, 8, 0.72) !important;
}

body.todays-nutrition-2026 .picker.picker--opened .picker__holder {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    background: transparent !important;
    padding: 0 !important;
}

body.todays-nutrition-2026 .picker.picker--opened .picker__frame {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(100%, 37rem) !important;
    max-width: 37rem !important;
    margin: 0 !important;
    transform: none !important;
}

body.todays-nutrition-2026 .picker.picker--opened .picker__wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
}

@media (max-width: 767.98px) {
    body.todays-nutrition-2026 .picker.picker--opened {
        padding: 0.85rem !important;
    }

    body.todays-nutrition-2026 .picker.picker--opened .picker__frame {
        width: min(100%, 100vw - 1.7rem) !important;
    }
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}