/* ==========================================================================
   System rezerwacji — warstwa wizualna.

   Dokladana do `podstrona.css`, nie zamiast niego. Naglowek, stopka, fala,
   typografia i przyciski zostaja te same, co na reszcie strony. Ponizej sa
   wylacznie elementy, ktorych wczesniej nie bylo: kreator, kalendarz,
   sloty godzinowe i podsumowanie.
   ========================================================================== */

:root{
  --purple-soft:#e3defb;
  --purple:#6f64d6;
  --purple-deep:#4f4699;
  --yellow-soft:#fdf1c7;
  --yellow:#ffd24a;
  --mint-soft:#d3f5ea;
  --mint:#28b98a;
  --rose-soft:#fbdada;

  --wolny:#177b68;
  --wolny-bg:#d3f5ea;
  --czesciowo:#a35c00;
  --czesciowo-bg:#fdeccc;
  --zajety:#b8322b;
  --zajety-bg:#fbdada;
  --niedostepny-bg:#f3f1f7;

  --karta-cien:0 14px 30px -18px rgba(34,28,51,0.35);
}

/* ============ WSKAZNIK KROKOW ============ */
/* `podstrona.css` stylizuje goly selektor `nav` (pasek naglowka), wiec kazdy
   inny <nav> na stronie dziedziczy flexa, tlo i wysokosc naglowka.
   Zerujemy to tutaj zamiast zwezac tamten selektor — istniejace podstrony
   zostaja nietkniete. */
nav.steps-bar{
  display:block;
  position:static;
  z-index:auto;
  background:none;
  min-height:0;
  max-width:820px;
  margin:26px auto 0;
  padding:0 24px;
}

/* `display:block` powyzej bije domyslne dzialanie atrybutu `hidden`,
   wiec ukrycie kreatora (tryb telefoniczny) trzeba zapisac wprost. */
nav.steps-bar[hidden]{ display:none; }

.steps-list{
  display:flex;
  align-items:flex-start;
  list-style:none;
  counter-reset:krok;
}

.steps-list li{
  flex:1 1 0;
  position:relative;
  text-align:center;
  padding-top:44px;
  font-weight:700;
  font-size:0.84rem;
  color:var(--ink-muted);
  line-height:1.3;
}

/* linia laczaca kolejne kroki */
.steps-list li::after{
  content:"";
  position:absolute;
  top:17px;
  left:calc(-50% + 22px);
  width:calc(100% - 44px);
  height:3px;
  border-radius:2px;
  background:var(--line-dash);
}
.steps-list li:first-child::after{ display:none; }

.steps-list li .step-dot{
  counter-increment:krok;
  content:counter(krok);
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:36px;
  height:36px;
  border-radius:50%;
  background:#ffffff;
  border:3px solid var(--line-dash);
  color:var(--ink-muted);
  font-family:'DynaPuff', cursive;
  font-size:0.95rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.steps-list li[data-state="done"] .step-dot{
  background:var(--mint);
  border-color:var(--mint);
  color:#ffffff;
}
.steps-list li[data-state="done"]::after{ background:var(--mint); }
.steps-list li[data-state="done"]{ color:var(--ink-soft); }

.steps-list li[data-state="current"] .step-dot{
  background:var(--accent-red);
  border-color:var(--accent-red);
  color:#ffffff;
  box-shadow:0 0 0 5px rgba(232,67,47,0.16);
}
.steps-list li[data-state="current"]{ color:var(--ink); }

@media (max-width:520px){
  .steps-list li{ font-size:0.7rem; padding-top:40px; }
  .steps-list li .step-dot{ width:30px; height:30px; font-size:0.85rem; }
  .steps-list li::after{ top:14px; left:calc(-50% + 18px); width:calc(100% - 36px); }
}

/* ============ RAMA KREATORA ============ */
.booking-shell{
  max-width:1000px;
  margin:0 auto;
  padding:34px 24px 90px;
}

.step-panel[hidden]{ display:none; }

.step-head{ margin-bottom:26px; text-align:center; }

.step-head h2{
  font-family:'DynaPuff', cursive;
  font-weight:600;
  font-size:clamp(1.45rem, 3vw, 2rem);
  color:var(--ink);
}

.step-head p{
  margin:10px auto 0;
  max-width:560px;
  color:#6b6478;
  font-weight:600;
  font-size:1rem;
  line-height:1.6;
}

/* pasek nawigacji miedzy krokami */
.step-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-top:32px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:'Nunito', sans-serif;
  font-weight:700;
  font-size:15px;
  padding:15px 30px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  text-decoration:none;
  transition:background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary{
  background:var(--accent-red);
  color:#fff;
  box-shadow:0 12px 28px -10px rgba(232,67,47,0.55);
}
.btn-primary:hover:not(:disabled){ background:var(--accent-red-hover); transform:translateY(-2px); }

.btn-ghost{
  background:#ffffff;
  color:var(--ink-soft);
  border:2px solid var(--line-dash);
}
.btn-ghost:hover:not(:disabled){ border-color:var(--purple); color:var(--purple-deep); }

.btn:disabled{ opacity:0.45; cursor:not-allowed; box-shadow:none; transform:none; }

.btn:focus-visible,
.calendar-day:focus-visible,
.slot:focus-visible,
.rental-option:focus-within{
  outline:3px solid #ffb703;
  outline-offset:3px;
}

/* ============ KARTY ATRAKCJI ============
   Swiadomie dziedzicza wyglad kart oferty ze strony glownej — klient ma
   poczucie, ze wybiera z tej samej polki, tylko teraz moze kliknac. */
.attraction-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}

.attraction-card{
  border-radius:24px;
  padding:22px;
  display:flex;
  flex-direction:column;
  border:3px solid transparent;
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.attraction-card.purple{ background:var(--purple-soft); }
.attraction-card.yellow{ background:var(--yellow-soft); }
.attraction-card.mint{ background:var(--mint-soft); }

.attraction-card:hover{ transform:translateY(-5px); box-shadow:var(--karta-cien); }
.attraction-card[aria-selected="true"]{ border-color:var(--accent-red); }

.attraction-photo{
  position:relative;
  height:180px;
  border-radius:16px;
  margin-bottom:18px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.attraction-card.purple .attraction-photo{ background:linear-gradient(135deg,#9a8fe4,#6f64d6); }
.attraction-card.yellow .attraction-photo{ background:linear-gradient(135deg,#ffcf5c,#ff9f1c); }
.attraction-card.mint   .attraction-photo{ background:linear-gradient(135deg,#4fd8b0,#28b98a); }

.attraction-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.attraction-photo .photo-slot{
  font-weight:700;
  font-size:0.8rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.92);
  background:rgba(0,0,0,0.18);
  padding:8px 16px;
  border-radius:100px;
}

.attraction-card h3{
  font-family:'DynaPuff', cursive;
  font-weight:600;
  font-size:1.25rem;
  color:var(--ink);
  margin-bottom:10px;
}

.attraction-card > p{
  color:var(--ink-soft);
  font-weight:600;
  font-size:0.93rem;
  line-height:1.55;
  margin-bottom:16px;
}

.attraction-specs{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 0 18px;
}

.attraction-specs li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  font-size:0.88rem;
  font-weight:700;
  color:#3a3548;
  padding-bottom:8px;
  border-bottom:1px dashed rgba(0,0,0,0.12);
}
.attraction-specs li:last-child{ border-bottom:none; padding-bottom:0; }
.attraction-specs .spec-key{ font-weight:600; color:#6b6478; }

.attraction-card .btn{ width:100%; margin-top:auto; }

@media (max-width:980px){ .attraction-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:660px){ .attraction-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } }

/* ============ PASEK WYBRANEJ ATRAKCJI ============ */
.chosen-bar{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  background:#ffffff;
  border:2px solid var(--line-dash);
  border-radius:18px;
  padding:14px 18px;
  margin-bottom:24px;
}

.chosen-bar .chip{
  width:44px;
  height:44px;
  border-radius:12px;
  flex-shrink:0;
  background:linear-gradient(135deg,#9a8fe4,#6f64d6);
}
.chosen-bar .chip.yellow{ background:linear-gradient(135deg,#ffcf5c,#ff9f1c); }
.chosen-bar .chip.mint{ background:linear-gradient(135deg,#4fd8b0,#28b98a); }

.chosen-bar .chosen-name{
  font-family:'DynaPuff', cursive;
  font-size:1.05rem;
  color:var(--ink);
}
.chosen-bar .chosen-meta{
  font-size:0.85rem;
  font-weight:700;
  color:var(--ink-muted);
}
.chosen-bar .btn{ margin-left:auto; padding:10px 20px; font-size:14px; }

/* ============ KALENDARZ ============ */
.calendar-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:28px;
  align-items:start;
}

@media (max-width:860px){
  .calendar-layout{ grid-template-columns:1fr; }
}

.calendar{
  background:#ffffff;
  border:2px solid var(--line-dash);
  border-radius:22px;
  padding:18px;
}

.calendar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.calendar-title{
  font-family:'DynaPuff', cursive;
  font-size:1.15rem;
  color:var(--ink);
  text-align:center;
  flex:1;
}

.calendar-nav{
  width:40px;
  height:40px;
  border-radius:12px;
  border:2px solid var(--line-dash);
  background:#fff;
  color:var(--ink);
  font-size:1.1rem;
  font-weight:800;
  cursor:pointer;
  flex-shrink:0;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.calendar-nav:hover:not(:disabled){ border-color:var(--purple); color:var(--purple-deep); }
.calendar-nav:disabled{ opacity:0.35; cursor:not-allowed; }

.calendar-weekdays,
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
}

.calendar-weekdays{
  margin-bottom:6px;
}
.calendar-weekdays span{
  text-align:center;
  font-size:0.74rem;
  font-weight:800;
  color:var(--ink-muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding-bottom:4px;
}

.calendar-day{
  aspect-ratio:1 / 1;
  min-height:38px;
  border:2px solid transparent;
  border-radius:12px;
  background:var(--niedostepny-bg);
  color:#a8a2b5;
  font-family:'Nunito', sans-serif;
  font-weight:800;
  font-size:0.92rem;
  cursor:not-allowed;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:0;
  transition:transform 0.15s ease, border-color 0.15s ease;
}

.calendar-day.empty{ background:transparent; border:none; }

.calendar-day[data-status="free"]{
  background:var(--wolny-bg);
  color:var(--wolny);
  cursor:pointer;
}
.calendar-day[data-status="partial"]{
  background:var(--czesciowo-bg);
  color:var(--czesciowo);
  cursor:pointer;
}
.calendar-day[data-status="full"],
.calendar-day[data-status="blocked"]{
  background:var(--zajety-bg);
  color:var(--zajety);
}

.calendar-day[data-status="free"]:hover,
.calendar-day[data-status="partial"]:hover{
  transform:scale(1.07);
  border-color:currentColor;
}

.calendar-day[aria-pressed="true"]{
  background:var(--accent-red);
  border-color:var(--accent-red);
  color:#ffffff;
  box-shadow:0 8px 18px -8px rgba(232,67,47,0.7);
}

/* kropka pod dzisiejsza data */
.calendar-day.today::after{
  content:"";
  position:absolute;
  bottom:5px;
  left:50%;
  transform:translateX(-50%);
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
}

.calendar-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed var(--line-dash);
}

.calendar-legend span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:0.8rem;
  font-weight:700;
  color:var(--ink-soft);
}

.calendar-legend i{
  width:14px;
  height:14px;
  border-radius:5px;
  display:inline-block;
}
.legend-free{ background:var(--wolny-bg); border:2px solid var(--wolny); }
.legend-partial{ background:var(--czesciowo-bg); border:2px solid var(--czesciowo); }
.legend-full{ background:var(--zajety-bg); border:2px solid var(--zajety); }
.legend-none{ background:var(--niedostepny-bg); border:2px solid #d5d1de; }

/* ============ WARIANTY WYNAJMU ============ */
.day-panel{
  background:#ffffff;
  border:2px solid var(--line-dash);
  border-radius:22px;
  padding:22px;
}

.day-panel h3{
  font-family:'DynaPuff', cursive;
  font-size:1.1rem;
  color:var(--ink);
  margin-bottom:4px;
}

.day-panel .day-sub{
  color:var(--ink-muted);
  font-weight:700;
  font-size:0.85rem;
  margin-bottom:18px;
}

.field-legend{
  font-weight:800;
  font-size:0.88rem;
  color:#3a3548;
  margin:0 0 10px;
}

.rental-options{
  display:flex;
  flex-direction:column;
  gap:10px;
  border:none;
  padding:0;
  margin:0 0 22px;
}

.rental-option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:2px solid var(--line-dash);
  border-radius:14px;
  cursor:pointer;
  background:#fff;
  transition:border-color 0.18s ease, background 0.18s ease;
}
.rental-option:hover{ border-color:var(--purple); }

.rental-option input{
  width:20px;
  height:20px;
  accent-color:var(--purple);
  flex-shrink:0;
  margin:0;
}

.rental-option .ro-label{
  font-weight:700;
  font-size:0.97rem;
  color:var(--ink);
}
.rental-option .ro-note{
  display:block;
  font-weight:700;
  font-size:0.78rem;
  color:var(--ink-muted);
}
.rental-option .ro-price{
  margin-left:auto;
  font-family:'DynaPuff', cursive;
  font-size:1.05rem;
  color:var(--purple-deep);
  white-space:nowrap;
}

.rental-option:has(input:checked){
  border-color:var(--accent-red);
  background:#fff7f6;
}
.rental-option:has(input:disabled){
  opacity:0.5;
  cursor:not-allowed;
  background:var(--niedostepny-bg);
}

/* ============ GODZINY ============ */
.slot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:10px;
}

.slot{
  padding:13px 6px;
  border-radius:12px;
  border:2px solid var(--line-dash);
  background:#ffffff;
  font-family:'Nunito', sans-serif;
  font-weight:800;
  font-size:0.97rem;
  color:var(--ink);
  cursor:pointer;
  transition:border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.slot:hover{ border-color:var(--purple); transform:translateY(-2px); }

.slot[aria-pressed="true"]{
  background:var(--accent-red);
  border-color:var(--accent-red);
  color:#ffffff;
  box-shadow:0 10px 20px -10px rgba(232,67,47,0.65);
}

/* ============ PODSUMOWANIE ============ */
.summary-card{
  background:linear-gradient(150deg, var(--purple-soft), #efecfd);
  border-radius:22px;
  padding:26px;
}

.summary-card h3{
  font-family:'DynaPuff', cursive;
  font-size:1.15rem;
  color:var(--ink);
  margin-bottom:16px;
}

.summary-list{ list-style:none; margin:0; }

.summary-list li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:11px 0;
  border-bottom:1px dashed rgba(79,70,153,0.22);
  font-size:0.93rem;
}
.summary-list li:last-child{ border-bottom:none; }

.summary-list .k{ color:#6b6478; font-weight:700; flex-shrink:0; }
.summary-list .v{ color:var(--ink); font-weight:800; text-align:right; }

.summary-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:16px;
  padding-top:16px;
  border-top:2px solid rgba(79,70,153,0.24);
}
.summary-total .k{ font-weight:800; color:var(--ink); }
.summary-total .v{
  font-family:'DynaPuff', cursive;
  font-size:1.6rem;
  color:var(--accent-red);
}

.summary-note{
  margin-top:14px;
  font-size:0.82rem;
  font-weight:700;
  color:#6b6478;
  line-height:1.55;
}

/* ============ FORMULARZ ============ */
.form-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
  gap:30px;
  align-items:start;
}
@media (max-width:860px){
  .form-layout{ grid-template-columns:1fr; }
  /* na telefonie podsumowanie idzie nad formularz — klient najpierw
     widzi, co zamawia, a dopiero potem wpisuje dane */
  .form-layout .summary-side{ order:-1; }
}

.form-section-title{
  font-family:'DynaPuff', cursive;
  font-size:1.05rem;
  color:var(--ink);
  margin:26px 0 14px;
}
.form-section-title:first-child{ margin-top:0; }

/* Zgoda + miejsce na komunikat bledu. `podstrona.css` obsluguje `.error-msg`
   tylko wewnatrz `.field`, wiec dla zgod dokladamy te sama regule. */
.consent-row{ margin-bottom:14px; }
.consent{ margin-bottom:0; }

.consent-row > .error-msg{
  display:none;
  margin:6px 0 0 32px;
  font-size:0.83rem;
  font-weight:700;
  color:var(--accent-red);
}
.consent-row.has-error > .error-msg{ display:block; }
.consent-row.has-error .consent span{ color:var(--accent-red); }

/* ============ KOMUNIKATY, LADOWANIE, PUSTE STANY ============ */
.alert{
  border-radius:14px;
  padding:16px 18px;
  font-weight:700;
  font-size:0.93rem;
  line-height:1.55;
  margin-bottom:18px;
}
.alert[hidden]{ display:none; }
.alert-error{ background:var(--rose-soft); color:#8f231d; }
.alert-info{ background:var(--yellow-soft); color:#6b4d00; }

.loading{
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--ink-muted);
  font-weight:700;
  font-size:0.92rem;
  padding:20px 0;
}

.spinner{
  width:19px;
  height:19px;
  border-radius:50%;
  border:3px solid var(--line-dash);
  border-top-color:var(--purple);
  animation:spin 0.7s linear infinite;
  flex-shrink:0;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Szkielet zamiast przeskakujacej tresci — wysokosc jest taka sama
   jak docelowej listy, wiec uklad sie nie przesuwa. */
.skeleton{
  background:linear-gradient(90deg, #f1eff6 25%, #e7e4ef 50%, #f1eff6 75%);
  background-size:220% 100%;
  animation:shimmer 1.3s infinite;
  border-radius:12px;
}
@keyframes shimmer{ to{ background-position:-220% 0; } }
.skeleton-slot{ height:46px; }
.skeleton-row{ height:56px; margin-bottom:10px; }

.empty-state{
  text-align:center;
  padding:32px 20px;
  background:var(--niedostepny-bg);
  border-radius:16px;
}
.empty-state .emoji{ font-size:2rem; display:block; margin-bottom:10px; }
.empty-state p{
  color:var(--ink-soft);
  font-weight:700;
  font-size:0.95rem;
  line-height:1.6;
  max-width:340px;
  margin:0 auto 16px;
}
.empty-state .btn{ margin:4px; }

/* ============ EKRAN POTWIERDZENIA ============ */
.success-card{
  max-width:640px;
  margin:0 auto;
  background:#ffffff;
  border:2px solid var(--line-dash);
  border-radius:26px;
  padding:44px 32px;
  text-align:center;
  box-shadow:var(--karta-cien);
}

.success-emoji{ font-size:3rem; display:block; margin-bottom:14px; }

.success-card h2{
  font-family:'DynaPuff', cursive;
  font-size:1.7rem;
  color:var(--ink);
  margin-bottom:10px;
}

.booking-number{
  display:inline-block;
  margin:18px 0 6px;
  padding:14px 30px;
  border-radius:100px;
  background:var(--purple-deep);
  color:#ffffff;
  font-family:'DynaPuff', cursive;
  font-size:1.3rem;
  letter-spacing:0.03em;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:16px 0 4px;
  padding:11px 22px;
  border-radius:100px;
  background:var(--yellow-soft);
  color:#6b4d00;
  font-weight:800;
  font-size:0.92rem;
}
.status-pill::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:#c98700;
}

.success-card > p{
  color:var(--ink-soft);
  font-weight:600;
  line-height:1.65;
  max-width:460px;
  margin:12px auto 0;
}

.success-card .summary-card{ text-align:left; margin-top:26px; }
.success-card .step-nav{ justify-content:center; }

/* ============ NAJWĘŻSZE EKRANY ============
   Kalendarz musi zmieścić 7 kolumn. Odzyskujemy miejsce, ścinając odstępy:
   najpierw ramy kreatora, potem samej karty kalendarza. Przy 320 px daje to
   komórkę ok. 35 px — nadal czytelną i wygodną do trafienia palcem. */
@media (max-width:520px){
  .booking-shell{ padding-left:16px; padding-right:16px; }
  .calendar{ padding:12px; }
  .calendar-weekdays, .calendar-grid{ gap:4px; }
  .calendar-day{ min-height:34px; font-size:0.85rem; border-width:1px; }
  .calendar-weekdays span{ font-size:0.66rem; }
  .day-panel{ padding:16px; }
  .summary-card{ padding:20px; }
  .success-card{ padding:32px 20px; }
  .slot-grid{ grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); }
  .rental-option{ padding:12px 13px; gap:10px; }
  .rental-option .ro-price{ font-size:0.95rem; }
  .step-nav .btn{ flex:1 1 auto; }
}

@media (max-width:360px){
  .booking-shell{ padding-left:12px; padding-right:12px; }
  .calendar{ padding:9px; }
  .calendar-weekdays, .calendar-grid{ gap:3px; }
  .calendar-day{ font-size:0.8rem; }
}

/* ============ RUCH OGRANICZONY ============ */
@media (prefers-reduced-motion: reduce){
  .spinner{ animation:none; border-top-color:var(--purple); }
  .skeleton{ animation:none; }
  .attraction-card:hover,
  .calendar-day:hover,
  .slot:hover,
  .btn:hover{ transform:none; }
}