/* =========================================================
   SERVICE FINDER — questionnaire (live: /support-service-finder/)
   Styling lifted from live's service-finder-quiz.css + the theme's
   answer-card rules (.wpcf7-list-item-label), rem→px converted:
   - grid ≥992px: label column 1fr (Back + progress + question),
     answers column 1.25fr; Next/Submit sits UNDER the question
     in the left column (grid-area 2/1/3/2 on live)
   - answers are grey cards: #f6f6f8, 2px #e9e9e7 border, 10px
     radius, 90px min-height, 75px left pad for the control;
     checked = #fff5f3 + orange border; checkboxes square,
     radios round with an orange dot
   - progress: 4px track hsla(12,8%,88%,.3), orange indicator
========================================================= */
.block-service-finder .service-finder__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.block-service-finder .service-finder__question { display: none; }
.block-service-finder .service-finder__question.is-active { display: block; }

.block-service-finder .service-finder__fieldset {
	border: 0;
	margin: 0;
	padding: var(--space-4) 0;
}

/* ---- left column: back / progress / question ---- */
/* Back — live's tertiary button: black label with an orange underline,
   grey (#69696a) with a grey underline when disabled */
.block-service-finder .service-finder__back {
	background: none;
	border: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 18px;
	cursor: pointer;
	color: #282829;
}
.block-service-finder .service-finder__back .c-btn__label {
	background-image: linear-gradient(transparent calc(100% - .1em), #ff6e33 .1em);
	background-repeat: no-repeat;
	padding-bottom: .1em;
}
.block-service-finder .service-finder__back[disabled] {
	color: #69696a;
	cursor: default;
}
.block-service-finder .service-finder__back[disabled] .c-btn__label {
	background-image: linear-gradient(transparent calc(100% - .1em), #a7a7a9 .1em);
}
.block-service-finder .service-finder__back .c-btn__icon svg {
	width: 17px;
	height: 17px;
	display: block;
}

/* Next / Submit — live's primary button: orange pill with a BLACK label;
   disabled = grey pill (#e2dedd) with grey (#69696a) label */
.block-service-finder .service-finder__next {
	background: #ff6e33;
	color: #282829;
	border: 0;
	border-radius: 100px;
	box-shadow: 0 0 0 1px #ff6e33, inset 0 0 0 1px #ff6e33;
	padding: .7em 1.6em;
	font-size: 18px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	transition: all .3s cubic-bezier(.4, 0, 0, 1);
}
.block-service-finder .service-finder__next .c-btn__icon { margin-left: .5em; }
.block-service-finder .service-finder__next .c-btn__icon svg {
	width: 19px;
	height: 19px;
	display: block;
	transition: transform .3s cubic-bezier(.4, 0, 0, 1);
}
.block-service-finder .service-finder__next:hover:not([disabled]),
.block-service-finder .service-finder__next:focus:not([disabled]) {
	background: transparent;
	color: #282829;
}
.block-service-finder .service-finder__next:hover:not([disabled]) .c-btn__icon svg,
.block-service-finder .service-finder__next:focus:not([disabled]) .c-btn__icon svg {
	transform: translate(8px);
}
.block-service-finder .service-finder__next[disabled] {
	background: #e2dedd;
	box-shadow: 0 0 0 1px #e2dedd, inset 0 0 0 1px #e2dedd;
	color: #69696a;
	cursor: default;
}
/* the theme's hover-sweep pseudo paints its own orange layer — our
   backgrounds handle the states, so remove it */
.block-service-finder .service-finder__next::before { content: none !important; }

.block-service-finder .service-finder__step {
	margin-top: var(--space-4);
	outline: none;
}
.block-service-finder .service-finder__step-count {
	display: block;
	font-weight: 700;
	font-size: 20px;
	margin-bottom: 0;
}
.block-service-finder .service-finder__progress-bar {
	background: hsla(12, 8%, 88%, .3);
	border-radius: 100px;
	height: 4px;
	width: 100%;
	margin: 32px 0;
	overflow: hidden;
}
.block-service-finder .service-finder__progress-indicator {
	display: block;
	background: #ff6e33;
	border-radius: 100px;
	height: 4px;
	width: 0;
	transition: width .5s cubic-bezier(.4, 0, 0, 1);
}
.block-service-finder .service-finder__fieldset legend { padding: 0; }
.block-service-finder .service-finder__q {
	display: block;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
}
.block-service-finder .service-finder__help {
	display: block;
	margin-top: 8px;
	font-size: 16px;
	font-weight: 400;
	color: #282829;
}

/* ---- answers: live's grey card choices ---- */
.block-service-finder .service-finder__input { margin-bottom: 32px; }
.block-service-finder .service-finder__choice {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 90px;
	background-color: #f6f6f8;
	border: 2px solid #e9e9e7;
	border-radius: 10px;
	padding: 15px 20px 15px 75px;
	margin-bottom: 8px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background .3s cubic-bezier(.4, 0, 0, 1), border .3s cubic-bezier(.4, 0, 0, 1);
}
.block-service-finder .service-finder__choice:hover { border-color: #000; }
.block-service-finder .service-finder__choice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
/* the control box/circle */
.block-service-finder .service-finder__choice::before {
	content: "";
	position: absolute;
	left: 25px;
	top: calc(50% - 14px);
	width: 27px;
	height: 27px;
	background-color: #fff;
	border: 2px solid #a7a7a9;
	transition: border .3s cubic-bezier(.4, 0, 0, 1);
}
/* the orange fill */
.block-service-finder .service-finder__choice::after {
	content: "";
	position: absolute;
	background-color: #ff6e33;
	opacity: 0;
	transform: scale(0);
	transition: opacity .3s cubic-bezier(.4, 0, 0, 1), transform .3s cubic-bezier(.4, 0, 0, 1);
}
/* checkboxes: square box, full-square fill */
.block-service-finder .service-finder__choice:has(input[type="checkbox"])::before { border-radius: 0; }
.block-service-finder .service-finder__choice:has(input[type="checkbox"])::after {
	border-radius: 0;
	left: 25px;
	top: calc(50% - 14px);
	width: 27px;
	height: 27px;
}
/* radios: round control, dot fill */
.block-service-finder .service-finder__choice:has(input[type="radio"])::before { border-radius: 50%; }
.block-service-finder .service-finder__choice:has(input[type="radio"])::after {
	border-radius: 50%;
	left: 30px;
	top: calc(50% - 9px);
	width: 17px;
	height: 17px;
}
/* checked state */
.block-service-finder .service-finder__choice:has(input:checked) {
	background-color: #fff5f3;
	border-color: #ff6e33;
}
.block-service-finder .service-finder__choice:has(input:checked)::before { border-color: #ff6e33; }
.block-service-finder .service-finder__choice:has(input:checked)::after { opacity: 1; transform: scale(1); }
.block-service-finder .service-finder__choice:has(input:checked):hover { border-color: #a7a7a9; }
.block-service-finder .service-finder__choice:has(input:focus-visible) { border-color: #000; }

/* ---- buttons (left column, under the question — live's grid-area 2/1/3/2) ---- */
.block-service-finder .service-finder__buttons {
	display: flex;
	align-items: center;
	gap: 16px;
	align-self: start;
}
.block-service-finder .service-finder__error {
	color: #c0392b;
	font-weight: 700;
}
.block-service-finder .service-finder__spinner {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid #f1f1f3;
	border-top-color: #ff6e33;
	animation: sf-spin .8s linear infinite;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* ---- two-column layout at lg+ (live: 1fr 1.25fr, buttons bottom-left) ---- */
@media only screen and (min-width: 992px) {
	.block-service-finder .service-finder__fieldset {
		display: grid;
		grid-template-columns: 1fr 1.25fr;
		grid-template-rows: auto 1fr;
		gap: 0;
	}
	.block-service-finder .service-finder__label {
		grid-area: 1 / 1 / 2 / 2;
		margin-right: 45px;
	}
	.block-service-finder .service-finder__input { grid-area: 1 / 2 / 3 / 3; }
	.block-service-finder .service-finder__buttons { grid-area: 2 / 1 / 3 / 2; }
}
@media only screen and (max-width: 991.98px) {
	.block-service-finder .service-finder__label { margin-bottom: var(--space-4); }
}

.block-service-finder .visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}