/* Fenek Media: strona zapisów /kurs (lista oczekujących). 1:1 z Figmy: plik WzevYX4sZ2vrtEm5hQWA3A,
   strona "zapisy kurs" (2816:2), ramki 1440 (2816:3) i 390 (2819:1136). Fonty, tokeny i .check/.hp z style.css. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.zapisy__page { --m: 24px; position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; overflow: clip; }

/* ---------- Tło ---------- */
.zapisy__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.zapisy__glow { position: absolute; left: 50%; top: 53%; width: 560px; height: 560px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 197, 8, .16), rgba(255, 197, 8, 0)); }
/* WKRÓTCE: kontur bez wypełnienia, szerokość wiersza = szerokość strony minus marginesy (proporcja z Figmy 1342/302). */
.zapisy__words { position: absolute; left: var(--m); top: 9px; display: flex; flex-direction: column;
  font: 700 calc((100vw - 2 * var(--m)) / 4.444) / 1.055 var(--display); letter-spacing: -0.02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 197, 8, .26); user-select: none; }
.zapisy__vignette { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(21, 21, 21, .15), rgba(21, 21, 21, .55) 55%, rgba(21, 21, 21, .95)); }

/* ---------- Układ ---------- */
.zapisy__header { padding: 20px var(--m) 0; }
.zapisy__logo { display: inline-block; vertical-align: top; }
.zapisy__logo img { width: 98.4px; height: auto; }

.zapisy__main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 26px var(--m) 41px; }
.zapisy__content { position: relative; isolation: isolate; width: min(640px, 100%); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
/* Przyciemnienie pod treścią (bg/spotlight), żeby kontur WKRÓTCE nie walczył z tekstem. */
.zapisy__content::before { content: ""; position: absolute; z-index: -1; left: 50%; top: calc(50% + 69px); width: 700px; height: 900px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(21, 21, 21, .94), rgba(21, 21, 21, .75) 60%, rgba(21, 21, 21, .2) 99.5%, rgba(21, 21, 21, 0)); }

.zapisy__footer { display: flex; justify-content: space-between; gap: 16px; padding: 0 var(--m) 20px; font-size: 12px; line-height: 20px; color: var(--muted); }
.zapisy__footer a { text-decoration: underline; text-underline-offset: 2px; }
.zapisy__footer a:hover { color: var(--text); }

/* ---------- Treść ---------- */
.zapisy__title { font: 700 52px / 1 var(--display); letter-spacing: -0.02em; text-transform: uppercase; color: var(--text); }
.zapisy__title span { display: block; }
.zapisy__accent { color: var(--accent); }

.zapisy__intro { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.zapisy__lead { font: 600 18px / 26px var(--body); letter-spacing: -0.01em; color: var(--text); }
.zapisy__divider { width: 40px; height: 2px; border-radius: 1px; background: var(--accent); }
.zapisy__text { font: 400 18px / 28px var(--body); color: var(--text); }

/* ---------- Formularz ---------- */
.zapisy__card { width: 100%; text-align: left; padding: 18px 20px; border-radius: 20px; border: 1px solid var(--hairline);
  background: rgba(28, 28, 28, .97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.zapisy__form { display: flex; flex-direction: column; gap: 12px; }
.zapisy__row { display: flex; flex-direction: column; gap: 10px; }

.zapisy__input { width: 100%; height: 52px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14);
  background: var(--bg); color: var(--text); font: 400 16px / 1 var(--body); outline: none; transition: border-color .2s, box-shadow .2s; }
.zapisy__input::placeholder { color: var(--muted); opacity: 1; }
.zapisy__input:focus { border-color: rgba(255, 197, 8, .6); box-shadow: 0 0 0 4px rgba(255, 197, 8, .12); }
.zapisy__input[aria-invalid="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.zapisy__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font: 600 16px / 1 var(--body); white-space: nowrap;
  box-shadow: 0 8px 28px rgba(255, 197, 8, .35); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease; }
.zapisy__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(255, 197, 8, .5); }
.zapisy__btn:active { transform: translateY(0) scale(.98); }
.zapisy__btn span { display: inline-block; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.zapisy__btn:hover span { transform: translateX(3px); }
.zapisy__btn.is-loading { pointer-events: none; opacity: .75; }
.zapisy__btn.is-loading span { animation: nudge .8s ease-in-out infinite alternate; }

.zapisy__zgody { display: flex; flex-direction: column; gap: 14px; }
.zgoda { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 12px; line-height: 1.5; color: var(--muted); }
.zgoda input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.zgoda__box { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, .42); background: var(--bg);
  display: grid; place-items: center; transition: background .15s, border-color .15s; }
.zgoda__box svg { width: 14px; height: 14px; fill: none; stroke: var(--on-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s; }
.zgoda:hover .zgoda__box { border-color: rgba(255, 255, 255, .6); }
.zgoda input:checked + .zgoda__box { background: var(--accent); border-color: var(--accent); }
.zgoda input:checked + .zgoda__box svg { opacity: 1; }
.zgoda input:focus-visible + .zgoda__box { outline: 2px solid var(--accent); outline-offset: 3px; }
.zgoda input[aria-invalid="true"] + .zgoda__box { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.zgoda__text { flex: 1; min-width: 0; }
.zgoda__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.zgoda__req { color: var(--accent); }

.zapisy__note { margin-right: -16px; font-size: 12px; line-height: 1.25; color: var(--muted); }
.zapisy__error { font-size: 14px; line-height: 1.4; color: var(--accent); }

.zapisy__done { display: grid; justify-items: center; gap: 12px; padding: 20px 8px; text-align: center; outline: none; }
.zapisy__done-title { font: 700 28px / 1.1 var(--display); letter-spacing: -0.02em; text-transform: uppercase; color: var(--text); }
.zapisy__done-text { font-size: 15px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.zapisy__done-text strong { display: inline-block; max-width: 100%; color: var(--text); font-weight: 600; }

/* ---------- Desktop (ramka 1440) ---------- */
@media (min-width: 761px) {
  .zapisy__page { --m: clamp(24px, 3.4vw, 49px); }
  .zapisy__glow { top: 57.8%; width: 1100px; height: 800px; }
  .zapisy__words { top: clamp(9px, 2.5vw, 36px); -webkit-text-stroke: 1.5px rgba(255, 197, 8, .6); }
  .zapisy__header { padding: 36px 48px 0; }
  .zapisy__logo img { width: 123px; }
  .zapisy__main { padding: 23px 48px 90px; }
  .zapisy__content { gap: 24px; }
  .zapisy__content::before { top: calc(50% + 39px); width: 1200px; height: 760px;
    background: radial-gradient(closest-side, rgba(21, 21, 21, .88), rgba(21, 21, 21, .5) 55%, rgba(21, 21, 21, 0)); }
  .zapisy__footer { padding: 0 48px 28px; }
  .zapisy__title { font-size: clamp(64px, 6.67vw, 96px); }
  .zapisy__intro { gap: 16px; }
  .zapisy__lead { font-size: 24px; line-height: 32px; }
  .zapisy__card { padding: 28px; border-radius: 24px; background: rgba(28, 28, 28, .92); }
  .zapisy__form { gap: 20px; }
  .zapisy__row { flex-direction: row; gap: 12px; }
  .zapisy__input { flex: 1; min-width: 0; height: 56px; }
  .zapisy__btn { height: 56px; }
  .zgoda { font-size: 13px; }
  .zapisy__note { margin-right: 0; }
  .zapisy__done { padding: 28px 16px; }
  .zapisy__done-title { font-size: 36px; }
}

/* Bardzo szerokie ekrany: napis nie rośnie w nieskończoność, wiersze wyśrodkowane. */
@media (min-width: 1800px) {
  .zapisy__words { left: 50%; transform: translateX(-50%); font-size: 380px; }
}

/* ---------- Wejście treści (czysty CSS: treść widoczna nawet bez JS) ---------- */
@keyframes zapisyIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes zapisyFade { from { opacity: 0; } to { opacity: 1; } }
.zapisy [data-in] { animation: zapisyIn .9s cubic-bezier(.2, .8, .2, 1) both; }
.zapisy__intro[data-in] { animation-delay: .1s; }
.zapisy__card[data-in] { animation-delay: .2s; }
.zapisy__words { animation: zapisyFade 1.6s ease .1s both; }

@media (prefers-reduced-motion: reduce) {
  .zapisy [data-in], .zapisy__words { animation: none; }
  .zapisy__btn, .zapisy__btn span { transition: none; }
}