/* ZdajWOP — darmowy próbny test (/probny-test-wop/).
   Korzysta ze zmiennych i komponentów z landing.css; tu tylko to,
   czego tamta strona nie ma: pytania, pasek z czasem i ekran wyniku. */

.pt { max-width: 780px; margin: 0 auto; padding: 2rem 0 4.5rem; }

.pt-okruszki { font-size: .88rem; color: var(--fg-mut); margin-bottom: 1.75rem; }
.pt-okruszki a { color: var(--fg-mut); }

.pt-head .eyebrow { display: block; margin-bottom: .8rem; }
.pt-head h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); margin-bottom: 1rem; }
.pt-lead { font-size: 1.08rem; color: var(--fg-mut); margin-bottom: 1.75rem; }
.pt-spec { margin-bottom: 1.75rem; }

.pt-startbox { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin-bottom: 2.5rem; }
.pt-startbox p { flex: 1 1 260px; font-size: .9rem; }

/* ---------- pytania ---------- */

.pt-lista { list-style: none; margin: 0; padding: 0; counter-reset: none; }

.pt-q { margin: 0 0 1.25rem; scroll-margin-top: 84px; }
.pt-q fieldset {
  margin: 0; padding: 1.35rem 1.4rem 1.2rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; box-shadow: var(--shadow-s);
  min-width: 0;
}
.pt-q-meta {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .8rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mut); margin-bottom: .6rem;
}
.pt-pkt { color: var(--gold); }
.pt-q-txt { padding: 0; font-size: 1.06rem; font-weight: 620; line-height: 1.45; color: var(--fg); float: left; width: 100%; }
.pt-obszar { clear: both; font-size: .82rem; color: var(--fg-mut); padding-top: .35rem; margin-bottom: .9rem; }

.pt-odpowiedzi { display: grid; gap: .5rem; }
.pt-odp {
  display: grid; grid-template-columns: auto 28px 1fr; align-items: start; gap: .65rem;
  padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; font-size: .97rem; line-height: 1.45;
  transition: border-color .12s, background .12s;
}
.pt-odp:hover { border-color: #c4cad8; background: var(--bg-alt); }
.pt-odp input { margin: .2rem 0 0; accent-color: var(--navy); width: 17px; height: 17px; }
.pt-lit {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  background: var(--bg-alt); color: var(--navy); font-weight: 700; font-size: .82rem;
}
.pt-odp:has(input:checked) { border-color: var(--navy); background: #f1f4fb; }
.pt-odp:has(input:checked) .pt-lit { background: var(--navy); color: #fff; }
.pt-odp:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }

.pt-koniec { display: flex; justify-content: center; margin: 2rem 0 3rem; }

/* ---------- przegląd po zakończeniu ---------- */

.pt-przeglad .pt-odp { cursor: default; }
.pt-przeglad .pt-odp:hover { background: transparent; border-color: var(--line); }
.pt-przeglad .pt-odp:has(input:checked) { background: transparent; }

.pt-dobrze fieldset { border-left: 4px solid var(--ok); }
.pt-zle fieldset { border-left: 4px solid #c2412d; }
.pt-brak fieldset { border-left: 4px solid #a3aab9; }

.pt-przeglad .pt-odp.pt-poprawna,
.pt-przeglad .pt-odp.pt-poprawna:hover { border-color: #9fd2b5; background: #f0f8f3; }
.pt-przeglad .pt-odp.pt-poprawna .pt-lit { background: var(--ok); color: #fff; }
.pt-przeglad .pt-odp.pt-wybrana-zla,
.pt-przeglad .pt-odp.pt-wybrana-zla:hover { border-color: #f0c2b9; background: #fdf3f2; }
.pt-przeglad .pt-odp.pt-wybrana-zla .pt-lit { background: #c2412d; color: #fff; }

.pt-wyj {
  margin-top: .9rem; padding: .85rem 1rem; border-radius: 10px;
  background: var(--gold-soft); border: 1px solid #ecdcb9;
  font-size: .94rem; line-height: 1.6; color: #2b3444;
}

/* ---------- wynik ---------- */

.pt-wynik { margin: 0 0 3rem; scroll-margin-top: 84px; }
.pt-czasminal {
  background: #fdf3f2; border: 1px solid #f3d9d6; border-radius: 10px;
  padding: .7rem 1rem; margin-bottom: 1rem; font-size: .94rem;
}
.pt-wynik-top {
  display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center;
  background: var(--navy); color: #fff; border-radius: 16px; padding: 1.8rem;
}
.pt-wynik-top h2 { color: #fff; font-size: 1.35rem; margin-bottom: .45rem; }
.pt-wynik-top p { color: #c3cee2; font-size: .97rem; }
.pt-liczba { text-align: center; min-width: 120px; }
.pt-liczba b { display: block; font-size: 3.6rem; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--gold); }
.pt-liczba span { font-size: .9rem; color: #93a3c0; }
.pt-dobrze .pt-liczba b, .pt-wynik-top.pt-dobrze .pt-liczba b { color: #6fd39b; }

.pt-wynik h3 { margin: 2rem 0 1rem; }
.pt-obszary { display: grid; gap: 1rem; }
.pt-obs-top { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; margin-bottom: .35rem; }
.pt-obs-top b { white-space: nowrap; }
.pt-obs small { color: var(--fg-mut); font-size: .82rem; }
.pt-bar { height: 8px; border-radius: 99px; background: var(--bg-alt); overflow: hidden; margin-bottom: .25rem; }
.pt-bar i { display: block; height: 100%; background: var(--navy); border-radius: 99px; }

.pt-rada { margin: 1.5rem 0; padding: .9rem 1.1rem; border-left: 4px solid var(--gold); background: var(--gold-soft); border-radius: 0 10px 10px 0; }
.pt-wynik .btn-row { margin: 1.5rem 0 2rem; }
.pt-cta h3 { margin: 0 0 .5rem; }
.pt-cta p { color: var(--fg-mut); margin-bottom: 1.2rem; }
.pt-cta .btn-row { margin: 0; }

/* ---------- treść pod testem ---------- */

.pt-info h2 { font-size: 1.35rem; margin: 2.5rem 0 1rem; }
.pt-info > p { color: #2b3444; margin-bottom: .9rem; }
.pt-faq { max-width: none; }
.pt-oficjalny { margin-top: 2rem; font-size: .92rem; color: var(--fg-mut); }
.pt-oficjalny a { color: var(--blue); }

/* ---------- pasek z czasem ---------- */

.pt-pasek {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(13,27,52,.96); color: #fff;
  padding: .65rem 0 calc(.65rem + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(13,27,52,.18);
}
.pt-pasek-in { display: flex; align-items: center; gap: 1.25rem; max-width: 780px; }
.pt-czas { font-size: 1.3rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pt-czas-malo { color: #ff9b85; }
.pt-postep { color: #c3cee2; font-size: .92rem; margin-right: auto; font-variant-numeric: tabular-nums; }
.pt-pasek .btn { padding: .55rem 1.1rem; font-size: .92rem; background: var(--gold); color: #241a06; }

/* Żeby pasek nie zasłaniał ostatniego pytania ani stopki. */
body.pt-trwa { padding-bottom: 72px; }

@media (max-width: 560px) {
  .pt { padding-top: 1.25rem; }
  .pt-q fieldset { padding: 1.1rem 1rem 1rem; }
  .pt-odp { grid-template-columns: auto 24px 1fr; gap: .5rem; padding: .65rem .7rem; font-size: .95rem; }
  .pt-lit { width: 24px; height: 24px; }
  .pt-wynik-top { grid-template-columns: 1fr; text-align: center; padding: 1.5rem 1.25rem; gap: 1rem; }
  .pt-startbox .btn { width: 100%; }
}

/* Zapis na newsletter pod wynikiem — style formularza są w landing.css. */
.pt-wynik .nl-box { margin: 0 0 1.5rem; }
.pt-wynik .nl-box h3 { margin: 0 0 .5rem; }