/* =========================================================
   HYDROFLEX
   REJESTRACJA KLIENTA B2B
   PREMIUM LIGHT
========================================================= */

:root {
    --hf-orange: #E56B28;
    --hf-orange-light: #F47B32;
    --hf-orange-dark: #C9561D;

    --hf-dark: #171717;
    --hf-text: #262626;
    --hf-muted: #757575;

    --hf-border: #E5E5E5;
    --hf-border-input: #D8D8D8;

    --hf-soft: #FAFAFA;
    --hf-white: #FFFFFF;
}


/* =========================================================
   1. GÓRNY TEKST / BANNER
   kontrolka 103
========================================================= */

#kontrolka-103 {
    margin: 24px 0 14px !important;

    padding: 13px 18px !important;

    background:
        linear-gradient(
            135deg,
            #FFF8F3 0%,
            #FFFFFF 100%
        ) !important;

    border: 1px solid rgba(229,107,40,.22) !important;
    border-left: 4px solid #E56B28 !important;
    border-radius: 9px !important;

    color: #333333 !important;

    font-size: 13px !important;

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


/* =========================================================
   2. GŁÓWNY FORMULARZ
========================================================= */

#kontrolka-72 {
    position: relative;

    margin-top: 14px !important;
    margin-bottom: 38px !important;

    padding: 30px 34px 34px !important;

    background: #FFFFFF !important;

    border: 1px solid #E6E6E6 !important;
    border-radius: 14px !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.055),
        0 2px 8px rgba(0,0,0,.025) !important;

    text-align: left !important;

    box-sizing: border-box !important;
}


/* górny akcent */
#kontrolka-72::before {
    content: "";

    position: absolute;

    top: 0;
    left: 34px;
    right: 34px;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #E56B28 20%,
            #F47B32 50%,
            #E56B28 80%,
            transparent 100%
        );

    border-radius: 0 0 3px 3px;
}


/* =========================================================
   3. GŁÓWNY TYTUŁ "ZAREJESTRUJ SIĘ"
========================================================= */

#kontrolka-72 h1,
#kontrolka-72 h2,
#kontrolka-72 h3,
#kontrolka-72 h4 {
    margin-top: 0 !important;
    margin-bottom: 24px !important;

    color: #171717 !important;

    font-weight: 700 !important;
}


/* jeśli tytuł jest h4 */
#kontrolka-72 h4 {
    font-size: 26px !important;

    text-align: center !important;
}


/* =========================================================
   4. NAGŁÓWKI SEKCJI
   Dane do faktury / Adres firmy / itd.
========================================================= */

#kontrolka-72 h6.naglowek,
#kontrolka-72 .naglowek-z-linia {
    position: relative !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    margin: 24px 0 16px !important;

    padding: 0 0 10px 14px !important;

    color: #1A1A1A !important;

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

    line-height: 1.3 !important;

    text-align: left !important;

    border-bottom: 1px solid #E5E5E5 !important;

    box-sizing: border-box !important;
}


/* pomarańczowy pionowy akcent */
#kontrolka-72 h6.naglowek::before,
#kontrolka-72 .naglowek-z-linia::before {
    content: "";

    position: absolute;

    left: 0;
    top: 1px;
    bottom: 10px;

    width: 3px;

    background:
        linear-gradient(
            180deg,
            #F47B32,
            #E56B28
        );

    border-radius: 3px;
}


/* linia pomarańczowa pod sekcją */
#kontrolka-72 h6.naglowek::after,
#kontrolka-72 .naglowek-z-linia::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 92px;
    height: 2px;

    background: #E56B28;

    border-radius: 2px;
}


/* =========================================================
   5. FORM GROUP
========================================================= */

#kontrolka-72 .form-group {
    margin-bottom: 15px !important;

    text-align: left !important;
}


/* =========================================================
   6. LABEL
========================================================= */

#kontrolka-72 label {
    display: block !important;

    margin-bottom: 6px !important;

    color: #4C4C4C !important;

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

    line-height: 1.4 !important;

    text-align: left !important;
}


/* =========================================================
   7. INPUTY / SELECT / TEXTAREA
========================================================= */

#kontrolka-72 .form-control,
#kontrolka-72 input[type="text"],
#kontrolka-72 input[type="email"],
#kontrolka-72 input[type="tel"],
#kontrolka-72 input[type="number"],
#kontrolka-72 input[type="password"],
#kontrolka-72 select,
#kontrolka-72 textarea {
    width: 100% !important;

    background: #FAFAFA !important;

    border: 1px solid #D8D8D8 !important;
    border-radius: 7px !important;

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

    font-size: 13px !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

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


/* normalne pola */
#kontrolka-72 .form-control,
#kontrolka-72 input[type="text"],
#kontrolka-72 input[type="email"],
#kontrolka-72 input[type="tel"],
#kontrolka-72 input[type="number"],
#kontrolka-72 input[type="password"],
#kontrolka-72 select {
    min-height: 43px !important;

    padding: 0 12px !important;
}


/* textarea */
#kontrolka-72 textarea {
    min-height: 100px !important;

    padding: 11px 12px !important;

    resize: vertical !important;
}


/* =========================================================
   8. FOCUS
========================================================= */

#kontrolka-72 .form-control:focus,
#kontrolka-72 input:focus,
#kontrolka-72 select:focus,
#kontrolka-72 textarea:focus {
    background: #FFFFFF !important;

    border-color: #E56B28 !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(229,107,40,.09),
        0 3px 10px rgba(0,0,0,.025) !important;
}


/* =========================================================
   9. SELECT
========================================================= */

#kontrolka-72 select {
    cursor: pointer !important;
}


/* =========================================================
   10. WIERSZE BOOTSTRAP
========================================================= */

#kontrolka-72 .row,
#kontrolka-72 .form-row {
    margin-left: -6px !important;
    margin-right: -6px !important;
}


#kontrolka-72 .row > [class*="col-"],
#kontrolka-72 .form-row > [class*="col-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
}


/* =========================================================
   11. ZAŁĄCZNIKI
========================================================= */

#kontrolka-72 .solex-input-file {
    min-height: 44px !important;

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

    background: #FAFAFA !important;

    border: 1px solid #E0E0E0 !important;
    border-radius: 7px !important;

    overflow: hidden !important;

    box-shadow: none !important;
}


/* lewy label Załącznik 1/2/3 */
#kontrolka-72
.solex-input-file
.input-group-prepend {
    display: flex !important;

    align-items: center !important;

    min-height: 42px !important;

    padding: 0 12px !important;

    background: #F2F2F2 !important;

    border-right: 1px solid #DFDFDF !important;

    color: #555555 !important;

    font-size: 11px !important;
    font-weight: 600 !important;
}


/* pole pliku */
#kontrolka-72 input[type="file"] {
    width: 100% !important;

    min-height: 42px !important;

    background: #FFFFFF !important;

    color: #555555 !important;

    font-size: 11px !important;
}


/* przycisk wyboru pliku - Chrome/Edge/Firefox/Safari */
#kontrolka-72 input[type="file"]::file-selector-button {
    height: 42px;

    margin-right: 12px;

    padding: 0 14px;

    background: #FFFFFF;

    border: 0;
    border-left: 1px solid #E0E0E0;

    color: #333333;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}


#kontrolka-72
input[type="file"]::file-selector-button:hover {
    background: #E56B28;

    color: #FFFFFF;
}


/* Safari / starsze WebKit */
#kontrolka-72
input[type="file"]::-webkit-file-upload-button {
    height: 42px;

    margin-right: 12px;

    padding: 0 14px;

    background: #FFFFFF;

    border: 0;
    border-left: 1px solid #E0E0E0;

    color: #333333;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}


/* =========================================================
   12. ZGODY / CHECKBOXY
========================================================= */

#kontrolka-72 input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;

    min-width: 17px !important;

    margin: 0 8px 0 0 !important;

    accent-color: #E56B28;

    cursor: pointer !important;
}


#kontrolka-72
input[type="checkbox"] + label {
    display: inline !important;

    margin: 0 !important;

    color: #4C4C4C !important;

    font-size: 12px !important;

    cursor: pointer !important;
}


/* wiersz zgody */
#kontrolka-72 .form-check {
    display: flex !important;

    align-items: flex-start !important;

    margin-bottom: 9px !important;

    padding: 0 !important;
}


/* =========================================================
   13. LINKI REGULAMINÓW
========================================================= */

#kontrolka-72 a {
    color: #E56B28 !important;

    text-decoration: none !important;

    transition:
        color .2s ease !important;
}


#kontrolka-72 a:hover {
    color: #C9561D !important;

    text-decoration: underline !important;
}


/* =========================================================
   14. RECAPTCHA
========================================================= */

#kontrolka-72 .g-recaptcha {
    margin-top: 18px !important;
    margin-bottom: 18px !important;

    transform-origin: left top !important;
}


/* =========================================================
   15. PRZYCISK ZAREJESTRUJ SIĘ
========================================================= */

#kontrolka-72 button[type="submit"],
#kontrolka-72 .btn-primary {
    min-width: 180px !important;
    min-height: 46px !important;

    display: inline-flex !important;

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

    margin-top: 18px !important;

    padding: 0 25px !important;

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

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

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

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

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

    cursor: pointer !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease !important;
}


#kontrolka-72 button[type="submit"]:hover,
#kontrolka-72 .btn-primary:hover {
    transform: translateY(-2px) !important;

    filter: brightness(1.04);

    box-shadow:
        0 9px 21px rgba(229,107,40,.38),
        0 0 14px rgba(229,107,40,.10) !important;
}


/* =========================================================
   16. PRZYCISK NA ŚRODKU
========================================================= */

#kontrolka-72 form > button[type="submit"] {
    display: flex !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   17. TABLET
========================================================= */

@media (max-width: 991.98px) {

    #kontrolka-72 {
        margin-top: 12px !important;

        padding: 24px 22px 28px !important;

        border-radius: 12px !important;
    }


    #kontrolka-72::before {
        left: 22px;
        right: 22px;
    }


    #kontrolka-72 h4 {
        font-size: 23px !important;
    }


    #kontrolka-72 h6.naglowek,
    #kontrolka-72 .naglowek-z-linia {
        margin-top: 21px !important;

        font-size: 14px !important;
    }
}


/* =========================================================
   18. MOBILE
========================================================= */

@media (max-width: 767.98px) {

    #kontrolka-103 {
        margin-top: 12px !important;

        padding: 11px 13px !important;

        font-size: 12px !important;
    }


    #kontrolka-72 {
        margin: 10px 0 25px !important;

        padding: 20px 15px 24px !important;

        border-radius: 10px !important;
    }


    #kontrolka-72::before {
        left: 15px;
        right: 15px;
    }


    #kontrolka-72 h4 {
        margin-bottom: 20px !important;

        font-size: 21px !important;
    }


    /* wszystkie kolumny w jednej kolumnie */
    #kontrolka-72 .row > [class*="col-"],
    #kontrolka-72 .form-row > [class*="col-"] {
        flex: 0 0 100% !important;

        width: 100% !important;
        max-width: 100% !important;
    }


    #kontrolka-72 h6.naglowek,
    #kontrolka-72 .naglowek-z-linia {
        margin-top: 20px !important;
        margin-bottom: 13px !important;

        padding-bottom: 9px !important;

        font-size: 14px !important;
    }


    #kontrolka-72 .form-group {
        margin-bottom: 12px !important;
    }


    #kontrolka-72 .form-control,
    #kontrolka-72 input[type="text"],
    #kontrolka-72 input[type="email"],
    #kontrolka-72 input[type="tel"],
    #kontrolka-72 input[type="number"],
    #kontrolka-72 input[type="password"],
    #kontrolka-72 select {
        min-height: 44px !important;

        font-size: 13px !important;
    }


    #kontrolka-72 textarea {
        min-height: 95px !important;
    }


    /* załączniki */
    #kontrolka-72 .solex-input-file {
        min-height: 44px !important;
    }


    /* button full width */
    #kontrolka-72 button[type="submit"],
    #kontrolka-72 .btn-primary {
        width: 100% !important;

        min-height: 48px !important;

        margin-top: 18px !important;
    }
}


/* =========================================================
   19. MAŁE TELEFONY
========================================================= */

@media (max-width: 420px) {

    #kontrolka-72 {
        padding:
            18px 12px 22px !important;
    }


    #kontrolka-72 h4 {
        font-size: 20px !important;
    }


    #kontrolka-72 h6.naglowek,
    #kontrolka-72 .naglowek-z-linia {
        font-size: 13px !important;
    }


    /*
       reCAPTCHA ma 304 px szerokości,
       więc na bardzo małych ekranach lekko ją skalujemy.
    */
    #kontrolka-72 .g-recaptcha {
        transform: scale(.90) !important;

        transform-origin: left top !important;

        margin-bottom: -5px !important;
    }
}


/* =========================================================
   20. BARDZO MAŁE TELEFONY
========================================================= */

@media (max-width: 350px) {

    #kontrolka-72 .g-recaptcha {
        transform: scale(.82) !important;

        margin-bottom: -12px !important;
    }
}
/* =========================================================
   HYDROFLEX - REJESTRACJA
   ZAŁĄCZNIKI + FINALNY PRZYCISK
========================================================= */


/* =========================================================
   1. WIERSZ ZAŁĄCZNIKA
========================================================= */

#kontrolka-72 .solex-input-file {
    display: flex !important;
    align-items: center !important;

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

    margin-bottom: 10px !important;
    padding: 4px !important;

    background: #FAFAFA !important;

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

    box-sizing: border-box !important;

    overflow: hidden !important;

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

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


/* hover całego wiersza */
#kontrolka-72 .solex-input-file:hover {
    background: #FFFFFF !important;

    border-color: rgba(229,107,40,.30) !important;

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


/* =========================================================
   2. LEWA CZĘŚĆ - ZAŁĄCZNIK 1 / 2 / 3
========================================================= */

#kontrolka-72
.solex-input-file
.input-group-prepend {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    min-width: 100px !important;
    min-height: 38px !important;

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

    background: #F1F1F1 !important;

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

    color: #414141 !important;

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

    box-sizing: border-box !important;
}


/* tekst wewnątrz */
#kontrolka-72
.solex-input-file
.input-group-text {
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    color: inherit !important;

    font-size: inherit !important;
}


/* =========================================================
   3. NAZWA WYBRANEGO PLIKU
========================================================= */

#kontrolka-72 .solex-input-file > label {
    display: flex !important;
    align-items: center !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;
    min-height: 38px !important;

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

    color: #777777 !important;

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

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

    box-sizing: border-box !important;
}


/* =========================================================
   4. PRAWA CZĘŚĆ
========================================================= */

#kontrolka-72
.solex-input-file
.input-group-append {
    display: flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;

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


/* =========================================================
   5. WYBIERZ PLIK Z DYSKU
========================================================= */

#kontrolka-72
.solex-input-file
button.wybierz-plik {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 165px !important;
    height: 38px !important;
    min-height: 38px !important;

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

    background: #FFFFFF !important;

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

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

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

    white-space: nowrap !important;

    box-shadow: none !important;

    cursor: pointer !important;

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


/* hover */
#kontrolka-72
.solex-input-file
button.wybierz-plik:hover {
    background:
        linear-gradient(
            135deg,
            #F47B32 0%,
            #E56B28 52%,
            #C9561D 100%
        ) !important;

    border-color: #E56B28 !important;

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

    transform: translateY(-1px) !important;

    box-shadow:
        0 5px 13px rgba(229,107,40,.23) !important;
}


/* kliknięcie */
#kontrolka-72
.solex-input-file
button.wybierz-plik:active {
    transform: translateY(0) scale(.98) !important;
}


/* =========================================================
   6. UKRYTY PRAWDZIWY INPUT PLIKU
   zostawiamy funkcjonalność Solexa
========================================================= */

#kontrolka-72
.solex-input-file
input[type="file"] {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* =========================================================
   7. GŁÓWNY PRZYCISK "ZAREJESTRUJ SIĘ"
   PEŁNA SZEROKOŚĆ RÓWNIEŻ NA DESKTOPIE
========================================================= */

#kontrolka-72 button[type="submit"],
#kontrolka-72 .btn-primary[type="submit"] {
    display: flex !important;

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

    width: 100% !important;
    max-width: none !important;

    min-height: 50px !important;

    margin: 24px 0 0 0 !important;

    padding: 0 24px !important;

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

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

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

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

    letter-spacing: .15px !important;

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

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease !important;
}


#kontrolka-72 button[type="submit"]:hover,
#kontrolka-72 .btn-primary[type="submit"]:hover {
    transform: translateY(-2px) !important;

    filter: brightness(1.035) !important;

    box-shadow:
        0 10px 24px rgba(229,107,40,.36),
        0 0 14px rgba(229,107,40,.08) !important;
}


#kontrolka-72 button[type="submit"]:active,
#kontrolka-72 .btn-primary[type="submit"]:active {
    transform: translateY(0) scale(.995) !important;
}


/* =========================================================
   8. TABLET
========================================================= */

@media (max-width: 991.98px) {

    #kontrolka-72
    .solex-input-file
    .input-group-prepend {
        min-width: 90px !important;
    }


    #kontrolka-72
    .solex-input-file
    button.wybierz-plik {
        min-width: 145px !important;
    }
}


/* =========================================================
   9. MOBILE
========================================================= */

@media (max-width: 575.98px) {

    #kontrolka-72 .solex-input-file {
        flex-wrap: wrap !important;

        gap: 6px !important;

        padding: 7px !important;
    }


    /* pierwszy rząd */
    #kontrolka-72
    .solex-input-file
    .input-group-prepend {
        min-width: 90px !important;

        height: 36px !important;
        min-height: 36px !important;
    }


    #kontrolka-72
    .solex-input-file > label {
        min-height: 36px !important;

        padding: 0 8px !important;

        font-size: 10.5px !important;
    }


    /* button w drugim rzędzie na całą szerokość */
    #kontrolka-72
    .solex-input-file
    .input-group-append {
        flex: 1 0 100% !important;

        width: 100% !important;
    }


    #kontrolka-72
    .solex-input-file
    button.wybierz-plik {
        width: 100% !important;
        min-width: 0 !important;

        height: 40px !important;
        min-height: 40px !important;
    }


    #kontrolka-72 button[type="submit"],
    #kontrolka-72 .btn-primary[type="submit"] {
        min-height: 48px !important;

        font-size: 13px !important;
    }
}