/* Shared booking calendar / slot picker (customer + staff portals) */
#bk-root [hidden],
[data-booking-picker] [hidden] { display: none !important; }

.bk-day {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: .875rem;
    font-weight: 600;
    color: #111827;
    transition: transform .12s, background .12s;
}
.bk-day:not(:disabled):hover { background: var(--brand-light); transform: scale(1.08); }
.bk-day:disabled { color: #c4c9d1; cursor: not-allowed; font-weight: 400; }
.bk-day.bk-today { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); }
.bk-day.bk-sel { background: var(--brand); color: #fff; }
.bk-day.bk-sel:hover { background: var(--brand-dark); }
.bk-day.bk-range { background: var(--brand-light); border-radius: 0; }
.bk-day.bk-range-start { border-radius: 9999px 0 0 9999px; }
.bk-day.bk-range-end { border-radius: 0 9999px 9999px 0; }
.bk-day.bk-range-start.bk-range-end { border-radius: 9999px; }
.bk-day.bk-range.bk-sel { background: var(--brand); color: #fff; }
.bk-day.bk-full,
.bk-day.bk-full:disabled { background: #dc2626; color: #fff; font-weight: 600; }
.bk-legend-full { display: inline-block; width: .5rem; height: .5rem; border-radius: 9999px; background: #dc2626; }
.bk-dot::after {
    content: '';
    position: absolute;
    bottom: 5px;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: var(--brand);
}
.bk-sel.bk-dot::after { background: #fff; }

.bk-slot {
    border: 2px solid color-mix(in srgb, var(--brand) 30%, #e5e7eb);
    color: #111827;
    background: #fff;
    border-radius: .75rem;
    padding: .6rem .5rem;
    font-weight: 700;
    font-size: .875rem;
    transition: all .12s;
}
.bk-slot:hover {
    border-color: var(--brand);
    background: var(--brand-light);
    color: var(--brand-dark);
    transform: translateY(-1px);
}
.bk-slot.bk-slot-in,
.bk-slot.bk-slot-on {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 35%, transparent);
}
.bk-slot.bk-slot-on { background: var(--brand-dark); border-color: var(--brand-dark); }
.bk-slot.bk-slot-in:hover,
.bk-slot.bk-slot-on:hover { background: var(--brand-dark); color: #fff; }
.bk-slot.bk-slot-booked {
    border-color: #e5e7eb;
    color: #9ca3af;
    background: repeating-linear-gradient(45deg, #f9fafb, #f9fafb 6px, #eef0f3 6px, #eef0f3 12px);
    cursor: not-allowed;
    text-decoration: line-through;
    font-weight: 500;
}
.bk-slot.bk-slot-booked:hover {
    transform: none;
    background: repeating-linear-gradient(45deg, #f9fafb, #f9fafb 6px, #eef0f3 6px, #eef0f3 12px);
}

@keyframes bk-pop { 0% { transform: scale(.97); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
.bk-pop { animation: bk-pop .35s ease-out; }
@keyframes bk-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.bk-shake { animation: bk-shake .3s; }
@keyframes bk-fall {
    0% { transform: translate(0,0) rotate(0); opacity: 1; }
    100% { transform: translate(var(--dx), 140px) rotate(540deg); opacity: 0; }
}
.bk-confetti {
    position: absolute;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    animation: bk-fall .9s ease-out forwards;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .bk-pop, .bk-shake, .bk-confetti { animation: none; }
    .bk-day:hover, .bk-slot:hover { transform: none; }
}