header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;

    .logo {
        cursor: pointer;
        margin: 10px;
    }

    nav {
        text-align: center;
        background-color: #FFFA;
        backdrop-filter: blur(5px);
        border-radius: 7px;
        box-sizing: border-box;
        box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);

        a {
            display: inline-block;
            vertical-align: top;
            text-decoration: none;
            color: var(--red);
            font-weight: 600;
            font-family: 'Merriweather', Georgia, serif;
        }

        .button {
            color: #FFF;
            background-color: var(--red);
            padding: 8px 20px;
            border-radius: 10px;
            text-transform: uppercase;
            white-space: nowrap;
            font-size: 14px;
            position: relative;

            &::before,
            &::after {
                content: '';
                display: inline-block;
                width: 16px;
                height: 16px;
                background-color: var(--red);
                border-radius: 50%;
                position: absolute;
                top: 9px;
            }

            &::before {
                left: -7px;
            }

            &::after {
                right: -7px;
            }
        }

        .lang {
            a,
            span {
                background-color: #FFFA;
                backdrop-filter: blur(5px);
                display: inline-block;
            }

            span { color: var(--red); }
        }
    }

    .phone {
        margin: 3px 10px 0 0;
        
        a {
            font-size: 15px;
            padding: 8px 15px 8px 30px;
            background-color: #FFFA;
            backdrop-filter: blur(5px);
            border-radius: 7px;
            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);

            background-image: url('/svg/contact/mobile.svg');
            background-size: 20px 20px;
            background-position: left 7px center;
            background-repeat: no-repeat;
            text-transform: uppercase;
        }
    }

    .voucher a {
        background-image: url('/shtastliveca/svg/header/gift.svg');
        background-size: 18px 18px;
        background-position: left 12px top 7px;
        background-repeat: no-repeat;
        padding-left: 40px !important;
    }

    a.book {
        background-image: url('/shtastliveca/svg/header/book.svg');
        background-size: 18px 18px;
        background-position: left 12px top 7px;
        background-repeat: no-repeat;
        padding-left: 40px !important;
    }

    .order {
        margin: 3px 10px 0 0;

        a {
            background-color: #FFFA;
            backdrop-filter: blur(5px);
            border-radius: 7px;
            padding: 8px 15px 8px 32px;
            font-size: 15px;
            text-transform: uppercase;
            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);

            background-image: url('/shtastliveca/svg/header/basket.svg');
            background-size: 18px 18px;
            background-position: left 9px top 7px;
            background-repeat: no-repeat;
        }
    }

    /* Social */
    .social {
        white-space: nowrap;

        .icon {
            background-color: #FFFA;
            backdrop-filter: blur(5px);
            border-radius: 7px;

            padding: 7px;
            border-radius: 50%;
            width: 25px;
            height: 23px;
            margin: 0 3px;

            img {
                width: 20px;
                height: 20px;
            }
        }
    }
}

/* Mobile & Tablet */
@media (max-width: 979.999px) {
    header .logo {
        margin: 10px auto;
        max-width: 300px;
        display: block;
        text-align: center;
    }

    header nav {
        position: fixed;
        bottom: 10px;
        left: 10px;
        right: 10px;
        z-index: 1;

        background-color: #FFFA;
        backdrop-filter: blur(5px);
        border-radius: 7px;
        box-sizing: border-box;
        box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);

        a.button {
            margin: 0 20px;
        }

        .lang {
            a,
            span {
                border-radius: 7px;
                padding: 10px 20px;
                background-color: #FFFA;
                backdrop-filter: blur(5px);
                display: inline-block;
                box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
            }

            span { color: var(--red); }
        }
    }

    header nav > div:first-child {
        margin-top: 20px;
        margin-bottom: 30px;

        div {
            margin: 15px 0;
        }
    }
    
    body:not(.nav) header nav > div:first-child {
        display: none;
    }

    header nav > div:last-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* Desktop */
@media (min-width: 980px) {
    header {
        .logo {
            display: block;
            width: 300px;
            text-align: center;
            margin: 10px auto -15px auto;
            position: relative;
            z-index: 1;
        }

        nav {
            display: flex;
            justify-content: space-between;
            /* border: 1px solid #CCC; */
            background-color: #FFF9;
            margin: 0 10px;
            padding: 10px 20px;

            .xE {
                display: none;
            }

            > div:first-child {
                display: flex;
                justify-content: space-between;
                flex: 1;

                .nav {
                    display: flex;
                    justify-content: space-between;
                    gap: 20px;
                    width: 100%;
                    padding: 0 30px;

                    > div {
                        display: flex;
                        justify-content: space-between;
                        gap: 20px;
                    }

                    a {
                        padding: 7px 5px;
                    }
                }
            }

            .phone {
                position: absolute;
                top: -65px;
                left: 10px;
            }

            .social {
                position: absolute;
                top: -64px;
                left: 200px;
            }

            .lang {
                position: absolute;
                top: -64px;
                right: 200px;

                a,
                span {
                    border-radius: 50%;
                    padding: 9px;
                    margin: 0 3px;
                }
            }

            .order {
                position: absolute;
                top: -65px;
                right: 10px;
                text-transform: uppercase;
            }
        }
    }

    html[lang=en] .social {
        left: 170px;
    }

    html[lang=en] .lang {
        right: 220px;
    }

    html[lang=bg] .social {
        left: 200px;
    }

    html[lang=bg] .lang {
        right: 250px;
    }
}
/* <<< */


@media (min-width: 1220px) {
    header .logo {
        margin-bottom: -55px;
    }
}