/* 12c — bilety: co doszło po makiecie. Klikalne progi cenowe, napisy puli
   (etykieta, dowód społeczny, obecność w koszyku) i prośba o kontakt powyżej
   maksymalnej liczby biletów. Wczytywane PO 12a i 12b, więc dopisuje się do
   kafelków z makiety zamiast ich przepisywać. */

/* Próg cenowy jest przyciskiem, ale ma wyglądać dokładnie jak kafelek z makiety:
   cienka górna linia, pod nią nazwa progu i cena. Żadnego tła, ramki, zaokrąglenia
   ani cienia - inaczej pasek wygląda jak rząd domyślnych przycisków przeglądarki. */
.price-tier {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--ai-line-strong);
  border-radius: 0;
  box-shadow: none;
  /* Cel dotyku ≥ 44 px (WCAG 2.5.8) robimy wysokością wiersza i paddingiem,
     nie tłem - kafelek ma zostać niewidoczny jako przycisk. */
  padding: 14px 0 12px;
  margin: 0;
  width: 100%;
  min-height: 44px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}
/* Kursor i reakcja na najechanie dopiero wtedy, gdy skrypt podłączył kliknięcie.
   Bez JavaScriptu pasek zostaje zwykłym paskiem liczb i niczego nie obiecuje. */
.price-tiers--klikalne .price-tier {
  cursor: pointer;
}
.price-tiers--klikalne .price-tier:hover {
  border-top-color: var(--ai-akcent);
}
/* Wyróżnienie ostatniego progu pochodzi z makiety i zostaje TAM, gdzie nie ma
   skryptu. Gdy progi są klikalne, akcent należy się progowi wybranemu. */
.price-tiers--klikalne .price-tier:last-child {
  border-top-color: var(--ai-line-strong);
}
.price-tiers--klikalne .price-tier:last-child > strong {
  color: inherit;
}
.price-tier[aria-pressed="true"] {
  border-top-color: var(--ai-akcent);
}
.price-tier[aria-pressed="true"] > span {
  color: var(--ai-text);
}
.price-tiers--klikalne .price-tier[aria-pressed="true"] > strong {
  color: var(--ai-rose);
}

/* Etykieta puli („Pierwsza pula biletów"), dowód społeczny i obecność w koszyku.
   Wszystkie trzy napisy są opcjonalne - włącza je operator w zakładce „Pula biletów". */
.pula-etykieta {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai-text-mute);
}
.booking-alternative > .pula-etykieta {
  margin-bottom: 10px;
}
.pula-dowod,
.pula-obecnosc {
  margin: 0 0 14px;
  font-size: 0.8125rem;
  color: var(--ai-text-mute);
}
/* Obecność zmienia się na żywo, więc dostaje ten sam akcent co licznik miejsc. */
.pula-obecnosc {
  font-weight: 600;
  color: var(--ai-rose);
}
.order-summary .pula-obecnosc {
  margin: -6px 0 16px;
}

/* Prośba o kontakt powyżej maksimum biletów w jednym zgłoszeniu. Drobny druk:
   bez JavaScriptu stoi pod kalkulatorem zawsze, ze skryptem wchodzi przy granicy. */
.zakup-max-nota {
  margin: 14px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ai-text-mute);
}
.booking-card > .zakup-max-nota {
  border-top: 1px solid var(--ai-line);
  padding-top: 12px;
}
.order-summary .zakup-max-nota {
  margin: 10px 0 0;
}

/* Pasek zajętości puli. Tor w linii, wypełnienie w akcencie - to duży element,
   więc próg kontrastu to 3:1 i --ai-akcent jest właściwym tokenem. */
.pula-pasek {
  position: relative;
  overflow: hidden;
  height: 6px;
  border-radius: 3px;
  background: var(--ai-line-strong);
  margin: 0 0 18px;
}
.pula-pasek > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ai-akcent);
  width: var(--pula-udzial, 0%);
}
/* Skrypt zdejmuje pasek do zera, a po wejściu w widok pozwala mu urosnąć. */
.pula-pasek.animuj > span {
  width: 0;
  transition: width 1.2s ease-out;
}
.pula-pasek.animuj.widoczny > span {
  width: var(--pula-udzial, 0%);
}
/* Jednorazowy błysk po torze, od lewej do prawej. Bez pętli - ma zwrócić uwagę raz. */
.pula-pasek.animuj.widoczny::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--ai-bg) 50%, transparent 100%);
  opacity: 0.55;
  transform: translateX(-100%);
  animation: pula-blysk 1.2s ease-out 1 forwards;
}
@keyframes pula-blysk {
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .pula-pasek.animuj > span,
  .pula-pasek.animuj.widoczny > span {
    width: var(--pula-udzial, 0%);
    transition: none;
  }
  .pula-pasek.animuj.widoczny::after {
    display: none;
  }
}

/* Bez skoków układu. Napisy, które pojawiają się i znikają przy zmianie liczby osób,
   NIE używają atrybutu `hidden` (ten w bazie znaczy `display: none !important`, więc
   karta kurczyłaby się i wszystko pod nią skakało). Zamiast tego znikają samym
   `visibility` i trzymają swoje miejsce. Zgłoszone przez Romana: „strona skacze,
   jak klikam plus/minus". */
.wyciszony {
  visibility: hidden;
}
/* Napisy, które przy ukryciu czyszczą też treść, mają zarezerwowany jeden wiersz. */
.booking-card #saving,
.pula-obecnosc {
  min-height: 1.4em;
}