/**
 * StripePayPar Checkout Styles — Traditional Card Fields Layout
 */

.spp-card-fields {
	margin-bottom: 10px;
}

.spp-field-row {
	margin-bottom: 12px;
}

.spp-field-row label {
	display: block;
	font-size: 0.875em;
	font-weight: 600;
	color: #333;
	margin-bottom: 5px;
}

.spp-field-row label .required {
	color: #e2401c;
}

.spp-field-inline {
	display: flex;
	gap: 12px;
}

.spp-field-inline .spp-field-row {
	flex: 1;
}

.spp-stripe-input {
	background: #fff;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	height: 44px;
	box-sizing: border-box;
}

.spp-stripe-input:focus-within,
.spp-stripe-input.StripeElement--focus {
	border-color: #80bdff;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
	outline: none;
}

.spp-stripe-input.StripeElement--invalid {
	border-color: #fa755a;
}

#spp-card-errors {
	color: #fa755a;
	font-size: 0.85em;
	margin-top: 4px;
	min-height: 1.2em;
}

.spp-test-mode-notice {
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
	padding: 8px 12px;
	margin-bottom: 12px;
	font-size: 0.85em;
	color: #856404;
}