/* ================================================================
   MENU-MULTILEVEL.CSS
   استایل زیرمنوهای تودرتو (بیش از یک سطح) برای منوی هدر.
   این فایل مستقل و افزوده است و هیچ استایل موجودی را تغییر نمی‌دهد.
   ================================================================ */

/* آیتمی که خودش هم زیرمنو دارد (سطح دوم به بعد) */
.dropdown-menu .dropdown-submenu {
    position: relative;
}

/* فلش کوچک برای نشان‌دادن وجود زیرمنو، در کنار عنوان */
.dropdown-menu .dropdown-submenu > .dropdown-item.dropdown-toggle::after {
    content: "";
    border-top: 0.3em solid transparent;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
    display: inline-block;
    vertical-align: middle;
    margin-inline-start: 0.4em;
}
html[dir="rtl"] .dropdown-menu .dropdown-submenu > .dropdown-item.dropdown-toggle::after {
    border-left: 0;
    border-right: 0.3em solid;
    transform: scaleX(-1);
}

/* زیرمنوی تودرتو به‌صورت پیش‌فرض مخفی است */
.dropdown-menu .dropdown-submenu > .dropdown-menu {
    top: 0;
    inset-inline-start: 100%;
    margin-top: -1px;
    display: none;
}

/* روی دسکتاپ: با هاور یا با کلاس show (که با JS اضافه می‌شود) باز شود */
@media (min-width: 992px) {
    .dropdown-menu .dropdown-submenu:hover > .dropdown-menu,
    .dropdown-menu .dropdown-submenu > .dropdown-menu.show {
        display: block;
    }

    /* اگر زیرمنو از سمت راست صفحه بیرون بزند، به سمت مخالف باز شود */
    .dropdown-menu .dropdown-submenu.dropend-flip > .dropdown-menu {
        inset-inline-start: auto;
        inset-inline-end: 100%;
    }
}

/* روی موبایل/تبلت (حالت آکاردئونی ناوبری کولاپس‌شده بوت‌استرپ):
   زیرمنوی تودرتو به‌صورت تورفته و به‌صورت بلاک (نه فلای‌اوت) نمایش
   داده می‌شود و با کلیک روی toggle باز/بسته می‌شود. */
@media (max-width: 991.98px) {
    .dropdown-menu .dropdown-submenu > .dropdown-menu {
        position: static;
        inset-inline-start: auto;
        border: 0;
        box-shadow: none;
        padding-inline-start: 0.75rem;
        background-color: rgba(0, 0, 0, 0.02);
    }
    .dropdown-menu .dropdown-submenu > .dropdown-menu.show {
        display: block;
    }
}