.customer-availability-legend {
    display: flex;
    gap: 16px;
    margin: -4px 0 12px;
    font-size: 12px;
}

.customer-availability-legend span::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border-radius: 50%;
}

.customer-availability-legend .available::before { background: #27845f; }
.customer-availability-legend .few::before { background: #e49a21; }
.customer-availability-legend .none::before { background: #cc4050; }

.availability-mark {
    margin-top: 3px;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.availability-mark.available { background: #dcefe7; color: #176447; }
.availability-mark.few { background: #fff0c7; color: #8a5a00; }
.availability-mark.none { background: #f8d9dd; color: #a42638; }
.availability-mark.unavailable { background: transparent; color: #8b9490; }
.customer-calendar-day.before-booking { background: #fff; cursor: default; }
.customer-calendar-day.before-booking:hover { outline: 0; }
.customer-calendar-day { cursor: default; }
.customer-calendar-day:hover { outline: 0; }

@media (max-width: 680px) {
    .customer-availability-legend { gap: 10px; }
    .availability-mark { font-size: 9px; padding: 1px 2px; }
}