/* WorkTrip – inteligentne wyszukiwanie (smart-search.css)
   Wszystkie klasy mają prefiks ss-, więc nie kolidują z Twoimi stylami.
   Kolory zmieniasz w zmiennych poniżej. */

.ss-wrap {
  --ss-accent: #0d6efd;   /* kolor ramki przy focusie */
  --ss-tint: #e7f0ff;     /* tło chipów i zaznaczonej podpowiedzi */
  --ss-bg: #fff;          /* tło pola i panelu */
  --ss-fg: #212529;       /* kolor tekstu */
  --ss-mut: #6c757d;      /* kolor podpisów (np. „państwo”) */
  --ss-bd: #dee2e6;       /* kolor ramek */
  position: relative;
  z-index: 20;            /* panel ma być nad kolejnymi kolumnami filtrów */
}

/* pole: chipy + Twój input + krzyżyk */
.ss-field {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 46px; padding: 6px 46px 6px 10px;
  border: 1px solid var(--ss-bd); border-radius: .5rem; background: var(--ss-bg);
  scroll-margin-top: 12px; /* margines, gdy pole jest podsuwane do góry nad klawiaturę */
}
.ss-field:focus-within { border-color: var(--ss-accent); box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .2); }
.ss-tok { display: contents; }

/* Twój <input id="search" class="form-control"> zostaje, ale traci własną ramkę (ramkę ma .ss-field) */
.ss-field input {
  flex: 1 1 8ch; min-width: 8ch; width: auto; height: auto; margin: 0; padding: 6px 2px;
  border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; color: var(--ss-fg);
}
.ss-field input:focus { border: 0; box-shadow: none; outline: 0; }

/* krzyżyk: usuwa tylko filtry wybrane z wyszukiwarki */
.ss-clr {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ss-tint); color: var(--ss-fg); font-size: 1.4rem; line-height: 1; cursor: pointer;
}

/* przyciemnione tło za panelem (zamyka panel po kliknięciu) */
.ss-bd {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
  background: rgba(0, 0, 0, .45); animation: ss-fd .2s;
}

/* panel podpowiedzi wysuwany z inputa; wysokość dopasowuje skrypt (nad klawiaturą) */
.ss-sg {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1;
  max-height: 60vh; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--ss-bg); border: 1px solid var(--ss-bd); border-radius: .75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); transform-origin: top; animation: ss-sl .18s ease-out;
}
.ss-it {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  padding: 10px 12px; border-bottom: 1px solid var(--ss-bd); cursor: pointer;
}
.ss-it:last-child { border-bottom: 0; }
.ss-it.on { background: var(--ss-tint); }
@media (hover: hover) { .ss-it:hover { background: var(--ss-tint); } } /* na telefonie bez „lepkiego” hovera */

/* chipy */
.ss-chip {
  display: inline-flex; flex-direction: column; padding: 3px 8px; border-radius: 8px;
  background: var(--ss-tint); color: var(--ss-fg); line-height: 1.2;
}
.ss-chip b { font-weight: 600; font-size: .9rem; }
.ss-chip i { font-style: normal; font-size: .7rem; color: var(--ss-mut); }
.ss-pl { color: var(--ss-mut); }

@keyframes ss-sl { from { opacity: 0; transform: translateY(-8px) scaleY(.94); } }
@keyframes ss-fd { from { opacity: 0; } }