/* ==========================================================================
   UI KIT: STEPPER / PROGRESS BAR (Стъпки на прогрес)
   ========================================================================== */
.aopc-stepper { 
    display: flex; 
    justify-content: space-between; 
    position: relative; 
    margin: 10px 0 20px 0; 
    padding: 0 20px; 
}

/* Линията, която свързва кръгчетата */
.aopc-stepper::before { 
    content: ''; 
    position: absolute; 
    top: 15px; 
    left: 40px; 
    right: 40px; 
    height: 3px; 
    background: var(--fiptec-slate-200); 
    z-index: 1; 
}

.aopc-stepper-item { 
    position: relative; 
    z-index: 2; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 8px; 
    width: 80px; 
    cursor: pointer; 
}

.aopc-stepper-circle { 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    background: var(--fiptec-slate-50); 
    border: 3px solid var(--fiptec-slate-200); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
    color: var(--fiptec-slate-400); 
    transition: all 0.2s; 
    font-size: 12px; 
}

.aopc-stepper-label { 
    font-size: 11px; 
    font-weight: bold; 
    color: var(--fiptec-slate-600); 
    text-align: center; 
    text-transform: uppercase; 
    line-height: 1.2; 
}

/* СЪСТОЯНИЯ НА СТЪПКАТА */

/* 1. Завършена (Completed) - Синя */
.aopc-stepper-item.is-completed .aopc-stepper-circle { 
    background: var(--fiptec-blue); 
    border-color: var(--fiptec-blue); 
    color: #fff; 
}
.aopc-stepper-item.is-completed .aopc-stepper-label { color: var(--fiptec-blue); }

/* 2. Активна (Active) - Бяла със синя рамка и сияние */
.aopc-stepper-item.is-active .aopc-stepper-circle { 
    background: #fff; 
    border-color: var(--fiptec-blue); 
    color: var(--fiptec-blue); 
    box-shadow: 0 0 0 4px var(--fiptec-blue-vlight); 
}
.aopc-stepper-item.is-active .aopc-stepper-label { color: var(--fiptec-slate-900); }

/* 3. Грешка / Отказана (Error) - Червена */
.aopc-stepper-item.is-error .aopc-stepper-circle { 
    background: var(--fiptec-red); 
    border-color: var(--fiptec-red); 
    color: #fff; 
}
.aopc-stepper-item.is-error .aopc-stepper-label { color: var(--fiptec-red); }