/**
 * Compact the COD fee note inside the gateway description box. The stock COD
 * description is blanked (DB plane), so the note is the box's only content —
 * kill the paragraph margins that made the selected-gateway box tall.
 */
.payment_box p.lubiwood-codfee-note {
	margin: 0;
}

.payment_box p:empty {
	display: none;
	margin: 0;
}

/**
 * One consistent icon alignment for ALL payment methods: title (with its
 * "( +x,xx € )" suffix) on the left, every gateway's icon/badge group pushed
 * to the right edge. Icons render inside the <label> as either a bare <img>
 * (PayPal, COD) or a <span class="*_icons"> group (Stripe wallets, card
 * brands) — the first icon-ish element gets margin-left:auto, siblings stay
 * adjacent. !important + li-qualified selectors: FunnelKit/WoodMart style
 * these labels with higher specificity (their own floats/inline-block put
 * some icons left and some right, which is the mess this fixes).
 */
li.wc_payment_method > label {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap;
	gap: 6px;
	width: 100% !important;
}

li.wc_payment_method > label > img,
li.wc_payment_method > label > span[class*="icon"] {
	margin-left: auto !important;
	margin-right: 0 !important;
	float: none !important;
}

li.wc_payment_method > label > img ~ img,
li.wc_payment_method > label > img ~ span[class*="icon"],
li.wc_payment_method > label > span[class*="icon"] ~ img,
li.wc_payment_method > label > span[class*="icon"] ~ span[class*="icon"] {
	margin-left: 0 !important;
}

/* Icon groups themselves keep their imgs in a row. */
li.wc_payment_method > label > span[class*="icon"] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.lubiwood-cod-icon {
	height: 26px;
	width: auto;
	display: block;
}