/* ===================================================
   SEARCH SCOPE — IKB / External / Both
   Agent-only control rendered by SearchScope_Saily.js
   =================================================== */

.search-scope {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  background: var(--color-gray-100, #f4f5f8);
  border: 1px solid var(--color-gray-200, rgba(0, 0, 0, 0.1));
  border-radius: 999px;
}

.search-scope__option {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-text, inherit);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-gray-600, #56616c);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.search-scope__option:hover {
  color: inherit;
}

.search-scope__option.is-selected {
  background: var(--color-primary, #178a9e);
  color: var(--color-primary-inverse, #ffffff);
}

.search-scope__option:focus-visible {
  outline: 2px solid var(--color-primary, #178a9e);
  outline-offset: 2px;
}

/* --- placement ---------------------------------------------------------- */

/* Home page hero: centred under the search field, on the hero background. */
.hero .search-scope {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 0 1rem;
}

.hero .text-center .search-scope,
.hero .search-scope--centered {
  margin-left: auto;
  margin-right: auto;
}

/* Search results page: above the result list. */
.search-scope--results {
  margin: 0 0 1.5rem;
}

/* Beside the smaller search fields in the header and the page subheaders. */
.search-scope--compact {
  gap: 1px;
  padding: 2px;
  margin: 0 0 1rem;
  align-self: center;
}

.search-scope--compact .search-scope__option {
  padding: 4px 10px;
  font-size: 12px;
}

/* In the navbar the control keeps its own light chip rather than inheriting the
   header colours, so it stays legible whatever the header is set to. Wide
   margins match the search field inside the mobile menu; on desktop the navbar
   sets its own spacing. */
.search-scope--header {
  margin: 0 1rem 1rem;
}

@media (min-width: 992px) {
  .search-scope--header {
    margin: 0 0.5rem;
  }
}

@media (max-width: 575px) {
  .search-scope__option {
    padding: 6px 10px;
    font-size: 13px;
  }
}

/* --- scoped suggestions dropdown ---------------------------------------- */

/* While a scope is active the native instant search dropdown is replaced by
   our own, which can be filled from the Search API. */
body.search-scope-filtered zd-autocomplete,
body.search-scope-filtered zd-autocomplete-multibrand {
  display: none !important;
}

.search-scope-suggestions {
  position: fixed;
  z-index: 10001;
  max-height: 60vh;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--color-gray-200, rgba(0, 0, 0, 0.12));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  font-family: var(--font-text, inherit);
}

.search-scope-suggestions[hidden] {
  display: none;
}

.search-scope-suggestions__status {
  margin: 0;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-gray-600, #56616c);
}

.search-scope-suggestions__status[hidden] {
  display: none;
}

.search-scope-suggestions__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.search-scope-suggestions__item {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}

.search-scope-suggestions__item a {
  display: block;
  padding: 10px 16px;
  color: inherit;
  text-decoration: none;
}

.search-scope-suggestions__item.is-active,
.search-scope-suggestions__item:hover {
  background: var(--color-gray-100, #f4f5f8);
}

.search-scope-suggestions__item--all {
  margin-top: 4px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-gray-200, rgba(0, 0, 0, 0.1));
  color: var(--color-primary, #178a9e);
  font-weight: 600;
}

/* --- results page ------------------------------------------------------- */

.search-scope-empty,
.search-scope-loading {
  margin-bottom: 1.5rem;
}

.search-scope-empty a {
  color: var(--color-primary, #178a9e);
}

.search-scope-pagination .pagination-list {
  margin: 0;
  list-style: none;
}

.search-scope-pagination__status {
  display: inline-block;
  padding: 0.5em 1em;
  font-size: 14px;
  color: var(--color-gray-600, #56616c);
}