/**
 * PhoenixB2B 2.13.19 — Checkout: metody płatności (dark mode / PayU / BLIK).
 *
 * PROBLEM (produkcja, mobile + dark):
 *   1) nazwy i opisy metod płatności renderowały się w kolorze motywu MOTYWU
 *      SKLEPU (ciemny tekst), bo poprzednie warstwy checkoutu ustawiały tylko
 *      tło boksów `.wc_payment_methods > li`, ale NIE ustawiały `color` na
 *      etykietach `label` — efekt: ciemny tekst na ciemnym tle = niewidoczny,
 *   2) logo PayU to ciemny PNG bez tła → znikało na ciemnym boksie,
 *   3) radio buttony renderowały się natywnie (ciemne na ciemnym).
 *
 * ROZWIĄZANIE (CSS-only):
 *   - twardy `color` na labelkach, opisach i `.payment_box` w trybie ciemnym,
 *   - podkładka pod logotypy bramek (jasna „karta" pod ciemnym PNG),
 *   - `accent-color` + widoczny pierścień dla radio,
 *   - aktywna metoda: premium purple border + glow,
 *   - identyczny layout na PC i mobile (żadnych reguł ukrywających metody!).
 *
 * WAŻNE — czego ten arkusz NIE robi:
 *   - nie dodaje, nie usuwa i nie ukrywa ŻADNEJ metody płatności,
 *   - nie tworzy fikcyjnej bramki BLIK,
 *   - nie zmienia checkoutu na PC inaczej niż na mobile (poza szerokościami).
 *   Lista metod pochodzi wyłącznie z `woocommerce_available_payment_gateways`.
 *
 * Ładowany jako OSTATNIA warstwa checkoutu → wygrywa kaskadę.
 * SCOPED: `.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo`.
 */

/* ==========================================================================
 * 1) BOKSY METOD — wspólne dla obu motywów (spójne odstępy i klikalność).
 * ========================================================================== */
.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo #payment ul.wc_payment_methods > li {
	/* Cały boks klikalny — nie tylko sam tekst etykiety. */
	position: relative;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo #payment ul.wc_payment_methods > li > label {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	cursor: pointer !important;
}

/* Radio widoczne i kontrastowe w obu motywach. */
.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo #payment ul.wc_payment_methods > li input[type="radio"] {
	flex: 0 0 auto !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	accent-color: var(--pb2b-primary, #7C3AED);
	/* Pierścień gwarantuje widoczność także tam, gdzie accent-color nie działa. */
	box-shadow: 0 0 0 1px var(--pb2b-border-strong, rgba(255, 255, 255, 0.14));
	border-radius: 50%;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Aktywna metoda — premium purple border + glow (PC i mobile identycznie). */
.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo #payment ul.wc_payment_methods > li:has(input:checked) {
	border-color: var(--pb2b-primary, #7C3AED) !important;
	box-shadow: var(--pb2b-shadow-glow, 0 0 0 4px rgba(124, 58, 237, 0.18)) !important;
}

/* ==========================================================================
 * 2) DARK MODE — KONTRAST TEKSTU (rdzeń naprawy).
 *
 * `:not([data-pb2b-theme="light"])` = zgodnie z konwencją poprzednich warstw
 * checkoutu (dark + brak atrybutu), żeby nie zostawić „dziury" przed
 * inicjalizacją JS przełącznika motywu.
 * ========================================================================== */
.phoenix-b2b-panel.pb2b-app:not([data-pb2b-theme="light"]) .pb2b-checkout-woo #payment ul.wc_payment_methods > li > label,
.phoenix-b2b-panel.pb2b-app:not([data-pb2b-theme="light"]) .pb2b-checkout-woo #payment ul.wc_payment_methods > li > label * {
	color: var(--pb2b-text, #F8FAFC) !important;
}

/* Nazwa metody — mocniejszy kontrast niż reszta. */
.phoenix-b2b-panel.pb2b-app:not([data-pb2b-theme="light"]) .pb2b-checkout-woo #payment ul.wc_payment_methods > li > label {
	color: var(--pb2b-text-strong, #FFFFFF) !important;
}

/* Opis metody (payment_box) — jasny tekst na ciemnym tle. */
.phoenix-b2b-panel.pb2b-app:not([data-pb2b-theme="light"]) .pb2b-checkout-woo #payment .payment_box,
.phoenix-b2b-panel.pb2b-app:not([data-pb2b-theme="light"]) .pb2b-checkout-woo #payment .payment_box p,
.phoenix-b2b-panel.pb2b-app:not([data-pb2b-theme="light"]) .pb2b-checkout-woo #payment .payment_box li,
.phoenix-b2b-panel.pb2b-app:not([data-pb2b-theme="light"]) .pb2b-checkout-woo #payment .payment_box span,
.phoenix-b2b-panel.pb2b-app:not([data-pb2b-theme="light"]) .pb2b-checkout-woo #payment .payment_box label,
.phoenix-b2b-panel.pb2b-app:not([data-pb2b-theme="light"]) .pb2b-checkout-woo #payment .payment_box strong {
	color: var(--pb2b-text-soft, #CBD5E1) !important;
}
.phoenix-b2b-panel.pb2b-app:not([data-pb2b-theme="light"]) .pb2b-checkout-woo #payment .payment_box a {
	color: var(--pb2b-primary-strong, #A855F7) !important;
	text-decoration: underline !important;
}

/* Pola bramki wewnątrz payment_box (np. dane karty) — czytelne inputy. */
.phoenix-b2b-panel.pb2b-app:not([data-pb2b-theme="light"]) .pb2b-checkout-woo #payment .payment_box input[type="text"],
.phoenix-b2b-panel.pb2b-app:not([data-pb2b-theme="light"]) .pb2b-checkout-woo #payment .payment_box input[type="tel"],
.phoenix-b2b-panel.pb2b-app:not([data-pb2b-theme="light"]) .pb2b-checkout-woo #payment .payment_box input[type="email"],
.phoenix-b2b-panel.pb2b-app:not([data-pb2b-theme="light"]) .pb2b-checkout-woo #payment .payment_box select {
	color: var(--pb2b-text, #F8FAFC) !important;
	background: var(--pb2b-bg-3, #151B2E) !important;
	border: 1px solid var(--pb2b-border-strong, rgba(255, 255, 255, 0.14)) !important;
}

/* ==========================================================================
 * 3) LOGOTYPY BRAMEK (PayU i inne) — nigdy nie znikają na ciemnym tle.
 *
 * Bramki wstawiają logo jako <img> w etykiecie. Ciemny PNG bez kanału alfa
 * zlewa się z ciemnym boksem, dlatego dajemy mu jasną podkładkę zamiast
 * kombinować z filtrami (filter: invert psuje kolorowe logotypy marek).
 * ========================================================================== */
.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo #payment ul.wc_payment_methods > li > label img {
	display: inline-block !important;
	max-width: 84px !important;
	max-height: 26px !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	vertical-align: middle !important;
	opacity: 1 !important;
	visibility: visible !important;
	float: none !important;
}
.phoenix-b2b-panel.pb2b-app:not([data-pb2b-theme="light"]) .pb2b-checkout-woo #payment ul.wc_payment_methods > li > label img {
	/* Jasna „karta" pod logo — marka zachowuje własne kolory. */
	padding: 3px 6px !important;
	background: #FFFFFF !important;
	border-radius: 6px !important;
}

/* ==========================================================================
 * 4) DOPRECYZOWANE ETYKIETY (PayU / BLIK) — tylko prezentacja.
 *
 * PHP dopisuje do zduplikowanych tytułów sufiks po myślniku (np.
 * „Płatność online z PayU — BLIK"). Tutaj pilnujemy, żeby długa nazwa
 * ładnie się zawijała, a nie była ucinana ani nie rozpychała boksu.
 * ========================================================================== */
.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo #payment ul.wc_payment_methods > li > label {
	overflow-wrap: anywhere !important;
	white-space: normal !important;
	text-overflow: clip !important;
	overflow: visible !important;
}

/* ==========================================================================
 * 5) MOBILE — dokładnie te same metody, tylko wygodniejszy dotyk.
 *    Brak `display:none` na czymkolwiek w #payment: jeśli WooCommerce zwraca
 *    BLIK jako osobną bramkę, będzie widoczny również na telefonie.
 * ========================================================================== */
@media (max-width: 782px) {
	.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo #payment ul.wc_payment_methods > li {
		padding: 13px 14px !important;
	}
	.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo #payment ul.wc_payment_methods > li > label {
		/* Wygodny cel dotyku na całą szerokość boksu. */
		min-height: 30px !important;
		font-size: 14.5px !important;
	}
	.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo #payment ul.wc_payment_methods > li input[type="radio"] {
		width: 20px !important;
		height: 20px !important;
	}
	.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo #payment ul.wc_payment_methods > li > label img {
		/* Logo na końcu wiersza, żeby nie łamało nazwy metody w połowie. */
		order: 3 !important;
		margin-left: auto !important;
	}
	.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo #payment .payment_box {
		font-size: 12.5px !important;
	}
}

/* ==========================================================================
 * 6) BEZPIECZNIK — metody płatności nie mogą być ukryte przez inną warstwę.
 *    Reguła świadomie wąska: dotyczy tylko kontenera metod w panelu B2B.
 * ========================================================================== */
.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo #payment ul.wc_payment_methods,
.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo #payment ul.wc_payment_methods > li {
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo #payment ul.wc_payment_methods {
	flex-direction: column !important;
}
.phoenix-b2b-panel.pb2b-app .pb2b-checkout-woo #payment ul.wc_payment_methods > li {
	flex-direction: column !important;
	align-items: stretch !important;
}