/* =========================================================
   HYDROFLEX / SOLEX B2B
   FINALNY STYL KOSZYKA
   Kolory:
   #E56B28 - Hydroflex Orange
   #C9561D - Orange Hover
   #141414 - Dark
========================================================= */


/* =========================================================
   1. DUŻY PRZYCISK "DODAJ DO KOSZYKA"
   np. karta / szczegóły produktu

   <button class="btn btn-primary btn-sm bsk"
           data-koszyk-dodaj>
========================================================= */

button.btn.btn-primary.btn-sm.bsk[data-koszyk-dodaj] {
    position: relative !important;

    /* NIE USTAWIAMY DISPLAY!
       Solex sam decyduje który przycisk ma być widoczny */

    min-height: 42px !important;

    padding: 0 18px !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 9px !important;

    background:
        linear-gradient(
            135deg,
            #F47B32 0%,
            #E56B28 52%,
            #C9561D 100%
        ) !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    cursor: pointer !important;

    overflow: visible !important;

    box-shadow:
        0 5px 14px rgba(229,107,40,.30),
        inset 0 1px 0 rgba(255,255,255,.20) !important;

    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .22s ease,
        background .22s ease !important;
}


/* tekst "Dodaj do koszyka" */
button.btn.btn-primary.btn-sm.bsk[data-koszyk-dodaj] .opis {
    display: inline-block !important;

    vertical-align: middle !important;

    margin-left: 8px !important;
    padding: 0 !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 40px !important;
}


/* ikonka dużego koszyka */
button.btn.btn-primary.btn-sm.bsk[data-koszyk-dodaj] .bsk_icon {
    position: relative !important;

    display: inline-block !important;

    vertical-align: middle !important;

    width: 22px !important;
    height: 22px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #FFFFFF !important;

    background: transparent !important;

    border: 0 !important;

    overflow: visible !important;

    filter: none !important;

    transition:
        transform .22s ease !important;
}


/* ikona generowana przez Solex */
button.btn.btn-primary.btn-sm.bsk[data-koszyk-dodaj]
.bsk_icon::before {

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 19px !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* jeżeli Solex używa IMG */
button.btn.btn-primary.btn-sm.bsk[data-koszyk-dodaj]
.bsk_icon img {

    width: 20px !important;
    height: 20px !important;

    filter:
        brightness(0)
        saturate(100%)
        invert(100%) !important;
}


/* jeżeli Solex używa SVG */
button.btn.btn-primary.btn-sm.bsk[data-koszyk-dodaj]
.bsk_icon svg {

    width: 20px !important;
    height: 20px !important;

    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}



/* =========================================================
   HOVER DUŻEGO PRZYCISKU
========================================================= */

button.btn.btn-primary.btn-sm.bsk[data-koszyk-dodaj]:hover {

    background:
        linear-gradient(
            135deg,
            #FF853A 0%,
            #E56B28 43%,
            #C9561D 100%
        ) !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    transform:
        translateY(-3px)
        scale(1.025) !important;

    box-shadow:
        0 9px 22px rgba(229,107,40,.40),
        0 0 17px rgba(229,107,40,.18),
        inset 0 1px 0 rgba(255,255,255,.26) !important;
}


button.btn.btn-primary.btn-sm.bsk[data-koszyk-dodaj]:hover
.bsk_icon {

    transform:
        scale(1.10)
        rotate(-4deg) !important;
}


button.btn.btn-primary.btn-sm.bsk[data-koszyk-dodaj]:hover
.opis {

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* kliknięcie */
button.btn.btn-primary.btn-sm.bsk[data-koszyk-dodaj]:active {

    transform:
        translateY(0)
        scale(.97) !important;

    box-shadow:
        0 3px 8px rgba(229,107,40,.28) !important;
}


/* focus */
button.btn.btn-primary.btn-sm.bsk[data-koszyk-dodaj]:focus {

    outline: 0 !important;

    box-shadow:
        0 0 0 3px rgba(229,107,40,.18),
        0 5px 14px rgba(229,107,40,.30) !important;
}



/* =========================================================
   2. MAŁY KOSZYK NA LIŚCIE PRODUKTÓW

   <span class="btn btn-link btn-sm bsk bsk_icon">
       <span class="ilosc">2</span>
   </span>
========================================================= */

.add-card .input-group-append >
span.btn.btn-link.btn-sm.bsk.bsk_icon {

    position: relative !important;

    width: 48px !important;
    height: 40px !important;

    min-width: 48px !important;
    min-height: 40px !important;

    padding: 0 !important;

    margin-left: 7px !important;

    border: 1px solid rgba(255,255,255,.18) !important;
    outline: 0 !important;

    border-radius: 8px !important;

    background:
        linear-gradient(
            135deg,
            #F47A32 0%,
            #E56B28 55%,
            #C9561D 100%
        ) !important;

    color: #FFFFFF !important;

    text-decoration: none !important;

    cursor: pointer !important;

    /* licznik może wystawać nad kafelek */
    overflow: visible !important;

    box-shadow:
        0 4px 10px rgba(229,107,40,.28),
        inset 0 1px 0 rgba(255,255,255,.18) !important;

    transition:
        transform .20s cubic-bezier(.2,.8,.2,1),
        box-shadow .20s ease,
        background .20s ease !important;
}



/* =========================================================
   IKONA MAŁEGO KOSZYKA
========================================================= */

.add-card .input-group-append >
span.btn.btn-link.btn-sm.bsk.bsk_icon::before {

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 21px !important;

    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    transform:
        translate(-50%, -50%) !important;

    margin: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    z-index: 2 !important;

    transition:
        transform .20s ease !important;
}



/* =========================================================
   LICZNIK SOLEXA
   <span class="ilosc">2</span>
========================================================= */

.add-card .input-group-append >
span.btn.btn-link.btn-sm.bsk.bsk_icon >
span.ilosc {

    position: absolute !important;

    top: -8px !important;
    right: -8px !important;

    z-index: 20 !important;

    display: flex !important;

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

    min-width: 18px !important;
    height: 18px !important;

    padding: 0 5px !important;

    border-radius: 10px !important;

    background: #141414 !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 18px !important;

    text-align: center !important;

    border:
        1px solid rgba(255,255,255,.60) !important;

    box-shadow:
        0 2px 7px rgba(0,0,0,.38) !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: none !important;
}



/* =========================================================
   WAŻNE:
   NIE UŻYWAMY ::after DO LICZNIKA
========================================================= */

.add-card .input-group-append >
span.btn.btn-link.btn-sm.bsk.bsk_icon::after {

    content: none !important;
    display: none !important;
}



/* =========================================================
   HOVER MAŁEGO KOSZYKA
========================================================= */

.add-card .input-group-append >
span.btn.btn-link.btn-sm.bsk.bsk_icon:hover {

    background:
        linear-gradient(
            135deg,
            #FF8338 0%,
            #E56B28 45%,
            #C9561D 100%
        ) !important;

    color: #FFFFFF !important;

    transform:
        translateY(-3px)
        scale(1.04) !important;

    box-shadow:
        0 8px 18px rgba(229,107,40,.40),
        0 0 14px rgba(229,107,40,.18),
        inset 0 1px 0 rgba(255,255,255,.24) !important;
}



/* ruch samej ikonki */
.add-card .input-group-append >
span.btn.btn-link.btn-sm.bsk.bsk_icon:hover::before {

    transform:
        translate(-50%, -50%)
        scale(1.10)
        rotate(-4deg) !important;
}



/* =========================================================
   KLIKNIĘCIE MAŁEGO KOSZYKA
========================================================= */

.add-card .input-group-append >
span.btn.btn-link.btn-sm.bsk.bsk_icon:active {

    transform:
        translateY(0)
        scale(.95) !important;

    box-shadow:
        0 2px 6px rgba(229,107,40,.25) !important;
}



/* =========================================================
   RODZICE NIE MOGĄ UCINAĆ LICZNIKA
========================================================= */

.add-card,
.add-card .input-group,
.add-card .input-group-append {

    overflow: visible !important;
}
/* =========================================================
   HYDROFLEX - LICZNIK ILOŚCI W KOSZYKU
   <span class="ilosc">2</span>
========================================================= */

/* rodzic licznika */
.bsk_icon {
    position: relative !important;
    overflow: visible !important;
}


/* liczba produktów */
.bsk_icon > span.ilosc {
    position: absolute !important;

    top: -11px !important;
    right: -10px !important;

    z-index: 999 !important;

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

    min-width: 18px !important;
    height: 18px !important;

    padding: 0 5px !important;

    border-radius: 20px !important;

    background: #141414 !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    font-family: Arial, sans-serif !important;

    line-height: 18px !important;
    text-align: center !important;

    border: 1px solid rgba(255,255,255,.65) !important;

    box-shadow:
        0 2px 6px rgba(0,0,0,.35),
        0 0 0 1px rgba(229,107,40,.15) !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: none !important;

    transform: none !important;
}


/* przy większej liczbie np. 10, 25, 100 */
.bsk_icon > span.ilosc {
    width: auto !important;
    white-space: nowrap !important;
}


/* licznik nie może zostać ucięty przez button */
button.bsk[data-koszyk-dodaj],
span.bsk_icon[data-koszyk-dodaj],
.input-group-append,
.add-card {
    overflow: visible !important;
}

/* =========================================================
   HYDROFLEX - KOSZYK NA LIŚCIE PRODUKTÓW
   NORMALNY + DODANO DO KOSZYKA
========================================================= */

.btn.btn-link.btn-sm.bsk.bsk_icon[data-koszyk-dodaj],
.btn.btn-link.btn-sm.bsk.bsk_icon.dodano-do-koszyka[data-koszyk-dodaj] {

    position: relative !important;

    width: 50px !important;
    height: 42px !important;

    min-width: 50px !important;
    min-height: 42px !important;

    padding: 0 !important;
    margin-left: 7px !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 9px !important;

    background:
        linear-gradient(
            135deg,
            #F47B32 0%,
            #E56B28 55%,
            #C9561D 100%
        ) !important;

    color: #FFFFFF !important;

    text-decoration: none !important;

    cursor: pointer !important;

    overflow: visible !important;

    box-shadow:
        0 4px 11px rgba(229,107,40,.30),
        inset 0 1px 0 rgba(255,255,255,.20) !important;

    transition:
        transform .20s ease,
        box-shadow .20s ease,
        background .20s ease !important;
}


/* =========================================================
   IKONA KOSZYKA
========================================================= */

.btn.btn-link.btn-sm.bsk.bsk_icon[data-koszyk-dodaj]::before,
.btn.btn-link.btn-sm.bsk.bsk_icon.dodano-do-koszyka[data-koszyk-dodaj]::before {

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 22px !important;

    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    opacity: 1 !important;
    visibility: visible !important;

    z-index: 2 !important;

    transition: transform .20s ease !important;
}


/* =========================================================
   LICZNIK
   <span class="ilosc">4</span>
========================================================= */

.btn.btn-link.btn-sm.bsk.bsk_icon[data-koszyk-dodaj] > .ilosc,
.btn.btn-link.btn-sm.bsk.bsk_icon.dodano-do-koszyka[data-koszyk-dodaj] > .ilosc {

    position: absolute !important;

    top: -9px !important;
    right: -9px !important;

    z-index: 50 !important;

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

    min-width: 19px !important;
    height: 19px !important;

    padding: 0 5px !important;

    border-radius: 20px !important;

    background: #141414 !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 19px !important;

    border: 1px solid rgba(255,255,255,.65) !important;

    box-shadow:
        0 2px 7px rgba(0,0,0,.40) !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: none !important;
}


/* =========================================================
   USUWAMY ZIELONY STYL SOLEXA PO DODANIU
========================================================= */

.btn.btn-link.btn-sm.bsk.bsk_icon.dodano-do-koszyka[data-koszyk-dodaj] {

    background:
        linear-gradient(
            135deg,
            #F47B32 0%,
            #E56B28 55%,
            #C9561D 100%
        ) !important;

    color: #FFFFFF !important;
}


/* =========================================================
   HOVER
========================================================= */

.btn.btn-link.btn-sm.bsk.bsk_icon[data-koszyk-dodaj]:hover,
.btn.btn-link.btn-sm.bsk.bsk_icon.dodano-do-koszyka[data-koszyk-dodaj]:hover {

    background:
        linear-gradient(
            135deg,
            #FF863C 0%,
            #E56B28 42%,
            #C9561D 100%
        ) !important;

    transform:
        translateY(-3px)
        scale(1.05) !important;

    box-shadow:
        0 8px 18px rgba(229,107,40,.42),
        0 0 14px rgba(229,107,40,.18),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}


/* animacja ikonki */
.btn.btn-link.btn-sm.bsk.bsk_icon[data-koszyk-dodaj]:hover::before,
.btn.btn-link.btn-sm.bsk.bsk_icon.dodano-do-koszyka[data-koszyk-dodaj]:hover::before {

    transform:
        translate(-50%, -50%)
        scale(1.12)
        rotate(-4deg) !important;
}


/* klik */
.btn.btn-link.btn-sm.bsk.bsk_icon[data-koszyk-dodaj]:active {

    transform:
        translateY(0)
        scale(.95) !important;
}


/* =========================================================
   NIE UCINAJ LICZNIKA
========================================================= */

.add-card,
.add-card .input-group,
.add-card .input-group-append {

    overflow: visible !important;
}

.btn.btn-link.btn-sm.bsk.bsk_icon[data-koszyk-dodaj],
.btn.btn-link.btn-sm.bsk.bsk_icon.dodano-do-koszyka[data-koszyk-dodaj] {
    margin-top: -6px !important;
}

/* ZMIANA WYGLADU KOSZYKA U GÓRY */

/* ===== BIAŁY KOSZYK W HEADERZE ===== */
/* =========================================================
   HYDROFLEX - BIAŁA IKONA KOSZYKA W HEADERZE
   bez zmiany zdjęć produktów
========================================================= */

/* bazowo NIE ruszamy zdjęć wewnątrz rozwijanego koszyka */
.hf-cart-white img {
    filter: none !important;
}


/* kolor samego modułu/przycisku */
.hf-cart-white {
    color: #FFFFFF !important;
}


/* jeśli klikany koszyk jest linkiem */
.hf-cart-white > a,
.hf-cart-white > a *,
.hf-cart-white > div > a,
.hf-cart-white > div > a * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* jeśli jest buttonem */
.hf-cart-white > button,
.hf-cart-white > button *,
.hf-cart-white > div > button,
.hf-cart-white > div > button * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* ikonki fontowe */
.hf-cart-white > a i,
.hf-cart-white > div > a i,
.hf-cart-white > button i,
.hf-cart-white > div > button i {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* SVG tylko w przycisku otwierającym koszyk */
.hf-cart-white > a svg,
.hf-cart-white > div > a svg,
.hf-cart-white > button svg,
.hf-cart-white > div > button svg {

    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}


/* IMG tylko w przycisku otwierającym koszyk */
.hf-cart-white > a img,
.hf-cart-white > div > a img,
.hf-cart-white > button img,
.hf-cart-white > div > button img {

    filter: brightness(0) invert(1) !important;
}


/* zdjęcia produktów w głębszej części koszyka wracają do normy */
.hf-cart-white div div img,
.hf-cart-white table img,
.hf-cart-white .dropdown img,
.hf-cart-white .modal img {

    filter: none !important;
}
/* =========================================================
   HYDROFLEX - "PRZEJDŹ DO KOSZYKA"
========================================================= */

.hf-cart-white a[href*="koszyk"] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 48px !important;

    padding: 12px 20px !important;

    border: 0 !important;
    border-radius: 0 0 8px 8px !important;

    background:
        linear-gradient(
            135deg,
            #F47B32 0%,
            #E56B28 52%,
            #C9561D 100%
        ) !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    text-decoration: none !important;

    cursor: pointer !important;
    overflow: hidden !important;

    box-shadow:
        0 5px 16px rgba(229,107,40,.30),
        inset 0 1px 0 rgba(255,255,255,.20) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease !important;
}


/* połysk */
.hf-cart-white a[href*="koszyk"]::after {
    content: "" !important;

    position: absolute !important;
    top: -50% !important;
    left: -60% !important;

    width: 28% !important;
    height: 200% !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.38),
            transparent
        ) !important;

    transform: skewX(-22deg) !important;

    pointer-events: none !important;

    transition: left .45s ease !important;
}


/* WOW hover */
.hf-cart-white a[href*="koszyk"]:hover {
    background:
        linear-gradient(
            135deg,
            #FF863C 0%,
            #E56B28 42%,
            #C9561D 100%
        ) !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 8px 22px rgba(229,107,40,.42),
        0 0 18px rgba(229,107,40,.18),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}


/* przejazd światła */
.hf-cart-white a[href*="koszyk"]:hover::after {
    left: 135% !important;
}


/* kliknięcie */
.hf-cart-white a[href*="koszyk"]:active {
    transform: scale(.98) !important;

    box-shadow:
        0 3px 9px rgba(229,107,40,.28) !important;
}
/* =========================================================
   HYDROFLEX - HAMBURGER MOBILE
========================================================= */

@media (max-width: 991.98px) {

    /* Główny przycisk hamburgera */
    a[data-s-menu-hamburger] {
        position: relative !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;
        outline: 0 !important;

        border-radius: 9px !important;

        background:
            linear-gradient(
                135deg,
                #F47B32 0%,
                #E56B28 52%,
                #C9561D 100%
            ) !important;

        color: #FFFFFF !important;

        text-decoration: none !important;

        overflow: hidden !important;

        box-shadow:
            0 5px 14px rgba(229,107,40,.30),
            inset 0 1px 0 rgba(255,255,255,.20) !important;

        transition:
            transform .22s ease,
            box-shadow .22s ease,
            background .22s ease !important;
    }


    /* Ikona 3 kresek */
    a[data-s-menu-hamburger] i,
    a[data-s-menu-hamburger] .fa-bars {
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;

        font-size: 24px !important;

        line-height: 1 !important;

        margin: 0 !important;

        position: relative;
        z-index: 2;

        transition:
            transform .22s ease !important;
    }


    /* Delikatny połysk */
    a[data-s-menu-hamburger]::after {
        content: "" !important;

        position: absolute !important;

        top: -50% !important;
        left: -70% !important;

        width: 35% !important;
        height: 200% !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,.35),
                transparent
            ) !important;

        transform: skewX(-22deg) !important;

        pointer-events: none !important;

        transition: left .45s ease !important;
    }


    /* Hover */
    a[data-s-menu-hamburger]:hover {
        background:
            linear-gradient(
                135deg,
                #FF853A 0%,
                #E56B28 43%,
                #C9561D 100%
            ) !important;

        transform:
            translateY(-2px)
            scale(1.04) !important;

        box-shadow:
            0 8px 20px rgba(229,107,40,.40),
            0 0 16px rgba(229,107,40,.18),
            inset 0 1px 0 rgba(255,255,255,.25) !important;
    }


    /* przejazd światła */
    a[data-s-menu-hamburger]:hover::after {
        left: 135% !important;
    }


    /* lekki ruch ikonki */
    a[data-s-menu-hamburger]:hover i {
        transform: scale(1.10) !important;
    }


    /* Klik / tap */
    a[data-s-menu-hamburger]:active {
        transform:
            translateY(0)
            scale(.94) !important;

        box-shadow:
            0 3px 8px rgba(229,107,40,.28) !important;
    }


    /* Focus */
    a[data-s-menu-hamburger]:focus {
        outline: none !important;

        box-shadow:
            0 0 0 3px rgba(229,107,40,.18),
            0 5px 14px rgba(229,107,40,.30) !important;
    }
}
@media (max-width: 991.98px) {
    a[data-s-menu-hamburger] {
        transform: translateY(-4px) !important;
    }

    a[data-s-menu-hamburger]:hover {
        transform:
            translateY(-6px)
            scale(1.04) !important;
    }

    a[data-s-menu-hamburger]:active {
        transform:
            translateY(-4px)
            scale(.94) !important;
    }
}
/* =========================================================
   HYDROFLEX - REJESTRACJA + LOGOWANIE
========================================================= */

/* wspólne */
a.btn.btn-secondary[href="/rejestracja"],
a.btn.btn-primary[href="/logowanie"] {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    min-height: 44px !important;
    padding: 0 18px !important;

    border-radius: 9px !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    text-decoration: none !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease !important;
}


/* =========================================================
   REJESTRACJA
========================================================= */

a.btn.btn-secondary[href="/rejestracja"] {
    color: #FFFFFF !important;

    background: #242424 !important;

    border: 1px solid #E56B28 !important;

    box-shadow:
        0 3px 10px rgba(0,0,0,.22) !important;
}

a.btn.btn-secondary[href="/rejestracja"] i {
    color: #FFFFFF !important;
}

a.btn.btn-secondary[href="/rejestracja"]:hover {
    color: #FFFFFF !important;

    background: #E56B28 !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 7px 18px rgba(229,107,40,.30),
        0 0 14px rgba(229,107,40,.14) !important;
}


/* =========================================================
   LOGOWANIE
========================================================= */

a.btn.btn-primary[href="/logowanie"] {
    color: #FFFFFF !important;

    border: 0 !important;

    background:
        linear-gradient(
            135deg,
            #F47B32 0%,
            #E56B28 52%,
            #C9561D 100%
        ) !important;

    box-shadow:
        0 5px 14px rgba(229,107,40,.30),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
}


/* ikonka kłódki */
a.btn.btn-primary[href="/logowanie"] .fa-lock-alt {
    color: #FFFFFF !important;
}


/* hover logowania */
a.btn.btn-primary[href="/logowanie"]:hover {
    background:
        linear-gradient(
            135deg,
            #FF853A 0%,
            #E56B28 43%,
            #C9561D 100%
        ) !important;

    transform:
        translateY(-3px)
        scale(1.02) !important;

    box-shadow:
        0 9px 22px rgba(229,107,40,.40),
        0 0 16px rgba(229,107,40,.18),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}


/* =========================================================
   IKONY
========================================================= */

a.btn.btn-secondary[href="/rejestracja"] i,
a.btn.btn-primary[href="/logowanie"] span {
    transition: transform .22s ease !important;
}

a.btn.btn-secondary[href="/rejestracja"]:hover i,
a.btn.btn-primary[href="/logowanie"]:hover span {
    transform: scale(1.10) !important;
}
/* =========================================================
   HYDROFLEX - KONTO UŻYTKOWNIKA
   FINALNA CZYSTA WERSJA
========================================================= */


/* =========================================================
   1. KONTENER
========================================================= */

#kontrolka-63 nav.menu-dropdown {
    position: relative !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
}


/* =========================================================
   2. GÓRNY PRZYCISK KONTA / EMAIL
========================================================= */

#kontrolka-63 nav.menu-dropdown .dropdown #uc {
    display: flex !important;
    align-items: center !important;

    min-height: 44px !important;

    padding: 0 !important;

    background: #1A1A1A !important;

    border: 1px solid #E56B28 !important;
    border-radius: 9px !important;

    cursor: pointer !important;

    overflow: hidden !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,.28),
        0 0 0 1px rgba(229,107,40,.05) !important;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease !important;
}


/* =========================================================
   3. IKONA UŻYTKOWNIKA - ZAWSZE POMARAŃCZOWA
========================================================= */

#kontrolka-63 .hf-user-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 42px !important;

    width: 42px !important;
    height: 42px !important;

    margin: 0 !important;

    border-radius: 8px 0 0 8px !important;

    background:
        linear-gradient(
            135deg,
            #F47B32 0%,
            #E56B28 52%,
            #C9561D 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20) !important;

    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .22s ease,
        background .22s ease !important;
}


#kontrolka-63 .hf-user-icon img {
    display: block !important;

    width: 24px !important;
    height: 24px !important;

    float: none !important;

    margin: 0 !important;

    filter:
        brightness(0)
        invert(1) !important;

    transition:
        transform .22s ease !important;
}


/* =========================================================
   4. EMAIL - ZAWSZE BIAŁY
   dokładna klasa Solexa
========================================================= */

#kontrolka-63 nav.menu-dropdown .dropdown .pole-klienta,
#kontrolka-63 nav.menu-dropdown .dropdown .pole-klienta * {

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    opacity: 1 !important;
    visibility: visible !important;

    text-shadow: none !important;
}


/* sam span emaila */
#kontrolka-63 nav.menu-dropdown .dropdown span.pole-klienta {
    display: block !important;

    padding: 0 12px !important;

    line-height: 42px !important;

    white-space: nowrap !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* =========================================================
   5. HOVER CAŁEGO POLA KONTA
========================================================= */

#kontrolka-63 nav.menu-dropdown .dropdown #uc:hover {
    background: #202020 !important;

    border-color: #F47B32 !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 7px 18px rgba(0,0,0,.32),
        0 0 14px rgba(229,107,40,.20) !important;
}


/* ikonka przy hover */
#kontrolka-63 nav.menu-dropdown .dropdown #uc:hover .hf-user-icon {
    background:
        linear-gradient(
            135deg,
            #FF853A 0%,
            #E56B28 42%,
            #B94B17 100%
        ) !important;

    box-shadow:
        0 0 15px rgba(229,107,40,.32),
        inset 0 1px 0 rgba(255,255,255,.24) !important;
}


#kontrolka-63 nav.menu-dropdown .dropdown #uc:hover .hf-user-icon img {
    transform:
        scale(1.10)
        rotate(-3deg) !important;
}


/* =========================================================
   6. ROZWIJANE MENU
========================================================= */

#kontrolka-63 nav.menu-dropdown .dropdown-menu,
#kontrolka-63 nav.menu-dropdown .dropdown > ul {

    min-width: 195px !important;

    padding: 6px !important;

    margin-top: 6px !important;

    background: #1A1A1A !important;

    border: 1px solid #303030 !important;
    border-radius: 8px !important;

    box-shadow:
        0 14px 35px rgba(0,0,0,.45) !important;
}


/* LI */
#kontrolka-63 nav.menu-dropdown .dropdown-menu li,
#kontrolka-63 nav.menu-dropdown .dropdown > ul li {

    background: transparent !important;

    border: 0 !important;
}


/* =========================================================
   7. LINKI DROPDOWNU
========================================================= */

#kontrolka-63 nav.menu-dropdown .dropdown-menu a,
#kontrolka-63 nav.menu-dropdown .dropdown > ul a {

    display: flex !important;
    align-items: center !important;

    min-height: 40px !important;

    padding: 8px 12px !important;

    color: #F2F2F2 !important;
    -webkit-text-fill-color: #F2F2F2 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 6px !important;

    text-decoration: none !important;

    transition:
        background .20s ease,
        color .20s ease,
        padding-left .20s ease,
        transform .20s ease,
        box-shadow .20s ease !important;
}


/* hover */
#kontrolka-63 nav.menu-dropdown .dropdown-menu a:hover,
#kontrolka-63 nav.menu-dropdown .dropdown > ul a:hover {

    background:
        linear-gradient(
            135deg,
            #F47B32 0%,
            #E56B28 52%,
            #C9561D 100%
        ) !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    padding-left: 16px !important;

    transform: translateX(2px) !important;

    box-shadow:
        0 4px 11px rgba(229,107,40,.20) !important;
}


/* =========================================================
   8. SEPARATOR
========================================================= */

#kontrolka-63 nav.menu-dropdown hr,
#kontrolka-63 nav.menu-dropdown .divider,
#kontrolka-63 nav.menu-dropdown .dropdown-divider {

    height: 1px !important;

    margin: 6px 9px !important;

    background: #3A3A3A !important;

    border: 0 !important;
}


/* =========================================================
   9. WYLOGUJ - ZAWSZE POMARAŃCZOWY
========================================================= */

#kontrolka-63 nav.menu-dropdown a[href*="wylog"],
#kontrolka-63 nav.menu-dropdown a[href*="logout"],
#kontrolka-63 nav.menu-dropdown .dropdown-menu > li:last-child > a {

    margin: 6px 0 0 0 !important;

    background:
        linear-gradient(
            135deg,
            #F47B32 0%,
            #E56B28 52%,
            #C9561D 100%
        ) !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    font-weight: 600 !important;

    border-radius: 6px !important;

    box-shadow:
        0 5px 14px rgba(229,107,40,.30),
        inset 0 1px 0 rgba(255,255,255,.18) !important;
}


/* WYLOGUJ - WOW HOVER */
#kontrolka-63 nav.menu-dropdown a[href*="wylog"]:hover,
#kontrolka-63 nav.menu-dropdown a[href*="logout"]:hover,
#kontrolka-63 nav.menu-dropdown .dropdown-menu > li:last-child > a:hover {

    background:
        linear-gradient(
            135deg,
            #FF853A 0%,
            #E56B28 40%,
            #B94B17 100%
        ) !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    transform:
        translateY(-2px)
        scale(1.01) !important;

    box-shadow:
        0 8px 18px rgba(229,107,40,.42),
        0 0 15px rgba(229,107,40,.18) !important;
}


/* =========================================================
   10. MOBILE
========================================================= */

@media (max-width: 991.98px) {

    #kontrolka-63 nav.menu-dropdown .dropdown #uc {
        min-height: 44px !important;
    }

    #kontrolka-63 .hf-user-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }

    #kontrolka-63 nav.menu-dropdown .dropdown span.pole-klienta {
        max-width: 145px !important;

        font-size: 12px !important;
    }

    #kontrolka-63 nav.menu-dropdown .dropdown-menu,
    #kontrolka-63 nav.menu-dropdown .dropdown > ul {
        min-width: 190px !important;
    }
}
/* =========================================================
   HYDROFLEX - RESPONSYWNE KONTO + KOSZYK
========================================================= */

/* konto może się zwężać */
#kontrolka-63 {
    min-width: 0 !important;
}

/* nav konta nie może wymuszać szerokości */
#kontrolka-63 nav.menu-dropdown,
#kontrolka-63 nav.menu-dropdown .dropdown,
#kontrolka-63 nav.menu-dropdown .dropdown #uc {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* =========================================================
   EMAIL - ELASTYCZNY + ...
========================================================= */

#kontrolka-63 nav.menu-dropdown .dropdown .pole-klienta {
    flex: 1 1 auto !important;

    min-width: 0 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* ikonka konta nigdy się nie ściska */
#kontrolka-63 .hf-user-icon {
    flex: 0 0 42px !important;
}


/* =========================================================
   KOSZYK - NIE ŚCISKAJ
========================================================= */

.hf-cart-white {
    flex-shrink: 0 !important;
    min-width: 0 !important;
}


/* =========================================================
   MNIEJSZY DESKTOP / TABLET
========================================================= */

@media (max-width: 1200px) {

    #kontrolka-63 nav.menu-dropdown .dropdown .pole-klienta {
        font-size: 12px !important;
        padding-left: 9px !important;
        padding-right: 7px !important;
    }

    #kontrolka-63 .hf-user-icon {
        width: 38px !important;
        height: 40px !important;
        min-width: 38px !important;
        flex-basis: 38px !important;
    }

    #kontrolka-63 .hf-user-icon img {
        width: 22px !important;
        height: 22px !important;
    }
}


/* =========================================================
   TABLET / MAŁY EKRAN
========================================================= */

@media (max-width: 991.98px) {

    #kontrolka-63 nav.menu-dropdown .dropdown #uc {
        min-height: 40px !important;
    }

    #kontrolka-63 nav.menu-dropdown .dropdown .pole-klienta {
        max-width: 105px !important;

        font-size: 11px !important;

        padding-left: 7px !important;
        padding-right: 5px !important;
    }

    #kontrolka-63 .hf-user-icon {
        width: 38px !important;
        height: 40px !important;
        min-width: 38px !important;
    }
}


/* =========================================================
   BARDZO MAŁY EKRAN
   zostawiamy samą ikonę konta
========================================================= */

@media (max-width: 520px) {

    #kontrolka-63 nav.menu-dropdown .dropdown .pole-klienta {
        display: none !important;
    }

    #kontrolka-63 nav.menu-dropdown .dropdown #uc {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;

        border-radius: 9px !important;
    }

    #kontrolka-63 .hf-user-icon {
        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;

        flex: 0 0 42px !important;

        border-radius: 8px !important;
    }
}
/* =========================================================
   RAMKA WOKÓŁ IKONY + EMAILA
========================================================= */

#kontrolka-63 nav.menu-dropdown .dropdown > [data-bs-toggle="dropdown"] {
    border: 1px solid rgba(229,107,40,.75) !important;
    border-radius: 9px !important;

    background: #1A1A1A !important;

    box-shadow:
        0 0 0 1px rgba(229,107,40,.08),
        0 4px 12px rgba(0,0,0,.25) !important;

    overflow: hidden !important;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease !important;
}


/* hover */
#kontrolka-63 nav.menu-dropdown .dropdown > [data-bs-toggle="dropdown"]:hover {
    border-color: #F47B32 !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 0 0 1px rgba(229,107,40,.20),
        0 0 14px rgba(229,107,40,.18),
        0 6px 16px rgba(0,0,0,.28) !important;
}
/* =========================================================
   HYDROFLEX - WYSZUKIWARKA KOMPAKTOWA
========================================================= */

#kontrolka-258 {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}


/* cały moduł */
#kontrolka-258 .input-group {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #FFFFFF !important;

    border: 1px solid rgba(229,107,40,.65) !important;
    border-radius: 8px !important;

    overflow: hidden !important;

    box-shadow:
        0 3px 10px rgba(0,0,0,.18) !important;

    box-sizing: border-box !important;
}


/* INPUT */
#kontrolka-258 .form-control,
#kontrolka-258 input[type="text"],
#kontrolka-258 input {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 0 13px !important;

    border: 0 !important;
    outline: 0 !important;

    background: #FFFFFF !important;

    color: #1A1A1A !important;
    -webkit-text-fill-color: #1A1A1A !important;

    font-size: 13px !important;
    line-height: 38px !important;

    box-shadow: none !important;

    box-sizing: border-box !important;
}


/* placeholder */
#kontrolka-258 input::placeholder {
    color: #777777 !important;
    -webkit-text-fill-color: #777777 !important;
    opacity: 1 !important;
}


/* wrapper przycisku */
#kontrolka-258 .input-group-append,
#kontrolka-258 .input-group-prepend {
    height: 46px !important;
    min-height: 38px !important;
    max-height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}


/* LUPA */
#kontrolka-258 button,
#kontrolka-258 .btn {
    width: 52px !important;
    min-width: 52px !important;

    height: 38px !important;
    min-height: 46px !important;
    max-height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    border-radius: 0 7px 7px 0 !important;

    background:
        linear-gradient(
            135deg,
            #F47B32 0%,
            #E56B28 52%,
            #C9561D 100%
        ) !important;

    color: #FFFFFF !important;

    box-shadow: none !important;
}


/* ikonka lupy */
#kontrolka-258 button i,
#kontrolka-258 .btn i {
    color: #FFFFFF !important;
    font-size: 16px !important;
}


/* hover */
#kontrolka-258 button:hover,
#kontrolka-258 .btn:hover {
    background:
        linear-gradient(
            135deg,
            #FF853A 0%,
            #E56B28 42%,
            #B94B17 100%
        ) !important;
}