/* ====================================================================
   PLAN SALI — w języku wzorca
   ====================================================================
   Ten sam mechanizm co w wersji pierwszej (scena SVG + ruch kamery), ale
   narysowany od nowa regułami, które obowiązują na całej tej stronie:

     • włoskowate kreski zamiast obwódek i wypełnień,
     • cyfry zamiast ikon i kolorowych kropek,
     • czerń, biel i jeden akcent — nic poza tym,
     • wiersze podsumowania wyglądają jak wiersze programu wyżej,
       bo to ten sam element systemu.

   Plan sali to narzędzie sprzedażowe, a nie ilustracja: musi się
   wpisać w tę powściągliwość, nie rozbijać jej kolorem.
==================================================================== */

.rezerwacja{display:grid;gap:clamp(20px,3vw,40px)}
@media (min-width:1040px){
  .rezerwacja{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
}

/* == Scena ========================================================= */
.sala{
  position:relative;
  background:var(--papier);
  border:1px solid var(--kreska);
}
.sala svg{display:block;width:100%;height:auto}

.kamera{
  transform-box:view-box;transform-origin:0 0;
  /* Ta sama krzywa, którą chodzi cała strona. */
  transition:transform .92s var(--ease-pk);
  will-change:transform;
}

/* == Podłoga i oznaczenia ========================================== */
.podloga{fill:#FFFFFF}
.estrada{fill:#F4F4F2}
.estrada-obrys{fill:none;stroke:var(--kreska);stroke-width:1}
.estrada-napis{
  fill:var(--szary-2);font-size:17px;font-weight:700;
  letter-spacing:4px;text-anchor:middle;text-transform:uppercase;
}
.przejscie{stroke:var(--kreska);stroke-width:1;stroke-dasharray:5 7;fill:none}

.tlo-sceny{transition:opacity .5s var(--ease)}
.sala.zoom .tlo-sceny{opacity:0}

/* == Stół ========================================================== */
.stol{cursor:pointer}
.stol-tarcza{fill:transparent}           /* powiększony cel dotyku */
.stol-kolo{
  fill:#FFFFFF;stroke:var(--czern);stroke-width:1;
  transition:fill .25s var(--ease),stroke-width .25s var(--ease);
}
/* Zajętość jako łuk — cienki, czarny, bez koloru. Ilość informacji
   ta sama, hałasu mniej. */
.stol-luk{fill:none;stroke:var(--czern);stroke-width:3;stroke-linecap:butt;
  transition:opacity .4s var(--ease)}
.stol-nr{
  fill:var(--czern);font-size:27px;font-weight:700;letter-spacing:-.04em;
  text-anchor:middle;dominant-baseline:central;pointer-events:none;
}

.stol{transition:opacity .5s var(--ease)}
.sala.zoom .stol[data-przygaszony="1"]{opacity:0;pointer-events:none}

@media (hover:hover){
  .stol:hover .stol-kolo{fill:var(--czern)}
  .stol:hover .stol-nr{fill:#FFFFFF}
}
.stol:focus{outline:none}
.stol:focus-visible .stol-kolo{stroke:var(--zielen-t);stroke-width:3}

.stol.pelny{cursor:not-allowed}
.stol.pelny .stol-kolo{fill:#F4F4F2;stroke:var(--kreska)}
.stol.pelny .stol-nr{fill:var(--szary-2)}
.stol.pelny .stol-luk{stroke:var(--kreska)}

.stol.wybrany .stol-kolo{fill:var(--czern);stroke:var(--czern)}
.stol.wybrany .stol-nr{fill:#FFFFFF}
.stol.wybrany .stol-luk{opacity:0}

/* Poświata z wersji pierwszej tu nie pasuje — zamiast niej cienki okrąg. */
.poswiata{fill:none;stroke:var(--kreska);stroke-width:1;
  opacity:0;transition:opacity .7s var(--ease) .2s;pointer-events:none}
.stol.wybrany .poswiata{opacity:1}

/* == Krzesła ======================================================= */
.krzesla{opacity:0;pointer-events:none}
.stol.wybrany .krzesla{opacity:1;pointer-events:auto}

.krzeslo{cursor:pointer}
.krzeslo-kolo{
  fill:#FFFFFF;stroke:var(--czern);stroke-width:1;
  transition:fill .22s var(--ease),stroke .22s var(--ease);
}
.krzeslo-nr{
  fill:var(--czern);font-size:12px;font-weight:700;text-anchor:middle;
  dominant-baseline:central;pointer-events:none;transition:fill .22s var(--ease);
}

/* SKALA MUSI SIEDZIEĆ NA WEWNĘTRZNEJ GRUPIE `.krzeslo-skala`.

   `.krzeslo` ma pozycję zapisaną w ATRYBUCIE transform="translate(x,y)",
   a transform z CSS-a nie dokłada się do atrybutu — zastępuje go
   w całości. Skala postawiona wprost na `.krzeslo` kasuje więc położenie
   i wszystkie dziesięć krzeseł ląduje w punkcie (0,0), czyli pod blatem.
   Na ekranie wygląda to tak, jakby wybór stołu w ogóle nie działał.

   Ten sam błąd był już raz naprawiony w wersji pierwszej i wrócił przy
   pisaniu arkusza dla wersji drugiej od zera. Stąd ten komentarz. */
.krzeslo-skala{
  transform:scale(.12);transform-box:fill-box;transform-origin:center;
  transition:transform .6s var(--ease-pk),opacity .3s var(--ease);
  opacity:0;
}
.sala.zoom .stol.wybrany .krzeslo-skala{transform:scale(1);opacity:1}

@media (hover:hover){
  .krzeslo:not(.zajete):hover .krzeslo-kolo{fill:#F4F4F2}
}
.krzeslo:focus{outline:none}
.krzeslo:focus-visible .krzeslo-kolo{stroke:var(--zielen-t);stroke-width:3}

/* Wybrane — pełna czerń. Jedyny mocny sygnał na całym planie. */
.krzeslo.wybrane .krzeslo-kolo{fill:var(--czern);stroke:var(--czern)}
.krzeslo.wybrane .krzeslo-nr{fill:#FFFFFF}

.krzeslo.zajete{cursor:not-allowed}
.krzeslo.zajete .krzeslo-kolo{fill:#F4F4F2;stroke:var(--kreska)}
.krzeslo-skos{stroke:var(--szary-2);stroke-width:1;stroke-linecap:butt}

/* == Nakładka nad planem ========================================== */
.sala-gora{
  position:absolute;left:0;right:0;top:0;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 16px;pointer-events:none;
}
.wroc,.etykieta-stolu{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:#FFFFFF;border:1px solid var(--kreska);padding:9px 15px;
  opacity:0;transition:opacity .4s var(--ease) .3s;
}
.wroc{display:inline-flex;align-items:center;gap:8px;color:var(--czern);pointer-events:none}
.sala.zoom .wroc,.sala.zoom .etykieta-stolu{opacity:1}
.sala.zoom .wroc{pointer-events:auto}
.wroc:hover{background:var(--czern);color:#fff;border-color:var(--czern)}
.etykieta-stolu{color:var(--szary)}
.etykieta-stolu b{color:var(--czern)}

/* == Legenda ======================================================= */
.legenda{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--szary-2);
}
.legenda li{display:flex;align-items:center;gap:8px}
.legenda i{width:11px;height:11px;border-radius:50%;border:1px solid var(--czern);background:#fff}
.legenda i.zaj{background:#F4F4F2;border-color:var(--kreska)}
.legenda i.wyb{background:var(--czern)}

/* == Panel ========================================================= */
/* Wiersze wyglądają jak wiersze programu wyżej — ten sam klocek systemu. */
.panel{border:1px solid var(--kreska);padding:clamp(18px,2.4vw,24px)}
@media (min-width:1040px){.panel{position:sticky;top:88px}}
.panel-tytul{
  display:flex;align-items:center;gap:10px;
  padding-bottom:14px;border-bottom:1px solid var(--kreska);margin-bottom:16px;
}
.panel-tytul .kwadrat{width:10px;height:10px}
.panel-tytul h3{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}

.panel-pusty{padding:18px 0;color:var(--szary-2);font-size:.875rem;line-height:1.5}
.panel-pod{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--szary-2);margin-bottom:14px}
.panel-pod b{color:var(--czern)}

.zetony{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.zetony li{
  border:1px solid var(--czern);padding:5px 10px;font-size:.75rem;
  font-variant-numeric:tabular-nums;
}

.kwota-pole{margin:16px 0 4px}
.kwota-pole label{display:block;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--szary-2);margin-bottom:8px}
.kwota-wejscie{position:relative;display:flex;align-items:center}
.kwota-wejscie input{
  width:100%;font-family:var(--f);font-size:1.6rem;font-weight:700;
  letter-spacing:-.03em;color:var(--czern);
  padding:10px 40px 10px 0;border:0;border-bottom:1px solid var(--czern);
  background:transparent;font-variant-numeric:tabular-nums;
}
.kwota-wejscie input:focus{outline:none;border-bottom-width:2px}
.kwota-wejscie span{position:absolute;right:0;color:var(--szary-2);pointer-events:none}
.kwota-min{font-size:.72rem;color:var(--szary-2);margin-top:8px;line-height:1.5}
.kwota-min.blad{color:var(--czern);font-weight:700}

.szybkie{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.szybkie button{
  border:1px solid var(--kreska);padding:6px 11px;font-size:.72rem;
  font-variant-numeric:tabular-nums;transition:border-color .2s,background-color .2s,color .2s;
}
.szybkie button:hover{background:var(--czern);border-color:var(--czern);color:#fff}

.panel-suma{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:16px 0;margin-top:12px;border-top:1px solid var(--kreska);
}
.panel-suma span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--szary-2)}
.panel-suma b{font-size:1.7rem;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.panel-nota{font-size:.72rem;color:var(--szary-2);margin-top:12px;line-height:1.6}

.btn-blok{width:100%;justify-content:center;margin-top:6px}

/* == Formularz ===================================================== */
.pole{margin-bottom:12px}
.pole label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--szary-2);margin-bottom:6px}
.pole input,.pole textarea{
  width:100%;font-family:var(--f);font-size:.95rem;font-weight:700;color:var(--czern);
  padding:9px 0;border:0;border-bottom:1px solid var(--kreska);background:transparent;
  transition:border-color .2s;
}
.pole textarea{resize:vertical;min-height:46px}
.pole input:focus,.pole textarea:focus{outline:none;border-bottom-color:var(--czern)}
.blad-pola{display:block;font-size:.7rem;margin-top:5px;color:var(--czern)}
.blad-ogolny{font-size:.78rem;margin:10px 0;line-height:1.5;color:var(--czern)}

.dodatkowe{margin:4px 0 12px}
.dodatkowe summary{cursor:pointer;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--szary-2);padding:6px 0;list-style:none}
.dodatkowe summary::-webkit-details-marker{display:none}
.dodatkowe summary::before{content:'+ '}
.dodatkowe[open] summary::before{content:'− '}

.zgoda{display:flex;gap:10px;align-items:flex-start;margin:14px 0 4px;cursor:pointer}
.zgoda input{margin-top:2px;width:15px;height:15px;accent-color:var(--czern);flex-shrink:0}
.zgoda span{font-size:.72rem;color:var(--szary-2);line-height:1.5}
/* Odnośnik w zgodzie musi być widać, że jest odnośnikiem — inaczej nikt
   nie otworzy regulaminu, a to jego akceptację właśnie potwierdza. */
.zgoda a{color:var(--czern);border-bottom:1px solid var(--kreska)}
.zgoda a:hover{border-color:var(--czern)}
.zgoda b{color:var(--czern);font-weight:700}

/* Klauzula informacyjna RODO. Mniejsza od zgody, bo to informacja,
   a nie decyzja — ale nadal czytelna, nie „drobny druk". */
.klauzula{
  font-size:.68rem;line-height:1.55;color:var(--szary-2);
  margin:10px 0 4px;
}
.klauzula a{color:var(--szary);border-bottom:1px solid var(--kreska)}
.klauzula a:hover{color:var(--czern);border-color:var(--czern)}

@media (prefers-reduced-motion:reduce){
  .kamera,.krzeslo,.wroc,.etykieta-stolu,.tlo-sceny,.stol,.poswiata{
    transition-duration:.01ms!important;transition-delay:0ms!important;
  }
}


/* == Stoły VIP ===================================================== */
/* Pierwszy rząd przy scenie. W tym języku nie ma kolorów do rozdawania,
   więc VIP dostaje trzy rzeczy naraz, każdą czytelną osobno:

     1. pierścień — inna SYLWETKA, widoczna z odległości i przy zmniejszeniu,
     2. plakietkę — zwartą ciemną plamę tam, gdzie zwykłe stoły mają pustkę,
     3. podpis strefy przy scenie — powód, dla którego ten rząd kosztuje więcej.

   Wcześniej było to samo pogrubienie kreski z 1 na 2,5 px. Przy planie
   szerokim na 320 px to różnica pół piksela — czyli w praktyce żadna. */
.stol-vip-ring{
  fill:none;stroke:var(--czern);stroke-width:1;opacity:.45;
  transition:opacity .4s var(--ease);pointer-events:none;
}
.stol.vip .stol-kolo{stroke-width:1.75}
.stol.vip.pelny .stol-kolo{stroke-width:1}
.stol.pelny .stol-vip-ring{stroke:var(--kreska);opacity:1}
/* Po wejściu w stół pierścień tylko przeszkadza — krzesła wyjeżdżają
   dokładnie w to miejsce. */
.sala.zoom .stol.wybrany .stol-vip-ring{opacity:0}

.stol-vip{pointer-events:none}
.stol-vip-tlo{fill:var(--czern);transition:fill .25s var(--ease)}
/* Stopień pisma podany w PIKSELACH EKRANU, nie w jednostkach rysunku.
   `--skala` ustawia plan.js na podstawie rzeczywistej szerokości rysunku,
   więc dzielenie przez nią daje napis tej samej wielkości niezależnie od
   tego, czy plan ma 333 px szerokości, czy 940. Bez tego ten sam podpis
   miał 14 px na monitorze i 4,7 px na telefonie. Wartość zapasowa 1
   zostawia rozsądny rozmiar, gdyby JS nie zdążył. */
.stol-vip-napis{
  fill:#FFFFFF;font-size:14px;font-weight:700;letter-spacing:.13em;
  text-anchor:middle;dominant-baseline:central;
  transition:fill .25s var(--ease);
}
/* Plakietka skaluje się razem ze stołem, więc słowa nie da się w niej
   utrzymać w stałym rozmiarze — poniżej progu znika i zostaje sam
   kształt. Ten sam kształt stoi w legendzie, więc rozpoznanie jest
   nadal wytłumaczone. */
.sala.bez-slowa .stol-vip-napis{display:none}
/* Wybrany stół robi się czarny, więc plakietka musi pójść w drugą
   stronę — inaczej znika w tle. To samo przy najechaniu myszą. */
.stol.wybrany .stol-vip-tlo{fill:#FFFFFF}
.stol.wybrany .stol-vip-napis{fill:var(--czern)}
/* Komplet: plakietka gaśnie razem ze stołem. Zestawienie musi zostać
   czytelne — biel na średniej szarości dawała 2,7:1 i „VIP" na zajętym
   stole robiło się nieczytelną plamą. Ciemniejszy napis na jaśniejszym
   tle daje ok. 4:1: widać, że stan jest nieaktywny, ale nadal wiadomo,
   co tam pisze. */
.stol.pelny .stol-vip-tlo{fill:var(--kreska)}
.stol.pelny .stol-vip-napis{fill:var(--szary)}
@media (hover:hover){
  .stol:not(.pelny):hover .stol-vip-tlo{fill:#FFFFFF}
  .stol:not(.pelny):hover .stol-vip-napis{fill:var(--czern)}
}

/* Podpis strefy pod estradą — tym samym krojem co „SCENA", o stopień mniej. */
.strefa-napis{
  fill:var(--szary);font-weight:700;
  font-size:calc(12px / var(--skala,1));
  letter-spacing:calc(1.9px / var(--skala,1));
  text-anchor:middle;text-transform:uppercase;pointer-events:none;
}

/* Znacznik w legendzie powtarza plakietkę, a nie obwódkę — legenda ma
   pokazywać to, czego się szuka na planie. */
.legenda i.vip{
  width:26px;height:13px;border-radius:7px;border:0;
  background:var(--czern);
}

/* == Wybór metody płatności ======================================== */
/* Dwie opcje, nie rozwijana lista: przy dwóch pozycjach lista chowa
   drugą możliwość za kliknięciem, a to właśnie ta druga jest powodem,
   dla którego cała ta sekcja istnieje. */
.metoda{border:0;padding:0;margin:16px 0 4px}
.metoda legend{
  padding:0;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--szary-2);margin-bottom:9px;
}
.metoda label{
  display:flex;gap:10px;align-items:flex-start;
  padding:11px 13px;border:1px solid var(--kreska);margin-bottom:7px;
  cursor:pointer;transition:border-color .2s var(--ease);
}
.metoda label:hover{border-color:var(--szary-2)}
.metoda input{margin-top:3px;width:16px;height:16px;accent-color:var(--czern);flex-shrink:0}
.metoda span{font-size:.8rem;line-height:1.5;color:var(--szary)}
.metoda span b{display:block;font-size:.88rem;color:var(--czern);margin-bottom:1px}

/* BŁĄD, KTÓRY TU BYŁ — wart komentarza, bo łatwo go powtórzyć.
   Stała tu reguła `.metoda input:checked ~ span b{color:var(--czern)}`,
   dołożona „dla podkreślenia" wybranej opcji. Na jasnym tle nie robiła
   nic (podpisy i tak są czarne), a na ciemnym była katastrofą: jej
   specyficzność (0,2,3) przebijała `.metoda--ciemna span b{color:#fff}`
   (0,1,2), więc podpis ZAZNACZONEJ opcji robił się czarny na czarnym
   i po prostu znikał. Wybranie „Przelew tradycyjny" kasowało napis
   „Przelew tradycyjny".

   Wniosek na przyszłość: stan zaznaczenia pokazujemy ramką i tłem
   CAŁEGO pola, nie przemalowywaniem tekstu. Kolor tekstu jest już
   ustawiony przez wariant i nie ma powodu, żeby go ruszać. */
.metoda label:has(input:checked){
  border-color:var(--czern);
  background:#F4F4F2;
}
/* Zapas dla przeglądarek bez :has() — klasę dokłada JS przy zmianie
   wyboru. Sama ramka nie wystarczy, jeśli przeglądarka jej nie postawi. */
.metoda label.wybrana{border-color:var(--czern);background:#F4F4F2}
.metoda input:focus-visible{outline:2px solid var(--zielen-t);outline-offset:3px}

/* Wariant na ciemnym tle — sekcja wsparcia bez biletu. */
.metoda--ciemna legend{color:rgba(255,255,255,.45)}
.metoda--ciemna label{border-color:rgba(255,255,255,.3)}
.metoda--ciemna label:hover{border-color:rgba(255,255,255,.6)}
.metoda--ciemna span{color:rgba(255,255,255,.55)}
.metoda--ciemna span b{color:#fff}
/* accent-color na biało daje biały punkt na białym kółku — sam znacznik
   radiowy kiepsko pokazuje wybór na ciemnym tle. Dlatego o zaznaczeniu
   mówi tu przede wszystkim rozjaśnione pole. */
.metoda--ciemna input{accent-color:#fff}
.metoda--ciemna label:has(input:checked),
.metoda--ciemna label.wybrana{
  border-color:#fff;
  background:rgba(255,255,255,.10);
}
.metoda--ciemna input:focus-visible{outline-color:#fff}

/* == Dane do przelewu po rezerwacji ================================ */
/* Numer rachunku i tytuł są tu do PRZEPISANIA do bankowości, więc liczy
   się jedno: czytelność cyfr. Stąd tabular-nums (równa szerokość cyfr,
   łatwiej nie zgubić miejsca) i większy stopień na tych dwóch polach. */
.pz-wstep{font-size:.88rem;line-height:1.6;color:var(--szary);margin:10px 0 16px}
.pz-dane{border-top:1px solid var(--kreska);margin:0 0 14px}
.pz-wiersz{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--kreska);
}
.pz-wiersz dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--szary-2)}
.pz-wiersz dd{margin:0;text-align:right;font-size:.9rem}
.pz-wiersz dd.pz-mocno{
  font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.pz-uwaga{
  font-size:.82rem;line-height:1.6;color:var(--szary);
  border-left:2px solid var(--czern);padding-left:12px;margin:14px 0 16px;
}
/* Uwaga o czasie w ostatniej dobie przed koncertem (przelew może nie zdążyć).
   Czerwona kreska i pełna czerń tekstu — to jedyne zdanie na tym ekranie,
   które może zmienić czyjąś decyzję, więc nie może czytać się jak przypis. */
.pz-uwaga--czas,.uwaga--czas{color:var(--czern);border-left-color:var(--czerwien)}
.wsparcie .pz-dane{border-top-color:rgba(255,255,255,.25)}
.wsparcie .pz-wiersz{border-bottom-color:rgba(255,255,255,.25)}
.wsparcie .pz-wiersz dt{color:rgba(255,255,255,.45)}
.wsparcie .pz-wiersz dd{color:#fff}
.wsparcie .pz-uwaga{color:rgba(255,255,255,.6);border-left-color:#fff}

/* Informacja o zmianie sposobu zapłaty przez serwer. Wygląda jak ostrzeżenie,
   bo nim jest: człowiek kliknął „zapłać online", a dostał dane do przelewu.
   Zdanie bez wyróżnienia zginęłoby nad tabelą z numerem rachunku. */
.pz-zmiana,.wsp-uwaga{
  font-size:.84rem;line-height:1.55;font-weight:700;
  border:1px solid var(--czern);padding:10px 12px;margin:10px 0 14px;
}
.wsparcie .pz-zmiana,.wsparcie .wsp-uwaga{border-color:#fff;color:#fff}

/* Przejście do załączenia potwierdzenia — następny krok po przelewie,
   więc przycisk, a nie odnośnik na końcu akapitu. */
.pz-krok{margin-top:16px}
.pz-krok-nota{margin:9px 0 0;font-size:.8rem;line-height:1.5;color:var(--szary-2)}
.wsparcie .pz-krok-nota{color:rgba(255,255,255,.45)}

/* Gdy została jedna metoda zapłaty, kółko wyboru wprowadza w błąd:
   sugeruje decyzję, której nie ma. Treść zostaje, wybór znika. */
.metoda--jedna label{cursor:default}
.metoda--jedna input{display:none}
/* Zdanie porównujące metody znika, gdy nie ma z czym porównywać. */
.metoda--jedna .tylko-para{display:none}

/* Przycisk kopiowania przy tytule przelewu. Tytuł ma czterdzieści kilka
   znaków i trafia stąd wprost do bankowości — przepisywanie go z ekranu
   telefonu jest najprostszą drogą do literówki, przez którą księgowość
   wpłaty nie rozpozna. */
.pz-kopiuj{
  margin-left:10px;font:inherit;font-size:.68rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.06em;padding:4px 9px;
  border:1px solid var(--kreska);background:none;color:var(--szary);
  cursor:pointer;white-space:nowrap;vertical-align:middle;
}
.pz-kopiuj:hover{border-color:var(--czern);color:var(--czern)}
.wsparcie .pz-kopiuj{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.7)}
.wsparcie .pz-kopiuj:hover{border-color:#fff;color:#fff}

/* Gdy została jedna metoda płatności, nie ma z czego wybierać — zamiast
   pola wyboru stoi zdanie mówiące, co nastąpi po kliknięciu. */
.metoda-jedna{
  margin:16px 0 4px;padding:11px 13px;
  border-left:2px solid var(--kreska);
  font-size:.8rem;line-height:1.55;color:var(--szary);
}
.metoda-jedna b{color:var(--czern)}

/* Numer kontaktowy przy każdym kroku, w którym idą pieniądze. Ktoś, kto
   utknie na płatności, ma mieć drogę wyjścia w zasięgu wzroku — nie
   w stopce trzy ekrany niżej. Na stronie zapowiadającej telefonu
   celowo nie ma: tam nie ma czego obsługiwać. */
.pomoc{
  margin-top:16px;padding-top:14px;
  border-top:1px solid var(--kreska);
  font-size:.78rem;line-height:1.5;color:var(--szary-2);
}
.pomoc a{color:var(--czern);border-bottom:1px solid var(--kreska);white-space:nowrap}
.pomoc a:hover{border-color:var(--czern)}
.wsparcie .pomoc{border-top-color:rgba(255,255,255,.25);color:rgba(255,255,255,.45)}
.wsparcie .pomoc a{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
.wsparcie .pomoc a:hover{border-bottom-color:#fff}