/**
 * Cennik - warstwa prezentacji.
 *
 * Kroj i rozmiar pisma sa dziedziczone po stronie, kolory po zestawie globalnym
 * Elementora (wartosci po przecinku to zapasowe, gdy shortcode trafi poza zestaw).
 *
 * Bez container queries: `container-type: inline-size` dawal 188 px pustki pod
 * widgetem Elementora ponizej 620 px (widget 1205 px przy tresci 1017 px, znika
 * po zdjeciu kontenera). Stad @media - kosztem waskiego panelu przy szerokim oknie.
 */

.sth-cennik {
  /* --- Kolory: zestaw globalny Elementora --- */
  --sth-tekst: var(--e-global-color-text, #26201e);
  --sth-tekst-drugi: var(--e-global-color-b6e9a58, #6b6668);
  --sth-terakota: var(--e-global-color-secondary, #e59974);
  --sth-terakota-ciemna: var(--e-global-color-cfe4d7a, #a8665f);
  --sth-krem: var(--e-global-color-accent, #f8f4e9);
  --sth-bialy: var(--e-global-color-deb57c6, #fff);

  --sth-linia: color-mix(in srgb, var(--sth-tekst) 12%, transparent);
  --sth-tlo-tresci: #fefefe;

  /* --- Skala odstepow (4/8 px) --- */
  --sth-1: 0.25rem;
  --sth-2: 0.5rem;
  --sth-3: 0.75rem;
  --sth-4: 1rem;
  --sth-5: 1.25rem;
  --sth-6: 1.5rem;
  --sth-8: 2rem;

  /* --- Skala pisma: wzgledna, wiec skaluje sie z kontekstem --- */
  --sth-drobny: 0.8125em;
  --sth-maly: 0.875em;
  --sth-duzy: 1.125em;

  /* Poziomy odstep rosnie z szerokoscia okna, ale zawsze w krokach skali. */
  --sth-x: clamp(var(--sth-4), 3.5vw, var(--sth-8));
  --sth-y: clamp(var(--sth-3), 2vw, var(--sth-5));

  /* --- Ksztalt --- */
  --sth-promien: 14px;
  --sth-promien-pigulka: 999px;

  /* --- Czasy przejsc --- */
  --sth-ruch: 0.15s ease;
  --sth-ruch-wolny: 0.2s ease;
  --sth-ruch-panel: 0.22s ease;

  /* Px, nie rem: strona ma html { font-size: 62.5% } (uploads/custom-css-js/17.css). */
  --sth-dotyk: 44px;

  display: flex;
  flex-direction: column;
  gap: var(--sth-3);
  color: var(--sth-tekst);
  line-height: 1.5;
}

/* --- Przyciski: odciecie od stylow globalnych --------------------------- */

/**
 * `.elementor-kit-6 button` (0,1,1) wygrywa z pojedyncza klasa (0,1,0) i narzuca
 * kazdemu przyciskowi kremowe tlo, wersaliki i prostokat. Stad adresowanie
 * dwuczlonowe (0,2,0) zamiast !important. Ponizej tylko zerowanie zestawu -
 * wyglad kazdego przycisku jest w jego wlasnej sekcji.
 */
.sth-cennik .sth-cennik__umow,
.sth-cennik .sth-cennik__pomoc,
.sth-cennik .sth-cennik__wyczysc,
.sth-cennik .sth-cennik__zamknij {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* --- Wyszukiwarka ------------------------------------------------------- */

.sth-cennik__szukajka {
  border-radius: var(--sth-promien-pigulka);
  background: var(--sth-bialy);
  box-shadow: 0 1.25rem 5rem -1rem rgba(0, 0, 30, 0.5);
  transition: box-shadow var(--sth-ruch);
  /* Element flex - z-index dziala bez position. */
  z-index: 3;
  margin-bottom: 0.5em;
}

.sth-cennik__szukajka input[type="search"] {
  border: none !important;
}

.sth-cennik__etykieta {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sth-cennik__pole {
  display: flex;
  align-items: center;
  gap: var(--sth-4);
  padding: 0.4em 1em;
  border-radius: var(--sth-promien-pigulka);
  background: var(--sth-bialy);
  transition: box-shadow var(--sth-ruch);
}

.sth-cennik__pole:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sth-terakota) 45%, transparent);
}

.sth-cennik__pole .sth-cennik__ikona {
  inline-size: 1.25em;
  block-size: 1.25em;
  color: var(--sth-tekst-drugi);
}

.sth-cennik__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 3.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.sth-cennik__input::placeholder {
  color: var(--sth-tekst-drugi);
  opacity: 1;
}

.sth-cennik__input:focus {
  outline: none;
}

/* Krzyzyk przegladarki dubluje nasz przycisk czyszczenia. */
.sth-cennik__input::-webkit-search-cancel-button {
  display: none;
}

.sth-cennik .sth-cennik__wyczysc {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--sth-8);
  block-size: var(--sth-8);
  border-radius: 50%;
  background: color-mix(in srgb, var(--sth-tekst) 8%, transparent);
  color: var(--sth-tekst);
}

.sth-cennik .sth-cennik__wyczysc:hover,
.sth-cennik .sth-cennik__wyczysc:focus-visible {
  background: color-mix(in srgb, var(--sth-tekst) 16%, transparent);
}

.sth-cennik__wynik {
  margin: 0;
  padding: 0;
  color: var(--sth-tekst-drugi);
  font-size: var(--sth-maly);
}

.sth-cennik__wynik:not(:empty) {
  padding: var(--sth-2) var(--sth-6) 1em;
}

.sth-cennik__wynik-liczba {
  color: var(--sth-terakota);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}

/* --- Brak wynikow ------------------------------------------------------- */

.sth-cennik__pusto {
  padding: var(--sth-8) var(--sth-x);
  border-radius: var(--sth-promien);
  background: var(--sth-bialy);
  text-align: center;
}

.sth-cennik__pusto-tytul {
  margin: 0 0 var(--sth-2);
  font-size: var(--sth-duzy);
  font-weight: 600;
}

.sth-cennik__pusto-tresc {
  margin: 0 auto var(--sth-5);
  max-inline-size: 48ch;
  color: var(--sth-tekst-drugi);
}

.sth-cennik__pusto-tel {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-block-size: var(--sth-dotyk);
  padding: var(--sth-3) var(--sth-6);
  border-radius: var(--sth-promien-pigulka);
  background: #e59974;
  color: var(--sth-bialy) !important;
  font-size: var(--sth-maly);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sth-cennik__pusto-tel:hover,
.sth-cennik__pusto-tel:focus-visible {
  background: var(--sth-terakota-ciemna);
  color: var(--sth-bialy);
}

.sth-cennik__lista-kategorii {
  display: flex;
  flex-direction: column;
  gap: var(--sth-3);
}

/* Filtrowanie ukrywa elementy atrybutem hidden - musi wygrac z display flex. */
.sth-cennik [hidden] {
  display: none !important;
}

/* --- Kategoria ---------------------------------------------------------- */

.sth-cennik__kategoria {
  border-radius: var(--sth-promien);
  overflow: hidden;
  background: var(--sth-bialy);
}

.sth-cennik__naglowek {
  display: flex;
  align-items: center;
  gap: var(--sth-4);
  min-block-size: var(--sth-dotyk);
  padding: 20px;
  background: var(--sth-krem);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  transition:
    background-color var(--sth-ruch-wolny),
    color var(--sth-ruch-wolny);
}

.sth-cennik__naglowek::-webkit-details-marker {
  display: none;
}

.sth-cennik__kategoria[open] > .sth-cennik__naglowek {
  background: var(--sth-terakota);
  color: var(--sth-bialy);
}

.sth-cennik__naglowek:hover {
  background: color-mix(in srgb, var(--sth-terakota) 30%, var(--sth-krem));
}

.sth-cennik__kategoria[open] > .sth-cennik__naglowek:hover {
  background: var(--sth-terakota-ciemna);
}

.sth-cennik__naglowek:focus-visible {
  outline: 3px solid var(--sth-terakota-ciemna);
  outline-offset: -3px;
}

.sth-cennik__tytul {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.sth-cennik__badge {
  flex: 0 0 auto;
  padding: var(--sth-1) var(--sth-3);
  border-radius: var(--sth-promien-pigulka);
  background: var(--sth-terakota);
  color: var(--sth-bialy);
  font-size: var(--sth-drobny);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Na otwartym (terakotowym) naglowku plakietka musi odciac sie od tla. */
.sth-cennik__kategoria[open] > .sth-cennik__naglowek .sth-cennik__badge {
  background: color-mix(in srgb, var(--sth-bialy) 26%, transparent);
}

.sth-cennik__licznik {
  flex: 0 0 auto;
  font-size: var(--sth-maly);
  font-weight: 400;
  opacity: 0.6;
  font-variant-numeric: lining-nums tabular-nums;
}

.sth-cennik__naglowek::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--sth-ruch-wolny);
}

.sth-cennik__kategoria[open] > .sth-cennik__naglowek::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* --- Sekcje ------------------------------------------------------------- */

.sth-cennik__sekcja-naglowek {
  display: flex;
  align-items: center;
  gap: var(--sth-4);
  min-block-size: var(--sth-dotyk);
  margin-bottom: var(--sth-1);
  padding: var(--sth-3) var(--sth-5);
  background: var(--sth-krem);
  cursor: pointer;
  list-style: none;
}

.sth-cennik__sekcja-naglowek::-webkit-details-marker {
  display: none;
}

.sth-cennik__sekcja-naglowek:hover .sth-cennik__sekcja-tytul {
  color: var(--sth-terakota-ciemna);
}

.sth-cennik__sekcja-naglowek:focus-visible {
  outline: 3px solid var(--sth-terakota-ciemna);
  outline-offset: -3px;
}

/* Dwuczlonowo, bo zestaw globalny stylizuje kazde h3 - jak przy przyciskach. */
.sth-cennik .sth-cennik__sekcja-tytul {
  flex: 1 1 auto;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  color: var(--sth-tekst);
  font-size: var(--sth-duzy);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  transition: color var(--sth-ruch);
}

.sth-cennik__sekcja-naglowek::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--sth-tekst-drugi);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--sth-ruch-wolny);
}

.sth-cennik__sekcja[open] > .sth-cennik__sekcja-naglowek::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.sth-cennik__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Pozycja ------------------------------------------------------------ */

.sth-cennik__tresc {
  background-color: var(--sth-tlo-tresci);
}

/* Linia tylko miedzy wierszami. Sekcje rozdziela juz ich naglowek. */
.sth-cennik__pozycja + .sth-cennik__pozycja {
  border-top: 1px solid var(--sth-linia);
}

.sth-cennik__wiersz {
  display: flex;
  align-items: center;
  gap: var(--sth-2) var(--sth-4);
  min-block-size: var(--sth-dotyk);
  padding: var(--sth-y) var(--sth-x);
  transition: background-color var(--sth-ruch);
}

.sth-cennik__pozycja:hover .sth-cennik__wiersz {
  background: color-mix(in srgb, var(--sth-terakota) 8%, transparent);
}

.sth-cennik__nazwa {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.sth-cennik__uwaga {
  flex: 0 1 auto;
  min-inline-size: 0;
  color: var(--sth-tekst-drugi);
  font-size: var(--sth-drobny);
  font-style: italic;
  overflow-wrap: anywhere;
}

.sth-cennik__cena {
  flex: 0 0 auto;
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
  /* Kroj tresci ma domyslnie cyfry nautyczne - kolumna cen by sie nie wyrownala. */
  font-variant-numeric: lining-nums tabular-nums;
}

.sth-cennik__srodtytul {
  padding: var(--sth-4) var(--sth-x) var(--sth-1);
  color: var(--sth-tekst-drugi);
  font-size: var(--sth-drobny);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Ikony -------------------------------------------------------------- */

/* Rozmiar bazowy; kazdy kontekst nadpisuje go u siebie. */
.sth-cennik__ikona {
  display: block;
  flex: none;
  inline-size: 26px;
  block-size: 26px;
}

/**
 * W linii tekstu, tuz za nazwa - przy zawijaniu nie odrywa sie od tresci.
 * Wyrownanie przez vertical-align, nie translatem: transformacja nie wplywa
 * na linie pisma, wiec przy innym stopniu pisma ikona odjezdzala.
 */
.sth-cennik .sth-cennik__pomoc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  inline-size: 24px; /* minimum pola dotyku wg WCAG 2.5.8 */
  block-size: 24px;
  margin-inline-start: var(--sth-2);
  border-radius: 50%;
  background: transparent;
  color: var(--sth-terakota-ciemna);
  cursor: help;
  transition:
    color var(--sth-ruch),
    background-color var(--sth-ruch);
}

.sth-cennik .sth-cennik__pomoc .sth-cennik__ikona {
  inline-size: 16px;
  block-size: 16px;
}

.sth-cennik .sth-cennik__pomoc:hover,
.sth-cennik .sth-cennik__pomoc:focus-visible {
  background: var(--sth-terakota-ciemna);
  color: var(--sth-bialy);
}

.sth-cennik .sth-cennik__pomoc:focus-visible {
  outline: 2px solid var(--sth-tekst);
  outline-offset: 2px;
}

/* --- Dymek -------------------------------------------------------------- */

.sth-cennik__dymek {
  max-inline-size: min(22rem, calc(100vw - var(--sth-6)));
  margin: 0;
  padding: var(--sth-4);
  border: 0;
  border-radius: var(--sth-promien);
  background: var(--sth-bialy);
  color: var(--sth-tekst);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--sth-tekst) 22%, transparent);
  font-size: var(--sth-maly);
  line-height: 1.5;
}

.sth-cennik__dymek::backdrop {
  background: transparent;
}

.sth-cennik__dymek-tytul {
  margin: 0 0 var(--sth-1);
  font-weight: 600;
}

.sth-cennik__dymek-tresc {
  margin: 0;
  color: var(--sth-tekst-drugi);
}

.sth-cennik__dymek-link {
  display: inline-block;
  margin-top: var(--sth-3);
  color: var(--sth-terakota-ciemna);
  font-weight: 600;
}

/* --- Przycisk "Umów" ---------------------------------------------------- */

/* Rozmiar w px, nie em: w waskim kontenerze zszedlby ponizej minimum dotykowego. */
.sth-cennik .sth-cennik__umow {
  position: relative; /* kotwica dla etykiety czytanej przez czytniki ekranu */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: var(--sth-dotyk);
  block-size: var(--sth-dotyk);
  border: 1.5px solid var(--sth-terakota);
  border-radius: 50%;
  /* Wlasne, biale - nie kremowe tlo przyciskow z zestawu globalnego. */
  background: var(--sth-bialy);
  color: var(--sth-terakota-ciemna);
  transition:
    background-color var(--sth-ruch),
    color var(--sth-ruch);
}

.sth-cennik .sth-cennik__umow .sth-cennik__ikona {
  inline-size: 20px;
  block-size: 20px;
}

.sth-cennik__umow-tekst {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sth-cennik .sth-cennik__umow:hover,
.sth-cennik .sth-cennik__umow:focus-visible,
.sth-cennik .sth-cennik__umow[aria-expanded="true"] {
  background: var(--sth-terakota);
  color: var(--sth-bialy);
}

.sth-cennik .sth-cennik__umow:focus-visible {
  outline: 3px solid var(--sth-tekst);
  outline-offset: 2px;
}

/* --- Panel rezerwacji --------------------------------------------------- */

/* 0fr -> 1fr animuje sie, auto nie. */
.sth-cennik__rezerwacja {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sth-ruch-panel);
}

.sth-cennik__rezerwacja[data-sth-otwarty] {
  grid-template-rows: 1fr;
}

.sth-cennik__rezerwacja-wnetrze {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-inline: var(--sth-x);
}

.sth-cennik__rezerwacja-tytul {
  margin: 0;
  padding-block: 0 var(--sth-3);
  color: var(--sth-tekst-drugi);
  font-size: var(--sth-maly);
}

.sth-cennik__opcje {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sth-2);
  margin: 0 0 var(--sth-3);
  padding: 0;
  list-style: none;
}

.sth-cennik__opcja {
  display: flex;
  align-items: center;
  gap: var(--sth-3);
  block-size: 100%;
  min-block-size: 3.5rem;
  padding: var(--sth-2) var(--sth-4);
  border: 1px solid var(--sth-linia);
  border-radius: 10px;
  background: var(--sth-bialy);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--sth-ruch),
    background-color var(--sth-ruch);
}

.sth-cennik__opcja:hover,
.sth-cennik__opcja:focus-visible {
  border-color: var(--sth-terakota);
  background: color-mix(in srgb, var(--sth-terakota) 10%, var(--sth-bialy));
}

.sth-cennik__opcja .sth-cennik__ikona {
  inline-size: 1.25em;
  block-size: 1.25em;
  color: var(--sth-terakota-ciemna);
}

.sth-cennik__opcja span {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.sth-cennik__opcja strong {
  font-weight: 600;
}

.sth-cennik__opcja em {
  color: var(--sth-tekst-drugi);
  font-size: var(--sth-drobny);
  font-style: normal;
}

/* Dwuczlonowo (0,2,0), inaczej blok zerujacy zestaw skasowalby ten padding. */
.sth-cennik .sth-cennik__zamknij {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--sth-dotyk);
  margin: 0 0 var(--sth-4);
  padding: var(--sth-2) var(--sth-6);
  border: 1.5px solid var(--sth-linia);
  border-radius: var(--sth-promien-pigulka);
  background: var(--sth-bialy);
  color: var(--sth-tekst-drugi);
  font-size: var(--sth-maly);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    border-color var(--sth-ruch),
    background-color var(--sth-ruch),
    color var(--sth-ruch);
}

.sth-cennik .sth-cennik__zamknij:hover,
.sth-cennik .sth-cennik__zamknij:focus-visible {
  border-color: var(--sth-terakota);
  background: color-mix(in srgb, var(--sth-terakota) 10%, var(--sth-bialy));
  color: var(--sth-tekst);
}

.sth-cennik .sth-cennik__zamknij:focus-visible {
  outline: 3px solid var(--sth-tekst);
  outline-offset: 2px;
}

/* --- Waskie okno: telefon ----------------------------------------------- */

@media (max-width: 620px) {
  /* Nazwa zawija sie wewnatrz swojej kolumny, zamiast spychac cene nizej. */
  .sth-cennik__wiersz {
    flex-wrap: wrap;
    gap: var(--sth-2) var(--sth-3);
  }

  /* Niska baza decyduje, kiedy "Umow" spadnie do drugiej linii; grow i tak rozciaga. */
  .sth-cennik__nazwa {
    flex: 1 1 6rem;
  }

  /* Uwaga to doprecyzowanie ceny, nie czlon wiersza - schodzi pod spod. */
  .sth-cennik__uwaga {
    order: 1;
    flex: 1 1 100%;
  }

  .sth-cennik__pole {
    gap: var(--sth-3);
    padding-inline: var(--sth-4);
  }

  .sth-cennik__input {
    min-block-size: 3rem;
  }

  .sth-cennik__wynik:not(:empty) {
    padding-inline: var(--sth-4);
  }

  .sth-cennik__opcje {
    grid-template-columns: 1fr;
  }

  .sth-cennik__ikona {
    inline-size: 16px;
    block-size: 16px;
  }
}

/* --- Preferencje uzytkownika -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sth-cennik *,
  .sth-cennik *::after {
    transition: none !important;
  }
}