/* pysiecsearch - okienko wyszukiwania. Namespace .pysiec-search*, zero zależności. */

.pysiec-search {
  --pysiec-search-bg: #fff;
  --pysiec-search-border: var(--pysiec-line-22, rgba(62, 47, 35, .22));
  --pysiec-search-text: var(--pysiec-text, #1a1a18);
  --pysiec-search-accent: var(--pysiec-brand, #b08858);
  --pysiec-search-muted: #8a8172;

  position: relative;
  /* max-width:32rem USUNIĘTE - makieta (linia 46: flex:1 1 200px) nie ogranicza
     paska wyszukiwania, ma rosnąć i wypełniać całą dostępną przestrzeń między logo
     a przyciskami Konto/Koszyk. Limit dawał wąski pasek na szerokich ekranach,
     niezgodny z makietą (zgłoszone przez użytkownika zrzutem ekranu, sesja
     2026-09-17). */
  flex: 1 1 200px;
}

.pysiec-search__form {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--pysiec-search-bg);
  border: 1px solid var(--pysiec-search-border);
  border-radius: var(--pysiec-radius-pill, 999px);
  padding: 0 0.375rem 0 0.875rem;
  height: 2.75rem;
}

.pysiec-search__form:focus-within {
  border-color: var(--pysiec-search-accent);
}

.pysiec-search__icon {
  color: var(--pysiec-search-muted);
  font-size: 1.25rem;
  flex: 0 0 auto;
}

.pysiec-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  padding: 0 0.5rem;
  font: inherit;
  color: var(--pysiec-search-text);
}

.pysiec-search__input::placeholder {
  color: var(--pysiec-search-muted);
}

.pysiec-search__clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0.25rem;
  color: var(--pysiec-search-muted);
  cursor: pointer;
}

.pysiec-search__clear[hidden] {
  display: none;
}

.pysiec-search__clear:hover,
.pysiec-search__clear:focus-visible {
  color: var(--pysiec-search-accent);
}

.pysiec-search__results {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  z-index: 1000;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--pysiec-line-20, rgba(62, 47, 35, .2));
  border-radius: var(--pysiec-radius-xl, 22px);
  box-shadow: var(--pysiec-shadow-panel, 0 24px 48px rgba(62, 47, 35, .16));
  max-height: 24rem;
  overflow-y: auto;
}

.pysiec-search__results[hidden] {
  display: none;
}

.pysiec-search__result-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: var(--pysiec-radius-sm, 10px);
  text-decoration: none;
  color: var(--pysiec-search-text);
}

.pysiec-search__result.is-active .pysiec-search__result-link,
.pysiec-search__result-link:hover,
.pysiec-search__result-link:focus-visible {
  /* Poprawka sesji 2026-09-15: było var(--pysiec-search-bg) = #fff, taki sam jak tło
     panelu - hover był niewidoczny. */
  background: var(--pysiec-line-12, rgba(62, 47, 35, .12));
  outline: none;
}

.pysiec-search__result-image {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 0.375rem;
  background: #f2ede1;
}

.pysiec-search__result-name {
  font-size: 0.875rem;
}

@media (max-width: 767.98px) {
  .pysiec-search {
    max-width: none;
  }
}