/*********************************************
 * Mega Menu Mobile
**********************************************/
[data-menu*="mega"][data-menu*="mobile"] {display:block;}

.twc-mega-menu:not(.active) {transform:translateX(-100%); pointer-events:none;}
.twc-mega-menu {
    width:100%; max-width:var(--twc-mobile-menu-width); padding-top:var(--twc-header-height);
    background:#fff; transition:all .1s ease;
}


.twc-mega-menu ul {list-style:none; margin:0;}
.twc-mega-menu ul li {display:flex; justify-content:space-between; align-items:center;}
.twc-mega-menu ul li a {
    font-size:var(--twc-size-20); font-weight:600; max-width:calc(100% - 40px);
    display:flex; align-items:center; gap:20px;
}

.menu-item-image {min-width:60px; width:60px; aspect-ratio:1; border-radius:5px;}


/*********************************************
 * Panel
**********************************************/
.twc-menu-panel {transition:all .4s ease;}


/*********************************************
 * Page
**********************************************/
/* Animation */
.twc-menu-panel-page {animation-duration:.4s; animation-timing-function:ease;}
.twc-menu-panel-page.go-back {animation-name:out-to-left;}
.twc-menu-panel-page:not(.active) {visibility:hidden;}
.twc-menu-panel-page:not(.active):not(.go-back) {z-index:1; animation-name:out-to-right;}
.twc-menu-panel-page.forward.active {animation-name:in-from-left;}
.twc-menu-panel-page.backward.active {animation-name:in-from-right;}
@keyframes in-from-left {
    from {transform:translateX(-100%) scale(.9);}
    to {transform:translateX(0); visibility:visible;}
}
@keyframes in-from-right {
    from {transform:translateX(100%) scale(.9);}
    to {transform:translateX(0); visibility:visible;}
}
@keyframes out-to-right {
    from {transform:translateX(0); visibility:visible;}
    to {transform:translateX(100%) scale(.9);}
}
@keyframes out-to-left {
    from {transform:translateX(0); visibility:visible;}
    to {transform:translateX(-100%) scale(.9);}
}

/* Page */
.twc-menu-panel-page {padding-top:var(--twc-header-height); background:#fff; z-index:2;}
.twc-menu-panel-page__container {padding-top:60px; height:100%;}
.twc-menu-panel-page__body {overflow:auto; height:100%;}

/* Head */
.twc-menu-panel-page__head {
    height:60px; border-bottom:1px solid rgba(49, 100, 175, 0.1);
    padding:10px var(--twc-gap-container);
}
[data-menu-back] {
    background:transparent;
    gap:15px;
}

.twc-menu-panel-page__image {aspect-ratio:414/215;}

/*********************************************
 * Submenu Level 1
**********************************************/
.twc-menu-panel-page.level-1 ul li {padding:15px var(--twc-gap-container);}
.twc-menu-panel-page.level-1 ul li:not(:last-child) {border-bottom:1px solid rgba(49, 100, 175, 0.1);}
.twc-menu-panel-page.level-1 ul li a {color:var(--twc-color-dark-blue);}


/*********************************************
 * Submenu Level 2
**********************************************/
.twc-menu-panel-page.level-2 .twc-menu-panel-page__body {padding-top:var(--twc-spacing-30);}
.twc-menu-panel-page.level-2 ul li {padding:0 var(--twc-gap-container);}
.twc-menu-panel-page.level-2 ul li:not(:last-child) {margin-bottom:25px;}

/*********************************************
 * Responsive
**********************************************/
@media only screen and (max-width:480px) {
    .twc-mega-menu {max-width:unset;}
}