/* Filter Cascade Styles */
.filter-cascade .filter-step.locked {
  opacity: 0.5;
  pointer-events: none;
}

.filter-cascade .filter-tags button.active {
  background: linear-gradient(135deg, #0d6efd, #0a58ca);
  color: white;
  border-color: transparent;
}

.filter-cascade .url-display {
  font-size: 0.875rem;
  word-break: break-all;
}

.filter-cascade .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #e9ecef;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.875rem;
}

.filter-cascade .breadcrumb-primary {
  background: linear-gradient(135deg, #0d6efd, #0a58ca);
  color: white;
  font-weight: 600;
}

.filter-cascade .breadcrumb-item button {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  padding: 0;
  font-size: 0.75rem;
}

.filter-cascade .filter-unselected::before {
  content: "+ ";
  opacity: 0.6;
}

.filter-cascade .filter-unselected {
  opacity: 0.7;
  font-size: 0.875rem;
  padding: 0.375rem 0.875rem;
}

.filter-cascade .filter-selected-primary {
  background: linear-gradient(135deg, #0d6efd, #0a58ca) !important;
  color: white !important;
  border-color: transparent !important;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.375rem 0.875rem;
}

.filter-cascade .filter-selected {
  background: #e9ecef !important;
  color: #212529 !important;
  border-color: #e9ecef !important;
  font-size: 0.875rem;
  padding: 0.375rem 0.875rem;
}

/* Mobile bottom tag bar */
.filter-mobile-bar {
  display: none;
  width: 100%;
  padding: 0.75rem 0.75rem;
  background: #f8f9fa;
}

.filter-mobile-bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.filter-mobile-bar-inner .btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  white-space: nowrap;
}

.filter-mobile-bar-inner .filter-more-btn {
  font-weight: 600;
  padding: 0.25rem 1rem;
}

@media (max-width: 576px) {
  .filter-mobile-bar {
    display: block;
  }
}

/* Mobile center alignment */
@media (max-width: 576px) {
  #filterCascade .d-flex {
    justify-content: center;
  }
}