/* ============================================================
   ONLY FAST CARS — podstrona /voucher
   Karta podarunkowa na wynajem. Strona mówi tym samym językiem co
   /program-partnerski (typografia na osi, żar pod nagłówkiem, karty
   kroków z czerwoną plakietką, akordeon .pytania z site.css), ale w
   hero zamiast samych liter stoi fotografia fizycznej karty vouchera
   — jedyne zdjęcie na stronie.

   Ruch według jednej zasady: transform i opacity, nic więcej. Wspólne
   krzywe w zmiennych niżej; tryb ograniczonego ruchu gasi wszystko
   na końcu pliku.
   ============================================================ */

.vc-page {
  /* te same krzywe co odsłonięcia .rvg w site.css i strona programu
     partnerskiego, żeby ruch tej strony nie miał obcego charakteru */
  --vc-wyjazd: cubic-bezier(.16, .86, .22, 1);
  --vc-dotyk: cubic-bezier(.2, .8, .2, 1);
  background: var(--bg0);
}
.vc-page section { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* pigułka z hero (.hf-all) niesie własną, jasną nakładkę; tekst musi zostać
   ciemny także wtedy, gdy dziedziczy kolor z sekcji */
.vc-page .btn-primary.hf-all { color: #0b0b0c; }
html[data-motyw="jasny"] .vc-page .btn-primary.hf-all { color: #f5f5f4; }

/* każdy przycisk potwierdza wciśnięcie lekkim skurczem */
.vc-page .btn:active { transform: scale(.97); }

/* ============================================================
   NAGŁÓWEK — typografia na osi plus karta vouchera
   ============================================================ */
.vc-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + clamp(44px, 7vw, 96px)) 0 clamp(52px, 7vw, 96px);
  text-align: center;
}

/* --- żar pod treścią ---
   Ten sam tlący się węgiel co na stronie programu partnerskiego; pełna
   pętla bez wahadła. */
.vc-zar { position: absolute; inset: -10%; z-index: 0; pointer-events: none; }
.vc-zar span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(60px);
}
.vc-zar span:nth-child(1) {
  width: 46vmax; height: 46vmax; top: -18vmax; right: -10vmax;
  background: radial-gradient(circle, rgba(227, 34, 39, .12), transparent 65%);
  animation: vc-zar-a 53s ease-in-out infinite;
}
.vc-zar span:nth-child(2) {
  width: 34vmax; height: 26vmax; bottom: -12vmax; left: 6vmax;
  background: radial-gradient(ellipse at center, rgba(255, 74, 80, .07), transparent 68%);
  animation: vc-zar-b 71s ease-in-out infinite;
}
@keyframes vc-zar-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(-9vmax, 7vmax, 0) scale(1.1); }
  66%  { transform: translate3d(-3vmax, 12vmax, 0) scale(.94); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes vc-zar-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(10vmax, -5vmax, 0) scale(1.08); }
  66%  { transform: translate3d(4vmax, -10vmax, 0) scale(.95); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
html[data-motyw="jasny"] .vc-zar { opacity: .5; }

.vc-hero-tresc { position: relative; z-index: 1; }

/* --- tytuł w maskach słów --- */
.vc-h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4.4vw, 3.3rem);
  line-height: 1.1;
}
.vc-h1-czlon { display: block; }
.vc-h1 .hwm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.vc-h1 .hw {
  display: inline-block;
  transform: translateY(1.12em);
  transition: transform 1.1s var(--vc-wyjazd);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.vc-h1.gra .hw { transform: none; }

/* --- kaskada wejścia reszty nagłówka --- */
html.vc-intro .vc-hero [data-wejscie] { opacity: 0; transform: translateY(18px); }
html.vc-intro.vc-go .vc-hero [data-wejscie] {
  opacity: 1;
  transform: none;
  /* krótszy fade i start niż pierwotne .85 s / .45 s: LCP liczy się przy
     pełnej widoczności akapitu, a ten wjazd stoi na pierwszym ekranie */
  transition: opacity .55s ease, transform .85s var(--vc-wyjazd);
  transition-delay: calc(var(--w, 0) * 90ms + .3s);
}

.vc-lead { margin: clamp(18px, 2.4vw, 26px) auto 0; line-height: 1.8; max-width: 54ch; }

/* para przycisków w jednym rycie; równe kolumny jak na stronie programu */
.vc-akcje {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  width: max-content;
  max-width: 100%;
  margin-top: clamp(24px, 3vw, 34px);
  margin-inline: auto;
}
.vc-akcje .btn { height: 44px; padding: 0 26px; font-size: .86rem; }

/* --- karta vouchera ---
   Zdjęcie ma kanał alfa, więc leży wprost na tle strony; cień robi za
   podłogę. Delikatne uniesienie pod kursorem to odpowiedź, nie ozdoba. */
.vc-karta {
  margin: clamp(34px, 4.6vw, 56px) auto 0;
  max-width: min(560px, 86vw);
}
.vc-karta img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .55));
  transition: transform .45s var(--vc-dotyk);
}
@media (hover: hover) and (pointer: fine) {
  .vc-karta:hover img { transform: translateY(-6px); }
}
/* Przechył za kursorem (js/voucher.js): póki wskaźnik krąży nad kartą,
   przejście schodzi do krótkiego, żeby ruch nie pływał za ręką; po zejściu
   klasa znika i powrót idzie zwykłą, miękką krzywą wyżej. */
.vc-karta.tilt img { transition: transform .12s ease-out; will-change: transform; }
html[data-motyw="jasny"] .vc-karta img { filter: drop-shadow(0 26px 48px rgba(23, 24, 27, .3)); }

/* --- trzy obietnice pod kartą ---
   Ikony z firmowego arkusza i kreski działowe rysowane na sąsiedzie,
   jak przy liczbach programu partnerskiego. */
.vc-atuty {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 44px);
  margin: clamp(38px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.vc-atuty li { position: relative; }
.vc-atuty li + li::before {
  content: "";
  position: absolute;
  left: calc(clamp(18px, 3vw, 44px) / -2);
  top: 8px; bottom: 8px;
  width: 1px;
  background: var(--line);
}
.vc-atuty svg { display: block; width: 20px; height: 20px; margin-inline: auto; color: var(--red2); }
.vc-atuty h3 {
  margin: 14px 0 0;
  font-size: .92rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
}
.vc-atuty p { margin: 10px auto 0; color: var(--dim); font-size: .855rem; line-height: 1.75; max-width: 30ch; }

/* gwiazdka drobnym drukiem pod obietnicami */
.vc-hero-uwaga {
  margin: clamp(22px, 3vw, 32px) auto 0;
  color: var(--dim);
  font-size: .8rem;
  line-height: 1.7;
  max-width: 60ch;
}

/* ============================================================
   PASY TREŚCI — wspólny szkielet
   ============================================================ */
.vc-proces, .vc-final { padding-block: clamp(64px, 8.5vw, 120px); }
.vc-czym, .vc-zamow-pas { padding-block: clamp(64px, 8.5vw, 120px); background: var(--bg1); border-block: 1px solid var(--line); }
/* akordeon FAQ (site.css) sam niesie tło --bg1 i sąsiaduje z pasem
   zamówienia; podwójną kreskę między nimi zdejmuje reguła niżej */
.pytania + .vc-zamow-pas { border-top: 0; }

.vc-glowa { margin-inline: auto; margin-bottom: clamp(30px, 4vw, 50px); max-width: 64ch; text-align: center; }
.vc-glowa .pyt-kicker { display: block; }
.vc-glowa h2 { font-size: clamp(1.5rem, 2.9vw, 2.2rem); }
.vc-glowa .lead { margin: 14px auto 0; line-height: 1.8; }

/* ============================================================
   CZYM JEST VOUCHER — łam z hairline'ami zamiast kart
   ============================================================ */
.vc-czym-lam {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 44px);
  margin: 0; padding: 0;
  list-style: none;
}
.vc-czym-lam li { position: relative; padding: 4px 0 6px; text-align: center; }
.vc-czym-lam li + li::before {
  content: "";
  position: absolute;
  left: calc(clamp(24px, 3vw, 44px) / -2);
  top: 4px; bottom: 4px;
  width: 1px;
  background: var(--line);
}
.vc-czym-lam svg { display: block; width: 20px; height: 20px; margin-inline: auto; color: var(--red2); }
.vc-czym-lam h3 {
  margin: 16px 0 0;
  font-size: .92rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
}
.vc-czym-lam p { margin: 11px auto 0; color: var(--dim); font-size: .855rem; line-height: 1.75; max-width: 32ch; }

/* ============================================================
   JAK TO DZIAŁA — trzy kroki w kartach
   ============================================================ */
.vc-kroki {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin: 0; padding: 0;
  list-style: none;
}
.vc-kroki li {
  padding: clamp(24px, 2.6vw, 32px) 20px clamp(26px, 2.8vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
  text-align: center;
  transition: transform .3s var(--vc-dotyk), border-color .3s, box-shadow .3s;
}
@media (hover: hover) and (pointer: fine) {
  .vc-kroki li:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 22px 50px -30px rgba(0, 0, 0, .9);
  }
  html[data-motyw="jasny"] .vc-kroki li:hover { border-color: rgba(23, 24, 27, .22); }
}
.vc-krok-no {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 8px 22px rgba(227, 34, 39, .3);
  font-size: .68rem; font-weight: 600; letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.vc-kroki h3 {
  margin: 16px 0 0;
  font-size: .92rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
}
.vc-kroki p { margin: 11px auto 0; color: var(--dim); font-size: .855rem; line-height: 1.75; max-width: 30ch; }
html[data-motyw="jasny"] .vc-kroki li { background: var(--bg1); }

/* ============================================================
   ZAMÓWIENIE
   Lewa kolumna mówi, co się stanie po wysłaniu; prawa zbiera dane.
   Formularz bierze pola z .field/.form-grid w site.css — ten sam
   język co formularz rezerwacji, tylko z innymi rubrykami.
   ============================================================ */
.vc-zamow {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.vc-zamow-intro h2 { font-size: clamp(1.5rem, 2.9vw, 2.2rem); }
.vc-zamow-intro .lead { margin: 16px 0 0; line-height: 1.8; }
.vc-zamow-punkty {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}
.vc-zamow-punkty li {
  position: relative;
  padding-left: 24px;
  color: var(--dim);
  font-size: .875rem;
  line-height: 1.6;
}
.vc-zamow-punkty li::before {
  content: "";
  position: absolute; left: 0; top: .48em;
  width: 11px; height: 1px;
  background: var(--red);
}
.vc-zamow-kontakt { margin: clamp(20px, 2.6vw, 28px) 0 0; color: var(--dim); font-size: .855rem; }
.vc-zamow-kontakt a { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .vc-zamow-kontakt a:hover { color: var(--red2); } }

/* Zdanie pod polem dedykacji: mówi, że tekst pójdzie na wydruk słowo
   w słowo. Ton jak przy podpowiedziach w panelu — drobne i przygaszone,
   żeby nie konkurowało z etykietami pól. */
.vc-pole-hint {
  margin: 2px 0 0;
  color: var(--dim);
  font-size: .78rem; font-weight: 400; line-height: 1.55;
  max-width: 58ch;
}

.vc-form { padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-lg); }

/* --- podpowiedzi kwot ---
   Pigułki pod polem kwoty: klik wpisuje wartość, wciśnięta łapie czerwień
   marki. Wiersz ciaśniejszy niż zwykłe pole, bo to dopisek do kwoty,
   a nie osobna rubryka. */
.vc-kwoty-pole { gap: 8px; margin-top: -4px; }
.vc-kwoty-tytul {
  margin: 0;
  font-size: .68rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.vc-kwoty { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-kwota-chip {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--dim);
  font-size: .8rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
@media (hover: hover) and (pointer: fine) {
  .vc-kwota-chip:hover { color: var(--ink); border-color: rgba(255, 255, 255, .3); }
  html[data-motyw="jasny"] .vc-kwota-chip:hover { border-color: rgba(23, 24, 27, .3); }
}
.vc-kwota-chip.on {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.vc-zgoda {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: clamp(18px, 2.2vw, 24px);
  color: var(--dim);
  font-size: .82rem;
  line-height: 1.65;
  cursor: pointer;
}
.vc-zgoda input {
  width: 18px; height: 18px;
  margin: 2px 0 0;
  accent-color: var(--red);
  cursor: pointer;
}
.vc-zgoda a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.vc-zgoda b { color: var(--red2); }
.vc-zgoda.err span { color: var(--red2); }

.vc-form-stopka {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  margin-top: clamp(20px, 2.4vw, 26px);
}
.vc-form-stopka .btn { height: 46px; padding: 0 30px; font-size: .88rem; }
.vc-form-info { margin: 0; min-height: 1.3em; font-size: .84rem; color: var(--dim); }
.vc-form-info.err { color: var(--red2); }
.vc-form-info.ok { color: #8fe3b0; }
html[data-motyw="jasny"] .vc-form-info.ok { color: #1d7a4c; }

/* ekran po wysłaniu: formularz znika, zostaje samo potwierdzenie */
.vc-form--wyslany { display: grid; gap: 14px; justify-items: start; text-align: left; }
.vc-form--wyslany h3 { margin: 0; font-size: 1.05rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.vc-form--wyslany p { margin: 0; color: var(--dim); font-size: .89rem; line-height: 1.75; }

/* ============================================================
   ZAMKNIĘCIE — finał typograficzny na osi strony
   ============================================================ */
.vc-final {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.vc-final-tresc { position: relative; }
.vc-final .pyt-kicker { display: block; }
.vc-final-tresc h2 { font-size: clamp(1.5rem, 3.1vw, 2.4rem); max-width: 24ch; margin-inline: auto; }
.vc-final-tresc .lead { margin: 16px auto 0; line-height: 1.8; }
.vc-final .vc-akcje { margin-top: clamp(24px, 3.2vw, 36px); }

/* ============================================================
   WĄSKI EKRAN
   ============================================================ */
@media (max-width: 1000px) {
  .vc-czym-lam { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vc-czym-lam li { padding-block: clamp(20px, 3vw, 28px); }
  .vc-czym-lam li + li::before {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; height: 1px;
  }
  .vc-kroki { grid-template-columns: minmax(0, 1fr); }
  .vc-zamow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .vc-akcje { grid-auto-flow: row; width: 100%; }
  /* obietnice jedna pod drugą; pionowe działowe schodzą, wystarczy światło */
  .vc-atuty { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .vc-atuty li + li::before { display: none; }
  .vc-atuty p { max-width: 34ch; }
  .vc-form { padding: 20px 16px 22px; }
  .vc-form-stopka .btn { width: 100%; }
}
@media (max-width: 560px) {
  .vc-form .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   OGRANICZONY RUCH
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .vc-zar span { animation: none; }
  .vc-h1 .hw { transform: none; transition: none; }
  html.vc-intro .vc-hero [data-wejscie] { opacity: 1; transform: none; transition: none; }
  .vc-karta img { transition: none; }
  .vc-page .btn:active { transform: none; }
}

/* ============================================================
   SPRAWDŹ VOUCHER
   Pas na ciemnym tle między krokami a FAQ: jedno pole na kod,
   przycisk i karta wyniku pod spodem. Pole mówi językiem .field
   z site.css, tylko złożone w jeden pasek z przyciskiem.
   ============================================================ */
.vc-sprawdz { padding-block: clamp(64px, 8.5vw, 120px); background: var(--bg1); border-block: 1px solid var(--line); }
.vc-sprawdz + .pytania { border-top: 0; }

.vc-sprawdz-form { max-width: 560px; margin-inline: auto; }
.vc-sprawdz-pole { display: flex; gap: 10px; }
.vc-sprawdz-pole input {
  flex: 1; min-width: 0;
  height: 52px;
  padding: 0 18px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  color: var(--ink);
  font-size: .95rem; font-weight: 500; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  transition: border-color .22s, background .22s;
}
.vc-sprawdz-pole input::placeholder { color: #6d737a; letter-spacing: .06em; }
.vc-sprawdz-pole input:hover { border-color: rgba(255, 255, 255, .2); }
.vc-sprawdz-pole input:focus { outline: none; border-color: rgba(255, 255, 255, .5); }
.vc-sprawdz-pole input.err { border-color: var(--red); background: rgba(227, 34, 39, .07); }
html[data-motyw="jasny"] .vc-sprawdz-pole input {
  background: rgba(23, 24, 27, .04);
  border-color: rgba(23, 24, 27, .14);
}
html[data-motyw="jasny"] .vc-sprawdz-pole input:hover { border-color: rgba(23, 24, 27, .3); }
html[data-motyw="jasny"] .vc-sprawdz-pole input:focus { border-color: rgba(23, 24, 27, .55); }

/* komunikat tekstowy („Sprawdzamy…", błędy) i karta wyniku */
.vc-sprawdz-wynik { margin-top: 18px; font-size: .875rem; line-height: 1.7; color: var(--dim); text-align: center; }
.vc-sprawdz-wynik.zle { color: var(--red2); }

.vc-wynik-karta {
  text-align: left;
  padding: clamp(18px, 2.4vw, 24px);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
html[data-motyw="jasny"] .vc-wynik-karta { background: rgba(23, 24, 27, .035); }
.vc-wynik-glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vc-wynik-stan {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}
.vc-wynik-karta--ok .vc-wynik-stan { background: rgba(46, 204, 113, .12); border: 1px solid rgba(46, 204, 113, .35); color: #5cd39a; }
.vc-wynik-karta--zle .vc-wynik-stan { background: rgba(227, 34, 39, .1); border: 1px solid rgba(227, 34, 39, .4); color: var(--red2); }
.vc-wynik-kod { color: var(--ink); font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.vc-wynik-dane {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.vc-wynik-dane span {
  display: block;
  font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
}
.vc-wynik-dane b { display: block; margin-top: 4px; color: var(--ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.vc-wynik-karta > p { margin: 14px 0 0; color: var(--dim); font-size: .855rem; line-height: 1.7; }

@media (max-width: 560px) {
  .vc-sprawdz-pole { flex-direction: column; }
  /* W kolumnie osią główną jest wysokość, a flex: 1 (flex-basis: 0) wygrywa
     z height: 52px: pole kurczyło się do 22 px wysokości i było najmniejszym
     celem dotyku na stronie. flex: none oddaje mu wysokość z reguły wyżej. */
  .vc-sprawdz-pole input { flex: none; }
  .vc-sprawdz-pole .btn { width: 100%; }
}