.fsp-saved-cards { list-style: none; margin: 0 0 14px; padding: 0; }
.fsp-saved-cards li { margin-bottom: 6px; }
.fsp-saved-cards label { align-items: center; cursor: pointer; display: flex; font-size: 14px; gap: 8px; }

#fsp-card-element {
	background: #fff;
	border: 1px solid #d5dae1;
	border-radius: 6px;
	padding: 12px 14px;
}

#fsp-card-errors {
	color: #dc2626;
	font-size: 13px;
	margin-top: 8px;
	min-height: 1em;
}

.fsp-new-card-fields .form-row { margin-top: 10px; }

#fsp-payment-request-button,
.fsp-express-cart,
.fsp-express-product {
	margin-bottom: 14px;
	max-width: 420px;
}

.fsp-payment-request-unavailable {
	color: #718096;
	font-size: 13px;
}

.fsp-express-jump-button {
	background: #172033;
	border: 0;
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 20px;
	width: 100%;
}

.fsp-express-jump-button:hover { background: #0d1424; }

/* Checkout block (WooCommerce Blocks) components. */
.fsp-blocks-card #fsp-blocks-card-element {
	background: #fff;
	border: 1px solid #d5dae1;
	border-radius: 6px;
	padding: 12px 14px;
}

.fsp-blocks-card-error {
	color: #dc2626;
	font-size: 13px;
	margin-top: 8px;
}

.fsp-blocks-saved-cards {
	margin-bottom: 12px;
}

.fsp-blocks-pr-wrapper {
	max-width: 420px;
}

.fsp-blocks-pr-button {
	min-height: 44px;
}

.fsp-blocks-pr-hint,
.fsp-blocks-pr-unavailable {
	color: #718096;
	font-size: 13px;
}

/* Flags a checkout field row as invalid when our pre-charge validation catches something the form itself missed. */
.fsp-invalid-field input,
.fsp-invalid-field select,
.fsp-invalid-field textarea {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 1px #dc2626;
}

/* Card Brand Icons Bar */
.fsp-card-brand-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.fsp-card-brand-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 8px;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	background: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #64748b;
	transition: all 0.2s ease;
	user-select: none;
}
.fsp-card-brand-icon.fsp-brand-visa { color: #1a1f71; }
.fsp-card-brand-icon.fsp-brand-mastercard { color: #eb001b; }
.fsp-card-brand-icon.fsp-brand-amex { color: #007bc1; }
.fsp-card-brand-icon.fsp-brand-discover { color: #ff6000; }
.fsp-card-brand-icon.fsp-brand-jcb { color: #0b4e96; }
.fsp-card-brand-icon.fsp-brand-diners { color: #004a97; }

.fsp-card-brand-icon.is-active {
	border-color: #2563eb;
	background: #eff6ff;
	box-shadow: 0 0 0 1.5px #2563eb;
	transform: scale(1.06);
	opacity: 1;
}
.fsp-card-brand-icon.is-dimmed {
	opacity: 0.3;
}

/* Test Mode Helper Bar */
.fsp-test-mode-helper {
	margin-top: 10px;
	padding: 8px 12px;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	font-size: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.fsp-test-badge {
	background: #fef3c7;
	color: #92400e;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 3px;
	letter-spacing: 0.5px;
}
.fsp-test-hint {
	color: #64748b;
	font-size: 12px;
}
.fsp-test-card-pill {
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	padding: 3px 8px;
	font-size: 11px;
	font-family: Consolas, Monaco, monospace;
	color: #1e293b;
	cursor: pointer;
	transition: all 0.15s ease;
	line-height: 1.2;
}
.fsp-test-card-pill:hover {
	background: #f1f5f9;
	border-color: #94a3b8;
	color: #0f172a;
}
.fsp-test-toast {
	color: #16a34a;
	font-weight: 600;
	font-size: 11px;
}

/* My Account > Payment methods: card label and rename link. */
.fsp-card-nickname {
	color: #1e293b;
}

.fsp-edit-card-nickname {
	margin-left: 6px;
	font-size: 12px;
	text-decoration: none;
}

/* Express checkout buttons above the classic checkout form. */
.fsp-express-checkout-wrap { margin: 0 0 24px; }
.fsp-express-checkout { min-height: 44px; }
.fsp-express-separator {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 0;
	color: #64748b;
	font-size: 0.9em;
}
.fsp-express-separator::before,
.fsp-express-separator::after { content: ""; flex: 1; border-top: 1px solid #e2e8f0; }

/* Payment Element containers. */
#fsp-payment-element,
.fsp-blocks-payment-element { margin: 8px 0 4px; min-height: 40px; }
.fsp-test-mode-hint { margin: 8px 0 0; font-size: 0.85em; color: #92400e; }