.custom-menu {
    color: var(--orange);
    list-style: none;
    padding: 0.8rem;
    background: var(--black);
    border-radius: 8px;
    box-shadow: #FF971D 0px 0px 0px 2px;
    transition: all 0.5s ease-in;
    margin-bottom: 1.5rem;
}

    .custom-menu li {
        position: relative;
        cursor: pointer;
        transition: background 0.3s;
        border-radius: 0.6rem;
        margin: 0.2rem 0.5rem;
        padding-top: 0.8rem;
        padding-bottom: 0.4rem;
        transition: all 0.5s ease-in;
    }

        .custom-menu li > div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem 0.3rem;
        }

        .custom-menu li:not(:has(ul)):hover {
            color: var(--white);
            background-color: rgba(var(--orange-rgb), 0.5);
            padding-inline-start: 0.5rem;
            transition: all 0.3s ease-out;
        }


        .custom-menu li:not(:has(ul)):not(.custom-menu > li) > a span::before {
            content: "-";
            margin-inline-end: 8px;
        }

        .custom-menu li a {
            all: unset !important;
            pointer-events: none;
        }
            .custom-menu li a span {
                pointer-events: auto;
            }

    .custom-menu ul {
        list-style: none;
        padding-inline-start: 15px;
        cursor: default;
        display: block;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.5s ease-in-out, max-height 0.3s ease-in-out;
    }

    .custom-menu .open > ul {
        opacity: 1;
        max-height: 1000px;
    }


    .custom-menu .custom-menu-toggle {
        width: 10px;
        height: 10px;
        display: inline-block;
        border-right: 2px solid var(--orange);
        border-bottom: 2px solid var(--orange);
        transition: transform 0.3s ease-out;
    }

:not([dir]) .custom-menu .custom-menu-toggle {
    transform: rotate(-45deg);
}

:not([dir]) .custom-menu .open > div .custom-menu-toggle {
    transform: rotate(45deg);
}

[dir="rtl"] .custom-menu .custom-menu-toggle {
    transform: rotate(135deg);
}

[dir="rtl"] .custom-menu .open > div .custom-menu-toggle {
    transform: rotate(45deg);
}

.custom-menu .active {
    color: var(--white);
    background-color: #FF971D;
    border-color: #FF971D;
    padding-inline-start: 0.5rem;
    font-weight: bold;
    border-radius: 0.6rem;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    transition: all 0.5s ease-out;
}
    .custom-menu .active:hover {
        background-color: #d98019;
        border-color: #cc7917
    }