/* =========================================================
   HYDROFLEX
   LOGIN / REJESTRACJA
   PREMIUM LIGHT + DARK
========================================================= */

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

    --hf-dark: #141414;
    --hf-dark-soft: #1C1C1C;

    --hf-text: #1A1A1A;
    --hf-muted: #777777;

    --hf-border: #E5E5E5;
    --hf-soft: #FAFAFA;
}


/* =========================================================
   1. CAŁA SEKCJA LOGOWANIA
========================================================= */

.strona-logowania {
    position: relative;

    align-items: stretch !important;

    margin-top: 28px !important;
    margin-bottom: 36px !important;

    padding: 0 !important;

    background: #FFFFFF;

    border: 1px solid #E8E8E8;
    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 16px 45px rgba(0,0,0,.08),
        0 2px 8px rgba(0,0,0,.03);
}


/* subtelny akcent na górze */
.strona-logowania::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

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

    z-index: 5;
}


/* =========================================================
   2. LEWA CZĘŚĆ - LOGOWANIE
========================================================= */

.strona-logowania #kontrolka-56 {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 430px;

    padding: 48px 52px !important;

    background: #FFFFFF !important;

    box-sizing: border-box;
}


/* =========================================================
   3. NAGŁÓWEK "ZALOGUJ SIĘ"
========================================================= */

.strona-logowania #kontrolka-56 h4,
.strona-logowania #kontrolka-56 .naglowek {
    position: relative;

    margin: 0 0 30px 0 !important;

    padding: 0 0 14px 0 !important;

    color: #161616 !important;

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

    line-height: 1.2;

    border-bottom: 1px solid #E9E9E9 !important;
}


/* pomarańczowa linia */
.strona-logowania #kontrolka-56 h4::after,
.strona-logowania #kontrolka-56 .naglowek::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 74px;
    height: 3px;

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

    border-radius: 3px;
}


/* =========================================================
   4. FORMULARZ
========================================================= */

.strona-logowania #kontrolka-56 form {
    width: 100%;

    margin: 0 !important;
}


/* =========================================================
   5. LABEL
========================================================= */

.strona-logowania #kontrolka-56 label {
    display: block;

    margin-bottom: 7px !important;

    color: #444444 !important;

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


/* =========================================================
   6. POLA LOGIN / HASŁO
========================================================= */

.strona-logowania #kontrolka-56 .form-control,
.strona-logowania #kontrolka-56 input[type="text"],
.strona-logowania #kontrolka-56 input[type="email"],
.strona-logowania #kontrolka-56 input[type="password"] {
    width: 100% !important;

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

    margin: 0 0 17px 0 !important;

    padding: 0 14px !important;

    background: #FAFAFA !important;

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

    color: #1A1A1A !important;

    font-size: 14px !important;

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

    box-sizing: border-box !important;

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


/* focus */
.strona-logowania #kontrolka-56 .form-control:focus,
.strona-logowania #kontrolka-56 input:focus {
    background: #FFFFFF !important;

    border-color: #E56B28 !important;

    outline: none !important;

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


/* =========================================================
   7. DOLNA CZĘŚĆ FORMULARZA
========================================================= */

.strona-logowania
#kontrolka-56
.kontrolka-Logowanie__bottom-section {
    display: flex !important;

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

    gap: 18px;

    margin-top: 4px !important;
}


/* =========================================================
   8. RESET HASŁA
========================================================= */

.strona-logowania #kontrolka-56 a {
    color: #555555 !important;

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

    text-decoration: none !important;

    transition:
        color .2s ease !important;
}


.strona-logowania #kontrolka-56 a:hover {
    color: #E56B28 !important;

    text-decoration: underline !important;
}


/* =========================================================
   9. PRZYCISK ZALOGUJ
========================================================= */

.strona-logowania #kontrolka-56 button,
.strona-logowania #kontrolka-56 input[type="submit"],
.strona-logowania #kontrolka-56 .btn {
    min-height: 44px !important;

    padding: 0 24px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !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,.26),
        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;
}


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

    filter: brightness(1.03);

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


/* =========================================================
   10. PRAWA CZĘŚĆ - REJESTRACJA
========================================================= */

.strona-logowania #kontrolka-57 {
    position: relative;

    display: flex !important;
    flex-direction: column !important;

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

    min-height: 430px;

    padding: 48px 54px !important;

    background:
        linear-gradient(
            145deg,
            #151515 0%,
            #1B1B1B 55%,
            #111111 100%
        ) !important;

    color: #FFFFFF !important;

    text-align: center !important;

    overflow: hidden;
}


/* dekoracyjne światło */
.strona-logowania #kontrolka-57::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -120px;
    top: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(229,107,40,.20) 0%,
            rgba(229,107,40,.06) 38%,
            transparent 70%
        );

    pointer-events: none;
}


/* drugi delikatny glow */
.strona-logowania #kontrolka-57::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -100px;
    bottom: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(229,107,40,.11),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   11. TEKST PANELU REJESTRACJI
========================================================= */

.strona-logowania #kontrolka-57 p,
.strona-logowania #kontrolka-57 div,
.strona-logowania #kontrolka-57 span {
    position: relative;

    z-index: 2;

    color: #FFFFFF !important;
}


/* większy pierwszy tekst */
.strona-logowania #kontrolka-57 > p:first-child,
.strona-logowania #kontrolka-57 > div:first-child,
.strona-logowania #kontrolka-57 > span:first-child {
    max-width: 480px;

    margin-bottom: 20px !important;

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

    line-height: 1.35 !important;
}


/* =========================================================
   12. LINK REJESTRACJI = CTA
========================================================= */

.strona-logowania #kontrolka-57 a {
    position: relative;

    z-index: 5;

    display: inline-flex !important;

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

    min-height: 44px !important;

    margin-top: 12px !important;

    padding: 0 24px !important;

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

    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 8px !important;

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

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

    text-decoration: none !important;

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

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


.strona-logowania #kontrolka-57 a:hover {
    transform: translateY(-2px) !important;

    filter: brightness(1.04);

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


/* =========================================================
   13. TABLET
========================================================= */

@media (max-width: 991.98px) {

    .strona-logowania {
        margin-top: 20px !important;

        border-radius: 13px;
    }


    .strona-logowania #kontrolka-56,
    .strona-logowania #kontrolka-57 {
        min-height: 390px;

        padding: 38px 32px !important;
    }


    .strona-logowania #kontrolka-56 h4,
    .strona-logowania #kontrolka-56 .naglowek {
        font-size: 23px !important;
    }


    .strona-logowania #kontrolka-57 > p:first-child,
    .strona-logowania #kontrolka-57 > div:first-child,
    .strona-logowania #kontrolka-57 > span:first-child {
        font-size: 21px !important;
    }
}


/* =========================================================
   14. MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .strona-logowania {
        display: flex !important;

        flex-direction: column !important;

        margin: 14px 0 26px !important;

        border-radius: 11px;
    }


    /*
       logowanie zawsze pierwsze
    */
    .strona-logowania #kontrolka-56 {
        order: 0 !important;

        min-height: auto;

        padding: 28px 20px 30px !important;
    }


    /*
       rejestracja pod formularzem
    */
    .strona-logowania #kontrolka-57 {
        order: 1 !important;

        min-height: 230px;

        padding: 30px 22px !important;
    }


    .strona-logowania #kontrolka-56 h4,
    .strona-logowania #kontrolka-56 .naglowek {
        margin-bottom: 23px !important;

        font-size: 21px !important;
    }


    .strona-logowania #kontrolka-56 .form-control,
    .strona-logowania #kontrolka-56 input[type="text"],
    .strona-logowania #kontrolka-56 input[type="email"],
    .strona-logowania #kontrolka-56 input[type="password"] {
        height: 46px !important;
        min-height: 46px !important;
    }


    /* dolny rząd formularza */
    .strona-logowania
    #kontrolka-56
    .kontrolka-Logowanie__bottom-section {
        align-items: stretch !important;

        flex-direction: column !important;

        gap: 14px !important;
    }


    /* login button na całą szerokość */
    .strona-logowania #kontrolka-56 button,
    .strona-logowania #kontrolka-56 input[type="submit"],
    .strona-logowania #kontrolka-56 .btn {
        width: 100% !important;

        min-height: 46px !important;
    }


    .strona-logowania #kontrolka-57 > p:first-child,
    .strona-logowania #kontrolka-57 > div:first-child,
    .strona-logowania #kontrolka-57 > span:first-child {
        margin-bottom: 14px !important;

        font-size: 19px !important;
    }


    .strona-logowania #kontrolka-57 a {
        width: 100% !important;

        max-width: 260px;

        min-height: 44px !important;
    }
}


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

@media (max-width: 380px) {

    .strona-logowania #kontrolka-56 {
        padding: 24px 16px 27px !important;
    }


    .strona-logowania #kontrolka-57 {
        padding: 26px 16px !important;
    }


    .strona-logowania #kontrolka-56 h4,
    .strona-logowania #kontrolka-56 .naglowek {
        font-size: 20px !important;
    }


    .strona-logowania #kontrolka-57 > p:first-child,
    .strona-logowania #kontrolka-57 > div:first-child,
    .strona-logowania #kontrolka-57 > span:first-child {
        font-size: 18px !important;
    }
}