.dropdown-menu {
    text-align: start;
}

.web-app-top-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 12px 20px;
    background-color: #1A1A1A;
    gap: 15px;

    @media all and (max-width : $breakpoint-lg) {
        display: none;
    }

    .search-wrapper {
        flex-grow: 1;
    }

    .cart-button,
    .wishlist-button,
    .notifications-button {
        .icon {
            font-size: 20px;
        }

    }

    .change-language-button,
    .cart-button,
    .wishlist-button {

        &:hover {
            .icon {
                color: var(--color-primary-light-300);
            }

            .btn-text {
                color: var(--color-primary-light-300);
            }

            .arrow-icon {
                color: var(--color-primary-light-300);
            }
        }

        .btn-text {
            color: #FFF;
        }
    }

    .wishlist-button.active {

        .icon-wishlist:before {
            content: "\e902";
        }

        .icon-heart:before {
            content: "\e902";
        }
    }





    .top-nav-custom-dropdown {

        .dropdown-menu {
            width: 300px;
            border-radius: 15px;
            font-size: 14px;
            left: unset !important;
            right: 0;
            transform: unset !important;
            top: 50px !important;
            overflow: hidden;

            [dir="rtl"] & {
                right: unset !important;
                left: 0 !important;
            }


            >.start {
                overflow: auto;
                max-height: 70vh;
            }

        }

        &.custom-dropdown-lg {
            .dropdown-menu {
                width: 500px;
            }

        }

        .arrow-icon {
            color: #FFF;
        }

    }


    .create-button {



        .arrow-icon {
            color: #FFF !important
        }

    }






    .logo-link {
        img {
            height: 44px;
        }
    }


    .notifications-button {
        position: relative;

        .num {
            background-color: var(--color-danger-light-300);
            color: #FFF;
            width: 23px;
            height: 23px;
            border-radius: 500px;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            right: 0;

        }
    }

    .cart-button {
        position: relative;

        .num {
            background-color: var(--color-danger-light-300);
            color: #FFF;
            width: 23px;
            height: 23px;
            border-radius: 500px;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: -10px;
            right: -5px;

        }
    }



}

.mobile-top-bar {
    display: none;

    @media all and (max-width : $breakpoint-lg) {
        display: flex;
        padding: 15px;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background-color: #131313;
    }

    .logo-svg {
        width: 150px;
    }
}


.mobile-search-bar {
    display: none;
    background-color: #131313;

    @media all and (max-width : $breakpoint-lg) {
        display: block;
    }

}


.mobile-menu-popup {
    padding: 15px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    background-color: var(--background-1-light);
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;

    &.show {
        display: flex;
    }

    a.toggle-mobile-menu-button {
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;

        [dir="rtl"] & {
            right: unset;
            left: 20px;
        }
    }

    .top {
        width: 100%;
    }

    .bottom {
        width: 100%;
    }

    .num {
        background-color: var(--color-danger-light-300);
        color: #FFF;
        width: 23px;
        height: 23px;
        border-radius: 500px;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 10px;
    }

}


.mobile-search {
    background: RGBA(0, 0, 0, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: none;

    &.show {
        display: flex;
    }




    .toggle-mobile-search-button {
        position: absolute;
        top: 25px;
        right: 25px;
        cursor: pointer;

        [dir="rtl"] & {
            right: 0;
            left: 25px;
        }
    }

    .search {
        padding: 0 20px;
        width: 100%;
    }
}




.product-details-layout {
    display: flex;
    width: 100%;
    gap: var(--base-gap);
    position: relative;

    @media all and (max-width : $breakpoint-xl) {
        flex-direction: column;
    }

    >.start {
        width: 50%;
        min-width: 50%;

        @media all and (max-width : $breakpoint-xl) {
            width: 100%;
            min-width: unset;
        }

        #pin {
            position: relative;
            z-index: 2;
        }
    }

    >.end {
        width: 50%;
        min-width: 50%;
        position: relative;

        @media all and (max-width : $breakpoint-xl) {
            width: 100%;
            min-width: unset;
        }

        #trigger {
            position: relative;
        }
    }
}