/**
 * Agency Custom Elementor Widgets — Stat Progress Bars
 * stat-progress-bars.css
 *
 * A stacked list of rows: value | progress bar track | label.
 * Bar fills animate from 0 to their target width when the widget
 * enters the viewport (IntersectionObserver). Reversed on scroll out.
 * All colors and sizes driven by Elementor controls via CSS custom
 * properties or direct selectors.
 */

/* ── Widget wrapper ─────────────────────────────────────────────────────────── */
.acew-spb {
    width: 100%;
}

/* ── Eyebrow ────────────────────────────────────────────────────────────────── */
.acew-spb-eyebrow {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--acew-spb-eyebrow-color, #64748b);
    margin-bottom: var(--acew-spb-eyebrow-gap, 24px);
}

/* ── Row ────────────────────────────────────────────────────────────────────── */
.acew-spb-row {
    display: flex;
    align-items: center;
    gap: var(--acew-spb-row-gap, 16px);
    margin-bottom: var(--acew-spb-row-spacing, 16px);
}

.acew-spb-row:last-child {
    margin-bottom: 0;
}

/* ── Value ──────────────────────────────────────────────────────────────────── */
.acew-spb-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--acew-spb-value-color, #0066FF);
    min-width: var(--acew-spb-value-width, 52px);
    text-align: right;
    flex-shrink: 0;
}

/* ── Track ──────────────────────────────────────────────────────────────────── */
.acew-spb-track {
    flex: 1;
    height: var(--acew-spb-track-height, 8px);
    background: var(--acew-spb-track-color, #e2e8f0);
    border-radius: var(--acew-spb-track-radius, 4px);
    overflow: hidden;
    min-width: 0;
}

/* ── Fill ───────────────────────────────────────────────────────────────────── */
.acew-spb-fill {
    height: 100%;
    border-radius: var(--acew-spb-track-radius, 4px);
    background: var(--acew-spb-fill-color, #0066FF);
    width: 0%;
    /* Transition drives the animated fill-in */
    transition: width var(--acew-spb-duration, 0.9s) cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: var(--acew-spb-fill-delay, 0ms);
}

/* When widget is in view, JS sets width to target via inline style */
.acew-spb--animate .acew-spb-fill {
    /* width is set by JS inline — transition handles the motion */
}

/* ── Label ──────────────────────────────────────────────────────────────────── */
.acew-spb-label {
    font-size: 0.875rem;
    color: var(--acew-spb-label-color, #475569);
    line-height: 1.5;
    min-width: var(--acew-spb-label-min-width, 0px);
    flex: 1;
}

/* ── Reduce motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .acew-spb-fill {
        transition: none !important;
    }
}