/* LH Card Checkout (Melio) — front-end styles */

/* High specificity + !important so the theme can't fade these to light gray */
.payment_box .lh-melio-checkout-note,
.wc_payment_method .lh-melio-checkout-note,
.lh-melio-checkout-note {
	font-size: 14px;
	line-height: 1.55;
	color: #1a1a1a !important;
	background: #f4f1ff;
	border: 1px solid #ddd3ff;
	border-radius: 8px;
	padding: 12px 14px;
	margin-top: 6px;
}
.lh-melio-checkout-note p { color: #1a1a1a !important; margin: 0 0 6px; }
.lh-melio-steps { margin: 6px 0 0; padding-left: 18px; }
.lh-melio-steps li { margin: 3px 0; color: #1a1a1a !important; }
.lh-melio-steps li strong { color: #4a2fd6 !important; }

.lh-melio-thankyou {
	margin: 24px 0; padding: 24px;
	border: 2px solid #6c47ff; border-radius: 14px; background: #faf9ff;
}
.lh-melio-thankyou h2 { margin-top: 0; color: #2b2b2b; }
.lh-melio-instr { font-size: 15px; line-height: 1.6; color: #333; margin-bottom: 16px; }

.lh-melio-values { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0; }
.lh-melio-value {
	flex: 1 1 180px; background: #fff; border: 1px solid #e4e0f5;
	border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column;
}
.lh-melio-label {
	font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
	color: #8a82a8; margin-bottom: 4px;
}
.lh-melio-data { font-size: 22px; font-weight: 700; color: #2b2b2b; }

.lh-melio-button {
	display: inline-block; background: #6c47ff; color: #fff !important;
	padding: 14px 28px; border-radius: 10px; text-decoration: none;
	font-weight: 700; font-size: 16px; transition: background .15s ease;
}
.lh-melio-button:hover { background: #5837d6; }

.lh-melio-preview { margin-top: 22px; }
.lh-melio-preview-cap { font-weight: 600; margin-bottom: 8px; }
.lh-melio-image-wrap { position: relative; display: inline-block; max-width: 480px; width: 100%; }
.lh-melio-image { display: block; width: 100%; height: auto; border-radius: 12px; }

.lh-melio-overlay {
	position: absolute; font-weight: 700; color: #111;
	font-size: clamp(11px, 2.6vw, 16px); pointer-events: none; white-space: nowrap;
}
.lh-melio-overlay-amount  { top: 49.5%; left: 9%; }
.lh-melio-overlay-invoice { top: 49.5%; left: 65%; }

@media (max-width: 600px) {
	.lh-melio-values { flex-direction: column; }
}