/* =========================================================
   فایل اختصاصی استایل‌های منوی DNN (menu.css)
   ========================================================= */

#dnnTopMenu .rootMenu li a div div,
#dnnTopMenu .rootMenu>.level0>.text>.nolink,
#dnnTopMenu .rootMenu>li .subMenuRight .nolink a,
#dnnTopMenu .rootMenu>li a {
    padding: 1vw;
    margin: 0
}
#dnnTopMenu .rootMenu,
#dnnTopMenu .rootMenu li,
#dnnTopMenu .subMenu ul {
    position: relative;
    padding: 0;
    margin: 0
}
#dnnTopMenu {
    margin: 0;
    padding: 0;
    z-index: 2;
    margin-right: -25px;
}
#dnnTopMenu a {
    font-weight: 600;
}
#dnnTopMenu ul li a {
    color: white;
}
#dnnTopMenu .rootMenu .subMenu ul li a {
    color: #121625;
}
#dnnTopMenu .rootMenu li {
    border-left: 1px solid #ffffff52;
}
#dnnTopMenu .rootMenu li a:hover {
    color: #FF0000;
}
#dnnTopMenu .rootMenu {
    display: flex;
    z-index: 1;
    justify-content: start
}
#dnnTopMenu .rootMenu li {
    list-style-type: none;
    cursor: pointer
}
#dnnTopMenu .rootMenu li.last {
    padding: 0;
    background: 0
}
#dnnTopMenu .rootMenu>li:first-of-type a {
    padding-right: 0 !important
}
#dnnTopMenu .rootMenu>.level0>.text>.nolink,
#dnnTopMenu .rootMenu>li .subMenuRight .nolink a,
#dnnTopMenu .rootMenu>li a {
    cursor: pointer
}
#dnnTopMenu .rootMenu li a:hover,
#dnnTopMenu .rootMenu li.TWbreadcrumb a,
#dnnTopMenu .rootMenu li.TWselected a,
#dnnTopMenu .rootMenu li.rmhover a {
    text-decoration: none
}

#dnnTopMenu .subMenu {
    display: none;
    z-index: 905;
    position: absolute;
    min-width: 200px
}
#dnnTopMenu .megamenu .subMenu .subTiles,
#dnnTopMenu .rootMenu>li.haschild .text .childnode svg,
#dnnTopMenu .rootMenu>li.haschild.first:after,
#dnnTopMenu .subMenuRight,
.MobMenuIcon,
.MobileShow,
.megamenu .subMenuRight {
    display: none
}

.subMenu li .nolink,
.subMenu li a {
    margin: 0;
    padding: 5px !important;
    display: block;
    font-size: 12px
}

/* مدیریت آیکون ستاره برای زیرمنوهای فاقد فرزند */
header li.leve1:not(.haschild) > span.text a::before,
header li.leve1:not(.haschild) > span.text span::before {
    content: "\2726";
    padding-inline-end: 7px;
    transition: .3s;
    color: var(--accent-color-2);
}
header li.leve1.haschild > span.text a::before,
header li.leve1.haschild > span.text span::before {
    content: none !important;
}
header li.leve1:not(.haschild) > span.text a:hover,
header li.leve1:not(.haschild) > span.text span:hover {
    transform: translateX(-5px);
}
header li.leve1 > span.text a,
header li.leve1 > span.text span {
    transition: all ease 0.3s;
}

@media (min-width:1024px) {
    .level0.haschild>.text>a::after,
    .level0.haschild>.text>span.nolink::after {
        content: "";
        border-right: solid 1px;
        border-bottom: solid 1px;
        width: 5px;
        height: 5px;
        display: inline-block;
        margin-left: -10px;
        margin-right: 10px;
        transform: rotate(45deg)
    }
}

/* --- استایل‌های دسکتاپ منو --- */
@media (min-width:768px) {
    #dnnTopMenu .rootMenu {
        display: flex;
        z-index: 1
    }
    #dnnTopMenu .subMenu {
        top: 30px;
        background: #fafafa;
        border-top: solid var(--accent-color-1);
        padding: 15px 10px;
        box-shadow: 0 0 4px rgb(0 0 0 / .2)
    }
    #dnnTopMenu .rootMenu li .childnode,
    #dnnTopMenu .subMenu li .childnode {
        display: none !important;
    }
    .level0.haschild > .text > a::after,
    .level0.haschild > .text > span.nolink::after {
        display: inline-block !important;
        vertical-align: middle;
    }
    #dnnTopMenu .subMenu li.haschild {
        position: relative;
    }
    #dnnTopMenu .subMenuRight {
        display: none;
        position: absolute;
        top: 0;
        right: 100%;
        min-width: 200px;
        background: #fafafa;
        box-shadow: 0 0 8px rgb(0 0 0 / 0.15);
        z-index: 906;
        border-radius: 4px;
        margin-right: 5px;
    }
    #dnnTopMenu .subMenuRight.left-overflow {
        right: auto;
        left: 100%;
        margin-right: 0;
        margin-left: 5px;
    }
}

@media (min-width: 992px) {
    /* مسدود کردن کامل المان‌های موبایل در لایه دسکتاپ */
    #mobilemenu,
    .toggle_menu,
    .mobile_menu_close,
    .MobMenuIcon,
    #dnnTopMenu .childnode {
        display: none !important;
    }
    
    #dnnTopMenu .subMenu {
        display: none;
        position: absolute;
        z-index: 905;
        min-width: 200px;
        top: 100%;
        right: 0;
    }
    #dnnTopMenu .subMenu li.haschild,
    #dnnTopMenu .subMenuRight li.haschild {
        position: relative;
    }
    #dnnTopMenu .subMenuRight {
        display: none;
        position: absolute;
        top: 0;
        right: 100%;
        min-width: 200px;
        background: #fafafa;
        box-shadow: 0 0 8px rgb(0 0 0 / 0.15);
        z-index: 906;
        margin-right: 5px;
        border-radius: 4px;
    }
}

/* --- استایل‌های موبایل منو --- */
@media(max-width:767px) {
    #dnnTopMenu .rootMenu li.TWselected,
    #dnnTopMenu .rootMenu li:has(li.TWselected) {
        border-bottom: 1px solid var(--accent-color-2) !important
    }
    
    /* منطق یکپارچه تولید فلش چرخشی برای سطح صفر و سطح یک (زیرمنوهای دارای فرزند) */
    :not(.first).level0 .childnode::after,
    li.leve1.haschild .childnode::after {
        content: "";
        width: 5px;
        height: 5px;
        border-right: 1px solid;
        border-top: 1px solid;
        transform: rotate(135deg);
        display: inline-block;
        float: left;
        position: relative;
        top: calc(50% - 7px);
        transition: all ease 0.3s;
    }
    
    /* اجرای چرخش در زمان کلیک و فعال شدن زیرمنو */
    .nodeactive > .text > .childnode::after {
        transform: rotate(45deg) !important;
    }
    
    #dnnTopMenu .rootMenu * {
        color: #000 !important
    }
    #dnnTopMenu .rootMenu>li a {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start
    }
    #dnnTopMenu .rootMenu li.haschild .childnode,
    .MobMenuIcon {
        background-repeat: no-repeat;
        background-position: center;
        display: block
    }
    #dnnTopMenu,
    .dnnTopMenu .dnnTopMenu_bg,
    .dnnTopMenu .site_bg {
        position: fixed;
        top: 0;
        height: 120%
    }
    #dnnTopMenu .rootMenu li .text {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%
    }
    #dnnTopMenu .rootMenu>li.haschild .text .childnode svg {
        display: block;
        height: 100%;
        width: .6em
    }
    #dnnTopMenu .rootMenu>li:first-of-type a {
        padding-right: 1.5rem
    }
    #dnnTopMenu .rootMenu>li:first-of-type {
        padding: unset;
        background: 0
    }
    #dnnTopMenu .rootMenu {
        flex-direction: column;
        width: 70vw;
        position: absolute;
        top: 0;
        height: 100vh;
        background: #fff;
        padding: 25px 50px 0 25px !important;
        overflow-y: auto
    }
    .MobMenuIcon {
        width: 4rem;
        height: 4rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.047' height='12.891' viewBox='0 0 18.047 12.891'%3E%3Cg id='menu' transform='translate(-32 -96)'%3E%3Cg id='_000000ff' data-name='%23000000ff' transform='translate(32 96)'%3E%3Cpath id='Path_17' data-name='Path 17' d='M32,96H50.047v1.213H32Z' transform='translate(-32 -96)' fill='%23fff'/%3E%3Cpath id='Path_18' data-name='Path 18' d='M32,240H50.047v1.213H32Z' transform='translate(-32 -234.161)' fill='%23fff'/%3E%3Cpath id='Path_19' data-name='Path 19' d='M32,384H50.047v1.213H32Z' transform='translate(-32 -372.322)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A")
    }
    #dnnTopMenu {
        right: -100vw;
        transition: .3s;
    }
    .dnnTopMenu .dnnTopMenu_bg.active,
    .dnnTopMenu.active {
        right: 0 !important
    }
    #dnnTopMenu .subMenu ul,
    #dnnTopMenu .subMenu ul li.item.first.haschild .subMenuRight ul,
    .MobileShow {
        display: block
    }
    #dnnTopMenu>ul>li.level0.item.haschild>div>div>ul>li.leve1.item.haschild>div>ul>li.leve1.item>span.text {
        background-color: #fff;
        padding-right: 3em;
        border-bottom: 0
    }
    #dnnTopMenu .rootMenu li.haschild .subMenu li.haschild ul li .subMenuRight span.text,
    #dnnTopMenu .rootMenu li:not(.topMenu1).haschild .subMenu span.text {
        background-color: #fff;
        border-bottom: 0
    }
    #dnnTopMenu .rootMenu li:not(.level0) {
        margin-right: 10px !important
    }
    #dnnTopMenu .megamenu .subMenuRight,
    #dnnTopMenu .megamenu .subMenuRight .subMenuRight,
    #dnnTopMenu .rootMenu li.haschild .childnode.DesktopShow,
    .rmhover {
        display: none
    }
    #dnnTopMenu .rootMenu li .text:has(.childnode) {
        height: 60px;
        position: relative
    }
    #dnnTopMenu .rootMenu li.haschild .childnode {
        width: 100%;
        height: 55px;
        position: absolute
    }
    .dnnTopMenu .site_bg {
        right: 0;
        width: 100%;
        z-index: -2;
        visibility: hidden;
        background-color: #000;
        opacity: 0;
        transition: .3s;
    }
    .dnnTopMenu .site_bg.active {
        visibility: visible;
        opacity: .35
    }
    .dnnTopMenu .dnnTopMenu_bg {
        z-index: -1;
        right: -100vw;
        transition: .3s;
    }
    #dnnTopMenu .subMenu {
        position: relative;
        margin-right: -10px;
        width: 240px;
        background: #ffffff;
    }
    #dnnTopMenu .rootMenu li:not(li.haschild) {
        margin: 0;
        padding: 0;
        list-style-type: none;
        position: relative;
        display: flex;
        background-color: #fff;
        height: 60px
    }
    #dnnTopMenu .rootMenu li:not(li.last) {
        border-bottom: 1px solid #ccc
    }
    #dnnTopMenu .rootMenu li .childnode,
    #dnnTopMenu .subMenu li .childnode {
        display: block !important;
    }
}

@media (max-width: 991px) {
    #dnnTopMenu .subMenu,
    #dnnTopMenu .subMenuRight {
        display: none; 
        position: relative !important;
        width: 100% !important;
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    #dnnTopMenu .childnode {
        cursor: pointer !important;
        display: block !important;
    }
    #dnnTopMenu li.haschild.nodeactive > .text > .childnode::after {
        transform: rotate(45deg) !important;
    }
}