/*
 * Step Form for Bricks.
 * Colors and sizes are CSS variables so the Bricks style controls (which set them
 * on the element root) always win without specificity fights between states.
 */

.sfb {
	--sfb-accent: #2563eb;
	--sfb-error: #dc2626;

	--sfb-track: #e5e7eb;
	--sfb-fill: var(--sfb-accent);
	--sfb-bar-h: 8px;
	--sfb-bar-radius: 999px;
	--sfb-seg-gap: 6px;
	--sfb-progress-gap: 24px;
	--sfb-title-gap: 24px;

	--sfb-cols: 1;
	--sfb-opt-gap: 12px;
	--sfb-opt-bw: 2px;
	--sfb-opt-radius: 12px;
	--sfb-opt-bg: #fff;
	--sfb-opt-color: currentColor;
	--sfb-opt-border: #e5e7eb;
	--sfb-opt-hover-bg: var(--sfb-opt-bg);
	--sfb-opt-hover-color: var(--sfb-opt-color);
	--sfb-opt-hover-border: #94a3b8;
	--sfb-opt-sel-bg: #eff6ff;
	--sfb-opt-sel-color: var(--sfb-opt-color);
	--sfb-opt-sel-border: var(--sfb-accent);
	--sfb-ind: var(--sfb-opt-sel-border);

	/* Dropdown, "Other", free text and contact fields follow the answer boxes unless set separately. */
	--sfb-input-bg: var(--sfb-opt-bg);
	--sfb-input-color: var(--sfb-opt-color);
	--sfb-input-border: var(--sfb-opt-border);
	--sfb-input-focus: var(--sfb-accent);
	--sfb-input-bw: 2px;
	--sfb-input-radius: 10px;
	--sfb-field-cols: 1;

	--sfb-btn-bg: var(--sfb-accent);
	--sfb-btn-color: #fff;
	--sfb-btn-hover-bg: var(--sfb-btn-bg);
	--sfb-btn-hover-color: var(--sfb-btn-color);
	--sfb-btn-radius: 10px;
	--sfb-back-color: inherit;
	--sfb-back-hover-color: var(--sfb-accent);

	--sfb-success-bg: var(--sfb-accent);
	--sfb-success-color: #fff;

	--sfb-dur: 350ms;
	--sfb-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sfb-dist: 40px;

	position: relative;
	width: 100%;
	scroll-margin-top: 120px;
}

.sfb *,
.sfb *::before,
.sfb *::after {
	box-sizing: border-box;
}

.sfb [hidden] {
	display: none !important;
}

.sfb-empty {
	padding: 16px;
	border: 1px dashed currentColor;
	opacity: 0.6;
}

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

.sfb .sfb-progress {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: var(--sfb-progress-gap);
}

.sfb .sfb-progress--below {
	flex-direction: column-reverse;
}

.sfb .sfb-progress-meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	line-height: 1.4;
}

.sfb .sfb-progress-remaining {
	margin-left: auto;
	opacity: 0.7;
}

.sfb .sfb-progress-track {
	position: relative;
	height: var(--sfb-bar-h);
	background: var(--sfb-track);
	border-radius: var(--sfb-bar-radius);
	overflow: hidden;
}

.sfb .sfb-progress-fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--sfb-fill);
	border-radius: inherit;
	transition: width var(--sfb-dur) var(--sfb-ease);
}

.sfb .sfb-progress-track--segments {
	display: flex;
	gap: var(--sfb-seg-gap);
	background: none;
	overflow: visible;
}

.sfb .sfb-progress-seg {
	position: relative;
	flex: 1;
	background: var(--sfb-track);
	border-radius: var(--sfb-bar-radius);
	overflow: hidden;
}

.sfb .sfb-progress-seg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sfb-fill);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--sfb-dur) var(--sfb-ease);
}

.sfb .sfb-progress-seg.is-filled::after {
	transform: scaleX(1);
}

/* ---------- Title & questions ---------- */

.sfb .sfb-title {
	margin: 0 0 var(--sfb-title-gap);
}

.sfb .sfb-form {
	margin: 0;
}

.sfb .sfb-steps {
	position: relative;
}

.sfb .sfb-steps.is-animating {
	overflow: hidden;
	transition: height var(--sfb-dur) ease;
}

.sfb .sfb-question {
	margin: 0 0 8px;
}

.sfb .sfb-question:focus {
	outline: none;
}

.sfb .sfb-desc {
	margin: 0 0 4px;
	opacity: 0.75;
}

/* Accept button (consent) question */
.sfb .sfb-consent-text {
	margin-top: 16px;
	line-height: 1.6;
}

.sfb .sfb-consent-text p {
	margin: 0 0 0.75em;
}

.sfb .sfb-consent-text > :last-child {
	margin-bottom: 0;
}

.sfb .sfb-consent-text a {
	color: inherit;
	text-decoration: underline;
}

/* ---------- Answer boxes ---------- */

.sfb .sfb-options {
	display: grid;
	grid-template-columns: repeat(var(--sfb-cols), minmax(0, 1fr));
	gap: var(--sfb-opt-gap);
	margin-top: 20px;
}

.sfb .sfb-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 16px 18px;
	font: inherit;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	color: var(--sfb-opt-color);
	background: var(--sfb-opt-bg);
	border: var(--sfb-opt-bw) solid var(--sfb-opt-border);
	border-radius: var(--sfb-opt-radius);
	box-shadow: none;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.sfb .sfb-option input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

@media (hover: hover) {
	.sfb .sfb-option:hover {
		color: var(--sfb-opt-hover-color);
		background: var(--sfb-opt-hover-bg);
		border-color: var(--sfb-opt-hover-border);
	}
}

.sfb .sfb-option.is-selected {
	color: var(--sfb-opt-sel-color);
	background: var(--sfb-opt-sel-bg);
	border-color: var(--sfb-opt-sel-border);
}

.sfb .sfb-option:focus {
	outline: none;
}

.sfb .sfb-option:focus-visible,
.sfb .sfb-option:has(input:focus-visible) {
	outline: 2px solid var(--sfb-accent);
	outline-offset: 2px;
}

.sfb .sfb-option-label {
	flex: 1;
	min-width: 0;
}

.sfb .sfb-option-indicator {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 2px solid currentColor;
	border-radius: 50%;
	opacity: 0.35;
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.sfb .sfb-options--multiple .sfb-option-indicator {
	border-radius: 6px;
}

.sfb .sfb-option.is-selected .sfb-option-indicator {
	opacity: 1;
	background: var(--sfb-ind);
	border-color: var(--sfb-ind);
}

.sfb .sfb-option.is-selected .sfb-option-indicator::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
}

.sfb .sfb-options--multiple .sfb-option.is-selected .sfb-option-indicator::after {
	width: 6px;
	height: 11px;
	margin-top: -2px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	border-radius: 0;
	background: none;
	transform: rotate(45deg);
}

.sfb--no-indicator .sfb-option-indicator {
	display: none;
}

/* Click effects */
.sfb .sfb-option.sfb-fx-pop {
	animation: sfb-pop 0.32s ease;
}

.sfb .sfb-option.sfb-fx-pulse {
	animation: sfb-pulse 0.5s ease-out;
}

@keyframes sfb-pop {
	0% { transform: scale(1); }
	35% { transform: scale(0.96); }
	70% { transform: scale(1.02); }
	100% { transform: scale(1); }
}

@keyframes sfb-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sfb-opt-sel-border) 45%, transparent); }
	100% { box-shadow: 0 0 0 12px transparent; }
}

/* ---------- Inputs ---------- */

.sfb .sfb-input {
	display: block;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 14px 16px;
	font: inherit;
	line-height: 1.4;
	color: var(--sfb-input-color);
	background: var(--sfb-input-bg);
	border: var(--sfb-input-bw) solid var(--sfb-input-border);
	border-radius: var(--sfb-input-radius);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sfb .sfb-input:focus {
	outline: none;
	border-color: var(--sfb-input-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sfb-input-focus) 18%, transparent);
}

.sfb .sfb-input::placeholder {
	color: inherit;
	opacity: 0.5;
}

.sfb .sfb-select-wrap {
	position: relative;
	margin-top: 20px;
	color: var(--sfb-input-color);
}

.sfb .sfb-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 48px;
	cursor: pointer;
}

.sfb .sfb-select-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	pointer-events: none;
	opacity: 0.6;
}

.sfb .sfb-other {
	margin-top: 12px;
	animation: sfb-reveal var(--sfb-dur) var(--sfb-ease);
}

.sfb .sfb-text-wrap {
	margin-top: 20px;
}

.sfb textarea.sfb-input {
	min-height: 120px;
	resize: vertical;
}

@keyframes sfb-reveal {
	from { opacity: 0; transform: translateY(-6px); }
}

.sfb .sfb-fields {
	display: grid;
	grid-template-columns: repeat(var(--sfb-field-cols), minmax(0, 1fr));
	gap: 16px;
	margin-top: 20px;
}

.sfb .sfb-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.sfb .sfb-label {
	font-size: 14px;
	font-weight: 600;
}

.sfb .sfb-req {
	color: var(--sfb-error);
}

.sfb .sfb-field.is-invalid .sfb-input {
	border-color: var(--sfb-error);
}

.sfb .sfb-consent {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}

.sfb .sfb-consent input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--sfb-accent);
}

/* Missed consent: tinted box with a red frame drawn outside the element, so nothing shifts. */
.sfb .sfb-consent {
	border-radius: 4px;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, outline-color 0.2s ease;
	outline: 2px solid transparent;
	outline-offset: 8px;
}

.sfb .sfb-consent.is-invalid {
	color: var(--sfb-error);
	background: color-mix(in srgb, var(--sfb-error) 8%, transparent);
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--sfb-error) 8%, transparent);
	outline-color: var(--sfb-error);
}

.sfb .sfb-consent.is-invalid input {
	outline: 2px solid var(--sfb-error);
	outline-offset: 2px;
}

.sfb .sfb-consent.sfb-attention {
	animation: sfb-attention 0.5s ease;
}

@keyframes sfb-attention {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-8px); }
	40% { transform: translateX(8px); }
	60% { transform: translateX(-5px); }
	80% { transform: translateX(5px); }
}

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

.sfb .sfb-error {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--sfb-error);
}

.sfb .sfb-error:empty {
	display: none;
}

.sfb .sfb-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
}

.sfb .sfb-btn {
	appearance: none;
	margin: 0;
	font: inherit;
	line-height: 1.2;
	text-decoration: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.sfb .sfb-btn-primary {
	margin-left: auto;
	padding: 14px 28px;
	font-weight: 600;
	color: var(--sfb-btn-color);
	background: var(--sfb-btn-bg);
	border-radius: var(--sfb-btn-radius);
}

.sfb .sfb-btn-primary:hover {
	color: var(--sfb-btn-hover-color);
	background: var(--sfb-btn-hover-bg);
}

.sfb .sfb-btn-primary:active {
	transform: translateY(1px);
}

.sfb .sfb-btn-primary:disabled {
	opacity: 0.65;
	cursor: progress;
}

/* Waiting for the consent checkbox */
.sfb .sfb-btn-primary.is-locked,
.sfb .sfb-btn-primary.is-locked:hover {
	opacity: 0.4;
	cursor: not-allowed;
	color: var(--sfb-btn-color);
	background: var(--sfb-btn-bg);
	transform: none;
}

.sfb .sfb-btn:focus-visible {
	outline: 2px solid var(--sfb-accent);
	outline-offset: 2px;
}

.sfb .sfb-back {
	padding: 10px 4px;
	color: var(--sfb-back-color);
	background: none;
}

.sfb .sfb-back:hover {
	color: var(--sfb-back-hover-color);
}

.sfb--btn-left .sfb-btn-primary,
.sfb--btn-center .sfb-btn-primary {
	margin-left: 0;
}

.sfb--btn-center .sfb-nav {
	justify-content: center;
}

.sfb--btn-full .sfb-btn-primary {
	flex: 1;
	margin-left: 0;
}

/* ---------- Success ---------- */

.sfb .sfb-success {
	padding: 24px 0 8px;
	text-align: center;
}

.sfb .sfb-success:focus {
	outline: none;
}

.sfb .sfb-success-icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	color: var(--sfb-success-color);
	background: var(--sfb-success-bg);
	border-radius: 50%;
	animation: sfb-pop-in 0.45s var(--sfb-ease) both;
}

.sfb .sfb-success-icon path {
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
	animation: sfb-draw 0.4s 0.25s ease-out forwards;
}

.sfb .sfb-success-heading {
	margin: 0 0 8px;
}

.sfb .sfb-success-text > :last-child {
	margin-bottom: 0;
}

@keyframes sfb-pop-in {
	from { opacity: 0; transform: scale(0.6); }
}

@keyframes sfb-draw {
	to { stroke-dashoffset: 0; }
}

/* Honeypot: invisible to people, tempting to bots */
.sfb .sfb-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Step transitions ---------- */

.sfb .sfb-in,
.sfb .sfb-out {
	animation-duration: var(--sfb-dur);
	animation-timing-function: var(--sfb-ease);
	animation-fill-mode: both;
}

.sfb .sfb-out {
	position: absolute;
	inset: 0 0 auto 0;
	pointer-events: none;
}

.sfb[data-anim="fade"] .sfb-in { animation-name: sfb-fade-in; }
.sfb[data-anim="fade"] .sfb-out { animation-name: sfb-fade-out; }

.sfb[data-anim="slide"] .sfb-in { animation-name: sfb-slide-in; }
.sfb[data-anim="slide"] .sfb-out { animation-name: sfb-slide-out; }
.sfb[data-anim="slide"] .sfb-in.sfb-rev { animation-name: sfb-slide-in-rev; }
.sfb[data-anim="slide"] .sfb-out.sfb-rev { animation-name: sfb-slide-out-rev; }

.sfb[data-anim="slide-up"] .sfb-in { animation-name: sfb-up-in; }
.sfb[data-anim="slide-up"] .sfb-out { animation-name: sfb-up-out; }
.sfb[data-anim="slide-up"] .sfb-in.sfb-rev { animation-name: sfb-up-in-rev; }
.sfb[data-anim="slide-up"] .sfb-out.sfb-rev { animation-name: sfb-up-out-rev; }

.sfb[data-anim="zoom"] .sfb-in { animation-name: sfb-zoom-in; }
.sfb[data-anim="zoom"] .sfb-out { animation-name: sfb-zoom-out; }
.sfb[data-anim="zoom"] .sfb-in.sfb-rev { animation-name: sfb-zoom-in-rev; }
.sfb[data-anim="zoom"] .sfb-out.sfb-rev { animation-name: sfb-zoom-out-rev; }

@keyframes sfb-fade-in { from { opacity: 0; } }
@keyframes sfb-fade-out { to { opacity: 0; } }

@keyframes sfb-slide-in { from { opacity: 0; transform: translateX(var(--sfb-dist)); } }
@keyframes sfb-slide-out { to { opacity: 0; transform: translateX(calc(var(--sfb-dist) * -1)); } }
@keyframes sfb-slide-in-rev { from { opacity: 0; transform: translateX(calc(var(--sfb-dist) * -1)); } }
@keyframes sfb-slide-out-rev { to { opacity: 0; transform: translateX(var(--sfb-dist)); } }

@keyframes sfb-up-in { from { opacity: 0; transform: translateY(var(--sfb-dist)); } }
@keyframes sfb-up-out { to { opacity: 0; transform: translateY(calc(var(--sfb-dist) * -1)); } }
@keyframes sfb-up-in-rev { from { opacity: 0; transform: translateY(calc(var(--sfb-dist) * -1)); } }
@keyframes sfb-up-out-rev { to { opacity: 0; transform: translateY(var(--sfb-dist)); } }

@keyframes sfb-zoom-in { from { opacity: 0; transform: scale(0.94); } }
@keyframes sfb-zoom-out { to { opacity: 0; transform: scale(1.04); } }
@keyframes sfb-zoom-in-rev { from { opacity: 0; transform: scale(1.04); } }
@keyframes sfb-zoom-out-rev { to { opacity: 0; transform: scale(0.94); } }

@keyframes sfb-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

.sfb .sfb-shake {
	animation: sfb-shake 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.sfb *,
	.sfb *::before,
	.sfb *::after {
		animation-duration: 1ms !important;
		transition-duration: 1ms !important;
	}
}