.booknetic_custom_duration_popup
{
    top: 10% !important;
    position: fixed;
    z-index: 9999;
    opacity: 0;
    transition: opacity 250ms ease;

}

.enter {
    opacity: 1 !important;
}

.booknetic_custom_duration_popup.enter {
    bottom: unset !important;
}

/* ── Mobile staff carousel (Couple / Group flows) ──────────────────────────
   step_date_time_staff_combined.js adds .bkntc-collab-staff-carousel to each
   member's .booknetic_collab_staff_cards block and appends the arrow/dot nav.
   Everything is scoped behind the media query (nav hidden outside it), so
   desktop keeps the stock inline grid layout untouched. !important is needed
   because the grid display is set via inline style on the container. */

.bkntc-collab-carousel-nav {
    display: none;
}

@media (max-width: 767px) {
    .booknetic_collab_staff_cards.bkntc-collab-staff-carousel {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .booknetic_collab_staff_cards.bkntc-collab-staff-carousel::-webkit-scrollbar {
        display: none;
    }

    .bkntc-collab-staff-carousel > .booknetic_collab_staff_card {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .bkntc-collab-staff-carousel + .bkntc-collab-carousel-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        margin-top: 12px;
    }

    .bkntc-collab-carousel-arrow {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid #e0e0e0;
        background: #fff;
        color: #333;
        line-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
    }

    .bkntc-collab-carousel-arrow svg {
        display: block;
        flex: 0 0 auto;
    }

    .bkntc-collab-carousel-arrow:disabled {
        opacity: 0.35;
        cursor: default;
    }

    .bkntc-collab-carousel-dots {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .bkntc-collab-carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #cfd8dc;
        cursor: pointer;
        transition: background 0.2s, transform 0.2s;
    }

    .bkntc-collab-carousel-dot.active {
        background: #2196F3;
        transform: scale(1.25);
    }
}