/**
 * Progress csíkok - frontend stílusok
 *
 * [ss_progress stilus="sima"] és [ss_progress stilus="zold"]
 *
 * MEGJEGYZÉS: a színek a minta SÖTÉT háttérű dobozához vannak hangolva.
 * Világos háttér esetén az rgba(255,255,255,*) értékeket és a szövegszíneket
 * módosítani kell (pl. a nevet sötétre, a csík hátterét világosra).
 */

/* Konténer: függőleges oszlop, sorok között rés. */
.ss-progress {
    display: flex;
    flex-direction: column;
    gap: 26px;
    font-family: Poppins, sans-serif;
}

/* Egyetlen sor (név+érték, alatta a csík). */
.ss-progress-sor {
    display: flex;
    flex-direction: column;
}

/* Fejléc: név balra, érték jobbra. */
.ss-progress-fej {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    font-size: 15px;
}

.ss-progress-nev {
    color: rgba(255, 255, 255, 0.7);
}

.ss-progress-ertek {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

/* Csík háttere: 6px magas, lekerekített. */
.ss-progress-csik {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    overflow: hidden;
}

/* Belső kitöltő sáv: induláskor 0 szélességű.
   A szélességet a GSAP animálja (js/progress.js), ezért itt nincs
   CSS transition — az ütközne a GSAP timeline-mal.
   (Ha GSAP nem töltődne be, a JS fallback azonnal beállítja a width-et.) */
.ss-progress-kitolt {
    width: 0;
    height: 100%;
    border-radius: 100px;
}


/* ==========================================================================
   SIMA stílus – [ss_progress stilus="sima"]
   Fehéres csík, fehér értékszöveg (sötét dobozhoz).
   ========================================================================== */
.ss-progress[data-stilus="sima"] .ss-progress-kitolt {
    background: rgba(255, 255, 255, 0.35);
}


/* ==========================================================================
   ZÖLD stílus – [ss_progress stilus="zold"]
   Zöld gradiens csík, zöld értékszöveg (kiemelt dobozhoz).
   ========================================================================== */
.ss-progress[data-stilus="zold"] .ss-progress-ertek {
    color: #34d399;
    font-weight: 700;
}

.ss-progress[data-stilus="zold"] .ss-progress-nev {
    color: rgba(255, 255, 255, 0.8);
}

.ss-progress[data-stilus="zold"] .ss-progress-kitolt {
    background: linear-gradient(90deg, #10b981, #34d399);
}