/**
 * Stepped-form chrome.
 *
 * ⚠️ EVERY RULE THAT HIDES SOMETHING IS BEHIND `.brm-q.is-stepped`, and only brm-qstep.js adds
 * that class. If the script does not run, none of these rules match, and the form renders as
 * the full list it is in the DOM. A stylesheet must never be able to hide a field on its own.
 */

.brm-q .brm-nav,
.brm-q .brm-steperr { display: none; }

.brm-q.is-stepped .brm-f { display: none; }
.brm-q.is-stepped .brm-f.is-on { display: block; animation: brm-step-in .18s ease-out; }

@keyframes brm-step-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.brm-q.is-stepped .brm-f.is-on { animation: none; }
}

.brm-q.is-stepped .brm-nav {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
}

.brm-q.is-stepped .brm-back {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	border: 1px solid #d9d4cb;
	background: #fff;
	border-radius: 10px;
	font-size: 17px; line-height: 1;
	cursor: pointer;
	color: #5a554d;
}
.brm-q.is-stepped .brm-back[hidden] { display: none; }
.brm-q.is-stepped .brm-back:hover { border-color: #b9b2a6; }

/* One continuous bar. No segments — a segmented bar can be counted, which is the thing
   this deliberately does not reveal. */
.brm-q.is-stepped .brm-bar {
	flex: 1 1 auto;
	height: 4px;
	border-radius: 2px;
	background: #e2ded6;
	overflow: hidden;
}
.brm-q.is-stepped .brm-bar i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 2px;
	background: #1d1d1b;
	transition: width .32s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
	.brm-q.is-stepped .brm-bar i { transition: none; }
}

.brm-q.is-stepped .brm-next {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 22px;
	border: 0; border-radius: 10px;
	background: #1d1d1b; color: #fff;
	font-size: 16px; font-weight: 600;
	cursor: pointer;
}
.brm-q.is-stepped .brm-next[hidden] { display: none; }
.brm-q.is-stepped .brm-next:hover { background: #333; }

/* ⚠️ THE LAST STEP MUST NOT LOOK LIKE A COMMITMENT. The submit button is restyled to match
   .brm-next exactly and moved into the nav row, so the final question reads as one more
   Continue rather than a "now you're signing up" moment. Same element, same POST — only the
   appearance and position change. */
.brm-q.is-stepped .brm-submit {
	order: 3;
	flex: 0 0 auto;
	width: auto;
	min-height: 44px;
	padding: 0 22px;
	border: 0; border-radius: 10px;
	background: #1d1d1b; color: #fff;
	font-size: 16px; font-weight: 600;
	cursor: pointer;
	margin: 0;
}
.brm-q.is-stepped .brm-submit:hover { background: #333; }
.brm-q.is-stepped .brm-submit[hidden],
.brm-q.is-stepped .brm-fine[hidden] { display: none; }
.brm-q.is-stepped .brm-fine { font-size: 13px; margin-top: 14px; }

.brm-q .brm-steperr {
	display: none;
	margin: 12px 0 0;
	color: #b32d2e;
	font-size: 15px;
}
.brm-q.is-stepped .brm-steperr:not([hidden]) { display: block; }

/* The honeypot must stay invisible and must never become a step. */
.brm-q.is-stepped .brm-hp { display: none !important; }