/* ==========================================================================
   Egzamin8klasa — /misja-pro (checkout "Misja: 100% PRO") w klimacie HUD.
   Ładowany PO magic.css, tylko na szablonie misja-pro (nie ładuje
   game-gaming.css, więc tokeny definiujemy lokalnie — identyczne z
   gaming-home.css / game-gaming.css). Tylko kolory / fonty / ramki /
   cienie — bez zmian layoutu i bez animacji (prefers-reduced-motion
   nie jest naruszany).
   ========================================================================== */

/* --- Tokeny: identyczne z game-gaming.css -------------------------------- */
:root{
  --bg:#06070d;
  --bg-2:#0a0c16;
  --panel:#0d1020;
  --panel-2:#131736;
  --ink:#eef1ff;
  --muted:#97a1c6;
  --muted-2:#6f7aa3;
  --primary:#7c5cff;
  --primary-2:#9d85ff;
  --mint:#25f4c8;
  --gold:#ffd23f;
  --pop:#ff2e88;
  --line:rgba(126,150,255,.18);
  --line-strong:rgba(126,150,255,.4);
  --font-h:'Chakra Petch','Manrope',system-ui,sans-serif;
  --gh-clip:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}

/* --- Bazowe tło strony (jak w game-gaming.css) --------------------------- */
body.page-misja-pro{
  background:
    radial-gradient(ellipse 80% 50% at 88% -10%, rgba(124,92,255,.12), transparent 62%),
    radial-gradient(ellipse 55% 40% at 8% 32%, rgba(37,244,200,.06), transparent 60%),
    var(--bg);
  color:var(--ink);
}
body.page-misja-pro ::selection{background:#25f4c8;color:#04060d}

/* --- Hero: Chakra Petch, gradientowy <em> -------------------------------- */
.page-misja-pro .hero h1{
  font-family:var(--font-h);font-weight:700;letter-spacing:-.01em;
  text-transform:uppercase;text-shadow:0 0 40px rgba(124,92,255,.35);
}
.page-misja-pro .hero h1 em{
  background:linear-gradient(92deg,#25f4c8 10%,#7c5cff 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 34px rgba(37,244,200,.3);
}
.page-misja-pro .hero .lead{color:#c5cbe8}
.page-misja-pro .hero .eyebrow{
  font-family:var(--font-h);color:var(--mint);letter-spacing:.16em;
  background:rgba(37,244,200,.06);border-color:var(--line);
}
.page-misja-pro .hero .eyebrow::before{content:'[';color:var(--pop);background:none;width:auto;height:auto;border-radius:0}
.page-misja-pro .hero .eyebrow::after{content:']';color:var(--pop)}

/* --- Nagłówki sekcji: Chakra Petch + neonowa kreska 74px ----------------- */
.page-misja-pro .sec-head h2,.page-misja-pro .blk h2{
  position:relative;padding-bottom:14px;
  font-family:var(--font-h);font-weight:700;letter-spacing:.02em;
}
.page-misja-pro .sec-head h2::after,.page-misja-pro .blk h2::after{
  content:'';position:absolute;left:0;bottom:0;width:74px;height:3px;
  background:linear-gradient(90deg,var(--mint),var(--primary),transparent);
  box-shadow:0 0 14px rgba(37,244,200,.6);
}

/* --- Przyciski: primary = gradient mint (jak game-gaming.css) ------------ */
.page-misja-pro .btn-primary{
  position:relative;color:#04060d;border:0;border-radius:0;
  font-family:var(--font-h);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  clip-path:var(--gh-clip);
  background:linear-gradient(92deg,#25f4c8,#4dd7ff 70%);
  box-shadow:0 0 0 1px rgba(37,244,200,.5),0 0 24px rgba(37,244,200,.35);
}
.page-misja-pro .btn-primary:hover{
  background:linear-gradient(92deg,#5cffdb,#6ee0ff 70%);
  box-shadow:0 0 0 1px rgba(37,244,200,.65),0 0 32px rgba(37,244,200,.5);
}
/* Ghost: ciemne szkło, neonowa obwódka. */
.page-misja-pro .btn-ghost{
  background:rgba(13,16,32,.7);color:var(--ink);border:1px solid var(--line-strong);border-radius:0;
  clip-path:var(--gh-clip);
}
.page-misja-pro .btn-ghost:hover{
  border-color:rgba(37,244,200,.55);color:var(--mint);
  box-shadow:0 0 16px rgba(37,244,200,.18);
}

/* --- Karty cenowe / plany: panel HUD z odciętymi rogami ------------------ */
.page-misja-pro .price-card{
  background:linear-gradient(165deg,#0e1226,#080a15);
  border:1px solid var(--line-strong);border-radius:0;
  clip-path:var(--gh-clip);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
/* Rekomendowana (Matematyka): 2px górna krawędź mint→violet + glow. */
.page-misja-pro .price-card.featured{
  border-color:var(--line-strong);box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 34px rgba(124,92,255,.14);
}
.page-misja-pro .price-card.featured::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--mint),var(--primary));
  box-shadow:0 0 14px rgba(37,244,200,.6);
}
.page-misja-pro .price-card h3{font-family:var(--font-h);letter-spacing:.06em}
.page-misja-pro .price-card .amt{color:var(--ink);text-shadow:0 0 24px rgba(124,92,255,.35)}
.page-misja-pro .price-card.featured .amt{color:var(--mint);text-shadow:0 0 24px rgba(37,244,200,.4)}
.page-misja-pro .price-card .amt-was{color:var(--muted-2)}
.page-misja-pro .price-card-pitch b{color:var(--ink)}
.page-misja-pro .price-card-legal,.page-misja-pro .price-card-legal p{color:var(--muted-2)}
.page-misja-pro .price-card-legal summary:hover{color:var(--mint)}

/* --- Chipy HUD: badge subskrypcji i kroki checkout ------------------------ */
.page-misja-pro .price-card-badge,.page-misja-pro .plan-teaser-badge{
  display:inline-block;border-radius:0;
  clip-path:var(--gh-clip);
  font-family:var(--font-h);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);background:rgba(255,210,63,.07);border:1px solid rgba(255,210,63,.45);
}
.page-misja-pro .plan-teaser-steps{
  display:inline-block;border-radius:0;
  clip-path:var(--gh-clip);
  font-family:var(--font-h);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mint);background:rgba(37,244,200,.07);border:1px solid rgba(37,244,200,.4);
  padding:8px 12px;text-align:left;
}

/* --- Teaser (gość bez konta): panel + wiersze ----------------------------- */
.page-misja-pro .plan-teaser{
  background:linear-gradient(165deg,#0e1226,#080a15);
  border:1px solid var(--line-strong);border-radius:0;
  clip-path:var(--gh-clip);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.page-misja-pro .plan-teaser-row{
  background:rgba(9,11,22,.6);border:1px solid var(--line);border-radius:0;
  clip-path:var(--gh-clip);
}
.page-misja-pro .plan-teaser-row:has(input:checked){
  border-color:rgba(37,244,200,.55);background:rgba(37,244,200,.05);
  box-shadow:0 0 16px rgba(37,244,200,.12);
}
.page-misja-pro .plan-teaser-row-head em{color:var(--mint)}
.page-misja-pro .plan-teaser-row-art{border-radius:0;clip-path:var(--gh-clip)}
.page-misja-pro .plan-teaser-report{color:var(--muted)}
.page-misja-pro .plan-teaser-foot{border-top-color:var(--line)}
.page-misja-pro .plan-teaser-foot b{color:var(--mint);font-family:var(--font-h)}
.page-misja-pro .plan-teaser-legal,.page-misja-pro .plan-teaser-legal p{color:var(--muted-2)}
.page-misja-pro .plan-soon-note{color:var(--muted)}
.page-misja-pro .plan-soon-note a{color:var(--mint);font-family:var(--font-h);font-weight:600}

/* --- Kasa (plan-bundle.js): kroki, uczniowie, światy, podsumowanie ------- */
.page-misja-pro .checkout{
  background:linear-gradient(165deg,#0e1226,#080a15);
  border:1px solid var(--line-strong);border-radius:0;
  clip-path:var(--gh-clip);
  box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 30px rgba(37,244,200,.06);
}
.page-misja-pro .checkout-tester{border:1px dashed #a78bfa}
.page-misja-pro .checkout-step-title,.page-misja-pro .checkout-form-h{
  font-family:var(--font-h);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.page-misja-pro .checkout-step-title{font-size:.92rem}
.page-misja-pro .checkout-step-title::before,.page-misja-pro .checkout-form-h::before{content:'▸ ';color:var(--pop)}
.page-misja-pro .checkout-step-for{text-transform:none;letter-spacing:0;font-family:inherit;color:var(--muted)}
.page-misja-pro .checkout-progress li{border-bottom-color:var(--line);color:var(--muted-2);font-family:var(--font-h);letter-spacing:.08em;text-transform:uppercase}
.page-misja-pro .checkout-progress li.is-current{color:var(--ink);border-bottom-color:var(--mint)}
.page-misja-pro .checkout-progress li.is-done{color:var(--mint)}
.page-misja-pro .checkout-student,.page-misja-pro .checkout-plan,.page-misja-pro .checkout-summary{
  background:#0a0d1c;border:1px solid var(--line);border-radius:0;clip-path:var(--gh-clip);color:var(--ink);
}
.page-misja-pro .checkout-student.is-selected,.page-misja-pro .checkout-plan.is-selected{
  border-color:rgba(37,244,200,.55);background:rgba(37,244,200,.07);box-shadow:0 0 14px rgba(37,244,200,.15);
}
.page-misja-pro .checkout-student input,.page-misja-pro .checkout-plan input{accent-color:#25f4c8}
.page-misja-pro .checkout-student-meta,.page-misja-pro .checkout-student-worlds,.page-misja-pro .checkout-plan-pitch{color:var(--muted)}
.page-misja-pro .checkout-plan-status{color:var(--mint)}
.page-misja-pro .checkout-plan.is-deferred .checkout-plan-status{color:var(--gold)}
.page-misja-pro .checkout-plan-price{color:var(--mint);font-family:var(--font-h)}
.page-misja-pro .checkout-plan-price small,.page-misja-pro .checkout-plan-price s{color:var(--muted-2)}
.page-misja-pro .checkout-note,.page-misja-pro .checkout-foot-total,.page-misja-pro .checkout-summary-mode{color:var(--muted)}
.page-misja-pro .checkout-foot{border-top-color:var(--line)}
.page-misja-pro .checkout-foot-total b,.page-misja-pro .checkout-summary-total b{color:var(--mint);font-family:var(--font-h)}
.page-misja-pro .checkout-summary{border-color:var(--line-strong)}
.page-misja-pro .checkout-summary-label{color:var(--muted-2);font-family:var(--font-h)}
.page-misja-pro .checkout-summary-edit{color:var(--mint)}
.page-misja-pro .checkout-summary-total{border-top-color:var(--line)}
.page-misja-pro .checkout-legal,.page-misja-pro .checkout-legal p{color:var(--muted-2)}

/* --- Formularz płatności: ciemne pola, mint focus glow -------------------- */
.page-misja-pro .pay-form input:not([type=checkbox]),
.page-misja-pro .pay-form select{
  background:#0a0d1c;border:1px solid var(--line-strong);border-radius:0;
  clip-path:var(--gh-clip);
  color:var(--ink);caret-color:var(--mint);
}
.page-misja-pro .pay-form input:focus,.page-misja-pro .pay-form select:focus{
  outline:none;border-color:var(--mint);
  box-shadow:0 0 0 1px rgba(37,244,200,.4),0 0 16px rgba(37,244,200,.25);
}
.page-misja-pro .pay-method{
  background:#0a0d1c;border:1px solid var(--line);border-radius:0;
  clip-path:var(--gh-clip);color:var(--ink);
}
.page-misja-pro .pay-method:has(input:checked){
  border-color:rgba(37,244,200,.55);background:rgba(37,244,200,.07);
  box-shadow:0 0 14px rgba(37,244,200,.15);
}
.page-misja-pro .pay-method input{accent-color:#25f4c8}
.page-misja-pro .pay-terms{color:var(--muted)}
.page-misja-pro .pay-terms input[type=checkbox]{accent-color:#25f4c8}
.page-misja-pro .pay-terms a{color:var(--mint)}
.page-misja-pro .pay-hint{color:var(--muted-2)}
/* Statusy płatności (klasy ustawia plan-bundle.js / pay js). */
.page-misja-pro .pay-status.wait{color:var(--muted)}
.page-misja-pro .pay-status.ok{color:var(--mint);text-shadow:0 0 12px rgba(37,244,200,.4)}
.page-misja-pro .pay-status.err{color:#ff7ab0}

/* --- Alerty bramki: mint = sukces, pink = błąd (jak konto-gaming.css) ----- */
.page-misja-pro .gate-alert{
  max-width:none;text-align:left;border-radius:0;
  clip-path:var(--gh-clip);
  font-family:var(--font-h);font-size:.88rem;font-weight:600;letter-spacing:.02em;
  background:rgba(124,92,255,.07);border:1px solid rgba(124,92,255,.4);
  color:#c9bcff;box-shadow:0 0 22px rgba(124,92,255,.1);
}
.page-misja-pro .gate-alert.ok{
  background:rgba(37,244,200,.07);border:1px solid rgba(37,244,200,.4);
  color:var(--mint);box-shadow:0 0 22px rgba(37,244,200,.1);
}
.page-misja-pro .gate-alert.err{
  background:rgba(255,46,136,.07);border:1px solid rgba(255,46,136,.4);
  color:#ff7ab0;box-shadow:0 0 22px rgba(255,46,136,.1);
}

/* --- Formularz kodu dostępu (gate-form w FAQ) ----------------------------- */
.page-misja-pro .gate-form input{
  background:#0a0d1c;border:1px solid var(--line-strong);border-radius:0;
  clip-path:var(--gh-clip);
  color:var(--ink);caret-color:var(--mint);
}
.page-misja-pro .gate-form input:focus{
  outline:none;border-color:var(--mint);
  box-shadow:0 0 0 1px rgba(37,244,200,.4),0 0 16px rgba(37,244,200,.25);
}
.page-misja-pro details p[role=alert]{color:#ff7ab0}
.page-misja-pro details p[role=status]{color:var(--mint)}
/* summary będące jednocześnie .btn (checkout) zostawiamy stylowi przycisku. */
.page-misja-pro .blk details summary:not(.btn){
  cursor:pointer;font-family:var(--font-h);font-weight:600;color:var(--ink);
}
.page-misja-pro .blk details summary:not(.btn):hover{color:var(--mint)}
.page-misja-pro .blk details p{color:var(--muted)}
.page-misja-pro .blk details a{color:var(--mint)}
/* FAQ: tekst pytania wyśrodkowany w polu dotyku 44 px zamiast pustego paska pod jednowierszowym pytaniem. */
.page-misja-pro .wrap-narrow>details{padding-block:6px}
.page-misja-pro .wrap-narrow>details>summary{box-sizing:border-box;padding-block:10px;line-height:1.4}