/* Strona po zakupie (/dziekujemy-za-zakup/) w języku pozostałych podstron.
   Pisana od telefonu, bo tam kupuje się najwięcej biletów.

   Podsumowanie zamówienia, przycisk „Pobierz bilety” i komunikat oczekiwania
   wstawia w tę kartę generator typ-nowy.mjs, razem z integracją Biletomatu.
   Tutaj tylko je ubieramy, żeby pasowały do reszty; struktury nie ruszamy. */

main[data-trasa="dziekujemy"] {
  --dz-zloto: var(--r2-zloto, #f2c14e);
  --dz-tekst: var(--r2-tekst, #f5f2ee);
  --dz-cichy: var(--r2-cichy, #97918a);
  --dz-kreska: rgba(255, 255, 255, .13);
}

/* ——— 1. potwierdzenie ——— */
.dz-wejscie { position: relative; display: flex; align-items: center; min-height: 82svh; padding: 132px 0 56px; overflow: hidden; }
.dz-wejscie-tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.dz-wejscie .r2-wejscie-cien { z-index: 1; }
.dz-w { position: relative; z-index: 2; width: min(100% - 2 * var(--margines), var(--szer)); margin-inline: auto; }

.dz-karta {
  max-width: 620px;
  padding: 30px 24px 32px;
  background: rgba(14, 13, 11, .9);
  border: 1px solid var(--dz-kreska);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.dz-znak {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin-bottom: 20px;
  border: 1px solid var(--dz-zloto); border-radius: 50%; color: var(--dz-zloto);
}
/* nadtytuł w układzie immersyjnym jest wyśrodkowany, a karta czyta się od lewej */
.dz-karta .r2-nadtytul { text-align: left; margin-bottom: 0; }
.dz-karta h1 { margin: 8px 0 0; font-size: clamp(34px, 10vw, 52px); font-weight: 900; line-height: 1.04; letter-spacing: -.02em; }
.dz-lead { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: #ddd6cd; }

/* ——— elementy dokładane przez generator ——— */
main[data-trasa="dziekujemy"] [data-typ-podsumowanie] {
  margin: 24px 0 0; padding: 18px 18px 20px;
  background: rgba(255, 255, 255, .05); border-left: 2px solid var(--dz-zloto);
}
main[data-trasa="dziekujemy"] [data-typ-podsumowanie] .nadtytul {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dz-cichy);
}
main[data-trasa="dziekujemy"] [data-typ-wydarzenie] { color: var(--dz-tekst); line-height: 1.35; }
main[data-trasa="dziekujemy"] [data-typ-wartosc] { margin: 6px 0 0; font-size: 14px; color: var(--dz-cichy); }

/* najważniejszy przycisk na stronie: pełna szerokość na telefonie, wyraźny kolor */
main[data-trasa="dziekujemy"] #ticket-url {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 58px; margin: 22px 0 0; padding: 0 26px;
  background: var(--dz-zloto); color: #14110a;
  font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border: 0; border-radius: 2px;
}
main[data-trasa="dziekujemy"] #ticket-url:hover { background: #ffd469; }
main[data-trasa="dziekujemy"] #ticket-url[hidden] { display: none; }
main[data-trasa="dziekujemy"] [data-ticket-oczekiwanie] {
  margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--dz-cichy);
}
main[data-trasa="dziekujemy"] [data-ticket-oczekiwanie][hidden] { display: none; }

/* ——— 3. drugi seans i pomoc ——— */
/* nadtytuły w tych blokach czytają się od lewej, tak jak treść pod nimi.
   Kolor wprost, bo reguły akapitów niżej są bardziej szczegółowe niż .r2-nadtytul. */
.dz-dalej .r2-nadtytul { text-align: left; margin-bottom: 0; color: var(--dz-zloto); letter-spacing: .12em; }
.dz-dalej { padding: 0 0 clamp(64px, 8vw, 110px); }
.dz-dalej-w { width: min(100% - 2 * var(--margines), var(--szer)); margin-inline: auto; }

.dz-polecenie { border: 1px solid var(--dz-kreska); }
.dz-polecenie img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.dz-polecenie-tresc { padding: 24px 20px 26px; }
.dz-polecenie-tresc h2 { margin: 6px 0 0; font-size: clamp(26px, 7vw, 36px); font-weight: 900; line-height: 1.1; }
.dz-polecenie-tresc p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: #ddd6cd; max-width: 46ch; }
.dz-akcja {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 54px; margin: 22px 0 0; padding: 0 24px;
  background: var(--dz-zloto); color: #14110a;
  font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px;
}
.dz-akcja:hover { background: #ffd469; }

.dz-pomoc { margin: 28px 0 0; display: grid; gap: 1px; background: var(--dz-kreska); border-block: 1px solid var(--dz-kreska); }
.dz-pomoc-blok { background: var(--r2-tlo, #0b0a08); padding: 22px 2px; }
.dz-pomoc-blok p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: #ddd6cd; max-width: 52ch; }
.dz-pomoc-blok a { color: var(--dz-tekst); }
.dz-linki { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px !important; }
.dz-linki a { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dz-zloto); text-decoration: none; }
.dz-linki a:hover { text-decoration: underline; }

/* ——— komputer ——— */
@media (min-width: 860px) {
  .dz-wejscie { min-height: 88svh; padding: 160px 0 72px; }
  .dz-karta { padding: 40px 40px 44px; }
  .dz-karta h1 { font-size: clamp(46px, 3.8vw, 58px); }
  .dz-lead { font-size: 17px; }
  main[data-trasa="dziekujemy"] #ticket-url { width: auto; min-width: 300px; }

  .dz-polecenie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .dz-polecenie img { height: 100%; aspect-ratio: auto; min-height: 320px; }
  .dz-polecenie-tresc { padding: 44px 44px 46px; display: flex; flex-direction: column; justify-content: center; }
  .dz-akcja { width: auto; align-self: flex-start; min-width: 260px; }

  .dz-pomoc { grid-template-columns: repeat(2, 1fr); }
  .dz-pomoc-blok { padding: 28px 32px 30px; }
  .dz-pomoc-blok:first-child { padding-left: 0; }
}