/* ── Booking wizard: stepper ──────────────────────────────────────── */

/* Active step: number badge + label get primary color */
.bk-step[data-state="active"] .bk-step-num {
    background-color: var(--tenant-primary, #6366f1);
    color: #fff;
}
.bk-step[data-state="active"] .bk-step-txt {
    color: var(--tenant-primary, #6366f1);
    font-weight: 600;
}

/* Done step: same styling as active */
.bk-step[data-state="done"] .bk-step-num {
    background-color: var(--tenant-primary, #6366f1);
    color: #fff;
}
.bk-step[data-state="done"] .bk-step-txt {
    color: var(--tenant-primary, #6366f1);
}

/* Connector filled when the preceding step is done */
.bk-step-conn--done {
    background-color: var(--tenant-primary, #6366f1) !important;
    opacity: 1 !important;
}

/* ── Booking wizard: card selected state ─────────────────────────── */

/* .bk-selected is toggled by JS on data-service-card / data-staff-card */
[data-service-card].bk-selected .bk-card,
[data-staff-card].bk-selected .bk-card {
    border-color: var(--tenant-primary, #6366f1) !important;
    background-color: color-mix(in srgb, var(--tenant-primary, #6366f1) 12%, white) !important;
    box-shadow: 0 0 0 3px var(--tenant-primary, #6366f1) !important;
    /* Fallback for browsers without color-mix */
    background-color: rgba(99, 102, 241, 0.1) !important;
    background-color: color-mix(in srgb, var(--tenant-primary, #6366f1) 12%, white) !important;
}

/* Show checkmark overlay on selected card */
[data-service-card].bk-selected .bk-check,
[data-staff-card].bk-selected .bk-check {
    display: flex !important;
}

/* Staff member unavailable for selected service */
[data-staff-card].opacity-40 {
    cursor: not-allowed;
}

/* ── Booking wizard: time slot buttons ───────────────────────────── */

.bk-slot {
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.bk-slot--selected {
    border-color: var(--tenant-primary, #6366f1) !important;
    box-shadow: 0 0 0 2px var(--tenant-primary, #6366f1) !important;
}
