/*
 * carousel-progress.css — Segmented redesign of .wb-carousel-progress
 *
 * WHY THIS FILE EXISTS:
 *   The legacy widget renders a single continuous progress bar (track + fill).
 *   When data-segmented="1" is present the widget switches to a row of equal-width
 *   segment pills, one per slide. This file owns ALL styling for that mode.
 *
 * THE data-segmented="1" GATE:
 *   Every selector here is scoped to [data-segmented="1"].  The legacy
 *   "continuous" mode (no attribute) is completely untouched — none of these
 *   selectors will ever match it.
 *
 * CUSTOM-PROPERTY API (set by Elementor selectors controls via {{WRAPPER}}):
 *   --wb-seg-gap           gap between segments      default 10px
 *   --wb-seg-h             segment height             default 2px
 *   --wb-seg-color-inactive inactive segment color   default #BBBBBB
 *   --wb-seg-color-active  active segment color      default #111111
 *
 * NOTE: Do NOT add !important on the var()-consumer rules — Elementor controls
 *   push values through {{WRAPPER}} inline style and must win the cascade.
 *   The two !important flags below are specifically to neutralise Elementor's
 *   own selectors that push height:4px and a background on the container itself.
 */

/* 1. Container — only in segmented mode */
.wb-carousel-progress[data-segmented="1"] {
    display: flex;
    align-items: center;
    gap: var(--wb-seg-gap, 10px);
    height: auto !important;       /* overrides Elementor selectors height:4px */
    background: none !important;   /* clears legacy track background */
}

/* 2. Each segment pill */
.wb-carousel-progress[data-segmented="1"] .wb-seg {
    display: block;
    flex: 1 1 0;
    height: var(--wb-seg-h, 2px);
    min-width: 24px;
    max-width: 80px;
    background: var(--wb-seg-color-inactive, #BBBBBB);
    transition: background-color 200ms ease-out;
}

/* 3. Active segment */
.wb-carousel-progress[data-segmented="1"] .wb-seg.is-active {
    background: var(--wb-seg-color-active, #111111);
}

/* 4. Reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
    .wb-carousel-progress[data-segmented="1"] .wb-seg {
        transition: none;
    }
}