/* =========================================================================
   oferta.css - warstwa TYLKO dla subdomeny ofertowej.
   Zasada: nie ruszamy plików wspólnych (tokens/base/utilities/components).
   Tu siedzi wyłącznie to, czego strona główna nie ma: nagłówek bez menu,
   przyklejone CTA na telefonie i drobne poprawki układu landingu.
   ========================================================================= */

/* --- Nagłówek ofertowy: logo z lewej, telefon z prawej, bez nawigacji ---
   Na stronie głównej .site-header__cta jest ukryte poniżej 1024px, bo tam
   rolę CTA przejmuje menu. Tutaj menu nie ma, więc przycisk musi być zawsze. */
.site-header--oferta .site-header__inner {
  justify-content: space-between;
  gap: 1rem;
  height: 4.5rem;
}

.site-header--oferta .site-header__logo img {
  height: 2.25rem;
  width: auto;
}

.site-header--oferta .site-header__cta {
  display: inline-flex;
  font-size: 0.875rem;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .site-header--oferta .site-header__inner { height: 6rem; }
  .site-header--oferta .site-header__logo img { height: 3rem; }
  .site-header--oferta .site-header__cta { font-size: 1rem; padding-inline: 1.5rem; }
}

/* --- Kotwica formularza: sticky header nie może zasłonić pierwszego pola --- */
#formularz {
  scroll-margin-top: 5.5rem;
}
@media (min-width: 768px) {
  #formularz { scroll-margin-top: 7rem; }
}

/* =========================================================================
   Listy wyboru
   Samo pole <select> stylizuje już components.css (ukryta natywna strzałka
   i własny chevron). Systemowa zostaje ROZWIJANA LISTA - widget systemu
   operacyjnego, którego CSS nie dotyka. Dlatego js/select.js buduje własną
   listę na bazie <select>, a poniższe reguły ją ubierają.
   Na urządzeniach dotykowych skrypt nie działa - tam natywny, pełnoekranowy
   wybór jest wygodniejszy niż cokolwiek własnego.
   ========================================================================= */

.select-ui {
  position: relative;
}

/* Oryginalny <select> zostaje w formularzu (wartość, walidacja, wysyłka),
   ale znika z widoku. Nie używamy display:none - pole musi dać się „sfokusować"
   przez forms.js, który przy błędzie woła field.focus(). */
.select-ui__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Przycisk udaje pole formularza - dziedziczy wygląd .form-field__input,
   dokłada tylko układ tekstu i chevron po prawej. */
.select-ui__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding-right: 3rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310343A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  background-size: 1.1rem;
}

.select-ui__button[aria-expanded="true"] {
  border-color: var(--color-czerwony);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-czerwony) 25%, transparent);
}

/* Dopóki rodzic nie wybrał opcji, tekst czyta się jak podpowiedź,
   tak samo jak ::placeholder w polach tekstowych. */
.select-ui__button.is-placeholder .select-ui__label {
  color: var(--color-szary);
}

.select-ui__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-ui__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  background: #fff;
  border: 1.5px solid var(--color-morski);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}

.select-ui__list[hidden] { display: none; }

.select-ui__option {
  padding: 0.625rem 1rem;
  border-radius: var(--radius-xs);
  font-size: 0.95rem;
  color: var(--color-zielony);
  cursor: pointer;
}

.select-ui__option.is-active {
  background: color-mix(in oklab, var(--color-morski) 12%, #fff);
}

.select-ui__option[aria-selected="true"] {
  font-weight: 700;
  background: color-mix(in oklab, var(--color-morski) 18%, #fff);
}

/* --- Alternatywa pod przyciskiem: dla rodzica, który wolałby zadzwonić --- */
.form-alt {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.form-alt a {
  color: var(--color-czerwony);
  font-weight: 600;
  text-decoration: underline;
}

/* --- Przyklejone CTA - tylko telefon (87% ruchu jest z telefonu) ---
   Na desktopie zbędne: formularz jest w pierwszej połowie strony. */
.sticky-cta {
  position: fixed;
  z-index: 60;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.sticky-cta__btn {
  flex: 1;
  justify-content: center;
  box-shadow: var(--shadow-pop);
}

.sticky-cta__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  flex-shrink: 0;
  border-radius: var(--radius-btn);
  background: var(--color-zielony);
  color: #fff;
  box-shadow: var(--shadow-pop);
}

.sticky-cta__call svg { width: 1.25rem; height: 1.25rem; }

/* Miejsce pod przyklejonym paskiem, żeby nie zasłaniał stopki */
body { padding-bottom: 4.5rem; }

@media (min-width: 768px) {
  .sticky-cta { display: none; }
  body { padding-bottom: 0; }
}

/* --- Karta „W skrócie" w hero: lista ma się czytać jak cennik, nie jak akapit --- */
.hero-promo__card .price-card__list li {
  margin-bottom: 0.5rem;
}

.hero-promo__finenote a {
  text-decoration: underline;
}

/* --- Styk sekcji „Film" i „Rodzice mówią o nas" ---
   Obie sekcje mają w background.css własne tło i własny padding pionowy, a granicę
   między nimi rysuje `border-block`. Do tego dochodził jeszcze `margin-top: 5rem`
   z klasy .section, przez co między dwoma tłami zostawał pusty biały pas.
   #film ma z tego powodu wyzerowany margines już w background.css - #opinie nie miał,
   bo na stronie głównej te sekcje nie sąsiadują ze sobą. */
.bg-mockup-premium #opinie {
  margin-top: 0;
}

/* --- Odstępy w sekcjach strony pakietu ---
   .section-title ma w components.css margin: 0, bo na stronie głównej odstęp daje
   gap karty. Sekcje tej podstrony nie są w kartach, więc odstęp trzeba dodać tutaj. */
#warianty .pakiet-table-wrap {
  margin-top: 1.5rem;
}

#cena .price-banner {
  margin-top: 0.5rem;
}

/* --- Strona pakietu: tabela porównania wariantów pobytu --- */
.pakiet-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: #fff;
}

.pakiet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 34rem;
}

.pakiet-table th,
.pakiet-table td {
  padding: 0.875rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border-soft);
}

.pakiet-table thead th {
  background: var(--color-zielony);
  color: #fff;
  font-weight: 600;
  border-bottom: none;
}

.pakiet-table tbody tr:last-child td { border-bottom: none; }

.pakiet-table tbody tr.is-highlight {
  background: rgba(31, 166, 168, 0.08);
}

.pakiet-table td strong { color: var(--color-zielony); }

/* --- Lista zasad pakietu (numerowane kroki bez ozdobników) --- */
.pakiet-rules {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .pakiet-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}

.pakiet-rule {
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-card);
}

.pakiet-rule__title {
  font-weight: 700;
  color: var(--color-zielony);
  margin-bottom: 0.375rem;
}

.pakiet-rule__text {
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.6;
}

/* --- Pasek z ceną: jedna liczba, którą rodzic ma zapamiętać --- */
.price-banner {
  background: var(--grad-banner);
  color: #fff;
  border-radius: var(--radius-2xl);
  padding: 2rem 1.5rem;
  text-align: center;
}

/* Nadtytuł nad kwotą - nazwa pakietu. Kwota zostaje elementem, który wpada w oko. */
.price-banner__eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.5rem;
}

.price-banner__amount {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.price-banner__label {
  font-size: 1rem;
  opacity: 0.9;
  margin-top: 0.5rem;
}

.price-banner__cta { margin-top: 1.5rem; }

@media (min-width: 768px) {
  .price-banner { padding: 3rem; }
  .price-banner__amount { font-size: 3.5rem; }
}

/* --- Strona podziękowania --- */
.thanks {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  padding-block: 4rem;
}

.thanks__mark {
  width: 4.5rem;
  height: 4.5rem;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-morski);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thanks__mark svg { width: 2.25rem; height: 2.25rem; }

.thanks__text {
  color: var(--color-muted);
  margin-block: 1rem 2rem;
  line-height: 1.7;
}