@use '../utils' as *;

/*=============================
	11. Header
===============================*/
.transparent-header {
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    z-index: 9;
    height: auto;
}
.tg-header {
    &__top {
        background: var(--tg-theme-primary);
        padding: 11px 0;
        @media #{$xs} {
            display: none;
        }
        &-info {
            @include flexbox();
            align-items: center;
            gap: 50px;
            @media #{$xs} {
                justify-content: center;
                margin-bottom: 10px;
            }
            & li {
                @include flexbox();
                align-items: center;
                gap: 10px;
                color: var(--tg-color-white-default);
                font-size: 16px;
                font-weight: 500;
                position: relative;
                &::before {
                    content: "";
                    position: absolute;
                    right: -26px;
                    top: 50%;
                    @include transform(translateY(-50%) rotate(16deg));
                    width: 1px;
                    height: 50px;
                    background: var(--tg-color-dark-theme);
                }
                &:last-child {
                    &::before {
                        display: none;
                    }
                }
                & i {
                    color: var(--tg-color-white-default);
                    font-size: 16px;
                    line-height: 0;
                }
                & a {
                    color: var(--tg-color-white-default);
                    &:hover {
                        text-shadow: -0.3px -0.3px 0 var(--tg-color-white-default), 0.3px 0.3px var(--tg-color-white-default);
                    }
                }
            }
        }
        &-right {
            @include flexbox();
            align-items: center;
            justify-content: flex-end;
            gap: 60px;
            @media #{$lg} {
                gap: 15px;
            }
            @media #{$xs} {
                justify-content: center;
            }
            & > li {
                @include flexbox();
                align-items: center;
                gap: 10px;
                color: var(--tg-color-white-default);
                font-size: 16px;
                font-weight: 500;
                position: relative;
                &:first-child {
                    @media #{$lg} {
                        display: none;
                    }
                }
                &::before {
                    content: "";
                    position: absolute;
                    right: -30px;
                    top: 50%;
                    @include transform(translateY(-50%) rotate(16deg));
                    width: 1px;
                    height: 50px;
                    background: var(--tg-color-dark-theme);
                }
                &:last-child {
                    &::before {
                        display: none;
                    }
                }
                & i {
                    color: var(--tg-color-white-default);
                    font-size: 20px;
                    line-height: 0;
                }
                & a {
                    color: var(--tg-color-white-default);
                    &:hover {
                        text-shadow: -0.3px -0.3px 0 var(--tg-color-white-default), 0.3px 0.3px var(--tg-color-white-default);
                    }
                }
            }
        }
        
        &-social {
            & .list-wrap {
                @include flexbox();
                align-items: center;
                gap: 24px;
                & li {
                    & a {
                        font-size: 16px;
                        color: var(--tg-color-white-default);
                        & i {
                            font-size: 16px;
                            @include transition(.3s);
                        }
                        &:hover {
                            & i {
                                text-shadow: -0.3px -0.3px 0 var(--tg-color-white-default), 0.3px 0.3px var(--tg-color-white-default);
                            }
                        }
                    }
                }
            }
        }
        &-links {
            display: flex;
            gap: 25px;
        }
        &-two {
            background: var(--tg-color-gray-1);
            padding: 8.5px 0;
            .tg-header__top-social .list-wrap li a {
                font-size: 14px;
                font-weight: 600;
            }
        }
        &-three {
            padding: 8.5px 0;
            .tg-header__top-info li {
                font-weight: 400;
            }
        }
        &-four {
            background: var(--tg-color-smoke-5);
            padding: 8.5px 0;
            .tg-header__top-info li {
                color: var(--tg-heading-color);
                font-weight: 400;
                a {
                    color: var(--tg-theme-primary);
                    font-weight: 600;
                    i {
                        color: inherit;
                    }
                    &:hover {
                        color: var(--tg-heading-color);
                    }
                }
            }
            .tg-header__top-right > li {
                color: var(--tg-heading-color);
                i {
                    color: var(--tg-heading-color);
                    &:hover {
                        color: var(--tg-theme-primary);
                    }
                }
            }
        }
        &-five {
            border-top: 6px solid var(--tg-theme-primary);
            background: var(--tg-color-smoke-3);
            border-bottom: 1px solid var(--tg-border-1);
            padding: 15px 0px;
            .tg-header__top-info li {
                color: var(--tg-heading-color);
                i {
                    width: 28px;
                    height: 28px;
                    border-radius: 50%;
                    background: #E7EAF2;
                    color: var(--tg-theme-primary);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
            .tg-header__top-right > li i,
            .tg-header__top-social .list-wrap li a {
                color: var(--tg-heading-color);
                &:hover {
                    color: var(--tg-theme-primary);
                }
            }
        }
    }
    &__middle {
        padding: 30px 0;
        background: var(--tg-color-smoke);
        .info-card-wrap {
            margin-left: auto;
        }
        &-two {
            padding: 0;
            @media #{$lg} {
                padding: 25px 0;
            }
        }
        &-three {
            padding: 27px 0;
        }
    }
    &__area {
        @media #{$md} {
            padding: 15px 0;
        }
        .tgmenu__navbar-wrap > ul > li a {
            padding: 49.5px 0px;
        }
        .searchBoxToggler {
            padding: 0;
            border: 0;
            color: var(--tg-color-white-default);
            background: transparent;
            &:hover {
                color: var(--tg-theme-primary);
            }
        }
        &-two {
            position: relative;
            z-index: 2;
            margin-bottom: -60px;
            &.sticky-menu {
                background: transparent;
                box-shadow: none;
            }
            .tgmenu__wrap {
                background: var(--tg-theme-primary);
                border-radius: 0 0 5px 5px;
                padding: 0px 8px 0px 25px;
            }
            .tgmenu__navbar-wrap > ul {
                margin-left: 0;
            }
            .tgmenu__navbar-wrap > ul > li > a {
                color: var(--tg-color-white-default);
                padding: 22px 0px;
            }
            .tgmenu__main-menu li.menu-item-has-children > a::after {
                color: var(--tg-color-white-default);
            }
            .tgmenu__navbar-wrap > ul > li.active > a, 
            .tgmenu__navbar-wrap > ul > li:hover > a {
                text-shadow: -0.3px -0.3px 0 var(--tg-color-white-default), 0.3px 0.3px var(--tg-color-white-default);
                color: var(--tg-color-white-default);
                &:after {
                    color: var(--tg-color-white-default);
                }
            }
            .btn {
                padding: 15px 23px 13px 23px;
                border-radius: 5px;
            }
            @media #{$md} {
                margin-bottom: 0;
                &.sticky-menu {
                    background: var(--tg-color-smoke);
                    border-bottom: 1px solid var(--tg-border-2);
                }
                .tgmenu__wrap {
                    border-radius: 0;
                    background: transparent;
                    padding: 0;
                }
            }
        }
        &-three {
            .tgmenu__wrap {
                background: var(--tg-color-white-default);
                border-radius: 7px;
                padding: 0px 20px 0px 40px;
            }
            .tgmenu__navbar-wrap > ul {
                margin-left: 0;
            }
            .tgmenu__navbar-wrap > ul > li a {
                padding: 34.5px 0px;
            }
            .tgmenu__navbar-wrap > ul > li .sub-menu {
                background: var(--tg-color-white-default);
            }
            &.sticky-menu {
                background: var(--tg-color-white-default);
                .tgmenu__wrap {
                    padding: 0;
                }
            }
            .btn {
                padding: 15px 23px 13px 23px;
                border-radius: 5px;
            }
            @media #{$md} {
                .tgmenu__wrap {
                    padding: 15px;
                }
            }
        }
        &-four {
            border-bottom: 1px solid var(--tg-border-9);
            .btn {
                padding: 18px 23px 16px 23px;
                border-radius: 5px;
            }
            .tgmenu__navbar-wrap > ul > li a {
                padding: 46.5px 0px;
                color: var(--tg-color-white-default);
            }
            .tgmenu__main-menu li.menu-item-has-children > a::after {
                color: var(--tg-color-white-default);
            }
            &.sticky-menu {
                background: var(--tg-color-gray-8);
            }
        }
        &-five {
            background: var(--tg-color-white-default);
            &.sticky-menu {
                background: var(--tg-color-white-default);
            }
            .btn {
                border-radius: 5px;
            }
            .tgmenu__navbar-wrap > ul > li a {
                padding: 47px 0px;
            }
        }
        &-six {
            background: var(--tg-color-smoke-3);
            &.sticky-menu {
                background: var(--tg-color-smoke-3);
            }
            .tgmenu__wrap {
                border-top: 1px solid var(--tg-border-1);
            }
            .tgmenu__navbar-wrap > ul > li a {
                padding: 22px 0px;
            }
            @media #{$lg} {
                .tgmenu__wrap {
                    padding: 15px 0;
                }
            }
            @media #{$md} {
                .tgmenu__wrap {
                    padding: 0;
                }
            }
        }
    }
}
.info-card {
    display: flex;
    gap: 15px;
    align-items: center;
    .info-card_icon {
        flex: none;
        height: 50px;
        width: 50px;
        border-radius: 5px;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--tg-color-white-default);
        color: var(--tg-theme-primary);
    }
    .info-card_text {
        font-size: 14px;
        color: var(--tg-body-color);
        margin-bottom: -0.2em;
        margin-top: -0.3em;
        display: block;
    }
    .info-card_link {
        font-size: 18px;
        font-weight: 700;
        color: var(--tg-heading-color);
        margin-bottom: -0.4em;
        display: block;
    }
    a {
        &:hover {
            color: var(--tg-theme-primary);
        }
    }
}

.info-card-wrap {
    display: inline-flex;
    gap: 40px;
    &.style2 {
        .divider {
            height: 110px;
            width: 1px;
            background: var(--tg-border-7);
            @media #{$lg} {
                display: none;
            }
        }
        .info-card {
            .info-card_icon {
                color: var(--tg-color-white-default);
                background: transparent;
                border: 1px solid var(--tg-border-7);
                border-radius: 50%;
            }
            .info-card_text {
                color: var(--tg-color-white-default);
                font-weight: 500;
            }
            a:hover {
                color: var(--tg-theme-primary);
            }
            .info-card_link {
                color: var(--tg-color-white-default);
                font-weight: 600;                
            }
        }
    }
    &.style3 {
        display: flex;
        justify-content: space-between;
        .divider {
            height: 65px;
            width: 1px;
            background: var(--tg-border-7);
            @media #{$lg} {
                display: none;
            }
        }
        .info-card {
            gap: 10px;
            .info-card_icon {
                background: rgba($color: #ffffff, $alpha: 0.1);
                border-radius: 50%;
                height: 35px;
                width: 35px;
                color: var(--tg-color-white-default);
                font-size: 14px;
            }
            .info-card_content {
                .info-card_text {
                    font-size: 10px;
                    font-weight: 700;
                    text-transform: uppercase;
                    color: var(--tg-color-smoke-6);
                }
                .info-card_link {
                    font-size: 16px;
                    font-weight: 700;
                    color: var(--tg-color-white-default);                        
                }
                a {
                    &:hover {
                        color: var(--tg-theme-primary);
                    }
                }
            }
        }
    }
    &.style4 {
        .info-card {
            gap: 20px;
            .info-card_icon {
                background: #E7EAF2;
                width: 50px;
                height: 50px;
                font-size: 24px;;
                border-radius: 50%;
            }
            .info-card_text {
                font-size: 12px;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.02em;
            }
        }
    }
}
.tg-header-contact-info {
    background: var(--tg-color-gray-1);
    @media #{$lg} {
        padding: 15px 0;
    }
}
.sidebar-btn {
    position: relative;
    width: 60px;
    height: 60px;
    line-height: 58px;
    border-radius: 10px;
    background: var(--tg-theme-primary);
    text-align: center;
    padding: 22px 10px;
    display: inline-block;
    .line {
        display: block;
        height: 2px;
        width: 22px;
        background: var(--tg-color-white-default);
        margin: auto;
        transition: 0.4s;
        &:not(:last-child) {
            margin-bottom: 5px;
        }
    }
    &:hover {
        .line {
            &:nth-child(2) {
                width: 10px;
            }
        }
    }
    @media #{$xs} {
        width: 50px;
        height: 50px;
        padding: 17px 0;
        border-radius: 5px;
    }
}
.tgmenu {
    &__nav {
        @include flexbox();
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-start;
        @media #{$md} {
            justify-content: space-between;
        }
        & .logo {
            & img {
                max-height: 40px;
            }
        }
    }
    &__navbar-wrap {
        @include flexbox();
        flex-grow: 1;
        & > ul {
            @include flexbox();
            flex-direction: row;
            flex-wrap: wrap;
            padding: 0 0;
            margin: 0 auto;
            @media #{$lg} {
                margin-right: 0;
            }
            & > li {
                list-style: none;
                display: block;
                position: relative;
                margin-right: 50px;
                @media #{$lg} {
                    margin-right: 45px;
                }
                &:last-child {
                    margin-right: 0;
                }
                & a {
                    font-size: 16px;
                    font-weight: 600;
                    text-transform: capitalize;
                    color: var(--tg-heading-color);
                    padding: 55px 0px;
                    display: flex;
                    line-height: 1;
                    position: relative;
                    z-index: 1;
                    font-family: var(--tg-body-font-family);
                }
                & .sub-menu {
                    position: absolute;
                    left: 0;
                    top: 100%;
                    min-width: 230px;
                    background: var(--tg-color-smoke);
                    margin: 0;
                    @include transform(scale(1, 0));
                    transform-origin: 0 0;
                    @include transition(0.3s);
                    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);                  
                    border-radius: 0 0 6px 6px;
                    padding: 18px 0;
                    display: block;
                    visibility: hidden;
                    opacity: 0;
                    z-index: 9;
                    & .sub-menu {
                        right: auto;
                        left: 100%;
                        top: 0;
                    }
                    & > li {
                        margin-left: 0;
                        text-align: left;
                        display: block;
                        & a {
                            padding: 8px 15px 8px 25px;
                            line-height: 1.3;
                            display: block;
                            color: var(--tg-heading-color);
                            text-transform: capitalize;
                        }
                        &:hover > a,
                        &.active > a {
                            color: var(--tg-theme-primary);
                        }
                        &:hover > a {
                            @include transform(translateX(8px));
                        }
                    }
                }
                &:hover > .sub-menu {
                    opacity: 1;
                    visibility: visible;
                    transform: scale(1);
                }
            }
        }& > ul {
            & > li {
                &.active,
                &:hover {
                    & a {
                        color: var(--tg-theme-primary);
                    }
                }
            }
        }
        &-two {
            & > ul {
                & > li {
                    margin-right: 20px;
                }
            }
        }
    }
    &__main-menu {
        & li.menu-item-has-children {
            & .dropdown-btn {
                display: none;
            }
            & > a {
                &::after {
                    content: "\f107";
                    font-weight: 700;
                    font-family: var(--tg-icon-font-family);
                    color: var(--tg-heading-color);
                    margin-left: 4px;
                    @include transition(.3s);
                    line-height: 1;
                    transform: translateY(0px);
                }
                &:hover {
                    color: var(--tg-theme-primary);
                }
            }
            &:hover {
                & > a {
                    &::after {
                        color: var(--tg-theme-primary);
                    }
                }
            }
            &.active {
                & > a {
                    &::after {
                        color: var(--tg-theme-primary);
                    }
                }
            }
        }
    }
    &__action {
        @media #{$md} {
            margin-right: 25px;
            margin-left: auto;
        }
        & ul {
            @include flexbox();
            align-items: center;
            & li {
                position: relative;
                margin-left: 40px;
                @media #{$lg} {
                    margin-left: 20px;
                }
                &:first-child {
                    margin-left: 0;
                }
            }
            .search {
                a {
                    color: var(--tg-color-white-default);
                }
            }
            & .header-search {
                line-height: 0;
                & a {
                    font-size: 24px;
                    line-height: 0;
                    color: var(--tg-color-gray-2);
                    &:hover {
                        color: var(--tg-theme-primary);
                    }
                }
            }
            & .header-cart {
                line-height: 0;
                position: relative;
                &::before {
                    content: "";
                    position: absolute;
                    left: -16px;
                    top: 50%;
                    transform: translateY(-50%) rotate(16deg);
                    width: 2px;
                    height: 24px;
                    background: #C3C3C3;
                    border-radius: 2px;
                    @media #{$lg} {
                        display: none;
                    }
                }
                & a {
                    position: relative;
                    font-size: 28px;
                    line-height: 0;
                    color: var(--tg-color-gray-2);
                    & span {
                        position: absolute;
                        width: 18px;
                        height: 18px;
                        @include flexbox();
                        align-items: center;
                        @include border-radius(50%);
                        right: -6px;
                        top: -5px;
                        background: var(--tg-theme-primary);
                        color: var(--tg-color-white-default);
                        font-size: 12px;
                        font-weight: 600;
                        justify-content: center;
                    }
                    &:hover {
                        color: var(--tg-theme-primary);
                    }
                }
                &-two {
                    @include flexbox();
                    align-items: center;
                    gap: 5px;
                    &::before {
                        display: none;
                    }
                    & .price {
                        font-size: 18px;
                        line-height: .8;
                        font-weight: 500;
                        font-family: var(--tg-heading-font-family);
                        color: var(--tg-body-color);
                    }
                }
            }
            & .offCanvas-menu {
                line-height: 1;
                @media #{$lg} {
                    display: none;
                }
                & .menu-tigger {
                    color: var(--tg-heading-color);
                    padding: 0 10px;
                    & svg {
                        width: 26px;
                    }
                    &:hover {
                        background: var(--tg-color-white-default);
                        color: var(--tg-heading-color);
                    }
                }
            }
            & .header-btn {
                margin-left: 25px;
                @media #{$lg} {
                    display: none;
                }
                & .btn {
                    color: var(--tg-color-white-default);
                    font-size: 16px;
                    gap: 5px;
                    padding: 17px 24px 15px 24px;
                    background: linear-gradient(90deg, #80397E 5.39%, #9F59A4 100%);
                    & i {
                        line-height: 0;
                        font-size: 18px;
                        transform: translateY(-2px);
                    }
                    &::after {
                        display: none;
                    }
                }
                &.login-btn {
                    & .btn {
                        padding: 11px 19px 9px 19px;
                        background: var(--tg-heading-color);
                        font-family: var(--tg-heading-font-family);
                        font-size: 15px;
                        font-weight: 600;
                        gap: 10px;
                        & i {
                            font-size: 24px;
                            line-height: 0;
                            transform: translateY(-1px);
                        }
                        &::before {
                            background: var(--tg-theme-primary);
                        }
                        &:hover {
                            background: var(--tg-heading-color);
                        }
                    }
                }
            }
        }
    }
    &__search {
        @media #{$lg} {
            margin-left: auto;
        }
        @media #{$md} {
            display: none;
        }
        &-form {
            @include flexbox();
            @include border-radius(100px);
            border: 1px solid var(--tg-border-3);
            background: #F9F9F9;
            width: 400px;
            position: relative;
            @media #{$xl} {
                width: 360px;
            }
            @media #{$lg} {
                width: 390px;
            }
            & input {
                width: 100%;
                display: block;
                background: transparent;
                @include border-radius(0);
                border: none;
                padding: 15px 10px 15px 25px;
                font-size: 14px;
                color: var(--tg-heading-color);
                height: 50px;
                &::placeholder {
                    font-size: 14px;
                    color: #7B859B;
                }
            }
            & .select-grp {
                display: flex;
                align-items: center;
                background: transparent;
                border: none;
                padding: 12px 0 12px 17px;
                border-radius: 0;
                width: 130px;
                flex: 0 0 auto;
                position: relative;
                &::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 2px;
                    height: 16px;
                    @include border-radius(2px);
                    background: #C1C1C1;
                }
                & svg {
                    width: 16px;
                    height: 16px;
                    flex: 0 0 auto;
                }
                & path {
                    fill: var(--tg-theme-primary);
                }
            }
            & .form-select {
                outline: none;
                box-shadow: none;
                border: none;
                padding-left: 8px;
                color: var(--tg-heading-color);
                font-size: 14px;
                font-weight: 500;
            }
            & [type=submit] {
                @include flexbox();
                align-items: center;
                justify-content: center;
                position: relative;
                top: 3px;
                bottom: 3px;
                right: 3px;
                width: 43px;
                height: 43px;
                flex: 0 0 auto;
                border: none;
                padding: 0 0;
                background: var(--tg-theme-primary);
                font-size: 18px;
                line-height: 0;
                color: var(--tg-color-white-default);
                @include border-radius(50%);
                margin-left: 10px;
                &:hover {
                    background: var(--tg-heading-color);
                    color: var(--tg-color-white-default);
                }
            }
        }
    }
}

.sticky-menu {
	position: fixed;
	left: 0;
	margin: auto;
	top: 0;
	width: 100%;
	z-index: 99;
	background: var(--tg-color-smoke);
	animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
	border-radius: 0;
    & ul li .sub-menu {
        @include border-radius(0 0 6px 6px);
    }
}


#header {
    &-fixed-height {
        &.active-height {
            display: block;
            height: 115px;
            @media #{$md} {
                height: 90px;
            }
            @media #{$xs} {
                height: 80px;
            }
            &.header-fixed-height-two {
                height: 0px;
                @media #{$md} {
                    height: 90px;
                }
                @media #{$xs} {
                    height: 80px;
                }
            }
            &.header-fixed-height-three {
                height: 61px;
                @media #{$lg} {
                    height: 90px;
                }
                @media #{$xs} {
                    height: 80px;
                }
            }
        }
    }
}