/*!
 * @package     VP Prime Framework
 * @author      Abhishek Das <info@virtueplanet.com>
 * @link        https://www.virtueplanet.com
 * @copyright   Copyright (C) 2023 Virtueplanet Services LLP. All Rights Reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
**/

.mod-megamenu,
.mod-megamenu--sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mod-megamenu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.mod-megamenu>.mod-megamenu--item {
    flex: 0 0 auto;
    width: auto;
}

.mod-megamenu--item {
    position: relative;
}

.mod-megamenu--item>.mod-megamenu--item-anchor {
    display: block;
    position: relative;
    padding: 0.6rem 0.9rem;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.mod-megamenu--level-1>.mod-megamenu--item-anchor {
    padding: 1rem 0.9rem;
}

.mod-megamenu--item>.mod-megamenu--item-anchor .mod-megamenu--item-title,
.mod-megamenu--item>.mod-megamenu--item-anchor .mod-megamenu--item-icon {
    color: var(--megamenu-top-item-color, var(--template-link-color, #0d6efd));
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.mod-megamenu--active>.mod-megamenu--item-anchor .mod-megamenu--item-title,
.mod-megamenu--active>.mod-megamenu--item-anchor .mod-megamenu--item-icon {
    color: var(--megamenu-top-item-active-color);
}

.mod-megamenu--item:hover>.mod-megamenu--item-anchor .mod-megamenu--item-title,
.mod-megamenu--item:hover>.mod-megamenu--item-anchor .mod-megamenu--item-icon {
    color: var(--megamenu-top-item-hover-color, var(--template-link-color, #0d6efd));
}

.mod-megamenu--sub .mod-megamenu--item>.mod-megamenu--item-anchor {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.mod-megamenu--item:hover>.mod-megamenu--item-anchor {
    text-decoration: none;
}

.mod-megamenu--module {
    display: block;
    padding: 0.5rem 1.5rem;
}

.mod-megamenu--expand>.mod-megamenu--container {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 380;
    margin-right: 0;
    margin-left: 0;
    background-color: var(--megamenu-dropdown-background, #ffffff);
    background-position: bottom right;
    background-clip: border-box;
    background-repeat: no-repeat;
    box-shadow: 0 0 3px rgb(0 0 0 / 15%);
    text-align: left;
    border-radius: var(--megamenu-dropdown-border-radius, 0);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(.19, 1, .22, 1), visibility 0.4s cubic-bezier(.19, 1, .22, 1), transform 0.4s cubic-bezier(.19, 1, .22, 1);
    transform: translateY(15px) translateZ(0);
    pointer-events: none;
    padding: 1.5rem 0;
}

.mod-megamenu--sub .mod-megamenu--expand>.mod-megamenu--container {
    top: 0;
    left: 100%;
    transform: translateY(0) translateX(15px) translateZ(0);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.mod-megamenu--sub .mod-megamenu--expand>.mod-megamenu--container.mod-megamenu-show-left {
    top: 0;
    left: auto;
    right: 100%;
    transform: translateY(0) translateX(-15px) translateZ(0);
}

.mod-megamenu--expand:hover>.mod-megamenu--container {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: visible;
    pointer-events: unset;
}

.mod-megamenu--sub {
    display: grid;
    grid-template-rows: var(--megamenu-template-rows, initial);
    grid-template-columns: var(--megamenu-template-columns, 1fr);
    grid-auto-flow: var(--megamenu-item-direction, row);
}

.mod-megamenu--width-auto>.mod-megamenu--sub>.mod-megamenu--item {
    width: var(--megamenu-column-width, auto);
}

.mod-megamenu--item.mod-megamenu--level-1>.mod-megamenu--item-anchor .mod-megamenu--item-title {
    text-transform: uppercase;
    font-weight: var(--megamenu-top-item-weight, bold);
}

.mod-megamenu--item.mod-megamenu--level-1>a .mod-megamenu--item-desc,
.mod-megamenu--item.mod-megamenu--level-1>span .mod-megamenu--item-desc {
    display: block;
    text-transform: none;
    font-weight: var(--megamenu-description-weight, normal);
    font-size: var(--megamenu-description-size, 0.9rem);
    color: var(--megamenu-description-color, #777);
}

.mod-megamenu--item .mod-megamenu--item>.mod-megamenu--item-anchor .mod-megamenu--item-title,
.mod-megamenu--item .mod-megamenu--item>.mod-megamenu--item-anchor .mod-megamenu--item-icon {
    color: var(--megamenu-item-color, #777);
}

.mod-megamenu--item .mod-megamenu--item>.mod-megamenu--item-anchor:hover .mod-megamenu--item-title,
.mod-megamenu--item .mod-megamenu--item>.mod-megamenu--item-anchor:hover .mod-megamenu--item-icon {
    color: var(--megamenu-item-hover-color, var(--template-link-color, #0d6efd));
}

.mod-megamenu--item .mod-megamenu--active>.mod-megamenu--item-anchor .mod-megamenu--item-title,
.mod-megamenu--item .mod-megamenu--active>.mod-megamenu--item-anchor .mod-megamenu--item-icon {
    color: var(--megamenu-item-active-color, red);
}

.mod-megamenu--item.mod-megamenu--group>.mod-megamenu--item-anchor .mod-megamenu--item-title {
    text-transform: uppercase;
    color: var(--megamenu-group-title-color, #333);
    font-weight: var(--megamenu-group-title-weight, bold);
    text-decoration: var(--megamenu-group-title-decoration, none);
}

.mod-megamenu--item.mod-megamenu--group>.mod-megamenu--item-anchor .mod-megamenu--item-icon {
    color: var(--megamenu-group-title-color, #333);
}

.mod-megamenu--item.mod-megamenu--group.mod-megamenu--active>.mod-megamenu--item-anchor .mod-megamenu--item-title,
.mod-megamenu--item.mod-megamenu--group.mod-megamenu--active>.mod-megamenu--item-anchor .mod-megamenu--item-icon {
    color: var(--megamenu-group-title-active-color, var(--template-link-color, #0d6efd));
}

.mod-megamenu--item.mod-megamenu--group>.mod-megamenu--item-anchor:hover .mod-megamenu--item-title {
    color: var(--megamenu-group-title-hover-color, var(--template-link-color, #0d6efd));
    text-decoration: var(--megamenu-group-title-hover-decoration, none);
}

.mod-megamenu--item.mod-megamenu--group>.mod-megamenu--item-anchor:hover .mod-megamenu--item-icon {
    color: var(--megamenu-group-title-hover-color, var(--template-link-color, #0d6efd));
}

.mod-megamenu--deeper:not(.mod-megamenu--group)>.mod-megamenu--item-anchor {
    padding-right: 1.7rem;
}

.mod-megamenu--deeper:not(.mod-megamenu--group)>.mod-megamenu--item-anchor:after {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    content: "\f078";
    vertical-align: middle;
    font-size: 0.6rem;
    color: var(--megamenu-top-caret-color, #aaa);
}

.mod-megamenu--sub .mod-megamenu--deeper:not(.mod-megamenu--group)>.mod-megamenu--item-anchor {
    padding-right: 3rem;
}

.mod-megamenu--sub .mod-megamenu--deeper:not(.mod-megamenu--group)>.mod-megamenu--item-anchor:after {
    position: absolute;
    content: "\f054";
    margin-top: 0;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--megamenu-caret-color, #aaa);
}

.mod-megamenu--item-inner {
    position: relative;
    display: inline-block;
}

.mod-megamenu--sticker {
    display: flex;
    position: absolute;
    top: -1.25rem;
    left: 80%;
    padding: 0.3rem 0.4rem;
    font-size: 0.7rem;
    font-weight: normal;
    line-height: 1;
    text-align: center;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    background-color: var(--megamenu-sticker-background, #ff0000);
    color: var(--megamenu-sticker-color, #fff);
}

.mod-megamenu--sticker::before {
    content: "";
    position: absolute;
    top: 100%;
    inset-inline-start: 0.4rem;
    border-width: 0.3rem;
    border-style: solid;
    border-color: var(--megamenu-sticker-background, #ff0000);
    border-bottom-color: transparent !important;
    border-inline-end-color: transparent !important;
    border-inline-end-width: 0.5rem;
    border-inline-start-width: 0;
}

.mod-megamenu-test-width .mod-megamenu--item-anchor {
    overflow-x: auto;
}

.mod-megamenu-test-width .mod-megamenu--item-title {
    white-space: nowrap;
}

.mod-megamenu--item-icon,
.mod-megamenu--item-image {
    margin-right: 0.2rem;
}