.elementor-6772 .elementor-element.elementor-element-9fac072{--spacer-size:184px;}.elementor-6772 .elementor-element.elementor-element-5fa4376{text-align:center;}.elementor-6772 .elementor-element.elementor-element-f6cefce{text-align:center;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-0901d03 *//* Container for the entire calendar */
.meal-calendar-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    font-family: sans-serif;
}

/* Header row (Sun - Sat) */
.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    background-color: #0073aa; /* Change to your brand color */
    color: white;
    padding: 10px 0;
    border-radius: 5px 5px 0 0;
}

/* The 7-column grid */
.meal-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px; /* Creates the grid lines */
    background-color: #ddd; /* Color of the grid lines */
    border: 1px solid #ddd;
}

/* Individual day boxes */
.calendar-day-box {
    background: #fff;
    min-height: 150px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

/* Style for "empty" days (month offsets) */
.calendar-day-box.empty {
    background-color: #f9f9f9;
}

/* The date number in the corner */
.day-number {
    font-size: 1.1em;
    font-weight: bold;
    color: #555;
    margin-bottom: 10px;
}

/* Individual meal items within a day */
.meal-item {
    background: #f1f1f1;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    font-size: 0.9em;
    border-left: 4px solid #0073aa; /* Visual cue for meals */
}

.meal-item p {
    margin: 0 0 5px 0;
    line-height: 1.2;
    font-weight: 600;
}

/* Making the WooCommerce button smaller to fit the calendar */
.meal-item .button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 5px 2px !important;
    font-size: 0.8em !important;
    text-transform: uppercase;
}

/* Responsive adjustment for tablets/phones */
@media (max-width: 768px) {
    .meal-calendar-grid, .calendar-header {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on tablets */
    }
    .calendar-header div:nth-child(n+4) {
        display: none; /* Hide weekday labels on small screens to save space */
    }
}

/* Styling for Meal 1 and Meal 2 */
.meal-item.is-meal {
    border-left: 4px solid #0073aa;
    background: #f1f8ff;
}

/* Specific styling for Breakfast */
.meal-item.is-breakfast {
    border-left: 4px solid #ffcc00; /* Yellow for morning/breakfast */
    background: #fffdf2;
}

/* Small label above the button */
.meal-label {
    display: block;
    font-size: 0.7em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 4px;
    font-weight: bold;
}

@media print {
    /* Hide everything except the calendar grid */
    header, footer, .sidebar, .nav, .button, .clear-calendar-btn, .print-calendar-btn {
        display: none !important;
    }
    
    .meal-calendar-wrapper {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .meal-calendar-grid {
        background-color: transparent;
        border: 1px solid #000;
    }

    .calendar-day-box {
        border: 1px solid #ccc;
        min-height: 80px; /* Shorter for paper */
    }

    .is-meal, .is-breakfast {
        background: transparent !important;
        border: none !important;
        padding: 2px 0;
    }
}/* End custom CSS */