/* ===================================
   CATEGORY FILTERING COMPONENTS
   =================================== */

/* Category Header */
.sidebar-header {
  padding: 20px;
}

.sidebar-header h3 {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--gray-800);
  margin: 0;
}

/* Category Filtering Logic (CSS-only) */
.container:has(#cartographie-des-habitats:checked)
  .map-card:not([data-category="cartographie-des-habitats"]) {
  display: none;
}

.container:has(#etat-des-eaux-cotieres-et-de-transition:checked)
  .map-card:not([data-category="etat-des-eaux-cotieres-et-de-transition"]) {
  display: none;
}

.container:has(#expeditions-scientifiques:checked)
  .map-card:not([data-category="expeditions-scientifiques"]) {
  display: none;
}

.container:has(#gestion-cotiere:checked)
  .map-card:not([data-category="gestion-cotiere"]) {
  display: none;
}

.container:has(#observatoires-et-sites-ateliers:checked)
  .map-card:not([data-category="observatoires-et-sites-ateliers"]) {
  display: none;
}

.container:has(#reseaux-de-surveillance:checked)
  .map-card:not([data-category="reseaux-de-surveillance"]) {
  display: none;
}

.container:has(#restauration-ecologique:checked)
  .map-card:not([data-category="restauration-ecologique"]) {
  display: none;
}

.container:has(#sciences-participatives:checked)
  .map-card:not([data-category="sciences-participatives"]) {
  display: none;
}

/* Show all cards when "all" is selected */
.container:has(#all:checked) .map-card {
  display: block;
}

/* Category Navigation */
.category-nav {
  padding: 10px 0;
}

.category-group {
  margin-bottom: 5px;
}

.category-group input[type="radio"] {
  display: none;
}

.category-label {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  transition: var(--transition-fast);
  color: var(--gray-500);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  position: relative;
}

.category-label:hover {
  color: var(--gray-900);
}

.category-icon {
  margin-right: 12px;
  font-size: var(--text-secondary);
}

/* Category Label Styling - Active State */
input[type="radio"]:checked + .category-label {
  color: var(--primary);
  font-weight: var(--font-semibold);
}

/* Responsive Category Label */
@media (max-width: 480px) {
  .category-label {
    padding: 10px 15px;
    font-size: 0.9rem;
  }
}