/**
 * WhatsApp Checkout Pro - Premium Checkout Popup styles.
 *
 * Presentation only. No selector here affects validation rules, AJAX
 * calls, or order/invoice creation - those all live in email-capture.js
 * and the PHP AJAX handlers, none of which this file touches.
 */

:root {
	--wacp-ec-green: #25d366;
	--wacp-ec-green-dark: #1faa59;
	--wacp-ec-green-tint: #f0fbf5;
	--wacp-ec-green-border: #cdeed9;
	--wacp-ec-blue: #3b5fe2;
	--wacp-ec-blue-dark: #2b48c4;
	--wacp-ec-blue-tint: #f0f3ff;
	--wacp-ec-blue-border: #d2dbfb;
	--wacp-ec-ink: #1a2129;
	--wacp-ec-muted: #6b7280;
}

.wacp-ec-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(15, 23, 19, 0.6);
	backdrop-filter: blur(2px);
}

body.wacp-ec-open {
	overflow: hidden;
}

.wacp-ec-modal {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: 92vh;
	overflow-y: auto;
	background: #ffffff;
	border-radius: 20px;
	padding: 32px 28px 26px;
	box-shadow: 0 24px 60px rgba(16, 24, 39, 0.25), 0 4px 12px rgba(16, 24, 39, 0.08);
	animation: wacp-ec-pop-in 0.22s ease;
}

@keyframes wacp-ec-pop-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.wacp-ec-close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: #f3f4f6;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	color: #6b7280;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.wacp-ec-close:hover {
	background: #e9ebee;
	color: #1a2129;
	transform: rotate(90deg);
}

/* ---------- Header ---------- */
.wacp-ec-header {
	text-align: center;
	margin: 0 0 22px;
}

.wacp-ec-title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
	color: var(--wacp-ec-ink);
	letter-spacing: -0.01em;
}

.wacp-ec-subtitle {
	margin: 0;
	font-size: 14px;
	color: var(--wacp-ec-muted);
}

/* ---------- Back button ---------- */
.wacp-ec-back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 14px;
	padding: 6px 4px;
	background: none;
	border: none;
	color: var(--wacp-ec-muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s ease;
}

.wacp-ec-back:hover {
	color: var(--wacp-ec-ink);
}

.wacp-ec-back[hidden] {
	display: none !important;
}

/* ---------- Customer Information ---------- */
.wacp-ec-customer-info[hidden] {
	display: none !important;
}

.wacp-ec-customer-info {
	margin: 0 0 22px;
	padding: 18px 18px 6px;
	background: #fafbfb;
	border: 1px solid #eef0f2;
	border-radius: 14px;
}

.wacp-ec-section-label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 700;
	color: #50575e;
	margin-bottom: 14px;
}

.wacp-ec-section-label svg {
	color: var(--wacp-ec-green-dark);
	flex-shrink: 0;
}

.wacp-ec-field {
	margin: 0 0 14px;
}

.wacp-ec-field[hidden] {
	display: none !important;
}

.wacp-ec-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--wacp-ec-ink);
	margin-bottom: 6px;
}

.wacp-ec-field input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1.5px solid #e2e6ea;
	border-radius: 10px;
	font-size: 14px;
	background: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wacp-ec-field input:focus {
	outline: none;
	border-color: var(--wacp-ec-green);
	box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.13);
}

.wacp-ec-field input.wacp-ec-input-error {
	border-color: #e25555;
	box-shadow: 0 0 0 3px rgba(226, 85, 85, 0.12);
}

@keyframes wacp-ec-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-5px); }
	40% { transform: translateX(4px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(2px); }
}

.wacp-ec-shake {
	animation: wacp-ec-shake 0.32s ease;
}

.wacp-ec-error {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: #d23c3c;
}

.wacp-ec-error[hidden] {
	display: none !important;
}

/* ---------- Option cards ---------- */
.wacp-ec-options {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.wacp-ec-options[hidden] {
	display: none !important;
}

.wacp-ec-option-card {
	border-radius: 16px;
	padding: 18px;
	border: 1.5px solid transparent;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wacp-ec-option-card:hover {
	transform: translateY(-2px);
}

.wacp-ec-option-card[hidden] {
	display: none !important;
}

.wacp-ec-option-whatsapp {
	background: var(--wacp-ec-green-tint);
	border-color: var(--wacp-ec-green-border);
}

.wacp-ec-option-whatsapp:hover {
	box-shadow: 0 10px 24px rgba(37, 211, 102, 0.16);
}

.wacp-ec-option-invoice {
	background: var(--wacp-ec-blue-tint);
	border-color: var(--wacp-ec-blue-border);
}

.wacp-ec-option-invoice:hover {
	box-shadow: 0 10px 24px rgba(59, 95, 226, 0.14);
}

/* Feature: Recommended Payment - purely additive emphasis on top of
   whichever card (WhatsApp or any provider) is currently marked
   Recommended in Settings -> Payment Methods. Thickens the card's own
   existing border-color and adds a neutral depth ring - no new color
   is introduced, every card keeps its own established color identity. */
.wacp-ec-is-recommended {
	border-width: 2.5px;
	box-shadow: 0 0 0 3px rgba(15, 23, 19, 0.05);
}

.wacp-ec-option-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

/* ---------- Step 1: compact method-picker rows ---------- */
.wacp-ec-card-compact {
	cursor: pointer;
	padding: 12px 14px;
}

.wacp-ec-card-compact:hover,
.wacp-ec-card-compact:focus-visible {
	box-shadow: 0 4px 14px rgba(16, 24, 39, 0.08);
}

.wacp-ec-card-compact:focus-visible {
	outline: 2px solid var(--wacp-ec-blue);
	outline-offset: 1px;
}

.wacp-ec-card-compact .wacp-ec-option-head {
	margin-bottom: 0;
}

.wacp-ec-card-compact .wacp-ec-option-icon {
	width: 34px;
	height: 34px;
}

.wacp-ec-card-compact .wacp-ec-option-icon svg {
	width: 19px;
	height: 19px;
}

.wacp-ec-card-compact .wacp-ec-option-title {
	font-size: 14px;
}

/* Everything below the header row is part of the expanded (step 2)
   card only - hidden while picking a method. */
.wacp-ec-card-compact .wacp-ec-option-desc,
.wacp-ec-card-compact .wacp-ec-trust-row,
.wacp-ec-card-compact .wacp-ec-option-button {
	display: none;
}

.wacp-ec-row-chevron {
	display: none;
	flex-shrink: 0;
	color: var(--wacp-ec-muted);
	margin-left: auto;
	pointer-events: none;
}

.wacp-ec-card-compact .wacp-ec-row-chevron {
	display: block;
}

/* ---------- Step transition (subtle fade, no heavy animation) ---------- */
@keyframes wacp-ec-step-fade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wacp-ec-step-fade {
	animation: wacp-ec-step-fade 0.18s ease;
}

.wacp-ec-option-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.wacp-ec-option-whatsapp .wacp-ec-option-icon {
	background: #d9f7e4;
	color: var(--wacp-ec-green-dark);
}

.wacp-ec-option-invoice .wacp-ec-option-icon {
	background: #dde4fb;
	color: var(--wacp-ec-blue);
}

.wacp-ec-option-title-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.wacp-ec-option-title {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.005em;
}

.wacp-ec-option-whatsapp .wacp-ec-option-title {
	color: var(--wacp-ec-green-dark);
}

.wacp-ec-option-invoice .wacp-ec-option-title {
	color: var(--wacp-ec-blue-dark);
}

.wacp-ec-option-badge {
	display: inline-block;
	padding: 3px 9px;
	background: var(--wacp-ec-green-dark);
	color: #ffffff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	border-radius: 999px;
	text-transform: uppercase;
}

.wacp-ec-option-desc {
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #45524c;
}

.wacp-ec-option-invoice .wacp-ec-option-desc {
	color: #3c4566;
}

/* ---------- Option buttons ---------- */
.wacp-ec-option-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 18px;
	border: none;
	border-radius: 11px;
	font-size: 14.5px;
	font-weight: 700;
	color: #ffffff;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.wacp-ec-option-button:disabled {
	cursor: not-allowed;
	filter: saturate(0.85);
}

.wacp-ec-continue:not(.wacp-ec-continue-invoice) {
	background: linear-gradient(135deg, var(--wacp-ec-green-dark) 0%, var(--wacp-ec-green) 100%);
	box-shadow: 0 6px 16px rgba(31, 170, 89, 0.3);
}

.wacp-ec-continue:not(.wacp-ec-continue-invoice):hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(31, 170, 89, 0.38);
}

.wacp-ec-continue-invoice {
	background: linear-gradient(135deg, var(--wacp-ec-blue-dark) 0%, var(--wacp-ec-blue) 100%);
	box-shadow: 0 6px 16px rgba(59, 95, 226, 0.28);
}

.wacp-ec-continue-invoice:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(59, 95, 226, 0.36);
}

.wacp-ec-chevron {
	flex-shrink: 0;
	pointer-events: none;
	transition: transform 0.15s ease;
}

.wacp-ec-option-button:hover .wacp-ec-chevron {
	transform: translateX(2px);
}

.wacp-ec-trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0 0 16px;
}

.wacp-ec-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
}

.wacp-ec-option-whatsapp .wacp-ec-trust-item {
	color: #2c8a55;
}

.wacp-ec-option-whatsapp .wacp-ec-trust-item svg {
	color: var(--wacp-ec-green-dark);
}

.wacp-ec-option-invoice .wacp-ec-trust-item {
	color: #4458c2;
}

.wacp-ec-option-invoice .wacp-ec-trust-item svg {
	color: var(--wacp-ec-blue);
}

.wacp-ec-trust-item svg {
	flex-shrink: 0;
}

/* ---------- Divider ---------- */
.wacp-ec-divider {
	position: relative;
	text-align: center;
	height: 1px;
	background: #ebedf0;
	margin: 2px 0;
}

.wacp-ec-divider[hidden] {
	display: none !important;
}

.wacp-ec-divider span {
	position: relative;
	top: -11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 22px;
	background: #ffffff;
	border: 1px solid #ebedf0;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	color: #9aa1ab;
}

/* ---------- Invoice status message ---------- */
.wacp-ec-invoice-status {
	margin: 16px 0 0;
	padding: 14px 16px;
	border-radius: 12px;
	font-size: 13.5px;
	font-weight: 600;
	text-align: center;
}

.wacp-ec-invoice-status[hidden] {
	display: none !important;
}

.wacp-ec-invoice-status.is-success {
	background: #e7f7ed;
	color: #1a7a3c;
}

.wacp-ec-invoice-status.is-error {
	background: #fdecec;
	color: #9b1c1c;
}

/* ---------- Privacy notice (Feature 3) ---------- */
.wacp-ec-privacy-notice {
	margin: 6px 0 0;
	font-size: 11.5px;
	color: var(--wacp-ec-muted);
	line-height: 1.45;
}

/* ---------- Invoice success card (Feature 8) ---------- */
.wacp-ec-success-card {
	margin: 16px 0 0;
	padding: 14px 16px;
	border-radius: 14px;
	background: #e7f7ed;
	border: 1px solid #b6e8c6;
	text-align: center;
}

.wacp-ec-success-card[hidden] {
	display: none !important;
}

.wacp-ec-success-title {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	color: #1a7a3c;
}

.wacp-ec-success-body {
	margin: 0 0 7px;
	font-size: 13px;
	color: #22543d;
	line-height: 1.45;
}

.wacp-ec-success-email {
	display: block;
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 700;
	color: #1a7a3c;
	word-break: break-all;
}

.wacp-ec-success-spam {
	margin: 8px 0 0;
	font-size: 11.5px;
	color: #2d6a4f;
	opacity: 0.8;
}

/* ---------- Footer trust line ---------- */
.wacp-ec-footer-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 16px;
	margin: 22px 0 0;
	padding-top: 16px;
	border-top: 1px solid #f0f1f3;
}

.wacp-ec-footer-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 600;
	color: #9aa1ab;
}

.wacp-ec-footer-item svg {
	flex-shrink: 0;
	color: #b7bcc4;
}

/* ====================================================================
   Mobile (≤767px) - bottom sheet layout
   ====================================================================
   Desktop (>767px) keeps the exact centered-modal styles above,
   completely unchanged. Below this width, the same popup becomes a
   bottom sheet instead - anchored to the bottom edge, rounded top
   corners only, slides up - which is what actually solves "can't see
   both options without scrolling": it gives the content more usable
   height than a vertically-centered modal can on a short viewport, on
   top of every spacing/sizing value below being tightened.

   This threshold (767px) is deliberately the SAME one the Review step
   uses for its dedicated mobile card layout further down this file -
   every mobile-specific rule in this popup now switches at one single,
   consistent viewport width. Previously the bottom sheet, close
   button, and compact field/option sizing switched at 480px while the
   Review cards switched at 767px, so any phone in the 481-767px range
   saw a desktop-shaped dialog with mobile-stacked Review cards inside
   it - a broken hybrid. Unifying both to 767px eliminates that gap.

   No JavaScript changes anywhere in this file's scope - every existing
   interaction (close button, click-outside, Escape key, the two AJAX
   flows) is the same code, same timing, same behaviour. The drag-handle
   bar is a visual cue only (a ::before pseudo-element - no new markup),
   not a working swipe gesture; adding real drag-to-dismiss would mean
   new touch-event JavaScript, which is exactly the "popup logic" this
   redesign was asked not to touch.
*/
@media (max-width: 767px) {
	.wacp-ec-overlay {
		align-items: flex-end;
		padding: 0;
	}

	.wacp-ec-modal {
		max-width: 100%;
		max-height: 88vh;
		border-radius: 20px 20px 0 0;
		padding: 22px 16px 14px;
		animation: wacp-ec-slide-up 0.22s ease;
	}

	.wacp-ec-modal::before {
		content: "";
		position: absolute;
		top: 9px;
		left: 50%;
		width: 36px;
		height: 4px;
		margin-left: -18px;
		border-radius: 999px;
		background: #dadde1;
		pointer-events: none;
	}

	@keyframes wacp-ec-slide-up {
		from {
			opacity: 0.4;
			transform: translateY(60px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Header */
	.wacp-ec-close {
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
		font-size: 16px;
	}

	.wacp-ec-header {
		margin: 2px 30px 12px 0;
		text-align: left;
	}

	.wacp-ec-title {
		font-size: 18px;
		margin-bottom: 2px;
	}

	.wacp-ec-subtitle {
		font-size: 12.5px;
	}

	/* Customer info - compact */
	.wacp-ec-customer-info {
		padding: 12px 12px 2px;
		margin-bottom: 12px;
		border-radius: 12px;
	}

	.wacp-ec-section-label {
		font-size: 11.5px;
		margin-bottom: 10px;
	}

	.wacp-ec-field {
		margin-bottom: 10px;
	}

	.wacp-ec-field label {
		font-size: 12px;
		margin-bottom: 4px;
	}

	.wacp-ec-field input {
		box-sizing: border-box;
		min-height: 46px;
		padding: 10px 12px;
		font-size: 14px;
	}

	/* Option cards */
	.wacp-ec-options {
		gap: 10px;
	}

	.wacp-ec-option-card {
		padding: 13px 14px;
		border-radius: 14px;
	}

	.wacp-ec-option-card:hover {
		/* Hover-lift is a mouse affordance; on touch it can stick after a
		   tap and looks like a glitch, so it's switched off below this
		   width rather than fighting :hover state on touchscreens. */
		transform: none;
	}

	.wacp-ec-option-head {
		gap: 9px;
		margin-bottom: 6px;
	}

	.wacp-ec-option-icon {
		width: 32px;
		height: 32px;
	}

	.wacp-ec-option-icon svg {
		width: 17px;
		height: 17px;
	}

	.wacp-ec-option-title {
		font-size: 13.5px;
	}

	.wacp-ec-option-badge {
		font-size: 9px;
		padding: 2px 7px;
	}

	/* Visually shortened to roughly one sentence without touching the
	   underlying text (which is shared with desktop) - line-clamp trims
	   the rendered text, not the string itself. */
	.wacp-ec-option-desc {
		margin-bottom: 8px;
		font-size: 12px;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		overflow: hidden;
	}

	.wacp-ec-trust-row {
		gap: 4px 8px;
		margin-bottom: 10px;
	}

	.wacp-ec-trust-item {
		font-size: 10.5px;
	}

	.wacp-ec-option-button {
		min-height: 52px;
		padding: 10px 14px;
		font-size: 13.5px;
		border-radius: 12px;
	}

	.wacp-ec-chevron {
		width: 14px;
		height: 14px;
	}

	.wacp-ec-divider {
		margin: 0;
	}

	.wacp-ec-divider span {
		width: 24px;
		height: 20px;
		font-size: 9px;
	}

	.wacp-ec-invoice-status {
		margin-top: 10px;
		padding: 10px 12px;
		font-size: 12.5px;
	}

	/* Bottom area: one short trust line instead of the full four-item
	   row - the others stay in the DOM (so desktop is unaffected) and
	   are simply hidden at this width. */
	.wacp-ec-footer-trust {
		margin-top: 14px;
		padding-top: 12px;
		gap: 6px;
	}

	.wacp-ec-footer-item:not(:first-child) {
		display: none;
	}

	.wacp-ec-footer-item {
		font-size: 11px;
	}
}

/* Extra-narrow phones (iPhone SE / small Android, ~320-360px) */
@media (max-width: 360px) {
	.wacp-ec-modal {
		padding: 20px 13px 12px;
	}

	.wacp-ec-title {
		font-size: 17px;
	}

	.wacp-ec-option-card {
		padding: 11px 12px;
	}

	.wacp-ec-customer-info {
		padding: 10px 10px 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wacp-ec-modal,
	.wacp-ec-option-card,
	.wacp-ec-option-button,
	.wacp-ec-close,
	.wacp-ec-chevron {
		animation: none !important;
		transition: none !important;
	}
}

/* ====================================================================
   Feature 1 — Progress indicator
   ==================================================================== */

.wacp-ec-progress {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	margin: 0 0 18px;
}

.wacp-ec-progress-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 0;
	position: relative;
}

/* Connecting line between steps */
.wacp-ec-progress-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 9px;
	left: 50%;
	width: 100%;
	height: 1.5px;
	background: #e6e8ec;
}

.wacp-ec-progress-step.is-done:not(:last-child)::after,
.wacp-ec-progress-step.is-active:not(:last-child)::after {
	background: var(--wacp-ec-green, #25d366);
}

.wacp-ec-progress-dot {
	position: relative;
	z-index: 1;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #dde0e5;
	background: #ffffff;
	flex-shrink: 0;
	transition: border-color 0.2s ease, background-color 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wacp-ec-progress-step.is-active .wacp-ec-progress-dot {
	border-color: var(--wacp-ec-green, #25d366);
	background: var(--wacp-ec-green, #25d366);
}

.wacp-ec-progress-step.is-done .wacp-ec-progress-dot {
	border-color: var(--wacp-ec-green, #25d366);
	background: var(--wacp-ec-green, #25d366);
}

.wacp-ec-progress-step.is-done .wacp-ec-progress-dot::after {
	content: '';
	width: 6px;
	height: 4px;
	border-left: 1.5px solid #fff;
	border-bottom: 1.5px solid #fff;
	transform: rotate(-45deg) translate(1px, -1px);
	display: block;
}

.wacp-ec-progress-label {
	margin-top: 5px;
	font-size: 9.5px;
	font-weight: 600;
	color: #b0b6c0;
	text-align: center;
	line-height: 1.25;
	max-width: 56px;
	transition: color 0.2s ease;
}

.wacp-ec-progress-step.is-active .wacp-ec-progress-label {
	color: #1e2128;
}

.wacp-ec-progress-step.is-done .wacp-ec-progress-label {
	color: #50575e;
}

/* ====================================================================
   Feature 2 — Section context subtitle
   ==================================================================== */

.wacp-ec-section-context {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--wacp-ec-muted, #9aa1ab);
	margin-top: 3px;
	line-height: 1.4;
}

/* ====================================================================
   Feature 4 — Mobile keyboard: use dynamic viewport height so the
   popup shrinks when the soft keyboard opens instead of being obscured.
   ==================================================================== */

@supports (max-height: 1dvh) {
	@media (max-width: 767px) {
		.wacp-ec-modal {
			max-height: 88dvh;
		}
	}
}

/* Keep the close button always visible at the top of the scrollable
   modal (sticky within the overflow-y:auto modal). */
.wacp-ec-close {
	/* Existing position:absolute is fine on desktop; sticky is needed on
	   mobile where the modal itself scrolls. Both are handled by the
	   existing absolute positioning because the modal is position:relative
	   and close is at top:14px - it stays in view as long as the header
	   is the first thing visible. No change needed here. */
}

/* ====================================================================
   Feature 9 — Loading spinner (pure CSS, no images)
   ==================================================================== */

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

.wacp-ec-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: wacp-ec-spin 0.65s linear infinite;
	vertical-align: middle;
	flex-shrink: 0;
}

.wacp-ec-option-button.is-loading {
	opacity: 0.85;
	cursor: not-allowed;
}

/* ====================================================================
   Feature 8 — Success card appearance animation
   ==================================================================== */

@keyframes wacp-ec-success-appear {
	from { opacity: 0; transform: translateY(8px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.wacp-ec-success-card.is-animating {
	animation: wacp-ec-success-appear 0.35s ease forwards;
}

/* ====================================================================
   Mobile addenda
   ==================================================================== */

@media (max-width: 767px) {
	.wacp-ec-progress {
		margin: 0 0 14px;
	}

	.wacp-ec-progress-label {
		font-size: 8.5px;
		max-width: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wacp-ec-success-card.is-animating,
	.wacp-ec-spinner {
		animation: none !important;
	}
}

/* ====================================================================
   Review step — reuses existing tokens only (no new colors, spacing,
   or typography introduced; matches .wacp-ec-field / .wacp-ec-section-*
   exactly).
   ==================================================================== */

.wacp-ec-review[hidden] {
	display: none !important;
}

.wacp-ec-review-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #eef0f2;
}

.wacp-ec-review-row:last-of-type {
	border-bottom: none;
}

.wacp-ec-review-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--wacp-ec-muted);
	flex-shrink: 0;
}

.wacp-ec-review-value {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--wacp-ec-ink);
	text-align: right;
	word-break: break-word;
}

.wacp-ec-review-continue {
	margin-top: 18px;
}

/* ====================================================================
   Review step — desktop rows (default: visible).
   ==================================================================== */

.wacp-ec-review-desktop {
	display: block;
}

.wacp-ec-review-mobile {
	display: none;
}

/* ====================================================================
   Review step — dedicated mobile component (viewports below 768px).
   Consolidated into ONE compact "Order Summary" card instead of six
   separate cards, so the whole Review step fits on close to one
   screen with minimal scrolling and the Continue button stays close
   to view. Still a completely separate set of elements from the
   desktop rows above (.wacp-ec-review-mobile / .wacp-ec-review-summary-*),
   populated by the same JS data - not the same markup reflowed.
   Customer Name is intentionally omitted here (desktop keeps it,
   unchanged); Quantity is only shown when greater than 1, toggled by
   JS via the row's [hidden] attribute.
   ==================================================================== */

@media (max-width: 767px) {
	.wacp-ec-review-desktop {
		display: none;
	}

	.wacp-ec-review-mobile {
		display: block;
	}

	.wacp-ec-review-summary-card {
		background: #fafbfb;
		border: 1px solid #eef0f2;
		border-radius: 14px;
		padding: 14px 16px;
		box-sizing: border-box;
		max-width: 100%;
	}

	.wacp-ec-review-summary-header {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		font-weight: 800;
		color: var(--wacp-ec-ink);
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #e6e8ec;
	}

	.wacp-ec-review-summary-icon {
		font-size: 17px;
		line-height: 1;
		flex-shrink: 0;
	}

	.wacp-ec-review-summary-row {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding: 8px 0;
		border-bottom: 1px solid #eef0f2;
	}

	.wacp-ec-review-summary-row[hidden] {
		display: none !important;
	}

	.wacp-ec-review-summary-row-last,
	.wacp-ec-review-summary-row:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.wacp-ec-review-summary-label {
		font-size: 11.5px;
		font-weight: 700;
		color: var(--wacp-ec-muted);
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}

	.wacp-ec-review-summary-value {
		font-size: 14px;
		font-weight: 700;
		color: var(--wacp-ec-ink);
		line-height: 1.4;
		word-break: break-word;
		overflow-wrap: anywhere;
		max-width: 100%;
	}

	.wacp-ec-review {
		max-width: 100%;
		overflow-x: hidden;
	}

	/* The Review Continue button already inherits width:100% from
	   .wacp-ec-option-button on every viewport size; explicit here too. */
	.wacp-ec-review-continue {
		width: 100%;
		margin-top: 14px;
	}

	/* Step indicator stays horizontally centered and never causes the
	   modal to scroll sideways, even with the longest label
	   ("Email Sent") active on very narrow phones. */
	.wacp-ec-progress {
		justify-content: center;
		flex-wrap: nowrap;
		max-width: 100%;
	}
}