/* steps.css */

/* Kontener kroków */
.fixed__progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; /* Wyśrodkowanie poziome */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 80px;
    padding: 10px 0;
    width: 100%; /* Pełna szerokość kontenera */
    text-align: center; /* Dodatkowe zabezpieczenie wyśrodkowania */
    /* position: relative; <-- tylko jeżeli potrzebne do innych celów */
}

/* Lista kroków */
.navigation_tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 auto; /* Wyśrodkowanie listy kroków */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; /* Wyśrodkowanie kroków */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    max-width: 800px; /* Maksymalna szerokość listy kroków */
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    position: relative;
}

    /* Poszczególne kroki (kółka) */
    .navigation_tabs li {
        position: relative; /* aby móc pozycjonować ::before i ::after */
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 4px solid var(--line-color);
        margin: 0 28px; /* Odstęp między krokami */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-transition: background-color 0.3s, border-color 0.3s;
        -o-transition: background-color 0.3s, border-color 0.3s;
        transition: background-color 0.3s, border-color 0.3s;
        cursor: default; /* Wyłączenie kliknięcia */
        pointer-events: none;
        /* Opcjonalnie: jeżeli chcesz “odciąć” linię całkowicie w tle:
       background-color: #fff;
    */
    }

        /* Numer kroku (pseudoelement ::before) */
        .navigation_tabs li::before {
            content: attr(data-step);
            font-weight: bold;
            color: var(--line-color); /* Kolor numeru */
            font-size: 1rem;
            position: relative;
        }

        /* Linia łącząca kroki — TYLKO od drugiego w górę */
        .navigation_tabs li:not(:first-child)::after {
            content: '';
            position: absolute;
            width: calc(100% + 30px);
            height: 4px;
            background: var(--line-color);
            top: 50%;
            left: -63px; /* Korekta w lewo, aby dotykało poprzedniego kroku */
            -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                    transform: translateY(-50%);
            z-index: -1;
        }

        /* Pierwszy krok nie rysuje linii */
        .navigation_tabs li:first-child::after {
            content: none;
        }

    /* (Opcjonalne) Bez linii przy ostatnim kroku */
    /*
.navigation_tabs li:last-child::after {
    content: none;
}
*/

    /* Aktywny krok */
    .navigation_tabs .tab_active {
        border-color: var(--primary-color);
    }

        .navigation_tabs .tab_active::before {
            color: var(--primary-color);;
        }

    /* Nieaktywny krok (jeszcze nie dostępny) */
    .navigation_tabs .tab_disabled {
        border-color: var(--inactive-color);
    }

        .navigation_tabs .tab_disabled::before {
            color: var(--inactive-color);
        }

    /* Ukończony krok (np. z ptaszkiem) */
    .navigation_tabs .tab_inactive {
        border-color: var(--primary-color);
        background-color: var(--primary-color);
    }

        .navigation_tabs .tab_inactive::before {
            content: "\2713"; /* Ptaszek ✔ */
            color: #fff;
            font-size: 1rem;
        }

/* Linie dla ukończonych kroków */
.navigation_tabs li.tab_inactive + li::after {
    background: var(--primary-color);
}

    /* Przykład, jak zmieniać kolor linii między konkretnymi krokami */
    /*.navigation_tabs li:nth-child(2)::after {
        background: var(--primary-color);
    }
/* Albo użyj data-step:
.navigation_tabs li[data-step="3"]::after { background: orange; }
*/

/* Responsywność dla tabletów */
@media (max-width: 768px) {
    .navigation_tabs li {
        width: 35px;
        height: 35px;
        border: 3px solid var(--line-color);
        margin: 0 15px;
        font-size: 0.875rem;
    }

        .navigation_tabs li:not(:first-child)::after {
            width: calc(100% + 6px); /* mniejszy "plus" dla tabletów */
            left: -35px; /* Korekta pozycji linii */
            height: 3px;
        }
}

/* Responsywność dla telefonów */
@media (max-width: 480px) {
    .navigation_tabs li {
        width: 30px;
        height: 30px;
        border: 2px solid var(--line-color);
        margin: 0 10px;
        font-size: 0.75rem;
    }

        .navigation_tabs li:not(:first-child)::after {
            width: calc(100% + -2px);
            left: -24px;
            height: 2px;
        }
}