/* =========================================================
   SPORTOVAVYZIVA.SK - JEDNODUCHY MODERNY HEADER
   Menu ani nasepkavac vyhladavania neupravujeme
   ========================================================= */


/* =========================
   DESKTOP
   ========================= */

@media (min-width: 768px) {

    /* MODRE POZADIE HEADERA */

    #header {
        background:
            radial-gradient(
                ellipse at 50% 30%,
                rgba(0, 185, 255, 0.36) 0%,
                rgba(0, 128, 225, 0.17) 30%,
                transparent 60%
            ),

            radial-gradient(
                ellipse at 18% 38%,
                rgba(0, 165, 255, 0.20) 0%,
                transparent 38%
            ),

            linear-gradient(
                112deg,
                #03285c 0%,
                #07509a 28%,
                #0870c6 50%,
                #07509a 70%,
                #03285c 100%
            ) !important;

        color: #ffffff;
    }


/* =========================
   SEARCH
   ========================= */

#header .search-form {
    border-radius: 8px;
    transition: box-shadow 0.2s ease;
}

/* aktivne vyhladavanie */
#header .search-form:focus-within {
    box-shadow:
        0 0 0 3px #42c7ff,
        0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

#header .search-input {
    border-radius: 8px 0 0 8px !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

#header .search-input:focus {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

#header .search-form button {
    border-radius: 0 8px 8px 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    background: linear-gradient(
        180deg,
        #ef2947 0%,
        #db1f3d 100%
    ) !important;

    color: #fff !important;
}

#header .search-form button:hover {
    background: linear-gradient(
        180deg,
        #f43b57 0%,
        #cf1734 100%
    ) !important;
}

/* =========================
   KOSIK
   ========================= */

#header .navigation-buttons a[data-target="cart"] {
    min-width: 125px;
    min-height: 58px;

    padding: 0 20px 0 24px;

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

    box-sizing: border-box;

    border-radius: 8px !important;

    background: rgba(255, 255, 255, 0.07) !important;

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

    outline: none !important;
    box-shadow: none !important;

    color: #fff !important;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


/* iba hover */
#header .navigation-buttons a[data-target="cart"]:hover {
    background: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;

    outline: none !important;
    box-shadow: none !important;

    color: #fff !important;
}


/* odstranime Shoptet focus efekt po odchode mysi */
#header .navigation-buttons a[data-target="cart"]:focus,
#header .navigation-buttons a[data-target="cart"]:active,
#header .navigation-buttons a[data-target="cart"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;

    border: 1px solid rgba(255, 255, 255, 0.16) !important;
}


#header .cart-price {
    color: #fff !important;
    font-weight: 700;
}
/* =========================
   MOBIL
   ========================= */

@media (max-width: 767px) {

    #header {
        background:
            radial-gradient(
                ellipse at 50% 30%,
                rgba(0, 155, 245, 0.25) 0%,
                transparent 58%
            ),

            linear-gradient(
                120deg,
                #03285c 0%,
                #0765ad 50%,
                #03285c 100%
            ) !important;
    }

}