/* Prezenty (25.10.2026): podpowiedzi pod lupą Luxrio (ciemne okno szukania) i kreator „Znajdź prezent”.
   Od 29.10.2026 kreator jest pod lupą, pod polem tekstu (zakładka „Znajdź prezent” zniknęła z menu).
   Kolor akcentu z motywu (--theme-color); kreator dziedziczy kolory strony, więc działa na jasnym i ciemnym tle.
   Luxrio zeruje obrys fokusu (a:focus, button:focus) i ukrywa radia (display: none), stąd jawne reguły niżej. */

/* Lupa z kreatorem: formularz Luxrio stoi u góry okna, nie na środku, a okno się przewija, bo pole tekstu,
   podpowiedzi i trzy pytania są wyższe niż ekran telefonu. Luxrio stylizuje każdy input i button w tym formularzu
   (pole 70 px z ramką, przycisk lupy w rogu), stąd poprawki dla przycisku kreatora niżej. */
.popup-search-box.ntg-lupa-okno.show {
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* X nad formularzem i przypięty do ekranu: formularz na całą szerokość przykrywał go na telefonie (dotyk trafiał
   w formularz, a Luxrio wtedy zostawia okno otwarte), a po przewinięciu X uciekał z ekranu. */
.popup-search-box.ntg-lupa-okno button.searchClose {
  position: fixed;
  z-index: 2;
}
.popup-search-box form.ntg-lupa {
  top: 0;
  padding: 120px 20px 60px;
  text-align: left;
  transform: translate(-50%, 0) scale(0);
}
.popup-search-box.show form.ntg-lupa {
  transform: translate(-50%, 0) scale(1);
}
/* 16 px, bo Safari na iPhonie powiększa stronę po dotknięciu pola z mniejszą czcionką (Luxrio daje 14 px). */
.popup-search-box form.ntg-lupa input[name="s"] {
  font-size: 16px;
}
.popup-search-box form.ntg-lupa > button[type="submit"] {
  top: 120px;
  right: 33px;
}
.popup-search-box .ntg-szukaj {
  text-align: left;
}
/* Pływający koszyk (Side Cart) leży nad oknem lupy i zasłaniał róg kreatora. */
body:has(.popup-search-box.show) .xoo-wsc-basket {
  display: none;
}
/* Lista bez własnego przewijania: przewija się całe okno lupy. */
.ntg-szukaj__lista {
  margin-top: 10px;
  overflow: hidden;
  background: #101318;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
}
.ntg-szukaj__lista:empty {
  display: none;
}
.ntg-szukaj__rozpoznane,
.ntg-szukaj__brak {
  margin: 0;
  padding: 14px 24px 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
}
.ntg-szukaj__brak {
  padding-bottom: 14px;
}
.ntg-szukaj__produkt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  color: #fff;
  text-decoration: none;
}
.ntg-szukaj__produkt:hover {
  color: #fff;
  background: rgba(255, 255, 255, .07);
}
.ntg-szukaj__produkt img {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: #181c23;
  border-radius: 8px;
}
.ntg-szukaj__opis {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ntg-szukaj__nazwa {
  font-size: 15px;
  line-height: 1.3;
}
.ntg-szukaj__cena {
  font-size: 13px;
  color: var(--theme-color);
}

/* Fokus z klawiatury. Podpowiedzi: ujemny odstęp, bo lista ma zaokrąglone, przycięte rogi. Lupa, X i „Pokaż
   prezenty” mają tło w kolorze akcentu albo stoją na ciemnym tle, więc obrys biały i na zewnątrz. */
.ntg-szukaj a:focus-visible,
.ntg-prezenty-info a:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: -2px;
}
.searchBoxTggler:focus-visible,
.popup-search-box button.searchClose:focus-visible,
.ntg-kreator .ntg-kreator__pokaz:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Linijka nad wynikami sklepu */
.ntg-prezenty-info {
  margin: 0 0 24px;
  padding: 14px 20px;
  background: rgba(128, 128, 128, .12);
  border-radius: 8px;
}
.ntg-prezenty-info a {
  color: var(--theme-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Kreator */
.ntg-kreator {
  margin-top: 36px;
}
.ntg-kreator__grupa {
  margin: 0 0 40px;
  padding: 0;
  border: 0;
}
.ntg-kreator__grupa legend {
  margin-bottom: 18px;
  font-family: var(--title-font, inherit);
  font-size: 28px;
  line-height: 1.2;
}
.ntg-kreator__opcje {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ntg-kreator__opcja {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.ntg-kreator .ntg-kreator__opcja input[type="radio"] {
  display: inline-block;
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
/* Ramka z koloru tekstu (40%): na ciemnej stronie ok. 3:1 z tłem, na jasnej też widoczna. */
.ntg-kreator__opcja span {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 40px;
  transition: border-color .2s, box-shadow .2s;
}
.ntg-kreator__opcja:hover span {
  border-color: currentColor;
}
.ntg-kreator__opcja input:checked + span {
  border-color: var(--theme-color);
  box-shadow: inset 0 0 0 1px var(--theme-color);
}
.ntg-kreator__opcja input:checked + span::before {
  content: "✓ ";
  color: var(--theme-color);
}
.ntg-kreator__opcja input:focus-visible + span {
  outline: 2px solid var(--theme-color);
  outline-offset: 3px;
}
.ntg-kreator__licznik {
  margin: 0 0 16px;
  font-size: 18px;
}
.ntg-kreator__pokaz[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}
.ntg-kreator__pokaz[aria-disabled="true"]::before,
.ntg-kreator__pokaz[aria-disabled="true"]::after {
  display: none;
}

/* Kreator pod lupą: ciemne okno, mniejsze nagłówki pytań, przycisk zwykły (nie lupa Luxrio w rogu pola). */
.popup-search-box .ntg-kreator {
  margin-top: 30px;
  color: #fff;
}
.popup-search-box .ntg-kreator__grupa {
  margin-bottom: 24px;
}
.popup-search-box .ntg-kreator__grupa legend {
  margin-bottom: 12px;
  font-size: 20px;
  color: #fff;
}
.popup-search-box .ntg-kreator__opcja span {
  padding: 8px 16px;
  font-size: 14px;
  border-color: rgba(255, 255, 255, .35);
}
.popup-search-box .ntg-kreator__licznik {
  font-size: 16px;
}
.popup-search-box form .ntg-kreator .ntg-kreator__pokaz {
  position: relative;
  top: auto;
  right: auto;
  width: auto;
  height: auto;
  font-size: 15px;
  color: var(--white-color);
  background-color: var(--theme-color);
  transform: none;
}
/* Najechanie .vs-btn zakrywa tło ciemną warstwą (::before, ::after), która na czarnym oknie znikała z tekstem. */
.popup-search-box .ntg-kreator .ntg-kreator__pokaz::before,
.popup-search-box .ntg-kreator .ntg-kreator__pokaz::after {
  display: none;
}
.popup-search-box form .ntg-kreator .ntg-kreator__pokaz:hover {
  transform: none;
  filter: brightness(1.12);
}

/* Lupa także na telefonie: Luxrio ją tam ukrywa (elementor-hidden-mobile), a to jedyne wejście do kreatora. */
@media (max-width: 767px) {
  .elementor .elementor-widget-luxriosearch.elementor-hidden-mobile {
    display: block;
  }
  /* Lupa, koszyk z kwotą i menu w jednym rzędzie (bez tego menu spadało do drugiej linii nagłówka). Odstęp przed
     koszykiem mniejszy niż 15 px z Elementora (jego reguła ma klasę elementu, stąd dłuższy selektor). */
  .e-con:has(> .elementor-widget-luxriosearch) {
    flex-wrap: nowrap;
  }
  .elementor .elementor-element.elementor-widget-luxriosearch + .elementor-element.elementor-widget-shortcode {
    margin-left: 12px;
  }
  .popup-search-box.ntg-lupa-okno button.searchClose {
    top: 24px;
    right: 20px;
    width: 48px;
    height: 48px;
    line-height: 48px;
    font-size: 24px;
  }
  .popup-search-box form.ntg-lupa {
    padding-top: 88px;
  }
  .popup-search-box form.ntg-lupa > button[type="submit"] {
    top: 88px;
  }
}

/* Pole tekstu na stronie kreatora */
.ntg-kreator__tekst {
  width: 100%;
  height: 60px;
  margin-top: 24px;
  padding: 0 24px;
  font-size: 16px;
  color: inherit;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 40px;
}
.ntg-kreator__tekst:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 2px;
}