/* Balanced Layout CSS - Minimal Overrides for Size Balancing */

/* Component sizing constraints for visual balance */
.calendar {
    width: 100%;
    max-width: 400px;
    min-width: 350px;
}

.time-slots-container {
    width: 100%;
    max-width: 500px;
    min-width: 450px;
}

/* Responsive adjustments for better balance */
@media (min-width: 1200px) {
    .calendar {
        max-width: 420px;
    }
    .time-slots-container {
        max-width: 550px;
    }
}

@media (min-width: 1400px) {
    .calendar {
        max-width: 450px;
    }
    .time-slots-container {
        max-width: 600px;
    }
}

/* Ensure components don't get too small on mobile */
@media (max-width: 576px) {
    .calendar,
    .time-slots-container {
        max-width: 100%;
        min-width: 300px;
    }
}

/* Remove ALL hover effects from unavailable dates */
.calendar-days div.unavailable:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: #dc3545 !important; /* Keep original unavailable color */
    cursor: default !important;
}

.calendar-days div.unavailable.curr-date:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: #dc3545 !important; /* Keep original unavailable color */
    cursor: default !important;
}