/* The block's own heading replaces the template's (which the cart API
 * re-renders after cart changes, so it is hidden rather than edited). */
.wp-block-storeengine-payment-methods.storeengine-payment-methods--own-heading .storeengine-checkout-available-payments > .storeengine-ajax-checkout-form__heading {
	display: none;
}

/* Cards: each gateway in its own box. */
.wp-block-storeengine-payment-methods.storeengine-payment-methods--cards .storeengine-checkout-available-payment-item {
	margin-bottom: 0.75em;
	padding: 0.75em 1em;
	border: 1px solid var(--storeengine-border-color, #e4e7ec);
	border-radius: var(--se-shop-radius, 8px);
	background: var(--storeengine-surface-color, #fff);
}

.wp-block-storeengine-payment-methods.storeengine-payment-methods--cards .storeengine-checkout-available-payment-item:has(input:checked) {
	border-color: var(--storeengine-primary-color, currentColor);
}

/* Gateway icons off: only the gateway name stays in the label. */
.wp-block-storeengine-payment-methods.storeengine-payment-methods--no-icons .storeengine-accordion-drawer__title > :not(.storeengine-ajax-checkout-form__title) {
	display: none;
}

/* Button styles for Place Order. Fill is the button as it is. */
.wp-block-storeengine-payment-methods.is-style-outline #storeengine_place_order {
	--bg-color: transparent;
	--text-color: var(--storeengine-primary-color);
	--border-color: var(--storeengine-primary-color);
	--hover-bg-color: var(--storeengine-primary-color);
	--hover-text-color: #fff;
	--hover-border-color: var(--storeengine-primary-color);
	border-style: solid;
	border-width: 1px;
}

.wp-block-storeengine-payment-methods.is-style-soft #storeengine_place_order {
	--bg-color: color-mix(in srgb, var(--storeengine-primary-color) 12%, transparent);
	--text-color: var(--storeengine-primary-color);
	--border-color: transparent;
	--hover-bg-color: color-mix(in srgb, var(--storeengine-primary-color) 22%, transparent);
	--hover-text-color: var(--storeengine-primary-color);
	--hover-border-color: transparent;
}