/**
 * CheckoutIframe — Content AI checkout iframe + loading/error states.
 */

@import '../../scss/variables';

.rank-math-ai-visibility-checkout-iframe {
	display: block;
	width:   100%;
	height:  100%;
	border:  0;

	// Loading / error state — fills the body, on a white surface so the
	// spinner/message stays readable over the gradient body.
	&__state {
		display:         flex;
		flex-direction:  column;
		align-items:     center;
		justify-content: center;
		gap:             $space-md;
		height:          72vh;
		background:      $color-surface;
	}

	&__error {
		margin:     0;
		max-width:  360px;
		font-size:  14px;
		color:      $color-text-body;
		text-align: center;
	}
}