/* Keep the gateway card-brand icon a sensible size next to the title. */
li.payment_method_ppac_card img,
.wc-block-components-payment-method-label img,
.payment_method_ppac_card label img {
	max-height: 24px;
	width: auto;
	display: inline-block;
	vertical-align: middle;
}

/*
 * Classic checkout: some themes stretch the payment label to full width and
 * push the brand logo to the far right. Force the label to shrink to its
 * content so the logo sits right next to the "Debit/Credit Card" text.
 */
.wc_payment_method.payment_method_ppac_card > label,
li.payment_method_ppac_card > label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-content: flex-start;
}

.wc_payment_method.payment_method_ppac_card > label img,
li.payment_method_ppac_card > label img {
	margin: 0 !important;
	float: none !important;
}

/* Blocks checkout: title text + card-brand logo, kept close together. */
.ppac-blocks-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ppac-blocks-title-icon {
	max-height: 22px;
	width: auto;
	margin-left: 0;
}

.ppac-button-container {
	margin: 12px 0;
	min-height: 45px;
}

/*
 * The whole card area is a frosted "glass" panel — a translucent background
 * with a backdrop blur so it sits nicely on ANY store background or theme
 * (light or dark). Text/label colours inherit the theme's own colour so they
 * stay readable either way. The individual fields stay as PayPal's own boxes
 * (no double border).
 */
.ppac-card-fields {
	margin: 14px 0;
	padding: 16px 16px 14px;
	/* Fallback for browsers without backdrop-filter: a soft neutral tint. */
	background: rgba( 255, 255, 255, 0.14 );
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba( 16, 24, 40, 0.14 );
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Real glass where supported (most modern browsers). */
@supports ( ( backdrop-filter: blur( 2px ) ) or ( -webkit-backdrop-filter: blur( 2px ) ) ) {
	.ppac-card-fields {
		background: rgba( 255, 255, 255, 0.10 );
		-webkit-backdrop-filter: blur( 14px ) saturate( 135% );
		backdrop-filter: blur( 14px ) saturate( 135% );
	}
}

/* Whole-panel highlight while a card field is focused. */
.ppac-card-fields.ppac-focused {
	border-color: rgba( 90, 140, 255, 0.75 );
	box-shadow: 0 0 0 3px rgba( 90, 140, 255, 0.22 );
}

/* Subtle error accent when a field is invalid. */
.ppac-card-fields.ppac-has-error {
	border-color: rgba( 229, 72, 77, 0.75 );
	box-shadow: 0 0 0 3px rgba( 229, 72, 77, 0.20 );
}

.ppac-field-row {
	margin-bottom: 11px;
	flex: 1;
}

.ppac-field-row:last-child {
	margin-bottom: 0;
}

.ppac-field-row label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	/* Inherit the theme's text colour (readable on light or dark). */
	color: inherit;
	opacity: 0.72;
}

.ppac-field-cols {
	display: flex;
	gap: 12px;
}

/*
 * IMPORTANT: PayPal's CardFields renders its OWN styled input (white, rounded,
 * with the card-brand logo) inside the iframe. So this container must stay a
 * bare, invisible wrapper — otherwise you get a double box (our border around
 * PayPal's border). No border / background / padding here.
 */
.ppac-hosted-field {
	box-sizing: border-box;
	display: block;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	min-height: 0;
}

.ppac-hosted-field iframe {
	width: 100% !important;
	display: block;
}

/* Save-card consent — same neutral frosted-glass look as the card panel. */
.ppac-save-card {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 12px 0 4px;
	padding: 10px 12px;
	/* Fallback tint for browsers without backdrop-filter. */
	background: rgba( 255, 255, 255, 0.14 );
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	border-radius: 10px;
	font-size: 0.85em;
	color: inherit;
	cursor: pointer;
}

@supports ( ( backdrop-filter: blur( 2px ) ) or ( -webkit-backdrop-filter: blur( 2px ) ) ) {
	.ppac-save-card {
		background: rgba( 255, 255, 255, 0.10 );
		-webkit-backdrop-filter: blur( 12px ) saturate( 130% );
		backdrop-filter: blur( 12px ) saturate( 130% );
	}
}

.ppac-save-card input {
	margin-top: 2px;
	flex: 0 0 auto;
}

.ppac-save-note {
	margin: 4px 0 0;
	font-size: 0.78em;
	color: inherit;
	opacity: 0.68;
}

.ppac-card-error {
	color: #e02b27;
	font-size: 0.9em;
	margin-top: 6px;
	min-height: 1.2em;
	white-space: pre-line;
}

/* Processing state: friendly blue + spinner instead of red error. */
.ppac-card-error.ppac-card-processing {
	color: #2c5db8;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ppac-card-error.ppac-card-processing::before {
	content: "";
	width: 15px;
	height: 15px;
	border: 2px solid rgba( 44, 93, 184, 0.25 );
	border-top-color: #2c5db8;
	border-radius: 50%;
	display: inline-block;
	animation: ppac-spin 0.7s linear infinite;
	flex: 0 0 auto;
}

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

.ppac-processing {
	opacity: 0.7;
	cursor: progress !important;
}

/* Security badge + accepted card brands — stacked and centered. */
.ppac-card-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.ppac-secure {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.8em;
	color: inherit;
	opacity: 0.7;
}

.ppac-card-brands {
	display: inline-flex;
	gap: 5px;
	flex-wrap: wrap;
}

.ppac-brand {
	font-size: 0.62em;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 3px 6px;
	border-radius: 4px;
	border: 1px solid #e3e6ea;
	background: #fff;
	color: #4a5568;
	line-height: 1;
}

.ppac-brand-visa {
	color: #1a1f71;
}

.ppac-brand-mc {
	color: #eb001b;
}

.ppac-brand-amex {
	color: #2e77bc;
}

.ppac-brand-disc {
	color: #e2711d;
}