/* Kreator rezerwacji — trzy kroki, jasny układ, duże pola pod kciuk. */

.rez-naglowek {
  background: var(--czern); color: var(--biel); padding: 96px 0 34px;
}
.rez-naglowek h1 { font-size: clamp(32px, 5vw, 52px); text-transform: uppercase; }
.rez-naglowek p { color: #c3ccd0; margin-top: 10px; max-width: 56ch; }

/* pasek postępu */
.kroki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; list-style: none; padding: 0; }
.krok-znacznik { border-top: 4px solid rgba(255,255,255,.18); padding-top: 10px; color: #8b9498; font-size: 14.5px; letter-spacing: .04em; }
.krok-znacznik b { display: block; font-family: var(--naglowek); font-size: 19px; text-transform: uppercase; color: #8b9498; }
.krok-znacznik.aktywny { border-color: var(--limonka); color: var(--biel); }
.krok-znacznik.aktywny b { color: var(--limonka); }
.krok-znacznik.zrobiony { border-color: rgba(130,189,0,.5); }
.krok-znacznik.zrobiony b { color: #dfe5e7; }

/* układ: formularz + podsumowanie */
.rez-uklad { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(26px, 4vw, 54px); align-items: start; padding: clamp(34px, 5vw, 60px) 0 var(--sekcja); }
@media (max-width: 900px) { .rez-uklad { grid-template-columns: 1fr; } }

fieldset.krok { border: 0; margin: 0; padding: 0; }
fieldset.krok[hidden] { display: none; }
.krok h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 6px; }
.krok > p.pod { color: var(--tekst-cichy); margin-bottom: 26px; }

/* pola */
.p { display: grid; gap: 6px; margin-bottom: 18px; }
.p > label, legend.etykieta {
  font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--stal);
}
.p input, .p select, .p textarea {
  font: inherit; font-size: 17px; padding: 14px 15px; background: var(--biel);
  border: 1.5px solid var(--kreska); border-radius: 3px; color: var(--tekst); width: 100%;
}
.p input:hover, .p select:hover { border-color: var(--szary-jasny); }
.p input:focus-visible, .p select:focus-visible, .p textarea:focus-visible { outline: 3px solid var(--limonka); outline-offset: 0; border-color: var(--limonka); }
.p .podpowiedz { font-size: 14px; color: var(--szary); }
.p.zle input, .p.zle select { border-color: #c0392b; background: #fdf3f2; }
.p .blad { font-size: 14px; color: #c0392b; font-weight: 500; }
.p .blad:empty { display: none; }
.dwa { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .dwa { grid-template-columns: 1fr; } }

/* wybór terminu / liczby osób jako duże kafelki */
fieldset.wybor { border: 0; margin: 0 0 22px; padding: 0; }
.kafelki { display: grid; gap: 10px; margin-top: 8px; }
.kafelki.male { grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); }
.kafelek { position: relative; }
.kafelek input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.kafelek > span {
  display: block; border: 1.5px solid var(--kreska); background: var(--biel); border-radius: 3px;
  padding: 16px 18px; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.kafelki.male .kafelek > span { text-align: center; padding: 14px 6px; font-family: var(--naglowek); font-size: 22px; }
.kafelek input:hover + span { border-color: var(--szary-jasny); }
.kafelek input:focus-visible + span { outline: 3px solid var(--limonka); outline-offset: 2px; }
.kafelek input:checked + span { border-color: var(--limonka); background: rgba(130,189,0,.08); box-shadow: inset 0 0 0 1px var(--limonka); }
.kafelek em span { border: 0; background: none; padding: 0; display: inline; }
.kafelek b { display: block; font-family: var(--naglowek); font-size: 22px; line-height: 1.1; }
.kafelek em { font-style: normal; display: block; font-size: 14.5px; color: var(--szary); margin-top: 3px; }

/* zgody */
.zg { display: grid; grid-template-columns: 24px 1fr; gap: 12px; margin-bottom: 14px; font-size: 15.5px; line-height: 1.5; color: var(--tekst-cichy); }
.zg input { width: 21px; height: 21px; margin: 2px 0 0; accent-color: var(--limonka-ciemna); }
.zg a { color: var(--limonka-ciemna); }
.zg.wyrozniona {
  background: rgba(130,189,0,.09); border: 1.5px solid rgba(130,189,0,.45);
  padding: 16px 18px; border-radius: 3px; color: var(--tekst); align-items: start;
}
.zg.wyrozniona b { font-family: var(--naglowek); font-size: 19px; display: block; }

/* uczestnicy */
.osoba { border: 1.5px solid var(--kreska); background: var(--biel); padding: 22px 22px 6px; margin-bottom: 16px; }
.osoba h3 { font-size: 21px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.osoba h3 span { font-family: var(--tresc); font-size: 14px; font-weight: 500; color: var(--szary); text-transform: none; letter-spacing: 0; }

/* nawigacja kroków */
.nawigacja { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.nawigacja .wstecz { background: none; border: 0; color: var(--szary); font-size: 16px; cursor: pointer; text-decoration: underline; padding: 8px; }
.nawigacja .wstecz:hover { color: var(--czern); }

/* podsumowanie z boku */
.podsumowanie { background: var(--snieg); border: 1px solid var(--kreska); border-top: 5px solid var(--limonka); padding: 26px 24px; position: sticky; top: 90px; }
@media (max-width: 900px) { .podsumowanie { position: static; } }
.podsumowanie h3 { font-size: 22px; margin-bottom: 14px; }
.podsumowanie dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; font-size: 15.5px; }
.podsumowanie dt { color: var(--tekst-cichy); }
.podsumowanie dd { margin: 0; text-align: right; font-weight: 600; }
.podsumowanie .suma { border-top: 1px solid var(--kreska); margin-top: 16px; padding-top: 14px; display: flex; justify-content: space-between; align-items: baseline; }
.podsumowanie .suma b { font-family: var(--naglowek); font-size: 34px; }
.podsumowanie .raty { margin-top: 16px; font-size: 14.5px; color: var(--tekst-cichy); display: grid; gap: 8px; }
.podsumowanie .raty span { display: flex; justify-content: space-between; gap: 10px; }
.podsumowanie .pomoc { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--kreska); font-size: 14.5px; color: var(--tekst-cichy); }
.podsumowanie .pomoc a { color: var(--limonka-ciemna); font-weight: 600; text-decoration: none; }

/* ekran końcowy */
.gotowe { text-align: center; padding: clamp(40px, 8vw, 90px) 0; }
.gotowe .znak {
  width: 86px; height: 86px; margin: 0 auto 26px; border-radius: 50%; background: rgba(130,189,0,.15);
  display: grid; place-items: center; color: var(--limonka-ciemna);
}
.gotowe h2 { margin-bottom: 14px; }
.gotowe p { max-width: 56ch; margin-inline: auto; color: var(--tekst-cichy); }
.gotowe .kroki-dalej { margin: 30px auto 0; max-width: 560px; text-align: left; display: grid; gap: 12px; list-style: none; padding: 0; }
.gotowe .kroki-dalej li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; color: var(--tekst-cichy); }
.gotowe .kroki-dalej b { color: var(--tekst); }

/* pasek „zapisujemy postęp” */
.zapis-info {
  display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--szary);
  margin-top: 18px;
}
.zapis-info svg { color: var(--limonka-ciemna); flex: none; }