.cosmod-menu-toggle{
width:28px;
cursor:pointer;
}
.cosmod-menu-toggle span{
display:block;
height:2px;
background:#fff;
margin:6px 0;
}
.cosmod-mobile-menu{
position:fixed;
top:0;
left:-100%;
width:100%;
max-width:420px;
height:100%;
background:#fff;
z-index:999999;
transition:0.3s;
overflow:hidden;
}
.cosmod-mobile-menu.active{
left:0;
}
.cosmod-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.6);
opacity:0;
visibility:hidden;
transition:0.3s;
z-index:999998;
}
.cosmod-overlay.active{
opacity:1;
visibility:visible;
}
.menu-panel{
position:absolute;
width:100%;
height:100%;
left:100%;
top:0;
background:#fff;
transition:0.3s;
overflow-y:auto;
}
.menu-panel.active{
left:0;
}
.menu-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 20px;
border-bottom:1px solid #eee;
font-size:18px;
font-weight:600;
}
.menu-back{
cursor:pointer;
font-size:22px;
}
.menu-close{
cursor:pointer;
font-size:30px;
padding:5px 20px;
}
.cosmod-menu-list,
.sub-menu{
list-style:none;
margin:0;
padding:0;
}
.cosmod-menu-list li,
.sub-menu li{
border-bottom:1px solid #eee;
}
.cosmod-menu-list li a,
.sub-menu li a{
display:block;
padding:16px 20px;
text-decoration:none;
color:#000;
font-size:16px;
}
.cosmod-menu-list ul.sub-menu{
display:none;
}
.cosmod-menu-list li a:hover{
background:#f5f5f5;
}
.menu-item-has-children > a{
position:relative;
display:block;
padding-right:50px;
}
.menu-item-has-children{
position:relative;
}
.submenu-arrow{
position:absolute;
right:20px;
top:50%;
transform:translateY(-50%);
font-size:22px;
cursor:pointer;
z-index:10;
}
.menu-item-has-children > a{
display:block;
padding-right:60px;
}
.submenu-arrow{
font-size:26px;
color:#333;
transition:0.2s;
}
.submenu-arrow:hover{
transform:translateY(-50%) scale(1.2);
}
.submenu-arrow{
float:right;
font-size:34px;
cursor:pointer;
padding-left:170px;
}