/* ==========================================================================
   Strony ścieżki zakupowej — checkout, podziękowanie, odzyskiwanie linków
   Dziedziczy zmienne i przyciski ze styl.css
   ========================================================================== */

.strona-sklepu { display: flex; flex-direction: column; min-height: 100vh; }
.strona-sklepu main { flex: 1; }

.pasek {
  background: #fff; border-bottom: 1px solid var(--linia); padding: 16px 0;
}
.pasek .powrot {
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 0.9rem; font-weight: 600; color: var(--akcent); text-decoration: none;
}
.pasek .powrot:hover { text-decoration: underline; }

.panel { max-width: 620px; padding-top: 52px; padding-bottom: 64px; }
.panel h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); color: var(--akcent); margin-bottom: 22px; }
.drobne { font-size: 0.86rem; color: var(--szary); }
.srodkowany { text-align: center; }

/* ---------- podsumowanie zamówienia ---------- */
.podsumowanie {
  display: flex; justify-content: space-between; align-items: center; gap: 22px;
  background: #fff; border: 1px solid var(--linia); border-radius: 5px;
  padding: 22px 24px; margin-bottom: 28px;
}
.podsumowanie p { margin: 5px 0 0; }
.podsumowanie .kwota {
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 1.7rem; font-weight: 600; color: var(--akcent);
  white-space: nowrap; text-align: right;
}
.podsumowanie .kwota small {
  display: block; font-size: 0.44em; font-weight: 400; color: var(--szary);
}

/* ---------- formularz ---------- */
.formularz label {
  display: block; font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 0.9rem; font-weight: 600; color: var(--akcent); margin: 20px 0 7px;
}
.formularz input[type="email"],
.formularz input[type="text"] {
  width: 100%; font-family: inherit; font-size: 1rem; padding: 12px 14px;
  border: 1.5px solid var(--linia); border-radius: 4px; background: #fff;
  color: var(--tekst);
}
.formularz input:focus {
  outline: none; border-color: var(--akcent);
  box-shadow: 0 0 0 3px rgba(26, 74, 87, 0.13);
}
.formularz fieldset { border: none; padding: 0; margin: 0; }
.formularz hr { border: none; border-top: 1px solid var(--linia); margin: 30px 0 6px; }

.formularz label.checkbox {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  font-family: Georgia, serif; font-weight: 400; font-size: 0.93rem;
  color: var(--tekst); line-height: 1.5; margin: 18px 0; cursor: pointer;
}
.formularz label.checkbox input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--akcent); }
.formularz label.rozwijacz {
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  font-weight: 600; color: var(--akcent); margin-top: 24px;
}

.btn.szeroki { width: 100%; margin-top: 26px; font-size: 1.05rem; padding: 17px 30px; }

.alert {
  background: #FDECEA; border-left: 3px solid #C0392B; color: #8B2A1F;
  padding: 13px 17px; border-radius: 3px; font-size: 0.94rem; margin-bottom: 22px;
}
.sukces {
  background: #EAF4EC; border-left: 3px solid #2E7D4F; color: #1E5636;
  padding: 15px 19px; border-radius: 3px;
}

.klauzula {
  font-size: 0.78rem; color: var(--szary); line-height: 1.55;
  margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--linia);
}

/* ---------- oczekiwanie na płatność ---------- */
.pasek-postepu {
  height: 4px; background: var(--papier-ciemny); border-radius: 2px;
  overflow: hidden; margin-top: 26px;
}
.pasek-postepu span {
  display: block; height: 100%; width: 38%; background: var(--akcent);
  border-radius: 2px; animation: przesuw 1.5s ease-in-out infinite;
}
@keyframes przesuw {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(365%); }
}
@media (prefers-reduced-motion: reduce) {
  .pasek-postepu span { animation: none; width: 100%; opacity: 0.4; }
}

#pobierania { margin: 26px 0; }

@media (max-width: 560px) {
  .podsumowanie { flex-direction: column; align-items: flex-start; }
  .podsumowanie .kwota { text-align: left; }
}