/**
 * Secure Forms Pro - default form styling.
 *
 * Design intent: this is infrastructure a site owner's own theme will sit
 * on top of, not a landing page - so the signature move is a quiet one:
 * a focus state that reads like a verification "scan" (a thin gradient
 * bar that sweeps in), rather than decorative chrome. Everything else
 * stays disciplined so it drops into any site's existing type system.
 * System fonts only: zero webfont requests, zero render-blocking CSS,
 * which is a direct, measurable performance win over form plugins that
 * ship their own icon/font packs on every page.
 */

/* Detecting browser autofill: Chrome/Safari/Edge don't reliably fire
   input/change events when autofilling a field, which - without this -
   left a conditionally-shown field stuck hidden even after being
   autofilled along with the field it depends on. There's no direct
   JS event for "this field was autofilled", but :-webkit-autofill
   reliably triggers a CSS animation, so binding a practically-instant,
   invisible one to it and listening for the resulting `animationstart`
   event in JS (see form-render.js) is the standard, widely-used
   workaround for this gap. */
@keyframes sfpAutoFillStart {
	from {}
	to {}
}

.sfp-form input:-webkit-autofill {
	animation-name: sfpAutoFillStart;
	animation-duration: 0.001s;
}


.sfp-form {
	--sfp-ink: #171a21;
	--sfp-muted: #5b6472;
	--sfp-border: #dfe3ea;
	--sfp-surface: #ffffff;
	--sfp-accent: #2f5fed;
	--sfp-accent-2: #22c3a6;
	--sfp-button: var(--sfp-accent);
	--sfp-error: #d64545;
	--sfp-dropdown-hover: color-mix(in srgb, var(--sfp-accent) 12%, transparent);
	--sfp-dropdown-selected: var(--sfp-accent);
	--sfp-nps-default: var(--sfp-border);
	--sfp-nps-selected: var(--sfp-accent);
	--sfp-radius: 8px;
	--sfp-space: 1.1rem;

	/* Catch-all: any native form control we haven't explicitly restyled
	   (browsers vary in what "accent-color" affects - range sliders,
	   some native pickers) follows the theme's accent instead of the
	   browser default blue. */
	accent-color: var(--sfp-accent);

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--sfp-ink);
	max-width: 760px;
	display: flex;
	flex-direction: column;
	gap: var(--sfp-space);
}

.sfp-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	position: relative;
	/* NPS renders this as a <fieldset> instead of a <div> (see
	   render_field_wrapper()) so its eleven radios get a real
	   accessible group name via <legend> rather than a dangling
	   <label for>. A bare <fieldset> ships a browser-default border,
	   margin and padding that no other field wrapper has - reset them
	   here so an NPS field looks identical to every other field. */
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0; /* fieldset defaults to min-content width and can overflow narrow layouts */
}

.sfp-field legend {
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0;
}

/* Conditional-logic fields: the [hidden] attribute and our own
   `display: flex` above have equal selector specificity, so without this
   rule the cascade order alone would decide which wins - this makes it
   explicit and unconditional. */
.sfp-field[hidden] {
	display: none !important;
}

.sfp-field label {
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.sfp-required {
	color: var(--sfp-error);
	margin-left: 0.15rem;
}

.sfp-form--hide-asterisk .sfp-required {
	display: none;
}

/* Visually hidden but still read by screen readers - a site-wide
   choice to not show labels is still expected to keep them available
   to assistive tech, same principle as any per-field "hide label"
   toggle elsewhere in this stylesheet. */
.sfp-form--hide-labels .sfp-field > label,
.sfp-form--hide-labels .sfp-field > legend,
.sfp-form--hide-labels .sfp-composite-sub > label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sfp-field input,
.sfp-field select,
.sfp-field textarea {
	font: inherit;
	color: inherit;
	padding: 0.65rem 0.8rem;
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
	background: var(--sfp-surface);
	transition: border-color 0.15s ease;
}

.sfp-field textarea {
	min-height: 7rem;
	resize: vertical;
}

/* Custom dropdown arrow via a plain SVG background-image - deliberately
   not the mask+wrapper technique, which would require wrapping every
   <select> this plugin renders (country, tel code, time slots, the
   generic Dropdown field type, …) in an extra markup element. A fixed
   neutral-gray chevron reads fine against any theme without that churn. */
.sfp-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
}

.sfp-field select::-ms-expand {
	display: none;
}

/* Clean number input: no spinner arrows, so a stray scroll or an
   accidental click doesn't bump the value - deliberate, not an
   oversight. Users can still type any value the min/max/step allow. */
.sfp-field input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.sfp-field input[type="number"]::-webkit-outer-spin-button,
.sfp-field input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Custom checkbox/radio appearance, consistent with the rest of the
   form's visual language instead of each browser's native widget.
   Shape carries meaning: a ROUND indicator means "pick one" (native
   radios - used for single-select checkbox groups and NPS/rating
   internals aside), a ROUNDED-SQUARE indicator means "pick any number"
   (checkboxes). This rule is intentionally broad (any checkbox/radio in
   the form) so every instance - a lone consent checkbox, an Address
   subfield, a checkbox-group option - looks like the same product. More
   specific selectors later in this file (rating stars, NPS boxes, which
   use the same hidden-input-plus-styled-label technique) override this
   for their own inputs.
*/
.sfp-form input[type="checkbox"],
.sfp-form input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	padding: 0; /* the text-input padding made every box a 28x23 rectangle */
	width: 1.2rem;
	height: 1.2rem;
	flex-shrink: 0;
	border: 1.5px solid var(--sfp-border);
	background: var(--sfp-surface);
	position: relative;
	cursor: pointer;
	margin: 0;
	transition: background 0.12s ease, border-color 0.12s ease;
}

.sfp-form input[type="checkbox"] {
	border-radius: 6px; /* rounded square = "pick any number" */
}

.sfp-form input[type="radio"] {
	border-radius: 50%; /* circle = "pick one" */
}

.sfp-form input[type="checkbox"]:checked,
.sfp-form input[type="radio"]:checked {
	background: var(--sfp-accent);
	border-color: var(--sfp-accent);
}

/* No tick mark inside the checkbox itself - the solid accent fill above
   is the "checked" indicator on its own (a shade, not a glyph), which
   sidesteps a centering problem a fixed-pixel-offset checkmark had
   across different rendering contexts. The radio's inner dot below is
   naturally centered (equal inset on all sides) and has no such issue. */
.sfp-form input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: #fff;
}

.sfp-form input[type="checkbox"]:focus-visible,
.sfp-form input[type="radio"]:focus-visible {
	outline: 2px solid var(--sfp-accent);
	outline-offset: 2px;
}

/* Signature focus treatment: a two-tone gradient underline sweeps in from
   the left rather than a generic browser outline, reinforcing "verified"
   without adding any layout shift or extra markup. */
.sfp-field input:focus,
.sfp-field select:focus,
.sfp-field textarea:focus {
	outline: none;
	border-color: transparent;
	box-shadow: 0 0 0 1.5px var(--sfp-border);
}

.sfp-field input:focus-visible::after,
.sfp-field:has(input:focus-visible)::after,
.sfp-field:has(select:focus-visible)::after,
.sfp-field:has(textarea:focus-visible)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--sfp-accent), var(--sfp-accent-2));
	animation: sfp-sweep-in 0.25s ease-out;
}

@keyframes sfp-sweep-in {
	from {
		transform: scaleX(0);
		transform-origin: left;
	}
	to {
		transform: scaleX(1);
		transform-origin: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sfp-field:has(input:focus-visible)::after,
	.sfp-field:has(select:focus-visible)::after,
	.sfp-field:has(textarea:focus-visible)::after {
		animation: none;
	}
}

.sfp-field--invalid input,
.sfp-field--invalid select,
.sfp-field--invalid textarea {
	border-color: var(--sfp-error);
}

.sfp-field-error {
	font-size: 0.82rem;
	color: var(--sfp-error);
	min-height: 1em;
}

/* Honeypot: visually and structurally hidden, but not display:none (some
   bots specifically skip display:none fields), and never removed from the
   tab order via a method a screen reader would announce as broken. */
/* Reusable accessible-hiding pattern: visually hidden but still announced
   by screen readers and still keyboard-reachable via its `for` binding -
   used when a field owner turns off the visible label (e.g. relying on
   a placeholder instead) so sighted and assistive-tech users both still
   get a clear field name. */
.sfp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sfp-help-text {
	font-size: 0.82rem;
	color: var(--sfp-muted);
}

.sfp-hp-wrap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sfp-step {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sfp-space);
}

.sfp-step[hidden] {
	display: none !important;
}

.sfp-progress {
	display: flex;
	gap: 0.4rem;
	margin-bottom: 0.2rem;
}

.sfp-progress-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sfp-border);
	transition: background 0.2s ease;
}

.sfp-progress-dot.is-active {
	background: var(--sfp-accent);
}

.sfp-nav {
	display: flex;
	gap: 0.6rem;
	align-items: center;
}

.sfp-nav--left {
	justify-content: flex-start;
}

.sfp-nav--center {
	justify-content: center;
}

.sfp-nav--right {
	justify-content: flex-end;
}

.sfp-nav--full .sfp-submit {
	flex: 1;
}

.sfp-back {
	font: inherit;
	font-weight: 600;
	padding: 0.75rem 1.25rem;
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
	background: transparent;
	color: var(--sfp-ink);
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.sfp-back:hover {
	border-color: var(--sfp-button);
}

.sfp-next {
	font: inherit;
	font-weight: 600;
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: var(--sfp-radius);
	background: var(--sfp-button);
	color: #fff;
	cursor: pointer;
}

.sfp-submit {
	font: inherit;
	font-weight: 600;
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: var(--sfp-radius);
	background: var(--sfp-button);
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.sfp-submit:hover {
	background: var(--sfp-button-hover, var(--sfp-button));
	box-shadow: 0 4px 14px color-mix(in srgb, var(--sfp-button) 35%, transparent);
}

.sfp-submit:active {
	transform: translateY(1px);
}

.sfp-submit:disabled,
.sfp-submit.is-busy {
	opacity: 0.65;
	cursor: progress;
}

.sfp-status {
	font-size: 0.9rem;
	color: var(--sfp-muted);
}

.sfp-status.is-error {
	color: var(--sfp-error);
}

/* Conversational mode - one question at a time, Typeform-style. Kept as an
   opt-in theme (not a rewrite of the base styles) so switching a form
   between standard and conversational mode never requires re-authoring
   field markup. */
.sfp-form--conversational {
	max-width: 620px;
	gap: 0;
}

.sfp-form--conversational .sfp-progress--text {
	font-size: 0.85rem;
	color: var(--sfp-muted);
	margin-bottom: 2rem;
	font-variant-numeric: tabular-nums;
}

.sfp-form--conversational .sfp-step {
	min-height: 40vh;
	justify-content: center;
	gap: 1.4rem;
}

.sfp-form--conversational .sfp-step > .sfp-row {
	gap: 1.4rem;
}

/* The question itself - and only the question. Answer options, the parts
   of a name or address, a tick box's own caption etc. keep their normal
   size; styling every <label> made options as loud as the question. */
.sfp-form--conversational .sfp-field > label,
.sfp-form--conversational .sfp-field > legend,
.sfp-form--conversational .sfp-field > .sfp-field-title,
.sfp-form--conversational .sfp-checkbox-single-text {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.sfp-form--conversational .sfp-field > legend {
	margin-bottom: 0.6rem;
}

/* The underlined "typing line" look is for boxes people type into. Tick
   boxes, radios, sliders, file pickers and colour wells keep their own
   look (they were being drawn as tall underlines), and controls that sit
   inside a combined box (phone, link, social handle) are underlined as
   one - the box, not each piece of it. */
.sfp-form--conversational .sfp-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not(.sfp-tel-wrap *):not(.sfp-url-wrap *):not(.sfp-social-input-wrap *),
.sfp-form--conversational .sfp-field textarea,
.sfp-form--conversational .sfp-field .sfp-select-trigger:not(.sfp-tel-wrap *):not(.sfp-url-wrap *) {
	font-size: 1.15rem;
	padding: 0.9rem 0;
	border: none;
	border-bottom: 2px solid var(--sfp-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.sfp-form--conversational .sfp-field .sfp-select-trigger:not(.sfp-tel-wrap *):not(.sfp-url-wrap *) {
	padding-right: 2.2rem;
}

.sfp-form--conversational .sfp-tel-wrap,
.sfp-form--conversational .sfp-url-wrap,
.sfp-form--conversational .sfp-social-input-wrap {
	border: none;
	border-bottom: 2px solid var(--sfp-border);
	border-radius: 0;
	background: transparent;
	font-size: 1.15rem;
}

/* The typing line itself turns the accent colour on focus here, so the
   standard-mode focus sweep under the whole field would draw a second,
   detached line below it. */
.sfp-form.sfp-form--conversational .sfp-field::after {
	content: none;
}

.sfp-form--conversational .sfp-tel-wrap:focus-within,
.sfp-form--conversational .sfp-url-wrap:focus-within,
.sfp-form--conversational .sfp-social-input-wrap:focus-within,
.sfp-form--conversational .sfp-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not(.sfp-tel-wrap *):not(.sfp-url-wrap *):not(.sfp-social-input-wrap *):focus,
.sfp-form--conversational .sfp-field textarea:focus,
.sfp-form--conversational .sfp-select-native:focus-visible ~ .sfp-select-trigger {
	box-shadow: none;
	outline: none;
	border-bottom-color: var(--sfp-accent);
}

.sfp-conversational-hint {
	font-size: 0.8rem;
	color: var(--sfp-muted);
	margin: 0;
}

.sfp-form--conversational .sfp-nav {
	margin-top: 1.5rem;
}

/* ---------- Column layout ---------- */
/* Each step's fields sit in a wrapping flex row; width classes control
   how much horizontal space a given field claims. Falls back to one
   field per line below 600px regardless of the configured width, since
   quarter-width fields on a phone screen help no one. */
.sfp-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem var(--sfp-space);
}

.sfp-row > .sfp-field {
	flex: 1 1 100%;
}

.sfp-row > .sfp-field.sfp-width-half {
	flex: 1 1 calc(50% - 0.55rem);
}

.sfp-row > .sfp-field.sfp-width-third {
	flex: 1 1 calc(33.333% - 0.7rem);
}

.sfp-row > .sfp-field.sfp-width-quarter {
	flex: 1 1 calc(25% - 0.85rem);
}

@media (max-width: 600px) {
	.sfp-row > .sfp-field {
		flex-basis: 100% !important;
	}
}

/* ---------- Composite fields (Address, Name) ---------- */
.sfp-composite {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}

.sfp-composite-sub {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.sfp-composite-sub label {
	font-size: 0.78rem;
	color: var(--sfp-muted);
	font-weight: 600;
}

.sfp-composite-sub input,
.sfp-composite-sub select {
	font: inherit;
	padding: 0.6rem 0.75rem;
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
}

.sfp-composite-sub--city,
.sfp-composite-sub--state,
.sfp-composite-sub--zip,
.sfp-composite-sub--first,
.sfp-composite-sub--last {
	flex-basis: calc(50% - 0.35rem);
}

.sfp-composite-sub--prefix {
	flex-basis: calc(25% - 0.5rem);
}

@media (max-width: 480px) {
	.sfp-composite-sub {
		flex-basis: 100% !important;
	}
}

/* ---------- Checkbox group ---------- */
.sfp-checkbox-group {
	display: flex;
	flex-direction: column;
}

.sfp-grouped-checkboxes {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.sfp-checkbox-subgroup {
	border: 0;
	margin: 0;
	padding: 0;
}

.sfp-checkbox-subgroup legend {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--sfp-ink);
	margin-bottom: 0.5rem;
	padding: 0;
}

.sfp-checkbox-group--horizontal {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Button-style options read better with a bit more breathing room
   between them than the plain checkbox/letters cards do. */
.sfp-checkbox-group--horizontal.sfp-checkbox-group--style-buttons {
	gap: 1rem;
}

/* Card-style option row: the shared look behind the default "checkbox"
   presentation and the base the "buttons"/"letters" variants build on,
   instead of a bare native-look checkbox floating next to text. */
.sfp-checkbox-option {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.7rem 1rem;
	margin-bottom: 0.6rem;
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
	background: var(--sfp-surface);
	font-weight: 400;
	cursor: pointer;
	position: relative;
	break-inside: avoid; /* don't let a card split across CSS columns */
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.sfp-checkbox-option:last-child {
	margin-bottom: 0;
}

.sfp-checkbox-group--horizontal .sfp-checkbox-option {
	flex: 0 0 auto;
	margin-bottom: 0;
}

.sfp-checkbox-option:hover {
	border-color: var(--sfp-accent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.sfp-checkbox-option:has(input:checked) {
	border-color: var(--sfp-accent);
	background: color-mix(in srgb, var(--sfp-accent) 8%, var(--sfp-surface));
}

/* A checkmark badge at the end of a selected option - the same visual
   language a lot of modern multi-select UIs use, so a checked option
   reads as "selected" at a glance rather than relying on the checkbox
   square alone. Circle-display options skip this (see below): there's
   no room for it in that compact, absolutely-positioned layout. */
.sfp-checkbox-option:has(input:checked)::after {
	content: "✓";
	margin-left: auto;
	color: var(--sfp-accent);
	font-weight: 700;
	flex-shrink: 0;
}

.sfp-checkbox-option-text {
	flex: 1;
}

/* Circle display is a different, compact visual concept - small dots
   positioned around a ring - so it keeps its own minimal look rather
   than the bordered-card treatment above. */
.sfp-checkbox-group--circle .sfp-checkbox-option {
	padding: 0.3rem 0.6rem;
	margin-bottom: 0;
	border-radius: 999px;
	box-shadow: none;
}

.sfp-checkbox-group--circle .sfp-checkbox-option:has(input:checked)::after {
	content: none;
}

.sfp-sequence-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: var(--sfp-accent);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	flex-shrink: 0;
}

.sfp-sequence-badge[hidden] {
	display: none !important;
}

.sfp-checkbox-accordion summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--sfp-accent);
	margin-bottom: 0.5rem;
}

/* ---------- Rating (mask-based star icons) ---------- */
.sfp-rating {
	display: inline-flex;
	flex-wrap: wrap; /* 10 stars no longer overflow a phone screen */
	gap: 0.2rem;
}

.sfp-form input.sfp-rating-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/* A mask-based icon at an explicit size, not a Unicode "★" character.
   The glyph approach looked "still tiny" no matter how large font-size
   was set because a star character's actual ink coverage within its own
   em-box varies hugely by font/OS - font-size controls the box, not
   reliably the visible glyph size. This has no such ambiguity: it's
   always exactly the pixel size declared below. */
.sfp-rating-star {
	display: inline-block;
	width: 2.4rem;
	height: 2.4rem;
	cursor: pointer;
	background-color: var(--sfp-border);
	transition: background-color 0.1s ease, transform 0.1s ease;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

.sfp-rating-star:hover {
	transform: scale(1.12);
}

/* Stars are now in natural 1..max order; initRating() marks the stars up
   to the hovered / chosen one with .is-on. */
.sfp-rating-star.is-on {
	background-color: #f5a623;
}

.sfp-rating-input:focus-visible + .sfp-rating-star {
	outline: 2px solid var(--sfp-accent);
	outline-offset: 2px;
}

/* ---------- Net Promoter Score ---------- */
.sfp-nps {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sfp-nps-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	/* NPS is a universally 0(low)-to-10(high) left-to-right scale by
	   convention, regardless of interface language - flex "row" direction
	   otherwise follows the surrounding text direction, so on a page with
	   RTL context set anywhere above this, it would visually reverse even
	   though the DOM order (verified separately) is correctly 0→10. */
	direction: ltr;
}

.sfp-form input.sfp-nps-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.sfp-nps-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border: 1.5px solid var(--sfp-nps-default);
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.85rem;
}

.sfp-nps-input:checked + .sfp-nps-box,
.sfp-nps-box.sfp-nps-filled {
	background: var(--sfp-nps-selected);
	border-color: var(--sfp-nps-selected);
	color: #fff;
}

.sfp-nps-scale-labels {
	display: flex;
	justify-content: space-between;
	align-self: stretch;
	width: 100%;
	font-size: 0.78rem;
	color: var(--sfp-muted);
}

/* ---------- Slider ---------- */
.sfp-slider-wrap {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.sfp-slider-wrap input[type="range"] {
	flex: 1;
	accent-color: var(--sfp-accent);
}

.sfp-slider-wrap output {
	font-weight: 600;
	min-width: 2.5rem;
	text-align: right;
}

/* ---------- Upload ---------- */
.sfp-upload-hint {
	font-size: 0.75rem;
	color: var(--sfp-muted);
	margin: 0.3rem 0 0;
}

/* ---------- Signature ---------- */
.sfp-signature-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
}

.sfp-signature-pad {
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
	background: #fff;
	touch-action: none;
	max-width: 100%;
}

.sfp-signature-clear {
	font-size: 0.8rem;
	background: none;
	border: 1px solid var(--sfp-border);
	border-radius: 6px;
	padding: 0.3rem 0.7rem;
	cursor: pointer;
	color: var(--sfp-muted);
}

/* ---------- Consent / Data Protection Terms Check ---------- */
.sfp-consent-label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
	font-size: 0.9rem;
}

/* ---------- Content-only fields ---------- */
/* ---------- Link field ----------
   Text link (underlined - colour alone does not mark a link for everyone),
   filled or outline button, or card. Colours, corners and the button
   colour follow the form's own design settings. */
.sfp-link {
	line-height: 1.5;
}

.sfp-link--align-center { text-align: center; }
.sfp-link--align-right { text-align: right; }

.sfp-link .sfp-link-a {
	color: var(--sfp-accent);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.sfp-link-icon {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

.sfp-link-meta {
	font-weight: 400;
	font-size: 0.85em;
	color: var(--sfp-muted);
	white-space: nowrap;
}

.sfp-link-intro {
	color: var(--sfp-ink);
}

p.sfp-link-intro {
	margin: 0 0 0.6rem;
	color: var(--sfp-muted);
}

/* Text link */
.sfp-link--text .sfp-link-a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	transition: text-decoration-color 0.15s ease;
}

.sfp-link--text .sfp-link-a:hover {
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

.sfp-link--text .sfp-link-icon { margin: 0 0.15em; }
.sfp-link-nowrap { white-space: nowrap; }
.sfp-link--text .sfp-link-meta { margin-left: 0.35em; }

/* Buttons */
.sfp-link--button .sfp-link-a,
.sfp-link--outline .sfp-link-a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	box-sizing: border-box;
	min-height: var(--sfp-control-height, 2.75rem);
	padding: 0.6rem 1.25rem;
	border-radius: var(--sfp-radius);
	text-decoration: none;
	line-height: 1.25;
	text-align: center;
	transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sfp-link--button .sfp-link-a {
	background: var(--sfp-button);
	color: #fff;
	border: 1.5px solid transparent;
}

.sfp-link--button .sfp-link-a:hover {
	background: var(--sfp-button-hover, var(--sfp-button));
	box-shadow: 0 4px 14px color-mix(in srgb, var(--sfp-button) 30%, transparent);
}

.sfp-link--button .sfp-link-meta {
	color: inherit;
	opacity: 0.8;
}

.sfp-link--outline .sfp-link-a {
	background: transparent;
	color: var(--sfp-button);
	border: 1.5px solid var(--sfp-button);
}

.sfp-link--outline .sfp-link-a:hover {
	background: color-mix(in srgb, var(--sfp-button) 8%, transparent);
}

.sfp-link--align-full .sfp-link-a {
	display: flex;
	width: 100%;
}

/* Card */
.sfp-link--card .sfp-link-a {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	box-sizing: border-box;
	width: 100%;
	max-width: 30rem;
	padding: 0.9rem 1rem 0.9rem 1.1rem;
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
	background: var(--sfp-surface);
	color: var(--sfp-ink);
	text-decoration: none;
	text-align: left;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sfp-link--card .sfp-link-a:hover {
	border-color: var(--sfp-accent);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--sfp-accent) 12%, transparent);
}

.sfp-link--card.sfp-link--align-full .sfp-link-a { max-width: none; }

.sfp-link-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	flex: 1;
}

.sfp-link-card-title {
	font-weight: 600;
	color: var(--sfp-accent);
}

.sfp-link-card-text {
	font-weight: 400;
	font-size: 0.92em;
	color: var(--sfp-muted);
}

.sfp-link-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sfp-accent) 10%, transparent);
	color: var(--sfp-accent);
	transition: transform 0.15s ease;
}

.sfp-link--card .sfp-link-a:hover .sfp-link-card-icon {
	transform: translateX(2px);
}

.sfp-link .sfp-link-a:focus-visible {
	outline: 2px solid var(--sfp-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.sfp-link .sfp-link-a,
	.sfp-link-card-icon {
		transition: none;
	}
}

.sfp-image-align {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.sfp-image-align--left {
	align-items: flex-start;
}

.sfp-image-align--center {
	align-items: center;
}

.sfp-image-align--right {
	align-items: flex-end;
}

.sfp-image-caption {
	margin: 0;
	font-size: 0.85rem;
	color: var(--sfp-muted);
}

/* ---------- Self-hosted captcha ---------- */
.sfp-captcha--self-hosted {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-bottom: 0.9rem;
}

.sfp-captcha-image {
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
	display: block;
}

.sfp-captcha-refresh {
	background: none;
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
	width: 2.4rem;
	height: 2.4rem;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--sfp-ink);
}

.sfp-captcha-refresh:hover {
	border-color: var(--sfp-accent);
	color: var(--sfp-accent);
}

.sfp-captcha-input {
	font: inherit;
	padding: 0.65rem 0.8rem;
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
	background: var(--sfp-surface);
	color: var(--sfp-ink);
	max-width: 10rem;
}

.sfp-captcha--math {
	align-items: center;
}

.sfp-captcha-question {
	font-weight: 600;
	color: var(--sfp-ink);
}

/* Generic alignment, reused by Signature and NPS (Image uses its own
   sfp-image-align--* since it needs display:flex specifically). */
.sfp-align--left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.sfp-align--center {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sfp-align--right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.sfp-separator-line {
	border: none;
	border-top: 1px solid var(--sfp-border);
	margin: 0;
}

.sfp-separator {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--sfp-muted);
	font-size: 0.85rem;
}

.sfp-separator::before,
.sfp-separator::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--sfp-border);
}

/* ---------- Checkbox option styles: letters / buttons ---------- */
.sfp-checkbox-group--style-letters .sfp-checkbox-option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.sfp-option-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 6px;
	border: 1.5px solid var(--sfp-border);
	font-weight: 700;
	font-size: 0.8rem;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.sfp-checkbox-group--style-letters .sfp-checkbox-option input:checked ~ .sfp-option-letter {
	background: var(--sfp-accent);
	border-color: var(--sfp-accent);
	color: #fff;
}

.sfp-checkbox-group--style-buttons .sfp-checkbox-option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.sfp-checkbox-group--style-buttons .sfp-checkbox-option:has(input:checked) {
	background: var(--sfp-accent);
	border-color: var(--sfp-accent);
	color: #fff;
}

/* The base card's checkmark defaults to accent-colored text, which would
   be invisible against the buttons style's solid accent-filled
   background once selected. */
.sfp-checkbox-group--style-buttons .sfp-checkbox-option:has(input:checked)::after {
	color: #fff;
}

/* ---------- Custom select widget ---------- */
/* Only applies once JS has enhanced a <select> (added via
   initCustomSelects). Without JS, a <select> keeps the plain styling
   above (custom chevron, themed border/background) and works exactly
   as a normal dropdown - this block never applies. */
.sfp-select-wrap {
	position: relative;
}

.sfp-select-native {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	width: 100%;
	height: 100%;
}

.sfp-select-trigger {
	width: 100%;
	text-align: left;
	font: inherit;
	color: inherit;
	padding: 0.65rem 2.2rem 0.65rem 0.8rem;
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
	background: var(--sfp-surface);
	cursor: pointer;
	position: relative;
	min-height: 2.6rem;
}

.sfp-select-trigger::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.9rem;
	width: 0.55rem;
	height: 0.55rem;
	transform: translateY(-65%) rotate(45deg);
	border: solid var(--sfp-muted);
	border-width: 0 2px 2px 0;
	pointer-events: none;
}

.sfp-select-native:focus-visible ~ .sfp-select-trigger {
	outline: 2px solid var(--sfp-accent);
	outline-offset: 2px;
}

/* The listbox - this is the part native <select> genuinely cannot let
   you theme: once opened, the option list is OS/browser chrome, not
   page content. Rendering it ourselves means it actually follows
   --sfp-surface / --sfp-ink / --sfp-accent like everything else. */
.sfp-select-listbox {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--sfp-surface);
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 4px;
	display: flex;
	flex-direction: column;
}

/* Same fix already applied to .sfp-field and .sfp-step: our own
   `display: flex` above is an author-origin rule, and author-origin
   rules take precedence over the browser's user-agent-origin
   `[hidden] { display: none }` handling regardless of specificity -
   so without this explicit override, the listbox kept rendering its
   border/shadow/background as a small empty box even while "hidden"
   and even with zero interaction. */
.sfp-select-listbox[hidden] {
	display: none !important;
}

/* The same guard for everything else the script shows and hides inside a
   form: Back / Next / Submit, the captcha, hints, panels. A theme rule
   such as `button { display: inline-flex }` beats the browser's own
   [hidden] handling, which left Submit (and Back, Next and the captcha)
   on every screen of a multi-step or conversational form. */
.sfp-form [hidden] {
	display: none !important;
}

.sfp-select-options {
	max-height: 260px;
	overflow-y: auto;
}

.sfp-select-option {
	padding: 0.55rem 0.7rem;
	border-radius: 6px;
	cursor: pointer;
	color: var(--sfp-ink);
	font-size: 0.92rem;
}

.sfp-select-option:hover {
	background: var(--sfp-dropdown-hover);
}

.sfp-select-option.is-selected {
	background: var(--sfp-dropdown-selected);
	color: #fff;
	font-weight: 600;
}

.sfp-select-search {
	width: 100%;
	box-sizing: border-box;
	padding: 0.5rem 0.6rem;
	margin-bottom: 4px;
	border: 1.5px solid var(--sfp-border);
	border-radius: 6px;
	font: inherit;
	font-size: 0.88rem;
	flex-shrink: 0;
	background: var(--sfp-surface);
}

.sfp-select-empty {
	padding: 0.6rem 0.7rem;
	color: var(--sfp-muted);
	font-size: 0.88rem;
	font-style: italic;
}
/* ---------- Custom availability calendar ---------- */
.sfp-calendar-wrap {
	position: relative;
}

/* The date box sits inside this wrapper, so it no longer stretched with
   the field like every other box: it stopped at its default width while
   the calendar icon sat at the far right, outside it. */
.sfp-calendar-wrap > .sfp-date-picker-input {
	width: 100%;
	box-sizing: border-box;
}

/* A mask-based icon (not an emoji, which renders in its own fixed OS
   color regardless of CSS) so it follows the theme's own muted-text
   color like every other icon-ish element in the form. */
.sfp-calendar-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.85rem;
	width: 1rem;
	height: 1rem;
	transform: translateY(-50%);
	pointer-events: none;
	background-color: var(--sfp-muted);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.sfp-date-picker-input {
	cursor: pointer;
	background: var(--sfp-surface);
	padding-right: 2.3rem;
}

.sfp-time-wrap {
	position: relative;
}

.sfp-time-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.85rem;
	width: 1rem;
	height: 1rem;
	transform: translateY(-50%);
	pointer-events: none;
	background-color: var(--sfp-muted);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E");
}

.sfp-time-wrap input[type="time"] {
	padding-right: 2.3rem;
	width: 100%;
}

.sfp-time-wrap input[type="time"]::-webkit-calendar-picker-indicator {
	display: none;
}

/* The browser's own highlight color behind the currently-focused
   hour/minute segment (e.g. clicking the "minute" part of the field)
   is not something CSS can override directly in any browser - it's part
   of the OS-native rendering, same limitation as the calendar/clock
   picker icon. WebKit (Chrome/Safari/Edge) is the one browser family
   that exposes the internal segment structure as styleable
   pseudo-elements at all, so this at least gets the segment TEXT color
   and caret to follow the theme there; Firefox has no equivalent hook. */
.sfp-time-wrap input[type="time"]::-webkit-datetime-edit-fields-wrapper,
.sfp-time-wrap input[type="time"]::-webkit-datetime-edit-hour-field,
.sfp-time-wrap input[type="time"]::-webkit-datetime-edit-minute-field,
.sfp-time-wrap input[type="time"]::-webkit-datetime-edit-ampm-field,
.sfp-time-wrap input[type="time"]::-webkit-datetime-edit-text {
	color: var(--sfp-ink);
}

.sfp-time-wrap input[type="time"] {
	caret-color: var(--sfp-accent);
	accent-color: var(--sfp-accent);
}

.sfp-calendar-panel {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	width: 280px;
	background: var(--sfp-surface);
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 0.9rem;
}

.sfp-calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.6rem;
}

.sfp-calendar-nav {
	background: none;
	border: none;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--sfp-ink);
	cursor: pointer;
	padding: 0.2rem 0.5rem;
	border-radius: 6px;
}

.sfp-calendar-nav:hover {
	background: color-mix(in srgb, var(--sfp-accent) 10%, transparent);
}

.sfp-calendar-label {
	font-weight: 700;
	font-size: 0.9rem;
}

.sfp-calendar-weekdays,
.sfp-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.sfp-calendar-weekdays {
	margin-bottom: 4px;
}

.sfp-calendar-weekdays span {
	text-align: center;
	font-size: 0.7rem;
	color: var(--sfp-muted);
	font-weight: 600;
}

.sfp-calendar-day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.82rem;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--sfp-ink);
	cursor: pointer;
}

.sfp-calendar-day--empty {
	cursor: default;
}

.sfp-calendar-day--available:hover {
	background: color-mix(in srgb, var(--sfp-accent) 16%, transparent);
}

.sfp-calendar-day--selected {
	background: var(--sfp-accent) !important;
	color: #fff;
	font-weight: 700;
}

/* Unavailable days use the error color at low opacity - not just gray -
   so "not available" reads distinctly from "outside this month" and
   directly complements the same-wording rejection message rather than
   introducing a third, unrelated color meaning. */
.sfp-calendar-day--disabled {
	color: color-mix(in srgb, var(--sfp-error) 55%, var(--sfp-muted));
	background: color-mix(in srgb, var(--sfp-error) 6%, transparent);
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-color: color-mix(in srgb, var(--sfp-error) 40%, transparent);
}

.sfp-calendar-legend {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.7rem;
	font-size: 0.72rem;
	color: var(--sfp-muted);
}

.sfp-calendar-legend-dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	display: inline-block;
}

.sfp-calendar-legend-dot--available {
	background: var(--sfp-accent);
}

.sfp-calendar-legend-dot--disabled {
	background: color-mix(in srgb, var(--sfp-error) 55%, var(--sfp-muted));
	margin-left: 0.6rem;
}
/* ---------- Phone with flag/country-code selector ---------- */
/* One unified box (border/background/radius live here, matching every
   other input) rather than two separate bordered elements side by side
   - the country-code picker's closed trigger blends into the left edge
   with just a thin divider, and its number input has no border of its
   own. The dropdown LIST that appears when the code picker is opened is
   unaffected by any of this - it's a separate, absolutely-positioned
   element (.sfp-select-listbox) that still gets full dropdown styling
   (surface background, hover/selected colors) same as every other
   dropdown in the form. */
.sfp-tel-wrap {
	display: flex;
	align-items: stretch;
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
	background: var(--sfp-surface);
	transition: border-color 0.15s ease;
}

.sfp-tel-wrap:focus-within {
	border-color: var(--sfp-accent);
}

.sfp-social-input-wrap {
	display: flex;
	align-items: stretch;
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
	background: var(--sfp-surface);
	transition: border-color 0.15s ease;
}

.sfp-social-input-wrap:focus-within {
	border-color: var(--sfp-accent);
}

.sfp-social-prefix {
	display: flex;
	align-items: center;
	padding: 0 0.6rem 0 0.85rem;
	color: var(--sfp-muted);
	font-weight: 600;
	user-select: none;
}

.sfp-social-input-wrap input {
	border: 0 !important;
	background: transparent !important;
}

.sfp-tel-code,
.sfp-tel-wrap .sfp-select-wrap {
	flex: 0 0 auto;
	max-width: 6.9rem;
	border-right: 1.5px solid var(--sfp-border);
}

/* No-JS fallback: the plain native <select> (no .sfp-select-wrap yet)
   still needs its own border/background reset so it doesn't double up
   with .sfp-tel-wrap's own border above. */
.sfp-tel-code {
	border: none;
	border-right: 1.5px solid var(--sfp-border);
	border-radius: 0;
	border-top-left-radius: var(--sfp-radius);
	border-bottom-left-radius: var(--sfp-radius);
	background: transparent;
}

.sfp-tel-wrap .sfp-select-trigger {
	border: none;
	border-radius: 0;
	border-top-left-radius: var(--sfp-radius);
	border-bottom-left-radius: var(--sfp-radius);
	background: transparent;
	min-height: unset;
}

/* The closed trigger stays a compact ~6.9rem column (just the flag +
   dial code), but the opened dropdown list needs real room - pinning it
   to that same narrow width would cramp country names and make search
   results hard to read, which is exactly what made it feel like it was
   "hiding" the list instead of behaving like every other dropdown. */
.sfp-tel-wrap .sfp-select-listbox {
	left: 0;
	right: auto;
	min-width: 220px;
}

.sfp-tel-number {
	flex: 1;
	border: none !important;
	border-radius: 0 !important;
	border-top-right-radius: var(--sfp-radius) !important;
	border-bottom-right-radius: var(--sfp-radius) !important;
	background: transparent !important;
}

.sfp-tel-number:focus {
	box-shadow: none !important;
}


/* ---------- URL field with http:// / https:// dropdown ----------
   Same unified-box look as the phone field above: one border, radius
   and focus ring around the whole control, the protocol picker as a
   compact column on the left with a thin divider, and a borderless
   text input filling the rest. The picker is the same custom dropdown
   every other select in the form uses (so its opened list follows the
   form's colors), just short enough that it never needs a search box. */
.sfp-url-wrap {
	display: flex;
	align-items: stretch;
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
	background: var(--sfp-surface);
	transition: border-color 0.15s ease;
}

.sfp-url-wrap:focus-within {
	border-color: var(--sfp-accent);
}

.sfp-url-wrap .sfp-select-wrap,
.sfp-url-wrap select.sfp-url-protocol {
	flex: 0 0 auto;
	width: 7.2rem;
	border-right: 1.5px solid var(--sfp-border);
}

/* No-JS fallback: the plain native select, before it's wrapped. */
.sfp-url-wrap select.sfp-url-protocol {
	border-top: 0;
	border-bottom: 0;
	border-left: 0;
	border-radius: 0;
	border-top-left-radius: var(--sfp-radius);
	border-bottom-left-radius: var(--sfp-radius);
	background-color: transparent;
}

.sfp-url-wrap .sfp-select-trigger {
	border: none;
	border-radius: 0;
	border-top-left-radius: var(--sfp-radius);
	border-bottom-left-radius: var(--sfp-radius);
	background: transparent;
	min-height: unset;
	height: 100%;
}

.sfp-url-wrap .sfp-select-listbox {
	left: 0;
	right: auto;
	min-width: 8rem;
}

.sfp-url-wrap input.sfp-url-rest {
	flex: 1 1 auto;
	min-width: 0;
	border: none !important;
	border-radius: 0 !important;
	border-top-right-radius: var(--sfp-radius) !important;
	border-bottom-right-radius: var(--sfp-radius) !important;
	background: transparent !important;
}

.sfp-url-wrap input.sfp-url-rest:focus {
	box-shadow: none !important;
}


/* ---------- One shared height for every single-line control ----------
   Before this, each control's height came from its own padding plus the
   browser's idea of "normal" line height, so they drifted: native
   date/time inputs ran ~2px taller, Name/Address sub-inputs ~1.5px
   shorter, the submit button and file picker different again. One
   explicit height removes the drift at its source.

   Unified-box controls (phone, URL with protocol, social) own the
   height on the outer box and tell their inner pieces to simply fill
   it (--sfp-input-h: 100%), so the border is never counted twice.
   Textareas, sliders and the upload dropzone are intentionally not
   single-line controls and are left alone. */
.sfp-form {
	--sfp-control-height: 2.75rem;
}

.sfp-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]),
.sfp-field select,
.sfp-composite-sub input,
.sfp-composite-sub select,
.sfp-captcha-input,
.sfp-select-trigger,
.sfp-submit,
.sfp-back,
.sfp-next {
	box-sizing: border-box;
	height: var(--sfp-input-h, var(--sfp-control-height));
	min-height: 0;
}

.sfp-tel-wrap,
.sfp-url-wrap,
.sfp-social-input-wrap {
	--sfp-input-h: 100%;
	box-sizing: border-box;
	height: var(--sfp-control-height);
}

.sfp-captcha-refresh {
	width: var(--sfp-control-height);
	height: var(--sfp-control-height);
}

/* A fixed control height means the closed dropdown trigger can no longer
   quietly grow to fit a second line, so its label must stay on one line:
   flag + dial code ("🇬🇭 +233") in the phone field, "https://" in the URL
   field. Slightly roomier for the phone's longest codes (e.g. "+1684"),
   with an ellipsis as the last-resort fallback rather than wrapping. */
.sfp-select-trigger {
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sfp-tel-code,
.sfp-tel-wrap .sfp-select-wrap {
	max-width: 7.6rem;
}

.sfp-tel-wrap .sfp-select-trigger {
	padding-left: 0.7rem;
	padding-right: 1.8rem;
}

.sfp-tel-wrap .sfp-select-trigger::after {
	right: 0.7rem;
}

/* ---------- File picker ----------
   The native file input keeps its own look but gets the same minimum
   height as every other control, with the "Choose file" button filling it,
   so an upload field no longer sits visibly shorter or taller than its
   neighbours. */
.sfp-field input[type="file"] {
	box-sizing: border-box;
	width: 100%;
	height: var(--sfp-control-height);
	min-height: 0;
	padding: 0 0.5rem 0 0;
	line-height: normal;
	overflow: hidden;
	cursor: pointer;
}

.sfp-field input[type="file"]::file-selector-button {
	box-sizing: border-box;
	height: calc(var(--sfp-control-height) - 2px);
	margin: 0 0.75rem 0 0;
	padding: 0 1rem;
	border: 0;
	border-right: 1px solid currentColor;
	background: rgba(127, 127, 127, 0.12);
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* ---------- Booking: slots that are already taken ---------- */
.sfp-select-option.is-unavailable,
.sfp-select-option.is-unavailable:hover {
	opacity: 0.45;
	text-decoration: line-through;
	cursor: not-allowed;
	background: transparent;
}

/* ---------- Hidden inputs behind custom controls ----------
   NPS boxes, rating stars and the letter/button checkbox styles hide the
   real radio/checkbox and show a styled label instead. Those inputs used
   to be only "position: absolute; opacity: 0" with no offsets, inside a
   flex row - so every one of them was laid out at the START of the row,
   all stacked on top of the first box, and the generic radio styling
   gave them a real clickable size. Clicking NPS "0" therefore actually
   hit the invisible "10" input lying over it (likewise the first star /
   option). Now they are fully collapsed and ignore the pointer entirely,
   so a click always lands on the label it belongs to; keyboard focus
   still works and is shown on the visible box. */
.sfp-form input.sfp-nps-input,
.sfp-form input.sfp-rating-input,
.sfp-form .sfp-checkbox-group--style-letters .sfp-checkbox-option input,
.sfp-form .sfp-checkbox-group--style-buttons .sfp-checkbox-option input {
	position: absolute;
	width: 1px;
	height: 1px;
	min-width: 0;
	min-height: 0;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.sfp-form input.sfp-nps-input::before,
.sfp-form input.sfp-nps-input::after,
.sfp-form input.sfp-rating-input::before,
.sfp-form input.sfp-rating-input::after {
	content: none;
}

.sfp-nps-input:focus-visible + .sfp-nps-box,
.sfp-checkbox-group--style-letters .sfp-checkbox-option input:focus-visible ~ .sfp-option-letter,
.sfp-checkbox-group--style-buttons .sfp-checkbox-option:has(input:focus-visible) {
	outline: 2px solid var(--sfp-accent);
	outline-offset: 2px;
}

/* ---------- Checkbox group at its "select at most" limit ----------
   The options that can no longer be ticked are greyed out, so it is clear
   why another click does nothing. */
.sfp-checkbox-option.is-capped {
	opacity: 0.45;
	cursor: not-allowed;
}

.sfp-checkbox-option.is-capped input {
	cursor: not-allowed;
}

/* ---------- Single checkbox: box and caption on one clickable line ---------- */
.sfp-checkbox-single {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	line-height: 1.4;
}

.sfp-checkbox-single input {
	flex: 0 0 auto;
	margin: 0;
}

/* ---------- Grouped checkboxes: category headings ----------
   The category headings used the same size and weight as the field's own
   label, so "Hobbies" and "Sports" read as two separate questions. */
.sfp-grouped-checkboxes {
	margin-top: 0.25rem;
}

.sfp-field .sfp-checkbox-subgroup > legend {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sfp-muted);
	margin-bottom: 0.45rem;
}

/* ---------- Phone-width layout ----------
   Fields are flex columns, so their children sized to their own minimum
   content width and wide widgets (URL with protocol, phone with flag, a
   checkbox group in columns) pushed the page sideways at 375px. */
.sfp-field > * {
	min-width: 0;
	max-width: 100%;
}

.sfp-url-rest,
.sfp-tel-number {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 600px) {
	.sfp-checkbox-group--columns {
		columns: 1 !important;
	}
}

/* Steps are <fieldset>s, which default to min-content width - one wide
   widget made the whole step (and page) wider than a phone screen. */
.sfp-step,
.sfp-row,
.sfp-row > * {
	min-width: 0;
}

.sfp-url-wrap,
.sfp-tel-wrap {
	max-width: 100%;
}

/* A <legend> is not laid out as a flex item, so the field's own gap does
   not apply to it; give it the same space a <label> gets. */
.sfp-field > legend {
	padding-bottom: 0.4rem;
}

.sfp-form--hide-labels .sfp-field > legend {
	padding-bottom: 0;
}

/* ---------- Ticked checkboxes show a tick ----------
   A filled box alone was easy to misread (especially a single consent box).
   The tick is a mask scaled inside the box, so it stays centred at any size. */
.sfp-form input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7z'/%3E%3C/svg%3E") center / 92% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7z'/%3E%3C/svg%3E") center / 92% no-repeat;
}

/* ---------- Data protection / terms consent ---------- */
.sfp-field-title {
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.sfp-consent-row {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0.3rem 0.6rem;
}

.sfp-consent-row input[type="checkbox"] {
	margin-top: 0.1rem;
}

.sfp-consent-row .sfp-consent-label {
	flex: 0 1 auto;
	min-width: 0;
	font-weight: 500;
	font-size: 0.9rem;
	line-height: 1.4;
	cursor: pointer;
}

.sfp-consent-row a {
	color: var(--sfp-accent);
	font-size: 0.9rem;
	line-height: 1.4;
}

/* "Hide field labels" hides field titles. A single checkbox's caption and
   the consent text are the box's own words, not a title - hiding them
   left a bare box (or hid the box with its label). */
.sfp-form--hide-labels .sfp-field > label.sfp-checkbox-single {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

.sfp-form--hide-labels .sfp-field--consent > .sfp-field-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ---------- Social handle with a platform picker ----------
   Same one-box look as the phone and URL fields: the platform dropdown,
   then the "@" (for platforms that use it), then the handle. */
.sfp-social-input-wrap--choose .sfp-select-wrap,
.sfp-social-input-wrap--choose select.sfp-social-platform {
	flex: 0 0 auto;
	width: 9.5rem;
	max-width: 45%;
	border-right: 1.5px solid var(--sfp-border);
}

.sfp-social-input-wrap--choose select.sfp-social-platform {
	border-top: 0;
	border-bottom: 0;
	border-left: 0;
	border-radius: 0;
	border-top-left-radius: var(--sfp-radius);
	border-bottom-left-radius: var(--sfp-radius);
	background-color: transparent;
}

.sfp-social-input-wrap--choose .sfp-select-trigger {
	border: none;
	border-radius: 0;
	border-top-left-radius: var(--sfp-radius);
	border-bottom-left-radius: var(--sfp-radius);
	background: transparent;
	min-height: unset;
	height: 100%;
}

.sfp-social-input-wrap--choose .sfp-select-listbox {
	left: 0;
	right: auto;
	min-width: 12rem;
}

.sfp-social-input-wrap--choose .sfp-social-prefix[hidden] {
	display: none;
}

.sfp-social-input-wrap--choose input.sfp-social-handle {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 0 !important;
	border-top-right-radius: var(--sfp-radius) !important;
	border-bottom-right-radius: var(--sfp-radius) !important;
}

.sfp-social-input-wrap--choose .sfp-social-prefix {
	padding-right: 0;
}

.sfp-social-input-wrap--choose .sfp-social-prefix:not([hidden]) + input.sfp-social-handle {
	padding-left: 0.2rem;
}

.sfp-social-other {
	margin-top: 0.5rem;
	width: 100%;
	box-sizing: border-box;
}

.sfp-social-other[hidden] {
	display: none;
}

/* The box around the whole control shows focus; the handle box inside it
   must not draw a second focus ring of its own. */
.sfp-social-input-wrap input:focus {
	box-shadow: none !important;
	outline: none;
}

/* ---------- Consent: several documents, scrollwrap, notices ---------- */
.sfp-consent {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.sfp-consent-label a,
.sfp-consent-notice a,
.sfp-doc-read a {
	color: var(--sfp-accent);
}

.sfp-doc-toggle {
	all: unset;
	color: var(--sfp-accent);
	text-decoration: underline;
	cursor: pointer;
}

.sfp-doc-toggle:focus-visible {
	outline: 2px solid var(--sfp-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.sfp-doc-panel,
.sfp-doc-scroll {
	max-height: 14rem;
	overflow: auto;
	padding: 0.75rem 0.9rem;
	border: 1.5px solid var(--sfp-border);
	border-radius: var(--sfp-radius);
	background: var(--sfp-surface);
	font-size: 0.85rem;
	line-height: 1.5;
}

.sfp-doc-panel[hidden] {
	display: none;
}

.sfp-doc-scroll:focus-visible {
	outline: 2px solid var(--sfp-accent);
	outline-offset: 2px;
}

.sfp-doc-panel > :first-child,
.sfp-doc-scroll > :first-child {
	margin-top: 0;
}

.sfp-doc-reading {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sfp-doc-read-title {
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.sfp-doc-read-state::after {
	content: "";
}

.sfp-doc-read.is-read .sfp-doc-read-state::after {
	content: "\2713  read";
	color: #1a7f37;
	font-weight: 600;
	font-size: 0.8rem;
}

.sfp-consent-hint {
	margin: 0;
	font-size: 0.8rem;
	color: var(--sfp-muted);
}

.sfp-consent-hint[hidden] {
	display: none;
}

.sfp-consent-hint.is-nudged {
	color: var(--sfp-error, #d63638);
}

.sfp-form input[type="checkbox"].is-locked {
	opacity: 0.45;
	cursor: not-allowed;
}

.sfp-consent-notice {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
}

.sfp-consent--browsewrap .sfp-consent-notice {
	font-size: 0.8rem;
	color: var(--sfp-muted);
}

.sfp-optional {
	color: var(--sfp-muted);
	font-weight: 400;
	font-size: 0.85em;
}

/* The agreement text flows as one paragraph (links and commas inline),
   next to its box. The older rule made each link a separate flex column. */
.sfp-consent-row {
	flex-wrap: nowrap;
}

.sfp-consent-row .sfp-consent-label {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
}