/**
 * Booking flow (Boka städning) — maps site theme variables onto booking UI.
 */

#booking-flow-root {
    --bk-brand: var(--brand);
    --bk-brand-mid: var(--brand-mid);
    --bk-brand-2: var(--brand-2);
    --bk-soft: var(--brand-soft);
    --bk-gradient: var(--gradient);
    --bk-ring: color-mix(in srgb, var(--brand) 30%, #e0e7ff);
    --bk-hover-border: color-mix(in srgb, var(--brand-mid) 55%, white);
    --bk-active-dark: color-mix(in srgb, var(--brand) 22%, #0f172a);
    --bk-ring-dark: color-mix(in srgb, var(--brand) 45%, #1e1b4b);
    --bk-text-soft: color-mix(in srgb, var(--brand) 72%, white);
    --bk-focus-ring: color-mix(in srgb, var(--brand) 12%, white);
}

#booking-flow-root .bk-tile:not(.active):hover,
#booking-flow-root .bk-addon:not(.active):hover,
#booking-flow-root .bk-pick-btn:hover,
#booking-flow-root .bk-action-btn:hover {
    border-color: var(--bk-hover-border);
    background: var(--bk-soft);
}

.dark #booking-flow-root .bk-tile:not(.active):hover,
.dark #booking-flow-root .bk-addon:not(.active):hover,
.dark #booking-flow-root .bk-pick-btn:hover,
.dark #booking-flow-root .bk-action-btn:hover {
    border-color: var(--bk-brand-mid);
    background: var(--bk-active-dark);
}

#booking-flow-root .bk-prop:not(.active):hover {
    border-color: var(--bk-hover-border);
}

.dark #booking-flow-root .bk-prop:not(.active):hover {
    border-color: var(--bk-brand-mid);
}

#booking-flow-root .bk-tile.active,
#booking-flow-root .bk-prop.active,
#booking-flow-root .bk-addon.active,
#booking-flow-root .bk-pick-btn.active,
#booking-flow-root .bk-chip-btn.active {
    border-color: var(--bk-brand);
    background: var(--bk-soft);
    box-shadow: 0 0 0 3px var(--bk-ring);
}

.dark #booking-flow-root .bk-tile.active,
.dark #booking-flow-root .bk-prop.active,
.dark #booking-flow-root .bk-addon.active,
.dark #booking-flow-root .bk-pick-btn.active,
.dark #booking-flow-root .bk-chip-btn.active {
    background: var(--bk-active-dark);
    box-shadow: 0 0 0 3px var(--bk-ring-dark);
}

#booking-flow-root .bk-pick-btn.active,
#booking-flow-root .bk-chip-btn.active {
    color: var(--bk-brand);
}

.dark #booking-flow-root .bk-pick-btn.active,
.dark #booking-flow-root .bk-chip-btn.active {
    color: var(--bk-text-soft);
}

#booking-flow-root .bk-freq.active {
    border-color: var(--bk-brand);
    background: var(--bk-brand);
    color: #fff;
}

#booking-flow-root .bk-input:focus {
    border-color: var(--bk-brand-mid);
    box-shadow: 0 0 0 3px var(--bk-focus-ring);
}

.dark #booking-flow-root .bk-input:focus {
    box-shadow: 0 0 0 3px var(--bk-ring-dark);
}

#booking-flow-root .bk-stepper button {
    color: var(--bk-brand);
}

#booking-flow-root .bk-stepper button:hover {
    background: var(--bk-soft);
}

.dark #booking-flow-root .bk-stepper button:hover {
    background: var(--bk-active-dark);
}

#booking-flow-root .bk-icon,
#booking-flow-root .bk-btn-next,
#booking-flow-root .bk-progress-fill,
#booking-flow-root .cal-time-slot.is-selected,
#booking-flow-root .slot-mine {
    background: var(--bk-gradient);
}

#booking-flow-root .cal-time-slot.is-selected {
    border-color: var(--bk-brand);
    color: #fff;
}

#booking-flow-root .cal-selected-summary {
    border: 1.5px solid var(--bk-brand);
    background: var(--bk-soft);
}

.dark #booking-flow-root .cal-selected-summary {
    background: var(--bk-active-dark);
    border-color: var(--bk-brand);
}

#booking-flow-root .cal-selected-label {
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bk-brand);
}

.dark #booking-flow-root .cal-selected-label {
    color: var(--bk-text-soft);
}

#booking-flow-root .bk-address-opt:hover {
    background: var(--bk-soft);
}

.dark #booking-flow-root .bk-address-opt:hover {
    background: var(--bk-active-dark);
}

#booking-flow-root .bk-estimate-box {
    background: var(--bk-soft);
    border: 1px solid var(--bk-focus-ring);
}

#booking-flow-root .bk-total-price {
    background-image: var(--bk-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@media (max-width: 639px) {
    #booking-flow-root .bk-tile.active,
    #booking-flow-root .bk-prop.active,
    #booking-flow-root .bk-addon.active {
        box-shadow: inset 0 0 0 2px var(--bk-ring);
    }

    .dark #booking-flow-root .bk-tile.active,
    .dark #booking-flow-root .bk-prop.active,
    .dark #booking-flow-root .bk-addon.active {
        box-shadow: inset 0 0 0 2px var(--bk-ring-dark);
    }
}