/* ==========================================
   Remon Code More Menu
========================================== */

.menu-overlay{

position:fixed;

top:0;

left:0;

right:0;

bottom:0;

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

backdrop-filter:blur(3px);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9998;

}

.menu-overlay.show{

opacity:1;

visibility:visible;

}

.more-sheet{

position:fixed;

left:12px;

right:12px;

bottom:-100%;

background:#ffffff;

border-radius:30px 30px 0 0;

box-shadow:0 -15px 40px rgba(0,0,0,.25);

transition:.35s ease;

z-index:9999;

overflow:hidden;

max-height:80vh;

display:flex;

flex-direction:column;

}

.more-sheet.show{

bottom:0;

}

.sheet-handle{

width:70px;

height:6px;

background:#d0d0d0;

border-radius:100px;

margin:12px auto 8px;

}

.sheet-header{

display:flex;

align-items:center;

justify-content:space-between;

padding:10px 22px 18px;

border-bottom:1px solid #ececec;

}

.sheet-header span{

font-size:22px;

font-weight:700;

color:#222;

font-family:'Cairo',sans-serif;

}

.sheet-header button{

border:none;

background:none;

font-size:22px;

cursor:pointer;

width:40px;

height:40px;

border-radius:50%;

transition:.2s;

}

.sheet-header button:hover{

background:#f3f3f3;

}

.sheet-body{

overflow-y:auto;

padding-bottom:20px;

}
/*=========================================
  عناصر القائمة
=========================================*/

.menu-link{

display:flex;

align-items:center;

gap:16px;

padding:18px 22px;

text-decoration:none;

color:#222;

transition:.25s;

border-bottom:1px solid #f1f1f1;

font-family:'Cairo',sans-serif;

}

.menu-link:last-child{

border-bottom:none;

}

.menu-link:hover{

background:#f8f9fb;

transform:translateX(-3px);

}

.menu-icon{

width:55px;

height:55px;

border-radius:16px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

background:linear-gradient(135deg,#2196f3,#1565c0);

color:#fff;

flex-shrink:0;

box-shadow:0 5px 15px rgba(33,150,243,.25);

}

.menu-text{

display:flex;

flex-direction:column;

}

.menu-text strong{

font-size:17px;

font-weight:700;

color:#222;

}

.menu-text small{

margin-top:3px;

font-size:13px;

color:#888;

}

.more-sheet::-webkit-scrollbar{

width:6px;

}

.more-sheet::-webkit-scrollbar-thumb{

background:#bbb;

border-radius:50px;

}

.more-sheet::-webkit-scrollbar-track{

background:transparent;

}

@media(max-width:480px){

.menu-link{

padding:16px 18px;

}

.menu-icon{

width:50px;

height:50px;

font-size:25px;

}

.menu-text strong{

font-size:16px;

}

.menu-text small{

font-size:12px;

}

.sheet-header span{

font-size:20px;

}

}