/*
 * Brand Boosters Filter: search bar. Themes can set these on :root (or use
 * Settings → Zoekfunctie → Stijl): --bbf-color-primary, --bbf-color-on-primary,
 * --bbf-color-bg, --bbf-color-text, --bbf-color-muted, --bbf-color-border,
 * --bbf-radius, --bbf-font-family, --bbf-bar-height, --bbf-bar-width.
 */
.bbf-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bbf-searchbar {
  position: relative;
  display: flex;
  align-items: center;
  max-width: min(var(--bbf-bar-width, 100%), 100%);
  margin: 0;
  font-family: var(--bbf-font-family, inherit);
}

.bbf-searchbar__icon {
  position: absolute;
  top: 50%;
  left: 16px;
  display: flex;
  color: var(--bbf-color-muted, #6b6b6b);
  transform: translateY(-50%);
  pointer-events: none;
}

.bbf-searchbar__icon svg {
  width: 20px;
  height: 20px;
}

.bbf-searchbar__input {
  flex: 1;
  min-width: 0;
  height: var(--bbf-bar-height, 52px);
  margin: 0;
  padding: 0 calc(var(--bbf-bar-height, 52px) + 8px) 0 46px;
  border: 1px solid var(--bbf-color-border, #dcdcdc);
  border-radius: var(--bbf-radius, 12px);
  background: var(--bbf-color-bg, #fff);
  color: var(--bbf-color-text, #111);
  font: inherit;
  /* Grows with the height; at least 16px, which prevents zooming in on iOS */
  font-size: max(16px, calc(var(--bbf-bar-height, 52px) * 0.3));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bbf-searchbar__input::placeholder {
  color: var(--bbf-color-muted, #6b6b6b);
  opacity: 1;
}

.bbf-searchbar__input::-webkit-search-cancel-button,
.bbf-searchbar__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.bbf-searchbar__input:hover {
  border-color: #bdbdbd;
}

.bbf-searchbar__input:focus {
  outline: none;
  border-color: var(--bbf-color-primary, #111);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bbf-color-primary, #111) 16%, transparent);
}

.bbf-searchbar__button {
  position: absolute;
  top: 50%;
  right: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--bbf-bar-height, 52px) - 14px);
  height: calc(var(--bbf-bar-height, 52px) - 14px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: max(calc(var(--bbf-radius, 12px) - 5px), 0px);
  background: var(--bbf-color-primary, #111);
  color: var(--bbf-color-on-primary, #fff);
  cursor: pointer;
  transform: translateY(-50%);
  transition: filter 0.15s ease, transform 0.1s ease;
}

.bbf-searchbar__button:hover {
  filter: brightness(1.2);
}

.bbf-searchbar__button:active {
  transform: translateY(-50%) scale(0.95);
}

.bbf-searchbar__button svg {
  width: 18px;
  height: 18px;
}

.bbf-searchbar__button:focus-visible,
.bbf-searchbar--icon:focus-visible {
  outline: 2px solid var(--bbf-color-primary, #111);
  outline-offset: 2px;
}

.bbf-searchbar--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--bbf-color-border, #dcdcdc);
  border-radius: 999px;
  background: var(--bbf-color-bg, #fff);
  color: var(--bbf-color-text, #111);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.bbf-searchbar--icon:hover {
  border-color: #bdbdbd;
  background: #f6f6f6;
}

.bbf-searchbar--icon svg {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .bbf-searchbar__input,
  .bbf-searchbar__button,
  .bbf-searchbar--icon {
    transition: none;
  }
}