/* Prevent flash before Alpine.js initialises */
[x-cloak] .vacancySearch,
.vacancySearch[x-cloak] {
  display: none !important;
}
.vacancySearch {
  display: flex !important;
}
.searchField {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
/* Hide placeholder when examples are in the DOM; show it only as a fallback */
.searchField:has(.vacancySearch__example) input::placeholder {
  opacity: 0;
}
/* Hide spans instantly when the input has a value */
.searchField input:not(:placeholder-shown) ~ .vacancySearch__example {
  opacity: 0;
  animation: none;
}
/* ── Example query chips ────────────────────────────────────────────────────── 

.vacancySearch__examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 0.875rem;
}

.vacancySearch__example {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border: 1px solid #d0d0d0;
  border-radius: 9999px;
  background: transparent;
  font-size: 0.8125rem;
  color: #444;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}

.vacancySearch__example:hover {
  border-color: #1a1a1a;
  background: #1a1a1a;
  color: #fff;
}
*/