/*
 * /zapis/zapis.css — wspólny wygląd ekranów płatności
 * dariuszmalojlo.pl · wersja 1 · 16.10.2026
 *
 * v1: pierwsza wersja — układ z makiety płatności (zamówienie, oczekiwanie,
 *     potwierdzenie). Jeden plik dla wszystkich ekranów płatności: zapis na
 *     wydarzenie dziś, kurs / nagranie / sesje w przyszłości.
 *
 * Strony dołączają plik z parametrem ?v=1 — przy każdej zmianie podnieść
 * numer w odnośniku, żeby pamięć podręczna serwera (CDN OVH) podała nową wersję.
 */

/* ── Kolory i kroje — te same co w reszcie serwisu ───────────────────────── */
:root{
  --tq:#2A9D8F; --tql:#3DB8A9; --tqd:#1A3A36;
  --go:#C9A96E; --gop:#FAF6F0;
  --bk:#1A1A1A; --wh:#FEFEFE; --gl:#F7F7F5; --gt:#6B6B6B;
  --line:#e5e7e1; --err:#a32118; --err-bg:#fdf2f2;
  --fd:'Cormorant Garamond',Georgia,serif;
  --fb:'Lora',Georgia,serif;
}

/* ── Podstawa ────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wh);color:var(--bk);font:15px/1.85 var(--fb);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
h1,h2{font-family:var(--fd);font-weight:300;line-height:1.15}
h1{font-size:46px;letter-spacing:-.01em;margin:0 0 18px}
h2{font-size:38px;margin:14px 0 20px}
p{margin:0 0 18px;color:var(--gt)}
a{color:var(--tq);text-underline-offset:5px;text-decoration-thickness:1px}
a:hover{color:var(--tqd)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--go);outline-offset:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 14px;z-index:10}

/* ── Nagłówek: tylko znak, bez menu — przy płatności nic nie odciąga uwagi ─ */
.pay-header{border-bottom:1px solid #0000000a;background:var(--wh)}
.pay-header-inner{max-width:1200px;margin:0 auto;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font:400 23px/1.1 var(--fd);color:var(--bk);text-decoration:none;white-space:nowrap}
.brand small{display:block;font:9px var(--fb);letter-spacing:.13em;color:var(--tq);margin-top:6px}
.brand:hover{color:var(--bk)}

/* ── Stopka ──────────────────────────────────────────────────────────────── */
.pay-footer{max-width:1200px;width:100%;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:28px 32px;border-top:1px solid var(--line);font-size:11px;color:var(--gt)}
.pay-footer a{font-size:11px}

/* ── Elementy wspólne ────────────────────────────────────────────────────── */
.eyebrow{display:block;font:10px/1.6 var(--fb);color:var(--tq);letter-spacing:.2em;text-transform:uppercase}
.lead{font-size:17px;line-height:1.9;color:#353f3d}
.muted{font-size:11px;color:var(--gt);line-height:1.8}
.wave{display:block;width:100%;max-width:420px;height:76px;opacity:.65;margin:6px 0 20px}
.btn{display:inline-block;font:11px/1.6 var(--fb);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;text-align:center;padding:16px 24px;border:1px solid var(--tq);color:var(--tq);background:transparent;cursor:pointer;border-radius:0;transition:background .2s,color .2s}
.btn:hover{background:var(--tq);color:var(--wh)}
.btn.solid{background:var(--tqd);color:#fff;border-color:var(--tqd)}
.btn.solid:hover{background:var(--tq);border-color:var(--tq)}

/* Kroki: 01 · Zapis — 02 · Płatność — 03 · Potwierdzenie */
.steps{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 36px;padding:0;list-style:none;font-size:10px;letter-spacing:.06em;color:var(--gt)}
.steps li+li:before{content:'—';margin-right:14px;color:#c9cfc8}
.steps [aria-current]{color:var(--tq)}

/* Pasek „Bezpieczna płatność · Paynow” */
.secure{display:flex;align-items:center;justify-content:center;gap:24px;border-top:1px solid var(--line);margin-top:24px;padding-top:22px}
.secure-copy{display:flex;align-items:center;gap:9px;font:10px/1.5 var(--fb);letter-spacing:.02em;color:#57665f}
.secure svg{width:19px;height:22px;stroke:var(--tq);fill:none;stroke-width:1.5;flex-shrink:0}
.secure img{width:110px;height:35px;object-fit:contain;background:#fff}

/* ── Ekran zapisu: karta podsumowania + formularz ────────────────────────── */
.checkout{max-width:1060px;margin:0 auto;padding:80px 42px 90px;display:grid;grid-template-columns:.9fr 1.1fr;gap:75px}
.checkout>*{min-width:0}
.order-summary{padding:40px;background:var(--gop);border:1px solid #e8dfcf;align-self:start}
.order-summary h2{font-size:38px;margin:14px 0 6px;color:var(--bk)}
.order-summary hr{border:0;border-top:1px solid #e0d8c7;margin:22px 0}
.order-date{font:400 22px/1.3 var(--fd);color:var(--tqd);margin:0 0 4px}
.price{font:50px/1.1 var(--fd);color:var(--tqd);margin:12px 0 22px}
.back{font-size:12px}

.order-form label{display:block;font-size:12px;margin:18px 0 7px;color:var(--bk)}
.order-form input[type=email],.order-form input[type=text]{width:100%;padding:15px;border:1px solid #d5dad3;background:#fff;font:15px var(--fb);color:var(--bk);border-radius:0;-webkit-appearance:none;appearance:none}
.order-form input[type=email]:focus,.order-form input[type=text]:focus{border-color:var(--tq);outline:2px solid var(--go);outline-offset:2px}
.order-form .check{display:flex;gap:12px;align-items:flex-start;font-size:11px;line-height:1.8;margin-top:22px}
.order-form .check input{accent-color:var(--tq);margin-top:4px;flex-shrink:0;width:16px;height:16px}
.order-form .check label{margin:0;font-size:11px;line-height:1.8}
.order-form .cf-turnstile{margin-top:22px;min-height:65px}
.order-form .btn{width:100%;margin-top:18px}
.methods{text-align:center;margin:12px 0 0}
.form-error{font-size:13px;color:var(--err);background:var(--err-bg);border-left:2px solid var(--err);padding:14px 18px;margin:0 0 8px}
.alt{text-align:center;margin-top:24px}

/* ── Ekrany stanu: powrót z płatności, brak wydarzenia ───────────────────── */
.state{max-width:800px;margin:0 auto;padding:80px 42px 90px}
.state h1{font-size:52px;margin-top:10px}
.state-icon{width:64px;height:64px;border:1px solid var(--go);border-radius:50%;display:grid;place-items:center;font:28px/1 var(--fd);color:var(--tq);margin-bottom:30px}
.state .actions{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center;margin:30px 0 10px}
.state details{border-top:1px solid var(--line);padding:22px 0;margin-top:36px}
.state summary{font:23px var(--fd);cursor:pointer;color:var(--bk)}
.state details p{padding-top:14px;margin-bottom:10px}

/* ── Telefon i tablet ────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .checkout{gap:40px;padding:60px 30px 70px}
}
@media(max-width:800px){
  .pay-header-inner{padding:16px 24px}
  .brand{font-size:20px}
  .brand small{font-size:8px}
  .checkout{grid-template-columns:1fr;gap:32px;padding:36px 24px 56px}
  .order-summary{padding:28px}
  .order-summary h2{font-size:32px}
  .price{font-size:44px}
  h1{font-size:38px}
  .state{padding:48px 24px 60px}
  .state h1{font-size:40px}
  .secure{gap:16px}
  .pay-footer{flex-direction:column;padding:24px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}