/* User Menu Styles */
/* Scoped to avoid conflicts with other page elements */

/* Mobile Menu Toggle Button (Hamburger) */
#menuToggleBtn {
  display: none;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 21000;
  background: rgba(102, 126, 234, 0.9);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  color: white;
  font-size: 24px;
  line-height: 1;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

#menuToggleBtn:hover {
  background: rgba(102, 126, 234, 1);
}

/* Menu Backdrop */
#menuBackdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 20400;
}

#menuBackdrop.active {
  display: block;
}

/* Mobile Responsive Styles */
@media (max-width: 968px) {
  #menuToggleBtn {
    display: block !important;
  }
  
  #userMenuOverlay #userMenuSidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 20500;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.5);
  }
  
  #userMenuOverlay #userMenuSidebar.open {
    transform: translateX(0) !important;
  }
  
  #userMenuOverlay #userMenuContainer {
    padding: 20px !important;
  }
  
  #userMenuOverlay #userMenuContent {
    width: 100% !important;
  }
}

/* Desktop Styles */
@media (min-width: 969px) {
  #userMenuOverlay #userMenuSidebar {
    width: 220px;
  }
}