/**
 * Checkout styles for the Feldman CreditGuard gateway.
 *
 * Every rule is scoped to a .feldman-cg-* class. Nothing here targets a
 * WooCommerce, Woodmart or Elementor selector, so the theme's checkout cannot
 * be affected by this file.
 *
 * Logical properties are used throughout so the layout is correct in both RTL
 * and LTR without a separate stylesheet.
 */

.feldman-cg-blocks__description,
.feldman-cg-notice {
	margin: 0 0 0.5em;
	line-height: 1.6;
}

.feldman-cg-blocks__test-notice {
	display: inline-block;
	margin: 0.25em 0 0;
	padding: 0.35em 0.75em;
	border-radius: 3px;
	border-inline-start: 3px solid #b26200;
	background: #fcf3e6;
	color: #6b3b00;
	font-size: 0.875em;
	font-weight: 600;
}

.feldman-cg-notice--pending {
	padding: 0.75em 1em;
	border-radius: 4px;
	border-inline-start: 3px solid #2271b1;
	background: #f0f6fc;
	color: #1d2327;
}

/* The redirect notice shown while the customer is sent to CreditGuard. */
.feldman-cg-redirect {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 1em;
	text-align: start;
}

.feldman-cg-redirect__spinner {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: feldman-cg-spin 0.8s linear infinite;
}

@keyframes feldman-cg-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.feldman-cg-redirect__spinner {
		animation: none;
	}
}

@media (max-width: 480px) {
	.feldman-cg-blocks__test-notice {
		display: block;
	}
}