/* Filter and Search Functionality */

/* Controls Container */
#controls-container {
  position: relative;
  z-index: 40; /* Increased from z-index: 5 */
  background: transparent;
  transition: margin-bottom 0.2s ease;
}

#controls-container.filter-dropdown-open {
  /* CLS FIX: Slightly increased from 2.5rem to prevent minor layout jump */
  margin-bottom: 2.75rem;
}

/* Filter Dropdown */
#filter-dropdown {
  transition: all 0.3s ease;
  transform: translateY(-5px);
  opacity: 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
  padding: 0.5rem 0.75rem;
  margin-top: 2px;
  min-height: fit-content;
}

#filter-dropdown:not(.hidden) {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

#filter-dropdown .flex.flex-wrap.items-center {
  gap: 0.25rem 1rem; 
  white-space: nowrap; 
}

#filter-dropdown .flex.items-center.gap-1 {
  gap: 0.375rem; 
  flex-shrink: 0; 
}

#filter-dropdown .flex.items-center.gap-2 {
  gap: 0.75rem;
  flex-shrink: 0;
}

#filter-dropdown input[type="radio"] + span {
  margin-left: 0.25rem; 
}

#filter-dropdown input[type="checkbox"] + span {
  margin-left: 0.25rem; 
}

#filter-dropdown span {
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
}

#filter-dropdown label {
  font-size: 0.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  white-space: nowrap; 
}

#filter-dropdown input[type="checkbox"],
#filter-dropdown input[type="radio"] {
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  flex-shrink: 0; 
}

/* Mobile Filter Dropdown Adjustments */
@media (max-width: 768px) {
  #filter-dropdown {
    padding: 0.5rem 0.625rem; 
    left: 0.25rem;
    right: 0.25rem;
    z-index: 50 !important; /* Increased from z-10 */
    left: 0 !important;
    right: 0 !important;
    margin-left: 0;
    margin-right: 0;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: auto; /* Allow horizontal scroll if needed */
    white-space: nowrap; /* Prevent text wrapping that could cause issues */
  }

  #filter-dropdown span {
    font-size: 0.6875rem !important; 
  }

  #filter-dropdown label {
    font-size: 0.6875rem !important; 
  }

  #filter-dropdown input[type="checkbox"],
  #filter-dropdown input[type="radio"] {
    width: 10px !important; 
    height: 10px !important;
    transform: scale(0.9); 
  }

  #filter-dropdown .flex.flex-wrap.items-center {
    gap: 0.125rem 0.5rem;
    flex-wrap: nowrap !important; /* Prevent wrapping on very small screens */
    overflow-x: auto;
    padding-bottom: 0.25rem; /* Add space for potential scrollbar */
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
    scrollbar-width: thin; /* Firefox - always show thin scrollbar */
  }

  #filter-dropdown .flex.items-center.gap-1 {
    gap: 0.1875rem;
  }

  #filter-dropdown .flex.items-center.gap-2 {
    gap: 0.375rem;
  }

  /* Force webkit scrollbar to always be visible */
  #filter-dropdown .flex.flex-wrap.items-center::-webkit-scrollbar {
    height: 8px;
    -webkit-appearance: none;
  }
  
  #filter-dropdown .flex.flex-wrap.items-center::-webkit-scrollbar-track {
    background: rgba(55, 65, 81, 0.5);
    border-radius: 4px;
  }
  
  #filter-dropdown .flex.flex-wrap.items-center::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  #filter-dropdown .flex.flex-wrap.items-center::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
  }
  
  /* Adjust font sizes to fit better on mobile */
  #filter-dropdown span,
  #filter-dropdown label {
    font-size: 0.65rem !important;
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  #filter-dropdown .flex.flex-wrap.items-center {
    gap: 0.125rem 0.75rem; 
  }

  #filter-dropdown .flex.items-center.gap-1 {
    gap: 0.25rem;
  }
}

@media (max-width: 320px) {
  #controls-container.filter-dropdown-open {
    margin-bottom: 1.75rem; 
  }
  
  #filter-dropdown {
    padding: 0.25rem 0.375rem; 
  }

  #filter-dropdown span {
    font-size: 0.5625rem !important; 
  }

  #filter-dropdown label {
    font-size: 0.5625rem !important; 
  }

  #filter-dropdown input[type="checkbox"],
  #filter-dropdown input[type="radio"] {
    width: 8px !important;
    height: 8px !important;
    transform: scale(0.8);
  }

  #filter-dropdown .flex.flex-wrap.items-center {
    gap: 0.0625rem 0.375rem; 
  }

  #filter-dropdown .flex.items-center.gap-1 {
    gap: 0.125rem;
  }

  #filter-dropdown .flex.items-center.gap-2 {
    gap: 0.25rem;
  }
}