.filter-group {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .15rem;
  padding: .3rem;
  border-radius: 999px;
}
.filter-group::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: var(--hm-glass-bg, rgba(255, 255, 255, .58));
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--hm-glass-border, rgba(255, 255, 255, .78));
  box-shadow: var(--hm-glass-shadow, 0 18px 40px -22px rgba(24, 29, 37, .32)), var(--hm-glass-inset, inset 0 1px 0 rgba(255, 255, 255, .95));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .filter-group::before { background: var(--hm-glass-bg-solid, rgba(255, 255, 255, .92)); }
}

@media (max-width: 991.98px) {
  .filter-bar {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .mobile-filter-trigger {
    display: none !important;
  }
}

.filter-group .divider { display: none; }

.filter-control.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  flex: 1;
  padding: .5rem 1.05rem;
  border: 0;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--hm-title, var(--cz-heading-color));
  background: transparent;
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .5s var(--hm-spring, cubic-bezier(.34, 1.56, .64, 1));
}
.filter-control.btn:hover {
  color: #2456b8;
  background: rgba(59, 130, 246, .12);
}
html[data-bs-theme="dark"] .filter-control.btn:hover {
  color: #fff;
  background: rgba(127, 178, 255, .16);
}
.filter-control.btn:active { transform: scale(.94); }
.filter-control.btn:focus-visible { outline: 3px solid rgba(59, 130, 246, .5); outline-offset: 2px; }

.filter-control.btn.active,
html[data-bs-theme="dark"] .filter-control.btn.active {
  color: #fff !important;
  background: linear-gradient(120deg, #2456b8, #2f6ed5 50%, #1f8fdc) !important;
  box-shadow: 0 10px 20px -10px rgba(47, 110, 213, .9), inset 0 1px 0 rgba(255, 255, 255, .45);
  animation: filterPop .6s var(--hm-spring, cubic-bezier(.34, 1.56, .64, 1));
}
@keyframes filterPop {
  0%   { scale: .92; }
  60%  { scale: 1.05; }
  100% { scale: 1; }
}

.filter-control .arrow {
  font-size: .75em;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  transition: transform .25s ease;
  transform-origin: center;
}
.filter-control[aria-expanded="true"] .arrow {
  transform: rotate(180deg);
}

#filter-reset.btn {
  padding: .55rem 1.2rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--hm-title, var(--cz-heading-color));
  background: var(--hm-glass-bg, rgba(255, 255, 255, .58));
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--hm-glass-border, rgba(255, 255, 255, .78));
  box-shadow: var(--hm-glass-shadow, 0 18px 40px -22px rgba(24, 29, 37, .32)), var(--hm-glass-inset, inset 0 1px 0 rgba(255, 255, 255, .95));
  transition: transform .5s var(--hm-spring, cubic-bezier(.34, 1.56, .64, 1)), background-color .3s ease, color .3s ease;
}
#filter-reset.btn:hover {
  background: var(--hm-glass-bg-solid, rgba(255, 255, 255, .92));
  transform: translateY(-2px);
}
#filter-reset.btn.has-filters:hover {
  color: #f55266;
}
#filter-reset.btn:active { transform: scale(.94); }
.filter-bar [data-bs-toggle="tooltip"] { color: var(--hm-muted, var(--cz-secondary-color)); cursor: help; transition: color .3s ease, transform .5s var(--hm-spring, cubic-bezier(.34, 1.56, .64, 1)); display: inline-block; }
.filter-bar [data-bs-toggle="tooltip"]:hover { color: #2f6ed5; transform: rotate(-12deg) scale(1.15); }

.filter-bar .dropdown-menu {
  min-width: 11rem;
  max-height: 20rem;
  overflow-y: auto;
  padding: .4rem;
  z-index: 1050;
  border-radius: 1.25rem;
  border: 1px solid var(--hm-glass-border, rgba(255, 255, 255, .78));
  background: var(--hm-menu-bg, rgba(255, 255, 255, .85));
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 24px 48px -20px rgba(24, 29, 37, .4), var(--hm-glass-inset, inset 0 1px 0 rgba(255, 255, 255, .95));
  transform-origin: top center;
  scrollbar-width: thin;
}
.filter-bar .dropdown-menu.show {
  animation: dropdownFadeScale .32s var(--hm-ease, cubic-bezier(.22, 1, .36, 1)) both;
}
@keyframes dropdownFadeScale {
  from { opacity: 0; translate: 0 -8px; scale: .96; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

.filter-bar .dropdown-item {
  padding: .5rem .9rem;
  border-radius: .85rem;
  font-size: .9rem;
  color: var(--hm-title, var(--cz-heading-color));
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, padding-left .35s var(--hm-spring, cubic-bezier(.34, 1.56, .64, 1));
}
.filter-bar .dropdown-item:hover {
  padding-left: 1.15rem;
  background: rgba(59, 130, 246, .12);
  color: #2456b8;
}
html[data-bs-theme="dark"] .filter-bar .dropdown-item:hover {
  background: rgba(127, 178, 255, .16);
  color: #fff;
}

.dropdown-item.active {
  background-color: #e7f1ff;
  color: #0d6efd;
  font-weight: 600;
}
.filter-bar .dropdown-item.active,
html[data-bs-theme="dark"] .filter-bar .dropdown-item.active {
  background: linear-gradient(120deg, #2456b8, #2f6ed5 50%, #1f8fdc);
  color: #fff;
  font-weight: 600;
}

.filter-bar .dropdown-item.active::before {
  content: "✔ ";
  color: #fff;
  font-weight: bold;
}

@media (prefers-reduced-motion: reduce) {
  .filter-control.btn.active,
  .filter-bar .dropdown-menu.show { animation: none; }
  .filter-control .arrow { transition: none; }
}