/* Mobile Dropdown Specific Fixes */

@media (max-width: 991px) {
  /* Ensure dropdown is properly visible when toggled */
  #product-categories-dropdown.show-dropdown .dropdown-content {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 2000px !important;
    pointer-events: auto !important;
  }
  
  /* Fix z-index issues that might occur */
  #product-categories-dropdown {
    position: relative;
    z-index: 10;
  }
  
  /* Make dropdown items more tappable */
  #product-categories-dropdown .dropdown-item {
    padding: 15px 20px 15px 50px;
    margin: 0;
    width: 100%;
    display: block;
  }
  
  /* Prevent content jumps when toggling */
  #product-categories-dropdown .dropdown-content {
    margin: 0;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
  }
  
  /* Clear hover effects that might interfere */
  #product-categories-dropdown:hover .dropdown-content {
    /* Override any hover effects for mobile */
    opacity: initial;
    visibility: initial;
    transform: initial;
    max-height: initial;
  }
  
  /* Make chevron animation smoother */
  #product-categories-dropdown .fa-chevron-down {
    transition: transform 0.3s ease;
  }
  
  #product-categories-dropdown.show-dropdown .fa-chevron-down {
    transform: rotate(180deg);
  }
  
  /* Apply a visual indicator when dropdown is open */
  #product-categories-dropdown.show-dropdown > a {
    background-color: rgba(52, 152, 219, 0.05);
    color: #3498db;
  }
}

/* Specific fix for initial page load */
@media (max-width: 991px) {
  #product-categories-dropdown .dropdown-content {
    display: none !important;
  }
  
  #product-categories-dropdown.show-dropdown .dropdown-content {
    display: block !important;
  }
}