/**
 * Settle card fields inside the WooCommerce Blocks checkout — grouped,
 * Stripe-style inputs matching the hosted payment page. Only styles OUR
 * fields; the surrounding "Use a new payment method" / "Save to account"
 * chrome and the payment-area background are WooCommerce + the theme.
 */
.settle-blocks-acceptjs {
	--sb-accent: #0e8a5f;
	--sb-border: rgba(20, 32, 28, 0.18);
	--sb-field: #fff;
	--sb-text: #14201c;
	--sb-muted: #5c6b63;
	margin-top: 10px;
}

.settle-blocks-acceptjs .settle-blocks-group {
	border: 1px solid var(--sb-border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--sb-field);
}

.settle-blocks-acceptjs input {
	width: 100%;
	border: 0;
	background: transparent;
	padding: 12px 13px;
	font-size: 15px;
	color: var(--sb-text);
	outline: none;
	box-shadow: none;
	margin: 0;
	border-radius: 0;
}

.settle-blocks-acceptjs input::placeholder {
	color: var(--sb-muted);
	opacity: 0.75;
}

.settle-blocks-acceptjs .settle-blocks-number {
	position: relative;
	display: flex;
	align-items: center;
}

.settle-blocks-acceptjs .settle-blocks-brand {
	position: absolute;
	right: 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sb-muted);
	pointer-events: none;
}

.settle-blocks-acceptjs .settle-blocks-row {
	display: flex;
	border-top: 1px solid var(--sb-border);
}

.settle-blocks-acceptjs .settle-blocks-row input:first-child {
	border-right: 1px solid var(--sb-border);
}

.settle-blocks-acceptjs .settle-blocks-group:focus-within {
	border-color: var(--sb-accent);
	box-shadow: 0 0 0 3px rgba( 46, 204, 143, 0.20 );
}

@media (prefers-color-scheme: dark) {
	.settle-blocks-acceptjs {
		--sb-border: rgba(233, 245, 239, 0.22);
		--sb-field: #1b2a24;
		--sb-text: #e9f5ef;
		--sb-muted: #9db3a9;
	}
}