/**
 * Payment page shell.
 *
 * Deliberately minimal: it only lays out what surrounds the card form, so it
 * inherits the theme's typography and colours. Everything inside the form is
 * styled through the SDK `style` object, not from here — those fields live in a
 * cross-origin iframe that CSS cannot reach.
 */

.squidlane-payment {
	max-width: 30rem;
	margin: 0 auto;
}

.squidlane-payment__title {
	margin: 0 0 0.25em;
	font-size: 1.25em;
}

.squidlane-payment__total {
	margin: 0 0 1.5em;
	opacity: 0.75;
}

.squidlane-payment__form {
	min-height: 12rem;
}

.squidlane-payment__error {
	margin: 0;
}

/**
 * Inline card form, rendered inside the payment method box on the checkout.
 * WooCommerce replaces this whole block on every totals refresh, so the styles
 * stay purely presentational — no transitions that would flash on re-render.
 */

.squidlane-inline__hint {
	margin: 0;
	opacity: 0.7;
	font-size: 0.9em;
}

.squidlane-inline__form:not(:empty) {
	margin-top: 1em;
}

.squidlane-inline__description {
	margin: 0 0 0.75em;
}

/**
 * Block checkout.
 *
 * The card form is an iframe injected by the SDK. Block themes wrap payment
 * method content in containers that can clip or squeeze it, so the width is
 * pinned and no ancestor height is assumed.
 */

.squidlane-blocks__hint,
.squidlane-blocks__message {
	margin: 0;
	opacity: 0.7;
	font-size: 0.9em;
}

.squidlane-blocks__description {
	margin: 0 0 0.75em;
}

.squidlane-blocks__form:not(:empty) {
	margin-top: 1em;
}

.squidlane-blocks__form iframe,
.squidlane-inline__form iframe {
	width: 100%;
	max-width: 100%;
	border: 0;
}