/* Header */

.header-wrapper {
    position: sticky;
    z-index: 250;
    top: 0;
    left: 0;
    right: 0;
    color: var(--theme-header-color, #000);
    background-color: var(--theme-header-background, #fff);

    &.is-relative {
        position: relative;
    }

    &.is-fixed {
        position: fixed;
    }

    .header-bar {
        color: var(--theme-header-bar-color, #000);
        background-color: var(--theme-header-bar-background, #fff);

        .container {
            display: flex;
            flex-wrap: nowrap;
            position: relative;
            justify-content: space-between;
            min-height: var(--theme-header-bar-height, 40px);
            gap: 0 30px;

            @media all and (max-width: 767px) {
                flex-direction: column;
            }
        }

        .bar-element {
            display: inline-flex;
            align-items: center;
            position: relative;
            max-width: 100%;

            &.is-optional {
                flex-wrap: wrap;
                flex: 1 1;
            }

            &.is-optional {
                flex-wrap: wrap;
            }

            &.is-fixed {
                height: var(--theme-header-bar-height, 40px);
            }

            &.is-priority {
                flex-wrap: nowrap;
                gap: 0 15px;
            }

            .trust-widget {
                --width-trust-widget: 390px;
                width: var(--width-trust-widget);
                max-width: var(--width-trust-widget);
                min-width: var(--width-trust-widget);
            }
            
            .localization {
                display: inline-flex;
                align-items: center;
                cursor: pointer;
            }

            @media all and (min-width: 768px) {

                .trust-widget {
                    justify-content: end;
                }

                &.is-announcement {
                    max-width: calc( 100% - 240px );
                    max-width: calc( 100% - 520px );
                }

            }

            .announcement-bar {

                .menu {
                    gap: 0 30px;
                    margin-left: 15px;
                }

                @media all and (min-width: 768px) {

                    .menu.has-widget {
                        display: none;
                    }

                }

            }

        }

        &.has-gradient {

            .container {
                padding-left: 0;
            }

            @media all and (max-width: 767px) {
                .container {
                    padding: 0;
                }
            }

            .bar-element.is-announcement {
                &::before,
                &::after {
                    content: ' ';
                    position: absolute;
                    width: 15px;
                    bottom: 0;
                    top: 0;
                    z-index: 5;
                    background: linear-gradient(90deg, var(--theme-header-bar-background, #000) 0%, transparent 100%);
                }
                &::before {
                    left: 0;
                }
                &::after {
                    right: 0;
                    transform: scaleX(-1);
                }
            }

        }

        &.optional-bar {
            color: var(--theme-header-bar-optional-color, #000);
            background-color: var(--theme-header-bar-optional-background, #fff);
        }

    }



    .header {
        display: flex;
        min-height: var(--theme-header-height, 80px);
        background-color: var(--theme-header-background, #fff);
        z-index: 25;
        gap: 30px;
    }


    .header-logo {
        display: flex;
        align-items: center;
    }


    .header-menu,
    .header-navbar {
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 15px;
    }


    .header-navbar {
        flex: 1 1;
    }


    .header-nav,
    .header-nav-container {
        display: flex;
        justify-content: space-between;
        flex: 1 1;
    }

    .header-menu {
        display: inline-flex;

        & > ul.menu {
            gap: 20px;

            & > li > a {
                padding: 10px 0;
            }
        }


        li.has-dropdown > .dropdown {
            position: absolute;
            left: -15px;
            z-index: 35;
            min-width: 120px;
            padding: 12px 15px;

            color: var( --theme-dropdown-color, #000 );
            background: var( --theme-dropdown-background, none );
            box-shadow: var(--theme-dropdown-box-shadow, none );
            border: 1px solid var(--theme-dropdown-border-color, #d9d9d9);
            border-radius: var(--theme-dropdown-border-radius, 6px);

            & > ul.menu {

                li {
                    white-space: nowrap;
                }

            }
        }
    }


    .header-language {
        display: inline-flex;

        i.icon svg {
            border: 2px solid white;
            border-radius: 6px;
        }
    }


    .header-profile {
        display: inline-flex;

        .dropdown {
            max-width: calc( 100vh - 20px );
            width: 360px;
        }

    }



    @media all and (min-width: 768px) {


        .header-language {
            order: 1;
        }

        .header-profile {
            order: 2;
        }

        .header-hamburger {
            display: none;
        }

        .header-bar {
            .bar-element {
                &.is-optional {
                    ul.has-widget {
                        display: none;
                    }
                }
            }
        }

    }


    @media all and (max-width: 767px) {

        .header-bar {
            .bar-element {
                &.is-priority:not(.visible) {
                    display: none;
                }
            }
        }

    }



    /* Header Settings */

    &:not(.visible-settings) .header-settings {
        display: none;
    }

    .header-settings {

        .article {
            padding: 10px 0;
            line-height: 1.35em;
            font-size: var(--15px);
        }

        .form {
            padding: 10px 0 15px;

            .form-actions {
                gap: 0 4px;
            }

        }

        @media all and (max-width: 767px) {

            .form {
                padding-top: 0;
            }

        }

        @media all and (max-width: 575px) {

            .form {
                flex-wrap: wrap;

                /*flex-direction: column;*/
                /*text-align: left;*/
                /*align-items: start;*/
                /*flex: 1 1;*/

            }

        }

    }



    /* Tablet */

    .header-nav.variant-1 {

        @media all and (max-width: 767px) {
            & {

                transition: 0.35s;
                html:not(.menu-open) & {
                    transform: translateY(0%);
                }

                position: absolute;
                bottom: 2px;
                left: 0;
                right: 0;
                z-index: -1;
                transform: translateY(100%);
                color: var(--theme-header-color, #000);
                background-color: var(--theme-header-background, #fff);

                .header-nav-container {
                    position: relative;
                    padding-left: var(--container-padding, 15px);
                    padding-right: var(--container-padding, 15px);
                    max-width: var(--container-size, 100%);
                    margin: 0 auto;
                }

            }

        }

        /* Mobile */

        @media all and (max-width: 575px) {
            & {

                .header-nav-container {
                    flex-direction: column;

                    .header-menu {
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: flex-start;

                        ul.menu {
                            flex-direction: column;
                            gap: 0;
                        }
                    }

                }

            }
        }

    }


    .header-nav.variant-2 {

        /* Tablet */

        @media all and (max-width: 767px) {
            & {

                transition: opacity 0.25s, transform 0s linear 0.26s;
                html.menu-open & {
                    transition: opacity 0.25s, transform 0s linear 0s;
                }

                html:not(.menu-open) & {
                    pointer-events: none;
                    opacity: 0;
                }

                position: fixed;
                overflow: auto;
                z-index: -1;
                inset: 0;
                top: var(--theme-header-height-total, 80px);
                color: var(--theme-header-color, #000);
                background-color: var(--theme-header-background, #fff);
                padding-bottom: var(--container-padding, 15px);

                .header-nav-container {
                    position: relative;
                    padding-left: var(--container-padding, 15px);
                    padding-right: var(--container-padding, 15px);
                    max-width: var(--container-size, 100%);
                    margin: 0 auto;
                }

                .header-nav-container {
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: flex-start;

                    .header-menu {
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: flex-start;

                        &:last-child {
                            padding-bottom: 15px;
                        }

                        ul.menu {
                            flex-direction: column;
                            gap: 0;
                        }
                    }

                }

            }

        }

        /* Mobile */

    }



    /* Header Cart */

    .cart-button {
        position: relative;

        .cart-amount {
            position: absolute;
            right: -5px;
            top: -5px;
            padding: 0px 5px;
            border-radius: 5px;
            transform: translateX(100%);
            color: var(--theme-header-bar-color, #000);
            background-color: var(--theme-header-bar-background, #fff);
        }
    }




}





/* Footer */

.footer-wrapper {


    .menu-title {
        margin-bottom: 8px;
    }


    .footer-top {
        padding-top: var(--size-normal, 15px);
    }


    .footer-bottom {
        padding: 30px 0;
    }


    .footer-navigation {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 30px var(--offset-article-wrap);

        @media all and (max-width: 767px) {
            flex-direction: column;
        }
    }


    .footer-section {
        display: flex;
        justify-content: space-between;
        gap: 30px 30px;

        @media all and (max-width: 991px) {
            flex-direction: column;
        }

        @media all and (min-width: 992px) {

            .section.is-secondary {
                display: flex;
                flex-direction: column;
                align-items: end;
                order: 2;
            }

            .section.size-3 {
                flex: 0 0 33.333%;
                max-width: 33.333%;
            }

            .trust-reviews {
                justify-content: end;
            }

        }

    }




    .footer-copyright {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0 30px;
        margin-top: 30px;
        font-size: var(--12px);

        .copyright-info {
            display: inline-block;
        }

        .localization {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            gap: 6px;

            span {
                white-space: nowrap;
                font-size: var(--12px, 12px);
                font-weight: 500;
            }
        }
    }





    @media all and (min-width: 992px) {

        .footer-section.section-info .section {
            display: flex;
            align-items: center;
        }

    }



    @media all and (max-width: 991px) {

        .footer-copyright {
            margin-top: 30px;
        }

    }


    @media all and (max-width: 767px) {

        .footer-copyright {
            flex-direction: column;

            .localization {
                margin-top: 15px;
            }
        }

        .menu-copyright ul.menu-inline {
            flex-direction: column;
        }

    }





}