/****************************
 * Common
****************************/

@media only screen and (max-width:1180px) {
    /* open/close */
    html:not(.menu-open) .vii-menu-mobile {visibility:hidden; opacity:0;}
    html:not(.menu-open) .vii-menu-mobile-container {transform:translateX(-105%);}

    /* wrapper */
    [data-menu*="default"][data-menu*="mobile"] {display:block;}
    .vii-menu-mobile-container {
        width:100%; max-width:var(--vii-mobile-menu-width); padding-top:var(--vii-header-height);
        background:#fff;
    }
    .vii-menu-mobile-inner {height:100%;}

    /* close layer */
    .vii-menu-mobile__close {background:rgba(0, 0, 0, .5);}

    /* sections */
    .vii-menu-mobile__section {padding:var(--vii-gap-container);}

    /* section bottom */
    .vii-menu-mobile__section.bottom {padding:0 0 86px;}
    .vii-menu-mobile__section.bottom > div {
        padding:12px var(--vii-gap-container); background:var(--vii-color-primary);
    }

    /* Accordion Button */
    .open-sub-menu {background:none; padding:5px;}
    .open-sub-menu.active {transform:rotate(180deg);}
    .open-sub-menu.active, .open-sub-menu:hover {color:var(--vii-color-primary);}

    /****************************
     * Menu
    ****************************/
    /* Common Menu */
    .mobile-menu ul > li:not(:last-child) {
        margin-bottom:10px; padding-bottom:10px;
        border-bottom:1px solid rgba(0, 0, 0, .2)
    }
    .mobile-menu ul {list-style:none; margin:0;}
    .mobile-menu ul > li {padding:0;}
    .mobile-menu ul > li > a {
        position:relative; display:block;
        padding:5px 0; text-decoration:none;
    }
    .mobile-menu ul > li[class*="current-"]:not(.custom-link-scroll) > a {font-weight:700;}
    .mobile-menu ul > li[class*="current-"]:not(.custom-link-scroll) > a,
    .mobile-menu ul > li > a:hover, .mobile-menu ul > li > a:focus {color:var(--vii-color-primary);}

    /* Common Sub Menu */
    .mobile-menu ul.sub-menu {padding-top:10px;width:100%;padding-left:15px;display:none;}
    .mobile-menu ul.sub-menu > li:first-child {padding-top:10px; border-top:1px solid rgba(0, 0, 0, .1);}
    .mobile-menu ul.sub-menu > li:not(:last-child) {border-bottom-color:rgba(0, 0, 0, .1)}


    /* Sticky section */
    .vii-menu-mobile__section.sticky {box-shadow:0 0 10px 5px rgba(0, 0, 0, .1);}

    /* Block menu */
    .vii-menu-block.menu:not(:last-child) {
        margin-bottom:10px;padding-bottom:10px;
        border-bottom:1px solid rgba(0, 0, 0, .2);
    }


    /****************************
     * Menu Has Child
    ****************************/
    .menu-item-has-children {display:flex; flex-wrap:wrap; justify-content:space-between; position:relative;}
    .menu-item-has-children > a {order:1; max-width:calc(100% - 40px);}
    .menu-item-has-children > .menu-item-arrow {order:2; width:40px;}
    .menu-item-has-children > ul {order:3; width:100%;}

    /* Arrow button */
    .menu-item-arrow {text-align:right; display:flex; align-items:center;justify-content:flex-end}
    .menu-item-arrow__button {
        font-size:12px;
        padding:5px; margin-right:-5px;
        background:transparent;
    }
    .menu-item-arrow__button i {display:inline-block; transition:transform .3s ease;}
    .menu-item-arrow__button.active i {transform:rotate(180deg);}

    /* open state */
    html.menu-open {overflow:hidden; height:100%;}
    .vii-menu-mobile.hidden {display:block;}

}

/* admin bar */
@media only screen and (min-width:783px) {
    body.admin-bar .vii-menu-mobile-container {padding-top:calc(var(--vii-header-height) + 32px);}
}

@media only screen and (max-width:480px) {
    .vii-menu-mobile-container {max-width:unset;}
}