html {
    overflow-y: scroll;
}

body {
    font-family: Arial, sans-serif;
    max-width: 700px;
    margin: 40px auto;
    padding: 20px;
}

h1 {
    text-align: center;
}

.dni {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

button {
    padding: 12px 18px;
    font-size: 16px;
    cursor: pointer;
}

.produkt {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
}

.produkt h3 {
    margin-top: 0;
}

.kategoria {
    margin-top: 35px;
    margin-bottom: 15px;
    border-bottom: 2px solid #333;
    padding-bottom: 8px;
}

.ilosc {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}

.ilosc button {
    width: 45px;
    height: 45px;
    font-size: 24px;
}

.ilosc span {
    font-size: 20px;
    font-weight: bold;
    min-width: 25px;
    text-align: center;
}

.koszyk {
    position: sticky;
    bottom: 0;

    background: white;
    border-top: 2px solid #333;

    padding: 15px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 30px;
}

.koszyk span {
    font-weight: bold;
    font-size: 18px;
}

.koszyk button {
    font-weight: bold;
}

.dzien-koszyka {
    margin-bottom: 30px;
}

.dzien-koszyka h3 {
    border-bottom: 2px solid #333;
    padding-bottom: 8px;
}

.produkt-koszyk {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 12px 0;
    border-bottom: 1px solid #ddd;
}

.suma-koszyka {
    font-size: 24px;
    font-weight: bold;

    margin: 30px 0;
    text-align: right;
}

.formularz {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.formularz label {
    display: flex;
    flex-direction: column;
    gap: 8px;

    font-weight: bold;
}

.formularz input,
.formularz select {
    padding: 12px;
    font-size: 16px;

    border: 1px solid #ccc;
    border-radius: 8px;
}

.przycisk-glowny {
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
}

.informacja-platnosc {
    padding: 15px;
    background: #f3f3f3;
    border-radius: 8px;
}

.dane-klienta {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 25px;
}

.suma-dnia {
    margin-top: 15px;
    text-align: right;
}

.zamkniete-zamowienia {
    padding: 18px;
    margin: 20px 0;

    border: 2px solid #333;
    border-radius: 10px;

    background: #f3f3f3;

    font-weight: bold;
}

button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.potwierdzenie-zamowienia {
    text-align: center;
    padding: 40px 20px;
}

.potwierdzenie-zamowienia h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.potwierdzenie-zamowienia p {
    font-size: 18px;
}

.panel-kierowcy {
    max-width: 600px;
    margin: 0 auto;
}

.karta-kierowcy {
    padding: 20px;
    margin-bottom: 25px;

    border: 1px solid #ddd;
    border-radius: 10px;

    text-align: center;
}

.karta-kierowcy strong {
    font-size: 24px;
}

.menu-panelu {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dni-panelu {
    display: flex;
    gap: 8px;
    overflow-x: auto;

    margin-bottom: 20px;
    padding-bottom: 5px;
}

.przycisk-dnia-panel {
    white-space: nowrap;

    padding: 10px 14px;

    border: 1px solid #ccc;
    border-radius: 8px;

    cursor: pointer;
}

.grupa-punktu {
    margin-bottom: 30px;
}

.grupa-punktu>h2 {
    margin-bottom: 10px;
}

.karta-klienta {
    border: 1px solid #ddd;
    border-radius: 10px;

    padding: 15px;
    margin-bottom: 10px;
}

.karta-klienta p {
    margin: 5px 0;
}

.podsumowanie-trasy {
    border: 2px solid #222;
    border-radius: 12px;

    padding: 18px;
    margin-bottom: 30px;
}

.podsumowanie-trasy h2 {
    margin-top: 0;
}

.podsumowanie-punktu {
    border: 1px solid #bbb;
    border-radius: 10px;

    padding: 15px;
    margin-bottom: 15px;
}

.wiersz-podsumowania {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    padding: 8px 0;

    border-bottom: 1px solid #ddd;
}

.razem-podsumowanie {
    display: flex;
    justify-content: space-between;

    margin-top: 12px;
    padding-top: 10px;

    font-size: 18px;
}

.wiersz-kompletacji {
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
}

.nazwa-kompletacji {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.ilosc-kompletacji {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 10px;
}

.ilosc-kompletacji input {
    width: 70px;
    padding: 8px;

    font-size: 18px;
}

.wynik-kompletacji {
    margin-top: 10px;
}

.klient-do-kontaktu {
    margin-top: 10px;
    padding: 10px;

    border: 1px solid #ddd;
    border-radius: 8px;
}

.pozycja-klienta.brak-calkowity {
    border: 2px solid #b00020;
    border-radius: 8px;
    padding: 10px;
}

.pozycja-klienta.brak-calkowity .ilosc-klienta-do-wydania {
    font-weight: bold;
}

.pozycja-klienta.brak-calkowity small {
    display: block;
    margin-top: 4px;
}

.pozycja-klienta.brak-czesciowy {
    border: 2px solid #d18b00;
    border-radius: 8px;
    padding: 10px;
}

.ilosc-klienta-do-wydania {
    font-weight: bold;
}

.karta-problemu {
    border: 2px solid #b00020;
    border-radius: 10px;

    padding: 15px;
    margin-bottom: 15px;
}

.karta-problemu h3 {
    margin-top: 0;
}

.problem-produkt {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    padding: 8px 0;

    border-bottom: 1px solid #ddd;
}

.akcje-problemu {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    margin-top: 15px;
}

#noweHaslo,
#powtorzHaslo {
    box-sizing: border-box;
    width: 100%;

    padding: 12px;
    margin-bottom: 12px;

    font-size: 16px;
}

#bladZmianyHasla {
    font-weight: bold;
}

.status-skontaktowano {
    padding: 10px;

    border: 1px solid #999;
    border-radius: 8px;

    font-weight: bold;
}

.status-skontaktowano small {
    font-weight: normal;
}

.przycisk-skontaktowano {
    padding: 10px 14px;

    font-weight: bold;
}

/* =========================================
   RĘCZNE DODAWANIE ZAMÓWIENIA
   ========================================= */

.reczne-zamowienie {
    padding-bottom: 20px;
}

.reczne-zamowienie>label {
    display: block;

    margin-top: 16px;
    margin-bottom: 6px;

    font-weight: bold;
}

.reczne-zamowienie>input,
.reczne-zamowienie>select {
    box-sizing: border-box;
    width: 100%;

    padding: 14px;

    font-size: 17px;

    border: 1px solid #ccc;
    border-radius: 10px;
}


.reczny-produkt {
    padding: 16px;
    margin-bottom: 12px;

    border: 1px solid #ddd;
    border-radius: 12px;
}

.reczny-produkt.wybrany {
    border: 2px solid #222;
}


.reczny-produkt-opis {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.reczny-produkt-opis strong {
    font-size: 18px;
}

.reczny-produkt-opis small {
    line-height: 1.4;
}

.reczny-produkt-opis span {
    font-weight: bold;
}


.reczny-sterowanie {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: 14px;

    margin-top: 14px;
}

.reczny-sterowanie button {
    width: 52px;
    height: 52px;

    padding: 0;

    font-size: 28px;
    font-weight: bold;

    border-radius: 12px;
}

.reczny-sterowanie span {
    min-width: 38px;

    text-align: center;

    font-size: 24px;
    font-weight: bold;
}


.reczny-koszyk {
    position: sticky;
    bottom: 0;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 12px 0;

    background: white;

    border-top: 2px solid #222;
}

.reczny-koszyk-info {
    display: flex;
    flex-direction: column;

    min-width: 110px;
}

.reczny-koszyk-info strong {
    font-size: 16px;
}

.reczny-koszyk-info span {
    margin-top: 3px;

    font-size: 18px;
    font-weight: bold;
}

.reczny-koszyk .przycisk-glowny {
    flex: 1;
}

.przycisk-anuluj-zamowienie {
    width: 100%;

    margin-top: 14px;
    padding: 10px;

    font-weight: bold;
}

.przycisk-anuluj-tydzien {
    width: 100%;

    margin-top: 8px;
    padding: 10px;

    font-weight: bold;
}

.potwierdzenie-anulowania {
    max-width: 600px;
    margin: 0 auto;
}

.karta-anulowanego-klienta {
    padding: 15px;
    margin: 20px 0;

    border: 2px solid #222;
    border-radius: 10px;
}

.karta-anulowanego-klienta strong {
    font-size: 20px;
}

.anulowanie-dzien {
    padding: 15px;
    margin-bottom: 12px;

    border: 1px solid #ddd;
    border-radius: 10px;
}

.anulowanie-dzien h3 {
    margin-top: 0;
}

.anulowanie-produkt {
    display: flex;
    justify-content: space-between;

    gap: 15px;

    padding: 6px 0;
}

.anulowanie-razem-dzien {
    margin-top: 10px;
    padding-top: 8px;

    border-top: 1px solid #ddd;

    text-align: right;
}

.anulowanie-razem {
    margin: 20px 0;

    font-size: 20px;
    font-weight: bold;
}

.przycisk-anuluj-tydzien-potwierdz {
    width: 100%;

    margin-top: 12px;
    padding: 15px;

    font-weight: bold;
}

/* =========================================
   PANEL ADMINISTRATORA
   ========================================= */

.panel-admina {
    max-width: 600px;
    margin: 0 auto;
}

.karta-admina {
    padding: 18px;
    margin-bottom: 20px;

    border: 2px solid #222;
    border-radius: 12px;
}

.karta-kierowcy-admin {
    padding: 16px;
    margin-bottom: 12px;

    border: 1px solid #ccc;
    border-radius: 12px;
}

.karta-kierowcy-admin h3 {
    margin-top: 0;
}

#logowanieAdmina {
    display: flex;
    flex-direction: column;

    gap: 12px;

    max-width: 500px;

    margin: 0 auto;
}

#logowanieAdmina input {
    box-sizing: border-box;

    width: 100%;

    padding: 14px;

    font-size: 17px;

    border: 1px solid #ccc;
    border-radius: 10px;
}

.edycja-kierowcy {
    max-width: 600px;
    margin: 0 auto;
}

.edycja-kierowcy label {
    display: block;

    margin-top: 16px;
    margin-bottom: 6px;

    font-weight: bold;
}

.edycja-kierowcy input,
.edycja-kierowcy select {
    box-sizing: border-box;

    width: 100%;

    padding: 12px;

    font-size: 16px;

    border: 1px solid #ccc;
    border-radius: 10px;
}

.edycja-kierowcy-aktywny {
    display: flex !important;
    align-items: center;

    gap: 10px;

    padding: 14px 0;
}

.edycja-kierowcy-aktywny input {
    width: auto;
}

.dodawanie-kierowcy,
.nowy-kierowca-gotowy {
    max-width: 600px;
    margin: 0 auto;
}

.dodawanie-kierowcy label {
    display: block;

    margin-top: 16px;
    margin-bottom: 6px;

    font-weight: bold;
}

.dodawanie-kierowcy input,
.dodawanie-kierowcy select {
    box-sizing: border-box;

    width: 100%;

    padding: 12px;

    font-size: 16px;

    border: 1px solid #ccc;
    border-radius: 10px;
}

.haslo-nowego-kierowcy {
    display: flex;
    gap: 8px;
}

.haslo-nowego-kierowcy input {
    flex: 1;
}

.dane-logowania-kierowcy {
    padding: 16px;

    margin: 18px 0;

    border: 2px solid #222;
    border-radius: 12px;
}

.dane-logowania-kierowcy p {
    margin-bottom: 4px;
}

.dane-logowania-kierowcy strong {
    display: block;

    margin-bottom: 14px;

    font-size: 18px;
}

.karta-trasy-admin {
    padding: 16px;
    margin-bottom: 20px;

    border: 2px solid #222;
    border-radius: 12px;
}

.karta-punktu-admin {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 12px;
    margin-top: 10px;

    border: 1px solid #ccc;
    border-radius: 10px;
}

.edycja-punktu {
    max-width: 600px;
    margin: 0 auto;
}

.edycja-punktu label {
    display: block;

    margin-top: 16px;
    margin-bottom: 6px;

    font-weight: bold;
}

.edycja-punktu input,
.edycja-punktu select {
    box-sizing: border-box;

    width: 100%;

    padding: 12px;

    font-size: 16px;

    border: 1px solid #ccc;
    border-radius: 10px;
}

.edycja-punktu-aktywny {
    display: flex !important;
    align-items: center;

    gap: 10px;
}

.edycja-punktu-aktywny input {
    width: auto;
}

.karta-komunikatu-admin {
    padding: 16px;

    margin: 14px 0;

    border: 1px solid #ccc;
    border-radius: 12px;
}

.dodawanie-komunikatu {
    max-width: 600px;
    margin: 0 auto;
}

.dodawanie-komunikatu label {
    display: block;

    margin-top: 16px;
    margin-bottom: 6px;

    font-weight: bold;
}

.dodawanie-komunikatu input,
.dodawanie-komunikatu select,
.dodawanie-komunikatu textarea {
    box-sizing: border-box;

    width: 100%;

    padding: 12px;

    font-size: 16px;

    border: 1px solid #ccc;
    border-radius: 10px;
}

.komunikaty-kierowcy {
    margin-bottom: 24px;
}

.komunikaty-kierowcy>h2 {
    margin-bottom: 12px;
}

.komunikat-kierowcy {
    padding: 14px;

    margin-bottom: 10px;

    border: 2px solid #ccc;
    border-radius: 12px;
}

.komunikat-kierowcy h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

.komunikat-kierowcy p {
    margin-bottom: 8px;
}

.komunikat-info {
    border-left-width: 6px;
}

.komunikat-warning {
    border-left-width: 8px;
}

.komunikat-critical {
    border-left-width: 10px;
    font-weight: bold;
}

.menu-tygodniowe-admin {
    max-width: 800px;
    margin: 0 auto;
}

.menu-tygodniowe-admin textarea {
    box-sizing: border-box;

    width: 100%;

    padding: 14px;

    font-family: monospace;
    font-size: 14px;

    border: 1px solid #ccc;
    border-radius: 10px;
}

.podsumowanie-importu-menu {
    margin-top: 24px;
}

.podglad-dnia-menu {
    padding: 14px;
    margin: 14px 0;

    border: 1px solid #ccc;
    border-radius: 12px;
}

.podglad-produktu-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 8px 0;

    border-bottom: 1px solid #eee;
}

.podglad-produktu-menu small {
    display: block;
}

.blad-importu-menu {
    margin-top: 20px;

    padding: 15px;

    border: 2px solid #222;
    border-radius: 12px;
}

.import-menu-bez-zapisu {
    padding: 14px;
    margin: 20px 0;

    border: 2px dashed #999;
    border-radius: 10px;

    font-weight: bold;
}

.publikacja-menu-sukces {
    margin-top: 24px;
    padding: 18px;

    border: 2px solid #222;
    border-radius: 12px;
}

.wybierz-kategorie-info {
    font-size: 18px;
    font-weight: bold;

    margin-bottom: 14px;
}


.siatka-kategorii {
    display: grid;

    grid-template-columns:
        repeat(2,
            minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 24px;
}


.kafelek-kategorii {
    width: 100%;

    min-height: 90px;

    margin: 0;
    padding: 14px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    text-align: center;

    border: 2px solid #bbb;
    border-radius: 14px;

    background: white;

    cursor: pointer;
}


.kafelek-kategorii strong {
    font-size: 16px;
}


.kafelek-kategorii small {
    font-size: 13px;
}


.kategoria-wybrane {
    margin-top: 5px;

    padding: 4px 8px;

    border-radius: 999px;

    background: #222;
    color: white;

    font-size: 12px;
    font-weight: bold;
}


.przycisk-powrot-kategorie {
    width: 100%;

    margin-top: 22px;
    padding: 14px;

    font-size: 17px;
    font-weight: bold;
}


.przycisk-powrot-kategorie.gora {
    margin-top: 0;
    margin-bottom: 16px;
}


@media (max-width: 430px) {

    .siatka-kategorii {
        grid-template-columns: 1fr;
    }


    .kafelek-kategorii {
        min-height: 72px;
    }

}

.dni {
    display: grid;

    grid-template-columns:
        repeat(5,
            minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 20px;
}


.przycisk-dnia {
    height: 68px;

    padding: 8px 10px;
    margin: 0;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    line-height: 1.2;

    border: 2px solid #bbb;
    border-radius: 12px;

    background: white;

    font-size: 15px;
    font-weight: bold;

    cursor: pointer;
}


.przycisk-dnia.aktywny-dzien {
    border-color: #222;

    outline: 2px solid #222;
    outline-offset: -2px;

    font-weight: 900;
}


@media (max-width: 600px) {

    .dni {
        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));
    }


    .przycisk-dnia {
        height: 72px;

        font-size: 16px;
    }


    .przycisk-dnia:last-child:nth-child(odd) {
        grid-column:
            1 / -1;
    }

}

.kategoria-menu-admin {
    margin-top: 28px;
    margin-bottom: 10px;
}

.karta-pozycji-menu-admin {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 14px;

    margin-bottom: 10px;

    border: 1px solid #ccc;
    border-radius: 12px;

    background: white;
}

.opis-pozycji-menu-admin {
    display: flex;
    flex-direction: column;

    gap: 4px;

    flex: 1;
}

.opis-pozycji-menu-admin small {
    opacity: 0.75;
}

.pozycja-menu-wylaczona {
    opacity: 0.55;
}

.przycisk-wylacz-menu,
.przycisk-wlacz-menu,
.przycisk-zamien-menu,
.przycisk-usun-z-menu {
    width: auto;

    flex: 0 0 auto;

    margin: 0;

    padding: 10px 12px;

    font-weight: bold;
}

@media (max-width: 600px) {

    .karta-pozycji-menu-admin {
        flex-direction: column;
        align-items: stretch;
    }

    .przycisk-wylacz-menu,
    .przycisk-wlacz-menu,
    .przycisk-zamien-menu,
    .przycisk-usun-z-menu {
        width: 100%;
    }
}

.akcje-pozycji-menu-admin {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.przycisk-zamien-menu {
    width: auto;
    margin: 0;
    padding: 10px 12px;

    font-weight: bold;
}

.formularz-pozycji-menu-admin {
    max-width: 650px;
    margin: 0 auto;
}

.formularz-pozycji-menu-admin label {
    display: block;

    margin-top: 16px;
    margin-bottom: 5px;

    font-weight: bold;
}

.formularz-pozycji-menu-admin input,
.formularz-pozycji-menu-admin select,
.formularz-pozycji-menu-admin textarea {
    width: 100%;
    box-sizing: border-box;
}

.stara-pozycja-menu {
    margin: 16px 0;
    padding: 14px;

    border: 2px solid #aaa;
    border-radius: 10px;
}

@media (max-width: 600px) {

    .akcje-pozycji-menu-admin {
        width: 100%;
    }

    .przycisk-zamien-menu {
        width: 100%;
    }

}

.problem-pozycji-menu {
    margin-top: 6px;
    padding: 10px;

    border: 2px solid #b00020;
    border-radius: 8px;

    font-weight: bold;
}

.problem-pozycji-menu small {
    display: block;

    margin-top: 5px;

    font-weight: normal;
}

.pozycja-klienta[data-problem-menu="true"] {
    border: 2px solid #b00020;
    opacity: 0.8;
}

.kategoria-kompletacji {
    margin-top: 18px;
    margin-bottom: 8px;
    padding: 8px 10px;

    font-weight: bold;
    font-size: 16px;

    border-bottom: 2px solid #222;
}

.kategoria-klienta {
    margin-top: 12px;
    margin-bottom: 6px;
    padding-bottom: 4px;

    font-weight: bold;
    font-size: 14px;

    border-bottom: 1px solid #999;
}

.kategoria-recznego-zamowienia {
    margin-top: 18px;
    margin-bottom: 8px;
    padding: 8px 10px;

    font-weight: bold;
    font-size: 16px;

    border-bottom: 2px solid #222;
}

/* =========================================================
   ŚLIMAK PREMIUM — STRONA KLIENTA
   Wszystko jest ograniczone do .strona-klienta,
   więc panel kierowcy i admina pozostają bez zmian.
   ========================================================= */


.strona-klienta {

    --slimak-bg:
        #f4f3ed;

    --slimak-card:
        rgba(255, 255, 255, 0.88);

    --slimak-dark:
        #111711;

    --slimak-dark-soft:
        #1c251c;

    --slimak-green:
        #bce35d;

    --slimak-green-dark:
        #8db832;

    --slimak-muted:
        #697069;

    --slimak-border:
        rgba(17, 23, 17, 0.10);

    --slimak-shadow:
        0 18px 50px rgba(17, 23, 17, 0.10);


    max-width: none;

    margin: 0;

    padding:
        0 18px 40px;

    box-sizing:
        border-box;


    min-height:
        100vh;


    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    color:
        var(--slimak-dark);


    background:
        radial-gradient(circle at 10% 0%,
            rgba(188, 227, 93, 0.22),
            transparent 32%),

        radial-gradient(circle at 90% 20%,
            rgba(188, 227, 93, 0.10),
            transparent 28%),

        var(--slimak-bg);
}



/* ================================
   GŁÓWNY KONTENER
   ================================ */

.strona-klienta .app-shell {

    width:
        100%;

    max-width:
        760px;

    margin:
        0 auto;

}



/* ================================
   HERO
   ================================ */

.strona-klienta .hero-slimaka {

    position:
        relative;

    overflow:
        hidden;


    margin:
        18px 0 28px;

    padding:
        30px;


    border:
        1px solid rgba(255,
            255,
            255,
            0.10);

    border-radius:
        30px;


    background:
        linear-gradient(145deg,
            #101610,
            #1b251b);


    color:
        white;


    box-shadow:
        0 24px 65px rgba(17,
            23,
            17,
            0.22);


    isolation:
        isolate;
}


.strona-klienta .hero-slimaka::before {

    content:
        "";

    position:
        absolute;

    width:
        260px;

    height:
        260px;


    top:
        -150px;

    right:
        -90px;


    border-radius:
        50%;


    background:
        var(--slimak-green);


    opacity:
        0.14;


    filter:
        blur(4px);


    z-index:
        -1;
}


.strona-klienta .hero-slimaka::after {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;


    bottom:
        -130px;

    left:
        -60px;


    border-radius:
        50%;


    background:
        var(--slimak-green);


    opacity:
        0.08;


    z-index:
        -1;
}



/* ================================
   LOGO
   ================================ */

.strona-klienta .hero-logo {

    width:
        74px;

    height:
        74px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    margin-bottom:
        24px;


    border:
        1px solid rgba(255,
            255,
            255,
            0.14);

    border-radius:
        22px;


    background:
        rgba(255,
            255,
            255,
            0.08);


    font-size:
        42px;


    box-shadow:
        inset 0 1px 0 rgba(255,
            255,
            255,
            0.10);


    animation:
        wejscieSlimaka 700ms cubic-bezier(.2,
            .8,
            .2,
            1);
}



@keyframes wejscieSlimaka {

    from {

        opacity:
            0;

        transform:
            translateX(-25px) rotate(-8deg);

    }

    to {

        opacity:
            1;

        transform:
            translateX(0) rotate(0);

    }

}



/* ================================
   HERO TEKST
   ================================ */

.strona-klienta .hero-eyebrow {

    display:
        block;


    margin-bottom:
        10px;


    color:
        var(--slimak-green);


    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.16em;
}


.strona-klienta .hero-slimaka h1 {

    margin:
        0;


    text-align:
        left;


    font-size:
        clamp(34px,
            8vw,
            56px);


    line-height:
        0.98;


    letter-spacing:
        -0.045em;
}


.strona-klienta .hero-tekst p {

    max-width:
        510px;


    margin:
        18px 0 0;


    color:
        rgba(255,
            255,
            255,
            0.70);


    font-size:
        16px;

    line-height:
        1.55;
}



/* ================================
   STATUSY
   ================================ */

.strona-klienta .hero-statusy {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;


    margin-top:
        26px;
}


.strona-klienta .hero-statusy span {

    padding:
        8px 11px;


    border:
        1px solid rgba(255,
            255,
            255,
            0.10);

    border-radius:
        999px;


    background:
        rgba(255,
            255,
            255,
            0.06);


    font-size:
        12px;

    font-weight:
        650;
}



/* ================================
   SEKCJA DNI
   ================================ */

.strona-klienta .sekcja-dni {

    margin-bottom:
        28px;
}


.strona-klienta .naglowek-sekcji {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;


    gap:
        16px;


    margin-bottom:
        14px;
}


.strona-klienta .naglowek-sekcji>div {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.strona-klienta .numer-kroku {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    width:
        34px;

    height:
        34px;


    border-radius:
        11px;


    background:
        var(--slimak-dark);

    color:
        var(--slimak-green);


    font-size:
        12px;

    font-weight:
        900;
}


.strona-klienta .naglowek-sekcji h2 {

    margin:
        0;


    font-size:
        23px;

    letter-spacing:
        -0.03em;
}


.strona-klienta .naglowek-pomocniczy {

    color:
        var(--slimak-muted);


    font-size:
        12px;

    font-weight:
        600;
}



/* ================================
   PRZYCISKI DNI
   ================================ */

.strona-klienta .dni {

    display:
        grid;


    grid-template-columns:
        repeat(5,
            minmax(0,
                1fr));


    gap:
        8px;


    margin:
        0;
}


.strona-klienta .przycisk-dnia {

    position:
        relative;


    height:
        72px;


    padding:
        8px;


    border:
        1px solid var(--slimak-border);

    border-radius:
        16px;


    background:
        rgba(255,
            255,
            255,
            0.72);


    color:
        var(--slimak-dark);


    font-size:
        14px;

    font-weight:
        750;


    box-shadow:
        0 6px 18px rgba(17,
            23,
            17,
            0.04);


    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease,
        border-color 160ms ease;
}


.strona-klienta .przycisk-dnia:hover {

    transform:
        translateY(-2px);


    box-shadow:
        0 12px 24px rgba(17,
            23,
            17,
            0.08);
}


.strona-klienta .przycisk-dnia.aktywny-dzien {

    background:
        var(--slimak-dark);


    color:
        white;


    border-color:
        var(--slimak-dark);


    outline:
        none;


    box-shadow:
        0 12px 30px rgba(17,
            23,
            17,
            0.18);


    transform:
        translateY(-2px);
}



/* ================================
   MENU
   ================================ */

.strona-klienta .menu-klienta {

    min-height:
        280px;


    animation:
        wejscieWidoku 280ms ease;
}


@keyframes wejscieWidoku {

    from {

        opacity:
            0;

        transform:
            translateY(8px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}



/* ================================
   KAFELKI KATEGORII
   ================================ */

.strona-klienta .siatka-kategorii {

    gap:
        12px;
}


.strona-klienta .kafelek-kategorii {

    min-height:
        110px;


    padding:
        18px;


    border:
        1px solid var(--slimak-border);

    border-radius:
        20px;


    background:
        var(--slimak-card);


    color:
        var(--slimak-dark);


    box-shadow:
        0 8px 24px rgba(17,
            23,
            17,
            0.06);


    backdrop-filter:
        blur(10px);


    transition:
        transform 170ms ease,
        box-shadow 170ms ease,
        border-color 170ms ease;
}


.strona-klienta .kafelek-kategorii:hover {

    transform:
        translateY(-3px);


    border-color:
        rgba(141,
            184,
            50,
            0.55);


    box-shadow:
        0 16px 32px rgba(17,
            23,
            17,
            0.10);
}


.strona-klienta .kafelek-kategorii:active {

    transform:
        scale(0.98);
}


.strona-klienta .kafelek-kategorii strong {

    font-size:
        17px;


    letter-spacing:
        -0.02em;
}


.strona-klienta .kafelek-kategorii small {

    color:
        var(--slimak-muted);
}


.strona-klienta .kategoria-wybrane {

    background:
        var(--slimak-green);


    color:
        var(--slimak-dark);
}



/* ================================
   PRODUKTY
   ================================ */

.strona-klienta .produkt {

    position:
        relative;


    overflow:
        hidden;


    padding:
        20px;


    margin-bottom:
        12px;


    border:
        1px solid var(--slimak-border);

    border-radius:
        20px;


    background:
        rgba(255,
            255,
            255,
            0.82);


    box-shadow:
        0 8px 24px rgba(17,
            23,
            17,
            0.055);


    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}


.strona-klienta .produkt-wybrany {

    border-color:
        rgba(141,
            184,
            50,
            0.75);


    box-shadow:
        0 12px 30px rgba(141,
            184,
            50,
            0.13);
}


.strona-klienta .produkt h3 {

    margin:
        0 0 7px;


    font-size:
        19px;


    letter-spacing:
        -0.025em;
}


.strona-klienta .produkt p {

    margin:
        0 0 12px;


    color:
        var(--slimak-muted);


    line-height:
        1.45;
}


.strona-klienta .produkt>strong {

    display:
        inline-block;


    margin-top:
        3px;


    font-size:
        18px;
}



/* ================================
   PLUS / MINUS
   ================================ */

.strona-klienta .ilosc {

    justify-content:
        flex-end;


    gap:
        10px;
}


.strona-klienta .ilosc button {

    width:
        46px;

    height:
        46px;


    padding:
        0;


    border:
        none;

    border-radius:
        14px;


    background:
        var(--slimak-dark);


    color:
        white;


    font-size:
        25px;


    box-shadow:
        0 8px 18px rgba(17,
            23,
            17,
            0.14);


    transition:
        transform 100ms ease;
}


.strona-klienta .ilosc button:active {

    transform:
        scale(0.90);
}


.strona-klienta .ilosc button:last-child {

    background:
        var(--slimak-green);


    color:
        var(--slimak-dark);
}


.strona-klienta .ilosc span {

    min-width:
        38px;


    font-size:
        23px;
}



/* ================================
   NAGŁÓWEK KATEGORII
   ================================ */

.strona-klienta .kategoria {

    margin:
        10px 0 18px;


    padding-bottom:
        12px;


    border-bottom:
        1px solid var(--slimak-border);


    font-size:
        27px;


    letter-spacing:
        -0.04em;
}



/* ================================
   ZWYKŁE BUTTONY
   ================================ */

.strona-klienta button {

    border:
        1px solid var(--slimak-border);

    border-radius:
        14px;


    background:
        rgba(255,
            255,
            255,
            0.82);


    color:
        var(--slimak-dark);


    transition:
        transform 120ms ease,
        opacity 120ms ease;
}


.strona-klienta button:active {

    transform:
        scale(0.98);
}



/* ================================
   PRIMARY BUTTON
   ================================ */

.strona-klienta .przycisk-glowny,
.strona-klienta #przyciskKoszyka {

    border:
        none;


    background:
        var(--slimak-green);


    color:
        var(--slimak-dark);


    font-weight:
        850;


    box-shadow:
        0 10px 24px rgba(141,
            184,
            50,
            0.20);
}



/* ================================
   STICKY KOSZYK
   ================================ */

.strona-klienta .koszyk {

    position:
        sticky;


    bottom:
        12px;


    z-index:
        50;


    display:
        grid;


    grid-template-columns:
        auto 1fr auto;


    gap:
        12px;


    align-items:
        center;


    margin:
        26px 0 14px;


    padding:
        12px;


    border:
        1px solid rgba(255,
            255,
            255,
            0.30);

    border-radius:
        22px;


    background:
        rgba(17,
            23,
            17,
            0.94);


    color:
        white;


    box-shadow:
        0 18px 50px rgba(17,
            23,
            17,
            0.25);


    backdrop-filter:
        blur(16px);
}


.strona-klienta .koszyk-ikona {

    width:
        44px;

    height:
        44px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    border-radius:
        14px;


    background:
        rgba(255,
            255,
            255,
            0.08);


    font-size:
        21px;
}


.strona-klienta .koszyk span {

    font-size:
        14px;


    line-height:
        1.35;
}


.strona-klienta #przyciskKoszyka {

    display:
        flex;


    align-items:
        center;


    gap:
        7px;


    padding:
        12px 15px;
}


.strona-klienta .strzalka-przycisku {

    font-size:
        18px;
}



/* ================================
   FORMULARZE
   ================================ */

.strona-klienta .formularz,
.strona-klienta .dane-klienta,
.strona-klienta .dzien-koszyka {

    padding:
        20px;


    border:
        1px solid var(--slimak-border);

    border-radius:
        20px;


    background:
        var(--slimak-card);


    box-shadow:
        0 10px 30px rgba(17,
            23,
            17,
            0.05);
}


.strona-klienta .formularz input,
.strona-klienta .formularz select {

    box-sizing:
        border-box;


    width:
        100%;


    min-height:
        52px;


    padding:
        13px 15px;


    border:
        1px solid var(--slimak-border);

    border-radius:
        14px;


    background:
        rgba(255,
            255,
            255,
            0.94);


    outline:
        none;


    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}


.strona-klienta .formularz input:focus,
.strona-klienta .formularz select:focus {

    border-color:
        var(--slimak-green-dark);


    box-shadow:
        0 0 0 4px rgba(188,
            227,
            93,
            0.20);
}



/* ================================
   INFORMACJA O PŁATNOŚCI
   ================================ */

.strona-klienta .informacja-platnosc {

    border:
        1px solid rgba(141,
            184,
            50,
            0.25);


    background:
        rgba(188,
            227,
            93,
            0.14);


    line-height:
        1.5;
}



/* ================================
   POTWIERDZENIE ZAMÓWIENIA
   ================================ */

.strona-klienta .potwierdzenie-zamowienia {

    margin-top:
        25px;


    padding:
        50px 24px;


    border-radius:
        28px;


    background:
        var(--slimak-dark);


    color:
        white;


    box-shadow:
        var(--slimak-shadow);


    animation:
        sukcesZamowienia 500ms cubic-bezier(.2,
            .8,
            .2,
            1);
}


@keyframes sukcesZamowienia {

    from {

        opacity:
            0;

        transform:
            translateY(18px) scale(0.97);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0) scale(1);

    }

}


.strona-klienta .potwierdzenie-zamowienia h2 {

    font-size:
        32px;


    letter-spacing:
        -0.04em;
}


.strona-klienta .potwierdzenie-zamowienia p {

    color:
        rgba(255,
            255,
            255,
            0.72);
}



/* ================================
   ZAMKNIĘTE ZAMÓWIENIA
   ================================ */

.strona-klienta .zamkniete-zamowienia {

    border:
        1px solid rgba(17,
            23,
            17,
            0.12);

    border-radius:
        18px;


    background:
        rgba(255,
            255,
            255,
            0.72);


    box-shadow:
        0 8px 25px rgba(17,
            23,
            17,
            0.05);
}



/* ================================
   STOPKA
   ================================ */

.strona-klienta .stopka-klienta {

    display:
        flex;


    flex-direction:
        column;


    align-items:
        center;


    gap:
        4px;


    padding:
        30px 10px 20px;


    color:
        var(--slimak-muted);
}


.strona-klienta .stopka-klienta span {

    font-weight:
        850;


    color:
        var(--slimak-dark);
}



/* ================================
   MOBILE
   ================================ */

@media (max-width: 600px) {

    .strona-klienta {

        padding:
            0 12px 30px;

    }


    .strona-klienta .hero-slimaka {

        margin-top:
            10px;


        padding:
            24px;


        border-radius:
            24px;

    }


    .strona-klienta .hero-logo {

        width:
            62px;

        height:
            62px;


        font-size:
            36px;

    }


    .strona-klienta .hero-slimaka h1 {

        font-size:
            39px;

    }


    .strona-klienta .naglowek-pomocniczy {

        display:
            none;

    }


    .strona-klienta .dni {

        grid-template-columns:
            repeat(2,
                minmax(0,
                    1fr));

    }


    .strona-klienta .przycisk-dnia {

        height:
            66px;

    }


    .strona-klienta .przycisk-dnia:last-child:nth-child(odd) {

        grid-column:
            1 / -1;

    }


    .strona-klienta .siatka-kategorii {

        grid-template-columns:
            repeat(2,
                minmax(0,
                    1fr));

    }


    .strona-klienta .kafelek-kategorii {

        min-height:
            100px;


        padding:
            12px;

    }


    .strona-klienta .koszyk {

        grid-template-columns:
            auto 1fr;


        border-radius:
            20px;

    }


    .strona-klienta #przyciskKoszyka {

        grid-column:
            1 / -1;


        justify-content:
            center;


        width:
            100%;

    }

}



/* ================================
   DOSTĘPNOŚĆ / REDUCED MOTION
   ================================ */

@media (prefers-reduced-motion: reduce) {

    .strona-klienta *,
    .strona-klienta *::before,
    .strona-klienta *::after {

        animation:
            none !important;


        transition:
            none !important;

    }

}

.strona-klienta .menu-klienta {
    padding-bottom: 120px;
}

@media (max-width: 600px) {

    .strona-klienta .menu-klienta {
        padding-bottom: 150px;
    }

}

/* =========================================================
   ŻYWY KOSZYK
   ========================================================= */

.strona-klienta .koszyk {

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}


.strona-klienta .koszyk-aktywny {

    border-color:
        rgba(188,
            227,
            93,
            0.55);


    box-shadow:
        0 20px 55px rgba(17,
            23,
            17,
            0.30),

        0 0 0 1px rgba(188,
            227,
            93,
            0.12);
}


.strona-klienta .koszyk-podskok {

    animation:
        koszykPodskok 450ms cubic-bezier(.2,
            .8,
            .2,
            1);
}


@keyframes koszykPodskok {

    0% {

        transform:
            translateY(0) scale(1);

    }


    35% {

        transform:
            translateY(-7px) scale(1.025);

    }


    65% {

        transform:
            translateY(2px) scale(0.995);

    }


    100% {

        transform:
            translateY(0) scale(1);

    }

}


.strona-klienta #podsumowanieKoszyka {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


.strona-klienta #podsumowanieKoszyka strong {

    font-size:
        15px;
}


.strona-klienta .koszyk-separator {

    opacity:
        0.35;
}

/* =========================================================
   CHECKOUT PREMIUM
   ========================================================= */

.strona-klienta .checkout-kroki {

    display:
        grid;

    grid-template-columns:
        repeat(3,
            1fr);

    gap:
        8px;

    margin:
        10px 0 30px;
}


.strona-klienta .checkout-krok {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        7px;


    position:
        relative;


    color:
        var(--slimak-muted);


    font-size:
        12px;

    font-weight:
        750;
}


.strona-klienta .checkout-krok::after {

    content:
        "";

    position:
        absolute;

    top:
        17px;

    left:
        calc(50% + 24px);


    width:
        calc(100% - 48px);

    height:
        2px;


    background:
        rgba(17,
            23,
            17,
            0.10);
}


.strona-klienta .checkout-krok:last-child::after {

    display:
        none;
}


.strona-klienta .checkout-krok-numer {

    position:
        relative;

    z-index:
        2;


    width:
        34px;

    height:
        34px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    border:
        1px solid var(--slimak-border);

    border-radius:
        50%;


    background:
        #ffffff;


    font-size:
        13px;

    font-weight:
        900;


    transition:
        all 200ms ease;
}


.strona-klienta .checkout-krok-aktywny {

    color:
        var(--slimak-dark);
}


.strona-klienta .checkout-krok-aktywny .checkout-krok-numer {

    background:
        var(--slimak-dark);

    color:
        var(--slimak-green);


    border-color:
        var(--slimak-dark);


    box-shadow:
        0 8px 20px rgba(17,
            23,
            17,
            0.18);


    transform:
        scale(1.08);
}


.strona-klienta .checkout-krok-gotowy {

    color:
        var(--slimak-dark);
}


.strona-klienta .checkout-krok-gotowy .checkout-krok-numer {

    background:
        var(--slimak-green);

    color:
        var(--slimak-dark);

    border-color:
        var(--slimak-green);
}


.strona-klienta .checkout-krok-gotowy::after {

    background:
        var(--slimak-green);
}



/* ================================
   NAGŁÓWEK CHECKOUTU
   ================================ */

.strona-klienta .checkout-naglowek {

    margin-bottom:
        22px;
}


.strona-klienta .checkout-eyebrow {

    display:
        block;


    margin-bottom:
        5px;


    color:
        var(--slimak-green-dark);


    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        0.14em;
}


.strona-klienta .checkout-naglowek h2 {

    margin:
        0;


    font-size:
        30px;


    letter-spacing:
        -0.04em;
}


.strona-klienta .checkout-naglowek p {

    margin:
        8px 0 0;


    color:
        var(--slimak-muted);


    line-height:
        1.5;
}

/* =========================================================
   SUKCES ZAMÓWIENIA — WOW
   ========================================================= */

.strona-klienta .sukces-zamowienia {

    position:
        relative;

    overflow:
        hidden;


    margin:
        20px 0 40px;

    padding:
        46px 28px 30px;


    border-radius:
        30px;


    background:
        linear-gradient(145deg,
            #101610,
            #1c271c);


    color:
        white;


    text-align:
        center;


    box-shadow:
        0 28px 70px rgba(17,
            23,
            17,
            0.25);


    animation:
        sukcesWejscie 550ms cubic-bezier(.2,
            .8,
            .2,
            1);
}



.strona-klienta .sukces-zamowienia::before {

    content:
        "";

    position:
        absolute;


    width:
        280px;

    height:
        280px;


    top:
        -190px;

    right:
        -120px;


    border-radius:
        50%;


    background:
        var(--slimak-green);


    opacity:
        0.13;
}



@keyframes sukcesWejscie {

    from {

        opacity:
            0;

        transform:
            translateY(24px) scale(0.97);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0) scale(1);

    }

}



/* ================================
   CHECK
   ================================ */

.strona-klienta .sukces-animacja {

    position:
        relative;


    width:
        110px;

    height:
        100px;


    margin:
        0 auto 18px;
}


.strona-klienta .sukces-okrag {

    width:
        82px;

    height:
        82px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    margin:
        0 auto;


    border-radius:
        50%;


    background:
        var(--slimak-green);


    box-shadow:
        0 0 0 12px rgba(188,
            227,
            93,
            0.08);


    animation:
        sukcesOkreg 600ms cubic-bezier(.17,
            .67,
            .26,
            1.35);
}


@keyframes sukcesOkreg {

    0% {

        transform:
            scale(0);

    }

    70% {

        transform:
            scale(1.12);

    }

    100% {

        transform:
            scale(1);

    }

}


.strona-klienta .sukces-check {

    color:
        var(--slimak-dark);


    font-size:
        44px;

    font-weight:
        900;


    animation:
        sukcesCheck 700ms ease;
}


@keyframes sukcesCheck {

    0%,
    45% {

        opacity:
            0;

        transform:
            scale(0.5);

    }

    100% {

        opacity:
            1;

        transform:
            scale(1);

    }

}



/* ================================
   MAŁY ŚLIMAK
   ================================ */

.strona-klienta .sukces-slimak {

    position:
        absolute;


    right:
        0;

    bottom:
        0;


    font-size:
        30px;


    animation:
        sukcesSlimak 950ms cubic-bezier(.2,
            .8,
            .2,
            1);
}


@keyframes sukcesSlimak {

    from {

        opacity:
            0;

        transform:
            translateX(-55px) rotate(-12deg);

    }

    to {

        opacity:
            1;

        transform:
            translateX(0) rotate(0);

    }

}



/* ================================
   TEKST
   ================================ */

.strona-klienta .sukces-eyebrow {

    display:
        block;


    margin-bottom:
        8px;


    color:
        var(--slimak-green);


    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        0.18em;
}


.strona-klienta .sukces-zamowienia h2 {

    max-width:
        500px;


    margin:
        0 auto;


    font-size:
        clamp(29px,
            7vw,
            42px);


    line-height:
        1.05;


    letter-spacing:
        -0.045em;
}


.strona-klienta .sukces-opis {

    max-width:
        470px;


    margin:
        16px auto 24px;


    color:
        rgba(255,
            255,
            255,
            0.65);


    line-height:
        1.55;
}



/* ================================
   NUMER ZAMÓWIENIA
   ================================ */

.strona-klienta .numer-zamowienia {

    display:
        inline-flex;

    flex-direction:
        column;

    gap:
        5px;


    margin-bottom:
        24px;


    padding:
        12px 20px;


    border:
        1px solid rgba(255,
            255,
            255,
            0.12);

    border-radius:
        16px;


    background:
        rgba(255,
            255,
            255,
            0.06);
}


.strona-klienta .numer-zamowienia span {

    color:
        rgba(255,
            255,
            255,
            0.50);


    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.16em;
}


.strona-klienta .numer-zamowienia strong {

    color:
        var(--slimak-green);


    font-size:
        19px;

    letter-spacing:
        0.08em;
}



/* ================================
   INFO
   ================================ */

.strona-klienta .sukces-info {

    display:
        grid;

    grid-template-columns:
        repeat(2,
            minmax(0,
                1fr));


    gap:
        10px;


    margin:
        5px 0 20px;
}


.strona-klienta .sukces-info>div {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;


    padding:
        14px;


    border:
        1px solid rgba(255,
            255,
            255,
            0.09);

    border-radius:
        17px;


    background:
        rgba(255,
            255,
            255,
            0.045);


    text-align:
        left;
}


.strona-klienta .sukces-info>div>span {

    font-size:
        23px;
}


.strona-klienta .sukces-info p {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;


    margin:
        0;
}


.strona-klienta .sukces-info strong {

    font-size:
        13px;
}


.strona-klienta .sukces-info small {

    color:
        rgba(255,
            255,
            255,
            0.50);


    font-size:
        11px;
}



/* ================================
   HASŁO
   ================================ */

.strona-klienta .sukces-haslo {

    display:
        flex;

    align-items:
        center;


    gap:
        12px;


    margin:
        20px 0;


    padding:
        15px;


    border-radius:
        18px;


    background:
        rgba(188,
            227,
            93,
            0.10);


    text-align:
        left;
}


.strona-klienta .sukces-haslo>span {

    font-size:
        30px;
}


.strona-klienta .sukces-haslo div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.strona-klienta .sukces-haslo strong {

    color:
        var(--slimak-green);
}


.strona-klienta .sukces-haslo small {

    color:
        rgba(255,
            255,
            255,
            0.58);
}



/* ================================
   BUTTON
   ================================ */

.strona-klienta .sukces-przycisk {

    width:
        100%;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    gap:
        9px;


    margin-top:
        5px;


    padding:
        16px;
}



/* ================================
   MOBILE
   ================================ */

@media (max-width: 500px) {

    .strona-klienta .sukces-zamowienia {

        padding:
            38px 18px 22px;


        border-radius:
            24px;

    }


    .strona-klienta .sukces-info {

        grid-template-columns:
            1fr;

    }

}

/* =========================================================
   SKELETON LOADING
   ========================================================= */

.strona-klienta .skeleton-menu {

    padding:
        10px 0 30px;
}


.strona-klienta .skeleton-naglowek {

    margin-bottom:
        20px;
}


.strona-klienta .skeleton {

    position:
        relative;

    overflow:
        hidden;

    background:
        rgba(17,
            23,
            17,
            0.08);

    border-radius:
        14px;
}


.strona-klienta .skeleton::after {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -120%;

    width:
        100%;

    height:
        100%;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255,
                255,
                255,
                0.55),
            transparent);

    animation:
        skeletonPrzesuwanie 1.25s infinite;
}


@keyframes skeletonPrzesuwanie {

    from {

        left:
            -120%;

    }

    to {

        left:
            120%;

    }

}


.strona-klienta .skeleton-maly {

    width:
        110px;

    height:
        13px;

    margin-bottom:
        10px;
}


.strona-klienta .skeleton-duzy {

    width:
        230px;

    max-width:
        70%;

    height:
        30px;
}


.strona-klienta .skeleton-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2,
            minmax(0,
                1fr));

    gap:
        12px;
}


.strona-klienta .skeleton-kafelek {

    height:
        105px;

    border-radius:
        20px;
}


.strona-klienta .skeleton-podpis {

    margin-top:
        18px;

    text-align:
        center;

    color:
        var(--slimak-muted);

    font-size:
        13px;

    font-weight:
        650;
}


@media (max-width: 500px) {

    .strona-klienta .skeleton-kafelek {

        height:
            95px;

    }

}

/* =========================================================
   PŁYNNE PRZEJŚCIA WIDOKÓW
   ========================================================= */

.strona-klienta .menu-klienta.widok-wejscie {

    animation:
        premiumWidokWejscie 320ms cubic-bezier(.2,
            .8,
            .2,
            1);
}


@keyframes premiumWidokWejscie {

    from {

        opacity:
            0;

        transform:
            translateY(10px) scale(0.992);

        filter:
            blur(2px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0) scale(1);

        filter:
            blur(0);

    }

}