.date-availability {
    --mid-winter: #8bbbe4;
    --late-winter: #d0e3f4;
    --cherry: #fcecee;
    --spring: #94df88;
    --summer: #20980e;
    --fall: #d69c32;
}

.date-availability-year {
    display: flex;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.date-availability-month {
    flex: 1;
    text-align: center;
    color: white;
    border: 1px solid #ddd;
    padding: 20px 0;
    font-weight: 500;
}

@media (max-width: 600px) {
    .date-availability-month {
        font-size: 10px;
        padding: 10px 0;
    }
}

/* Tabs */
.date-availability-tabs {
    margin-top: 20px;
}

.date-availability-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
}

.date-availability-nav-item {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid var(--bs-primary, #007bff);
    border-bottom: none;
    margin-right: 5px;
    background: var(--bs-base-background, #f9fafb);
    border-radius: 5px 5px 0 0;
    transition: background 0.2s;
}

.date-availability-nav-item.active {
    background: #fff;
    border: 1px solid var(--bs-link-hover-color, #28a745);
    border-bottom: none;
    color: var(--bs-link-hover-color, #28a745);
    font-weight: bold;
}

.date-availability-tab-content {
    border: 1px solid var(--bs-primary, #007bff);
    background: #fff;
    border-radius: 0 5px 5px 5px;
    padding: 20px;
}

.date-availability-pane {
    display: none;
}

.date-availability-pane.active {
    display: block;
}

/* xl Extra large screens (≥1200px and up to <1400px) */
@media (max-width: 1399.98px) {
    
}

/* lg Large screens (≥992px and up to <1200px) */
@media (max-width: 1199.98px) {
}

/* md Medium screens (tablets, ≥768px and up to <992px) */
@media (max-width: 991.98px) {
}

/* sm Small screens (landscape phones, ≥576px and up to <768px) */
@media (max-width: 767.98px) {
.date-availability-tab-content {
    padding: 8px;
}
}

/* xs Extra small screens (portrait phones, <576px) */
@media (max-width: 575.98px) {
}