/* Progress bars + — i2t3 component styles
 * Richer horizontal bars (vs. the Bootstrap "progressbar"): style, size and
 * radius selectors plus an optional icon, inline value and scroll-triggered
 * fill. The circular variant is the separate "Circular progress" element.
 */

.i2t3-progressbar-plus__item { margin-bottom: 1rem; }
.i2t3-progressbar-plus__item:last-child { margin-bottom: 0; }
.i2t3-progressbar-plus__head {
    display: flex;
    justify-content: space-between;
    margin-bottom: .25rem;
    font-size: .9rem;
}
.i2t3-progressbar-plus__title { font-weight: 600; }

/* Track — faithful to the Karma look: light track, visible overflow so the
 * tooltip bubble can sit above the bar. */
.i2t3-progressbar-plus .progress {
    background: #FAFAFA;
    overflow: visible;
}
.i2t3-progressbar-plus .progress-bar {
    position: relative;
    overflow: visible;
}

/* Sizes (bar height) */
.i2t3-progressbar-plus--xs .progress { height: 4px; }
.i2t3-progressbar-plus--sm .progress { height: 8px; }
.i2t3-progressbar-plus--md .progress { height: 16px; }
.i2t3-progressbar-plus--lg .progress { height: 28px; }

/* Radius — Karma default is a rounded pill (25px); "semi" is the 3px step,
 * "pill" is fully round, "square" removes the radius. */
.i2t3-progressbar-plus--radius-default .progress,
.i2t3-progressbar-plus--radius-default .progress-bar { border-radius: 25px; }
.i2t3-progressbar-plus--radius-semi .progress,
.i2t3-progressbar-plus--radius-semi .progress-bar { border-radius: 3px; }
.i2t3-progressbar-plus--radius-pill .progress,
.i2t3-progressbar-plus--radius-pill .progress-bar { border-radius: 50rem; }
.i2t3-progressbar-plus--radius-square .progress,
.i2t3-progressbar-plus--radius-square .progress-bar { border-radius: 0; }

/* Inline percentage rendered inside medium/large bars (Bootstrap centres the
 * progress-bar content; we just style and pad it). */
.i2t3-progressbar-plus__inline {
    font-size: 11px;
    line-height: 1;
    color: var(--bs-light, #fff);
    padding: 0 .5rem;
    white-space: nowrap;
}

/* Tooltip bubble for small/extra-small bars — faithful port of Karma's
 * .progress-bar-tooltip (dark bubble with a downward arrow, anchored to the
 * right end of the filled bar). */
.i2t3-progressbar-plus__tooltip {
    position: absolute;
    top: -28px;
    right: 5px;
    padding: 4px 8px;
    background-color: var(--bs-dark, #212529);
    color: var(--bs-light, #fff);
    line-height: 15px;
    font-size: 11px;
    border-radius: 3px;
    white-space: nowrap;
}
.i2t3-progressbar-plus__tooltip:after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 13px;
    width: 0;
    border-color: var(--bs-dark, #212529) transparent;
    border-style: solid;
    border-width: 5px 5px 0;
}

/* Scroll-triggered fill ("Fill on scroll" style). The bar starts at width:0
 * and is filled by script.js when it scrolls into view (IntersectionObserver),
 * matching Karma's data-appear-progress-animation behaviour. The width is set
 * inline by JS; the transition produces the grow effect — and only this style
 * animates (opt-in), unlike the previous global on-load animation. */
.i2t3-progressbar-plus--style-bars-animated .progress-bar[data-i2t3-pb-fill] {
    transition: width 1s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .i2t3-progressbar-plus--style-bars-animated .progress-bar[data-i2t3-pb-fill] {
        transition: none;
    }
}