/**
 * Sound Floors Suite — front-end styles: 4-step estimate wizard, success
 * state, spec-sheet download grid. Brand: charcoal #16181d + brand navy
 * #030460 (navy on light surfaces only), generous whitespace, condensed-bold headings.
 */

/* --- Wizard wrapper / card ---------------------------------------------- */
.sfs-rfp-wrap {
	max-width: 860px;
	margin: 0 auto;
}
/* Inside the /rfp/ sticky column the wrapper becomes a raised white card. */
.sfs-rfp-form-slot--card .sfs-rfp-wrap {
	background: #fff;
	border: 1px solid #e7e7ea;
	border-top: 5px solid #030460;
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(15, 17, 24, .10);
	padding: 20px 22px 16px;
}

/* Sticky-card mode (the two-column /rfp/ layout, ≥900px): the card never
   exceeds the viewport — fields scroll inside the active step while the
   heading/progress and the Back/Next/Submit row stay pinned and visible. */
@media (min-width: 900px) {
	.sfs-rfp__wizard-col .sfs-rfp-wrap {
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 7.75rem);
		overflow: hidden; /* nav pins inside the card; the active step scrolls, nothing renders outside */
	}
	/* Compact mode: the card must fit a laptop viewport with the button visible. */
	.sfs-rfp__wizard-col .sfs-rfp-heading { font-size: 1.2rem; margin-bottom: .2rem; }
	.sfs-rfp__wizard-col .sfs-rfp-tagline { display: none; } /* hero already says it */
	.sfs-rfp__wizard-col .sfs-progress { margin-bottom: 8px; }
	.sfs-rfp__wizard-col .sfs-progress-num { width: 20px; height: 20px; font-size: .7rem; border-width: 1.5px; }
	.sfs-rfp__wizard-col .sfs-progress-step { gap: 2px; }
	.sfs-rfp__wizard-col .sfs-progress-step:not(:first-child)::before { top: 10px; transform: translateX(-10px); }
	.sfs-rfp__wizard-col .sfs-progress-label { font-size: .6rem; }
	.sfs-rfp__wizard-col .sfs-field { margin-bottom: 6px; }
	.sfs-rfp__wizard-col .sfs-field label { margin-bottom: 2px; font-size: .78rem; }
	.sfs-rfp__wizard-col .sfs-field input[type="text"],
	.sfs-rfp__wizard-col .sfs-field input[type="email"],
	.sfs-rfp__wizard-col .sfs-field input[type="tel"],
	.sfs-rfp__wizard-col .sfs-field input[type="date"],
	.sfs-rfp__wizard-col .sfs-field select {
		padding: 8px 11px;
		font-size: .9rem;
	}
	.sfs-rfp__wizard-col .sfs-field textarea { padding: 8px 11px; font-size: .9rem; }
	.sfs-rfp__wizard-col .sfs-msd-toggle { padding: 8px 11px; font-size: .9rem; }
	.sfs-rfp__wizard-col .sfs-msd-panel { max-height: 150px; }
	.sfs-rfp__wizard-col .sfs-msd-panel .sfs-check { padding: 6px 9px; font-size: .85rem; }
	.sfs-rfp__wizard-col .sfs-step-nav { padding-top: 8px; }
	.sfs-rfp__wizard-col .sfs-step-nav .sfs-next,
	.sfs-rfp__wizard-col .sfs-step-nav [type="submit"] { padding: 10px 18px; }
	.sfs-rfp__wizard-col .sfs-wizard {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}
	.sfs-rfp__wizard-col .sfs-step.is-active {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		/* The scroll container clips anything outside its padding box — give
		   the 1.5px borders and the 3px focus ring room on every edge, with
		   negative margins compensating so the fields keep their exact
		   visual position (right side keeps the extra 4px scrollbar gap). */
		padding: 3px 8px 3px 4px;
		margin: -3px -4px 0;
	}
	.sfs-rfp__wizard-col .sfs-step-nav {
		flex-shrink: 0;
		padding-top: 10px;
		border-top: 1px solid #eeeef1;
	}
}
.sfs-rfp-heading {
	font-size: clamp(1.35rem, 3vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -.01em;
	color: #16181d;
	margin: 0 0 .35rem;
}
.sfs-rfp-tagline {
	color: #5a5e68;
	font-size: .9rem;
	line-height: 1.5;
	margin: 0 0 .7rem;
}
.sfs-rfp-guarantee {
	background: #eef0f8;
	border-left: 4px solid #030460;
	padding: 14px 18px;
	border-radius: 0 10px 10px 0;
	color: #3a3d44;
	font-size: .96rem;
	line-height: 1.55;
	margin: 0 0 1.6rem;
}
.sfs-rfp-guarantee a { color: #030460; font-weight: 700; text-decoration: none; }

/* Screen-reader-only fallback (theme also defines .screen-reader-text). */
.sfs-rfp-wrap .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* --- Step progress indicator -------------------------------------------- */
.sfs-progress {
	display: flex;
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}
.sfs-progress-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	position: relative;
}
.sfs-progress-step:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 13px;
	right: 50%;
	width: 100%;
	height: 2px;
	background: #e2e2e6;
	transform: translateX(-14px);
	z-index: 0;
}
.sfs-progress-step.is-done:not(:first-child)::before,
.sfs-progress-step.is-active:not(:first-child)::before { background: #030460; }
.sfs-progress-num {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	border: 2px solid #dcdce0;
	background: #fff;
	color: #7a7d85;
	font-size: .8rem;
	font-weight: 800;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.sfs-progress-step.is-active .sfs-progress-num {
	border-color: #030460;
	background: #030460;
	color: #fff;
}
.sfs-progress-step.is-done .sfs-progress-num {
	border-color: #030460;
	background: #fff;
	color: #030460;
}
.sfs-progress-label {
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #8b8e96;
}
.sfs-progress-step.is-active .sfs-progress-label,
.sfs-progress-step.is-done .sfs-progress-label { color: #030460; }

/* --- Step panels + slide transition -------------------------------------- */
.sfs-step {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
.sfs-step.is-active { animation: sfs-slide-next .28s ease both; }
.sfs-step.is-active.is-back { animation-name: sfs-slide-back; }
@keyframes sfs-slide-next {
	from { opacity: 0; transform: translateX(26px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes sfs-slide-back {
	from { opacity: 0; transform: translateX(-26px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* --- Step nav (Back / Next / Submit) -------------------------------------- */
.sfs-step-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
}
.sfs-step-nav .sfs-next,
.sfs-step-nav [type="submit"] { margin-left: auto; }
.sfs-back {
	background: none;
	border: 0;
	color: #5a5e68;
	font-size: .9rem;
	font-weight: 700;
	padding: 10px 6px;
	cursor: pointer;
}
.sfs-back:hover { color: #030460; }

/* --- Honeypot: invisible to humans, present for bots -------------------- */
.sfs-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Fieldsets & grid --------------------------------------------------- */
.sfs-fieldset {
	border: 1px solid #e7e7ea;
	border-radius: 14px;
	padding: 20px 22px 14px;
	margin: 0 0 22px;
	background: #fff;
}
.sfs-fieldset legend {
	font-size: .8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #030460;
	padding: 0 8px;
}
.sfs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 4px 20px;
}
.sfs-grid--pair {
	grid-template-columns: 1fr 1fr;
	gap: 4px 14px;
}
/* City / State / ZIP on one compact row (project-address block). */
.sfs-grid--csz {
	grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 8px;
}
/* One tight address unit: small gap between the street input and the row. */
.sfs-addr .sfs-grid--csz { margin-top: 6px; }
.sfs-field { margin: 0 0 8px; }
/* Neutralize the theme's baseline input margin inside the wizard card.
   ID-anchored: front.css loads BEFORE the theme's main.css, so the theme's
   equal-specificity `.sfs-rfp-form-slot input[type=…] { margin-bottom: 1rem }`
   would otherwise win the cascade and add ~16px of phantom air under every
   input (the real culprit behind the "too much vertical space" feedback). */
#sfs-rfp .sfs-field input,
#sfs-rfp .sfs-field select,
#sfs-rfp .sfs-field textarea,
.sfs-rfp-wrap .sfs-field input,
.sfs-rfp-wrap .sfs-field select,
.sfs-rfp-wrap .sfs-field textarea { margin-bottom: 0; }
/* Textareas: as inline-blocks they sit on the parent's text baseline, which
   wastes ~6px of line-height strut BELOW the box and leaves only the label's
   2px margin ABOVE it — so the navy focus border + 3px ring strike through
   the label text. display:block opts out of baseline layout entirely; the
   3px top margin is real clearance for the focus ring. */
#sfs-rfp .sfs-field textarea,
.sfs-rfp-wrap .sfs-field textarea {
	display: block;
	margin: 3px 0 0;
}
.sfs-field-wide { grid-column: 1 / -1; }
.sfs-field label,
.sfs-label {
	display: block;
	font-size: .85rem;
	font-weight: 700;
	color: #24262c;
	margin-bottom: 5px;
}
.sfs-req { color: #030460; }
.sfs-hint { font-weight: 400; color: #7a7d85; font-size: .8rem; }

.sfs-field input[type="text"],
.sfs-field input[type="email"],
.sfs-field input[type="tel"],
.sfs-field input[type="date"],
.sfs-field select,
.sfs-field textarea {
	width: 100%;
	border: 1.5px solid #dcdce0;
	border-radius: 10px;
	padding: 11px 13px;
	font-size: .95rem;
	color: #16181d;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}
.sfs-field input:focus,
.sfs-field select:focus,
.sfs-field textarea:focus {
	outline: none;
	border-color: #030460;
	box-shadow: 0 0 0 3px rgba(3, 4, 96, .12);
}
.sfs-field input[type="file"] {
	width: 100%;
	font-size: .9rem;
	padding: 10px;
	border: 1.5px dashed #c9c9cf;
	border-radius: 10px;
	background: #fafafb;
}

/* --- Services multi-select dropdown --------------------------------------
   A button styled like a select; the panel drops over the content below it
   with its own internal scroll so it never blows the card height. */
.sfs-msd { position: relative; }
.sfs-msd-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	border: 1.5px solid #dcdce0;
	border-radius: 10px;
	padding: 11px 13px;
	font-size: .95rem;
	font-weight: 400;
	color: #16181d;
	background: #fff;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}
.sfs-msd-toggle:focus {
	outline: none;
	border-color: #030460;
	box-shadow: 0 0 0 3px rgba(3, 4, 96, .12);
}
.sfs-msd-toggle[aria-expanded="true"] { border-color: #030460; }
.sfs-msd-value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sfs-msd-value.is-placeholder { color: #7a7d85; }
.sfs-msd-caret { color: #7a7d85; flex-shrink: 0; font-size: .8em; }
.sfs-msd-toggle[aria-expanded="true"] .sfs-msd-caret { color: #030460; }
.sfs-msd-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	z-index: 40;
	background: #fff;
	border: 1.5px solid #dcdce0;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(15, 17, 24, .16);
	padding: 6px;
	max-height: 190px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.sfs-msd-panel .sfs-check {
	border: 0;
	border-radius: 8px;
	padding: 8px 10px;
}
.sfs-msd-panel .sfs-check:hover { background: #f2f3fa; }

/* --- Service checkboxes -------------------------------------------------- */
.sfs-checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 8px;
	margin-bottom: 14px;
}
.sfs-checks--stack { grid-template-columns: 1fr; }
.sfs-check {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1.5px solid #e2e2e6;
	border-radius: 10px;
	padding: 10px 13px;
	font-size: .9rem;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.sfs-check:hover { border-color: #030460; background: #f2f3fa; }
.sfs-check input { accent-color: #030460; width: 17px; height: 17px; flex-shrink: 0; }

/* --- Submit / Next buttons ----------------------------------------------- */
.sfs-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sfs-submit {
	background: #030460;
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: .01em;
	padding: 14px 34px;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 4px 14px rgba(3, 4, 96, .25);
}
.sfs-submit:hover { background: #1e1f8f; transform: translateY(-1px); }
.sfs-submit:disabled { opacity: .6; cursor: default; transform: none; }
.sfs-wizard .sfs-submit { padding: 12px 26px; font-size: .98rem; }
.sfs-form-msg { display: block; margin-top: 10px; font-size: .9rem; color: #4a4d55; }
.sfs-form-msg.sfs-msg-error { color: #c22f2f; font-weight: 600; }
.sfs-form-msg:empty { display: none; }

/* --- Success state -------------------------------------------------------- */
.sfs-success {
	background: #fff;
	border: 1px solid #e7e7ea;
	border-top: 5px solid #030460;
	border-radius: 14px;
	padding: 28px 30px;
	animation: sfs-fade-up .35s ease both;
}
.sfs-success h3 { margin: 0 0 .6rem; font-size: 1.4rem; font-weight: 800; color: #16181d; }
.sfs-success ol { margin: .4rem 0 1rem; padding-left: 1.3rem; line-height: 1.7; }
.sfs-success a { color: #030460; font-weight: 700; text-decoration: none; }
@keyframes sfs-fade-up {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Spec-sheet download grid --------------------------------------------- */
.sfs-spec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
	margin: 1.4rem 0;
}
.sfs-spec-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: #fff;
	border: 1.5px solid #e7e7ea;
	border-radius: 14px;
	padding: 18px;
	text-decoration: none;
	color: #16181d;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sfs-spec-card:hover {
	border-color: #030460;
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(22, 24, 29, .1);
}
.sfs-spec-icon { color: #030460; }
.sfs-spec-name { font-weight: 700; font-size: .95rem; line-height: 1.35; }
.sfs-spec-size { font-size: .78rem; color: #8b8e96; }
.sfs-spec-dl {
	margin-top: 6px;
	font-size: .82rem;
	font-weight: 800;
	color: #030460;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.sfs-muted { color: #8b8e96; }

/* --- Mobile ---------------------------------------------------------------
   16px inputs prevent iOS Safari's auto-zoom on focus; full-width submit
   gives a comfortable tap target on phones. */
@media (max-width: 767px) {
	.sfs-field input[type="text"],
	.sfs-field input[type="email"],
	.sfs-field input[type="tel"],
	.sfs-field input[type="date"],
	.sfs-field input[type="file"],
	.sfs-field select,
	.sfs-field textarea {
		font-size: 16px;
	}
	.sfs-check { min-height: 44px; }
	.sfs-msd-toggle { font-size: 16px; }
	.sfs-msd-panel .sfs-check { min-height: 40px; }
	.sfs-submit { width: 100%; min-height: 48px; }
	.sfs-fieldset { padding: 16px 14px 10px; }
	.sfs-grid--pair { grid-template-columns: 1fr; }
	/* Address row on phones: city full-width, state + zip side by side. */
	.sfs-grid--csz { grid-template-columns: 1fr 1fr; }
	.sfs-grid--csz > :first-child { grid-column: 1 / -1; }
	.sfs-step-nav { flex-wrap: wrap; }
	.sfs-step-nav .sfs-back { width: auto; }
	.sfs-rfp-form-slot--card .sfs-rfp-wrap { padding: 18px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.sfs-success, .sfs-spec-card, .sfs-submit, .sfs-step.is-active { animation: none; transition: none; }
}

/* --- Google Places autocomplete dropdown (.pac-container) -----------------
   Only ever present when a Places API key is configured in Settings; keep
   it matching the card and above the sticky column / site header. */
.pac-container {
	border: 1.5px solid #dcdce0;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(15, 17, 24, .16);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	margin-top: 4px;
	z-index: 99999;
}
.pac-item {
	padding: 7px 11px;
	font-size: .85rem;
	color: #24262c;
	cursor: pointer;
}
.pac-item:hover,
.pac-item-selected { background: #f2f3fa; }
.pac-item-query { font-size: .9rem; color: #16181d; }
.pac-icon { display: none; }

/* --- Contact form ([sfs_contact_form]) ----------------------------------- */
.sfs-contact-wrap {
	max-width: 640px;
	background: #fff;
	border: 1px solid #e7e7ea;
	border-top: 5px solid #030460;
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(15, 17, 24, .10);
	padding: 22px 24px 18px;
	margin: 2rem 0;
}
.sfs-contact-success {
	color: #1d4a2a;
	background: #eef7f0;
	border-left: 4px solid #2e7d44;
	border-radius: 0 10px 10px 0;
	padding: 14px 18px;
	font-size: .95rem;
	line-height: 1.55;
}
.sfs-contact-success a { color: #030460; font-weight: 700; }
.sfs-contact-error {
	color: #7a1f24;
	background: #fbeeee;
	border-left: 4px solid #b3392f;
	border-radius: 0 10px 10px 0;
	padding: 12px 16px;
	font-size: .9rem;
	margin-bottom: 14px;
}
.sfs-contact-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 4px 0 0;
}
.sfs-contact-note { font-size: .82rem; color: #7a7d85; }
.sfs-contact-note a { color: #030460; font-weight: 700; }