/* Elementy występujące na landingach lejka (/opt-in-page/, /book-in/).
   Wszystko pozostałe bierze z base.css. */

/* ── wąski pasek górny: logo i nic więcej, żeby nie wyprowadzać z lejka ── */

.pasek { border-bottom: 1px solid var(--line); background: var(--white); }
.pasek__wnetrze {
  max-width: var(--max-w); margin-inline: auto;
  padding: var(--s-3) clamp(1rem, 5vw, 2rem);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.pasek__pomoc { font-size: 14px; color: var(--text-muted); text-decoration: none; }
.pasek__pomoc:hover { color: var(--primary); }

/* ── postęp w lejku: nazwane etapy, bez numerowania ── */

.postep { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: var(--s-3) clamp(1rem,5vw,2rem); }
.postep__wnetrze { max-width: var(--max-w); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); }
.postep__etap { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); }
.postep__etap b { font-weight: 600; }
.postep__znacznik { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: 0 0 9px; }
.postep__etap--zrobiony .postep__znacznik { background: var(--primary); }
.postep__etap--teraz { color: var(--text); }
.postep__etap--teraz .postep__znacznik { background: var(--accent); box-shadow: 0 0 0 4px rgba(255,107,0,.16); }

/* ── hero landingu ── */

.lhero { padding: var(--s-6) clamp(1rem, 5vw, 2rem) var(--s-7); position: relative; overflow: hidden; }
.lhero::before {
  content: ""; position: absolute; inset: -25% -10% auto 42%; height: 130%;
  background:
    radial-gradient(38% 46% at 70% 30%, rgba(255,107,0,.10), transparent 70%),
    radial-gradient(44% 52% at 82% 68%, rgba(31,58,147,.10), transparent 72%);
  pointer-events: none;
}
.lhero__wnetrze { max-width: var(--max-w); margin-inline: auto; display: grid; gap: var(--s-6); align-items: center; position: relative; }
@media (min-width: 900px) { .lhero__wnetrze { grid-template-columns: 1.2fr .8fr; gap: var(--s-7); } }
.lhero .lead { max-width: 34em; margin-bottom: var(--s-5); }
.lhero .liczba { max-width: 30em; margin-bottom: var(--s-5); }
.lhero .liczba__wartosc { font-size: clamp(23px, 2.3vw, 29px); }
.lhero__foto { margin: 0; justify-self: center; width: 100%; max-width: 420px; position: relative; }
.lhero__foto::after {
  content: ""; position: absolute; inset: 20px -18px -18px 20px;
  background: var(--primary); border-radius: 22px; z-index: 0;
}
.lhero__foto img { position: relative; z-index: 1; border-radius: var(--radius-lg); box-shadow: 0 18px 44px rgba(31,58,147,.18); }
@media (max-width: 560px) { .lhero__foto::after { inset: 14px -10px -10px 14px; } .plakietka { left: -6px; bottom: 20px; } }

.lhero--waski .lhero__wnetrze { grid-template-columns: 1fr; text-align: center; max-width: 800px; }
.lhero--waski .lead { margin-inline: auto; }

/* ── ramka na video ── */

.wideo { max-width: 900px; margin-inline: auto; }
.wideo__ramka {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  background: #0F1733; box-shadow: var(--cien-lift);
}
.wideo__ramka iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wideo__plakat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wideo__graj {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center; cursor: pointer;
  border: 0; background: linear-gradient(180deg, rgba(15,23,51,.15), rgba(15,23,51,.45));
}
.wideo__graj span {
  width: 82px; height: 82px; border-radius: 50%;
  background: var(--accent); color: var(--white);
  display: grid; place-items: center; font-size: 28px; padding-left: 6px;
  box-shadow: 0 10px 30px rgba(255,107,0,.42);
  transition: transform .18s ease;
}
.wideo__graj:hover span { transform: scale(1.07); }
.wideo__czas {
  position: absolute; right: 14px; bottom: 14px;
  background: rgba(15,23,51,.78); color: var(--white);
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  padding: 5px 10px; border-radius: 7px;
}
.wideo__zamek {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s-3); text-align: center;
  padding: var(--s-4);
  background: linear-gradient(150deg, #16205A, #1F3A93 65%, #24328A);
  color: var(--white);
}
.wideo__zamek h3 { color: var(--white); font-size: clamp(19px, 2.4vw, 26px); margin: 0; }
.wideo__zamek p { color: rgba(255,255,255,.78); font-size: 15px; margin: 0; max-width: 46ch; }

/* ── karta formularza ── */

.formularz {
  max-width: 620px; margin-inline: auto;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--cien-lift); padding: var(--s-6) clamp(1.25rem, 4vw, 2.5rem);
}
.formularz--szeroki { max-width: 780px; }
.formularz h2 { font-size: clamp(24px, 2.8vw, 32px); }
.formularz__wstep { text-align: center; margin-bottom: var(--s-5); }

.pole { display: block; margin-bottom: var(--s-4); }
.pole__etykieta { display: block; font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.pole__input, .pole__area, .pole__select {
  width: 100%; padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: 10px;
  font-family: var(--font-body); font-size: 16px; color: var(--text);
  background: var(--white); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pole__area { min-height: 120px; resize: vertical; }
.pole__input:focus, .pole__area:focus, .pole__select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,58,147,.12); }
.pole__input::placeholder, .pole__area::placeholder { color: #A9ADC7; }

.wybory { display: grid; gap: 10px; }
.wybor {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 15.5px; line-height: 1.45; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.wybor:hover { border-color: #C7CCE4; background: var(--bg-soft); }
.wybor input { margin: 3px 0 0; accent-color: var(--primary); flex: 0 0 auto; }
.wybor:has(input:checked) { border-color: var(--primary); background: rgba(31,58,147,.05); }

.zgoda { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--text-muted); margin-bottom: var(--s-4); }
.zgoda input { margin: 3px 0 0; accent-color: var(--primary); flex: 0 0 auto; }
.zgoda a { color: var(--niebieski); }

.formularz__zaufanie { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); font-size: 14px; color: var(--text-muted); }
.formularz__komunikat { display: none; margin-top: var(--s-4); padding: 14px 16px; border-radius: 10px; background: rgba(31,58,147,.07); color: var(--primary); font-size: 15px; text-align: center; }
.formularz__komunikat.widac { display: block; }

/* ── lista korzyści ── */

.korzysci { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); max-width: 40em; }
.korzysci li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.6; }
.korzysci__ptak { color: var(--akcent-tekst); font-weight: 800; flex: 0 0 auto; }
.sekcja--ink .korzysci__ptak { color: var(--akcent-na-ink); }
.korzysci--center { margin-inline: auto; }

/* ── kalendarz ── */

.rezerwacja { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 980px) { .rezerwacja { grid-template-columns: .8fr 1.2fr; } }
.kalendarz { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--cien-karta); background: var(--white); min-height: 620px; }
.kalendarz iframe { width: 100%; height: 620px; border: 0; display: block; }
.detale { display: grid; gap: var(--s-3); }
.detale__wiersz { display: flex; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); font-size: 15.5px; }
.detale__wiersz:last-child { border-bottom: none; padding-bottom: 0; }
.detale__nazwa { color: var(--text-muted); }
.detale__wartosc { font-family: var(--font-head); font-weight: 700; text-align: right; }

/* ── formularz w krokach: 13 pól naraz to ściana, którą mało kto przejdzie ── */

.kroki-formularza { display: flex; gap: var(--s-2); margin-bottom: var(--s-5); }
.kroki-formularza__krok {
  flex: 1; height: 5px; border-radius: 3px; background: var(--line);
  transition: background .3s ease;
}
.kroki-formularza__krok--zrobiony { background: var(--primary); }
.kroki-formularza__krok--teraz { background: var(--accent); }
.kroki-formularza__opis { text-align: center; font-size: 14px; color: var(--text-muted); margin: 0 0 var(--s-5); }

.etap[hidden] { display: none; }
.etap__naglowek { font-family: var(--font-head); font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 var(--s-4); }
.nawigacja-formularza { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-4); }
.nawigacja-formularza .btn { flex: 1; }
.nawigacja-formularza .btn--obrys { flex: 0 0 auto; }

.kalendarz__zastepnik {
  height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-3); color: var(--text-muted); font-size: 15px; background: var(--bg-soft);
}
.kalendarz__spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: obrot 1s linear infinite;
}
@keyframes obrot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kalendarz__spinner { animation: none; } }