/**
 * Payment methods.
 *
 * Every value falls back to a literal, so the panel still looks deliberate on
 * a shop running some other theme. Under TemplateHive the custom properties
 * resolve and it picks up the shop's own palette.
 */

/* ---------------------------------------------------------------- checkout */

.woocommerce-checkout #payment ul.payment_methods li label img.thc-payment-logo,
.wc-block-components-payment-method-label img.thc-payment-logo {
	display: inline-block;
	width: auto;
	max-height: 24px;
	margin-inline-start: 8px;
	vertical-align: middle;
	border-radius: 4px;
}

/*
 * Scoped to this plugin's two methods. An unscoped `li label` would restyle
 * every other gateway in the list — Stripe's card-brand row and Klarna's
 * multi-line labels both collapse when forced to inline-flex.
 */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_thc_bank > label,
.woocommerce-checkout #payment ul.payment_methods li.payment_method_thc_paypal > label {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-weight: 600;
	color: var(--th-ink, #0f172a);
}

.thc-payment-description {
	color: var(--th-body, #475569);
	line-height: 1.6;
}

/* ------------------------------------------------------------ bank details */

.thc-bank {
	margin: 32px 0;
	padding: clamp(20px, 4vw, 28px);
	background: var(--th-surface, #fff);
	border: 1px solid var(--th-line, #e2e8f0);
	border-radius: var(--th-radius, 16px);
	box-shadow: var(--th-shadow-sm, 0 2px 6px rgba(15, 23, 42, .06));
}

.thc-bank__title {
	margin: 0 0 10px;
	font-size: clamp(1.05rem, 2.4vw, 1.25rem);
	line-height: 1.3;
	color: var(--th-ink, #0f172a);
}

.thc-bank__intro,
.thc-bank__extra {
	color: var(--th-body, #475569);
	line-height: 1.65;
}

.thc-bank__intro > :last-child,
.thc-bank__extra > :last-child {
	margin-bottom: 0;
}

.thc-bank__rows {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--th-line-soft, #f1f5f9);
}

.thc-bank__row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	align-items: baseline;
	justify-content: space-between;
	margin: 0;
	padding: 11px 0;
	border-bottom: 1px solid var(--th-line-soft, #f1f5f9);
}

.thc-bank__key {
	flex: 0 0 auto;
	font-size: .875rem;
	color: var(--th-muted, #94a3b8);
}

.thc-bank__val {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: end;
	font-family: var(--th-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: .95rem;
	font-weight: 600;
	color: var(--th-ink, #0f172a);
	/* Long IBANs read as groups, not as one unbroken string. */
	letter-spacing: .01em;
}

/*
 * The two rows a buyer actually has to get right. Highlighting them is the
 * cheapest way to cut down "I paid but you have no record of it" emails.
 */
.thc-bank__row--lead .thc-bank__val {
	font-size: 1.05rem;
	color: var(--th-primary, #4f46e5);
}

.thc-bank__extra {
	margin-top: 16px;
	font-size: .925rem;
}

.thc-bank__note {
	margin: 16px 0 0;
	font-size: .875rem;
	color: var(--th-muted, #94a3b8);
}

@media (max-width: 480px) {
	.thc-bank__row {
		flex-direction: column;
		align-items: flex-start;
	}

	.thc-bank__val {
		text-align: start;
	}
}

@media print {
	.thc-bank {
		box-shadow: none;
	}
}