.tracking-progress {
    display: flex;
    align-items: flex-start;
    max-width: 400px;

    .tracking-step {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1;
        min-width: 64px;

        .tracking-dot {
            position: relative;
            z-index: 1;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--luncher-border, #ced4da);
        }

        .tracking-label {
            margin-top: 2px;
            font-size: 0.7em;
            color: var(--luncher-text-muted, #6c757d);
            white-space: nowrap;
        }

        // Spojnice k předchozímu kroku – vede od středu této tečky doleva ke středu předchozí.
        // Tečka má průměr 12px, takže její střed je 6px od levého okraje segmentu.
        &:not(:first-child)::before {
            content: '';
            position: absolute;
            top: 5px;
            left: calc(6px - 100%);
            width: 100%;
            height: 2px;
            background: var(--luncher-border, #ced4da);
        }

        &.done {
            .tracking-dot {
                background: var(--bs-success, #198754);
            }

            &:not(:first-child)::before {
                background: var(--bs-success, #198754);
            }
        }

        &.active .tracking-label {
            font-weight: 600;
            color: inherit;
        }
    }

    // Pulzování aktivního kroku, dokud sledování běží
    &.live .tracking-step.active .tracking-dot {
        animation: tracking-pulse 2s ease-in-out infinite;
    }
}

@keyframes tracking-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.5);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(25, 135, 84, 0);
    }
}