/* 📌 Mobile Menu Optimizations */
@media (max-width: 768px) {
  .menu-dropdown {
    top: 115px;
    right: 10px;
    width: 180px; /* Reduced width for mobile */
    max-height: 350px; /* Slightly reduced max-height */
    padding: 8px; /* Reduced padding */
    font-size: 90%; /* Slightly reduced base font size */
  }
  
  /* Make menu items more compact on mobile */
  .menu-dropdown a {
    padding: 8px 10px; /* Reduced padding */
    gap: 7px; /* Reduced gap between icon and text */
    font-size: 13px; /* Smaller font size for mobile */
  }
  
  .menu-dropdown a i {
    font-size: 14px; /* Smaller icons */
    width: 20px; /* Reduced icon container width */
    height: 20px; /* Reduced icon container height */
  }
  
  /* Reduce category header size */
  .menu-category {
    font-size: 10px;
    margin: 8px 0 3px 8px;
  }
  
  /* Make submenu more compact */
  .submenu {
    margin-left: 15px; /* Reduced indentation */
    padding: 3px 0;
  }
  
  .submenu a {
    padding: 5px 8px; /* Reduced padding */
    font-size: 12px; /* Smaller font size */
  }
  
  /* Reduce spacing between items */
  .menu-dropdown > ul > li {
    margin-bottom: 3px;
  }
  
  /* Reduce divider margins */
  .menu-divider {
    margin: 6px 0;
  }
}

/* Submenu Separators */
.submenu a {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 2px solid #f0f0f0; /* Light but visible separator */
  margin-bottom: 5px; /* Increased spacing */
  border-radius: 4px 4px 0 0; /* Rounded top corners only */
}

.submenu li:last-child a {
  border-bottom: none;
  margin-bottom: 0;
  border-radius: 4px; /* All corners rounded for last item */
}

.submenu a:hover {
  color: #1DB954;
  background-color: rgba(29, 185, 84, 0.1); /* Green-tinted hover effect */
  border-bottom-color: #1DB954; /* Green underline on hover */
}