/**
 * SYF Gateway — front-end (checkout, thank-you, My Account).
 * Colors derive from the theme's text color so the box fits light and dark themes.
 */
.syf-gateway-fields,
.syf-gateway-proof {
	--syf-gateway-line: color-mix(in srgb, currentcolor 18%, transparent);
	--syf-gateway-soft: color-mix(in srgb, currentcolor 5%, transparent);
	--syf-gateway-muted: color-mix(in srgb, currentcolor 70%, transparent);
	--syf-gateway-error: #b32d2e;
	--syf-gateway-radius: 8px;
}

.syf-gateway-recipient {
	margin-block: 0.5em 1em;
	padding: 0.75em 1em;
	border: 1px solid var(--syf-gateway-line);
	border-radius: var(--syf-gateway-radius);
	background: var(--syf-gateway-soft);
}

.syf-gateway-amount {
	margin: 0 0 0.5em;
}

.syf-gateway-recipient dl {
	margin: 0;
}

.syf-gateway-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 0.75em;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.4em;
	border-block-end: 1px dashed var(--syf-gateway-line);
}

.syf-gateway-row:last-child {
	border-block-end: 0;
}

.syf-gateway-row dt {
	color: var(--syf-gateway-muted);
	font-weight: 400;
}

.syf-gateway-row dd {
	display: flex;
	gap: 0.5em;
	align-items: center;
	margin: 0;
	font-weight: 600;
	word-break: break-all;
}

.syf-gateway-value[dir="ltr"] {
	unicode-bidi: isolate;
}

.syf-gateway-copy {
	min-height: 32px;
	padding: 0.2em 0.7em;
	border: 1px solid var(--syf-gateway-line);
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font-size: 0.85em;
	cursor: pointer;
}

.syf-gateway-copy:focus-visible,
.syf-gateway-file:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

.syf-gateway-instructions {
	margin: 0.75em 0 0;
	font-size: 0.92em;
}

.syf-gateway-field {
	margin-block: 0.75em;
}

.syf-gateway-field label,
.syf-gateway-upload label {
	display: block;
	margin-block-end: 0.3em;
}

.syf-gateway-field input[type="text"] {
	width: 100%;
}

.syf-gateway-help {
	display: block;
	margin-block-start: 0.25em;
	color: var(--syf-gateway-muted);
}

.syf-gateway-preview img,
.syf-gateway-thumb img {
	display: block;
	max-width: 160px;
	max-height: 200px;
	margin-block-start: 0.5em;
	border: 1px solid var(--syf-gateway-line);
	border-radius: 6px;
	object-fit: contain;
}

.syf-gateway-status {
	min-height: 1.2em;
	margin: 0.3em 0 0;
	font-size: 0.9em;
}

.syf-gateway-status.is-error {
	color: var(--syf-gateway-error);
}

.syf-gateway-label {
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
}

/* Brand logos are often wide wordmarks: cap the height, keep the ratio. */
img.syf-gateway-logo {
	inline-size: auto;
	max-inline-size: 96px;
	block-size: auto;
	max-block-size: 28px;
	object-fit: contain;
	vertical-align: middle;
	padding: 2px;
	border-radius: 4px;
	/* Brand logos assume a light background; keep them readable on dark themes. */
	background: var(--syf-gateway-logo-bg, #fff);
}

.syf-gateway-proof {
	margin-block: 2em;
}

.syf-gateway-proof code {
	unicode-bidi: isolate;
}

@media (prefers-color-scheme: dark) {
	.syf-gateway-fields,
	.syf-gateway-proof {
		--syf-gateway-error: #f08a8b;
	}
}