/*
 * Structural additions only — field/button/card/alert visuals all come from
 * the active theme's own .enquiry-field / .btn-vr / .enquiry-card / .alert
 * classes (reused directly here) so the voucher form matches the site's
 * other forms (contact, quote) instead of introducing a second style.
 */

.lp-vouchers-section {
	/* .event-enquiry-section's default padding-top (31vh) is sized for a
	   full-bleed hero background image on the packages/contact pages; this
	   shortcode has no such background, so use the same override those
	   pages apply via .contact-form-section. */
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.lp-vouchers-section .enquiry-card {
	max-width: 680px;
}

.lp-vouchers-denomination-buttons {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: stretch;
}

/* Both the preset buttons and the custom-amount tile share this sizing, so
   the free-input tile reads as just one more option in the same row rather
   than a visually distinct control. */
.lp-vouchers-denomination-btn,
.lp-vouchers-custom-amount-tile {
	padding: 0.75rem 1.25rem;
}

.lp-vouchers-custom-amount-tile {
	/* .btn-vr is normally a <button>/<a> with a single centered text node;
	   here it wraps a euro symbol + input instead, laid out via the same
	   inline-flex/align-items/justify-content .btn-vr already sets. */
	gap: 0.35rem;
	cursor: text;
}

.lp-vouchers-amount-prefix {
	color: #00dcdc; /* this site's documented accent color (theme.json / Sass $primary) */
	pointer-events: none;
}

.lp-vouchers-amount-input {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	width: 4.5rem;
	color: inherit;
	font: inherit;
	text-align: left;
}

.lp-vouchers-amount-input:focus {
	outline: none;
	box-shadow: none;
	background: transparent;
}

.lp-vouchers-amount-input::placeholder {
	color: rgba(239, 239, 239, 0.6);
}

/* Hide the native spinner — the denomination buttons are the primary input
   method, this field is still fully usable via keyboard entry. */
.lp-vouchers-amount-input::-webkit-outer-spin-button,
.lp-vouchers-amount-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.lp-vouchers-amount-input {
	-moz-appearance: textfield;
}

.lp-vouchers-status-pending {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Signals the thank-you page is actively polling for payment confirmation
   rather than looking stalled while frontend.js waits on the webhook. */
.lp-vouchers-spinner {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid rgba(0, 220, 220, 0.3);
	border-top-color: #00dcdc; /* this site's documented accent color (theme.json / Sass $primary) */
	border-radius: 50%;
	animation: lp-vouchers-spin 700ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.lp-vouchers-spinner {
		animation-duration: 1.6s;
	}
}