/* Główny kontener wyszukiwarki */
.custom-search-container {
    margin: 20px 0;
    padding: 15px;
    background-color: #9BA9D0; /* Zmienione tło */
    border-radius: 8px;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); */ /* Usunięty cień dla płaskiego wyglądu */
}

/* Formularz wyszukiwania */
.custom-search-form {
    display: flex;
    align-items: center; /* Wyśrodkowanie elementów w pionie */
    gap: 0; /* Usunięcie odstępu między inputem a przyciskiem */
    margin-bottom: 20px;
    background-color: white; /* Tło dla całej kapsułki */
    border-radius: 50px; /* Duże zaokrąglenie dla efektu kapsułki */
    padding: 5px 5px 5px 15px; /* Padding: góra, prawo (dla przycisku), dół, lewo (dla tekstu) */
    border: 1px solid #ccc; /* Opcjonalna subtelna ramka dla kapsułki */
}

#custom-search-query {
    flex: 1;
    min-width: 200px; /* Zmniejszone, aby dać miejsce przyciskowi */
    padding: 10px 0; /* Usunięty padding boczny, kontrola przez form */
    border: none; /* Usunięcie ramki inputa */
    border-radius: 0; /* Usunięcie zaokrąglenia inputa */
    font-size: 16px;
    outline: none;
    background-color: transparent; /* Input przezroczysty, tło z .custom-search-form */
    color: #333;
}

#custom-search-query:focus {
    /* Usunięcie box-shadow, focus nie jest już potrzebny na samym inpucie w ten sposób */
    box-shadow: none;
}

.custom-search-button {
    width: 40px; /* Stała szerokość */
    height: 40px; /* Stała wysokość */
    padding: 0; /* Usunięcie paddingu, aby ikona była wyśrodkowana przez flex */
    background-color: #3A4D6F; /* Ciemnoniebieskie/grafitowe tło przycisku */
    border: none; /* Upewnienie się, że nie ma ramki */
    border-radius: 50%; /* Okrągły przycisk */
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex; /* Dla wyśrodkowania ikony */
    align-items: center; /* Wyśrodkowanie ikony w pionie */
    justify-content: center; /* Wyśrodkowanie ikony w poziomie */
}

.custom-search-button svg {
    display: block; /* Dla pewności, aby uniknąć dodatkowych marginesów */
}

.custom-search-button:hover {
    background-color: #2c3e50; /* Ciemniejszy odcień na hover */
    /* Usunięto border-color, bo nie ma ramki */
}

/* Kontener wyników */
.custom-search-results {
    margin-top: 20px;
    background-color: #9BA9D0; /* Zmienione tło */
    color: white; /* Domyślny kolor tekstu na biały */
    padding: 20px;
    border-radius: 8px;
}

/* Nagłówek liczby wyników */
.custom-search-results h3.results-count, /* Zwiększona specyficzność */
.results-count { /* To jest h3 */
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* Biała, półprzezroczysta linia */
    /* font-size: 18px; Usunięte, bo h3 ma już zdefiniowany rozmiar globalnie */
    color: white !important; /* Jawne ustawienie koloru na biały z !important */
}

/* Lista wyników */
.results-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Pojedynczy element wyniku */
.result-item {
    margin-bottom: 15px;
    padding: 10px 0;
    /* Usunięto tło i cień, aby elementy wtapiały się w tło kontenera wyników */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Delikatny separator */
}

.result-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.result-item:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Subtelne podświetlenie na hover */
}

/* Tytuł wyniku */
.result-title { /* To jest h4 */
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 18px;
}

.result-title a {
    color: white; /* Kolor linku na biały */
    text-decoration: none;
    transition: color 0.2s;
}

.result-title a:hover {
    color: #f0f0f0; /* Jaśniejszy odcień na hover */
    text-decoration: underline;
}

/* Fragment treści */
.result-excerpt, .result-excerpt.copy { /* Styl dla .copy jest już w pliku */
    color: white; /* Jawne ustawienie koloru na biały */
    font-size: 14px; /* Zachowanie oryginalnego rozmiaru, chyba że .copy nadpisze */
    line-height: 1.5; /* Zachowanie oryginalnej interlinii, chyba że .copy nadpisze */
}

/* Komunikaty */
.loading-message, .error-message, .no-results {
    padding: 15px;
    border-radius: 4px;
    text-align: center;
    margin-top: 10px;
}

.loading-message {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24; /* Pozostawione kontrastowe dla błędów */
}

.no-results {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Responsywność */
@media (max-width: 600px) {
    .custom-search-form {
        flex-direction: column;
    }
    
    #custom-search-query, .custom-search-button {
        width: 100%;
    }
}

/* Style dostarczone przez klienta */
.copy {
  font-family: 'acumin-pro';
  font-size: 1.125rem;
  font-weight: 400;
  text-transform: none;
  font-style: normal;
  text-decoration: none;
  line-height: 1.7em;
  letter-spacing: normal;
  word-spacing: normal;
}

@media (max-width: 1024px) {
  .copy {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .copy {
    font-size: 0.937rem;
  }
}

h3 {
  font-family: 'Oswald';
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  font-style: normal;
  text-decoration: none;
  line-height: 1.3em;
  letter-spacing: normal;
  word-spacing: normal;
}

@media (max-width: 1024px) {
  h3 {
    font-size: 1.25rem;
  }
}

@media (max-width: 768px) {
  h3 {
    font-size: 1.125rem;
  }
}

/*___*/

@media (max-width: 600px) {
  .custom-search-form {
    flex-direction: row; /* zamiast column — trzymamy input i lupkę obok siebie */
    flex-wrap: nowrap;
  }

  #custom-search-query {
    width: 100%;
  }

  .custom-search-button {
    width: 40px !important;
    height: 40px !important;
    margin-left: 8px;
    flex-shrink: 0;
  }

  .custom-search-button svg {
    width: 20px;
    height: 20px;
  }
}

/* Upewniamy się, że SVG zawsze dobrze się skaluje */
.custom-search-button svg {
  width: 20px;
  height: 20px;
  fill: white;
}

/*────────────────────────────────────────────
  LUPA  –  granat (#233253)  →  hover #9BA9D0
────────────────────────────────────────────*/

/* PRZYCISK */
.custom-search-button{
  background:#233253 !important;            /* granat */
  border:none !important;                   /* zero obramowania */
  box-shadow:none !important;               /* zero cienia */
  width:44px !important; height:44px !important; /* trochę większy krążek */
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  cursor:pointer;
  transition:background-color .25s;
}
.custom-search-button:hover{
  background:#9BA9D0 !important;            /* jaśniejszy błękit */
}

/* IKONA SVG  –  białe linie, brak wypełnienia */
.custom-search-button .search-icon{
  width:26px !important; height:26px !important;  /* wyraźniejsza ikona */
  stroke:#ffffff !important;                      /* biały kontur */
  fill:none !important;                           /* brak wypełnienia */
  stroke-width:1.8 !important;                    /* nieco grubszy kontur */
  stroke-linecap:round; stroke-linejoin:round;
}

/* HOVER  –  ikona pozostaje biała */
.custom-search-button:hover .search-icon{
  stroke:#ffffff !important;
}

/* FOCUS (klawiatura)  –  biały ring, nie czerwony */
.custom-search-button:focus-visible{
  outline:2px solid #ffffff;
  outline-offset:2px;
}

/* MOBILE  –  trzymamy okrąg */
@media (max-width:600px){
  .custom-search-form{flex-direction:row;flex-wrap:nowrap;}
  .custom-search-button{flex-shrink:0;}
}