/* assets/css/components/search-filter.css */
@layer components {
  .search-filter { display: flex; align-items: center; gap: var(--space-s); }
  .search-filter__input-wrap { position: relative; flex: 1; }
  .search-filter__input { display: block; inline-size: 100%; block-size: 2.75rem; border-radius: var(--radius-s); background: var(--surface-sunken); border: 1px solid var(--border-default); padding-inline: var(--space-m); padding-inline-start: 2.75rem; font-size: var(--text-s); font-family: var(--font-body); color: var(--text-main); }
  .search-filter__input::placeholder { color: var(--text-subtle); }
  .search-filter__input:focus { outline: none; background: var(--white); border-color: var(--border-focus); box-shadow: 0 0 0 4px color-mix(in oklch, var(--border-focus) 13%, transparent); }
  .search-filter__input-icon { position: absolute; inset-block-start: 50%; inset-inline-start: var(--space-m); transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--text-muted); pointer-events: none; }
  .search-filter__select { display: block; block-size: 2.75rem; min-inline-size: 12rem; border-radius: var(--radius-s); background: var(--surface-sunken); border: 1px solid var(--border-default); padding-inline: var(--space-m); font-size: var(--text-s); font-family: var(--font-body); color: var(--text-body); appearance: none; cursor: pointer; }
  .search-filter__select:focus { outline: none; background-color: var(--white); border-color: var(--border-focus); box-shadow: 0 0 0 4px color-mix(in oklch, var(--border-focus) 13%, transparent); }
  @media (max-width: 48em) { .search-filter { flex-direction: column; } .search-filter__select { inline-size: 100%; } }
}