/*
 * PayGlocal checkout badge.
 * Places the "Pay using Visa, Mastercard, Apple Pay, Google Pay & more" badge on its
 * own line under the gateway title. Themes (Storefront, Astra, Elementor, etc.) often
 * float gateway icons right and cap them at ~1.6em, which would make the badge text
 * unreadable, so those rules are overridden here for this gateway only.
 */

/* Classic checkout and Elementor checkout widget */
.payment_method_payglocal_payment_gateway label img.wc-payglocal-badge,
.wc_payment_method.payment_method_payglocal_payment_gateway img.wc-payglocal-badge,
img.wc-payglocal-badge {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: 330px !important;
	height: auto !important;
	max-height: none !important;
	margin: 8px 0 2px !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	vertical-align: middle;
}

/* Classic / Elementor: stack the title and badge in one column beside the radio,
   so the badge lines up under the title text instead of under the radio button. */
.wc_payment_method.payment_method_payglocal_payment_gateway > label {
	display: inline-flex !important;
	flex-direction: column;
	align-items: flex-start;
	vertical-align: top;
	max-width: calc(100% - 2.5em);
}

.wc_payment_method.payment_method_payglocal_payment_gateway > label img.wc-payglocal-badge {
	margin: 8px 0 0 !important;
}

/* Checkout block */
.wc-payglocal-label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
}

.wc-payglocal-label .wc-payglocal-badge {
	margin: 0 !important;
}

@media (max-width: 480px) {
	img.wc-payglocal-badge {
		max-width: 280px !important;
	}
}