/* =========================================================================
   Formsology — modern front-end styles
   Scoped under .fs-form-wrap with explicit resets so host themes can't break
   the layout. Theme via the CSS variables below.
   ========================================================================= */

.fs-form-wrap {
	--fs-accent: #2C3E50;          /* brand slate blue */
	--fs-accent-hover: #22303d;
	--fs-accent-soft: rgba(44, 62, 80, .10);
	--fs-accent-2: #76C7C0;        /* brand sage green */
	--fs-accent-2-soft: rgba(118, 199, 192, .18);
	--fs-text: #111827;
	--fs-label: #374151;
	--fs-muted: #6b7280;
	--fs-border: #d1d5db;
	--fs-border-soft: #e5e7eb;
	--fs-surface: #ffffff;
	--fs-surface-soft: #f9fafb;
	--fs-radius: 14px;
	--fs-radius-sm: 10px;
	--fs-gap: 22px;
	--fs-error: #dc2626;
	--fs-success: #059669;
	/* The system stack is the default (Formsology_Fonts::DEFAULT_KEY), so a form
	   makes no webfont request unless one is deliberately chosen. Forms that pick
	   a typeface get --fs-font set inline from the font registry. */
	--fs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif;

	/* Styling controls (overridden inline per-form; defaults mirror the base look). */
	--fs-maxwidth: 100%;
	--fs-field-radius: var(--fs-radius-sm);
	--fs-field-bg: #ffffff;
	--fs-label-weight: 600;
	--fs-btn-pad: 15px 30px;
	--fs-btn-fs: 16px;
	--fs-btn-bg: var(--fs-accent);
	--fs-btn-color: #ffffff;
	--fs-btn-border: transparent;
	--fs-btn-bg-hover: var(--fs-accent-hover);
	--fs-btn-color-hover: #ffffff;

	width: 100%;
	max-width: var(--fs-maxwidth);
	margin: 0 auto 1.5em;
	font-family: var(--fs-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--fs-text);
	text-align: left;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}
/* Opt-in max width for standalone/full-width placements. */
.fs-form-wrap.fs-constrained { max-width: 720px; margin-left: auto; margin-right: auto; }
.fs-form-wrap *,
.fs-form-wrap *::before,
.fs-form-wrap *::after { box-sizing: border-box; }

/* ---- Card -------------------------------------------------------------- */
.fs-form {
	background: var(--fs-surface);
	border: 1px solid var(--fs-border-soft);
	border-radius: var(--fs-radius);
	padding: clamp(20px, 4vw, 38px);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px rgba(16, 24, 40, .06);
}

/* ---- Field rows & columns ---------------------------------------------- */
.fs-fields { display: flex; flex-wrap: wrap; column-gap: 20px; align-items: flex-start; }
.fs-field { margin: 0 0 var(--fs-gap); flex: 0 0 100%; min-width: 0; }
.fs-fields > .fs-field:last-of-type { margin-bottom: 0; }
.fs-col-full { flex: 0 0 100%; }
.fs-col-one-half { flex: 0 0 calc(50% - 10px); }
.fs-col-one-third { flex: 0 0 calc(33.333% - 13.34px); }
.fs-col-two-thirds { flex: 0 0 calc(66.666% - 6.66px); }
/* Structural fields always span the full row. */
.fs-field-heading, .fs-field-html, .fs-field-pagebreak, .fs-field-signature, .fs-field-address { flex-basis: 100%; }
@media ( max-width: 600px ) {
	.fs-fields > .fs-field { flex-basis: 100%; }
}

.fs-label {
	display: block;
	font-size: 14px;
	font-weight: var(--fs-label-weight);
	color: var(--fs-label);
	margin: 0 0 8px;
	line-height: 1.4;
}
.fs-required-mark { color: var(--fs-error); margin-left: 2px; display: none; }
.fs-field.fs-required > .fs-label .fs-required-mark { display: inline; }

/* ---- Text inputs / select / textarea ----------------------------------- */
.fs-form .fs-input,
.fs-form input[type="text"],
.fs-form input[type="email"],
.fs-form input[type="url"],
.fs-form input[type="tel"],
.fs-form input[type="number"],
.fs-form input[type="password"],
.fs-form input[type="date"],
.fs-form input[type="time"],
.fs-form select,
.fs-form textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 15px;
	min-height: 50px;
	font-family: inherit;
	font-size: 16px; /* >=16px avoids iOS zoom-on-focus */
	line-height: 1.4;
	color: var(--fs-text);
	background-color: var(--fs-field-bg);
	background-image: none;
	border: 1.5px solid var(--fs-border);
	border-radius: var(--fs-field-radius);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fs-form textarea { min-height: 130px; padding-top: 13px; resize: vertical; line-height: 1.6; }

.fs-form .fs-input::placeholder,
.fs-form textarea::placeholder { color: #9ca3af; opacity: 1; }

.fs-form .fs-input:hover,
.fs-form select:hover,
.fs-form textarea:hover { border-color: #9ca3af; }

.fs-form .fs-input:focus,
.fs-form select:focus,
.fs-form textarea:focus {
	outline: none;
	border-color: var(--fs-accent);
	box-shadow: 0 0 0 4px var(--fs-accent-soft);
}

/* native-looking dropdown chevron */
.fs-form select {
	padding-right: 42px;
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
	cursor: pointer;
}

/* ---- Helper / description --------------------------------------------- */
.fs-description { color: var(--fs-muted); font-size: 13px; margin-top: 6px; line-height: 1.5; }

/* ---- Error states ------------------------------------------------------ */
.fs-field-error { color: var(--fs-error); font-size: 13px; font-weight: 500; margin-top: 6px; display: none; }
.fs-field.fs-has-error .fs-input,
.fs-field.fs-has-error select,
.fs-field.fs-has-error textarea { border-color: var(--fs-error); }
.fs-field.fs-has-error .fs-input:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.fs-field.fs-has-error .fs-field-error { display: block; }

/* ---- Field widths (short fields) -------------------------------------- */
.fs-size-small  { max-width: 240px; }
.fs-size-medium { max-width: 60%; }
@media (max-width: 600px) {
	.fs-size-small,
	.fs-size-medium { max-width: 100%; }
}

/* ---- Choices: custom radio & checkbox cards --------------------------- */
.fs-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.fs-choices-cols-1 { display: flex; flex-direction: column; }
.fs-choices-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fs-choices-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fs-choices-inline { display: flex; flex-direction: row; flex-wrap: wrap; }
.fs-choices-inline .fs-choice { flex: 0 1 auto; }
@media ( max-width: 600px ) {
	.fs-choices-cols-2, .fs-choices-cols-3 { grid-template-columns: 1fr; }
}

/* Icon / image choices */
.fs-choices-visual .fs-choice { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 12px; }
.fs-choice-visual { display: flex; align-items: center; justify-content: center; line-height: 1; color: var(--fs-icon-color, var(--fs-accent)); }
.fs-choice-visual i { color: inherit; }
.fs-choice-visual img { max-width: 100%; height: auto; object-fit: contain; border-radius: 6px; }
.fs-choices-visual .fs-choice-label { font-weight: 500; }
.fs-vis-small .fs-choice-visual { font-size: 22px; }
.fs-vis-small .fs-choice-visual img { max-height: 34px; }
.fs-vis-medium .fs-choice-visual { font-size: 34px; }
.fs-vis-medium .fs-choice-visual img { max-height: 56px; }
.fs-vis-large .fs-choice-visual { font-size: 50px; }
.fs-vis-large .fs-choice-visual img { max-height: 88px; }
/* Modern style hides the native control and selects the whole card. */
.fs-vstyle-modern .fs-choice input[type="radio"],
.fs-vstyle-modern .fs-choice input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fs-vstyle-modern .fs-choice { border-width: 2px; }

.fs-choice {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 13px 15px;
	font-size: 15px;
	font-weight: 400;
	color: var(--fs-text);
	background: var(--fs-surface);
	border: 1.5px solid var(--fs-border-soft);
	border-radius: var(--fs-radius-sm);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.fs-choice:hover { border-color: var(--fs-accent); background: var(--fs-accent-soft); }
.fs-choice:has(input:checked) { border-color: var(--fs-accent); background: var(--fs-accent-soft); }

.fs-choice input[type="radio"],
.fs-choice input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 21px;
	width: 21px;
	height: 21px;
	margin: 0;
	border: 2px solid var(--fs-border);
	background: #fff;
	display: inline-grid;
	place-content: center;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.fs-choice input[type="radio"] { border-radius: 50%; }
.fs-choice input[type="checkbox"] { border-radius: 7px; }

.fs-choice input[type="radio"]::before,
.fs-choice input[type="checkbox"]::before {
	content: "";
	transform: scale(0);
	transition: transform .12s ease-in-out;
	background: #fff;
}
.fs-choice input[type="radio"]::before { width: 9px; height: 9px; border-radius: 50%; }
.fs-choice input[type="checkbox"]::before {
	width: 12px; height: 12px;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.fs-choice input:checked { background: var(--fs-accent); border-color: var(--fs-accent); }
.fs-choice input:checked::before { transform: scale(1); }
.fs-choice input:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--fs-accent-soft); }

/* ---- Composite name / address grids ----------------------------------- */
.fs-subfields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fs-subfields .fs-subfield { min-width: 0; }
.fs-subfields .fs-subfield.fs-full { grid-column: 1 / -1; }
@media (max-width: 600px) {
	.fs-subfields { grid-template-columns: 1fr; }
}

/* ---- Star rating ------------------------------------------------------- */
.fs-rating { display: inline-flex; gap: 6px; font-size: 30px; line-height: 1; color: #d8dce3; cursor: pointer; }
.fs-rating .fs-star { transition: color .12s ease, transform .12s ease; }
.fs-rating .fs-star:hover { transform: scale(1.15); }
.fs-rating .fs-star.fs-on,
.fs-rating .fs-star.fs-hover { color: #f59e0b; }

/* ---- Survey & Poll ----------------------------------------------------- */
.fs-likert-wrap { overflow-x: auto; }
.fs-likert { width: 100%; border-collapse: collapse; font-size: 14px; }
.fs-likert th, .fs-likert td { padding: 9px 10px; text-align: center; border-bottom: 1px solid var(--fs-border-soft); }
.fs-likert thead th { font-weight: 600; font-size: 12.5px; color: var(--fs-label); }
.fs-likert-stmt { text-align: left; color: var(--fs-text); font-weight: 500; min-width: 140px; }
.fs-likert tbody tr:last-child td { border-bottom: 0; }
.fs-likert-cell { display: inline-flex; cursor: pointer; }
.fs-likert input[type="radio"] { width: 18px; height: 18px; accent-color: var(--fs-accent); cursor: pointer; }

.fs-nps-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.fs-nps-btn {
	flex: 1 1 auto; min-width: 36px; text-align: center; cursor: pointer;
	border: 1.5px solid var(--fs-border); border-radius: var(--fs-radius-sm);
	padding: 9px 0; font-weight: 600; color: var(--fs-text); position: relative;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.fs-nps-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fs-nps-btn:hover { border-color: var(--fs-accent); }
.fs-nps-btn:has(input:checked) { background: var(--fs-accent); border-color: var(--fs-accent); color: #fff; }
.fs-nps-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--fs-muted); margin-top: 8px; }

/* ---- Payment fields ---------------------------------------------------- */
.fs-product {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 16px;
	font-weight: 500;
	border: 1.5px solid var(--fs-border-soft);
	border-radius: var(--fs-radius-sm);
}
.fs-product-price { font-weight: 700; color: var(--fs-accent); }
.fs-products { display: flex; flex-direction: column; gap: 10px; }

.fs-total {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px dashed var(--fs-border);
	font-size: 14px;
	color: var(--fs-muted);
}
.fs-total-amount { font-size: 27px; font-weight: 800; letter-spacing: -.01em; color: var(--fs-text); }

/* ---- Section headings / HTML blocks ----------------------------------- */
.fs-field-heading { border-top: 1px solid var(--fs-border-soft); padding-top: 24px; }
.fs-field-heading:first-child { border-top: 0; padding-top: 0; }
.fs-heading { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--fs-text); }
.fs-heading-desc { color: var(--fs-muted); font-size: 14px; }
.fs-html-block { color: var(--fs-text); }

/* ---- File upload dropzone --------------------------------------------- */
.fs-dropzone { position: relative; }
.fs-dropzone .fs-file-input {
	position: absolute; inset: 0; width: 100%; height: 100%;
	opacity: 0; cursor: pointer; z-index: 2;
}
.fs-dropzone-inner {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; gap: 6px; padding: 28px 20px; min-height: 130px;
	background: var(--fs-surface-soft);
	border: 2px dashed var(--fs-border);
	border-radius: var(--fs-radius-sm);
	transition: border-color .15s ease, background-color .15s ease;
}
.fs-dropzone.fs-dragover .fs-dropzone-inner { border-color: var(--fs-accent); background: var(--fs-accent-soft); }
.fs-dz-icon { width: 36px; height: 36px; color: var(--fs-accent); }
.fs-dz-text { font-weight: 600; color: var(--fs-label); font-size: 14px; }
.fs-dz-hint { font-size: 12px; color: var(--fs-muted); }
.fs-file-list { list-style: none; margin: 10px 0 0; padding: 0; }
.fs-file-list li {
	display: flex; align-items: center; gap: 8px;
	background: #fff; border: 1px solid var(--fs-border-soft); border-radius: 8px;
	padding: 8px 12px; margin-top: 6px; font-size: 13px; color: var(--fs-text);
}
.fs-file-list li::before { content: "\1F4CE"; }
.fs-file-list li .fs-file-size { color: var(--fs-muted); margin-left: auto; font-size: 12px; }

/* ---- Multi-page progress / breadcrumb ---------------------------------- */
/* The visible progress is the breadcrumb; the indicator stays for a11y. */
.fs-page-indicator {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fs-breadcrumb { margin: 0 0 22px; }
.fs-breadcrumb-list {
	list-style: none; margin: 0; padding: 0 0 18px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px;
	border-bottom: 1px solid var(--fs-border-soft);
}
.fs-crumb { display: flex; align-items: center; }
.fs-crumb:not(:last-child)::after {
	content: ""; width: 16px; height: 2px; margin: 0 4px;
	background: var(--fs-border-soft); border-radius: 2px;
}
.fs-crumb-btn {
	-webkit-appearance: none; appearance: none; cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px;
	background: none; border: 0; font-family: inherit; padding: 4px 6px;
	border-radius: 8px; color: var(--fs-muted);
}
.fs-crumb-btn:hover { background: var(--fs-surface-soft); }
.fs-crumb-num {
	flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700;
	background: var(--fs-border-soft); color: var(--fs-muted);
	transition: background-color .15s ease, color .15s ease;
}
.fs-crumb-label { font-size: 13px; font-weight: 600; }
.fs-crumb-current .fs-crumb-num { background: var(--fs-accent); color: #fff; }
.fs-crumb-current .fs-crumb-label { color: var(--fs-text); }
.fs-crumb-done .fs-crumb-num { background: var(--fs-accent-2); color: #0f312e; }
.fs-crumb-done .fs-crumb-label { color: var(--fs-label); }
.fs-crumb-done:not(:last-child)::after { background: var(--fs-accent-2); }
@media (max-width: 600px) {
	.fs-crumb-label { display: none; }
}

/* ---- Actions / buttons ------------------------------------------------- */
.fs-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	flex-wrap: wrap;
}
.fs-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: var(--fs-btn-color);
	background: var(--fs-btn-bg);
	border: 1.5px solid var(--fs-btn-border);
	border-radius: var(--fs-radius-sm);
	padding: var(--fs-btn-pad);
	font-size: var(--fs-btn-fs);
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
	transition: background-color .15s ease, color .15s ease, transform .05s ease, box-shadow .15s ease;
}
.fs-btn:hover { background: var(--fs-btn-bg-hover); color: var(--fs-btn-color-hover); }
.fs-btn:active { transform: translateY(1px); }
.fs-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--fs-accent-soft); }
.fs-btn[disabled] { opacity: .6; cursor: default; }
.fs-btn-submit { margin-left: auto; }

/* ---- Calculation field -------------------------------------------------- */
.fs-calculation {
	display: flex;
	align-items: center;
	min-height: 50px;
	padding: 12px 15px;
	font-size: 18px;
	font-weight: 700;
	color: var(--fs-text);
	background: var(--fs-surface-soft);
	border: 1.5px solid var(--fs-border-soft);
	border-radius: var(--fs-field-radius);
}
.fs-calc-output { line-height: 1.3; }

/* Submit-button alignment (single-page). In multi-page forms the Prev button
   keeps its margin-right:auto so Next/Submit always sit on the right. */
.fs-actions-left   { justify-content: flex-start; }
.fs-actions-center { justify-content: center; }
.fs-actions-right  { justify-content: flex-end; }
.fs-actions-left  .fs-btn-submit,
.fs-actions-center .fs-btn-submit,
.fs-actions-full  .fs-btn-submit { margin-left: 0; }
.fs-actions-full { flex-direction: column; align-items: stretch; }
.fs-actions-full .fs-btn { width: 100%; }

.fs-btn-prev {
	margin-right: auto;
	color: var(--fs-label);
	background: #fff;
	border: 1.5px solid var(--fs-border);
	box-shadow: none;
}
.fs-btn-prev:hover { background: var(--fs-surface-soft); border-color: #9ca3af; }

@media (max-width: 600px) {
	.fs-actions { flex-direction: column-reverse; align-items: stretch; }
	.fs-btn { width: 100%; }
	.fs-btn-submit { margin-left: 0; }
}

/* ---- Messages / alerts ------------------------------------------------- */
.fs-messages { margin: 0 0 18px; border-radius: var(--fs-radius-sm); font-size: 15px; line-height: 1.5; }
.fs-messages:empty { display: none; }
.fs-messages.fs-success {
	padding: 16px 18px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #065f46;
}
.fs-messages.fs-error {
	padding: 16px 18px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
}

/* ---- Submitting state -------------------------------------------------- */
.fs-form.fs-submitting { opacity: .6; pointer-events: none; }

/* ---- Signature pad ----------------------------------------------------- */
.fs-signature { }
.fs-sig-pad {
	width: 100%; height: auto; max-height: 200px; display: block;
	border: 1.5px solid var(--fs-border); border-radius: var(--fs-radius-sm);
	background: #fff; touch-action: none; cursor: crosshair;
}
.fs-sig-bar { display: flex; justify-content: flex-end; margin-top: 8px; }
.fs-sig-clear {
	-webkit-appearance: none; appearance: none; cursor: pointer;
	font: inherit; font-size: 13px; font-weight: 600; color: var(--fs-muted);
	background: var(--fs-surface-soft); border: 1.5px solid var(--fs-border);
	border-radius: 8px; padding: 6px 14px;
}
.fs-sig-clear:hover { color: var(--fs-text); border-color: #9ca3af; }

/* ---- Range slider ------------------------------------------------------ */
.fs-range { display: flex; align-items: center; gap: 14px; }
.fs-range-input { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; background: var(--fs-border-soft); outline: none; }
.fs-range-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--fs-accent); cursor: pointer; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(16,24,40,.25); }
.fs-range-input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--fs-accent); cursor: pointer; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(16,24,40,.25); }
.fs-range-output { min-width: 46px; text-align: center; font-weight: 700; color: var(--fs-accent); background: var(--fs-accent-soft); border-radius: 8px; padding: 4px 8px; font-size: 14px; }

/* ---- Access gate (password / locked form) ------------------------------ */
.fs-gate { max-width: 460px; margin: 0 auto; text-align: center; padding: 28px 24px; }
.fs-gate-icon { width: 46px; height: 46px; margin: 0 auto 14px; color: var(--fs-accent); }
.fs-gate h3 { margin: 0 0 6px; font-size: 18px; color: var(--fs-text); }
.fs-gate p { color: var(--fs-muted); margin: 0 0 16px; }
.fs-gate form { display: flex; gap: 8px; }
.fs-gate-row { display: flex; gap: 8px; margin-top: 4px; }
.fs-gate-row input[type="password"] { flex: 1; }
.fs-gate input[type="password"] { flex: 1; }
.fs-gate-error { color: var(--fs-error); font-size: 13px; margin-top: 10px; }

/* ---- Admin-only render notice ----------------------------------------- */
.fs-notice { padding: 14px 16px; border-radius: 10px; font-family: var(--fs-font); }
.fs-notice-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* ---------- Conversational (one-question-at-a-time) mode ---------- */
.fs-conversational .fs-cv-progress{height:6px;border-radius:999px;background:var(--fs-accent-soft,#e9f2f1);overflow:hidden;margin:0 0 22px}
.fs-conversational .fs-cv-bar{height:100%;width:0;background:var(--fs-accent,#76C7C0);border-radius:999px;transition:width .35s ease}
.fs-conversational .fs-field{animation:fs-cv-in .28s ease}
@keyframes fs-cv-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fs-conversational .fs-cv-nav{display:flex;align-items:center;gap:12px;margin-top:18px}
.fs-conversational .fs-cv-next{background:var(--fs-btn-bg,var(--fs-accent,#76C7C0));color:var(--fs-btn-color,#12312e);border:1px solid var(--fs-btn-border,transparent);border-radius:8px;padding:11px 22px;font-weight:700;font-size:15px;cursor:pointer}
.fs-conversational .fs-cv-next:hover{background:var(--fs-btn-bg-hover,var(--fs-accent-hover,#5fb3ac))}
.fs-conversational .fs-cv-back{background:transparent;border:1px solid var(--fs-border,#d7dde3);color:inherit;border-radius:8px;padding:11px 16px;font-weight:600;font-size:14px;cursor:pointer}
.fs-conversational .fs-cv-count{margin-left:auto;font-size:13px;color:#8a93a0;font-weight:600}
@media (prefers-reduced-motion:reduce){.fs-conversational .fs-field{animation:none}.fs-conversational .fs-cv-bar{transition:none}}