.mfa-quote {
	--mfa-pink: #e96a8d;
	--mfa-pink-dark: #d4527a;
	--mfa-pink-wash: #fff7fa;
	--mfa-text: #1f2937;
	--mfa-muted: #6b7280;
	--mfa-border: #e5e7eb;
	--mfa-error: #cf2e2e;

	max-width: 720px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--mfa-text);
}

.mfa-quote-header {
	margin-bottom: 1.5em;
}

.mfa-quote-title {
	margin: 0 0 .25em;
	font-size: 1.6em;
	color: var(--mfa-text);
}

.mfa-quote-desc {
	margin: 0;
	color: var(--mfa-muted);
}

.mfa-quote-steps {
	list-style: none;
	padding: 0;
	margin: 0 0 2em;
	display: flex;
	gap: .5em;
	counter-reset: step;
}

.mfa-quote-step {
	flex: 1;
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .6em .8em;
	border-radius: 6px;
	background: var(--mfa-pink-wash);
	color: var(--mfa-muted);
	font-size: .95em;
	border: 1px solid var(--mfa-border);
}

.mfa-quote-step.is-active,
.mfa-quote-step.is-done {
	background: var(--mfa-pink);
	color: #fff;
	border-color: var(--mfa-pink);
}

.mfa-quote-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: rgba(0, 0, 0, .06);
	font-weight: 600;
}

.mfa-quote-step.is-active .mfa-quote-step-num,
.mfa-quote-step.is-done .mfa-quote-step-num {
	background: rgba(255, 255, 255, .3);
}

.mfa-quote-page {
	display: none;
}

.mfa-quote-page.is-active {
	display: block;
}

.mfa-quote-html {
	margin-bottom: 1.25em;
	color: var(--mfa-text);
}

.mfa-quote-field {
	margin-bottom: 1.25em;
}

.mfa-quote-field[hidden] {
	display: none;
}

.mfa-quote-label {
	display: block;
	font-weight: 600;
	margin-bottom: .25em;
	color: var(--mfa-text);
}

.mfa-quote-required {
	color: var(--mfa-error);
}

.mfa-quote-desc-text {
	margin: 0 0 .4em;
	font-size: .9em;
	color: var(--mfa-muted);
}

.mfa-quote input[type="text"],
.mfa-quote input[type="email"],
.mfa-quote input[type="tel"],
.mfa-quote input[type="file"],
.mfa-quote select,
.mfa-quote textarea {
	width: 100%;
	padding: .6em .75em;
	border: 1px solid var(--mfa-border);
	border-radius: 6px;
	font: inherit;
	background: #fff;
	box-sizing: border-box;
	color: var(--mfa-text);
}

.mfa-quote input:focus,
.mfa-quote select:focus,
.mfa-quote textarea:focus {
	outline: 2px solid var(--mfa-pink);
	outline-offset: 1px;
	border-color: var(--mfa-pink);
}

.mfa-quote .has-error input,
.mfa-quote .has-error select,
.mfa-quote .has-error textarea {
	border-color: var(--mfa-error);
}

.mfa-quote-name fieldset,
.mfa-quote-name {
	border: 0;
	padding: 0;
	margin: 0;
}

.mfa-quote-name-row {
	display: flex;
	gap: 1em;
}

.mfa-quote-sublabel {
	flex: 1;
	display: block;
	font-size: .85em;
	color: var(--mfa-muted);
}

.mfa-quote-sublabel input {
	margin-top: .25em;
}

.mfa-quote-radios {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.mfa-quote-radio {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	cursor: pointer;
}

.mfa-quote-radio input[type="radio"] {
	accent-color: var(--mfa-pink);
}

.mfa-quote-nav {
	display: flex;
	gap: .75em;
	margin-top: 1.5em;
}

.mfa-quote-btn {
	padding: .75em 1.5em;
	border-radius: 6px;
	border: 0;
	background: var(--mfa-pink);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease;
}

.mfa-quote-btn:hover,
.mfa-quote-btn:focus-visible {
	background: var(--mfa-pink-dark);
}

.mfa-quote-prev {
	background: #fff;
	color: var(--mfa-text);
	border: 1px solid var(--mfa-border);
}

.mfa-quote-prev:hover,
.mfa-quote-prev:focus-visible {
	background: var(--mfa-pink-wash);
	border-color: var(--mfa-pink);
	color: var(--mfa-pink-dark);
}

.mfa-quote-errors {
	margin-top: 1em;
	color: var(--mfa-error);
	font-weight: 600;
}

.mfa-quote-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mfa-quote-confirmation {
	padding: 1.5em;
	background: var(--mfa-pink-wash);
	border: 1px solid var(--mfa-pink);
	border-radius: 8px;
	color: var(--mfa-text);
}

.mfa-quote-confirmation h5 {
	color: var(--mfa-pink-dark);
	margin-top: 0;
}

@media (max-width: 540px) {
	.mfa-quote-steps {
		flex-direction: column;
	}
	.mfa-quote-name-row {
		flex-direction: column;
	}
}