/**
 * Stripe API Gateway for WooCommerce — checkout styles.
 *
 * Used by the classic checkout, the order-pay page and the Checkout Block.
 */

/* Payment Element container (Stripe mounts its iframe inside). */
.wc-stripe-api-payment-element {
	margin: 8px 0 4px;
	min-height: 40px;
}

/* Inline error area. */
.wc-stripe-api-errors:empty {
	display: none;
}

.wc-stripe-api-errors {
	color: #b32d2e;
	margin: 8px 0;
	font-size: .9em;
}

/* Test mode notice. */
.wc-stripe-api-test-notice {
	background: #fff8e5;
	border-left: 4px solid #ffb900;
	padding: 8px 12px;
	font-size: .9em;
	margin: 0 0 10px;
}

/* Card brand icons (classic gateway icon and Blocks label). */
.wc-stripe-api-icon {
	max-height: 24px;
	margin-left: 4px;
	vertical-align: middle;
}

/* Gateway description paragraph. */
.wc-stripe-api-description {
	margin: 0 0 8px;
}

/* Checkout Block label: title followed by the card icons. */
.wc-stripe-api-blocks-label {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
}

.wc-stripe-api-blocks-label .wc-stripe-api-icon {
	height: 24px;
	width: auto;
	margin-left: 0;
}

.wc-stripe-api-blocks-label .wc-stripe-api-icon:first-of-type {
	margin-left: 8px;
}

/* Block editor placeholder. */
.wc-stripe-api-blocks-edit__placeholder {
	margin: 8px 0;
	padding: 12px;
	border: 1px dashed #c3c4c7;
	border-radius: 4px;
	color: #50575e;
	font-size: .9em;
	text-align: center;
}