:root {
    --width-sidebar: 220px;
    --global-color: #0c7c39;
}

html.novin-mega-open,
body.novin-mega-open {
    overflow: hidden;
    touch-action: none;
}


/* Overlay */
.novin-mega-overlay {

    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, .45);

    backdrop-filter: blur(2px);

    opacity: 0;
    visibility: hidden;

    transition: .25s;

    z-index: 1;
}


body.novin-mega-open .novin-mega-overlay {

    opacity: 1;
    visibility: visible;

}


/* Main Mega */
.novin-mega-menu {

    display: flex;

    width: auto;

    max-width: 90vw;

    height: 70vh;
    max-height: 70vh;

    background: #fff;

    border-radius: 12px;

    overflow: hidden;

    position: relative;

    z-index: 991;

}


/* Sidebar */
.novin-mega-sidebar {

    flex: 0 0 var(--width-sidebar);

    background: #eee;

    overflow-y: auto;

    height: 100%;

}


/* Parent list */

.novin-mega-parents {

    margin: 0;

    padding: 0;

    list-style: none;

}


.novin-mega-parent {

    display: flex;

    align-items: center;

    margin: 0;

    cursor: pointer;

    white-space: nowrap;

    transition: .2s;

}


.novin-mega-parent.active {

    background: #f6f6f6;

}

.novin-mega-parent a {

    display: block;

    flex: 0 0 100%;

    padding: 15px 20px;

}

/* Content */
.novin-mega-content {

    height: 100%;

    overflow-y: auto;

    width: auto;

    max-width: calc(90vw - var(--width-sidebar));

}

.novin-mega-inner {
    width: max-content;
    max-width: 100%;
}

/* Panels */
.novin-mega-panel {

    display: none;

}


.novin-mega-panel.active {

    display: grid;

    gap: 0;

    align-items: start;

}

.novin-mega-panel.novin-mega-panel-1 {
    grid-template-columns:repeat(1, minmax(var(--width-sidebar), 1fr));
}

.novin-mega-panel.novin-mega-panel-2 {
    grid-template-columns:repeat(2, minmax(var(--width-sidebar), 1fr));
}


.novin-mega-panel.novin-mega-panel-3 {
    grid-template-columns:repeat(3, minmax(var(--width-sidebar), 1fr));
}

.novin-mega-panel.novin-mega-panel-4 {
    grid-template-columns:repeat(4, minmax(var(--width-sidebar), 1fr));
}

/* Column */

.novin-mega-column {

    display: flex;

    flex-direction: column;

    min-width: 0;

    width: var(--width-sidebar);

}

.novin-mega-group {

    line-height: 1.8;

}

/* Titles */
.novin-mega-title {

    white-space: normal;

    line-height: 1.8;

    display: block;

    flex: 0 0 100%;

    padding: 15px 20px;

    color: #222;

    font-weight: 700;

    margin-bottom: 0;

    transition: .2s;

    position: relative;
}

.novin-mega-title:hover {

    color: var(--global-color);

}

.novin-mega-has-children:before {
    content: '';
    display: block;
    width: 2px;
    height: 27px;
    background: var(--global-color);
    position: absolute;
    right: 8px;
}

.novin-mega-has-children:after {
    margin-inline-start: 4px;
    font-weight: normal;
    font-style: normal;
    font-size: clamp(6px, 50%, 18px);
    color: #222;
    content: "\f114";
    font-family: "woodmart-font";
}

.novin-mega-list {

    list-style: none;

    margin: 0;

    padding: 0 16px 0;
}

.level-1 > .novin-mega-list {

    padding-right: 16px;

}

.level-2 > .novin-mega-list {

    padding-right: 16px;

}

.level-3 > .novin-mega-list {

    padding-right: 16px;

}

.novin-mega-list li {

    margin: 0;

}


.novin-mega-list a {

    white-space: nowrap;
    display: block;
}

.novin-mega-group.level-0 > .novin-mega-title {
    font-size: 14px;
    font-weight: 700;
}

.novin-mega-group.level-1 > .novin-mega-title {
    font-size: 13px;
    font-weight: 600;
}

.novin-mega-group.level-2 > .novin-mega-title {
    font-size: 12px;
    font-weight: 400;
}

.novin-mega-group.level-3 > .novin-mega-title {
    font-size: 11px;
}