/*
 * Mintage Pay: "Pay by card" and "Pay by app" inside the payment method (classic and block checkout).
 * Neutral on purpose: it takes the theme's text colour and font, and only draws the two bordered rows. Each row is the
 * title with the brand marks right after it on the same line, and the description underneath.
 */
.mintagepay-choice {
	display: grid;
	gap: 10px;
	margin: 4px 0 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* !important on layout: checkout themes style every label and radio inside the payment box (display, margins, padding). */
.mintagepay-choice .mintagepay-choice__option {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 10px;
	position: relative;
	width: auto !important;
	margin: 0 !important;
	padding: 12px 14px !important;
	border: 1px solid rgba(127, 127, 127, 0.35);
	border-radius: 8px;
	cursor: pointer;
	line-height: 1.4;
	transition: border-color 0.15s, background-color 0.15s;
}

.mintagepay-choice__option:hover {
	border-color: rgba(127, 127, 127, 0.6);
}

.mintagepay-choice__option:has(.mintagepay-choice__radio:checked),
.mintagepay-choice__option.is-chosen {
	border-color: currentColor;
	background-color: rgba(127, 127, 127, 0.08);
}

.mintagepay-choice__option:has(.mintagepay-choice__radio:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Themes draw their own pseudo-element radios on payment-box labels: not on these rows. */
.mintagepay-choice .mintagepay-choice__option::before,
.mintagepay-choice .mintagepay-choice__option::after {
	content: none !important;
	display: none !important;
}

/*
 * The radio is the browser's own, always 16px. Checkout themes size, hide or redraw every radio in the payment box (one
 * measured a radio 407px wide that pushed the text to zero width, live 2026-10-24), so these win with !important.
 */
.mintagepay-choice .mintagepay-choice__radio {
	-webkit-appearance: radio !important;
	appearance: auto !important;
	position: static !important;
	display: block !important;
	flex: 0 0 16px !important;
	box-sizing: border-box !important;
	width: 16px !important;
	min-width: 16px !important;
	max-width: 16px !important;
	height: 16px !important;
	min-height: 16px !important;
	max-height: 16px !important;
	margin: 3px 0 0 !important;
	padding: 0 !important;
	opacity: 1 !important;
	clip: auto !important;
	transform: none !important;
	accent-color: currentColor;
}

.mintagepay-choice .mintagepay-choice__body {
	display: block !important;
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
}

.mintagepay-choice__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.mintagepay-choice__title {
	font-weight: 600;
}

.mintagepay-choice__marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.mintagepay-choice .mintagepay-choice__mark {
	display: block !important;
	width: auto !important;
	height: 24px !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	float: none !important;
}

.mintagepay-choice__text {
	display: block;
	margin-top: 4px;
	font-size: 0.86em;
	opacity: 0.8;
}

/*
 * The same brand marks on the payment method's own row, where "Pay by card" and "Pay by app" are two separate
 * payment methods (WC_Payment_Gateway::get_icon(), and the label on the block checkout). Themes stretch, float and
 * frame payment-method icons, so these hold their own size and sit on the title's line.
 */
.woocommerce .mintagepay-method-mark,
.mintagepay-method-mark {
	display: inline-block !important;
	width: auto !important;
	height: 24px !important;
	max-width: none !important;
	max-height: 24px !important;
	margin: 0 0 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	float: none !important;
	vertical-align: middle;
}

.mintagepay-method-label {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	min-width: 0;
}

.mintagepay-method-marks {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.mintagepay-method-marks .mintagepay-method-mark {
	margin-left: 0 !important;
}

/*
 * The method's own row keeps the radio, the title and the marks on one line, and wraps the marks under the title
 * when they do not fit (a phone). Themes make every label inline-block (Bootstrap does), and an inline-block cannot
 * break across lines: the whole label drops below its own radio instead. These rows (main, card, crypto) wrap inside
 * themselves.
 */
li.payment_method_mintage_pay > label,
li.payment_method_mintage_pay_card > label,
li.payment_method_mintage_pay_crypto > label {
	display: inline-flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	max-width: calc(100% - 40px);
	vertical-align: top;
}

li.payment_method_mintage_pay > input[type="radio"],
li.payment_method_mintage_pay_card > input[type="radio"],
li.payment_method_mintage_pay_crypto > input[type="radio"] {
	vertical-align: top !important;
	margin-top: 4px !important;
}

li.payment_method_mintage_pay > label .mintagepay-method-mark,
li.payment_method_mintage_pay_card > label .mintagepay-method-mark,
li.payment_method_mintage_pay_crypto > label .mintagepay-method-mark {
	margin-left: 0 !important;
}