/*
 * [spazzio_calculator] — modern multi-step calculator.
 * Depends on _tokens.css for the design tokens & scope reset.
 */

.spz-calc {
	max-width: 1240px;
	margin: 0 auto;
}

/* ============================
 * Step indicator nav
 * ============================ */

.spz-calc__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spz-space-4);
	margin-bottom: var(--spz-space-8);
	padding-bottom: var(--spz-space-4);
	border-bottom: 1px solid var(--spz-color-border);
}

.spz-calc__steps {
	display: flex;
	gap: var(--spz-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.spz-calc__step-dot {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 13px !important;
	font-weight: 800 !important;
	color: var(--spz-color-text-muted) !important;
	background: var(--spz-color-surface-alt);
	border: 2px solid var(--spz-color-border);
	transition: all var(--spz-duration) var(--spz-ease);
}

.spz-calc__step-dot.is-completed {
	background: var(--spz-color-secondary);
	border-color: var(--spz-color-secondary);
	color: #fff !important;
}

.spz-calc__step-dot.is-active {
	background: var(--spz-color-primary);
	border-color: var(--spz-color-primary);
	color: var(--spz-color-secondary) !important;
	transform: scale(1.08);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.spz-calc__back {
	display: inline-flex !important;
	align-items: center;
	gap: var(--spz-space-2);
	padding: 9px 14px;
	background: var(--spz-color-surface) !important;
	border: 1px solid var(--spz-color-border) !important;
	border-radius: var(--spz-radius-pill);
	font-size: var(--spz-text-sm) !important;
	font-weight: 700 !important;
	color: var(--spz-color-secondary) !important;
	cursor: pointer;
	transition: all var(--spz-duration) var(--spz-ease);
}

.spz-calc__back:hover {
	border-color: var(--spz-color-secondary) !important;
	background: var(--spz-color-secondary) !important;
	color: #fff !important;
}

/* ============================
 * Steps wrapper
 * ============================ */

.spz-calc__step { display: none; }
.spz-calc__step.is-active { display: block; animation: spz-calc-fade 280ms var(--spz-ease); }

@keyframes spz-calc-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================
 * Section heads
 * ============================ */

.spz-calc__head {
	margin-bottom: var(--spz-space-8);
}

.spz-calc__head--center { text-align: center; }

.spz-calc .spz-calc__title {
	margin: var(--spz-space-2) 0 var(--spz-space-3) !important;
	font-size: clamp(28px, 3.4vw, 42px) !important;
	font-weight: 800 !important;
	color: var(--spz-color-secondary) !important;
	letter-spacing: -0.025em !important;
	line-height: 1.05 !important;
}

.spz-calc__lede {
	margin: 0 !important;
	max-width: 720px;
	color: var(--spz-color-text-soft) !important;
	font-size: var(--spz-text-md) !important;
	line-height: 1.55 !important;
}

.spz-calc__head--center .spz-calc__lede { margin-left: auto !important; margin-right: auto !important; }

/* ============================
 * Step 1 layout
 * ============================ */

.spz-calc__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
	gap: var(--spz-space-8);
	align-items: start;
}

@media (max-width: 980px) {
	.spz-calc__layout { grid-template-columns: 1fr; }
}

.spz-calc__items {
	display: grid;
	gap: var(--spz-space-6);
}

.spz-calc__field {
	display: grid;
	gap: var(--spz-space-3);
}

.spz-calc__label {
	font-size: var(--spz-text-xs) !important;
	font-weight: 700 !important;
	color: var(--spz-color-text-soft) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
}

.spz-calc__search {
	width: 100%;
	height: 46px;
	padding: 0 var(--spz-space-4);
	background: var(--spz-color-surface);
	border: 1px solid var(--spz-color-border);
	border-radius: var(--spz-radius-md);
	font-size: var(--spz-text-base) !important;
	color: var(--spz-color-text) !important;
	transition: all var(--spz-duration) var(--spz-ease);
}

.spz-calc__search:focus {
	outline: none;
	border-color: var(--spz-color-primary);
	box-shadow: 0 0 0 4px rgba(137, 190, 98, 0.15);
}

.spz-calc__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spz-space-2);
}

.spz-calc__chip {
	display: inline-flex !important;
	align-items: center;
	gap: var(--spz-space-2);
	min-height: 42px;
	padding: 0 var(--spz-space-4) !important;
	background: var(--spz-color-surface) !important;
	border: 1.5px solid var(--spz-color-border) !important;
	border-radius: var(--spz-radius-pill);
	color: var(--spz-color-text) !important;
	font-size: var(--spz-text-sm) !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: all var(--spz-duration) var(--spz-ease);
}

.spz-calc__chip:hover {
	border-color: var(--spz-color-primary) !important;
	transform: translateY(-1px);
}

.spz-calc__chip.is-active {
	background: var(--spz-color-primary) !important;
	border-color: var(--spz-color-primary) !important;
	color: var(--spz-color-secondary) !important;
}

.spz-calc__chip img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex-shrink: 0;
}

.spz-calc__list {
	display: grid;
	gap: var(--spz-space-3);
	max-height: 540px;
	overflow-y: auto;
	padding-right: var(--spz-space-2);
}

.spz-calc__list::-webkit-scrollbar { width: 8px; }
.spz-calc__list::-webkit-scrollbar-track { background: transparent; }
.spz-calc__list::-webkit-scrollbar-thumb { background: var(--spz-color-border); border-radius: 4px; }

.spz-calc__item-card {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: var(--spz-space-3);
	align-items: center;
	padding: var(--spz-space-3);
	background: var(--spz-color-surface);
	border: 1px solid var(--spz-color-border);
	border-radius: var(--spz-radius-md);
	transition: border-color var(--spz-duration) var(--spz-ease);
}

.spz-calc__item-card:hover { border-color: var(--spz-color-primary); }

.spz-calc__item-icon {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	background: var(--spz-color-surface-alt);
	border-radius: var(--spz-radius-md);
	font-size: 26px;
}

.spz-calc__item-icon img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.spz-calc .spz-calc__item-name {
	margin: 0 !important;
	font-size: var(--spz-text-base) !important;
	font-weight: 700 !important;
	color: var(--spz-color-text) !important;
	line-height: 1.2 !important;
}

.spz-calc__item-dim {
	margin: 2px 0 0 !important;
	font-size: var(--spz-text-xs) !important;
	color: var(--spz-color-text-muted) !important;
	line-height: 1.35 !important;
}

.spz-calc__qty {
	display: inline-flex !important;
	align-items: stretch !important;
	height: 40px !important;
	min-width: 116px !important;
	border: 1px solid var(--spz-color-border) !important;
	border-radius: var(--spz-radius-md) !important;
	overflow: hidden !important;
	background: var(--spz-color-surface) !important;
}

.spz-calc__qty button {
	flex: 0 0 36px !important;
	width: 36px !important;
	min-width: 36px !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	cursor: pointer;
	color: var(--spz-color-secondary) !important;
	font-family: var(--spz-font-sans) !important;
	font-size: 18px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: none !important;
	text-transform: none !important;
	transition: background var(--spz-duration) var(--spz-ease);
}

.spz-calc__qty button:hover {
	background: var(--spz-color-surface-alt) !important;
}

.spz-calc__qty span {
	flex: 1 1 auto !important;
	min-width: 40px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--spz-color-surface-alt) !important;
	font-size: var(--spz-text-sm) !important;
	font-weight: 800 !important;
	color: var(--spz-color-text) !important;
}

/* ============================
 * Cart (right column step 1)
 * ============================ */

.spz-calc__cart {
	position: sticky;
	top: var(--spz-space-6);
	display: grid;
	gap: var(--spz-space-4);
	padding: var(--spz-space-5);
	background: var(--spz-color-surface);
	border: 1px solid var(--spz-color-border);
	border-radius: var(--spz-radius-xl);
	box-shadow: var(--spz-shadow-md);
}

@media (max-width: 980px) {
	.spz-calc__cart { position: static; }
}

.spz-calc .spz-calc__cart-title {
	margin: 0 !important;
	font-size: var(--spz-text-xs) !important;
	font-weight: 700 !important;
	color: var(--spz-color-text-soft) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
}

.spz-calc__cart-list {
	display: grid;
	gap: var(--spz-space-2);
	max-height: 320px;
	overflow-y: auto;
}

.spz-calc__cart-empty {
	padding: var(--spz-space-6);
	color: var(--spz-color-text-muted);
	text-align: center;
	font-size: var(--spz-text-sm);
	background: var(--spz-color-surface-alt);
	border-radius: var(--spz-radius-md);
}

.spz-calc__cart-item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	gap: var(--spz-space-2);
	align-items: center;
	padding: var(--spz-space-2);
	background: var(--spz-color-surface-alt);
	border-radius: var(--spz-radius-md);
}

.spz-calc__cart-item .spz-calc__item-icon {
	width: 40px;
	height: 40px;
	font-size: 20px;
}

.spz-calc__cart-item .spz-calc__item-icon img {
	width: 32px;
	height: 32px;
}

.spz-calc__cart-item-name {
	font-size: var(--spz-text-sm);
	font-weight: 700;
	color: var(--spz-color-text);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spz-calc__cart-item .spz-calc__qty {
	grid-template-columns: 28px 36px 28px;
	height: 32px;
}

.spz-calc__cart-summary {
	display: grid;
	gap: var(--spz-space-2);
	padding: var(--spz-space-3);
	background: var(--spz-color-surface-alt);
	border-radius: var(--spz-radius-md);
}

.spz-calc__summary-row {
	display: flex;
	justify-content: space-between;
	gap: var(--spz-space-3);
	font-size: var(--spz-text-sm) !important;
}

.spz-calc__summary-row span { color: var(--spz-color-text-soft) !important; }
.spz-calc__summary-row strong {
	color: var(--spz-color-secondary) !important;
	font-weight: 800 !important;
}

.spz-calc__cart-actions {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: var(--spz-space-2);
}

/* ============================
 * Buttons (shared)
 * ============================ */

.spz-calc__btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: var(--spz-space-2);
	min-height: 48px;
	padding: 0 var(--spz-space-5);
	border: 0;
	border-radius: var(--spz-radius-pill);
	font-family: var(--spz-font-sans) !important;
	font-size: var(--spz-text-sm) !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em !important;
	cursor: pointer;
	transition: all var(--spz-duration) var(--spz-ease);
	text-decoration: none !important;
}

.spz-calc__btn--primary {
	background: var(--spz-color-primary) !important;
	color: var(--spz-color-secondary) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.spz-calc__btn--primary:hover:not(:disabled) {
	background: var(--spz-color-secondary) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.spz-calc__btn--ghost {
	background: var(--spz-color-surface) !important;
	border: 1px solid var(--spz-color-border) !important;
	color: var(--spz-color-secondary) !important;
}

.spz-calc__btn--ghost:hover { border-color: var(--spz-color-secondary) !important; }

.spz-calc__btn--block { width: 100%; margin-top: var(--spz-space-2); }

/* Continuar → Pedir Orçamento (active size unavailable). */
.spz-calc__btn--quote {
	background: var(--spz-color-secondary) !important;
	color: #fff !important;
}
.spz-calc__btn--quote:hover:not(:disabled) {
	background: var(--spz-color-primary) !important;
	color: var(--spz-color-secondary) !important;
}

.spz-calc__btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

/* ============================
 * Step 2 — preview
 * ============================ */

.spz-calc__visual-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
	gap: var(--spz-space-6);
	align-items: start;
}

@media (max-width: 980px) {
	.spz-calc__visual-layout { grid-template-columns: 1fr; }
}

/* ============================
 * Step 2 — image preview
 * ----------------------------------------------------------------
 * The 3D bin-packing scene was replaced with a static image picked in
 * the admin (Spazzio Hub → Calculadora). Either a custom upload or the
 * linked Space's featured image. Cross-fades when the user clicks
 * different unit options on the right.
 * ============================ */

.spz-calc__preview {
	position: relative;
	border-radius: var(--spz-radius-xl);
	background: var(--spz-color-surface-alt);
	border: 1px solid var(--spz-color-border);
	box-shadow: var(--spz-shadow-md);
	overflow: hidden;
	aspect-ratio: 16 / 11;
	margin-bottom: var(--spz-space-4);
}

/* Image preview — fades smoothly between unit images via opacity. */
.spz-calc__preview-image {
	position: relative;
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
}

.spz-calc__preview-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 320ms ease;
	opacity: 1;
}

.spz-calc__preview-image[data-loading="true"] img {
	opacity: 0;
}

.spz-calc__preview-empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-align: center;
	color: var(--spz-color-text-muted);
	padding: var(--spz-space-6);
}

.spz-calc__preview-empty p {
	margin: var(--spz-space-2) 0 0 !important;
	font-size: var(--spz-text-sm) !important;
}

.spz-calc__preview-empty[hidden] { display: none !important; }

/* ============================
 * Mobile (≤ 768px) — full responsive pass
 * ============================ */

@media (max-width: 768px) {
	/* Stack visual + recommendations vertically; preview on top */
	.spz-calc__visual-layout {
		grid-template-columns: 1fr !important;
		gap: var(--spz-space-4);
	}

	/* Slightly more square preview on phones */
	.spz-calc__preview {
		aspect-ratio: 4 / 3;
	}

	/* Step 1: cart goes below items on phones */
	.spz-calc__layout {
		grid-template-columns: 1fr !important;
	}
	.spz-calc__cart { position: static; }

	/* Choice cards stack */
	.spz-calc__choice {
		grid-template-columns: 1fr !important;
	}

	/* Form summary cards stack */
	.spz-calc__contract-summary {
		grid-template-columns: 1fr !important;
	}

	/* Header smaller on phones */
	.spz-calc .spz-calc__title {
		font-size: clamp(22px, 6vw, 28px) !important;
	}
}

/* Very small phones — compact qty controls and chips */
@media (max-width: 480px) {
	.spz-calc__qty {
		min-width: 100px !important;
	}
	.spz-calc__qty button {
		flex: 0 0 30px !important;
		width: 30px !important;
	}
	.spz-calc__chip {
		min-height: 38px;
		font-size: 13px !important;
		padding: 0 14px !important;
	}
	.spz-calc__chip img {
		width: 18px;
		height: 18px;
	}
}

/* Meter under preview */
.spz-calc__meter {
	display: grid;
	gap: var(--spz-space-2);
	padding: var(--spz-space-4);
	background: var(--spz-color-surface);
	border: 1px solid var(--spz-color-border);
	border-radius: var(--spz-radius-md);
}

.spz-calc__meter-row {
	display: flex;
	justify-content: space-between;
	font-size: var(--spz-text-sm) !important;
}

.spz-calc__meter-row span  { color: var(--spz-color-text-soft) !important; }
.spz-calc__meter-row strong { color: var(--spz-color-secondary) !important; font-weight: 800 !important; }

.spz-calc__meter-track {
	height: 10px;
	background: var(--spz-color-surface-alt);
	border-radius: var(--spz-radius-pill);
	overflow: hidden;
}

.spz-calc__meter-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--spz-color-primary), var(--spz-color-primary-dark));
	border-radius: inherit;
	transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1), background 300ms ease;
}

/* At 100% the chosen size is full — turn the meter amber so the visitor
 * reads it as "consider a larger unit" rather than "perfectly fine". */
.spz-calc__meter-fill.is-full {
	background: linear-gradient(90deg, #f0a020, #d97706);
}

/* Reduced-ceiling caution shown in the recommendations panel. */
.spz-calc__ceiling-warning {
	margin: 0 !important;
	padding: var(--spz-space-3);
	background: rgba(217, 119, 6, 0.10);
	border: 1px solid rgba(217, 119, 6, 0.35);
	border-left-width: 4px;
	border-radius: var(--spz-radius-md);
	color: #92500a !important;
	font-size: var(--spz-text-sm) !important;
	font-weight: 600 !important;
	line-height: 1.4;
}

.spz-calc__ceiling-warning[hidden] { display: none !important; }

/* Unit options panel */
.spz-calc__panel {
	display: grid;
	gap: var(--spz-space-3);
	padding: var(--spz-space-5);
	background: var(--spz-color-surface);
	border: 1px solid var(--spz-color-border);
	border-radius: var(--spz-radius-xl);
	box-shadow: var(--spz-shadow-md);
}

.spz-calc__panel-note {
	margin: 0 !important;
	padding: var(--spz-space-3);
	background: var(--spz-color-surface-alt);
	border-radius: var(--spz-radius-md);
	color: var(--spz-color-text-soft) !important;
	font-size: var(--spz-text-sm) !important;
}

.spz-calc__unit-list {
	display: grid;
	gap: var(--spz-space-2);
}

.spz-calc__unit-option {
	padding: var(--spz-space-3) var(--spz-space-4);
	background: var(--spz-color-surface);
	border: 1.5px solid var(--spz-color-border);
	border-radius: var(--spz-radius-md);
	cursor: pointer;
	transition: all var(--spz-duration) var(--spz-ease);
}

.spz-calc__unit-option:hover { border-color: var(--spz-color-primary); }

.spz-calc__unit-option.is-selected {
	border-color: var(--spz-color-primary);
	background: linear-gradient(135deg, rgba(137, 190, 98, 0.12) 0%, rgba(137, 190, 98, 0.04) 100%);
}

.spz-calc__unit-option-badge {
	display: inline-block;
	margin-bottom: 4px;
	font-size: 10px !important;
	font-weight: 800 !important;
	color: var(--spz-color-primary-dark) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
}

.spz-calc__unit-option h4 {
	margin: 0 0 4px !important;
	font-size: var(--spz-text-lg) !important;
	font-weight: 800 !important;
	color: var(--spz-color-secondary) !important;
}

.spz-calc__unit-option p {
	margin: 0 !important;
	font-size: var(--spz-text-xs) !important;
	color: var(--spz-color-text-soft) !important;
	line-height: 1.45 !important;
}

.spz-calc__unit-option-meta {
	margin-top: 4px !important;
	font-weight: 700 !important;
	color: var(--spz-color-text) !important;
}

/* Live availability line on each unit option. */
.spz-calc__unit-option-avail {
	margin-top: 6px !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--spz-text-xs) !important;
	font-weight: 700 !important;
}

.spz-calc__avail-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.spz-calc__unit-option-avail.is-available { color: #2e7d32 !important; }
.spz-calc__unit-option-avail.is-available .spz-calc__avail-dot { background: var(--spz-color-available, #2e7d32); }

.spz-calc__unit-option-avail.is-unavailable { color: #b26a00 !important; }
.spz-calc__unit-option-avail.is-unavailable .spz-calc__avail-dot { background: #e09b1a; }

.spz-calc__unit-option-avail.is-loading { color: var(--spz-color-text-muted) !important; font-weight: 600 !important; }
.spz-calc__unit-option-avail.is-loading .spz-calc__avail-dot { background: var(--spz-color-text-muted); animation: spz-calc-pulse 1.2s infinite; }

@keyframes spz-calc-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}

/* Active-promotion card above the unit picker — bold, deliberately loud
 * because this is the moment the visitor decides to commit. The data comes
 * straight from Spazzio Hub → Promoções (admin chose the discount for the
 * current month, and optionally typed a custom human-readable text). */
.spz-calc__promo-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spz-space-3);
	padding: var(--spz-space-4) var(--spz-space-4) var(--spz-space-4) calc(var(--spz-space-4) + 56px);
	margin-bottom: var(--spz-space-3);
	background: linear-gradient(135deg, var(--spz-color-secondary) 0%, #4a1659 100%);
	color: #fff;
	border-radius: var(--spz-radius-lg);
	box-shadow: 0 10px 28px rgba(94, 28, 115, 0.30);
	overflow: hidden;
	isolation: isolate;
}

.spz-calc__promo-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 95% 0%, rgba(150, 207, 36, 0.28), transparent 55%);
	pointer-events: none;
	z-index: 0;
}

.spz-calc__promo-card > * { position: relative; z-index: 1; }

.spz-calc__promo-card-burst {
	position: absolute;
	left: var(--spz-space-3);
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: var(--spz-color-primary);
	color: var(--spz-color-secondary);
	border-radius: 50%;
	font-weight: 900 !important;
	font-size: 22px !important;
	box-shadow: 0 4px 12px rgba(150, 207, 36, 0.45);
	z-index: 1;
}

.spz-calc__promo-card-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.spz-calc__promo-card-eyebrow {
	font-size: 10px !important;
	font-weight: 800 !important;
	color: var(--spz-color-primary) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
}

.spz-calc__promo-card-headline {
	font-size: var(--spz-text-base) !important;
	font-weight: 800 !important;
	color: #fff !important;
	line-height: 1.25;
}

.spz-calc__promo-card-desc {
	font-size: var(--spz-text-xs) !important;
	color: rgba(255, 255, 255, 0.78) !important;
	line-height: 1.35;
}

.spz-calc__promo-card-save {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	padding-left: var(--spz-space-3);
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.spz-calc__promo-card-save-label {
	font-size: 10px !important;
	color: rgba(255, 255, 255, 0.72) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	white-space: nowrap;
}

.spz-calc__promo-card-save-amount {
	font-size: var(--spz-text-lg) !important;
	font-weight: 800 !important;
	color: var(--spz-color-primary) !important;
	line-height: 1;
	white-space: nowrap;
}

@media (max-width: 540px) {
	.spz-calc__promo-card {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--spz-space-4);
		padding-top: calc(var(--spz-space-4) + 28px);
	}
	.spz-calc__promo-card-burst {
		left: var(--spz-space-4);
		top: var(--spz-space-3);
		transform: none;
	}
	.spz-calc__promo-card-save {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
		padding-left: 0;
		padding-top: var(--spz-space-2);
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
	}
}

/* Per-unit promo highlight: subtle tint + corner ribbon stand-in. */
.spz-calc__unit-option.has-promo {
	border-color: var(--spz-color-primary);
	box-shadow: 0 0 0 1px rgba(150, 207, 36, 0.18) inset;
}

.spz-calc__unit-option-promo-line {
	margin-top: 6px !important;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: var(--spz-text-xs) !important;
	color: var(--spz-color-text) !important;
}

.spz-calc__unit-option-promo-line strong {
	font-weight: 800 !important;
	color: var(--spz-color-primary-dark, var(--spz-color-primary)) !important;
	font-size: var(--spz-text-sm) !important;
}

.spz-calc__unit-option-promo-line s {
	color: var(--spz-color-text-muted) !important;
	opacity: 0.75;
}

.spz-calc__unit-option-promo-tag {
	padding: 2px 8px !important;
	background: var(--spz-color-primary) !important;
	color: var(--spz-color-secondary) !important;
	border-radius: var(--spz-radius-pill);
	font-size: 10px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
}

/* ============================
 * Step 3 — choice
 * ============================ */

.spz-calc__choice {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--spz-space-5);
	max-width: 900px;
	margin: 0 auto;
}

@media (max-width: 720px) {
	.spz-calc__choice { grid-template-columns: 1fr; }
}

.spz-calc__choice-card {
	display: grid !important;
	align-content: start;
	gap: var(--spz-space-3);
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	padding: var(--spz-space-8) var(--spz-space-6) !important;
	background: var(--spz-color-surface) !important;
	border: 2px solid var(--spz-color-border) !important;
	/* Sharper, more grounded — matches the small radius pattern used in the
	 * spaces form (radio cards) and info-tiles. */
	border-radius: var(--spz-radius-sm) !important;
	text-align: left !important;
	cursor: pointer;
	transition: all var(--spz-duration) var(--spz-ease);
	box-shadow: var(--spz-shadow-md);
	overflow: hidden !important;
	white-space: normal !important;
}

.spz-calc__choice-card > * {
	min-width: 0 !important;
	max-width: 100% !important;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
	word-wrap: break-word !important;
}

.spz-calc__choice-card:hover {
	border-color: var(--spz-color-primary) !important;
	transform: translateY(-4px);
	box-shadow: var(--spz-shadow-lg);
}

/* Contract card — animated "running light" border + ambient glow to draw
 * the eye, matching the promo card on the single-space page. */
.spz-calc__choice-card[data-spz-flow="contract"] {
	position: relative;
	isolation: isolate;
	background: linear-gradient(135deg, var(--spz-color-surface) 0%, rgba(137, 190, 98, 0.05) 100%) !important;
	border-color: transparent !important;
	animation: spz-calc-card-glow 3.5s ease-in-out infinite;
}

.spz-calc__choice-card[data-spz-flow="contract"]::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	background: conic-gradient(
		from var(--spz-angle, 0deg),
		transparent 0deg,
		transparent 250deg,
		rgba(137, 190, 98, 0.4) 280deg,
		var(--spz-color-primary) 305deg,
		#c2e597 320deg,
		var(--spz-color-primary) 335deg,
		transparent 360deg
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	        mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	animation: spz-rotate-angle 5s linear infinite;
}

@keyframes spz-rotate-angle {
	to { --spz-angle: 360deg; }
}

@keyframes spz-calc-card-glow {
	0%, 100% { box-shadow: var(--spz-shadow-md), 0 0 18px -4px rgba(137, 190, 98, 0.2); }
	50%      { box-shadow: var(--spz-shadow-md), 0 0 32px -2px rgba(137, 190, 98, 0.45); }
}

/* Static fallback for browsers without @property */
@supports not (background: conic-gradient(from var(--spz-angle), transparent 0deg)) {
	.spz-calc__choice-card[data-spz-flow="contract"]::before {
		background: linear-gradient(135deg, var(--spz-color-primary), transparent 55%, var(--spz-color-primary));
		animation: none;
		opacity: 0.65;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spz-calc__choice-card[data-spz-flow="contract"],
	.spz-calc__choice-card[data-spz-flow="contract"]::before { animation: none; }
}

.spz-calc__choice-icon {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, rgba(137, 190, 98, 0.22), rgba(137, 190, 98, 0.08));
	border-radius: 50%;
	font-size: 24px !important;
	font-weight: 900 !important;
	color: var(--spz-color-secondary) !important;
}

.spz-calc .spz-calc__choice-card h3 {
	margin: 0 !important;
	font-size: var(--spz-text-2xl) !important;
	font-weight: 800 !important;
	color: var(--spz-color-secondary) !important;
	letter-spacing: -0.02em !important;
}

.spz-calc__choice-card p {
	margin: 0 !important;
	font-size: var(--spz-text-md) !important;
	color: var(--spz-color-text-soft) !important;
	line-height: 1.55 !important;
}

/* ============================
 * Step 4 — WPForms embed
 * ============================ */

.spz-calc__flow-panel {
	max-width: 900px;
	margin: 0 auto;
}

.spz-calc__contract-summary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--spz-space-3);
	margin-bottom: var(--spz-space-6);
}

@media (max-width: 600px) {
	.spz-calc__contract-summary { grid-template-columns: 1fr; }
}

.spz-calc__summary-card {
	padding: var(--spz-space-4);
	background: var(--spz-color-surface);
	border: 1px solid var(--spz-color-border);
	border-radius: var(--spz-radius-md);
	box-shadow: var(--spz-shadow-xs);
}

.spz-calc__summary-card span {
	display: block;
	font-size: var(--spz-text-xs) !important;
	font-weight: 700 !important;
	color: var(--spz-color-text-soft) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	margin-bottom: 4px;
}

.spz-calc__summary-card strong {
	font-size: var(--spz-text-lg) !important;
	font-weight: 800 !important;
	color: var(--spz-color-secondary) !important;
}

.spz-calc__summary-card--promo {
	background: var(--spz-color-secondary);
	border-color: var(--spz-color-secondary);
}

.spz-calc__summary-card--promo span { color: rgba(255, 255, 255, 0.7) !important; }
.spz-calc__summary-card--promo strong { color: var(--spz-color-primary) !important; }

.spz-calc__form-wrap {
	padding: var(--spz-space-6);
	background: var(--spz-color-surface);
	border: 1px solid var(--spz-color-border);
	border-radius: var(--spz-radius-xl);
	box-shadow: var(--spz-shadow-md);
}

.spz-calc__warning {
	padding: var(--spz-space-4);
	background: #fff4e5;
	border: 1px solid #ffb96b;
	border-radius: var(--spz-radius-md);
	color: #7a3e00 !important;
	font-size: var(--spz-text-sm) !important;
	margin: 0 !important;
}

/* ============================
 * Forms zone (outside .spz-scope)
 * ------------------------------------------------------------------
 * The WPForms HTML lives in `.spz-calc-forms` which sits as a sibling
 * of the scoped calculator. By being outside the scope it gets the
 * site's normal styling (theme + WPForms native) exactly like the
 * standalone /alugar page — that was the user's reference.
 *
 * We only add a max-width and centring so it lines up with the calc
 * above. NO typography or layout overrides here — that's the point.
 * ============================ */

.spz-calc-outer {
	max-width: 1240px;
	margin: 0 auto;
}

.spz-calc-forms {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 var(--spz-space-4);
}

.spz-calc-forms[hidden] { display: none !important; }

.spz-calc-forms__panel[hidden] { display: none !important; }

.spz-calc-forms__warning {
	padding: 16px;
	background: #fff4e5;
	border: 1px solid #ffb96b;
	border-radius: 10px;
	color: #7a3e00;
	font-size: 14px;
	margin: 0;
}

/* Legacy form-wrap rules below are kept for backwards compatibility but
 * are no longer rendered by the shortcode (the form moved outside scope). */

.spz-calc__form-wrap .wpforms-container {
	max-width: 100%;
	margin: 0;
	font-family: var(--spz-font-sans) !important;
}

.spz-calc__form-wrap .wpforms-form { padding: 0; }

/* Just a bit of vertical breathing room between fields. */
.spz-calc__form-wrap .wpforms-field {
	margin-bottom: var(--spz-space-4) !important;
	padding: 0 !important;
}

/* Labels — clear hierarchy above each input. */
.spz-calc__form-wrap .wpforms-field-label,
.spz-calc__form-wrap .wpforms-field > label,
.spz-calc__form-wrap label.wpforms-field-label {
	display: block !important;
	margin: 0 0 6px !important;
	font-size: var(--spz-text-sm) !important;
	font-weight: 700 !important;
	color: var(--spz-color-text) !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.spz-calc__form-wrap .wpforms-required-label {
	color: var(--spz-color-primary-dark) !important;
}

/* Make the email-confirmation sub-row sit side by side on desktop.
 * WPForms wraps the two inputs in `.wpforms-field-row` with halves
 * inside. On wider screens we render them as a 2-col grid; on mobile
 * they stack naturally. */
.spz-calc__form-wrap .wpforms-field-row {
	display: flex !important;
	flex-wrap: wrap;
	gap: var(--spz-space-4) !important;
	margin: 0 !important;
}

.spz-calc__form-wrap .wpforms-field-row > .wpforms-field-row-block {
	flex: 1 1 240px !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Inputs / textareas / selects — Spazzio look. */
.spz-calc__form-wrap .wpforms-field input[type="text"],
.spz-calc__form-wrap .wpforms-field input[type="email"],
.spz-calc__form-wrap .wpforms-field input[type="tel"],
.spz-calc__form-wrap .wpforms-field input[type="url"],
.spz-calc__form-wrap .wpforms-field input[type="number"],
.spz-calc__form-wrap .wpforms-field input[type="date"],
.spz-calc__form-wrap .wpforms-field input[type="time"],
.spz-calc__form-wrap .wpforms-field input[type="datetime-local"],
.spz-calc__form-wrap .wpforms-field input[type="password"],
.spz-calc__form-wrap .wpforms-field textarea,
.spz-calc__form-wrap .wpforms-field select {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 46px !important;
	padding: 11px 14px !important;
	border: 1px solid var(--spz-color-border) !important;
	border-radius: var(--spz-radius-md) !important;
	background: var(--spz-color-surface) !important;
	color: var(--spz-color-text) !important;
	font-family: var(--spz-font-sans) !important;
	font-size: var(--spz-text-md) !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
}

.spz-calc__form-wrap .wpforms-field textarea {
	min-height: 110px !important;
	height: auto !important;
	resize: vertical;
}

.spz-calc__form-wrap .wpforms-field select {
	appearance: none !important;
	-webkit-appearance: none !important;
	padding-right: 36px !important;
	background-image: linear-gradient(45deg, transparent 50%, var(--spz-color-text-soft) 50%),
		linear-gradient(135deg, var(--spz-color-text-soft) 50%, transparent 50%) !important;
	background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px !important;
	background-size: 5px 5px, 5px 5px !important;
	background-repeat: no-repeat !important;
	cursor: pointer;
}

.spz-calc__form-wrap .wpforms-field input:focus,
.spz-calc__form-wrap .wpforms-field textarea:focus,
.spz-calc__form-wrap .wpforms-field select:focus {
	outline: none !important;
	border-color: var(--spz-color-primary) !important;
	box-shadow: 0 0 0 3px rgba(137, 190, 98, 0.18) !important;
}

.spz-calc__form-wrap .wpforms-field-description {
	margin-top: 4px !important;
	font-size: var(--spz-text-xs) !important;
	color: var(--spz-color-text-muted) !important;
	line-height: 1.5 !important;
}

/* Radio / checkbox lists — adapt to available width.
 * Sub-items render as cards using auto-fit grid so the "Cliente
 * particular" / "Cliente empresarial" choices appear side by side. */
.spz-calc__form-wrap .wpforms-field-radio ul,
.spz-calc__form-wrap .wpforms-field-checkbox ul {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
	gap: var(--spz-space-3) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.spz-calc__form-wrap .wpforms-field-radio li,
.spz-calc__form-wrap .wpforms-field-checkbox li {
	display: flex !important;
	align-items: center !important;
	gap: var(--spz-space-2) !important;
	margin: 0 !important;
}

.spz-calc__form-wrap .wpforms-field-radio input,
.spz-calc__form-wrap .wpforms-field-checkbox input {
	width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	accent-color: var(--spz-color-primary);
}

.spz-calc__form-wrap .wpforms-field-radio label,
.spz-calc__form-wrap .wpforms-field-checkbox label {
	font-size: var(--spz-text-md) !important;
	font-weight: 500 !important;
	color: var(--spz-color-text) !important;
	cursor: pointer;
}

/* Section dividers — visible separators between groups (Dados da Empresa,
 * Os seus dados, Duração, etc.). */
.spz-calc__form-wrap .wpforms-field-divider {
	margin: var(--spz-space-6) 0 var(--spz-space-4) !important;
	padding: 0 0 var(--spz-space-2) !important;
	border-bottom: 1px solid var(--spz-color-border) !important;
}

.spz-calc__form-wrap .wpforms-field-divider .wpforms-field-label,
.spz-calc__form-wrap .wpforms-field-divider h3 {
	margin: 0 !important;
	font-size: var(--spz-text-lg) !important;
	font-weight: 800 !important;
	color: var(--spz-color-secondary) !important;
	letter-spacing: -0.01em !important;
}

.spz-calc__form-wrap .wpforms-field-divider .wpforms-field-description {
	margin-top: 4px !important;
	color: var(--spz-color-text-soft) !important;
}

.spz-calc__form-wrap .wpforms-field-label,
.spz-calc__form-wrap .wpforms-field > label,
.spz-calc__form-wrap label.wpforms-field-label {
	display: block !important;
	margin: 0 0 6px !important;
	font-size: var(--spz-text-sm) !important;
	font-weight: 700 !important;
	color: var(--spz-color-text) !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.spz-calc__form-wrap .wpforms-required-label {
	color: var(--spz-color-primary-dark) !important;
}

.spz-calc__form-wrap .wpforms-field input[type="text"],
.spz-calc__form-wrap .wpforms-field input[type="email"],
.spz-calc__form-wrap .wpforms-field input[type="tel"],
.spz-calc__form-wrap .wpforms-field input[type="url"],
.spz-calc__form-wrap .wpforms-field input[type="number"],
.spz-calc__form-wrap .wpforms-field input[type="date"],
.spz-calc__form-wrap .wpforms-field input[type="time"],
.spz-calc__form-wrap .wpforms-field input[type="datetime-local"],
.spz-calc__form-wrap .wpforms-field input[type="password"],
.spz-calc__form-wrap .wpforms-field textarea,
.spz-calc__form-wrap .wpforms-field select {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 46px !important;
	padding: 11px 14px !important;
	border: 1px solid var(--spz-color-border) !important;
	border-radius: var(--spz-radius-md) !important;
	background: var(--spz-color-surface) !important;
	color: var(--spz-color-text) !important;
	font-family: var(--spz-font-sans) !important;
	font-size: var(--spz-text-md) !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	transition: border-color var(--spz-duration) var(--spz-ease),
				box-shadow var(--spz-duration) var(--spz-ease);
}

.spz-calc__form-wrap .wpforms-field textarea {
	min-height: 110px !important;
	height: auto !important;
	resize: vertical;
}

.spz-calc__form-wrap .wpforms-field select {
	appearance: none !important;
	-webkit-appearance: none !important;
	padding-right: 36px !important;
	background-image: linear-gradient(45deg, transparent 50%, var(--spz-color-text-soft) 50%),
		linear-gradient(135deg, var(--spz-color-text-soft) 50%, transparent 50%) !important;
	background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px !important;
	background-size: 5px 5px, 5px 5px !important;
	background-repeat: no-repeat !important;
	cursor: pointer;
}

.spz-calc__form-wrap .wpforms-field input:focus,
.spz-calc__form-wrap .wpforms-field textarea:focus,
.spz-calc__form-wrap .wpforms-field select:focus {
	outline: none !important;
	border-color: var(--spz-color-primary) !important;
	box-shadow: 0 0 0 3px rgba(137, 190, 98, 0.18) !important;
}

.spz-calc__form-wrap .wpforms-field-description {
	margin-top: 4px !important;
	font-size: var(--spz-text-xs) !important;
	color: var(--spz-color-text-muted) !important;
	line-height: 1.5 !important;
}

/* Multi-column row when WPForms uses field-medium / field-small */
.spz-calc__form-wrap .wpforms-field-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: var(--spz-space-4) !important;
}

@media (max-width: 600px) {
	.spz-calc__form-wrap .wpforms-field-row {
		grid-template-columns: 1fr !important;
	}
}

/* Radio / checkbox lists */
.spz-calc__form-wrap .wpforms-field-radio ul,
.spz-calc__form-wrap .wpforms-field-checkbox ul {
	display: grid !important;
	gap: var(--spz-space-2) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.spz-calc__form-wrap .wpforms-field-radio li,
.spz-calc__form-wrap .wpforms-field-checkbox li {
	display: flex !important;
	align-items: center !important;
	gap: var(--spz-space-2) !important;
	margin: 0 !important;
}

.spz-calc__form-wrap .wpforms-field-radio input,
.spz-calc__form-wrap .wpforms-field-checkbox input {
	width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	accent-color: var(--spz-color-primary);
}

.spz-calc__form-wrap .wpforms-field-radio label,
.spz-calc__form-wrap .wpforms-field-checkbox label {
	font-size: var(--spz-text-md) !important;
	font-weight: 500 !important;
	color: var(--spz-color-text) !important;
	cursor: pointer;
}

/* Submit button */
.spz-calc__form-wrap .wpforms-submit-container,
.spz-calc__form-wrap div[submit-container] {
	margin-top: var(--spz-space-5) !important;
	padding: 0 !important;
}

.spz-calc__form-wrap button[type="submit"],
.spz-calc__form-wrap .wpforms-submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 50px !important;
	padding: 0 var(--spz-space-6) !important;
	background: var(--spz-color-primary) !important;
	color: var(--spz-color-secondary) !important;
	border: 0 !important;
	border-radius: var(--spz-radius-pill) !important;
	font-family: var(--spz-font-sans) !important;
	font-size: var(--spz-text-sm) !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	cursor: pointer;
	transition: all var(--spz-duration) var(--spz-ease) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}

.spz-calc__form-wrap button[type="submit"]:hover,
.spz-calc__form-wrap .wpforms-submit:hover {
	background: var(--spz-color-secondary) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15) !important;
}

/* Validation messages */
.spz-calc__form-wrap .wpforms-error,
.spz-calc__form-wrap label.wpforms-error {
	margin-top: 6px !important;
	color: #c0392b !important;
	font-size: var(--spz-text-xs) !important;
	font-weight: 600 !important;
}

.spz-calc__form-wrap input.wpforms-error,
.spz-calc__form-wrap textarea.wpforms-error,
.spz-calc__form-wrap select.wpforms-error {
	border-color: #e74c3c !important;
}

.spz-calc__form-wrap .wpforms-confirmation-container-full {
	padding: var(--spz-space-5) !important;
	background: rgba(137, 190, 98, 0.12) !important;
	border: 1px solid var(--spz-color-primary) !important;
	border-radius: var(--spz-radius-md) !important;
	color: var(--spz-color-text) !important;
}