@import url('./../../../src/Components/SearchBar/searchbar.css');

.header {
    --space: 17.8px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space);
    background-color: #010E21;
    z-index: 99990;

    .menu-mobile-container {
        position: absolute;
        top: 73px;
        display: none;
        flex-direction: column;
        width: 210px;
        max-height: calc(100dvh - 74px - var(--wp-admin--admin-bar--height, 0px));
        padding-bottom: 10px;
        background-color: #fff;
        z-index: 99990;
        transition: left 250ms ease-in-out;
        overflow-y: auto;

        ul.header_menu {
            flex-direction: column;
            flex-wrap: nowrap;
            gap: 0;
            padding: 14px 7px;
            overflow-y: scroll;

            li {
                flex-direction: column;

                &.menu-item-has-children>a svg {
                    display: block;
                    transform: rotate(0deg);
                }

                &.menu-item-has-children.active>a svg {
                    transform: rotate(180deg);
                }

                a {
                    justify-content: space-between;
                    padding: 11px;
                    font-size: 14.66px;
                    line-height: 21.99px;
                    letter-spacing: 0%;
                }

                .sub-menu {
                    position: unset;
                    flex-direction: column;
                    align-self: center;
                    gap: 0;
                    padding: 0;

                    .line {
                        display: none;
                    }

                    li {
                        a {
                            padding: 8px;
                            font-weight: 500;
                            font-size: 11.4px;
                            line-height: 17.09px;
                            letter-spacing: 0%;
                        }

                        &.btn-primary {
                            justify-self: center;
                            margin: 0;

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

        .login-user-box a {
            justify-content: center;
            padding: 16px 20px;
            color: #05141F;
        }
    }

    .menu-toggle {
        display: none;
        justify-self: center;
        color: #FFFFFF;
        background: transparent;
        border: none;
        font-size: 2rem;
        cursor: pointer;
    }

    .header-logo {
        justify-self: flex-end;
        align-self: center;

        img {
            display: block;
            max-width: 141px;
            height: auto;
        }
    }

    .header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space);
        width: 100%;

        a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            text-transform: uppercase;
        }

        .cart-link {
            position: relative;
            justify-self: flex-start;
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;
            color: #000;
            text-decoration: none;
            font-weight: bold;

            i {
                font-size: 24px;
                color: #000;
            }

            .cart-count-badge {
                position: absolute;
                top: -8px;
                right: -8px;
                display: flex;
                justify-content: center;
                align-items: center;
                min-width: 16px;
                min-height: 16px;
                padding: 4px;
                background-color: var(--red-700);
                border-radius: 1000px;
                color: #fff;
                text-decoration: none;
                font-weight: bold;
                box-shadow: 0 4px 4px 0 rgb(0 0 0 / 25%);

                .cart-count {
                    font-size: 11px;
                    line-height: 0;
                    color: #fff;
                }
            }
        }

        .first-section {
            flex: 1;
            display: flex;
            gap: 49px;
        }

        .second-section {
            display: flex;
            align-items: center;
            gap: 29px;
        }
    }

    .menu-header-section {
        display: flex;
        justify-content: center;
        align-items: stretch;
        background-color: #fff;

        &.top {
            background-color: #05141F;

            &>div {
                padding: 9px 24px;
            }

            ul {
                display: flex;
                align-items: stretch;
                flex-wrap: wrap;
                gap: 26px;
                list-style: none;

                li {
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    color: #CBD4DC;
                }

                li.green {
                    color: #25D366;
                }
            }
        }

        &>div {
            width: 100%;
            padding-block: 4px;
        }

        .tag {
            align-self: center;
            padding: 3.8px 9.8px;
            border-radius: 2px;
            border: 1px solid #132D3E;
            font-weight: 500;
            font-size: 11px;
            line-height: 11px;
            letter-spacing: 0.88px;
            vertical-align: middle;
            text-transform: uppercase;
            color: #132D3E;
        }
    }

    ul.header_menu {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
        gap: 26px;
        list-style: none;

        li {
            position: relative;
            display: flex;
            justify-content: flex-start;
            align-items: stretch;

            &.menu-item-has-children>a svg {
                display: none;
            }

            a {
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 500;
                font-size: 14px;
                line-height: 20px;
                letter-spacing: -0.08px;
                vertical-align: middle;
                color: #05141F;
                text-decoration: none;
                padding: 8px 0;
            }

            .sub-menu {
                position: absolute;
                top: 40px;
                display: none;
                gap: 21px;
                width: max-content;
                background: #ffff;
                padding: 21px 29px;

                &.active {
                    display: flex;
                }

                .menu-col {
                    min-width: 160px;
                    width: 100%;
                }

                .line {
                    width: 1.54px;
                    height: auto;
                    margin-block: 6px;
                    background-color: #132D3E14;
                }

                li {

                    a {
                        justify-content: space-between;
                        width: 100%;
                        padding: 10px;
                        border-radius: 2px;
                        color: var(--btn-color);
                        font-weight: 500;
                        font-size: 13.46px;
                        line-height: 20.2px;
                        letter-spacing: 0%;
                        vertical-align: middle;
                        transition: all 0.25s;


                        &:nth-child(2n) {
                            border-left: 1px solid #CBD4DC;
                        }

                        &:hover {
                            background-color: #132D3E;
                            color: #fff;
                            transition: all 0.25s;
                        }
                    }

                    &.btn-primary {
                        --btn-background: #132D3E;
                        --btn-color: #fff;
                        --btn-hover-background: #fff;
                        --btn-hover-color: #132D3E;
                        --btn-border-color: #132D3E;
                        --btn-hover-border-color: #132D3E;
                        margin: 25px 0;
                        padding: 0;


                        a {
                            justify-content: center;
                            padding: 7px 10px;
                            font-weight: 600;
                            font-size: 10.79px;
                            line-height: 15.42px;
                            letter-spacing: -0.06px;
                            text-align: center;

                            svg {
                                display: none;
                            }

                            &:hover {
                                color: var(--btn-hover-color);
                                background-color: transparent;
                            }
                        }
                    }
                }
            }

            @media (max-width: 890px) {
                justify-content: center;
            }
        }

        &.header_menu_bottom::after {
            align-self: center;
            order: 998;
            content: '';
            display: block;
            width: 1px;
            height: 16px;
            background-color: #fff;
        }
    }

    .login-user-box a {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #CBD4DC;
        text-decoration: none;
    }
}

.breadcrumbs {
    display: flex;

    ul {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: 1rem;
        list-style: none;

        li {
            display: flex;
            align-items: center;
            gap: 5px;

            i,
            svg {
                color: #b3b3b3;
                font-size: 10px;
            }

            a {
                text-decoration: none;
                font-weight: bold;
                color: #b3b3b3;
            }

            &.active a {
                color: #000;
                font-weight: bold;
            }
        }
    }
}

@media (max-width: 768px) {
    .header {
        --icon-size: 2rem;
        --separator: 2rem;
        position: sticky;
        top: var(--wp-admin--admin-bar--height, 0px);

        .menu-toggle {
            display: block;
            z-index: 10;

            i {
                font-size: var(--icon-size);
            }
        }

        .header-logo {
            justify-self: center;
            z-index: 10;
        }

        .menu-header-section {
            display: none;
        }

        .header-wrapper {
            display: flex;
            row-gap: var(--separator);
            padding-block: 18px;

            .cart-link {
                --icon-size: 24px;
                justify-self: center;

                img {
                    display: block;
                    width: var(--icon-size);
                    height: var(--icon-size);
                }

                i {
                    display: block;
                    font-size: var(--icon-size);
                }
            }

            .first-section {
                position: relative;
                justify-content: center;
                align-items: center;
            }
        }

        .menu-header-section {
            height: var(--separator);

            ul {
                display: none;
            }
        }

        .menu-mobile-container {
            &.active {
                display: flex;
                transition: left 250ms ease-in-out;
            }

            #menu-menu-principal {
                list-style: none;

                li {
                    border-bottom: 1px solid var(--gray-200);

                    a {
                        --transition: background-color 200ms linear;
                        display: flex;
                        gap: 1rem;
                        align-items: center;
                        color: #fff;
                        font-weight: bold;
                        text-decoration: none;
                        text-transform: uppercase;
                        padding: 1.5rem;
                        transition: var(--transition);

                        &:hover {
                            background-color: var(--yellow-500);
                            color: var(--black-400);
                            transition: var(--transition);
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 480px) {
    .header {
        & .header-logo {
            img {
                max-width: 180px;
            }
        }
    }

    .breadcrumbs {
        font-size: 13px;
    }
}

@media (max-width: 425px) {
    .header {
        & .header-logo {
            img {
                max-width: 160px;
            }
        }
    }
}

@media (max-width: 320px) {
    .header {
        & .header-logo {
            img {
                max-width: 120px;
            }
        }
    }
}