.mc-availability {
    margin-top: -2px;
    padding: 13px 14px;
    border: 1px solid var(--mc-border);
    border-radius: 14px;
    background: var(--mc-surface-soft, #f8fafc);
}

.mc-availability__status {
    margin: 0;
    color: var(--mc-muted);
    font-size: 10px;
    line-height: 1.8;
}

.mc-availability__status[data-state="loading"] {
    opacity: .72;
}

.mc-availability__status[data-state="error"] {
    color: #b42318;
}

.mc-availability__status[data-state="success"] {
    color: #137a4b;
}

.mc-availability__slots {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.mc-availability-slot {
    min-width: 76px;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--mc-border);
    border-radius: 10px;
    background: #fff;
    color: var(--mc-text);
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.mc-availability-slot:hover {
    transform: translateY(-1px);
    border-color: var(--mc-primary);
}

.mc-availability-slot.is-selected,
.mc-availability-slot[aria-pressed="true"] {
    border-color: var(--mc-primary);
    background: var(--mc-primary);
    color: #fff;
}

.mc-availability-loading {
    color: var(--mc-muted);
    font-size: 10px;
}

@media (max-width: 700px) {
    .mc-availability-slot {
        flex: 0 0 76px;
        min-width: 76px;
    }
}


/* Stage 22.2 — Keep reschedule availability on a clean full-width row. */
.mc-reschedule-availability {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

.mc-reschedule-availability .mc-availability__slots {
    min-width: 0;
}

.mc-reschedule-form .mc-field--time {
    min-width: 0;
}

@media (max-width: 760px) {
    .mc-reschedule-availability {
        grid-column: 1;
    }

    .mc-reschedule-availability .mc-availability__slots {
        gap: 7px;
    }
}