/* Nadpisanie styli PayU - ładuje się z motywu, po stylach wtyczki */

.checkmark {
	top: auto !important;
}

.wc_payment_method {
	margin-bottom: 15px !important;
}

.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] {
	position: relative;
}

.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] .payment_box {
	padding-left: 46px !important;
}

/* Ensure paragraphs inside PayU payment box (payustandard) have no bottom margin */
.woocommerce-checkout .wc_payment_methods .payment_box.payment_method_payustandard > p {
	margin-bottom: 0 !important;
}

.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] > label {
	padding-right: 96px !important;
}

.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] > label img {
	width: auto !important;
	height: 28px !important;

	position: absolute !important;
	top: 50% !important;
	right: 18px !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
}

.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] img {
	width: auto !important;
	height: 28px !important;

	position: absolute !important;
	top: 50% !important;
	right: 18px !important;
	transform: translateY(-50%) !important;
}

.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] .radio-button,
.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] label.radio-button {
	padding-left: 40px !important;
}

/* Two-column label layout to avoid overlap (text left, logos right) */
.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] > label {
	display: flex !important;
	flex-wrap: wrap !important;

	/* allow content to wrap and increase height */
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;

	padding-right: 12px !important;
	padding-left: 12px !important;
}

/* Force pm-right (icons) to the far right and pm-left to the left */
.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] > label {
	flex-direction: row !important;
}

.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] > label .pm-left {
	order: 1 !important;
}

.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] > label .pm-right {
	order: 2 !important;
	margin-left: auto !important;

	/* push icons to the right */
}

/* Ensure any images are not floated or absolutely positioned */
.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] img {
	float: none !important;
	position: static !important;
}

/* Left block: title + optional description - allow wrapping */
.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] > label .pm-left {
	display: flex !important;
	flex: 1 1 auto !important;
	flex-direction: column !important;
	align-self: center !important;
	gap: 4px !important;

	min-width: 0 !important;

	/* allow text to shrink and wrap inside flex */
}

/* Ensure left block text aligns nicely with title: add small left offset so
   content lines up with radio/checkmark and keep a right padding to avoid
   overlapping with icons */
.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] > label .pm-left {
	padding-right: 8px !important;
	padding-left: 6px !important;
}

.woocommerce-checkout
	.wc_payment_methods
	li[class*='payment_method_payu']
	> label
	.pm-left
	.text-sm,
.woocommerce-checkout
	.wc_payment_methods
	li[class*='payment_method_payu']
	> label
	.pm-left
	.pm-desc {
	white-space: normal !important;
	word-break: break-all !important;

	overflow-wrap: break-word !important;
}

/* Right block: icons */
.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] > label .pm-right {
	display: flex !important;

	/* Reserve a stable area on the right so left text never flows under icons */
	flex: 0 0 72px !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;

	min-width: 56px !important;

	margin-left: 8px !important;
}

/* Keep icons vertically centered by default */
.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] > label .pm-right {
	align-self: center !important;
}

/* Ensure pm-left can grow vertically and its content wraps cleanly */
.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] > label .pm-left {
	flex: 1 1 0 !important;
}

.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] > label .pm-right img,
.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] img {
	display: block !important;

	width: auto !important;

	/* Responsive scaling: min 16px, preferred 3.5vw, max 32px */
	height: clamp(16px, 3.5vw, 32px) !important;
	max-height: 32px !important;

	object-fit: contain !important;
}

/* Override radio-button fixed height coming from other stylesheets.
   Use min-height so the container can grow when label wraps. */
.woocommerce-checkout .wc_payment_methods .radio-button,
.woocommerce-checkout .wc_payment_methods label.radio-button {
	height: auto !important;
	min-height: 32px !important;
}

/* Mobile tweak: shrink icons if needed */
@media (width <=768px) {
	.woocommerce-checkout
		.wc_payment_methods
		li[class*='payment_method_payu']
		> label
		.pm-right
		img,
	.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] img {
		/* slightly smaller on very narrow screens */
		height: clamp(14px, 6vw, 24px) !important;
		max-width: 100% !important;
	}

	.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] > label {
		padding-right: 12px !important;
		padding-left: 8px !important;
	}

	/* On narrow screens align items to top so title and description start
       at the same baseline (prevents vertical centering causing misalignment) */
	.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] > label {
		align-items: flex-start !important;
	}

	/* Ensure icons stay visually centered relative to the label height */
	.woocommerce-checkout .wc_payment_methods li[class*='payment_method_payu'] > label .pm-right {
		/* keep icons vertically centered on mobile as well */
		align-self: center !important;
	}
}