/* =========================================================================
   PRNT Checkout Steps — stepper zamówienia (koszyk · kasa · podziękowanie)
   =========================================================================
   Paleta z briefu „stepper zamówienia":
     zielony  #22A35A — krok ukończony (ten sam, co ✓ przy „Plik wczytany poprawnie”)
     granat   #101B54 — gdzie jesteś teraz
     szary    #EEF1F8 / #5A648C — przed tobą
   Różowego #F0417E w stepperze NIE MA — zostaje wyłącznie dla głównych CTA.
   ========================================================================= */

/* Kolory biorą się z tokenów design systemu (`design-system.css`, wczytywany globalnie),
   a nie z literałów — poza jednym: tła przyszłego kółka `#EEF1F8` nie ma w tokenach,
   a najbliższy (`--prt-cfg-surface-num`, #EEF0F5) należy do konfiguratora. Literał po
   `var()` to wartość z briefu na wypadek, gdyby arkusz tokenów się nie wczytał. */
.prnt-checkout-steps {
    --prnt-krok-zrobiony: var(--prt-success, #22A35A);
    --prnt-krok-teraz: var(--prt-navy, #101B54);
    --prnt-krok-przyszly-tlo: #EEF1F8;
    --prnt-krok-przyszly-tekst: var(--prt-cfg-ink-3, #5A648C);
    --prnt-krok-nazwa-zrobiona: var(--prt-cfg-ink-2, #3A4478);
    --prnt-krok-lacznik: var(--prt-cfg-line-dash, #D5DAE7);
}

.prnt-checkout-steps.horizontal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    /* Zabezpieczenie na każdą szerokość: gdyby treść mimo wszystko się nie zmieściła,
       pasek ma się ZAWINĄĆ, a nie wypchnąć strony w bok. */
    flex-wrap: wrap;
    row-gap: 8px;
}

.prnt-checkout-steps.horizontal .prnt-step {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.prnt-checkout-steps .prnt-step-content {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    /* Ukończony krok renderuje się jako <a> — zdejmujemy chrome odnośnika,
       kolory i tak ustawiają reguły stanów poniżej. */
    text-decoration: none;
}

/* Kółko z numerem (albo z ✓) */
.prnt-checkout-steps .prnt-step-number {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    transition: background-color 0.2s, color 0.2s;
}

/* Nazwa kroku */
.prnt-checkout-steps .prnt-step-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    transition: color 0.2s;
}

/* Łącznik między krokami */
.prnt-checkout-steps .prnt-step-arrow {
    display: block;
    width: 40px;
    height: 1.5px;
    margin: 0 12px;
    background: var(--prnt-krok-lacznik);
    font-size: 0;
    line-height: 0;
    flex: 0 0 auto;
    transition: background-color 0.2s;
}

/* === Stany === */

/* Przyszły (domyślny) */
.prnt-checkout-steps .prnt-step .prnt-step-number {
    background: var(--prnt-krok-przyszly-tlo);
    color: var(--prnt-krok-przyszly-tekst);
}
.prnt-checkout-steps .prnt-step .prnt-step-text {
    color: var(--prnt-krok-przyszly-tekst);
}

/* Aktywny */
.prnt-checkout-steps .prnt-step.active .prnt-step-number {
    background: var(--prnt-krok-teraz);
    color: #fff;
}
.prnt-checkout-steps .prnt-step.active .prnt-step-text {
    color: var(--prnt-krok-teraz);
}

/* Ukończony */
.prnt-checkout-steps .prnt-step.completed .prnt-step-number {
    background: var(--prnt-krok-zrobiony);
    color: #fff;
}
.prnt-checkout-steps .prnt-step.completed .prnt-step-text {
    color: var(--prnt-krok-nazwa-zrobiona);
}
/* Łącznik ZA ukończonym krokiem jest zielony. `+` celuje w rodzeństwo bezpośrednio
   za krokiem, więc nie trzeba wiedzieć, który to numer. */
.prnt-checkout-steps .prnt-step.completed + .prnt-step-arrow {
    background: var(--prnt-krok-zrobiony);
}

/* Ukończony krok to odnośnik powrotny — hover podświetla nazwę na granat. */
.prnt-checkout-steps .prnt-step.completed a.prnt-step-content:hover .prnt-step-text,
.prnt-checkout-steps .prnt-step.completed a.prnt-step-content:focus-visible .prnt-step-text {
    color: var(--prnt-krok-teraz);
}

/* =========================================================================
   Wersja kompaktowa (poniżej 900px)
   ========================================================================= */

/* Ponad progiem blok kompaktowy siedzi w DOM, ale jest niewidoczny. */
.prnt-steps-kompakt {
    display: none;
}

@media (max-width: 899px) {
    .prnt-checkout-steps.horizontal .prnt-step,
    .prnt-checkout-steps.horizontal .prnt-step-arrow {
        display: none;
    }

    .prnt-checkout-steps.horizontal {
        justify-content: flex-end;
    }

    /* Kontener nagłówka ma w tym progu `align-items: center`, więc widżet dostaje
       szerokość ZAWARTOŚCI (zmierzone: 59px) — blok kompaktowy łamał się wtedy na
       dwie linie i nie miał jak dojechać do prawej krawędzi. Rozciągamy sam widżet. */
    .elementor-widget-prnt_checkout_steps {
        width: 100%;
        align-self: stretch;
    }

    .prnt-steps-kompakt {
        display: flex;
        /* `margin-left: auto`, a nie tylko `justify-content` na kontenerze: wyrównanie
           steppera jest też kontrolką widżetu (`alignment`, domyślnie „center"), która
           w CSS Elementora ma wyższą specyficzność (0,3,0) niż reguła motywu. Auto-margines
           wygrywa z każdym `justify-content`, więc blok trafia do prawej niezależnie od
           tego, co ustawiono w edytorze. */
        margin-left: auto;
        flex-direction: column;
        align-items: flex-end;
        gap: 1px;
        text-align: right;
        /* Kontener nagłówka gubi padding poniżej 1200px (ma tam jawne zero), więc nazwa
           kroku siadała 1px nad paskiem postępu — zmierzone na 390px. Odstęp daje sam
           blok, żeby nie ruszać ustawień szablonu nagłówka. */
        padding-bottom: 10px;
    }
    .prnt-steps-kompakt__licznik {
        white-space: nowrap;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--prnt-krok-przyszly-tekst);
    }
    .prnt-steps-kompakt__nazwa {
        white-space: nowrap;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.2;
        color: var(--prnt-krok-teraz);
    }

    /* --- Pasek postępu przy dolnej krawędzi headera ---
       Rysuje go NAGŁÓWEK, nie widżet: pasek ma iść od krawędzi do krawędzi okna,
       a widżet siedzi w środku jednej z kolumn headera i nie da się go stamtąd
       rozciągnąć bez założeń o tym, co po drodze jest pozycjonowane.

       Jeden pseudoelement, nie dwa (tor + wypełnienie): `::before` headera jest już
       zajęty przez clearfix Hello Elementora (`content:""; display:table`), a `::after`
       jest wolny — zmierzone na :10003. Tor i wypełnienie kodujemy więc gradientem
       o twardym stopie. Numer kroku przychodzi z `data-krok` widżetu przez `:has()`. */
    header.elementor-location-header:has(.prnt-checkout-steps[data-krok]) {
        position: relative;
    }
    header.elementor-location-header:has(.prnt-checkout-steps[data-krok])::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        /* −1.5px, żeby pasek PRZYKRYŁ `border-bottom` headera, a nie dorysował
           drugiej linii pod nim. */
        bottom: -1.5px;
        height: 3px;
        /* Bez tego wypełnienie znika przy krokach, których nie znamy (np. gdyby
           doszedł czwarty) — zostaje czysty tor. */
        background: var(--prt-line, #E3E7F2);
        pointer-events: none;
    }
    header.elementor-location-header:has(.prnt-checkout-steps[data-krok="1"])::after {
        background: linear-gradient(to right, var(--prt-navy, #101B54) 0 33.333%, var(--prt-line, #E3E7F2) 33.333% 100%);
    }
    header.elementor-location-header:has(.prnt-checkout-steps[data-krok="2"])::after {
        background: linear-gradient(to right, var(--prt-navy, #101B54) 0 66.667%, var(--prt-line, #E3E7F2) 66.667% 100%);
    }
    header.elementor-location-header:has(.prnt-checkout-steps[data-krok="3"])::after {
        background: var(--prt-navy, #101B54);
    }
}