/* v170 Premium Menu Design */
:root{
  --menu-bg: rgba(255,255,255,.96);
  --menu-border: rgba(15,23,42,.08);
  --menu-shadow: 0 22px 70px rgba(15,23,42,.18);
  --menu-item-bg: rgba(248,250,252,.92);
  --menu-item-hover: rgba(239,68,68,.08);
  --menu-item-active: linear-gradient(135deg,#ef4444,#b91c1c);
}

.drawer,
.side-menu,
.sidebar,
.mobile-menu,
nav[aria-label],
#sideMenu,
#menuPanel{
  background: var(--menu-bg) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border-inline-start: 1px solid var(--menu-border) !important;
  box-shadow: var(--menu-shadow) !important;
  border-radius: 24px 0 0 24px !important;
}

.drawer button,
.side-menu button,
.sidebar button,
.mobile-menu button,
#sideMenu button,
#menuPanel button,
.drawer a,
.side-menu a,
.sidebar a,
.mobile-menu a,
#sideMenu a,
#menuPanel a{
  min-height: 46px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  background: var(--menu-item-bg) !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  margin: 6px 0 !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.045) !important;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.drawer button:hover,
.side-menu button:hover,
.sidebar button:hover,
.mobile-menu button:hover,
#sideMenu button:hover,
#menuPanel button:hover,
.drawer a:hover,
.side-menu a:hover,
.sidebar a:hover,
.mobile-menu a:hover,
#sideMenu a:hover,
#menuPanel a:hover{
  transform: translateY(-1px) !important;
  background: var(--menu-item-hover) !important;
  border-color: rgba(239,68,68,.18) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.08) !important;
}

.drawer button.active,
.side-menu button.active,
.sidebar button.active,
.mobile-menu button.active,
#sideMenu button.active,
#menuPanel button.active,
.drawer [aria-current="page"],
.side-menu [aria-current="page"],
.sidebar [aria-current="page"]{
  background: var(--menu-item-active) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 16px 34px rgba(239,68,68,.24) !important;
}

/* Menu icon in header */
.menu-btn,
button[aria-label*="תפריט"],
button[title*="תפריט"]{
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.08) !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.menu-btn:hover,
button[aria-label*="תפריט"]:hover,
button[title*="תפריט"]:hover{
  background: rgba(239,68,68,.08) !important;
  transform: translateY(-1px) !important;
}

/* Mobile menu spacing */
@media (max-width: 720px){
  .drawer,
  .side-menu,
  .sidebar,
  .mobile-menu,
  #sideMenu,
  #menuPanel{
    width: min(88vw, 360px) !important;
    padding: 18px !important;
    border-radius: 24px 0 0 24px !important;
  }
  .drawer button,
  .side-menu button,
  .sidebar button,
  .mobile-menu button,
  #sideMenu button,
  #menuPanel button{
    min-height: 50px !important;
    font-size: 15px !important;
  }
}