/* HeaderItem.DropdownDisplayType = 5 — پنل‌های بازگشتی با عمق نامحدود */
.header-cascade-menu {
    --cascade-bg: var(--nav-dd-bg, #fff);
    --cascade-text: var(--nav-dd-text, #252525);
    --cascade-accent: var(--nav-dd-hover-text, var(--color-primary, #ff5e14));
    min-width: min(380px, calc(100vw - 24px));
    width: 380px;
    padding: 0;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--cascade-text) 12%, transparent);
    border-radius: 20px;
    background: var(--cascade-bg);
    box-shadow: 0 18px 48px rgba(20, 25, 35, .18);
}

/* main.css برای dropdownهای معمولی overflow:hidden می‌گذارد؛ flyout باید از آن خارج شود. */
.nav-body .dropdown-menu.header-cascade-menu { overflow: visible !important; }

@media (hover: hover) {
    .nav-body .header-cascade-dropdown:hover > .header-cascade-menu,
    .nav-body .header-cascade-dropdown.show > .header-cascade-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto;
        transform: translateY(0) !important;
    }
}

.header-cascade { position: relative; min-height: 116px; }
.header-cascade-panel {
    display: none; position: absolute; z-index: 2; top: var(--cascade-flyout-top, 0px);
    right: var(--cascade-flyout-right, calc(100% + 8px)); width: 380px; padding: 10px; border: 1px solid color-mix(in srgb, var(--cascade-text) 12%, transparent);
    border-radius: 20px; background: var(--cascade-bg); box-shadow: 0 18px 48px rgba(20, 25, 35, .18);
}
.header-cascade-panel--root { position: relative; z-index: auto; top: auto; right: auto; width: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.header-cascade-panel.is-active { display: block; animation: header-cascade-in .18s ease-out; }
.header-cascade-title { padding: 7px 12px 9px; color: var(--cascade-text); font-size: .86rem; font-weight: 700; }
.header-cascade-list { margin: 0; padding: 0; list-style: none; }

.header-cascade-link, .header-cascade-back {
    width: 100%; border: 0; background: transparent; color: var(--cascade-text); text-align: right;
    display: flex; position: relative; isolation: isolate; overflow: hidden; align-items: center; gap: 12px; border-radius: 13px; padding: 10px 12px;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.header-cascade-link:hover, .header-cascade-link:focus-visible { color: var(--cascade-accent); background: color-mix(in srgb, var(--cascade-accent) 8%, transparent); transform: translateX(-2px); }
.header-cascade-link:focus-visible, .header-cascade-back:focus-visible { outline: 2px solid var(--cascade-accent); outline-offset: 2px; }
.header-cascade-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--cascade-text) 12%, transparent); border-radius: 10px; color: var(--cascade-accent); }
.header-cascade-icon, .header-cascade-copy, .header-cascade-chevron { position: relative; z-index: 1; }
.header-cascade-watermark { position: absolute; z-index: 0; top: 50%; right: 72px; transform: translateY(-50%); color: var(--cascade-accent); font-size: 3.6rem; opacity: .09; pointer-events: none; }
.header-cascade-copy { display: grid; min-width: 0; flex: 1; gap: 2px; }
.header-cascade-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 700; }
.header-cascade-copy small { color: color-mix(in srgb, var(--cascade-text) 62%, transparent); font-size: .75rem; }
.header-cascade-chevron { flex: 0 0 auto; font-size: .75rem; color: color-mix(in srgb, var(--cascade-text) 45%, transparent); }
.header-cascade-back { display: none; }
@keyframes header-cascade-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 575.98px) { .header-cascade-menu { min-width: min(360px, calc(100vw - 20px)); } }