/**
 * Signature Series Platform — Order Form Wizard, Consent & Thank You
 * -------------------------------------------------------------------
 * Phase 2 M2 rewrite, built on ssp-design-system.css (loads first).
 * Styles the shared 5-step wizard used by [ssp_order_form] and
 * [ssp_manual_order_form], plus the [ssp_thank_you] page.
 *
 * Fixes (v1.9.0): a previous update left a media query unclosed,
 * which trapped the consent-box and thank-you styles inside it —
 * they only applied on screens under 600px. All styles now live at
 * the correct scope.
 *
 * Buttons: the base .ssp-btn / .ssp-btn--primary styles come from
 * the design system. This file only adds wizard-specific layout and
 * the .ssp-btn--back variant.
 *
 * @since 1.9.0
 */

/* =========================================================
   WRAPPER & BRAND
   ========================================================= */

.ssp-order-form-wrap {
	max-width: 760px;
	margin: 0 auto;
	font-family: var(--ssp-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	color: var(--ssp-ink, #1a1d1f);
}

.ssp-form-brand {
	text-align: center;
	margin-bottom: 28px;
}

.ssp-form-logo {
	max-width: 260px;
	height: auto;
}

.ssp-form-logo-fallback {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--ssp-green, #4c7d1c);
}

/* =========================================================
   PROGRESS BAR & STEP INDICATORS
   ========================================================= */

.ssp-progress {
	margin-bottom: 36px;
}

.ssp-progress-bar {
	height: 6px;
	background: var(--ssp-gray-200, #e6eaec);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 18px;
}

.ssp-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--ssp-green, #4c7d1c), var(--ssp-green-bright, #5c9526));
	border-radius: 999px;
	transition: width 0.35s var(--ssp-ease, ease);
}

.ssp-progress-steps {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ssp-progress-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1;
	text-align: center;
}

.ssp-progress-step-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ssp-white, #fff);
	border: 2px solid var(--ssp-gray-300, #d4d9db);
	color: var(--ssp-gray-500, #6b7478);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	transition: all 0.25s var(--ssp-ease, ease);
}

.ssp-progress-step-label {
	font-size: 11px;
	color: var(--ssp-gray-500, #6b7478);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	transition: color 0.25s var(--ssp-ease, ease);
}

.ssp-progress-step--active .ssp-progress-step-num {
	background: var(--ssp-green, #4c7d1c);
	border-color: var(--ssp-green, #4c7d1c);
	color: #fff;
	box-shadow: 0 0 0 4px var(--ssp-green-ring, rgba(76, 125, 28, 0.28));
}

.ssp-progress-step--active .ssp-progress-step-label {
	color: var(--ssp-ink, #1a1d1f);
}

.ssp-progress-step--done .ssp-progress-step-num {
	background: var(--ssp-green-soft, #eef5e6);
	border-color: var(--ssp-green, #4c7d1c);
	color: var(--ssp-green, #4c7d1c);
}

/* =========================================================
   STEPS & CARDS
   ========================================================= */

.ssp-step {
	display: none;
}

.ssp-step.ssp-step--active {
	display: block;
	animation: sspFadeIn 0.3s var(--ssp-ease, ease);
}

@keyframes sspFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.ssp-step-card {
	background: var(--ssp-white, #fff);
	border: 1px solid var(--ssp-gray-200, #e6eaec);
	border-radius: var(--ssp-radius-lg, 16px);
	padding: 32px;
	box-shadow: var(--ssp-shadow, 0 4px 12px rgba(16, 24, 40, 0.08));

	/* Two-column field grid — replaces the fragile inline-block
	   + nth-child layout with proper alignment. */
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
}

.ssp-step-title {
	grid-column: 1 / -1;
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
	color: var(--ssp-ink, #1a1d1f);
}

.ssp-step-subtitle {
	grid-column: 1 / -1;
	margin: 0 0 24px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ssp-gray-500, #6b7478);
}

/* =========================================================
   FIELDS
   ========================================================= */

.ssp-field {
	margin-bottom: 18px;
	min-width: 0;
}

.ssp-field--full {
	grid-column: 1 / -1;
}

.ssp-field label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--ssp-gray-700, #3f4649);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ssp-field input,
.ssp-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--ssp-gray-300, #d4d9db);
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	color: var(--ssp-ink, #1a1d1f);
	background: var(--ssp-white, #fff);
	box-sizing: border-box;
	transition: border-color 0.2s var(--ssp-ease, ease), box-shadow 0.2s var(--ssp-ease, ease);
}

.ssp-field input::placeholder,
.ssp-field textarea::placeholder {
	color: #a6adb0;
}

.ssp-field input:hover,
.ssp-field textarea:hover {
	border-color: #b8c0c3;
}

.ssp-field input:focus,
.ssp-field textarea:focus {
	outline: none;
	border-color: var(--ssp-green, #4c7d1c);
	box-shadow: 0 0 0 4px var(--ssp-green-ring, rgba(76, 125, 28, 0.28));
}

/* File inputs — upload-zone treatment, pure CSS */
.ssp-field input[type="file"] {
	padding: 14px;
	background: var(--ssp-gray-100, #f4f6f7);
	border-style: dashed;
	cursor: pointer;
}

.ssp-field input[type="file"]:hover {
	background: var(--ssp-green-soft, #eef5e6);
	border-color: var(--ssp-green, #4c7d1c);
}

.ssp-field input[type="file"]::file-selector-button {
	background: var(--ssp-white, #fff);
	border: 1px solid var(--ssp-gray-300, #d4d9db);
	border-radius: 8px;
	padding: 8px 14px;
	margin-right: 12px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	color: var(--ssp-gray-700, #3f4649);
	cursor: pointer;
	transition: all 0.2s var(--ssp-ease, ease);
}

.ssp-field input[type="file"]::file-selector-button:hover {
	border-color: var(--ssp-green, #4c7d1c);
	color: var(--ssp-green, #4c7d1c);
}

/* =========================================================
   STEP NAVIGATION
   Base button styles come from the design system; only
   layout and the Back variant live here.
   ========================================================= */

.ssp-step-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
}

.ssp-step-nav .ssp-btn--primary {
	margin-left: auto !important;
}

.ssp-btn--back,
button.ssp-btn--back {
	background: transparent !important;
	color: var(--ssp-gray-500, #6b7478) !important;
	border: 1.5px solid var(--ssp-gray-300, #d4d9db) !important;
	box-shadow: none !important;
}

.ssp-btn--back:hover,
button.ssp-btn--back:hover {
	background: var(--ssp-green-soft, #eef5e6) !important;
	border-color: var(--ssp-green, #4c7d1c) !important;
	color: var(--ssp-green, #4c7d1c) !important;
	transform: none !important;
}

/* =========================================================
   MESSAGES
   ========================================================= */

.ssp-form-message {
	padding: 20px 22px;
	border-radius: var(--ssp-radius, 12px);
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.6;
}

.ssp-form-message h3 {
	margin: 0 0 6px;
	font-size: 17px;
}

.ssp-form-message p {
	margin: 0;
}

.ssp-form-message--success {
	background: var(--ssp-green-soft, #eef5e6);
	border: 1px solid var(--ssp-green, #4c7d1c);
	color: var(--ssp-green-deep, #3f6817);
}

.ssp-form-message--error {
	background: var(--ssp-red-bg, #fee2e2);
	border: 1px solid #f1a9a9;
	color: var(--ssp-red, #b91c1c);
}

.ssp-form-message--notice {
	background: var(--ssp-blue-bg, #dbeafe);
	border: 1px solid #93c5fd;
	color: #1a3a6b;
	font-size: 13px;
}

/* =========================================================
   CONSENT BLOCK
   (Correct top-level scope — was trapped in a media query.)
   ========================================================= */

.ssp-consent-block {
	margin-top: 8px;
}

.ssp-consent-box {
	background: var(--ssp-gray-100, #f4f6f7);
	border: 1.5px solid var(--ssp-gray-200, #e6eaec);
	border-radius: var(--ssp-radius, 12px);
	padding: 16px 18px;
	transition: border-color 0.2s var(--ssp-ease, ease), background 0.2s var(--ssp-ease, ease);
}

.ssp-consent-box:hover {
	border-color: var(--ssp-gray-300, #d4d9db);
}

.ssp-consent-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 13px;
	color: var(--ssp-gray-700, #3f4649);
	line-height: 1.6;
	cursor: pointer;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}

.ssp-consent-label input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	min-width: 20px;
	border: 2px solid var(--ssp-gray-300, #d4d9db);
	border-radius: 6px;
	background: var(--ssp-white, #fff);
	cursor: pointer;
	position: relative;
	margin: 1px 0 0;
	flex-shrink: 0;
	padding: 0;
	transition: border-color 0.15s var(--ssp-ease, ease), background 0.15s var(--ssp-ease, ease);
}

.ssp-consent-label input[type="checkbox"]:checked {
	background: var(--ssp-green, #4c7d1c);
	border-color: var(--ssp-green, #4c7d1c);
}

.ssp-consent-label input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ssp-consent-label input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--ssp-green-ring, rgba(76, 125, 28, 0.28));
}

.ssp-consent-label a {
	color: var(--ssp-green, #4c7d1c);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ssp-consent-label a:hover {
	color: var(--ssp-green-deep, #3f6817);
}

/* =========================================================
   THANK YOU PAGE
   (Correct top-level scope — was trapped in a media query.)
   ========================================================= */

.ssp-thank-you {
	text-align: center;
	padding: 48px 32px;
	max-width: 480px;
	margin: 0 auto;
	background: var(--ssp-white, #fff);
	border: 1px solid var(--ssp-gray-200, #e6eaec);
	border-radius: var(--ssp-radius-lg, 16px);
	box-shadow: var(--ssp-shadow-lg, 0 12px 32px rgba(16, 24, 40, 0.12));
}

.ssp-thank-you-icon {
	width: 68px;
	height: 68px;
	line-height: 68px;
	border-radius: 50%;
	background: var(--ssp-green-soft, #eef5e6);
	color: var(--ssp-green, #4c7d1c);
	font-size: 32px;
	font-weight: 700;
	margin: 0 auto 20px;
	animation: sspPop 0.4s var(--ssp-ease, ease);
}

@keyframes sspPop {
	from { opacity: 0; transform: scale(0.6); }
	to { opacity: 1; transform: scale(1); }
}

.ssp-thank-you-title {
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 12px;
	color: var(--ssp-ink, #1a1d1f);
}

.ssp-thank-you-order-number {
	font-size: 15px;
	color: var(--ssp-gray-700, #3f4649);
	background: var(--ssp-green-soft, #eef5e6);
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	margin: 0 0 20px;
}

.ssp-thank-you-order-number strong {
	color: var(--ssp-green-deep, #3f6817);
	letter-spacing: 0.03em;
}

.ssp-thank-you-message {
	font-size: 15px;
	color: var(--ssp-gray-700, #3f4649);
	margin: 0 0 8px;
}

.ssp-thank-you-next-steps {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ssp-gray-500, #6b7478);
	margin: 0;
}

/* =========================================================
   MOBILE (properly closed this time)
   ========================================================= */

@media ( max-width: 600px ) {
	.ssp-step-card {
		grid-template-columns: 1fr;
		padding: 22px 18px;
	}

	.ssp-progress-step-label {
		display: none;
	}

	.ssp-thank-you {
		padding: 36px 20px;
	}
}

/* =========================================================
   PAYMENT REQUIRED — CTA back to the booking page
   (Corrections batch)
   ========================================================= */

.ssp-payment-required-cta {
	text-align: center;
	margin: 24px 0 8px;
}

/* =========================================================
   FILE UPLOAD PROGRESS (Corrections batch)
   Shown while the order is uploading; shimmer state while
   the server processes files after upload completes.
   ========================================================= */

.ssp-upload-progress {
	background: var(--ssp-gray-100, #f4f6f7);
	border: 1px solid var(--ssp-gray-200, #e6eaec);
	border-radius: var(--ssp-radius, 12px);
	padding: 16px 18px;
	margin: 16px 0 4px;
}

.ssp-upload-progress-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 10px;
}

.ssp-upload-progress-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ssp-gray-700, #3f4649);
}

.ssp-upload-progress-pct {
	font-size: 14px;
	font-weight: 800;
	color: var(--ssp-green, #4c7d1c);
	font-variant-numeric: tabular-nums;
}

.ssp-upload-progress-track {
	height: 8px;
	background: var(--ssp-gray-200, #e6eaec);
	border-radius: 999px;
	overflow: hidden;
}

.ssp-upload-progress-fill {
	height: 100%;
	width: 0%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ssp-green, #4c7d1c), var(--ssp-green-bright, #5c9526));
	transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Server-processing phase: upload done, waiting for order creation */
.ssp-upload-progress.is-processing .ssp-upload-progress-fill {
	background: linear-gradient(
		90deg,
		var(--ssp-green, #4c7d1c) 0%,
		var(--ssp-green-bright, #5c9526) 25%,
		var(--ssp-green, #4c7d1c) 50%,
		var(--ssp-green-bright, #5c9526) 75%,
		var(--ssp-green, #4c7d1c) 100%
	);
	background-size: 200% 100%;
	animation: sspProgressShimmer 1.4s linear infinite;
}

@keyframes sspProgressShimmer {
	from { background-position: 0% 0; }
	to { background-position: -200% 0; }
}

.ssp-upload-progress-bytes {
	margin-top: 8px;
	font-size: 12px;
	color: var(--ssp-gray-500, #6b7478);
	font-variant-numeric: tabular-nums;
}