/**
 * 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;
}

/* 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-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;
	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-field label {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.sfp-form--conversational .sfp-field input,
.sfp-form--conversational .sfp-field select,
.sfp-form--conversational .sfp-field textarea {
	font-size: 1.15rem;
	padding: 0.9rem 0;
	border: none;
	border-bottom: 2px solid var(--sfp-border);
	border-radius: 0;
	background: transparent;
}

.sfp-form--conversational .sfp-field input:focus,
.sfp-form--conversational .sfp-field select:focus,
.sfp-form--conversational .sfp-field textarea:focus {
	box-shadow: 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-direction: row-reverse;
	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);
}

.sfp-rating-star:hover,
.sfp-rating-star:hover ~ .sfp-rating-star,
.sfp-rating-input:checked ~ .sfp-rating-star {
	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 ---------- */
.sfp-link-field {
	display: inline-block;
	font-weight: 600;
	color: var(--sfp-accent);
}

.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;
}

.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;
}

/* 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;
}