/* ============================================================
   Image Scroller Plugin — beeFreeImageScroller.css
   v1.2.0
   ============================================================ */

/* ── Root wrapper ─────────────────────────────────────────── */
.beeFree-addOn-imageScroller.is-root {
    position: relative;
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

    /* ── Outside-arrow layout ─────────────────────────────────── */
    .beeFree-addOn-imageScroller.is-root.is-layout-outside {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 12px;
    }

/* ── Viewport ─────────────────────────────────────────────── */
.beeFree-addOn-imageScroller .is-viewport {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

/* ── Track ────────────────────────────────────────────────── */
.beeFree-addOn-imageScroller .slider-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    will-change: transform;
}

/* ── Individual slides ────────────────────────────────────── */
.beeFree-addOn-imageScroller .slide {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* ── Control bar (top-* / bottom-* arrow positions) ──────── */
.beeFree-addOn-imageScroller .is-control-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px;
}

    .beeFree-addOn-imageScroller .is-control-bar.is-control-top-left,
    .beeFree-addOn-imageScroller .is-control-bar.is-control-bottom-left {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .beeFree-addOn-imageScroller .is-control-bar.is-control-top-center,
    .beeFree-addOn-imageScroller .is-control-bar.is-control-bottom-center {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .beeFree-addOn-imageScroller .is-control-bar.is-control-top-right,
    .beeFree-addOn-imageScroller .is-control-bar.is-control-bottom-right {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .beeFree-addOn-imageScroller .is-control-bar.is-control-bottom-left,
    .beeFree-addOn-imageScroller .is-control-bar.is-control-bottom-center,
    .beeFree-addOn-imageScroller .is-control-bar.is-control-bottom-right {
        margin-bottom: 0;
        margin-top: 10px;
    }

/* ── Arrows ───────────────────────────────────────────────── */
.beeFree-addOn-imageScroller .is-arrow {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    margin: 0 4px;
    -webkit-transition: background 0.2s ease, opacity 0.2s ease;
    transition: background 0.2s ease, opacity 0.2s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 10;
}

    .beeFree-addOn-imageScroller .is-arrow:hover {
        background: rgba(0, 0, 0, 0.85);
    }

    .beeFree-addOn-imageScroller .is-arrow.is-disabled {
        opacity: 0.3;
        cursor: default;
        pointer-events: none;
    }

    /* Inside arrows */
    .beeFree-addOn-imageScroller .is-arrow.is-inside {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 10;
    }

        .beeFree-addOn-imageScroller .is-arrow.is-inside.is-prev {
            left: 8px;
        }

        .beeFree-addOn-imageScroller .is-arrow.is-inside.is-next {
            right: 8px;
        }

    /* Outside arrows */
    .beeFree-addOn-imageScroller .is-arrow.is-outside {
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

/* ── Dots ─────────────────────────────────────────────────── */
.beeFree-addOn-imageScroller .is-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
}

.beeFree-addOn-imageScroller .is-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-transition: background 0.2s ease, -webkit-transform 0.2s ease;
    transition: background 0.2s ease, transform 0.2s ease;
}

    .beeFree-addOn-imageScroller .is-dot.is-active {
        background: rgba(0, 0, 0, 0.75);
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

    .beeFree-addOn-imageScroller .is-dot:hover {
        background: rgba(0, 0, 0, 0.5);
    }

/* ── Drag cursors ─────────────────────────────────────────── */
.beeFree-addOn-imageScroller .is-viewport {
    cursor: grab;
}

    .beeFree-addOn-imageScroller .is-viewport:active {
        cursor: grabbing;
    }