/* Filter Controls - Single Row, Fit Screen */
.filter-controls {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem auto;
  width: 100%;
  max-width: 100%;
  padding: 0 0.5rem;
  overflow-x: auto; /* Allow scroll if content is too wide */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Hide scrollbar */
}

.filter-controls::-webkit-scrollbar {
  display: none;
}

.filter-controls .filter-btn {
  white-space: nowrap;
  padding: 0.6rem 1rem;
  flex: 0 0 auto; /* Do NOT shrink below content size */
  min-width: auto;
  font-size: 0.9rem;
  /* Remove ellipsis/overflow hidden to show full text */
}

/* Mobile: Smaller text and padding to fit more */
@media (max-width: 480px) {
  .filter-controls {
    justify-content: flex-start; /* Align left to allow scrolling */
  }
  
  .filter-controls .filter-btn {
    padding: 0.4rem 0.6rem; /* Minimal padding */
    font-size: 0.75rem; /* Smaller text */
    border-width: 1px;
  }
}