.search-box,
.select-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-box:focus-within,
.select-box:focus-within {
  border-color: var(--border-input-focus);
  box-shadow: var(--glow-gold-sm);
}

.search-box input,
.select-box select {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text-body);
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.select-box select {
  appearance: none;
  cursor: pointer;
}

.search-box svg,
.select-box svg {
  flex-shrink: 0;
}

.search-box svg {
  width: var(--icon-size-topbar);
  height: var(--icon-size-topbar);
  stroke-width: var(--icon-stroke-topbar);
  color: #c7d7eb;
}

.select-box svg {
  width: var(--icon-size-tag);
  height: var(--icon-size-tag);
  stroke-width: var(--icon-stroke-tag);
  color: #93aac6;
}

.search-box--wide {
  min-width: 260px;
}

@media (max-width: 720px) {
  .search-box,
  .select-box,
  .search-box--wide {
    min-width: 0;
    width: 100%;
  }
}