/* ==========================================================================
   KE Progress Bar Widget
   ========================================================================== */

.ke-progress-widget {
    width: 100%;
}

.ke-progress {
    position: relative;
}

/* Line Progress Bar */
.ke-progress--line .ke-progress__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ke-progress--percent-above-left .ke-progress__header {
    flex-direction: row-reverse;
}

.ke-progress-bar {
    position: relative;
    width: 100%;
    height: 20px;
    background: var(--ke-gray-150);
    border-radius: var(--ke-radius-sm);
    overflow: hidden;
}

.ke-progress-bar__fill {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    background: linear-gradient(90deg, var(--ke-primary), var(--ke-secondary));
    border-radius: inherit;
    /* v0.26.1: CSS-Transition entfernt — JS-RAF steuert die Width direkt.
       Der CSS-Transition lief gegen den RAF-Loop und erzeugte eine
       verwaschene/unvollständige Animation, bei der der Ladebalken teilweise
       gar nicht sichtbar animierte. */
}

.ke-progress--title-inside .ke-progress-bar__fill {
    justify-content: space-between;
    padding: 0 10px;
}

.ke-progress--title-inside .ke-progress__title {
    color: #fff;
    font-size: 0.875rem;
}

.ke-progress__percent--inside {
    color: #fff;
    font-size: 0.875rem;
    padding-right: 10px;
}

.ke-progress__percent--bubble {
    position: absolute;
    top: -35px;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: var(--ke-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--ke-radius-sm);
    white-space: nowrap;
    /* v0.26.1: transition entfernt — JS-RAF steuert `left` direkt, synchron zum Fill. */
}

.ke-progress__percent--bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: var(--ke-primary) transparent transparent;
}

/* Striped Progress Bar */
.ke-progress--striped .ke-progress-bar__fill {
    background-image: linear-gradient(
        45deg,
        rgba(var(--ke-white-rgb), 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(var(--ke-white-rgb), 0.15) 50%,
        rgba(var(--ke-white-rgb), 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

.ke-progress--striped-animated .ke-progress-bar__fill {
    animation: ke-progress-stripes 1s linear infinite;
}

@keyframes ke-progress-stripes {
    from {
        background-position: 1rem 0;
    }
    to {
        background-position: 0 0;
    }
}

/* Circle Progress */
.ke-progress-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.ke-progress-circle svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ke-progress-circle__track {
    stroke: var(--ke-gray-150);
}

.ke-progress-circle__fill {
    stroke: var(--ke-primary);
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease;
}

.ke-progress-circle__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.ke-progress-circle__content .ke-progress__percent {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ke-primary);
}

.ke-progress-circle__content .ke-progress__title {
    display: block;
    margin-top: 5px;
    font-size: 0.875rem;
    color: var(--ke-text-light);
}

/* Half Circle Progress */
.ke-progress-half-circle {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0 auto;
    overflow: hidden;
}

.ke-progress-half-circle svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ke-progress-half-circle__content {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.ke-progress-half-circle__content .ke-progress__percent {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ke-primary);
}

.ke-progress-half-circle__content .ke-progress__title {
    display: block;
    margin-top: 5px;
    font-size: 0.75rem;
    color: var(--ke-text-light);
}