/* LOG OUT Adventures — wspólne style systemu rezerwacji (design system strony głównej) */
/* zastępcze kroje dopasowane szerokością — tekst nie przeskakuje przy podmianie czcionki */
@font-face{font-family:"Newsreader Fallback";src:local("Georgia");size-adjust:94%}
@font-face{font-family:"Newsreader Fallback";font-style:italic;src:local("Georgia Italic"),local("Georgia-Italic");size-adjust:84%}
/* unicode-range = zasięg Geist bez strzałek i znaków (← → ✓) — tych Geist nie ma, więc biorą je kroje systemowe jak dotąd, a nie Arial */
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:104%;unicode-range:U+0000-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1EFF,U+2000-206F,U+20A0-20C0,U+2113,U+2122,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD}
:root{
  --basalt:#0E1114; --lava:#171B20; --lava-2:#1F252B;
  --ash:#9AA3AB; --ash-2:#6B7680; --ash-3:#8D969F;
  --snow:#EDEFF0; --snow-2:#E3E6E8; --ice:#CFD5D9;
  --rock:#1A1D21; --rock-2:#454C53;
  --ember:#C8843A; --ember-2:#A86A2A; --ember-3:#F2B36B;
  --err:#c0564a; --err-txt:#e08a7f; --ok-txt:#8fd6a4;   /* błąd: ramka / tekst; sukces: tekst */
  --line:rgba(237,239,240,.08);          /* linie kart i sekcji */
  --line-2:rgba(237,239,240,.12);        /* ramki neutralne (alert.info, transfer-box) */
  --field-line:rgba(237,239,240,.38);    /* ramka pola */
  --field-line-hover:rgba(237,239,240,.52);
  --sel-bg:rgba(200,132,58,.07);         /* tło „wybrane” */
  --ring:0 0 0 3px rgba(200,132,58,.22); /* pierścień fokusu pola */
  --display:"Newsreader","Newsreader Fallback",Georgia,serif;
  --body:"Geist","Geist Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --max:1280px;
  --gutter:max(clamp(20px,4vw,56px),env(safe-area-inset-left),env(safe-area-inset-right));
  /* promienie: pola, zgody i komunikaty / karty i ramki / tylko guziki i plakietki */
  --r-s:10px; --r-m:14px; --r-pill:999px;
  /* odstępy (siatka 4/8) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  /* ruch: wejście z hamowaniem, wyjście szybciej */
  --ease:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1);
  --dur-fast:.08s; --dur:.2s; --dur-in:.38s; --dur-out:.24s;
  /* cień tylko dla elementów unoszących się nad treścią (toast) — guziki i karty bez cienia */
  --shadow-pop:0 12px 32px rgba(0,0,0,.4);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
.light{color-scheme:light}
body{font-family:var(--body);background:var(--basalt);color:var(--snow);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:rgba(200,132,58,.35);color:var(--snow)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
b,strong{font-weight:600}
/* nagłówki: Newsreader, rozmiar optyczny automatyczny; mniejsze nagłówki grubsze dla czytelności */
h1,h2,h3{font-family:var(--display);font-weight:320;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(34px,4.6vw,56px)}
h2{font-size:clamp(26px,3vw,38px)}
h3{font-size:20px}
h2{font-weight:360}
h3{font-weight:400;letter-spacing:0}
/* polski skład: bez samotnych słów w ostatniej linii, rzeczy nierozdzielne w .nw */
p,li,dd,summary,.hint,.check{text-wrap:pretty}
.nw{white-space:nowrap}
.wrap{max-width:900px;margin:0 auto;padding:0 var(--gutter)}
/* dokumenty: długie adresy łamią się zamiast rozpychać stronę w bok */
.doc{overflow-wrap:break-word}
/* etykieta nad nagłówkiem: zawsze 11 px; tekst łamie się w środku, kropka stoi przy pierwszej linii */
.eyebrow{font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ash);display:flex;gap:.9em;flex-wrap:nowrap;align-items:flex-start}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--ember);display:inline-block;flex:none;margin-top:5px;margin-top:calc((1lh - 5px) / 2)}
.muted{color:var(--ash)}
/* nagłówek */
.topbar{position:sticky;top:0;z-index:50;background:rgba(14,17,20,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* kreska pod belką dopiero po przewinięciu (jak .nav.scrolled na stronie głównej); starsze przeglądarki zostają przy stałej kresce.
   Na stronie, której nie da się przewinąć (oś nieaktywna), kreski nie ma wcale. */
@supports (animation-timeline:scroll()){
  .topbar{border-bottom-color:transparent;animation:topbar-krawedz linear both;animation-timeline:scroll(root);animation-range:0 24px}
}
@keyframes topbar-krawedz{to{border-bottom-color:var(--line)}}
.topbar .in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-family:var(--mono);letter-spacing:.14em;font-size:13px;color:var(--snow);text-transform:uppercase;white-space:nowrap}
.logo b{font-weight:500}
.logo span{opacity:.55}
/* logo 13 px/.14em jak na stronie głównej i na mapie, mniejsze dopiero poniżej 375 px */
@media(max-width:374px){.logo{font-size:12px;letter-spacing:.1em}}
/* niski ekran (telefon poziomo, duże powiększenie): belka przewija się z treścią i nie zasłania pól nad klawiaturą */
@media(max-height:480px){.topbar{position:relative}}
/* „← Wróć na stronę” → „← Wróć” na najwęższych ekranach */
@media(max-width:360px){.topbar .dopis{display:none}}
/* przyciski — pigułka, płaskie: bez poświaty i bez unoszenia; reagują na naciśnięcie (na końcu pliku) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--r-pill);font-family:var(--body);font-weight:500;font-size:15px;line-height:1.2;letter-spacing:.005em;text-transform:none;transition:background-color var(--dur),border-color var(--dur),color var(--dur),transform var(--dur) var(--ease),filter var(--dur);border:1px solid transparent;white-space:nowrap;cursor:pointer}
.btn-primary{background:var(--ember);border-color:var(--ember);color:var(--basalt);font-weight:600}
.btn-ghost{border-color:rgba(237,239,240,.38);color:var(--snow);background:transparent}
@media(hover:hover){
  .btn-primary:hover{filter:brightness(1.06)}
  .btn-ghost:hover{border-color:var(--snow);background:rgba(237,239,240,.06)}
}
/* mały guzik: wygląd 38 px, cel dotyku 44 px przez niewidoczny ::before (::after zajmuje wskaźnik „w toku”) */
.btn-sm{min-height:38px;font-size:13.5px;padding:0 16px;position:relative}
.btn-sm::before{content:"";position:absolute;inset:-4px 0}
.btn:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.btn[disabled],.btn:disabled,.btn.is-off{opacity:.5;pointer-events:none;filter:none}
/* guzik „w toku”: pełny kolor, zamrożona szerokość (JS), mały pierścień zamiast strzałki */
.btn.is-busy,.btn.is-busy:disabled{opacity:1;cursor:progress;pointer-events:none}
.btn.is-busy .arr{display:none}
.btn.is-busy::after{content:"";width:14px;height:14px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:obrot .7s linear infinite}
@keyframes obrot{to{transform:rotate(1turn)}}
@keyframes puls{50%{opacity:.35}}
@media(max-width:600px){.actions .btn:not(.btn-sm){flex:1}.actions .spacer{display:none}}
/* karty i formularze */
.card{background:var(--lava);border:1px solid var(--line);border-radius:var(--r-m);padding:clamp(22px,3.4vw,34px)}
.card + .card{margin-top:18px}
.card-head{display:grid;gap:7px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.card-head h3{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.4vw,26px);letter-spacing:-.01em}
.card-head p:where(:not(.eyebrow)){font-size:14px;color:var(--ash);line-height:1.6;max-width:64ch}
.form{display:grid;gap:18px}
.row{display:grid;gap:18px}
@media(min-width:680px){
  .row{grid-template-columns:1fr 1fr}
  .row.r3{grid-template-columns:1fr 1fr 1fr}
  .row.addr{grid-template-columns:.68fr 1.42fr 1fr}
  .row.col2>.field{grid-column:2}   /* pojedyncze pole w drugiej kolumnie (np. „Powtórz e-mail” pod e-mailem) */
}
/* nagłówek grupy pól — wyraźniejszy od etykiety pola */
.grp-h{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ice);margin-top:14px}
/* kreska ma zawsze co najmniej 32 px — nie znika przy długim nagłówku */
.grp-h::after{content:"";flex:1 0 32px;height:1px;background:rgba(237,239,240,.09)}
.grp-h:first-child{margin-top:0}
/* telefon: ciaśniejszy tracking, żeby nagłówek mieścił się w jednej linii razem z kreską; gdy mimo to się nie mieści,
   kreska przechodzi pod nagłówek na całą szerokość zamiast wisieć krótkim odcinkiem między liniami tekstu */
@media(max-width:600px){.grp-h{flex-wrap:wrap;gap:6px 12px;letter-spacing:.08em}}
/* pola */
.field{min-width:0}
.field label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);margin-bottom:8px}
.req{color:inherit;font-style:normal;margin-left:3px}
.field input,.field select,.field textarea{width:100%;background:var(--lava-2);border:1px solid var(--field-line);color:var(--snow);padding:13px 14px;border-radius:var(--r-s);font:inherit;font-size:15px;caret-color:var(--ember);transition:border-color var(--dur),background-color var(--dur),box-shadow var(--dur)}
/* ≥16 px na telefonach i każdym ekranie dotykowym — iOS nie przybliża strony przy fokusie */
@media(max-width:899px),(pointer:coarse){.field input,.field select,.field textarea{font-size:16px}}
.field input::placeholder,.field textarea::placeholder{color:var(--ash-3)}
@media(hover:hover){.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--field-line-hover)}}
.field select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239AA3AB' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.field textarea{min-height:110px;resize:vertical;line-height:1.6}
/* przezroczysty outline zostaje dla trybu wysokiego kontrastu (forced-colors, na końcu pliku) */
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--ember);background-color:var(--lava-2);box-shadow:var(--ring)}
/* autouzupełnienie: pole zostaje ciemne */
.field input:-webkit-autofill{-webkit-text-fill-color:var(--snow);box-shadow:0 0 0 100px var(--lava-2) inset}
.field input:-webkit-autofill:focus{box-shadow:0 0 0 100px var(--lava-2) inset,var(--ring)}
/* błąd pola: tylko ramka i etykieta, zdanie pod polem (.errmsg) */
.field.err input,.field.err select,.field.err textarea{border-color:var(--err)}
.field.err label{color:var(--err-txt)}
.hint{font-size:12.5px;color:var(--ash);line-height:1.55}
.field .hint{margin-top:7px}
.errmsg{color:var(--err-txt);font-size:13px;margin-top:4px}
.field .errmsg{margin-top:7px;line-height:1.4}
.field:not(.err) .errmsg{display:none}
/* telefon: prefiks + numer */
.tel{display:grid;grid-template-columns:104px 1fr;gap:10px}
/* pole daty: dzień i rok wąsko, miesiąc (sama nazwa) dostaje resztę; poniżej 360 px rok w drugim wierszu */
.d3{display:grid;grid-template-columns:76px minmax(0,1fr) 78px;gap:6px}
.d3 select{min-width:0;padding-left:10px;padding-right:22px;background-position:right 6px center}
@media(max-width:359px){.d3{grid-template-columns:76px minmax(0,1fr)}.d3 [data-part="y"]{grid-column:1/-1}}
.field.err .d3 select{border-color:var(--err)}
/* nagłówek uczestnika — numer neutralny, pomarańcz tylko dla działania i wyboru */
.p-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.p-no{width:32px;height:32px;flex:none;border-radius:50%;border:1px solid rgba(237,239,240,.22);color:var(--snow-2);font-family:var(--mono);font-size:13px;display:grid;place-items:center}
.p-head h3{flex:1;min-width:140px;font-family:var(--display);font-weight:400;font-size:21px}
/* checkboxy — własne pole 22 px, po zaznaczeniu ember z ciemnym ✓ (jak znacznik przy domkach) */
.check{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;line-height:1.6;color:var(--snow-2);
  background:var(--lava-2);border:1px solid rgba(237,239,240,.2);border-radius:var(--r-s);padding:15px 17px;cursor:pointer;transition:border-color var(--dur),background-color var(--dur),box-shadow var(--dur)}
.check:has(input:focus-visible){border-color:var(--ember);box-shadow:var(--ring)}
.check:has(input:checked){border-color:rgba(200,132,58,.55);background:var(--sel-bg)}
.check input{flex:none;cursor:pointer}
.check input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:1px;border:1.5px solid rgba(237,239,240,.42);border-radius:6px;background:transparent no-repeat center/14px;transition:background-color .15s,border-color .15s}
.check input[type=checkbox]:checked{background-color:var(--ember);border-color:var(--ember);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5 10 17l8.5-9.5' fill='none' stroke='%230E1114' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.check a{text-decoration:underline;text-underline-offset:3px;color:var(--ice)}
@media(hover:hover){
  .check:hover{border-color:rgba(237,239,240,.35)}
  .check:hover input[type=checkbox]:not(:checked){border-color:rgba(237,239,240,.62)}
  .check a:hover{color:var(--ember)}
}
.check.err{border-color:var(--err)}
.check.err input[type=checkbox]:not(:checked){border-color:var(--err)}
.check .sub{display:block;margin-top:5px;font-size:13px;color:var(--ash)}
.check.plain{background:none;border:0;padding:0}
/* tabela szczegółów; na telefonie etykieta nad wartością */
.dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 22px;font-size:15px}
.dl .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);padding-top:3px}
.dl .v{color:var(--snow);min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.dl .v b{font-weight:600}
@media(max-width:560px){
  .dl{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .dl .v{margin-bottom:12px}
  .dl .v:last-child{margin-bottom:0}
}
/* pasek postępu */
.progress{display:flex;gap:6px;margin:26px 0 8px}
.progress[hidden]{display:none}
.progress span{flex:1;height:3px;border-radius:2px;background:rgba(237,239,240,.14)}
.progress span.done{background:var(--ember)}
.steplabel{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);margin-bottom:22px}
/* podsumowanie cen — kwoty w cyfrach tabelarycznych, „Razem” i „Do zapłaty teraz” największe na ekranie */
.sumline{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.sumline.total{border-bottom:0;font-size:19px;font-family:var(--display);align-items:baseline;padding-top:16px}
.sumline.total b{font-weight:300;font-size:clamp(28px,7.5vw,32px);line-height:1;letter-spacing:-.02em}
.sumline .r{white-space:nowrap;font-variant-numeric:tabular-nums}
.sumline.sub{font-size:13.5px;color:var(--ash);padding:6px 0 6px 18px;border-bottom-color:rgba(237,239,240,.05)}
/* statusy */
.badge{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);border:1px solid rgba(237,239,240,.2);white-space:nowrap}
.badge.ok{border-color:rgba(110,190,130,.5);color:var(--ok-txt)}
.badge.warn{border-color:rgba(200,132,58,.55);color:var(--ember)}
.badge.bad{border-color:rgba(200,90,74,.5);color:var(--err-txt)}
/* komunikat blokujący nad .actions (błąd akcji lub sieci); .info — neutralna informacja */
.alert{border-radius:var(--r-s);padding:12px 16px;font-size:14px;line-height:1.5;background:rgba(192,86,74,.1);border:1px solid rgba(192,86,74,.45);color:var(--snow)}
.alert.info{background:rgba(237,239,240,.04);border-color:var(--line-2)}
/* akcje kroku */
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.spacer{flex:1}
footer{padding:44px 0;color:var(--ash);font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-align:center}
footer a{padding:6px 0}
/* toast — pod belką (na dole zasłania go klawiatura), jeden stały #toast; stare doklejane .toast wchodzą animacją */
.toast{position:fixed;left:50%;top:calc(84px + env(safe-area-inset-top));z-index:100;width:max-content;max-width:calc(100vw - 32px);
  padding:12px 18px;border-radius:var(--r-s);border:1px solid var(--line-2);background:rgba(31,37,43,.92);
  -webkit-backdrop-filter:saturate(1.6) blur(20px);backdrop-filter:saturate(1.6) blur(20px);box-shadow:var(--shadow-pop);
  color:var(--snow);font-size:14px;line-height:1.45;text-align:center;pointer-events:none;transform:translate(-50%,0);
  animation:toast-wejscie var(--dur-in) var(--ease)}
@keyframes toast-wejscie{from{opacity:0;transform:translate(-50%,-8px)}}
#toast{animation:none;opacity:0;visibility:hidden;transform:translate(-50%,-8px);
  transition:opacity var(--dur-out) var(--ease-in),transform var(--dur-out) var(--ease-in),visibility 0s linear var(--dur-out)}
#toast.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity var(--dur-in) var(--ease),transform var(--dur-in) var(--ease),visibility 0s}
@starting-style{#toast.on{opacity:0;transform:translate(-50%,-8px)}}
.toast.is-err,.toast.bad{border-color:rgba(192,86,74,.55);color:var(--err-txt)}
.toast:empty{display:none}
@media(prefers-reduced-transparency:reduce){.toast{background:var(--lava-2);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* linki „Pobierz … OWU”: cel dotyku ok. 44 px, ujemny margines trzyma układ w miejscu */
.hint.owu{margin:-2px 0 14px}
.hint.owu a{color:var(--snow);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:color var(--dur);padding:12px 0;margin:-12px 0}
.hint.owu svg{flex:none;opacity:.75}
@media(hover:hover){
  .hint.owu a:hover{color:var(--ember)}
  .hint.owu a:hover svg{opacity:1}
}

/* „W cenie / Poza ceną" — ten sam układ i wyróżnienie co w sekcji cena na stronie głównej:
   ✓ rysowany maską SVG (jednakowy na każdym systemie), dwie pierwsze pozycje wyróżnione wagą, bez tła */
.lista{list-style:none;border-top:1px solid rgba(237,239,240,.1)}
.lista li{padding:12px 0;border-bottom:1px solid rgba(237,239,240,.1);display:grid;grid-template-columns:18px 1fr;gap:12px;color:var(--ash);font-size:14px;line-height:1.6}
.lista li::before{content:"";width:12px;height:12px;margin-top:5px;background:var(--ash);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.6 2.6L10 3.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.6 2.6L10 3.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.lista.no li::before{content:"\2013";content:"\2013" / "";width:auto;height:auto;margin-top:0;background:none;-webkit-mask:none;mask:none;font-family:var(--mono);color:rgba(237,239,240,.4)}
.lista li.top{color:var(--snow);font-weight:600}
.lista li.top::before{background:var(--ember)}
/* plakietka „bilety w cenie” — pigułka (plakietka, nie guzik: bez stanów najechania) także na telefonie */
.flight-note{display:inline-flex;align-items:center;gap:.6em;margin-top:18px;padding:10px 16px;border-radius:var(--r-pill);border:1px solid rgba(200,132,58,.55);background:rgba(200,132,58,.14);color:var(--snow);font-size:15px}
.flight-note .ico{flex:none}
.flight-note .ico svg{display:block}
.flight-note i{font-style:normal}
.flight-note .lam{display:none}
.flight-note i::before{content:"\2014\a0"}
.flight-note b{color:var(--ember)}
@media(max-width:899px){
.flight-note{align-items:flex-start;font-size:13.5px;line-height:1.45;padding:10px 18px}
.flight-note .ico{margin-top:1px}
.flight-note i{display:block;margin-top:2px}
.flight-note .lam{display:inline}
.flight-note i::before{content:none}}

/* ustawienie „Zwiększ kontrast”: mocniejsze ramki pól i zgód, jaśniejszy tekst pomocniczy */
@media(prefers-contrast:more){
  .field input,.field select,.field textarea,.check,.check input[type=checkbox]:not(:checked){border-color:rgba(237,239,240,.62)}
  .hint,.check .sub,.field input::placeholder,.field textarea::placeholder{color:var(--ash)}
}
/* najechanie przy „Zwiększ kontrast” nie przykrywa błędu, fokusu ani zaznaczenia */
@media(prefers-contrast:more) and (hover:hover){
  .field:not(.err) :is(input,select,textarea):not(:focus):hover{border-color:var(--snow)}
  .check:hover:where(:not(.err,:has(input:checked),:has(input:focus-visible))){border-color:var(--snow)}
}
/* tryb wysokiego kontrastu (Windows): fokus i wybór w kolorze systemu, pasek postępu widoczny */
@media(forced-colors:active){
  .field input:focus,.field select:focus,.field textarea:focus{outline-color:Highlight}
  .acc.sel,.pay-card.sel,.pm-t.sel,.count-btn.sel{outline:2px solid Highlight;outline-offset:2px}
  .check input[type=checkbox]{appearance:auto;-webkit-appearance:auto}
  .progress span{border:1px solid CanvasText}
  .progress span.done{background:Highlight}
  .lista:not(.no) li::before{forced-color-adjust:none;background:CanvasText}
}
/* druk potwierdzenia i strony płatności: czarny tekst na białym, bez belki i guzików (dokumenty mają własny druk) */
@media print{
  html{color-scheme:light}
  html,body{background:#fff;color:#111}
  main:not(.doc) :not(input[type=checkbox]){background:transparent!important;color:#111!important;box-shadow:none!important;filter:none!important}
  main:not(.doc) .check input[type=checkbox]{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  main:not(.doc) .check input[type=checkbox]:not(:checked){border-color:#555}
  .topbar,.progress,.steplabel,.actions,.btn,.toast,#pm,.flight-note,main:not(.doc) iframe{display:none!important}
  main:not(.doc) :is(.muted,.hint,.eyebrow,.dl .k,.sumline.sub),footer{color:#555!important}
  main:not(.doc) :is(.confirm-num,.badge.warn){color:#8F571E!important}
  .card{border-color:#bbb;break-inside:avoid}
  .sumline{border-color:#ddd}
  .lista:not(.no) li::before{background:#111!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.field input,.field select,.field textarea,.check,.check input[type=checkbox],.hint.owu a,.acc,.pay-card,.count-btn{transition:none}
  .btn.is-busy::after{animation:puls 1.2s ease-in-out infinite}
  .toast{animation:none}
  #toast,#toast.on{transform:translate(-50%,0)}
}
/* ===== 28.09.2026: stopka z dokumentami, „Ustawienia cookies” i płatnościami ING Pay; baner cookies (wygląd w shared/zgoda.css) =====
   Wyśrodkowana jak reszta stopki: linki do dokumentów w jednym ciągu, pod nimi logo ING Pay z pigułką metod i zdanie o płatnościach */
footer.stopka{padding:40px var(--gutter) calc(44px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
footer .doc-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 18px;max-width:900px;margin:0 auto;line-height:1.65}
footer .doc-links a,footer .doc-links .zgoda-link{display:inline-block;padding:6px 0;color:var(--ash);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(237,239,240,.28)}
footer .doc-links a[aria-current=page]{color:var(--snow);text-decoration:none}
footer .doc-links a:focus-visible,footer .doc-links .zgoda-link:focus-visible{color:var(--snow)}
@media(hover:hover){footer .doc-links a:hover,footer .doc-links .zgoda-link:hover{color:var(--snow);text-decoration-color:currentColor}}
footer .platnosci{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:720px;margin:14px auto 0}
footer .platnosci p{max-width:60ch;font-family:var(--body);font-size:12px;line-height:1.55;letter-spacing:0;color:var(--ash);text-align:center;text-wrap:balance}
.platnosci-logo{display:flex;align-items:center;justify-content:center;gap:14px;flex:none;max-width:100%;min-width:0}
.platnosci-logo img{display:block;flex:none;height:auto}
.platnosci-logo .metody{flex:0 1 auto;min-width:0;max-width:calc(100% - 66px)}
footer .stopka-znak{margin-top:18px}
@media(forced-colors:active){.platnosci-logo img{forced-color-adjust:none}}
/* baner cookies widoczny: koniec strony (stopka, guziki kroku) da się przewinąć nad baner (wysokość --zgoda-h ustawia zgoda.js) */
html[data-zgoda=brak] body,html.zgoda-otwarta body{padding-bottom:calc(var(--zgoda-h,150px) + 24px)}
@media print{footer .zgoda-link,footer .platnosci-logo{display:none!important}}

/* naciśnięcie — na KOŃCU arkusza; iOS pokazuje :active dzięki pustemu touchstart w skrypcie strony */
.btn:active,.count-btn:active,.pay-card:active,.pm-t:active{transform:scale(.97);transition-duration:var(--dur-fast)}
.btn-primary:active{filter:brightness(.94)}
.check:active{opacity:.7}
@media(prefers-reduced-motion:reduce){.btn:active,.count-btn:active,.pay-card:active,.pm-t:active{transform:none}}

/* ============================================================================
   GUZIKI jak w banerze cookies (12.10.2026, właściciel: „wszystkie guziki mają wyglądać jak te w nowym banerze”)
   Zaokrąglony prostokąt zamiast pigułki, waga 600, główny = gradient marki z jasną krawędzią i ciepłym cieniem,
   drugorzędny = półprzezroczysta jasna płytka bez ramki (na jasnym tle: ciemna płytka). Rozmiary bez zmian.
   ============================================================================ */
body:has(> #zgoda) .btn{border-radius:14px;border-color:transparent;font-weight:600;letter-spacing:-.01em;transition:background-color .15s ease,box-shadow .15s ease,filter .15s ease,transform .1s ease-out}
body:has(> #zgoda) .btn-sm{border-radius:11px}
body:has(> #zgoda) .btn-primary{background:linear-gradient(180deg,#F2B36B 0%,#D8944A 100%);border-color:transparent;color:#0E1114;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px rgba(200,132,58,.26)}
body:has(> #zgoda) .btn-ghost{background:rgba(255,255,255,.12);border-color:transparent;color:var(--snow,#EDEFF0);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
body:has(> #zgoda) .light .btn-ghost{background:rgba(14,17,20,.07);border-color:transparent;color:var(--rock,#1A1D21);box-shadow:none}
@media(hover:hover){
  body:has(> #zgoda) .btn-primary:hover{background:linear-gradient(180deg,#F6BF7E 0%,#E09D54 100%);filter:none}
  body:has(> #zgoda) .btn-ghost:hover{background:rgba(255,255,255,.18);border-color:transparent}
  body:has(> #zgoda) .light .btn-ghost:hover{background:rgba(14,17,20,.11);border-color:transparent}
}
body:has(> #zgoda) .btn:active{transform:scale(.98)}
body:has(> #zgoda) .btn-primary:active{background:linear-gradient(180deg,#E6A55E 0%,#C8843A 100%);filter:none}
body:has(> #zgoda) .btn-ghost:active{background:rgba(255,255,255,.24)}
body:has(> #zgoda) .light .btn-ghost:active{background:rgba(14,17,20,.15)}
body:has(> #zgoda) .btn:focus-visible{outline:2px solid var(--ember-3,#F2B36B);outline-offset:3px}
body:has(> #zgoda) .light .btn:focus-visible{outline-color:var(--ember-2,#A86A2A)}
@media(prefers-contrast:more){body:has(> #zgoda) .btn-ghost{border-color:currentColor}}
@media(forced-colors:active){body:has(> #zgoda) .btn{border:1px solid ButtonText}}