/* Hide the input box */
        #datePicker {
            display: none;
            margin : auto;
        }

        /* Custom class to highlight the selected week in blue */
        .week-highlight {
            background-color: #2196f3; /* Blue background for highlighting */
            color: white; /* White text for better contrast */
            border-radius: 50%; /* Circle shape */
        }

        /* Custom class for expensive weeks */
        .expensive-week {
            background-color: rgba(255, 105, 97, 0.3); /* A transparent red color for expensiveness */
            border-radius: 50%; /* Circle shape */
            color: black; /* Darker text for better readability */
        }

        /* Override expensive-week when selected */
        .week-highlight.expensive-week {
            background-color: #2196f3; /* Blue background for selected expensive week */
            color: white; /* White text for contrast */
        }
        

/* Box for displaying selected days and price */
.selection-box {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit; /* Use the same font as the calendar */
    display: flex;
    flex-direction: column; /* Allow elements to stack vertically */
    justify-content: space-between; /* Space between the date range and price */
    align-items: flex-start; /* Align items to the left */
    width: 100%; /* Full width */
    max-width: 618px; /* Maximum width to match calendar */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    transition: max-height 0.3s ease; /* Smooth transition for expanding */
    overflow: hidden;
    max-height: 50px; /* Initial height */
}

.expanded {
    max-height: 150px; /* Expanded height */
}

.selection-box .date-range {
    flex: 1; /* Allow the date range to take up available space */
}

.selection-box .price {
    margin-left: auto; /* Push the price to the right */
}

/* Style for the name input and submit button */
.name-input,
.submit-btn {
    margin-top: 10px;
    display: none; /* Hide initially */
    width: 100%; /* Full width */
    box-sizing: border-box; /* Ensure padding is included in width */
}

.submit-btn {
    background-color: #2196f3;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
}




        .legend-item {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }

        .legend-circle {
            width: 25px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            border: 1px solid black; /* 1px border */
            margin-right: 10px;
            font-weight: bold;
        }

        .legend-circle.expensive {
            background-color: rgba(255, 105, 97, 0.3); /* Match expensive week color */
        }

        .legend-circle.regular {
            background-color: white;
        }