/* Multi-step enquiry form (Fix 07): forms with the class pp-multistep.
 * A white step card at its own width beside the section's intro: "Step n of
 * 3", a three-part progress bar, heading, device cards, Continue / Back, and
 * the inline thanks (which Gravity Forms wraps in .gform_confirmation_wrapper
 * with the form's classes). Fields keep the site's form styles. */

.gform_wrapper.pp-multistep_wrapper,
.gform_confirmation_wrapper.pp-multistep {
	--pp-step-muted: #55565a;
	--pp-step-line: #e3e3e1;

	max-width: 560px;
	padding: 32px;
	border: 1px solid var(--pp-step-line);
	border-radius: 16px;
	background-color: var(--color-white);
	color: var(--color-secondary);

	/* Step heading (an HTML field at the top of each step) */
	.pp-step-label {
		margin: 0;
		font-size: var(--text-size-xs);
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--pp-step-muted);
	}

	.pp-step-bar {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 4px;
		margin: 14px 0 26px;

		span {
			height: 2px;
			background-color: var(--pp-step-line);

			&.is-on {
				background-color: var(--color-secondary);
			}
		}
	}

	.pp-step-title {
		margin: 0;
		font-size: 24px;
		font-weight: 500;
		line-height: 1.25;
		color: var(--color-secondary);
	}

	.pp-step-sub {
		margin: 8px 0 0;
		font-size: var(--text-size-sm);
		line-height: 1.5;
		color: var(--pp-step-muted);
	}

	.gfield.pp-step-head {
		margin-bottom: 4px;
	}

	/* Device cards: the radio buttons, two to a row */
	.pp-device-cards {
		&.hidden_label > .gfield_label {
			position: absolute !important;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip: rect(0 0 0 0);
			white-space: nowrap;
		}

		.gfield_radio {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 12px;
		}

		.gchoice {
			position: relative;
			display: block;
			margin: 0;
		}

		.gfield-choice-input {
			position: absolute;
			opacity: 0;
			pointer-events: none;
		}

		.gform-field-label {
			display: block;
			width: 100%;
			height: 100%;
			max-width: none;
			margin: 0;
			padding: 14px 16px;
			border: 1px solid #d6d5d2;
			border-radius: 10px;
			font-size: var(--text-size);
			font-weight: 500;
			line-height: 1.3;
			color: var(--color-secondary);
			cursor: pointer;
			transition: var(--transition-border);

			&:hover {
				border-color: var(--color-secondary);
			}
		}

		.pp-device-card-sub {
			display: block;
			margin-top: 4px;
			font-size: var(--text-size-sm);
			font-weight: 300;
			color: var(--pp-step-muted);
		}

		.gfield-choice-input:checked + .gform-field-label {
			border-color: var(--color-secondary);
			box-shadow: inset 0 0 0 1px var(--color-secondary);
		}

		.gfield-choice-input:focus-visible + .gform-field-label {
			outline: 2px solid var(--color-secondary);
			outline-offset: 2px;
		}
	}

	/* Continue on the right; Back as a text link on the left */
	.gform_page_footer,
	.gform_footer {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-top: 28px;
		padding: 0;

		.gform_next_button,
		.gform_button {
			margin-left: auto;
		}
	}

	.pp-step-back {
		padding: 0;
		border: 0;
		background: none;
		font-size: var(--text-size-sm);
		color: var(--color-secondary);
		text-decoration: underline;
		text-underline-offset: 4px;
		cursor: pointer;

		&:before {
			content: '\2190';
			margin-right: 6px;
		}
	}

	/* Inline thanks: inside the card, not the site's black confirmation box */
	.gform_confirmation_message {
		padding: 24px 0 8px;
		border-radius: 0;
		background-color: transparent;
		color: var(--color-secondary);
	}

	.pp-enquiry-thanks {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		.pp-enquiry-tick {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 48px;
			height: 48px;
			margin-bottom: 24px;
			border-radius: 50%;
			background-color: var(--color-secondary);
			color: var(--color-white);
		}

		.pp-step-sub {
			max-width: 38ch;
		}

		.button {
			margin-top: 24px;
		}
	}
}

@media (max-width: 575px) {
	.gform_wrapper.pp-multistep_wrapper,
	.gform_confirmation_wrapper.pp-multistep {
		padding: 24px 20px;

		.pp-step-title {
			font-size: var(--text-size-md);
		}

		.pp-device-cards .gform-field-label {
			padding: 12px 14px;
			font-size: var(--text-size-sm);
		}
	}
}