.ea-voucher-widget {
	/* Education Asia brand: deep navy for header/brand chrome and the total,
	   brick red for the primary call-to-action, cool neutral surfaces and
	   green for stock/discount. */
	--ea-brand: #1f3a5f;
	--ea-brand-dark: #172d4a;
	--ea-brand-soft: #e9eef5;
	--ea-accent: #b5473a;
	--ea-accent-dark: #9c3b30;
	--ea-total-bg: #f4f6fa;
	--ea-ink: #111827;
	--ea-text: #374151;
	--ea-muted: #6b7280;
	--ea-border: #e3e7ee;
	--ea-field-bg: #f9fafb;
	--ea-bg-soft: #f3f4f6;
	--ea-success: #1f8a3f;
	--ea-success-bg: #e8f6ec;
	--ea-success-border: #cdebd6;
	--ea-danger: #b5473a;
	--ea-danger-bg: #fbecea;
	/* A single spacing/radius/motion scale so every element in the form lines
	   up consistently instead of each rule picking its own numbers. */
	--ea-radius-lg: 24px;
	--ea-radius-md: 16px;
	--ea-radius-sm: 12px;
	--ea-field-h: 44px;
	--ea-ease: 160ms cubic-bezier(0.4, 0, 0.2, 1);

	max-width: 460px;
	margin: 0 auto;
	background: #fff !important;
	border: 1px solid var(--ea-border);
	border-radius: var(--ea-radius-lg);
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 16px 40px rgba(17, 24, 39, 0.07);
	font-family: inherit;
	color: var(--ea-ink);
	position: relative;
	/* NOT overflow:hidden — this used to clip the header's gradient to the
	   rounded corners (now done via border-radius on .ea-voucher-header
	   below instead), but it also clipped anything a theme's select-enhancer
	   plugin (Select2/Chosen/SelectWoo — common on WooCommerce sites) renders
	   for .ea-customer-phone-code, since that dropdown panel is a JS-appended
	   <ul>/<li> positioned relative to this widget, not a browser-native
	   popup. With overflow:hidden here the options existed in the DOM but
	   were invisible — confirmed via devtools on the live site. */
}

.ea-voucher-widget,
.ea-voucher-widget *,
.ea-voucher-widget *::before,
.ea-voucher-widget *::after {
	box-sizing: border-box;
}

/* Themes often set display on spans/inputs, which would beat the UA's
   [hidden] rule — keep hidden things hidden inside the widget. */
.ea-voucher-widget [hidden] {
	display: none !important;
}

/* Pin every surface to the neutral palette — a theme's form/box styling
   (or a stale optimized copy of an older version of this stylesheet) must
   never tint the card cream/yellow. */
.ea-voucher-widget .ea-price-card {
	background: #fff !important;
}
.ea-voucher-widget .ea-voucher-total {
	background: var(--ea-total-bg) !important;
	border-color: var(--ea-border) !important;
}
.ea-voucher-widget .ea-type-select,
.ea-voucher-widget .ea-voucher-form input:not(.ea-customer-phone-code),
.ea-voucher-widget .ea-qty-minus {
	background-color: var(--ea-field-bg) !important;
	border-color: var(--ea-border) !important;
}
.ea-voucher-widget .ea-type-select:focus-visible,
.ea-voucher-widget .ea-voucher-form input:not(.ea-customer-phone-code):focus-visible {
	background-color: #fff !important;
	border-color: var(--ea-brand) !important;
}
.ea-voucher-widget .ea-phone-code-field {
	background-color: var(--ea-bg-soft) !important;
	border-color: var(--ea-border) !important;
}
.ea-voucher-widget .ea-phone-code-field:focus-within {
	border-color: var(--ea-brand) !important;
}
.ea-voucher-widget .ea-price-discount {
	background: var(--ea-success-bg) !important;
	border-color: var(--ea-success-border) !important;
	color: var(--ea-success) !important;
}
.ea-voucher-widget .ea-total-label {
	color: var(--ea-text) !important;
}
.ea-voucher-widget .ea-total-value {
	color: var(--ea-brand) !important;
}

/* Browser autofill paints inputs pale yellow/blue — keep them neutral. */
.ea-voucher-widget input:-webkit-autofill,
.ea-voucher-widget input:-webkit-autofill:hover,
.ea-voucher-widget input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--ea-field-bg) inset !important;
	-webkit-text-fill-color: var(--ea-ink) !important;
	transition: background-color 9999s ease-out 0s;
}

/* ---------- Header ---------- */

.ea-voucher-header {
	padding: 16px 20px 14px;
	border-radius: var(--ea-radius-lg) var(--ea-radius-lg) 0 0;
	background: var(--ea-brand);
	color: #fff;
}

.ea-voucher-header-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ea-voucher-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.ea-voucher-brand-icon {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.ea-voucher-brand-icon svg {
	width: 20px !important;
	height: 20px !important;
}

.ea-voucher-title {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	/* Forced: the theme's own heading color rule otherwise beats this h2's
	   inherited white on the navy header (same conflict as .ea-result-icon
	   svg sizing below — a theme/global style with higher specificity). */
	color: #fff !important;
}

.ea-voucher-subtitle {
	margin: 4px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.ea-voucher-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 7px 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
	white-space: nowrap;
}

.ea-voucher-badge svg {
	width: 14px !important;
	height: 14px !important;
	color: #f2c879;
}

.ea-voucher-error {
	margin: 0;
	color: var(--ea-ink);
	font-size: 14px;
	line-height: 1.5;
}

/* Pricing failed to load — shown instead of the full purchase card, styled
   the same way (same card shell) so it never looks like a broken widget. */
.ea-voucher-widget--notice {
	border: 1px solid var(--ea-border);
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 4px 16px rgba(17, 24, 39, 0.06);
}

.ea-voucher-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 24px;
}

.ea-voucher-notice-icon {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	font-style: normal;
	background: var(--ea-brand-soft, #e9eef5);
	color: var(--ea-brand, #1f3a5f);
}

/* Same .ea-voucher-notice used server-side for "pricing couldn't load" (a
   standalone card) is reused here client-side for "not sold in your
   country" — but this one lives inside .ea-voucher-body, which already has
   its own padding, so drop this one's to avoid doubling up. */
.ea-voucher-body .ea-voucher-unavailable {
	padding: 0;
}

.ea-voucher-body {
	padding: 20px 20px 16px;
}

/* ---------- Voucher type ---------- */

.ea-voucher-type {
	margin-bottom: 14px;
}

.ea-voucher-type label {
	display: block;
	margin-bottom: 7px;
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ea-text);
}

.ea-select-wrap {
	position: relative;
}

.ea-type-select {
	width: 100%;
	height: var(--ea-field-h);
	padding: 0 44px 0 16px;
	font-size: 16px;
	font-weight: 500;
	color: var(--ea-ink);
	background-color: var(--ea-field-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 18px 18px;
	border: 1px solid var(--ea-border);
	border-radius: var(--ea-radius-sm);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color var(--ea-ease), box-shadow var(--ea-ease), opacity var(--ea-ease);
}

.ea-type-select:focus-visible {
	outline: none;
	border-color: var(--ea-brand);
	box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.14);
}

.ea-type-select:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/*
 * Some themes (this one included) run a "nice-select" style script that
 * replaces every real <select> on the page with its own fake dropdown (a
 * sibling <div class="nice-select">...<li data-value>...</div>) and hides
 * the real <select> via an inline style="display:none". An !important rule
 * in a real stylesheet beats an element's inline style, so this forces our
 * own <select> back on screen (styled by .ea-type-select above) and hides
 * whatever the theme inserted next to it — our dropdown, not theirs.
 */
.ea-voucher-widget .nice-select {
	display: none !important;
}
.ea-voucher-widget select.ea-type-select {
	display: block !important;
}

/* Small inline spinner shown inside the Type field (left of the chevron)
   while its price/stock is being re-fetched — see .is-loading-type below. */
.ea-inline-spinner {
	display: none;
	position: absolute;
	top: 50%;
	right: 44px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border-radius: 50%;
	border: 2px solid var(--ea-border);
	border-top-color: var(--ea-brand);
	animation: ea-spin 0.7s linear infinite;
	pointer-events: none;
}

.ea-voucher-widget.is-loading-type .ea-inline-spinner {
	display: block;
}

/* ---------- Price card (price + stock + quantity) ---------- */

.ea-price-card {
	padding: 12px 16px;
	margin-bottom: 12px;
	border: 1px solid var(--ea-border);
	border-radius: var(--ea-radius-md);
	background: #fff;
}

.ea-price-row {
	padding-bottom: 10px;
	border-radius: var(--ea-radius-sm);
}

.ea-price-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.ea-price-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ea-muted);
}

.ea-price-amounts {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 4px;
}

/* Prices use the site's own font (same as the page's "87%"/"95%" stats) with
   regular lining figures — forced so no theme/old cached rule swaps in a
   serif or old-style numerals. */
.ea-price-value,
.ea-price-original,
.ea-voucher-total .ea-total-value {
	font-family: inherit !important;
	font-style: normal !important;
	font-variant-numeric: lining-nums;
	font-feature-settings: 'lnum' 1;
}

.ea-price-value {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ea-ink);
	line-height: 1.2;
}

/* The "original" price — a real <s> element so it reads as struck-through
   to screen readers too, not just visually. */
.ea-price-original {
	font-size: 15px;
	font-weight: 500;
	color: #9ca3af;
	text-decoration: line-through;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1.5px;
	white-space: nowrap;
}

.ea-price-discount {
	display: inline-block;
	margin-top: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ea-success-bg);
	border: 1px solid var(--ea-success-border);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--ea-success);
}

.ea-stock-block {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ea-success);
}

.ea-stock-dot {
	width: 8px;
	height: 8px;
	margin-right: 2px;
	border-radius: 50%;
	background: var(--ea-success);
	flex-shrink: 0;
}

.ea-stock-label {
	font-weight: 600;
}

.ea-stock-block.is-out {
	color: var(--ea-danger);
}

.ea-stock-block.is-out .ea-stock-dot {
	background: var(--ea-danger);
}

/* While a new type's price/stock is loading, replace the ENTIRE price block
   and the ENTIRE total card with a shimmering skeleton block each — not just
   the numbers inside them — so the whole thing reads as "this section is
   loading", not a half-updated row. */
.ea-voucher-widget.is-loading-type .ea-price-row,
.ea-voucher-widget.is-loading-type .ea-voucher-total {
	position: relative;
	overflow: hidden;
}

.ea-voucher-widget.is-loading-type .ea-price-row > *,
.ea-voucher-widget.is-loading-type .ea-voucher-total > * {
	visibility: hidden;
}

.ea-voucher-widget.is-loading-type .ea-price-row::after,
.ea-voucher-widget.is-loading-type .ea-voucher-total::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #eceff4 25%, #f6f7fa 37%, #eceff4 63%);
	background-size: 400% 100%;
	animation: ea-shimmer 1.3s ease infinite;
}

/* Leave the divider under the price block while it shimmers. */
.ea-voucher-widget.is-loading-type .ea-price-row::after {
	bottom: 10px;
}

@keyframes ea-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

/* ---------- Quantity ---------- */

.ea-voucher-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-top: 10px;
	border-top: 1px solid var(--ea-border);
}

.ea-voucher-qty > label,
.ea-voucher-qty > .ea-qty-label {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--ea-text);
}

/* Bookings (non-voucher tests, e.g. IELTS) are always for one person — a fixed value, no stepper. */
.ea-voucher-qty > .ea-qty-fixed {
	font-size: 16px;
	font-weight: 700;
	color: var(--ea-text);
	padding-right: 4px;
}

.ea-qty-control {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ea-voucher-qty button {
	width: 32px;
	height: 32px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	border-radius: 10px;
	transition: background var(--ea-ease), border-color var(--ea-ease), transform 0.1s ease;
}

.ea-voucher-qty .ea-qty-minus {
	background: var(--ea-field-bg);
	border: 1px solid var(--ea-border);
	color: var(--ea-text);
}

.ea-voucher-qty .ea-qty-minus:hover {
	background: var(--ea-bg-soft);
}

.ea-voucher-qty .ea-qty-plus {
	background: var(--ea-brand);
	border: 1px solid var(--ea-brand);
	color: #fff;
}

.ea-voucher-qty .ea-qty-plus:hover {
	background: var(--ea-brand-dark);
}

.ea-voucher-qty button:active {
	transform: scale(0.96);
}

.ea-voucher-qty button:focus-visible {
	outline: 2px solid var(--ea-brand);
	outline-offset: 2px;
}

.ea-voucher-qty input {
	width: 44px;
	height: 32px;
	padding: 0;
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	color: var(--ea-ink) !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 8px;
	box-shadow: none !important;
	-moz-appearance: textfield;
	appearance: textfield;
}

.ea-voucher-qty input::-webkit-outer-spin-button,
.ea-voucher-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ea-voucher-qty input:focus-visible {
	outline: none;
	background-color: var(--ea-brand-soft) !important;
}

/* ---------- Total ---------- */

.ea-voucher-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 12px;
	padding: 10px 16px;
	margin-bottom: 18px;
	border-radius: var(--ea-radius-md);
	background: var(--ea-total-bg);
	border: 1px solid var(--ea-border);
}

.ea-total-label {
	font-size: 15px;
	font-weight: 500;
	color: var(--ea-text);
}

.ea-voucher-total .ea-total-value {
	color: var(--ea-brand);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

/* ---------- Customer details ---------- */

.ea-form-field {
	margin-bottom: 14px;
}

.ea-form-field label {
	display: block;
	margin-bottom: 7px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ea-text);
}

.ea-voucher-form input {
	width: 100%;
	height: var(--ea-field-h);
	padding: 0 16px;
	font-size: 16px;
	color: var(--ea-ink) !important;
	background-color: var(--ea-field-bg) !important;
	border: 1px solid var(--ea-border);
	border-radius: var(--ea-radius-sm);
	transition: border-color var(--ea-ease), box-shadow var(--ea-ease), background-color var(--ea-ease);
}

.ea-voucher-form input:focus-visible {
	outline: none;
	border-color: var(--ea-brand);
	background-color: #fff !important;
	box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.14);
}

.ea-voucher-form input::placeholder {
	color: #9ca3af;
}

.ea-phone-row {
	display: flex;
	gap: 10px;
}

/* Plain "+ [digits]" box — no dropdown, no country list. The backend adds
   the leading "+" when it stores this; the customer only ever types digits. */
.ea-phone-code-field {
	flex: 0 0 78px;
	width: 78px;
	height: var(--ea-field-h);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px 0 12px;
	border: 1px solid var(--ea-border);
	border-radius: var(--ea-radius-sm);
	background-color: var(--ea-bg-soft) !important;
	transition: border-color var(--ea-ease), box-shadow var(--ea-ease);
}

.ea-phone-code-field:focus-within {
	border-color: var(--ea-brand);
	box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.14);
}

.ea-phone-code-plus {
	color: var(--ea-text);
	font-size: 16px;
}

.ea-phone-code-field .ea-customer-phone-code {
	border: none !important;
	height: auto !important;
	padding: 0 !important;
	width: 100%;
	min-width: 0;
	color: var(--ea-text) !important;
	background-color: transparent !important;
}

.ea-phone-code-field .ea-customer-phone-code:focus-visible {
	box-shadow: none !important;
}

.ea-phone-row .ea-customer-phone {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------- Purchase button ---------- */

.ea-purchase-btn {
	width: 100%;
	margin-top: 6px;
	min-height: 48px;
	padding: 10px 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	cursor: pointer;
	background: var(--ea-accent);
	color: #fff;
	border: none;
	border-radius: var(--ea-radius-sm);
	box-shadow: 0 10px 24px rgba(181, 71, 58, 0.26);
	transition: transform 0.1s ease, box-shadow var(--ea-ease), background var(--ea-ease), opacity var(--ea-ease);
}

.ea-purchase-btn:hover:not(:disabled) {
	background: var(--ea-accent-dark);
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(181, 71, 58, 0.32);
}

.ea-purchase-btn:focus-visible {
	outline: 2px solid var(--ea-brand);
	outline-offset: 3px;
}

.ea-purchase-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.ea-btn-arrow {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0;
	transition: transform var(--ea-ease);
}

.ea-purchase-btn:hover:not(:disabled) .ea-btn-arrow {
	transform: translateX(3px);
}

.ea-purchase-btn.is-loading .ea-btn-arrow {
	display: none;
}

/* Spinner shown inside the button itself while an order/payment request is
   in flight — the button stays labelled "Purchase voucher" throughout (the
   status text above it already says what's happening), this just makes the
   wait visible on the control the customer actually clicked. */
.ea-btn-spinner {
	display: none;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 2.5px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	animation: ea-spin 0.7s linear infinite;
	flex-shrink: 0;
}

.ea-purchase-btn.is-loading .ea-btn-spinner {
	display: inline-block;
}

.ea-voucher-message {
	margin-top: 8px;
	padding: 0;
	border-radius: var(--ea-radius-sm);
	font-size: 13.5px;
	font-weight: 500;
	text-align: center;
	color: var(--ea-brand-dark);
	background: transparent;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height var(--ea-ease), opacity var(--ea-ease), padding var(--ea-ease), margin var(--ea-ease);
}

.ea-voucher-message.is-visible {
	max-height: 60px;
	opacity: 1;
	padding: 10px 14px;
	background: var(--ea-brand-soft);
}

.ea-voucher-message.is-error {
	color: var(--ea-danger);
	background: var(--ea-danger-bg);
}

.ea-voucher-secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--ea-muted);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.ea-inline-spinner,
	.ea-btn-spinner,
	.ea-voucher-widget.is-loading-type .ea-price-row::after,
	.ea-voucher-widget.is-loading-type .ea-voucher-total::after {
		animation: none;
	}
}

@media (max-width: 480px) {
	.ea-voucher-widget {
		max-width: 100%;
		border-radius: var(--ea-radius-md);
	}

	.ea-voucher-header {
		border-radius: var(--ea-radius-md) var(--ea-radius-md) 0 0;
	}

	.ea-voucher-header,
	.ea-voucher-body {
		padding: 14px 16px;
	}

	.ea-voucher-title {
		font-size: 21px;
	}

	.ea-price-card {
		padding: 12px 14px;
	}

	.ea-price-value {
		font-size: 26px;
	}

	.ea-voucher-total {
		padding: 10px 14px;
	}

	.ea-voucher-total .ea-total-value {
		font-size: 22px;
	}

	.ea-purchase-btn {
		font-size: 16px;
	}
}

@media (max-width: 360px) {
	.ea-voucher-badge {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Voucher catalog page ([ea_voucher_catalog])                          */
/* ------------------------------------------------------------------ */

/* Heading above the grid — same width as the grid so it lines up with the cards. */
.ea-catalog-heading {
	max-width: 1100px;
	margin: 0 auto 24px !important;
	padding: 0;
	font-family: inherit;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.25;
	color: #111827 !important;
}

@media (max-width: 560px) {
	.ea-catalog-heading {
		margin-bottom: 16px !important;
		font-size: 22px;
	}
}

.ea-catalog {
	/* Same brand palette as the purchase widget. */
	--ea-brand: #1f3a5f;
	--ea-brand-dark: #172d4a;
	--ea-accent: #b5473a;
	--ea-accent-dark: #9c3b30;
	--ea-ink: #111827;
	--ea-text: #374151;
	--ea-muted: #6b7280;
	--ea-border: #e3e7ee;
	--ea-success: #1f8a3f;

	display: grid;
	/* 3 cards per row on desktop; 2 on tablets, then the phone rules below. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	max-width: 1100px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--ea-ink);
}

.ea-catalog *,
.ea-catalog *::before,
.ea-catalog *::after {
	box-sizing: border-box;
}

.ea-catalog-card {
	display: flex;
	flex-direction: column;
	padding: 12px;
	background: #fff !important;
	border: 1px solid var(--ea-border);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 10px 28px rgba(17, 24, 39, 0.06);
	transition: transform var(--ea-ease, 160ms ease), box-shadow 160ms ease;
}

.ea-catalog-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(17, 24, 39, 0.05), 0 16px 36px rgba(17, 24, 39, 0.1);
}

/* Square artwork area: an uploaded image, or a branded tile with the test name. */
.ea-catalog-media {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 20px;
	border-radius: 12px;
	overflow: hidden;
	background: radial-gradient(circle at 30% 20%, #2f5687 0%, var(--ea-brand) 55%, var(--ea-brand-dark) 100%);
	color: #fff;
	text-align: center;
}

.ea-catalog-media.has-image {
	padding: 0;
	background: #f3f4f6;
}

.ea-catalog-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ea-catalog-tile-name {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.1;
	color: #fff;
}

.ea-catalog-tile-type {
	padding: 5px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.3);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.ea-catalog-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	padding: 3px 9px;
	border-radius: 6px;
	/* Same red as the Buy Now / "Book Appointment" buttons. */
	background: #ec2229 !important;
	box-shadow: 0 2px 6px rgba(236, 34, 41, 0.35);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #fff !important;
}

.ea-catalog-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 14px 4px 2px;
}

.ea-catalog-title {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ea-ink) !important;
}

.ea-catalog-prices {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 8px;
}

.ea-catalog-price {
	font-size: 19px;
	font-weight: 700;
	font-variant-numeric: lining-nums;
	color: var(--ea-ink);
}

.ea-catalog-original {
	font-size: 13px;
	color: #9ca3af;
	text-decoration: line-through;
	white-space: nowrap;
}

.ea-catalog-save {
	margin: 4px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ea-success);
}

/* Pushed to the bottom so every card's button lines up across a row. */
.ea-catalog-btn {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 10px 16px;
	border-radius: 10px;
	/* Same red as the site's "Book Appointment" button. */
	background: #ec2229 !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background 160ms ease, transform 0.1s ease;
}

/* Gap above the button, kept on the element before it so the button's own
   margin-top:auto can still align buttons across a row. */
.ea-catalog-body > :nth-last-child(2) {
	margin-bottom: 14px;
}

.ea-catalog-btn:hover {
	background: #c81b21 !important;
}

.ea-catalog-btn:focus-visible {
	outline: 2px solid var(--ea-brand);
	outline-offset: 2px;
}

.ea-catalog-btn svg {
	width: 17px !important;
	height: 17px !important;
	flex-shrink: 0;
}

.ea-catalog-btn.is-disabled,
.ea-catalog-btn.is-disabled:hover {
	background: #e5e7eb !important;
	color: var(--ea-muted) !important;
	cursor: not-allowed;
}

@media (max-width: 860px) {
	.ea-catalog {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.ea-catalog {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.ea-catalog-card {
		padding: 8px;
	}

	.ea-catalog-tile-name {
		font-size: 22px;
	}

	.ea-catalog-price {
		font-size: 16px;
	}

	.ea-catalog-btn {
		font-size: 14px;
	}
}

@media (max-width: 360px) {
	.ea-catalog {
		grid-template-columns: 1fr;
	}
}

/*
 * GetPay's checkout widget draws its own card-entry form directly into
 * #checkout (see class-payment-callback.php) — it's not an iframe, so it
 * inherits the site theme's CSS. We don't control GetPay's own class names,
 * but we do control this wrapper id, so scope a readable input style to it.
 */
#checkout input,
#checkout select,
#checkout textarea {
	color: #1a1a1a !important;
	background-color: #fff !important;
}

/* ------------------------------------------------------------------ */
/* Payment result pages (/voucher-payment-success, -fail,               */
/* and the real "Payment Successful" WP page carrying                   */
/* [ea_voucher_success])                                                */
/* ------------------------------------------------------------------ */

.ea-result-wrap {
	--ea-brand: #0f3b72;
	--ea-brand-dark: #0a2c57;
	--ea-accent: #e0302b;
	--ea-accent-dark: #b8241f;
	--ea-ink: #1a1a2e;
	--ea-muted: #6b7280;
	--ea-border: #e6e8f0;
	--ea-bg-soft: #f7f8fc;
	--ea-success: #16a34a;
	--ea-success-bg: #eafaf0;
	--ea-danger: #e0302b;
	--ea-danger-bg: #fdecec;
	--ea-pending: #0f3b72;
	--ea-pending-bg: #eaf0f8;

	max-width: 560px;
	margin: 48px auto;
	padding: 0 16px;
	font-family: inherit;
	color: var(--ea-ink);
}

.ea-result-card {
	background: #fff;
	border: 1px solid var(--ea-border);
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(20, 20, 60, 0.06);
	padding: 40px 32px;
	text-align: center;
}

/*
 * The icon circle and the SVG inside it are pinned down defensively (fixed
 * px box, overflow hidden, !important on the svg's own size) because on the
 * live site an optimization/CSS-purge plugin can drop or reorder rules it
 * doesn't recognise as "used" on a dynamically-rendered route, and some
 * themes/icon libraries carry a global `svg { width: 100% }`-style rule that
 * would otherwise blow this up to fill its container. See
 * EA_Vouchers_Styles::inline() for the belt-and-suspenders fix (this same
 * stylesheet is also printed inline on these pages, not just enqueued).
 */
.ea-result-icon {
	width: 72px !important;
	height: 72px !important;
	flex: 0 0 72px;
	margin: 0 auto 20px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ea-result-icon svg {
	width: 36px !important;
	height: 36px !important;
	flex-shrink: 0;
}

.ea-result-icon.is-success {
	background: var(--ea-success-bg);
	color: var(--ea-success);
}

.ea-result-icon.is-fail {
	background: var(--ea-danger-bg);
	color: var(--ea-danger);
}

.ea-result-icon.is-pending {
	background: var(--ea-pending-bg);
	color: var(--ea-pending);
}

.ea-result-icon.is-pending svg {
	animation: ea-spin 1.6s linear infinite;
}

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

.ea-result-title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	color: var(--ea-ink);
}

.ea-result-sub {
	margin: 0 auto 24px;
	max-width: 420px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ea-muted);
}

.ea-result-meta {
	text-align: left;
	background: var(--ea-bg-soft);
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 24px;
}

.ea-result-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-size: 14px;
}

.ea-result-meta-row + .ea-result-meta-row {
	border-top: 1px solid var(--ea-border);
}

.ea-result-meta-label {
	color: var(--ea-muted);
}

.ea-result-meta-value {
	font-weight: 600;
	color: var(--ea-ink);
	text-align: right;
}

.ea-result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 24px;
}

.ea-result-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 10px;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.ea-result-btn.is-primary {
	background: linear-gradient(135deg, var(--ea-accent) 0%, var(--ea-accent-dark) 100%);
	color: #fff;
	border: none;
	box-shadow: 0 6px 16px rgba(224, 48, 43, 0.3);
}

.ea-result-btn.is-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(224, 48, 43, 0.38);
}

.ea-result-btn.is-secondary {
	background: #fff;
	color: var(--ea-ink);
	border: 1px solid var(--ea-border);
}

.ea-result-btn.is-secondary:hover {
	background: var(--ea-bg-soft);
}

.ea-result-note {
	margin-top: 20px;
	font-size: 13px;
	color: var(--ea-muted);
	line-height: 1.5;
}

.ea-result-note strong {
	color: var(--ea-ink);
}

@media (max-width: 480px) {
	.ea-result-wrap {
		margin: 24px auto;
	}

	.ea-result-card {
		padding: 28px 20px;
		border-radius: 12px;
	}

	.ea-result-actions {
		flex-direction: column;
	}

	.ea-result-btn {
		width: 100%;
	}
}