/**
 * Fallback styling for the checkout's inline field errors.
 *
 * WooCommerce already ships
 *   .woocommerce-checkout .checkout .checkout-inline-error-message { color: var(--wc-red); … }
 * which is more specific than the rule below and therefore wins wherever it
 * applies. This is only here so the message is never rendered as plain body
 * text if that stylesheet is dequeued, combined away, or the body class differs.
 */
.checkout-inline-error-message {
	display: block;
	margin: 4px 0 0;
	color: #a00;
	font-size: 0.75em;
	line-height: 1.4;
}

/* The row already gets .woocommerce-invalid; make the field itself read as invalid too. */
.woocommerce-checkout .checkout .form-row.woocommerce-invalid-required-field input.input-text,
.woocommerce-checkout .checkout .form-row.woocommerce-invalid-required-field select,
.woocommerce-checkout .checkout .form-row.woocommerce-invalid-required-field textarea {
	border-color: #a00;
}

/**
 * Mollie card fields.
 *
 * Mollie inserts one `<div id="<component>-errors" role="alert">` directly after
 * each of its card components — with no class and no colour of its own — so
 * "Card number cannot be empty" and friends rendered in body grey at body size,
 * reading like help text rather than an error. Matched here to the billing-field
 * errors above so the whole checkout reads as one system.
 *
 * :not(:empty) is load-bearing: those divs are always present in the DOM and
 * Mollie clears them by setting textContent to '', so an unconditional rule
 * would reserve blank space under every card field.
 */
.mollie-components .mollie-component + [role="alert"]:not(:empty) {
	display: block;
	margin: 4px 0 0;
	color: #a00;
	font-size: 0.75em;
	line-height: 1.4;
}

/* The components already carry a 2px transparent border, so colouring it costs
 * no layout shift. :has() is progressive — a browser without it still gets the
 * red message, just no red border. */
.mollie-components .mollie-component:has( + [role="alert"]:not(:empty) ) {
	border-color: #a00;
}