/*-----------------------------------------------------------
	FORMULARZ WPLAT - WC DONATION PLATFORM

	Plik dodany 2026-07-29.
	Dotyczy /wplac-online/ oraz wszystkich krokow formularza
	(kwota -> dane -> platnosc), bo wtyczka renderuje calosc
	w jednym #wcdp i przelacza zakladki .wcdp-tab.

	Zaden plik wtyczki nie jest modyfikowany.

	===========================================================
	WAZNE - WARUNEK KONIECZNY

	W Wyglad -> Dostosuj -> Dodatkowy CSS siedzi blok zaczynajacy
	sie od komentarza:

	    "1. Ograniczenie szerokosci calego formularza..."

	Trzeba go USUNAC w calosci (do konca, wraz z regula
	.wcdp-form-wrapper::after). Powody nizej.

	Blok celuje w klasy, ktore w tej wtyczce NIE ISTNIEJA:
	    .wcdp-modal-content   -> wtyczka ma .wcdp-popup
	    .wcdp-form-wrapper    -> wtyczka ma .wcdp-form
	    .wcdp-form-steps      -> wtyczka ma .wcdp-header
	    .wcdp-next-btn        -> wtyczka ma .wcdp-button

	Z czterech selektorow dziala wiec tylko jeden - i to on
	psuje formularz:

	    div[id*="wcdp"] { max-width:650px; margin:40px auto;
	                      padding:35px; background:#fff;
	                      border-radius:16px; box-shadow:...;
	                      border:1px solid #eef2f5; }

	"id zawiera wcdp" lapie KAZDY div formularza naraz:
	    #wcdp                      - wrapper (jedyny zamierzony)
	    #wcdp-progress-bar         - pasek postepu, ma miec 6px
	    #wcdp-progress-bar-background
	    #wcdp-header-step-1/2/3    - kolka z numerami krokow
	    #wcdp-step-1/2/3           - panele zakladek
	    #wcdp_va_amount, #wcdp-spinner

	Kazdy z nich dostaje 35px paddingu, biale tlo, ramke, cien
	i 40px marginesu. Pasek postepu (6px) puchnie do ~106px,
	trzy kolka krokow zamieniaja sie w biale kafle rozjezdzajace
	float z .wcdp-header (ktory ma height: calc(4em + 20px)
	i overflow: hidden, wiec je przycina), a panele zakladek
	tworza karte w karcie.

	Do tego wszystko ma !important, wiec dopoki blok tam jest,
	ponizsze reguly nie maja szans.

	Kopia obecnego CSS z Customizera jest w katalogu roboczym
	sesji jako kopia-wp-custom-css.txt.

	Regule .woocommerce-message { display:none } zostaw -
	to osobna, dzialajaca rzecz.
	===========================================================

	KOLEJNOSC LADOWANIA

	Plik jest podpiety w header.php ZA wp_head(), dzieki czemu
	laduje sie po <style id="wp-custom-css"> i po arkuszach
	WooCommerce. Arkusz samej wtyczki (wcdp.min.css) wypada
	jednak jeszcze pozniej, tuz przed </head>, wiec kolejnosc
	go nie przebija.

	Dlatego KAZDY selektor ponizej jest prefiksowany .wcdp-form -
	dodatkowa klasa podnosi specyficznosc ponad reguly wtyczki,
	ktore operuja na pojedynczych klasach. Przy dopisywaniu
	nowych regul trzymaj sie tego prefiksu, inaczej przestana
	dzialac bez zadnego ostrzezenia.
-------------------------------------------------------------*/


/*-----------------------------------------------------------
	1. KOLORY
-------------------------------------------------------------*/

/* --wcdp-main i --wcdp-main-2 MUSZA byc ustawione na :root.

   wcdp.js robi na <html> inline:
       root.style.setProperty("--wcdp-step-2", "var(--wcdp-main)")
       root.style.setProperty("--wcdp-step-3", "var(--wcdp-main-2)")
   czyli podmienia kolory krokow 2 i 3 przy przechodzeniu dalej.
   var() w tej wartosci rozwiazuje sie wzgledem <html>, wiec gdyby
   te dwie zmienne byly ustawione nizej (np. na .wcdp-form),
   krok 1 mialby moj kolor, a kroki 2-3 kolor wtyczki.

   Podwojne :root:root daje specyficznosc 0,2,0 i wygrywa
   z blokiem <style id="wcdp-css"> wtyczki (0,1,0) niezaleznie
   od kolejnosci ladowania.

   --wcdp-step-2 i --wcdp-step-3 TEZ musza tu byc, i to wylacznie
   na :root.

   Wtyczka wpisuje im w <style id="wcdp-css"> doslowna wartosc
   opcji (#111111), a nie var(--wcdp-main) - podniesienie
   --wcdp-main samo z siebie ich wiec nie rusza. Jednoczesnie
   wcdp.js NIE wywoluje wcdp_steps(1) przy starcie (funkcja
   odpala sie dopiero po odpowiedzi AJAX albo przy przejsciu
   dalej), wiec po odswiezeniu strony na kroku 1 wszystkie trzy
   kroki i oba laczniki byly ciemne, jakby caly formularz byl
   juz wypelniony.

   Ustawienie ich tutaj daje poprawny stan poczatkowy i NIE
   zamraza wskaznika: JS zapisuje te zmienne jako styl inline
   na <html>, a inline bije kazda regule z arkusza. Po przejsciu
   dalej sterowanie wraca wiec do JS.

   Wazne, zeby zostaly na :root. Gdyby wyladowaly na .wcdp-form,
   czyli blizej formularza niz <html>, to one wygralyby z inline
   stylem JS i wskaznik faktycznie by sie zaklinowal.

   Alternatywa bez CSS: te dwa kolory to opcje wtyczki
   (wcdp_secondary_color -> --wcdp-main,
    wcdp_main_color      -> --wcdp-main-2)
   do ustawienia w wp-admin. Obecnie OBIE maja #111111, przez co
   wypelnienie paska postepu jest tego samego koloru co jego tlo
   i pasek jest po prostu niewidoczny, a wszystkie trzy kroki
   wygladaja identycznie. Ponizsze wartosci to naprawiaja. */

:root:root {
	--wcdp-main: #D0D0D0;
	--wcdp-main-2: #1A1A1A;
	--wcdp-main-3: #B30000;

	/* Stan poczatkowy: krok 1 aktywny, kroki 2 i 3 jeszcze nie.
	   var(--wcdp-main) - dokladnie to, co wpisuje tu JS przy
	   wywolaniu wcdp_steps(1). */
	--wcdp-step-2: var(--wcdp-main);
	--wcdp-step-3: var(--wcdp-main);
}

/* Pozostale zmienne sa w :root zahardkodowane w PHP wtyczki
   (m.in. --wcdp-label-inactive: LightGray - slowo kluczowe CSS,
   nie kolor z palety). Tu wystarczy .wcdp-form: custom properties
   dziedzicza, a blizszy przodek wygrywa. */

.wcdp-form {
	--wcdp-label-inactive: #FFFFFF;
	--wcdp-label-inactive-hover: #EFEFEF;
	--wcdp-label-text: #1A1A1A;
	--wcdp-label-text-checked: #FFFFFF;
	--wcdp-background-color: #FFFFFF;
	--wcdp-controls: #1A1A1A;
	--wcdp-overlay-color: rgba(26, 26, 26, .85);
}


/*-----------------------------------------------------------
	2. SZEROKOSC I WYROWNANIE
-------------------------------------------------------------*/

/* Bez ramki i bez wlasnego paddingu.

   Wczesniej byla tu karta (border 1px + padding), ale w motywie
   nie ma ani jednego takiego elementu - cala strona operuje
   plaskimi sekcjami i cienkimi separatorami. Ramka wokol
   formularza odcinala sie od tej siatki i jej wnetrze nie
   trzymalo osi z reszta kolumny tekstowej.

   Teraz formularz jest zwykla kolumna wyrownana do tresci
   strony, a role podzialu przejmuja separatory w tabeli
   podsumowania i pod lista platnosci.

   Gdyby jednak karta miala wrocic - wystarczy odkomentowac:

       .wcdp-form#wcdp {
           padding: clamp(24px, calc(24px + (24) * ((100vw - 320px) / (1680))), 48px);
           background: #FFFFFF;
           border: 1px solid #D0D0D0;
       }

   przy czym padding MUSI byc podany jednym skrotem (rowno
   z czterech stron) - wczesniejsza wersja rozjezdzala sie
   w prawo. */

.wcdp-form#wcdp {
	max-width: 720px;
	margin: 0 auto;
	padding: 0;
	background: none;
	border: 0;
}


/*-----------------------------------------------------------
	3. NAGLOWEK Z KROKAMI

	Uklad poziomy: [kolko] Etykieta ---- [kolko] Etykieta ----
	[kolko] Etykieta, zamiast domyslnego kolka NAD wysrodkowana
	etykieta z jednym ciagłym paskiem przebiegajacym w tle.

	Markup (z wcdp_form.php, kolejnosc ma znaczenie):
	    .wcdp-header
	        #wcdp-progress-bar-background
	        #wcdp-progress-bar
	        .wcdp-step.wcdp-header-step-1  (tekst + ::before = numer)
	        .wcdp-step.wcdp-header-step-2
	        .wcdp-step.wcdp-header-step-3

	Etykieta jest golym tekstem w divie, a numer pochodzi
	z ::before { content: attr(data-step) }. Zostaje wiec wolne
	::after na kazdym kroku - i to ono robi lacznik.
-------------------------------------------------------------*/

/* Wtyczka trzyma naglowek na floatach w sztywnej wysokosci
   (height: calc(4em + 20px); overflow: hidden). Jedno i drugie
   musi zniknac, inaczej flex nie ma jak zadzialac, a wyzsze
   kolka zostalyby przyciete. */

.wcdp-form .wcdp-header {
	display: flex;
	align-items: center;
	height: auto;
	overflow: visible;
	padding: 0 0 clamp(24px, calc(24px + (16) * ((100vw - 320px) / (1680))), 40px);
}

.wcdp-form .wcdp-header > .wcdp-step {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	width: auto;
	float: none;
	text-align: left;
	white-space: nowrap;
	font-family: 'Wallop', sans-serif;
	font-size: 16px;
	line-height: 1.3;
}

/* Ostatni krok nie ma lacznika, wiec nie ma czego rozciagac -
   inaczej "Payment" odjechaloby od swojego kolka. */

.wcdp-form .wcdp-header > .wcdp-header-step-3 {
	flex: 0 0 auto;
}

/* Kolko z numerem. Celowo BEZ background - kolor kolka ustawiaja
   reguly .wc-donation-platform .wcdp-header-step-N:before, ktore
   sa sterowane zmiennymi --wcdp-step-2 / --wcdp-step-3 z JS.
   Podanie tu tla zamrozilo by wskaznik postepu. */

.wcdp-form .wcdp-header > .wcdp-step::before {
	flex: 0 0 auto;
	width: 2em;
	height: 2em;
	line-height: 2em;
	margin: 0;
	font-family: 'Wallop', sans-serif;
	font-size: 15px;
	text-align: center;
}

/* Lacznik miedzy krokami.

   Kolor bierze ze zmiennej NASTEPNEGO kroku, nie wlasnego:
   odcinek 1-2 pokazuje, czy krok 2 zostal osiagniety, wiec
   --wcdp-step-2. Gdyby uzyc wlasnego koloru, pierwszy odcinek
   bylby zawsze ciemny, bo krok 1 ma na stale --wcdp-main-2. */

.wcdp-form .wcdp-header > .wcdp-step::after {
	content: '';
	flex: 1 1 auto;
	min-width: 16px;
	height: 1px;
}

.wcdp-form .wcdp-header > .wcdp-header-step-1::after {
	background-color: var(--wcdp-step-2);
}

.wcdp-form .wcdp-header > .wcdp-header-step-2::after {
	background-color: var(--wcdp-step-3);
}

.wcdp-form .wcdp-header > .wcdp-header-step-3::after {
	display: none;
}

/* Odstep miedzy koncem lacznika a kolkiem nastepnego kroku.

   Lacznik jest ::after kroku poprzedniego, wiec bez tego dotyka
   kolka kroku nastepnego. Odstep po LEWEJ stronie lacznika daje
   juz gap: 12px wewnatrz kroku - te marginesy dokladaja taki sam
   odstep po prawej, zeby odcinek byl wycentrowany miedzy
   etykieta a kolejnym kolkiem. */

.wcdp-form .wcdp-header > .wcdp-header-step-2,
.wcdp-form .wcdp-header > .wcdp-header-step-3 {
	margin-left: 12px;
}

/* Ciagly pasek postepu jest w tym ukladzie zbedny - jego role
   przejely laczniki. JS dalej ustawia mu width (33.33% na krok),
   co na ukrytym elemencie nic nie robi i niczego nie psuje. */

.wcdp-form #wcdp-progress-bar,
.wcdp-form #wcdp-progress-bar-background {
	display: none;
}


/*-----------------------------------------------------------
	3b. NAGLOWKI KROKOW

	Krok 2 ma <h3>Dane rozliczeniowe</h3>, krok 3 <h3>Your
	Donation</h3> - oba bez zadnej klasy, wiec lapaly rozmiar
	h3 z motywu (Wallop, kilkadziesiat px), co przy 16-18px
	tresci formularza wygladalo jak naglowek sekcji strony,
	a nie jak naglowek kroku.

	UWAGA: "Your Donation" to nieprzetlumaczony string wtyczki
	(esc_html_e w includes/templates/wcdp_step_3.php, domena
	wc-donation-platform). Nie ma na niego filtra i CSS tego nie
	zalatwi - do przetlumaczenia przez Loco Translate, ktore
	jest juz zainstalowane. */

.wcdp-form .wcdp-tab > h3 {
	font-family: 'Wallop', sans-serif;
	font-size: clamp(20px, calc(20px + (8) * ((100vw - 320px) / (1680))), 28px);
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 20px;
}

/* Wtyczka wstawia goly <br> miedzy #payment a .button-row -
   przy ustawionych marginesach robi zbedna dziure. */

.wcdp-form .wcdp-tab > br {
	display: none;
}


/*-----------------------------------------------------------
	4. KROK 1 - WYBOR KWOTY
-------------------------------------------------------------*/

/* Wtyczka daje .wcdp_amount sztywne 1fr 1fr 1fr niezaleznie od
   szerokosci - przy dluzszych kwotach robi sie ciasno.
   auto-fit trzyma 3 kolumny na szeroko i schodzi nizej na waskich. */

.wcdp-form .wcdp_amount {
	grid-template-columns: repeat(auto-fit, minmax(9ch, 1fr));
	grid-gap: 10px;
}

.wcdp-form .wcdp_options {
	grid-gap: 10px;
}

/* Wtyczka daje padding: 6px - za ciasno przy typografii motywu.
   Wariant obrysowany zamiast szarego wypelnienia (LightGray). */

.wcdp-form .wcdp_options > li > label {
	font-family: 'Wallop', sans-serif;
	font-size: 18px;
	line-height: 1.2;
	padding: 16px 12px;
	border: 1px solid #D0D0D0;
	transition: .2s;
}

.wcdp-form ul.wcdp_options > li > input:checked + label,
.wcdp-form ul.wcdp_options > li > input:checked + label span {
	border-color: #1A1A1A;
}

.wcdp-form ul.wcdp_options > li > input:focus + label {
	box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #1A1A1A;
}

/* Pole wlasnej kwoty.

   Prefiks .wcdp-form .wcdp-body jest tu konieczny: wtyczka ma
   .wcdp-body input.wcdp-donation-amount o tej samej
   specyficznosci co samo .wcdp-form input..., a jej arkusz
   laduje sie pozniej - przy remisie wygralaby wtyczka.

   Swiadomie NIE ruszamy width ani text-align: wtyczka liczy
   szerokosc jako calc(100% - 1ch - 20px) / 10ch, zeby obok
   pola zmiescil sie symbol waluty. */

.wcdp-form .wcdp-body input.wcdp-donation-amount,
.wcdp-form .wcdp-amount > input.wcdp-donation-amount {
	font-family: 'Wallop', sans-serif;
	padding: 12px 8px;
	border: 1px solid #D0D0D0;
	border-radius: 0;
	background: #FFFFFF;
}


/*-----------------------------------------------------------
	5. PRZYCISKI

	Wzorowane na przycisku newslettera w stopce
	(style.css: .footer-top.newsletter .button-section a)
	- ramka 1px, na hover inwersja.
-------------------------------------------------------------*/

.wcdp-form .wcdp-button,
.wcdp-form button.button,
.wcdp-form #place_order,
.wcdp-form .button.alt {
	font-family: 'Wallop', sans-serif;
	font-size: 18px;
	line-height: 1;
	padding: 16px 32px;
	color: #FFFFFF;
	background-color: #1A1A1A;
	border: 1px solid #1A1A1A;
	border-radius: 0;
	transition: .3s;
	cursor: pointer;
}

.wcdp-form .wcdp-button:hover,
.wcdp-form button.button:hover,
.wcdp-form #place_order:hover,
.wcdp-form .button.alt:hover {
	color: #1A1A1A;
	background-color: transparent;
}

/* Przycisk "wstecz" jako drugorzedny */

.wcdp-form .wcdp-button.wcdp-left {
	color: #1A1A1A;
	background-color: transparent;
}

.wcdp-form .wcdp-button.wcdp-left:hover {
	color: #FFFFFF;
	background-color: #1A1A1A;
}

/* Wtyczka ustawia .button-row jako
       display:flex; justify-content:space-between; flex-direction:row-reverse
   i opiera sie na tym: w markupie sa dwa dzieci - pusty <div>
   i przycisk. row-reverse + space-between rozrzuca je na skrajne
   krawedzie, dzieki czemu "Back" ladue po lewej, a "Next"
   po prawej. Obie wlasciwosci trzeba tu powtorzyc, inaczej
   przyciski zlepiaja sie po lewej. */

.wcdp-form .button-row {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
}


/*-----------------------------------------------------------
	6. KROKI 2 I 3 - POLA CHECKOUTU
-------------------------------------------------------------*/

.wcdp-form .form-row {
	padding: 0;
	margin: 0 0 18px;
}

.wcdp-form .form-row label {
	display: block;
	margin-bottom: 6px;
	font-family: 'Wallop', sans-serif;
	font-size: 16px;
	line-height: 1.3;
}

.wcdp-form .form-row .required {
	text-decoration: none;
	border: 0;
}

.wcdp-form input.input-text,
.wcdp-form textarea,
.wcdp-form select {
	width: 100%;
	padding: 14px 16px;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #1A1A1A;
	background: #FFFFFF;
	border: 1px solid #D0D0D0;
	border-radius: 0;
	transition: border-color .2s;
}

.wcdp-form input.input-text:focus,
.wcdp-form textarea:focus,
.wcdp-form select:focus {
	border-color: #1A1A1A;
	outline: none;
}

.wcdp-form .woocommerce-invalid input.input-text {
	border-color: var(--wcdp-main-3);
}

/* Select2 (kraj) - dociagniecie do wygladu pozostalych pol */

.wcdp-form .select2-container .select2-selection--single {
	height: auto;
	padding: 8px 6px;
	border: 1px solid #D0D0D0;
	border-radius: 0;
}

.wcdp-form .wcdp-required-field-notice {
	font-size: 14px;
	color: #707070;
}


/*-----------------------------------------------------------
	7. PODSUMOWANIE I PLATNOSC (krok 3)
-------------------------------------------------------------*/

.wcdp-form .shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin-bottom: 24px;
}

.wcdp-form .shop_table th,
.wcdp-form .shop_table td {
	padding: 14px 0;
	text-align: left;
	border: 0;
	border-bottom: 1px solid #EFEFEF;
	font-size: 16px;
}

/* Wyrownanie kwot do prawej.

   Poprzednia wersja obejmowala tylko .product-total i
   .order-total td, przez co wiersz <tr class="cart-subtotal">
   ("Kwota") zostawal wyrownany do lewej i jego kwota wisiala
   w polowie tabeli, podczas gdy wiersz nad nim i pod nim byly
   przy prawej krawedzi.

   tfoot td lapie oba wiersze podsumowania naraz, .product-total
   dziala i na <th> w naglowku, i na <td> w wierszach pozycji
   dokladanych przez AJAX. */

.wcdp-form .shop_table .product-total,
.wcdp-form .shop_table tfoot td {
	text-align: right;
}

.wcdp-form .shop_table thead th {
	font-family: 'Wallop', sans-serif;
	font-weight: 500;
	border-bottom: 1px solid #1A1A1A;
}

.wcdp-form .shop_table tfoot th {
	font-weight: 400;
}

.wcdp-form .shop_table .order-total th,
.wcdp-form .shop_table .order-total td {
	font-family: 'Wallop', sans-serif;
	font-size: 20px;
	font-weight: 500;
	border-bottom: 0;
	border-top: 1px solid #1A1A1A;
}

.wcdp-form .shop_table .order-total td strong {
	font-weight: 500;
}

.wcdp-form #payment {
	background: #EFEFEF;
	border-radius: 0;
	padding: 24px;
}

.wcdp-form #payment ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0 0 20px;
	border-bottom: 1px solid #D0D0D0;
}

/* Arkusze WooCommerce NIE sa na tej stronie ladowane (w <head>
   nie ma woocommerce-general.css - wylacza je motyw albo
   woocommerce-direct-checkout), wiec lista metod platnosci nie
   ma zadnego stylowania poza tym plikiem i domyslnym HTML.

   Flex + wrap ustawia radio i etykiete w jednej linii i rowno
   w pionie, a opis metody (.payment_box) laduje w nowym wierszu
   z wcieciem rownym szerokosci radia - wczesniej zaczynal sie
   na lewo od tekstu etykiety, ktora opisuje. */

.wcdp-form #payment ul.payment_methods li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
}

.wcdp-form #payment ul.payment_methods li > label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: 'Wallop', sans-serif;
	font-size: 18px;
	line-height: 1.3;
	cursor: pointer;
}

.wcdp-form #payment ul.payment_methods li > label img {
	max-height: 20px;
	width: auto;
	margin: 0;
	vertical-align: middle;
}

.wcdp-form #payment .payment_box {
	flex-basis: 100%;
	margin: 4px 0 0 26px;
	padding: 16px;
	background: #FFFFFF;
	border-radius: 0;
	font-size: 15px;
	line-height: 1.5;
}

.wcdp-form #payment .payment_box p:last-child {
	margin-bottom: 0;
}

.wcdp-form #payment .payment_box::before {
	display: none;
}

.wcdp-form #payment div.form-row.place-order {
	padding: 20px 0 0;
	margin: 0;
}


/*-----------------------------------------------------------
	8. WASKIE EKRANY
-------------------------------------------------------------*/

@media (max-width: 600px) {

	.wcdp-form #payment {
		padding: 16px;
	}

	.wcdp-form #payment .payment_box {
		margin-left: 0;
		padding: 12px;
	}

	/* Trzy etykiety + kolka + laczniki musza zmiescic sie
	   w jednym wierszu przy 320px. */

	.wcdp-form .wcdp-header > .wcdp-step {
		font-size: 12px;
		gap: 6px;
	}

	.wcdp-form .wcdp-header > .wcdp-step::before {
		width: 1.8em;
		height: 1.8em;
		line-height: 1.8em;
		font-size: 12px;
	}

	.wcdp-form .wcdp-header > .wcdp-step::after {
		min-width: 8px;
	}

	.wcdp-form .wcdp-header > .wcdp-header-step-2,
	.wcdp-form .wcdp-header > .wcdp-header-step-3 {
		margin-left: 6px;
	}

	.wcdp-form .wcdp_options > li > label {
		font-size: 16px;
		padding: 14px 8px;
	}

	.wcdp-form .button-row {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.wcdp-form .wcdp-button {
		width: 100%;
		text-align: center;
	}
}
