/**
 * TNUSA multi-step wizard.
 *
 * Deliberately standalone and fully scoped under #tnusa-wizard-wrapper:
 * - stylesheets/screen.css is Compass output that has been hand-edited since
 *   the SCSS was last compiled, so nothing here should ever go in sass/.
 * - the theme loads Bootstrap + normalize + a Compass reset globally, so every
 *   rule below is explicit rather than relying on inherited defaults.
 *
 * Palette taken from sass/_color-variable.scss:
 *   $mainRed #B52022 | $mainBlue #0355A1 | $mainBlack #444
 */

#tnusa-wizard-wrapper {
	--tnusa-red: #B52022;
	--tnusa-blue: #0355A1;
	--tnusa-green: #157347;
	--tnusa-ink: #031D3A;
	--tnusa-muted: #6D6D6D;
	--tnusa-line: #C9C9C9;
	--tnusa-line-soft: #E4E4E4;
	--tnusa-error: #C0392B;

	/* Surfaces the wizard paints itself, rather than inheriting from the page. */
	--surface-card: #FFFFFF;
	--badge-quiet-bg: #EDF0F4;
	--badge-quiet-ink: #3D4654;

	max-width: 780px;
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
	font-family: 'Roboto', Arial, sans-serif;
	text-align: left;
}

#tnusa-wizard-wrapper *,
#tnusa-wizard-wrapper *:before,
#tnusa-wizard-wrapper *:after {
	box-sizing: border-box;
}

/* ---------- Handoff failure notice ---------- */

#tnusa-wizard-wrapper .wizard-handoff-error {
	max-width: 640px;
	margin: 0 auto 28px;
	padding: 18px 20px;
	border: 1px solid var(--tnusa-error);
	border-left-width: 4px;
	border-radius: 10px;
	background: #FDECEA;
	color: var(--tnusa-ink);
}

#tnusa-wizard-wrapper .wizard-handoff-error p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

#tnusa-wizard-wrapper .wizard-handoff-error p + p {
	margin-top: 8px;
}

#tnusa-wizard-wrapper .wizard-handoff-lead {
	font-weight: 600;
	color: var(--tnusa-error);
}

#tnusa-wizard-wrapper .wizard-handoff-error a {
	color: var(--tnusa-blue);
	font-weight: 600;
}

#tnusa-wizard-wrapper .wizard-handoff-code {
	color: var(--tnusa-muted);
	font-size: 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Progress bar ---------- */

.tnusa-progress-container {
	width: 100%;
	height: 6px;
	background: #F2D6D7;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 40px;
}

.tnusa-progress-bar {
	height: 100%;
	background: var(--tnusa-red);
	border-radius: 999px;
	transition: width 0.4s ease;
}

/* ---------- Back control ---------- */

#tnusa-wizard-wrapper .tnusa-wizard-nav {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	/* Reserved height so showing/hiding the button never shifts the slide. */
	min-height: 34px;
	margin-bottom: 12px;
}

#tnusa-wizard-wrapper .back-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 14px 6px 10px;
	border: 1px solid var(--tnusa-line-soft);
	border-radius: 999px;
	background: transparent;
	color: var(--tnusa-muted);
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}

#tnusa-wizard-wrapper .back-btn:hover {
	border-color: var(--tnusa-blue);
	background: #fff;
	color: var(--tnusa-blue);
}

#tnusa-wizard-wrapper .back-arrow {
	width: 8px;
	height: 8px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

/* ---------- Steps ---------- */

#tnusa-wizard-wrapper .wizard-step {
	display: none;
	animation: tnusaFadeIn 0.4s ease;
}

#tnusa-wizard-wrapper .wizard-step.active-step {
	display: flex;
	flex-direction: column;
	align-items: center;
}

@keyframes tnusaFadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Questions & headings ---------- */

#tnusa-wizard-wrapper .step-question {
	display: block;
	width: 100%;
	margin: 0 0 40px;
	padding: 0;
	color: var(--tnusa-ink);
	font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

#tnusa-wizard-wrapper .step-subheading {
	display: block;
	width: 100%;
	margin: -24px 0 24px;
	color: var(--tnusa-muted);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
}

#tnusa-wizard-wrapper .step-question-secondary {
	font-size: 22px;
	margin-bottom: 32px;
}

/* ---------- Option cards ---------- */

#tnusa-wizard-wrapper .options-grid {
	display: grid;
	grid-gap: 14px;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

#tnusa-wizard-wrapper .options-grid-compact {
	grid-template-columns: 1fr 1fr;
}

#tnusa-wizard-wrapper .selectable-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 84px;
	margin: 0;
	padding: 15px 20px;
	border: 1px solid var(--tnusa-line);
	border-radius: 16px;
	background: #fff;
	color: var(--tnusa-ink);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

#tnusa-wizard-wrapper .selectable-box.full-width {
	grid-column: 1 / -1;
}

#tnusa-wizard-wrapper .selectable-box input[type="radio"],
#tnusa-wizard-wrapper .selectable-box input[type="checkbox"] {
	display: none;
}

#tnusa-wizard-wrapper .selectable-box .box-label {
	flex: 1;
}

#tnusa-wizard-wrapper .selectable-box:hover {
	border-color: var(--tnusa-blue);
}

#tnusa-wizard-wrapper .selectable-box.selected {
	border-color: var(--tnusa-blue);
	border-width: 2px;
	font-weight: 500;
	box-shadow: 0 3px 13px rgba(3, 84, 162, 0.16);
}

/* Chevron drawn in CSS so the step needs no image assets. */
#tnusa-wizard-wrapper .chevron {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-left: 16px;
	border-right: 2px solid var(--tnusa-blue);
	border-bottom: 2px solid var(--tnusa-blue);
	transform: rotate(-45deg);
}

/* Checkbox steps get a tick box instead of a chevron. */
#tnusa-wizard-wrapper .options-grid-compact .selectable-box {
	min-height: 64px;
	justify-content: center;
	text-align: center;
}

#tnusa-wizard-wrapper .options-grid-compact .selectable-box .box-label {
	flex: 0 1 auto;
}

/* ---------- Text inputs ---------- */

#tnusa-wizard-wrapper .contact-fields,
#tnusa-wizard-wrapper .single-field {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

#tnusa-wizard-wrapper input[type="email"],
#tnusa-wizard-wrapper input[type="tel"],
#tnusa-wizard-wrapper input[type="text"] {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid #CDCDCD;
	border-radius: 0;
	background: transparent;
	color: var(--tnusa-ink);
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 20px;
	font-weight: 400;
	outline: none;
	box-shadow: none;
}

#tnusa-wizard-wrapper input[type="email"]:focus,
#tnusa-wizard-wrapper input[type="tel"]:focus,
#tnusa-wizard-wrapper input[type="text"]:focus {
	border-bottom-color: var(--tnusa-blue);
}

#tnusa-wizard-wrapper input::placeholder {
	color: #A5A3A3;
	font-size: 18px;
}

#tnusa-wizard-wrapper textarea {
	width: 100%;
	max-width: 640px;
	min-height: 96px;
	padding: 14px;
	border: 1px solid var(--tnusa-line);
	border-radius: 16px;
	background: #fff;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 16px;
	outline: none;
}

#tnusa-wizard-wrapper textarea:focus {
	border-color: var(--tnusa-blue);
}

/* ---------- Email / phone pair ---------- */

#tnusa-wizard-wrapper .contact-or {
	display: flex;
	align-items: center;
	margin: 24px 0;
}

#tnusa-wizard-wrapper .contact-or:before,
#tnusa-wizard-wrapper .contact-or:after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--tnusa-line-soft);
}

#tnusa-wizard-wrapper .contact-or span {
	padding: 0 16px;
	color: var(--tnusa-muted);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

#tnusa-wizard-wrapper .field-error {
	display: none;
	margin: 8px 0 0;
	color: var(--tnusa-error);
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}

#tnusa-wizard-wrapper .field-error.visible {
	display: block;
}

#tnusa-wizard-wrapper input.has-error {
	border-bottom-color: var(--tnusa-error);
}

/* ---------- Consent checkbox ---------- */

#tnusa-wizard-wrapper .checkbox-container {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	max-width: 640px;
	margin: 32px auto;
}

#tnusa-wizard-wrapper .checkbox-container input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--tnusa-blue);
	cursor: pointer;
}

#tnusa-wizard-wrapper .small-text {
	margin: 0;
	color: var(--tnusa-muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
}

/* ---------- Range sliders ---------- */

#tnusa-wizard-wrapper .range-container {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

#tnusa-wizard-wrapper .range-output {
	display: block;
	margin-bottom: 24px;
	color: var(--tnusa-blue);
	font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
}

#tnusa-wizard-wrapper input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #D9D5D5;
	outline: none;
	cursor: pointer;
}

#tnusa-wizard-wrapper input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 28px;
	height: 28px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--tnusa-red);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

#tnusa-wizard-wrapper input[type="range"]::-moz-range-thumb {
	width: 28px;
	height: 28px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--tnusa-red);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

#tnusa-wizard-wrapper .range-ends {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
	color: var(--tnusa-muted);
	font-size: 14px;
}

/* ---------- Buttons ---------- */

#tnusa-wizard-wrapper .btn-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 240px;
	margin: 40px auto 0;
	padding: 16px 32px;
	border: none;
	border-radius: 8px;
	background: var(--tnusa-red);
	color: #fff;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background 0.2s, opacity 0.2s;
}

#tnusa-wizard-wrapper .btn-action:hover {
	background: #92191b;
}

#tnusa-wizard-wrapper .btn-action.disabled-btn {
	background: #ccc;
	opacity: 0.7;
	cursor: not-allowed;
	pointer-events: none;
}

#tnusa-wizard-wrapper .btn-action svg {
	width: 22px;
	height: 22px;
}

#tnusa-wizard-wrapper #tnusa-employment-other-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 640px;
	margin: 24px auto 0;
}

#tnusa-wizard-wrapper #tnusa-employment-other-container .btn-action {
	margin-top: 20px;
}

/* ---------- Interstitials ---------- */

#tnusa-wizard-wrapper .interstitial-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 48px 32px;
	border: 1px solid var(--tnusa-line-soft);
	border-radius: 20px;
	background: #fff;
	text-align: center;
}

#tnusa-wizard-wrapper .interstitial-lead {
	margin: 0 0 12px;
	color: var(--tnusa-ink);
	font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.3;
}

#tnusa-wizard-wrapper .interstitial-lead strong {
	color: var(--tnusa-red);
	font-weight: 700;
}

#tnusa-wizard-wrapper .interstitial-sub {
	margin: 12px 0 0;
	color: var(--tnusa-muted);
	font-size: 17px;
	line-height: 1.6;
}

#tnusa-wizard-wrapper #tnusa-submission-message {
	margin-top: 16px;
	font-size: 15px;
}

/* ---------- Path choice (step 10) ----------
   The cards are the submit control, not a selection: one click records the
   choice and posts the lead, so they are <button>s rather than radio labels. */

#tnusa-wizard-wrapper .path-cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
}

#tnusa-wizard-wrapper .path-card {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 24px 22px;
	border: 1px solid var(--tnusa-line-soft);
	border-radius: 14px;
	background: var(--surface-card);
	box-shadow: 0 1px 3px rgba(3, 26, 58, 0.06);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.12s;
}

#tnusa-wizard-wrapper .path-card:hover {
	border-color: var(--tnusa-blue);
	box-shadow: 0 6px 20px rgba(3, 84, 162, 0.13);
}

#tnusa-wizard-wrapper .path-card:focus-visible {
	outline: 2px solid var(--tnusa-blue);
	outline-offset: 3px;
}

#tnusa-wizard-wrapper .path-card:active {
	transform: translateY(1px);
}

#tnusa-wizard-wrapper .path-card-main {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

#tnusa-wizard-wrapper .path-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

#tnusa-wizard-wrapper .path-card-title {
	color: var(--tnusa-ink);
	font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

#tnusa-wizard-wrapper .path-badge {
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

#tnusa-wizard-wrapper .path-card-talk .path-badge {
	background: var(--badge-quiet-bg);
	color: var(--badge-quiet-ink);
}

#tnusa-wizard-wrapper .path-card-start .path-badge {
	background: var(--tnusa-green);
	color: #fff;
}

#tnusa-wizard-wrapper .path-card-body,
#tnusa-wizard-wrapper .path-card-ideal {
	color: var(--tnusa-muted);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
}

#tnusa-wizard-wrapper .path-card-ideal strong {
	color: var(--tnusa-ink);
	font-weight: 600;
}

#tnusa-wizard-wrapper .path-card-cta {
	margin-top: 2px;
	font-size: 15px;
	font-weight: 600;
}

#tnusa-wizard-wrapper .path-card-talk .path-card-cta {
	color: var(--tnusa-blue);
}

#tnusa-wizard-wrapper .path-card-start .path-card-cta {
	color: var(--tnusa-green);
}

#tnusa-wizard-wrapper .path-card-chevron {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--tnusa-muted);
	border-bottom: 2px solid var(--tnusa-muted);
	transform: rotate(-45deg);
}

#tnusa-wizard-wrapper .path-card:hover .path-card-chevron {
	border-color: var(--tnusa-blue);
}

/* Posting: the clicked card says so, the other steps out of the way. */
#tnusa-wizard-wrapper .path-card.is-busy .path-card-cta:after {
	content: " \2014 processing\2026";
	font-weight: 400;
}

#tnusa-wizard-wrapper .path-cards.is-posting .path-card {
	pointer-events: none;
}

#tnusa-wizard-wrapper .path-cards.is-posting .path-card:not(.is-busy) {
	opacity: 0.45;
}

/* ---------- Trust row ---------- */

#tnusa-wizard-wrapper .trust-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
	width: 100%;
	max-width: 760px;
	margin: 28px auto 0;
	padding: 0;
	list-style: none;
}

#tnusa-wizard-wrapper .trust-row li {
	color: var(--tnusa-muted);
	font-size: 14px;
}

#tnusa-wizard-wrapper .trust-row li:before {
	content: "\2713";
	margin-right: 7px;
	color: var(--tnusa-green);
	font-weight: 600;
}

#tnusa-wizard-wrapper .trust-note {
	margin: 10px 0 0;
	color: var(--tnusa-muted);
	font-size: 13px;
	text-align: center;
}

/* ---------- Calendly ---------- */

#tnusa-wizard-wrapper #tnusa-calendly-embed {
	width: 100%;
	min-width: 320px;
	height: 700px;
	margin: 0 auto;
}

#tnusa-wizard-wrapper .step-i6 .step-question {
	margin-bottom: 12px;
}

#tnusa-wizard-wrapper .step-i6 .step-subheading {
	margin: 0 0 28px;
}

#tnusa-wizard-wrapper .calendly-loading {
	padding: 60px 20px;
	color: var(--tnusa-muted);
	font-size: 18px;
	text-align: center;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	#tnusa-wizard-wrapper .step-question {
		font-size: 24px;
		margin-bottom: 28px;
	}

	#tnusa-wizard-wrapper .step-question-secondary {
		font-size: 19px;
	}

	#tnusa-wizard-wrapper .step-subheading {
		font-size: 16px;
		margin: -16px 0 20px;
	}

	#tnusa-wizard-wrapper .selectable-box {
		min-height: 64px;
		font-size: 17px;
		padding: 12px 16px;
	}

	#tnusa-wizard-wrapper .options-grid-compact .selectable-box {
		min-height: 56px;
	}

	#tnusa-wizard-wrapper .interstitial-inner {
		padding: 32px 20px;
	}

	#tnusa-wizard-wrapper .interstitial-lead {
		font-size: 22px;
	}

	#tnusa-wizard-wrapper .range-output {
		font-size: 32px;
	}

	#tnusa-wizard-wrapper .btn-action {
		width: 100%;
		min-width: 0;
		margin-top: 28px;
	}

	#tnusa-wizard-wrapper #tnusa-calendly-embed {
		height: 900px;
	}
}

/* =====================================================================
 * OPTION ICONS
 *
 * The TaxApp wizard puts an icon on every option; this brings TNUSA into
 * line. The artwork is the theme's own icon set in assets/images/icons/ --
 * the same files the old Contact Form 7 form used for these very questions --
 * rather than the taxapp.com uploads TaxApp points at. Hotlinking another
 * domain for chrome would add a cross-origin dependency to every step and
 * has to clear this page's CSP.
 *
 * Keyed off each input's name and value rather than a modifier class on the
 * label, so the markup needs no per-option classes and a renamed value fails
 * visibly (no icon) instead of silently painting the wrong one.
 *
 * background-image with an explicit box, not content: url(), because sizing a
 * replaced pseudo-element is unreliable across browsers -- screen.css already
 * settled on this approach for the same icons.
 * ===================================================================== */

/* ---------- Full-width rows: icon inline, to the left of the label ---------- */

#tnusa-wizard-wrapper .step-5 .box-label,
#tnusa-wizard-wrapper .step-5b .box-label,
#tnusa-wizard-wrapper .step-6 .box-label,
#tnusa-wizard-wrapper .step-7a .box-label,
#tnusa-wizard-wrapper .step-9 .box-label {
	display: flex;
	align-items: center;
	gap: 16px;
}

#tnusa-wizard-wrapper .step-5 .box-label:before,
#tnusa-wizard-wrapper .step-5b .box-label:before,
#tnusa-wizard-wrapper .step-6 .box-label:before,
#tnusa-wizard-wrapper .step-7a .box-label:before,
#tnusa-wizard-wrapper .step-9 .box-label:before {
	content: '';
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Yes / No read the same on every question that asks them. */
#tnusa-wizard-wrapper input[name="has_balance"][value="yes"] + .box-label:before,
#tnusa-wizard-wrapper input[name="collection_action"][value="yes"] + .box-label:before,
#tnusa-wizard-wrapper input[name="returns_up_to_date"][value="yes"] + .box-label:before {
	background-image: url(../assets/images/icons/yes.svg);
}

#tnusa-wizard-wrapper input[name="has_balance"][value="no"] + .box-label:before,
#tnusa-wizard-wrapper input[name="collection_action"][value="no"] + .box-label:before,
#tnusa-wizard-wrapper input[name="returns_up_to_date"][value="no"] + .box-label:before {
	background-image: url(../assets/images/icons/no.svg);
}

/* "Unsure" appears on three questions and does NOT want one shared icon:
   the amount step uses the larger unsure-new.svg further down. */
#tnusa-wizard-wrapper input[name="has_balance"][value="unsure"] + .box-label:before,
#tnusa-wizard-wrapper input[name="filing_status"][value="unsure"] + .box-label:before {
	background-image: url(../assets/images/icons/unsure.svg);
}

/* ---------- Step 7A: filing status ---------- */

#tnusa-wizard-wrapper input[name="filing_status"][value="single"] + .box-label:before {
	background-image: url(../assets/images/icons/s3-1.svg);
}

#tnusa-wizard-wrapper input[name="filing_status"][value="head_of_household"] + .box-label:before {
	background-image: url(../assets/images/icons/s3-2.svg);
}

#tnusa-wizard-wrapper input[name="filing_status"][value="married_filing_separately"] + .box-label:before {
	background-image: url(../assets/images/icons/s3-3.svg);
}

#tnusa-wizard-wrapper input[name="filing_status"][value="married_filing_jointly"] + .box-label:before {
	background-image: url(../assets/images/icons/s3-4.svg);
}

/* ---------- Step 9: credit score ----------
   p-1 to p-5 are gauges running worst to best. The wizard's four buckets are
   ordered best-first and its top bucket is 740+, which spans the two highest
   gauges, so p-4 goes unused here. */

#tnusa-wizard-wrapper input[name="credit_score"][value="excellent"] + .box-label:before {
	background-image: url(../assets/images/icons/p-5.svg);
}

#tnusa-wizard-wrapper input[name="credit_score"][value="good"] + .box-label:before {
	background-image: url(../assets/images/icons/p-3.svg);
}

#tnusa-wizard-wrapper input[name="credit_score"][value="fair"] + .box-label:before {
	background-image: url(../assets/images/icons/p-2.svg);
}

#tnusa-wizard-wrapper input[name="credit_score"][value="poor"] + .box-label:before {
	background-image: url(../assets/images/icons/p-1.svg);
}

/* ---------- Step 5A: amount owed, icon stacked above the label ----------
   This step is a centred two-column grid rather than full-width rows, so the
   icon goes above the text the way the old form had it. The box needs more
   height than the compact default to fit both. */

#tnusa-wizard-wrapper .step-5a .selectable-box {
	min-height: 118px;
}

#tnusa-wizard-wrapper .step-5a .box-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

#tnusa-wizard-wrapper .step-5a .box-label:before {
	content: '';
	flex: 0 0 auto;
	width: 76px;
	height: 46px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#tnusa-wizard-wrapper input[name="amount_owed"][value="unsure"] + .box-label:before {
	background-image: url(../assets/images/icons/unsure-new.svg);
}

#tnusa-wizard-wrapper input[name="amount_owed"][value="10k_25k"] + .box-label:before {
	background-image: url(../assets/images/icons/s1-2.svg);
}

#tnusa-wizard-wrapper input[name="amount_owed"][value="25k_50k"] + .box-label:before {
	background-image: url(../assets/images/icons/s1-3.svg);
}

#tnusa-wizard-wrapper input[name="amount_owed"][value="50k_100k"] + .box-label:before {
	background-image: url(../assets/images/icons/s1-4.svg);
}

#tnusa-wizard-wrapper input[name="amount_owed"][value="100k_500k"] + .box-label:before {
	background-image: url(../assets/images/icons/s1-5.svg);
}

/* INTERIM: the $500k-$1M band is newer than this icon set, which runs s1-2 to
   s1-6 and has no seventh stack. It borrows the top one so the grid has no
   hole, which means these two bands currently look alike. Drop a seventh
   money-stack SVG in assets/images/icons/ and point this rule at it. */
#tnusa-wizard-wrapper input[name="amount_owed"][value="500k_1m"] + .box-label:before,
#tnusa-wizard-wrapper input[name="amount_owed"][value="1m_5m"] + .box-label:before {
	background-image: url(../assets/images/icons/s1-6.svg);
}

@media (max-width: 767px) {
	#tnusa-wizard-wrapper .step-5 .box-label:before,
	#tnusa-wizard-wrapper .step-5b .box-label:before,
	#tnusa-wizard-wrapper .step-6 .box-label:before,
	#tnusa-wizard-wrapper .step-7a .box-label:before,
	#tnusa-wizard-wrapper .step-9 .box-label:before {
		width: 34px;
		height: 34px;
	}

	#tnusa-wizard-wrapper .step-5 .box-label,
	#tnusa-wizard-wrapper .step-5b .box-label,
	#tnusa-wizard-wrapper .step-6 .box-label,
	#tnusa-wizard-wrapper .step-7a .box-label,
	#tnusa-wizard-wrapper .step-9 .box-label {
		gap: 12px;
	}

	#tnusa-wizard-wrapper .step-5a .selectable-box {
		min-height: 104px;
	}

	#tnusa-wizard-wrapper .step-5a .box-label:before {
		width: 60px;
		height: 38px;
	}
}