/*
 * Dostosowanie wyglądu koszyka i zamówienia (WooCommerce) do stylistyki motywu.
 * Plik CSS ładowany niezależnie od procesu webpack/Tailwind (inc/checkout-style),
 * żeby zmiany działały natychmiast bez potrzeby budowania assetów.
 *
 * WAŻNE: nie zmienia żadnych pól/formularzy WooCommerce ani logiki PHP —
 * wyłącznie warstwa wizualna (kolory, układ, odstępy) nad istniejącym,
 * niezmienionym markupem WooCommerce.
 */

:root {
	--pk-brand: #e11d48;
	--pk-brand-hover: #be123c;
	--pk-border: #e5e7eb;
	--pk-ink: #1f2937;
	--pk-muted: #6b7280;
}

/* ==========================================================================
   1) Przyciski WooCommerce – ujednolicenie z marką (usuwa domyślny fiolet #7f54b3)
   ========================================================================== */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button,
.woocommerce-page .checkout-button,
#place_order {
	background-color: var(--pk-brand) !important;
	border-color: var(--pk-brand) !important;
	color: #fff !important;
	border-radius: 0.375rem;
	font-weight: 600;
	box-shadow: none;
	transition: background-color .15s ease;
}

.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt:focus,
.woocommerce input.button.alt:hover,
.woocommerce input.button.alt:focus,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
#place_order:hover,
#place_order:focus {
	background-color: var(--pk-brand-hover) !important;
	border-color: var(--pk-brand-hover) !important;
	color: #fff !important;
}

/* ==========================================================================
   2) Koszyk – drobne porządki
   ========================================================================== */
.woocommerce-cart table.cart td.actions .coupon .button {
	border-radius: 0.375rem;
}

.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	float: none;
	width: 260px;
	max-width: 100%;
	border-radius: 0.375rem;
	padding: 0.55rem 0.75rem;
	margin: 0;
}

@media (max-width: 480px) {
	.woocommerce-cart table.cart td.actions .coupon .input-text {
		width: 100%;
	}
}

.woocommerce-cart .cart-collaterals .cart_totals {
	background: #fff;
	border: 1px solid var(--pk-border);
	border-radius: 0.75rem;
	padding: 1.5rem;
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
	margin-top: 0;
}

/* ==========================================================================
   2b) Komunikaty WooCommerce (błędy/info/sukces) – domyślnie WC używa ikony
   z własnej czcionki ikonowej (font-family: WooCommerce), która w tym
   projekcie renderuje się niespójnie (czasem brak ikony, czasem losowy
   glif zamiast wykrzyknika). Wyłączamy tę ikonę i stylujemy box od zera.
   ========================================================================== */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	background: #fff;
	border: 1px solid var(--pk-border);
	border-left: 4px solid var(--pk-brand);
	border-radius: 0.5rem;
	padding: 1rem 1.25rem !important;
	margin: 0 0 1.5rem !important;
	color: var(--pk-ink);
	list-style: none;
}

.woocommerce-message {
	border-left-color: #16a34a;
}

.woocommerce-info {
	border-left-color: #2563eb;
}

/* Wyłącz ikonę z czcionki WooCommerce (::before) całkowicie – to ona
   powodowała niespójny/"rozpieprzony" wykrzyknik. */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::after,
.woocommerce-message::after,
.woocommerce-info::after {
	content: none !important;
	display: none !important;
}

.woocommerce-error li,
.woocommerce-message,
.woocommerce-info {
	font-size: 0.9375rem;
	line-height: 1.5;
}

.woocommerce-error li {
	position: relative;
	padding: 0.35rem 0 0.35rem 1.4rem !important;
	margin: 0 !important;
}

/* Własny, prosty znacznik błędu zamiast czcionki ikonowej. */
.woocommerce-error li::before {
	content: '!';
	position: absolute;
	left: 0;
	top: 0.35rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pk-brand);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.woocommerce-error li + li {
	border-top: 1px solid var(--pk-border);
}

/* ==========================================================================
   3) Zamówienie (checkout) – układ dwukolumnowy: formularz + podsumowanie
   ========================================================================== */
body.woocommerce-checkout #order_review_heading {
	margin: 0 0 0 0;
}

@media (min-width: 992px) {
	body.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
		/* Wiersz nagłówka ma STAŁĄ wysokość (nie "auto") celowo: #customer_details
		   rozciąga się na oba wiersze w kolumnie 1, a przy "auto" przeglądarka
		   rozdziela brakującą wysokość również na wiersz 1, co wizualnie
		   odpychało #order_review daleko w dół (wielka pusta przerwa pod
		   nagłówkiem "Twoje zamówienie"). Stała wysokość wiersza 1 eliminuje
		   ten efekt – nadmiarowa wysokość trafia tylko do wiersza 2 (auto). */
		grid-template-rows: 2.5rem auto;
		grid-template-areas:
			"details summary-heading"
			"details summary";
		column-gap: 2.5rem;
		row-gap: 0;
		align-items: start;
	}

	body.woocommerce-checkout #customer_details {
		grid-area: details;
	}

	body.woocommerce-checkout #order_review_heading {
		grid-area: summary-heading;
	}

	body.woocommerce-checkout #order_review {
		grid-area: summary;
		position: sticky;
		top: 100px;
	}
}

/* Karta wokół danych rozliczeniowych */
body.woocommerce-checkout #customer_details {
	background: #fff;
	border: 1px solid var(--pk-border);
	border-radius: 0.75rem;
	padding: 1.75rem;
}

/* Wewnątrz danych rozliczeniowych: kolumny WooCommerce (dane / dostawa+uwagi)
   ustawiamy jedna pod drugą zamiast obok siebie – col-2 ma zwykle mało treści
   (checkbox wysyłki + uwagi), więc obok pełnego formularza wyglądał na "pustą połowę". */
body.woocommerce-checkout #customer_details .col2-set,
body.woocommerce-checkout #customer_details.col2-set {
	width: 100%;
}

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
}

body.woocommerce-checkout #customer_details .col-2 {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--pk-border);
}

/* Nagłówki sekcji */
body.woocommerce-checkout #customer_details h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--pk-ink);
	margin-bottom: 1.25rem;
}

body.woocommerce-checkout #order_review_heading {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--pk-ink);
	margin-bottom: 0;
}

/* Pola formularza */
body.woocommerce-checkout .form-row label {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--pk-ink);
	margin-bottom: 0.25rem;
}

body.woocommerce-checkout .form-row .input-text,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .select2-container .select2-selection--single {
	border: 1px solid var(--pk-border) !important;
	border-radius: 0.5rem !important;
	padding: 0.65rem 0.85rem !important;
	height: auto !important;
	font-size: 0.9375rem;
	box-shadow: none !important;
	transition: border-color .15s ease;
}

body.woocommerce-checkout .form-row .input-text:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .form-row textarea:focus {
	border-color: var(--pk-brand) !important;
	outline: none;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.6;
	padding-left: 0;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
}

/* Wymagane przez inc/order-type/order-type.js – ukrywa pola firmy,
   gdy wybrana jest "Osoba prywatna". */
.u-hidden {
	display: none !important;
}

/* Pola "Nazwa firmy" / "NIP" mają w PHP required=>false (żeby ukryte przy
   "osoba prywatna" nie blokowały wysyłki), więc WooCommerce domyślnie
   pokazuje "(opcjonalne)". Gdy JS oznaczy pole klasą pk-required-visual
   (bo wybrano "firma", gdzie są faktycznie wymagane), podmieniamy to
   wizualnie na czerwoną gwiazdkę – żeby nie mylić klienta. */
body.woocommerce-checkout .pk-required-visual .optional {
	font-size: 0;
	position: relative;
}

body.woocommerce-checkout .pk-required-visual .optional::before {
	content: '*';
	font-size: 0.875rem;
	line-height: 1;
	color: var(--pk-brand);
	font-weight: 700;
}

/* Radiowa opcja typu zamówienia (osoba prywatna / firma) – te same 2 równe
   kolumny co "Imię"/"Nazwisko" (form-row-first/form-row-last) poniżej,
   żeby się wizualnie wyrównywały zamiast "rozjeżdżać" po lewej stronie.
   Markup WooCommerce dla pola radio to 4 kolejne dzieci (input, label,
   input, label) – 4 kolumny (radio/tekst/radio/tekst) dają dokładnie
   2 równe "pary" radio+etykieta obok siebie, tak jak 2 pola tekstowe. */
body.woocommerce-checkout #billing_order_type_field .woocommerce-input-wrapper {
	display: grid;
	grid-template-columns: auto 1fr auto 1fr;
	align-items: center;
	column-gap: 0.6rem;
	row-gap: 0.5rem;
}

@media (max-width: 767px) {
	body.woocommerce-checkout #billing_order_type_field .woocommerce-input-wrapper {
		grid-template-columns: auto 1fr;
	}
}

body.woocommerce-checkout #billing_order_type_field label.radio {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	cursor: pointer;
	margin: 0;
}

body.woocommerce-checkout #billing_order_type_field input.input-radio {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--pk-brand);
	cursor: pointer;
}

/* Podsumowanie zamówienia (prawa kolumna / karta) */
body.woocommerce-checkout #order_review {
	background: #fff;
	border: 1px solid var(--pk-border);
	border-radius: 0.75rem;
	padding: 1.75rem;
}

body.woocommerce-checkout table.shop_table {
	border: none;
	border-collapse: collapse;
	width: 100%;
}

body.woocommerce-checkout table.shop_table th,
body.woocommerce-checkout table.shop_table td {
	border: none;
	border-bottom: 1px solid var(--pk-border);
	padding: 0.75rem 0.25rem;
}

body.woocommerce-checkout table.shop_table tfoot tr:last-child th,
body.woocommerce-checkout table.shop_table tfoot tr:last-child td {
	border-bottom: none;
	font-size: 1.05rem;
}

/* Kolumna z nazwą kursu potrzebuje znacznie więcej miejsca niż kolumna z ceną –
   przy table-layout:fixed trzeba to jawnie wymusić, inaczej kolumny są równe. */
body.woocommerce-checkout table.shop_table .product-name,
body.woocommerce-checkout table.shop_table th.product-name {
	width: 76%;
}

body.woocommerce-checkout table.shop_table .product-total,
body.woocommerce-checkout table.shop_table th.product-total,
body.woocommerce-checkout table.shop_table tfoot td,
body.woocommerce-checkout table.shop_table tfoot th {
	width: 24%;
	text-align: right;
}

/* Metody płatności */
body.woocommerce-checkout ul.payment_methods {
	border: none;
	padding: 0;
	margin: 1.5rem 0 0;
}

body.woocommerce-checkout ul.payment_methods li.wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.65rem;
	row-gap: 0;
	border: 1px solid var(--pk-border);
	border-radius: 0.5rem;
	padding: 0.75rem 0.9rem;
	margin-bottom: 0.6rem;
}

body.woocommerce-checkout ul.payment_methods li.wc_payment_method input[type="radio"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--pk-brand);
}

body.woocommerce-checkout ul.payment_methods li.wc_payment_method label {
	flex: 1 1 auto;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

/* Loga bramek płatności (np. Przelewy24) bywają dużymi grafikami –
   ograniczamy je do rozmiaru ikony zamiast dużego bloku. */
body.woocommerce-checkout ul.payment_methods li.wc_payment_method label img {
	max-height: 22px;
	width: auto;
	max-width: 60px;
	margin: 0;
	object-fit: contain;
}

body.woocommerce-checkout ul.payment_methods .payment_box {
	flex-basis: 100%;
	width: 100%;
	background: #f9fafb;
	border-radius: 0.5rem;
	margin: 0.65rem 0 -0.1rem;
	padding: 0.75rem 0.9rem;
	font-size: 0.8125rem;
	line-height: 1.5;
}

body.woocommerce-checkout ul.payment_methods .payment_box img {
	max-height: 40px;
	width: auto;
	display: block;
	margin-bottom: 0.5rem;
}

body.woocommerce-checkout ul.payment_methods .payment_box p {
	margin: 0;
}

/* Regulamin + przycisk zamówienia */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-top: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--pk-muted);
}

body.woocommerce-checkout .woocommerce-privacy-policy-text p {
	margin: 0 0 0.75rem;
}

body.woocommerce-checkout .place-order {
	margin-top: 0;
	text-align: left;
}

body.woocommerce-checkout #place_order {
	width: 100%;
	padding: 0.9rem 1.5rem;
	font-size: 1rem;
}

@media (max-width: 991px) {
	body.woocommerce-checkout #customer_details,
	body.woocommerce-checkout #order_review {
		padding: 1.25rem;
	}

	body.woocommerce-checkout #order_review {
		margin-top: 2rem;
	}
}

/* Zabezpieczenie przed poziomym przewijaniem na wąskich ekranach
   (WooCommerce domyślnie stawia niektóre pola obok siebie i dopiero
   poniżej 768px je składa – tutaj wymuszamy to samo zachowanie
   spójnie z resztą układu, plus twarde zabezpieczenie kart). */
@media (max-width: 767px) {
	body.woocommerce-checkout .form-row-first,
	body.woocommerce-checkout .form-row-last,
	body.woocommerce-cart .form-row-first,
	body.woocommerce-cart .form-row-last {
		width: 100% !important;
		float: none !important;
	}

	body.woocommerce-checkout .select2-container {
		width: 100% !important;
	}
}

body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review,
body.woocommerce-cart .cart_totals {
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
}

body.woocommerce-checkout table.shop_table {
	table-layout: fixed;
	word-break: break-word;
}