/* Common styles for all calendars */
.ui-datepicker {
    font-size: 14px;
    width: 100%;
}

.ui-datepicker-header {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #333;
}

.ui-datepicker-calendar {
    background-color: #fff;
    border: 1px solid #ddd;
}

.ui-datepicker-calendar td {
    padding: 2px;
}

.ui-datepicker-calendar .ui-state-default {
    background-color: #e6ffe6; /* Light green for available dates */
    border: 1px solid #ddd;
    color: #333;
    text-align: center;
}

.ui-datepicker-calendar .booked .ui-state-default {
    background-color: #cc0000; /* Light red for booked dates */
    color: #fff;
}

/* Admin and logged-in user calendar specific styles */
#admin-booking-calendar .ui-datepicker,
#logged-in-booking-calendar .ui-datepicker {
    width: 300px;
}

/* Visitor calendar specific styles */
#visitor-booking-calendar .ui-datepicker {
    width: 100%;
}

#visitor-booking-calendar .ui-datepicker-group {
    width: 33%;
    float: left;
}

#visitor-booking-calendar .ui-datepicker-row-break {
    clear: both;
}

#visitor-booking-calendar .ui-state-disabled {
    opacity: 1;
}

#visitor-booking-calendar .ui-state-disabled .ui-state-default {
    background-color: #e6ffe6; /* Light green for available dates */
    color: #333;
}

#visitor-booking-calendar .ui-state-disabled.booked .ui-state-default {
    background-color: #ffcccc; /* Light red for booked dates */
    color: #cc0000;
}