/**
 * Filter and Sort Bar Styles
 * Ergonomic filter pills and sort selectors with >=44px touch targets.
 */

.filter-sort-bar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background-color: #ffffff;
  border: 1px solid var(--color-ash-grey, #BECEBA);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 20px;
}

.filters-mode-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 6px 14px;
  border-radius: 22px;
  border: 1px solid #d0d7de;
  background-color: #f6f8fa;
  color: var(--color-text-main, #1a252f);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
}

.btn-filter-pill:hover {
  background-color: var(--color-frosted-blue, #9FD3DD);
  color: #0b4950;
  border-color: #7ec5d2;
}

.btn-filter-pill:active {
  transform: scale(0.96);
}

.btn-filter-pill.active {
  background-color: var(--color-strong-cyan, #33BECB);
  color: #ffffff;
  border-color: #209aa4;
}

.filter-icon {
  font-size: 1rem;
}

.sort-options-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sort-prefix-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-muted, #5a6b7c);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sort-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-sort-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #e1e4e8;
  background-color: transparent;
  color: var(--color-text-main, #1a252f);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
}

.btn-sort-pill:hover {
  background-color: #f0f2f5;
  border-color: #c0c4cc;
}

.btn-sort-pill:active {
  transform: scale(0.96);
}

.btn-sort-pill.active {
  background-color: #1a252f;
  color: #ffffff;
  border-color: #1a252f;
  font-weight: 600;
}