/*
 * Background Slideshow — frontend styles.
 *
 * Architecture (mirrors the Hover Image Carousel): the JS injects a
 * horizontal scroll-snap track of one frame per image into the resolved
 * target ancestor. The browser handles touch + mouse swipe natively as
 * overflow scrolling; the JS just drives `scrollTo()` for auto-tick,
 * arrows, and dots.
 *
 *   target ancestor
 *   ├── .ipt-bg-slideshow-track            ← absolutely positioned, full-bleed
 *   │     ├── .ipt-bg-slideshow-frame      ← width: 100%, background-image set inline
 *   │     ├── .ipt-bg-slideshow-frame
 *   │     └── ...
 *   ├── (the merchant's other widgets sit above the track via source order)
 *   ├── .ipt-nav-arrow.ipt-nav-arrow--prev (optional)
 *   ├── .ipt-nav-arrow.ipt-nav-arrow--next (optional)
 *   └── .ipt-bg-slideshow-dots (optional)
 *
 * Arrows: NOT styled here. They reuse the shared `.ipt-nav-arrow`
 * chrome from `frontend-nav-arrows.css` — same look as the carousel.
 *
 * Dots: styled to mimic Elementor's native slideshow (Swiper) pagination
 * bullets — 8 px circle, black at opacity 0.2, active = #007aff.
 */

.ipt-bg-slideshow {
    /*
     * The widget marker is invisible AND zero-area — it just hosts the
     * data attributes the JS reads. Layout / paint live on the track
     * the JS injects into the target ancestor.
     */
    display: block;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ===== Scroll track ===== */

.ipt-bg-slideshow-track {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;   /* default: no swipe; `.is-swipeable` opts in */
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    /*
     * `scroll-behavior: smooth` makes programmatic scroll-position
     * changes animate via the browser's native smooth scroller.
     * The Hover Image Carousel uses the same property — it's more
     * reliable across mobile Safari (which has had historical bugs
     * with `scrollTo({behavior: 'smooth'})` inside scroll-snap
     * containers) than the JS-side `behavior` option.
     */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Hide the native scrollbar — slideshow chrome lives in the optional
     * dots + arrows, not in a visible scrollbar. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ipt-bg-slideshow-track::-webkit-scrollbar {
    display: none;
}

/*
 * Swipeable mode: turn on native overflow scrolling so touch + mouse
 * drag (browsers that support it) pan the track. The JS adds the
 * `.is-swipeable` class when the merchant ticks the Enable Swipe
 * control.
 *
 * No `touch-action` declaration here. The browser default (`auto`)
 * is exactly what we want: horizontal pan over the overflow-x: auto
 * track scrolls the track; vertical pan bubbles up and scrolls the
 * page. Setting an explicit `touch-action: pan-y` (the previous
 * attempt) actively BLOCKED horizontal pans on the track — the bug
 * that broke mobile swipe.
 */
.ipt-bg-slideshow-track.is-swipeable {
    overflow-x: auto;
}

/* ===== Frame (one per image) ===== */

.ipt-bg-slideshow-frame {
    /*
     * Each frame fills the track exactly. `flex-shrink: 0` is critical —
     * without it the flex container would compress frames to fit and
     * the snap math breaks.
     */
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    /* Prevent images from being dragged out of the browser as files —
     * we want the frame to track the user's finger, not start a drag
     * operation. */
    -webkit-user-drag: none;
}

/* ===== Dots (Swiper-style pagination bullets) =====
 *
 * Elementor's native Slides widget runs on Swiper.js and uses
 * `.swiper-pagination-bullet` (8 px circle, 0.2 opacity, color
 * overridable via `--swiper-pagination-color`, active = full opacity
 * + theme color). We match that look so this widget feels like a
 * drop-in companion to the native widget.
 *
 * `!important` everywhere because the target ancestor lives under a
 * host theme (Blocksy, Astra, GeneratePress, etc.) which all style raw
 * `button` elements with heavy defaults — width, padding, border,
 * background. Without `!important` the theme rules win and the dots
 * render as full-size native buttons.
 */
.ipt-bg-slideshow-dots {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 10px;
    z-index: 10 !important;
    display: block !important;
    text-align: center !important;
    line-height: 0 !important;
    pointer-events: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ipt-bg-slideshow-dot {
    display: inline-block !important;
    box-sizing: content-box !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #000 !important;
    background-color: #000 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 0.2;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: opacity 200ms, background-color 200ms;
}

.ipt-bg-slideshow-dot:hover,
.ipt-bg-slideshow-dot:focus {
    opacity: 0.6;
    outline: none !important;
}

.ipt-bg-slideshow-dot.is-active {
    opacity: 1;
    background: #007aff !important;
    background-color: #007aff !important;
}