/* ==========================================================================
   Luviano Commerce Core — bank transfer (order-received & email-adjacent)
   --------------------------------------------------------------------------
   Self-contained on purpose: this renders on the order-received page, which is
   the conversion-completion moment for a bank-transfer store. It must read as
   premium and stay legible WITHOUT depending on the theme's tokens or fonts,
   so the gateway output is safe even if the theme changes. No motion is used
   on payment figures (per design rules).
   ========================================================================== */

.luviano-bank-transfer-instructions {
	--lv-bt-ink: #14110e;
	--lv-bt-muted: #6e6b65;
	--lv-bt-line: rgba(20, 17, 14, 0.12);
	--lv-bt-surface: #f5f3ed;
	--lv-bt-card: #ffffff;
	--lv-bt-accent: #b89b6f;

	position: relative;
	margin: 2.25rem 0;
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	border: 1px solid var(--lv-bt-line);
	border-radius: 4px;
	background: var(--lv-bt-surface);
	color: var(--lv-bt-ink);
}

/* Slim editorial accent bar */
.luviano-bank-transfer-instructions::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--lv-bt-ink) 0%, var(--lv-bt-ink) 62%, var(--lv-bt-accent) 100%);
	border-radius: 4px 4px 0 0;
}

.luviano-bank-transfer-instructions__head {
	max-width: 60ch;
}

.luviano-bank-transfer-instructions__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lv-bt-muted);
}

.luviano-bank-transfer-instructions__eyebrow::before {
	content: "";
	width: 1.6rem;
	height: 1px;
	background: var(--lv-bt-accent);
}

.luviano-bank-transfer-instructions h2 {
	margin: 0 0 0.6rem;
	font-family: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 0.01em;
}

.luviano-bank-transfer-instructions p {
	margin: 0;
	color: var(--lv-bt-muted);
	line-height: 1.6;
}

.luviano-bank-transfer-instructions__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 1.6rem 0 1.25rem;
	background: var(--lv-bt-line);
	border: 1px solid var(--lv-bt-line);
	border-radius: 4px;
	overflow: hidden;
}

.luviano-bank-transfer-instructions__grid > div {
	min-width: 0;
	padding: 1rem 1.1rem;
	background: var(--lv-bt-card);
}

.luviano-bank-transfer-instructions dt {
	margin: 0 0 0.4rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--lv-bt-muted);
	text-transform: uppercase;
}

.luviano-bank-transfer-instructions dd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-width: 0;
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lv-bt-ink);
	word-break: break-word;
}

.luviano-bank-transfer-instructions dd > span {
	min-width: 0;
}

/* IBAN / reference read better with a touch of tracking + tabular figures */
.luviano-bank-transfer-instructions__grid > div:nth-child(2) dd > span,
.luviano-bank-transfer-instructions dd[data-lv-mono] > span {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.luviano-copy-button {
	flex: 0 0 auto;
	border: 1px solid var(--lv-bt-ink);
	border-radius: 2px;
	background: var(--lv-bt-ink);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 0.6rem 0.8rem;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.luviano-copy-button:hover {
	background: #2b2620;
}

.luviano-copy-button:active {
	transform: translateY(1px);
}

.luviano-copy-button:focus-visible {
	outline: 2px solid var(--lv-bt-accent);
	outline-offset: 2px;
}

.luviano-bank-transfer-instructions__note {
	max-width: 60ch;
	color: var(--lv-bt-ink);
	font-weight: 600;
}

.luviano-bank-transfer-instructions__help {
	max-width: 60ch;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	color: var(--lv-bt-muted);
}

/* Confirmed / no-longer-waiting state */
.luviano-bank-transfer-instructions--confirmed::before {
	background: var(--lv-bt-ink);
}

@media (max-width: 700px) {
	.luviano-bank-transfer-instructions {
		margin: 1.5rem 0;
	}

	.luviano-bank-transfer-instructions__grid {
		grid-template-columns: 1fr;
	}

	.luviano-bank-transfer-instructions dd {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.luviano-copy-button {
		transition: none;
	}
}