<style>
.days-selection {
    padding: 15px 0;
    background: #fff;
    margin-bottom: 1rem;
    width: 100%;
    position: relative;
}

.owl-carousel.days-carousel {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0 40px; /* Add padding for nav arrows */
}

.days-carousel .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    left: 0;
    right: 0;
    margin: 0;
}

.days-carousel .owl-nav button.owl-prev {
    position: absolute;
    left: 0;
}

.days-carousel .owl-nav button.owl-next {
    position: absolute;
    right: 0;
}

.days-carousel .owl-nav button {
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    background: #f0f0f0 !important;
    color: #666 !important;
    margin: 0;
}

.days-carousel .owl-nav button:hover {
    background: #e0e0e0 !important;
}

.day-item {
    text-align: center;
    padding: 10px;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s;
    background: #f8f9fa;
    margin: 0 5px;
    max-width: 100px; /* Add max-width */
}

.day-item.active {
    background: #ababab;
    color: #ffffff;
}

.day-item .day {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.day-item .date {
    display: block;
    font-size: 18px;
    font-weight: 600;
}

/* Ensure the carousel container doesn't overflow */
.card-header {
    overflow: hidden;
}
.day-item.today {
    position: relative;
    margin-top: 15px; /* Add space for the arrow */
}

.day-item.today:after {
    content: '';
    position: absolute;
    top: -15px; /* Position above the day item */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f15656; /* Use your primary color */
    z-index: 1; /* Ensure arrow is visible */
}

/* Make sure the carousel has enough height */
.days-selection {
    padding: 15px 0;
    margin-top: 10px; /* Add space at the top */
}

.owl-carousel.days-carousel {
    padding-top: 5px; /* Add some padding at the top */
}

.owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.owl-prev {
    left: -25px;
}

.owl-next {
    right: -25px;
}

/* Add spacing between carousel items */
.owl-carousel .owl-item {
    padding: 0 5px;
}

/* Make the "Mark as Done" button smaller in width */
.mark-as-done {
    width: auto !important;
    min-width: 120px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
}

/* Make meal descriptions respect line breaks */
.food-default-flex p {
    white-space: pre-line !important;
}
</style>