/**
 * Form Flow for Elementor Pro — front-end styles.
 *
 * These are BASE defaults only. Every visual property the user exposes in the
 * editor is emitted by Elementor as `{{WRAPPER}} .epff-*` rules, which have
 * higher specificity than these and therefore win.
 */

/* Utility ------------------------------------------------------------- */
.epff-hidden { display: none !important; }

/* Elementor can insert or replace its native step indicators after Form
   Flow initializes. Keep replacement visibility state on the stable form. */
form.epff-replaces-native-indicators .e-form__indicators { display: none !important; }

/* Once the success screen is showing, Elementor's own inline messages
   ("Your submission was successful.") are redundant — hide them whenever
   they appear, including ones appended after our reveal. */
form.epff-done .elementor-message { display: none !important; }

/* Success panel ------------------------------------------------------- */
.epff-success {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	outline: none;
}
.epff-success__heading { margin: 0; }
.epff-success__content { margin: 0; }
.epff-success__content > :last-child { margin-bottom: 0; }
.epff-success__content > :first-child { margin-top: 0; }

.epff-success__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	align-self: flex-start;
	padding: 12px 22px;
	background: var(--epff-accent, #5D3FD3);
	color: #fff;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 6px;
	cursor: pointer;
	transition: all .2s ease;
}
.epff-success__button:hover,
.epff-success__button:focus { opacity: .92; }
.epff-success__button-icon,
.epff-success__button-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Reveal animations ---------------------------------------------------- */
/* Fail-safe: the panel's resting state is visible. JS adds a keyframe that
   plays the intro and ends visible, then removes it shortly after. */
.epff-reveal {
	animation-duration: var(--epff-dur, 500ms);
	animation-timing-function: var(--epff-ease, ease-out);
	animation-fill-mode: both;
	will-change: opacity, transform;
}
.epff-reveal--fade { animation-name: epff-enter-fade; }
.epff-reveal--slide-up { animation-name: epff-reveal-up; }
.epff-reveal--slide-down { animation-name: epff-reveal-down; }
.epff-reveal--scale { animation-name: epff-reveal-scale; }
@keyframes epff-reveal-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}
@keyframes epff-reveal-down {
	from { opacity: 0; transform: translateY(-24px); }
	to   { opacity: 1; transform: none; }
}
@keyframes epff-reveal-scale {
	from { opacity: 0; transform: scale(.92); }
	to   { opacity: 1; transform: none; }
}

/* Submitting state ------------------------------------------------------ */
.epff-submitting .elementor-form-fields-wrapper {
	opacity: .55;
	pointer-events: none;
	transition: opacity .25s ease;
}
.epff-submitting .elementor-field-type-submit .elementor-button::after,
.epff-nav__btn--loading::after {
	content: "";
	display: inline-block;
	width: .85em;
	height: .85em;
	margin-left: .55em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: epff-spin .7s linear infinite;
	vertical-align: -.1em;
}
@keyframes epff-spin { to { transform: rotate(360deg); } }

/* Fields exit animation ----------------------------------------------- */
.epff-exit {
	transition: opacity 300ms ease, transform 300ms ease;
	will-change: opacity, transform;
}
.epff-exit--fade { opacity: 0; }
.epff-exit--slide-up { opacity: 0; transform: translateY(-24px); }
.epff-exit--scale { opacity: 0; transform: scale(.96); }

/* Enhanced mode ------------------------------------------------------- */
/* Fail-safe entrance: fields are visible by default. JS only ADDS a keyframe
   that plays the intro and ends visible (fill: both). If the class is never
   applied, the form still shows normally. */
.epff-enter {
	animation-duration: 520ms;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	animation-fill-mode: both;
	animation-delay: var(--epff-delay, 0ms);
	will-change: opacity, transform;
}
.epff-enter--fade { animation-name: epff-enter-fade; }
.epff-enter--slide-up { animation-name: epff-enter-slide-up; }
.epff-enter--scale { animation-name: epff-enter-scale; }
@keyframes epff-enter-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes epff-enter-slide-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}
@keyframes epff-enter-scale {
	from { opacity: 0; transform: scale(.97); }
	to   { opacity: 1; transform: none; }
}
.epff-enhanced .elementor-field-group { transition: box-shadow .2s ease; }
/* Emphasis without motion: a translate here made every focus/blur visibly
   shift the field (and its neighbours' perception) — shadow only. */
.epff-enhanced .elementor-field-group.epff-active { box-shadow: none; }

/* Conversational mode ------------------------------------------------- */
.epff-conv .epff-step { display: none; }
.epff-conv .epff-step.epff-step--active { display: block; }
.epff-conv .epff-step--from-right {
	animation: epff-slide-up var(--epff-dur, 450ms) var(--epff-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
.epff-conv .epff-step--from-left {
	animation: epff-slide-down var(--epff-dur, 450ms) var(--epff-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
@keyframes epff-slide-up {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}
@keyframes epff-slide-down {
	from { opacity: 0; transform: translateY(-28px); }
	to   { opacity: 1; transform: none; }
}

.epff-nav {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
}
.epff-nav__counter {
	font-size: .85em;
	opacity: .65;
	margin: 0 2px;
}
.epff-nav__btn.epff-nav__btn {
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	padding: 10px 20px;
	border-radius: 6px;
	transition: opacity .2s ease, transform .1s ease;
	/* Theme armour: colour/background come from custom props (set by the Nav
	   style controls) and are asserted with !important, along with the
	   decoration, so an aggressive theme's `button { … !important }` cannot
	   repaint Form Flow's own nav buttons. Border-radius stays non-important so
	   the radius control still wins by specificity. */
	background: var(--epff-nav-bg, var(--epff-accent, #5D3FD3)) !important;
	color: var(--epff-nav-color, #fff) !important;
	border: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.epff-nav__btn:hover { opacity: .9; }
.epff-nav__btn:active { transform: translateY(1px); }
.epff-nav__prev.epff-nav__prev {
	background: transparent !important;
	color: var(--epff-nav-color, inherit) !important;
	opacity: .7;
}
.epff-nav__btn:disabled { opacity: .4; cursor: default; }
.epff-nav__next { margin-left: auto; }
.epff-nav__hint {
	font-size: .78em;
	opacity: .55;
	margin-left: 10px;
	white-space: nowrap;
}
@media (pointer: coarse), (max-width: 640px) { .epff-nav__hint { display: none; } }

/* Progress bar -------------------------------------------------------- */
.epff-progress {
	width: 100%;
	height: 6px;
	background: rgba(0, 0, 0, .08);
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 18px;
}
.epff-progress__bar {
	height: 100%;
	width: 0;
	background: var(--epff-accent, #5D3FD3);
	border-radius: 20px;
	transition: width .4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Validation ---------------------------------------------------------- */
.epff-error-msg {
	color: var(--epff-error, #D92D20);
	font-size: .85em;
	margin-top: 6px;
}
.epff-error-msg:empty { margin-top: 0; }
.elementor-field-group.epff-invalid input:not([type="submit"]),
.elementor-field-group.epff-invalid select,
.elementor-field-group.epff-invalid textarea {
	border-color: var(--epff-error, #D92D20) !important;
	box-shadow: 0 0 0 1px var(--epff-error-soft, rgba(217, 45, 32, .12));
}
/* The visible Select2 control is a span — the rules above only reach the
   hidden native select. The component the visitor actually sees must show
   the error state too. */
form.epff-scope .epff-invalid .select2-selection--single,
form.epff-scope .epff-invalid .select2-selection--multiple,
form.epff-scope .elementor-error .select2-selection--single,
form.epff-scope .elementor-error .select2-selection--multiple {
	border-color: var(--epff-error, #D92D20) !important;
	box-shadow: 0 0 0 4px var(--epff-error-soft, rgba(217, 45, 32, .12));
}
.epff-shake { animation: epff-shake .4s both; }
@keyframes epff-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-4px); }
	40%, 60% { transform: translateX(4px); }
}

/* Success animation: checkmark ---------------------------------------- */
.epff-check {
	width: 64px;
	height: 64px;
	display: block;
	margin: 0 0 6px;
}
.epff-check__circle {
	stroke: var(--epff-check, var(--epff-accent, #5D3FD3));
	stroke-width: 2;
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	animation: epff-check-stroke .6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.epff-check__mark {
	stroke: var(--epff-check, var(--epff-accent, #5D3FD3));
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: epff-check-stroke .3s cubic-bezier(0.65, 0, 0.45, 1) .5s forwards;
}
@keyframes epff-check-stroke { to { stroke-dashoffset: 0; } }

/* Success animation: confetti ----------------------------------------- */
.epff-confetti {
	position: absolute;
	inset: 0;
	overflow: visible;
	pointer-events: none;
	z-index: 2;
}
.epff-confetti__piece {
	position: absolute;
	top: -12px;
	width: 8px;
	height: 14px;
	border-radius: 2px;
	opacity: 0;
	animation: epff-confetti-fall 2.4s linear forwards;
}
@keyframes epff-confetti-fall {
	0%   { opacity: 1; transform: translateY(-12px) rotate(0deg); }
	100% { opacity: 0; transform: translateY(340px) rotate(560deg); }
}

/* Editor preview affordance ------------------------------------------- */
.epff-flow--edit .epff-success {
	outline: 1px dashed rgba(0, 0, 0, .18);
	outline-offset: 8px;
}

/* "Test success screen" toggle (editor only): hide the fields, show panel. */
.elementor-widget-container:has(> .epff-flow--preview-success) .elementor-form-fields-wrapper {
	display: none !important;
}
.epff-flow--preview-success .epff-success {
	outline: none;
}
.epff-flow--preview-success::before {
	content: "\25B6  Success-screen preview \2014 editor only";
	display: block;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .5;
	margin-bottom: 12px;
}

/* Submitting overlay (v2) --------------------------------------------- */
.epff-submit-overlay {
	/* Viewport anchoring is intentional: centering an absolute overlay across a
	   very tall final step puts the status text far outside the user's viewport. */
	position: fixed;
	inset: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	padding: 24px;
	background: rgba(255, 255, 255, .65);
	z-index: 2147482000;
	text-align: center;
}
form.epff-submitting .epff-submit-overlay { display: flex; }
.epff-submit-overlay__label {
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: .02em;
}
.epff-submit-overlay__disclaimer {
	max-width: 38em;
	font-size: .9em;
	line-height: 1.5;
	opacity: .78;
}
.epff-submit-overlay__retry {
	display: none;
	font: inherit;
	font-weight: 600;
	padding: 10px 16px;
	border: 1px solid currentColor;
	border-radius: 6px;
	background: #fff;
	color: #111;
	cursor: pointer;
}
form.epff-submit-can-retry .epff-submit-overlay__retry { display: inline-flex; }
.epff-submit-progress {
	width: min(240px, 70%);
	height: 5px;
	border-radius: 99px;
	background: rgba(0, 0, 0, .12);
	overflow: hidden;
}
.epff-submit-progress__bar {
	height: 100%;
	width: 40%;
	border-radius: 99px;
	background: #111;
	animation: epff-indeterminate 1.1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes epff-indeterminate {
	0%   { transform: translateX(-110%); }
	60%  { transform: translateX(160%); }
	100% { transform: translateX(260%); }
}

/* Conversational skin over NATIVE steps ------------------------------- */
.epff-conv-native .e-form__step { transition: none; }
.epff-conv-native .e-form__step.epff-step-anim {
	animation: epff-slide-up 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Tooltips & help ------------------------------------------------------ */
/* The icon is a <span role="button"> so themes can't style it as a button.
   Every visual property is set explicitly (and `all: revert` first neutralizes
   any inherited theme/UA styling) so the icon looks identical in every theme —
   a small filled circle with a centered glyph, NOT the theme's button skin. */
.epff-tooltip-icon {
	all: revert;
	box-sizing: border-box;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto;
	/* Dimensions are !important too (like the rest of the box model) so a theme
	   sizing spans/[tabindex] can't beat one axis and turn the circle into an
	   ellipse. */
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	margin: 0 0 0 6px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--epff-tt-bg, var(--epff-accent-soft, rgba(93, 63, 211, .13))) !important;
	color: var(--epff-tt-color, var(--epff-accent, #5D3FD3)) !important;
	font: 700 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important;
	text-transform: none;
	letter-spacing: 0;
	text-align: center;
	cursor: help;
	vertical-align: middle;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	text-decoration: none;
	user-select: none;
	transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.epff-tooltip-icon:hover,
.epff-tooltip-icon:focus,
.epff-tooltip-icon:focus-visible {
	background: var(--epff-tt-bg-hover, var(--epff-accent, #5D3FD3)) !important;
	color: var(--epff-tt-color-hover, #fff) !important;
	transform: scale(1.08);
	outline: none;
}
.epff-tooltip-bubble {
	position: fixed;
	z-index: 2147483000;
	max-width: 260px;
	margin: 0;
	padding: 8px 11px;
	border-radius: 8px;
	background: var(--epff-tt-bubble-bg, #1f2328);
	color: var(--epff-tt-bubble-color, #fff);
	font: 400 12.5px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: left;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
	pointer-events: none;
}
.epff-tooltip-bubble[hidden] { display: none; }
/* Label-position icon, IN-LABEL variant (every field except native date/time):
   the icon lives right after the label text, so it automatically shares the
   label's line, spacing, and — in floating mode — its travel/shrink. The label
   itself is pointer-events:none in float mode, so the icon re-enables its own
   events; its click handler preventDefaults, and any label fall-through merely
   focuses the control (harmless — natives are excluded). */
.epff-tt-inlabel .elementor-field-label > .epff-tooltip-icon {
	margin: 0 0 0 6px;
	vertical-align: 1px;
	pointer-events: auto;
	cursor: help;
}
/* Required mark, in-label variant: Elementor's "*" is the label's ::after and
   always paints after our appended icon ("Phone (i) *"). The runtime injects a
   real star before the icon instead — suppress the pseudo twin. */
.epff-tt-inlabel .elementor-field-label::after { content: none !important; }
.epff-req {
	color: var(--epff-error, #D92D20);
	padding-left: .2em;
}
/* Sibling variant (labels above the field): Elementor's labels-above layout
   gives every label width:100%, which forces the sibling icon onto the next
   flex line — under the label instead of beside it. Shrink-wrap the label in
   groups that actually carry a tooltip, leaving room for the icon. */
form.epff-scope:not(.epff-float) .epff-tt-labelled:not(.epff-tt-inlabel) > .elementor-field-label:not(.elementor-screen-only) {
	width: auto !important;
	max-width: calc(100% - 30px);
}
/* And align the icon to the label's own text line, not the flex line's centre
   — a "Label → input gap" margin otherwise pulls the icon down off the label. */
.epff-tt-labelled:not(.epff-tt-inlabel) > .epff-tooltip-icon {
	align-self: flex-start;
	margin-top: 3px;
	order: 0;
}
/* Floating-label mode, sibling variant only (native date/time): the label is
   position:absolute, so the in-flow sibling icon would orphan at the group's
   top-left. Pin it to the field's top-right — clear of the floated label and
   the native picker control. In-label icons need none of this: they ride the
   floated label itself. */
form.epff-float .epff-tt-labelled { position: relative; }
form.epff-float .epff-tt-labelled:not(.epff-tt-inlabel) > .epff-tooltip-icon {
	position: absolute;
	top: 7px;
	right: 8px;
	bottom: auto;
	left: auto;
	margin: 0 !important;
	z-index: 4;
}
/* Floated labels shrink and clip (ellipsis) — keep the riding icon inside the
   label's line box so the clip never slices it. */
form.epff-float .epff-tt-inlabel .elementor-field-label > .epff-tooltip-icon {
	width: 13px !important;
	height: 13px !important;
	min-width: 13px !important;
	min-height: 13px !important;
	max-width: 13px !important;
	max-height: 13px !important;
	font-size: 8px !important;
	vertical-align: -1px;
}
/* Positioned ancestors ONLY where the plugin anchors absolute UI (tooltip
   bubbles, the select2 dropdown). A bare `.elementor-field-group` rule here
   would silently change the containing block on every Elementor form on the
   site — including forms this plugin never touches. */
[data-epff-tooltip],
.epff-select2-wrapper { position: relative; }
.epff-help-text {
	display: block;
	margin-top: 5px;
	font-size: .82em;
	opacity: .7;
}

/* Places suggestions --------------------------------------------------- */
.epff-places-list {
	position: absolute;
	z-index: 30;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 8px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
	overflow: hidden;
	margin-top: 4px;
}
.epff-places-item {
	padding: 9px 12px;
	font-size: .92em;
	cursor: pointer;
	color: #222;
}
.epff-places-item:hover, .epff-places-item.is-active { background: rgba(0, 0, 0, .06); }

/* Repeater ------------------------------------------------------------- */
/* The aggregate store is a TEXT input (hidden inputs skip constraint
   validation, which would break `required`) — visually removed but still
   focusable so reportValidity() can anchor its message. */
.epff-repeater { position: relative; }
.epff-repeater__store {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	border: 0;
	padding: 0;
	margin: 0;
	pointer-events: none;
}

.epff-repeater__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	margin-bottom: 10px;
}
.epff-repeater__col { flex: 1 1 120px; display: flex; flex-direction: column; }
.epff-repeater__collabel { font-size: .8em; margin-bottom: 4px; opacity: .75; }
.epff-repeater__cell { padding: 9px 11px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 6px; font: inherit; width: 100%; }
.epff-repeater__remove.epff-repeater__remove {
	flex: 0 0 auto;
	width: 32px;
	height: 38px;
	border: 0 !important;
	background: transparent !important;
	color: inherit;
	opacity: .5;
	font-size: 18px;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.epff-repeater__remove:hover { opacity: 1; }
.epff-repeater__add.epff-repeater__add {
	/* Plugin-only chrome — keep the intended dashed outline and transparent fill
	   under `button { … !important }` themes. */
	border: 1px dashed rgba(0, 0, 0, .3) !important;
	background: transparent !important;
	border-radius: 6px;
	padding: 8px 14px;
	cursor: pointer;
	font: inherit;
	font-size: .9em;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.epff-repeater__add.epff-repeater__add:hover { border-style: solid !important; }

/* Select2 inside Elementor forms — skinned to match the input system ---- */
.epff-select2-wrapper .select2-container { width: 100% !important; }
/* Outrank select2's own `.select2-container--default .select2-selection--*`
   (a specificity tie loses on load order). */
.epff-select2-wrapper .select2-container .select2-selection--single,
.epff-select2-wrapper .select2-container .select2-selection--multiple {
	border-color: var(--epff-border, #D0D5DD);
}
.epff-select2-wrapper .select2-selection--single,
.epff-select2-wrapper .select2-selection--multiple {
	min-height: 48px;
	display: flex;
	align-items: center;
	background: var(--epff-field-bg, #fff);
	border: 1px solid var(--epff-border, #D0D5DD);
	border-radius: var(--epff-radius, 8px);
	padding: 4px 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.epff-select2-wrapper .select2-container--focus .select2-selection--single,
.epff-select2-wrapper .select2-container--open .select2-selection--single,
.epff-select2-wrapper .select2-container--focus .select2-selection--multiple {
	border-color: var(--epff-accent, #5D3FD3);
	box-shadow: var(--epff-ring, 0 0 0 4px rgba(93, 63, 211, .13));
	outline: none;
}
.epff-select2-wrapper .select2-selection__rendered {
	line-height: 1.4 !important;
	padding: 0 !important;
	color: var(--epff-ink, #101828);
}
/* Single select: keep clearance so long values ellipsize BEFORE the arrow. */
.epff-select2-wrapper .select2-selection--single .select2-selection__rendered {
	padding: 0 24px 0 0 !important;
}
.epff-select2-wrapper .select2-selection__placeholder { color: var(--epff-muted, #667085); }
.epff-select2-wrapper .select2-selection__arrow {
	height: 100% !important;
	top: 0 !important;
	right: 10px !important;
}
.epff-select2-wrapper .select2-selection__clear {
	font-size: 18px;
	color: var(--epff-muted, #667085);
	margin-right: 16px;
	order: 2;
}
.epff-select2-wrapper .select2-dropdown {
	background: var(--epff-field-bg, #fff);
	color: var(--epff-ink, #101828);
	border: 1px solid var(--epff-border, #D0D5DD);
	border-radius: var(--epff-radius, 8px);
	box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
	overflow: hidden;
	margin-top: 4px;
}
/* Class-targeted dropdown skin (select2 dropdownCssClass): reaches the panel
   WHEREVER select2 attaches it, and asserts an opaque background + stacking so
   neither a theme's transparent override nor a missing select2 stylesheet can
   leave the list see-through over the field below it. */
.select2-dropdown.epff-s2-drop {
	background: var(--epff-field-bg, #fff) !important;
	color: var(--epff-ink, #101828);
	border: 1px solid var(--epff-border, #D0D5DD) !important;
	border-radius: var(--epff-radius, 8px);
	box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
	overflow: hidden;
	margin-top: 4px;
	z-index: 1056 !important;
}
.epff-s2-drop .select2-results__options { background: var(--epff-field-bg, #fff); max-height: 260px; overflow-y: auto; }
.epff-s2-drop .select2-results__option { padding: 10px 14px; font-size: .95em; color: var(--epff-ink, #101828); background: var(--epff-field-bg, #fff); }
.epff-s2-drop .select2-results__option--highlighted[aria-selected] { background: var(--epff-accent, #5D3FD3) !important; color: #fff !important; }
.epff-s2-drop .select2-results__option[aria-selected="true"] { background: var(--epff-accent-soft, rgba(93, 63, 211, .13)); color: var(--epff-ink, #101828); }
/* While open, lift the owning field group above sibling groups whose
   transforms (enhanced entrance, step transitions, focus lift) form stacking
   contexts that would otherwise paint over the dropdown. */
.elementor-field-group.epff-s2-open {
	position: relative;
	z-index: 90;
}
.epff-select2-wrapper .select2-results__option {
	padding: 10px 14px;
	font-size: .95em;
	color: inherit;
}
.epff-select2-wrapper .select2-results__option--highlighted[aria-selected] {
	background: var(--epff-accent, #5D3FD3);
	color: #fff;
}
.epff-select2-wrapper .select2-results__option[aria-selected="true"] {
	background: var(--epff-accent-soft, rgba(93, 63, 211, .13));
	color: var(--epff-ink, #101828);
}
.epff-select2-wrapper .select2-search--dropdown { padding: 8px; }
.epff-select2-wrapper .select2-search__field {
	background: var(--epff-field-bg, #fff);
	color: var(--epff-ink, #101828);
	border: 1px solid var(--epff-border, #D0D5DD) !important;
	border-radius: 6px;
	padding: 8px 10px !important;
	font-size: 16px; /* Prevents iOS zoom. */
}
.epff-select2-wrapper .select2-selection--multiple .select2-selection__choice {
	background: var(--epff-accent-soft, rgba(93, 63, 211, .13));
	color: var(--epff-accent, #5D3FD3);
	border: none;
	border-radius: 6px;
	padding: 3px 8px;
	margin: 3px 4px 3px 0;
	font-size: .85em;
}

/* flatpickr accent (driven by the widget's style control) --------------
   Scoped to .epff-cal (added by fields.js on OUR calendar instances only):
   flatpickr appends calendars to <body>, so an unscoped rule would recolor
   every other flatpickr on the page — Pro's own date fields, theme widgets. */
.epff-cal .flatpickr-day.selected,
.epff-cal .flatpickr-day.selected:hover {
	background: var(--epff-cal-accent, #111);
	border-color: var(--epff-cal-accent, #111);
}

/* Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.epff-reveal,
	.epff-enter,
	.epff-exit,
	.epff-conv .epff-step,
	.epff-progress__bar,
	.epff-success__button {
		transition: none !important;
		animation: none !important;
	}
	.epff-reveal,
	.epff-enter {
		opacity: 1 !important;
		transform: none !important;
	}
	.epff-check__circle,
	.epff-check__mark {
		animation: none !important;
		stroke-dashoffset: 0 !important;
	}
	.epff-confetti { display: none !important; }
}

/* ======================================================================
   v3 DESIGN SYSTEM
   Token-driven: every value is a CSS custom property on the form scope,
   so Elementor style controls (which target the same properties) always
   win. These are considered DEFAULTS, not a locked look.
   ====================================================================== */
form.epff-scope {
	--epff-accent: #5D3FD3;
	--epff-accent-soft: rgba(93, 63, 211, .13);
	--epff-ring: 0 0 0 4px var(--epff-accent-soft);
	--epff-error: #D92D20;
	--epff-error-soft: rgba(217, 45, 32, .12);
	--epff-radius: 8px;
	--epff-border: #D0D5DD;
	--epff-ink: #101828;
	--epff-muted: #667085;
	--epff-field-bg: #fff;
	/* Success checkmark defaults to the brand accent so one accent color keeps
	   the whole flow coherent; set --epff-check to e.g. a green for classic
	   success semantics. */
	--epff-check: var(--epff-accent);
	--epff-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Immersive (Typeform-style) conversational presentation --------------
   What makes Typeform feel like Typeform, mapped 1:1: the QUESTION dominates;
   the active question sits comfortably centred; answers are a clean underline;
   choices are key-lettered cards; chrome stays out of the way. Works with BOTH
   conversational engines — the own-step engine (.epff-step--active) and
   Elementor's native Steps (.e-form__step). Floating labels are disabled by the
   runtime here (the label IS the question), and author column widths are
   ignored: one question per screen means every field is full-width. */
form.epff-immersive .epff-step.epff-step--active,
form.epff-immersive .e-form__step:not(.elementor-hidden) {
	min-height: 36vh;
	display: flex;
	flex-direction: column;
	/* SAFE centring: when the question + error message outgrow 36vh, plain
	   center overflows both ways and the question label slides up under the
	   progress bar. safe falls back to start instead of clipping. */
	justify-content: safe center;
	align-items: stretch;
	flex-wrap: nowrap;
}
/* Author column widths (33%/50%…) are meaningless one-question-at-a-time —
   discard them so a half-width field never shares its screen with the nav. */
form.epff-immersive .elementor-field-group:not(.elementor-field-type-submit) {
	width: 100% !important;
	max-width: 100% !important;
	/* flex-basis must stay AUTO: inside the column-flex step the main axis is
	   VERTICAL, so a 100% basis would hand every group an equal slice of the
	   step's height — stretching short groups and overlapping tall ones. */
	flex: 0 0 auto !important;
}
/* Same trap one level down: in the OWN-step engine the field group itself IS
   the flex step, so its children (label, input, message) become column items —
   Elementor's flex-basis:100% on .elementor-field then means 100% of the
   step's HEIGHT, ballooning a single text input to ~250px with the underline
   marooned far below the text. Children always size to content. */
form.epff-immersive .epff-step.epff-step--active > .elementor-field,
form.epff-immersive .epff-step.epff-step--active > .elementor-field-textual,
form.epff-immersive .epff-step.epff-step--active > .elementor-select-wrapper,
form.epff-immersive .epff-step.epff-step--active > .elementor-field-subgroup {
	flex: 0 0 auto !important;
	height: auto;
}
/* Multi-question steps: give each question breathing room so a heading binds
   to ITS OWN input below, not the previous answer's underline above. */
form.epff-immersive .e-form__step .elementor-field-group:not(:first-child):not(.e-form__buttons),
form.epff-immersive .epff-step .elementor-field-group:not(:first-child) {
	margin-top: 28px;
}
form.epff-immersive .epff-step .elementor-field-label,
form.epff-immersive .e-form__step .elementor-field-label {
	position: static !important;
	transform: none !important;
	pointer-events: auto !important;
	font-size: 1.45em !important;
	line-height: 1.3;
	font-weight: 600 !important;
	color: var(--epff-ink) !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	max-width: 34em !important;
	white-space: normal !important;
	overflow: visible !important;
	background: none !important;
}
form.epff-immersive .epff-step .elementor-field-textual,
form.epff-immersive .e-form__step .elementor-field-textual,
form.epff-immersive .epff-step select.elementor-field,
form.epff-immersive .e-form__step select.elementor-field {
	border: 0 !important;
	/* A clearly visible underline (accent-tinted) so an empty answer still
	   reads as an input on a blank centred screen. */
	border-bottom: 3px solid color-mix(in srgb, var(--epff-accent) 45%, var(--epff-border)) !important;
	border-radius: 0 !important;
	background: transparent;
	padding: 8px 2px !important;
	font-size: 1.2em;
	min-height: 0;
	box-shadow: none;
}
form.epff-immersive .epff-step .elementor-field-textual:focus,
form.epff-immersive .e-form__step .elementor-field-textual:focus,
form.epff-immersive .epff-step select.elementor-field:focus,
form.epff-immersive .e-form__step select.elementor-field:focus {
	border-bottom-color: var(--epff-accent) !important;
	box-shadow: none;
	outline: none;
}
form.epff-immersive .epff-step textarea.elementor-field-textual,
form.epff-immersive .e-form__step textarea.elementor-field-textual {
	border: 2px solid var(--epff-border) !important;
	border-radius: var(--epff-radius);
	padding: 12px !important;
	font-size: 1.05em;
	min-height: 110px;
	max-height: 40vh;
}
/* File inputs keep their boxed look — an underline file control reads broken. */
form.epff-immersive .epff-step input[type="file"],
form.epff-immersive .e-form__step input[type="file"] {
	border: 1.5px solid var(--epff-border) !important;
	border-radius: var(--epff-radius);
	padding: 8px 10px !important;
}
form.epff-immersive .epff-step .elementor-field-textual::placeholder,
form.epff-immersive .e-form__step .elementor-field-textual::placeholder {
	color: var(--epff-muted);
	opacity: .8;
}
/* Error state stays an underline: the boxed focus/error ring of the standard
   skin reads as a sudden rectangle around a borderless control. The 3px
   underline itself turns red via the shared border-color rule. */
form.epff-immersive .epff-invalid .elementor-field-textual:not(textarea),
form.epff-immersive .elementor-error .elementor-field-textual:not(textarea),
form.epff-immersive .epff-step .elementor-field-textual:not(textarea):focus,
form.epff-immersive .e-form__step .elementor-field-textual:not(textarea):focus {
	box-shadow: none !important;
}
/* Inline validation sits under the underline on its own line, never floating
   mid-void: pin the message right below the control it belongs to. */
form.epff-immersive .epff-error-msg,
form.epff-immersive .elementor-form-help-inline {
	display: block;
	width: 100%;
	margin-top: 8px;
	order: 99;
}
/* Choice cards: each option is a full-width bordered card with its key-letter
   badge; the subgroup stacks them (Elementor's flex-row would shrink them to
   text width, and its 100% flex-basis becomes HEIGHT in a column). */
form.epff-immersive .elementor-field-subgroup {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 0;
}
form.epff-immersive .elementor-field-subgroup .elementor-field-option {
	display: block;
	width: auto;
	max-width: 26em;
	flex: 0 0 auto;
	height: auto;
	position: relative;
	border: 1.5px solid var(--epff-border);
	border-radius: var(--epff-radius);
	background: var(--epff-field-bg);
	padding: 12px 16px;
	margin: 0 0 10px;
	cursor: pointer;
	transition: border-color .12s ease, background-color .12s ease;
}
form.epff-immersive .elementor-field-subgroup .elementor-field-option:hover {
	border-color: var(--epff-accent);
	background: color-mix(in srgb, var(--epff-accent) 5%, var(--epff-field-bg));
}
form.epff-immersive .elementor-field-subgroup .elementor-field-option:has(input:checked) {
	border-color: var(--epff-accent);
	background: var(--epff-accent-soft);
}
form.epff-immersive .elementor-field-subgroup .elementor-field-option label {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.05em;
}
/* The card IS the control: park the native radio/checkbox invisibly over the
   card (still focusable and label-clickable); border/background + key badge
   carry the state; keyboard focus surfaces on the card. */
form.epff-immersive .elementor-field-option input[type="radio"],
form.epff-immersive .elementor-field-option input[type="checkbox"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}
form.epff-immersive .elementor-field-option:has(input:focus-visible) {
	border-color: var(--epff-accent);
	box-shadow: var(--epff-ring);
}
.epff-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 4px;
	border: 1.5px solid var(--epff-accent);
	border-radius: 4px;
	color: var(--epff-accent);
	background: var(--epff-field-bg);
	font: 700 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	flex: 0 0 auto;
	user-select: none;
}
form.epff-immersive .elementor-field-option:has(input:checked) .epff-key {
	background: var(--epff-accent);
	color: #fff;
}
/* The nav reads as an affirmation, Typeform's "OK". */
form.epff-immersive .epff-nav__btn.epff-nav__btn {
	padding: 12px 26px;
	font-size: 1.05em;
	font-weight: 600;
}
/* Native-steps buttons row: keep it a clean full-width row under the question. */
form.epff-immersive .e-form__buttons {
	width: 100% !important;
	max-width: 100% !important;
}

/* Multi-column rows: Elementor stretches every field group in a row to the
   tallest sibling and centers the group's content (`align-items: center`), so
   when ONE field shows an inline validation error (its group grows by the
   message height) every OTHER input in the row drops toward the middle of its
   stretched box — inputs sit "on different levels" and floating labels, which
   anchor to the group's top edge, visually detach upward from their input.
   Pack content to the TOP instead so an input's position never depends on a
   sibling's error state. The group is a wrapping flex container whose children
   (label / input / message) are full-width lines, so align-content is the
   governing property. Submit buttons keep Elementor's centering. */
form.epff-scope .elementor-field-group:not(.elementor-field-type-submit) {
	align-content: flex-start;
}

/* --- File upload: give the native "Choose File" control a consistent skin -
   the browser default button looks out of place next to the styled fields. */
form.epff-scope .elementor-field-type-upload input[type="file"] {
	font-size: max(14px, .9rem);
	color: var(--epff-muted, #667085);
	padding: 8px 10px;
	border: 1px solid var(--epff-border, #D0D5DD);
	border-radius: var(--epff-radius, 8px);
	background: var(--epff-field-bg, #fff);
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;
}
form.epff-scope .elementor-field-type-upload input[type="file"]::file-selector-button,
form.epff-scope .elementor-field-type-upload input[type="file"]::-webkit-file-upload-button {
	background: var(--epff-accent) !important;
	color: #fff !important;
	font: inherit;
	font-weight: 600;
	margin-right: 12px;
	padding: 8px 14px;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .15s ease;
}
form.epff-scope .elementor-field-type-upload input[type="file"]:hover::file-selector-button {
	opacity: .9;
}

/* --- Inputs: states per the Untitled-UI reference ---------------------- */
form.epff-scope .elementor-field-group .elementor-field-textual,
form.epff-scope .elementor-field-group select.elementor-field,
form.epff-scope .epff-repeater__cell {
	border-radius: var(--epff-radius);
	border-color: var(--epff-border);
	/* >=16px stops iOS Safari from auto-zooming on focus (it zooms any control
	   under 16px); max() honors a theme that intentionally uses larger inputs.
	   Matches the guard already on the Select2 search box. */
	font-size: max(16px, 1rem);
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* One control height across the row: text inputs, native selects and the
   Select2 box all sit at 48px so mixed rows line up (textarea and file keep
   their own sizing). */
form.epff-scope .elementor-field-group input.elementor-field-textual:not([type="file"]),
form.epff-scope .elementor-field-group select.elementor-field:not([multiple]),
form.epff-scope .elementor-field-group select.elementor-field-textual:not([multiple]) {
	min-height: 48px;
}
form.epff-scope .elementor-field-group .elementor-field-textual:hover:not(:focus):not(:disabled) {
	border-color: color-mix(in srgb, var(--epff-border) 40%, var(--epff-ink));
}
form.epff-scope .elementor-field-group .elementor-field-textual:focus,
form.epff-scope .elementor-field-group select.elementor-field:focus,
form.epff-scope .epff-repeater__cell:focus {
	outline: none;
	border-color: var(--epff-accent);
	box-shadow: var(--epff-ring);
}
form.epff-scope .elementor-field-group .elementor-field-textual:disabled {
	background: #F9FAFB;
	color: var(--epff-muted);
	cursor: not-allowed;
}
/* Error state: red ring + inline exclamation icon inside the field. */
form.epff-scope .elementor-error .elementor-field-textual,
form.epff-scope .epff-invalid .elementor-field-textual {
	border-color: var(--epff-error) !important;
	box-shadow: 0 0 0 4px var(--epff-error-soft);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23D92D20' stroke-width='1.4'/%3E%3Cpath d='M8 4.5v4' stroke='%23D92D20' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.2' r='.9' fill='%23D92D20'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 38px !important;
}
/* The in-input error "!" lives at the input's right edge — exactly where some
   fields already have their OWN right-side control. Where it would collide,
   drop it (the red ring + inline message still signal the error clearly):
   native <select> (dropdown arrow), native date/time pickers (calendar/clock),
   and — in floating-label mode — a tooltip icon pinned to the input's corner. */
form.epff-scope .epff-invalid select,
form.epff-scope .elementor-error select,
form.epff-scope .epff-invalid input[type="date"],
form.epff-scope .elementor-error input[type="date"],
form.epff-scope .epff-invalid input[type="file"],
form.epff-scope .elementor-error input[type="file"],
form.epff-scope .epff-invalid input[type="time"],
form.epff-scope .elementor-error input[type="time"],
form.epff-scope .epff-invalid input[type="datetime-local"],
form.epff-scope .epff-invalid input[type="month"],
form.epff-scope .epff-invalid input[type="week"],
form.epff-float .epff-tt-labelled.epff-invalid .elementor-field-textual,
form.epff-float .epff-tt-labelled.elementor-error .elementor-field-textual {
	background-image: none !important;
}
form.epff-float .epff-tt-labelled.epff-invalid .elementor-field-textual,
form.epff-float .epff-tt-labelled.elementor-error .elementor-field-textual {
	padding-right: 14px !important;
}
.epff-error-msg, .elementor-form-help-inline { transition: opacity .2s ease; }
/* Force the inline validation message onto its own full-width line. Elementor's
   help-inline is inline by default, so beside a field it steals horizontal
   space and the field shrinks out of alignment with its neighbours. */
form.epff-scope .elementor-field-group > .elementor-form-help-inline,
form.epff-scope .elementor-field-group > .epff-error-msg {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	margin-top: 6px;
}
/* Elementor appends the select2 field's error INSIDE the select wrapper (the
   input's parent). Lay the wrapper out as a column and push any message to the
   end, so it always sits below the box instead of overlapping it. */
form.epff-scope .epff-select2-wrapper {
	display: flex;
	flex-direction: column;
}
form.epff-scope .epff-select2-wrapper .elementor-form-help-inline {
	order: 99;
	display: block;
	width: 100%;
	margin-top: 6px;
}

/* --- In-field tooltip icon (right-aligned inside the input) ------------ */
.epff-tt-infield { position: relative; }
.epff-tt-infield .elementor-field-textual { padding-right: 40px; }
/* Native date/time keep their own right-corner control (calendar/clock): the
   in-field icon insets left of it, and the input clears room for both. */
.epff-tt-infield.epff-tt-native .elementor-field-textual { padding-right: 68px !important; }
.epff-tt-infield.epff-tt-native .epff-tooltip-icon { right: 42px; }
.epff-tt-infield.epff-tt-native.epff-invalid .epff-tooltip-icon,
.epff-tt-infield.epff-tt-native.elementor-error .epff-tooltip-icon { right: 42px; }
[dir="rtl"] .epff-tt-infield.epff-tt-native .epff-tooltip-icon { right: auto; left: 42px; }
[dir="rtl"] .epff-tt-infield.epff-tt-native .elementor-field-textual { padding-right: 12px; padding-left: 68px !important; }
.epff-tt-infield .epff-tooltip-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 0;
	z-index: 3;
}
/* On an ERRORED in-field-tooltip field the icon BECOMES the red error mark
   (a solid red circle with a "!") instead of showing a purple "?" next to the
   input's separate error icon. The input's own injected "!" is suppressed so
   there is exactly ONE indicator — and hovering it still reveals the help. */
.epff-tt-infield.epff-invalid .elementor-field-textual,
.epff-tt-infield.elementor-error .elementor-field-textual {
	background-image: none !important;
	padding-right: 40px !important;
}
.epff-tt-infield.epff-invalid .epff-tooltip-icon,
.epff-tt-infield.elementor-error .epff-tooltip-icon {
	right: 12px;
	--epff-tt-bg: var(--epff-error, #D92D20);
	--epff-tt-color: #ffffff;
	--epff-tt-bg-hover: var(--epff-error, #D92D20);
	--epff-tt-color-hover: #ffffff;
	font-size: 0 !important;
}
/* Use ::before for the "!" — ::after is already the invisible 44px touch
   hit-area (position:absolute), so putting the glyph there rendered it
   off-centre. ::before is a normal flex child and centres in the circle. */
.epff-tt-infield.epff-invalid .epff-tooltip-icon::before,
.epff-tt-infield.elementor-error .epff-tooltip-icon::before {
	content: "!";
	font: 700 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	color: #ffffff;
}

/* --- Buttons: reference states (hover / focus ring / active / disabled) */
form.epff-scope .elementor-field-type-submit .elementor-button,
.epff-nav__btn, .epff-tabbar__tab, .epff-repeater__add {
	transition: transform .12s var(--epff-ease), box-shadow .15s ease, background-color .15s ease, opacity .15s ease;
}
form.epff-scope .elementor-field-type-submit .elementor-button:hover,
.epff-nav__next:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(16, 24, 40, .14);
}
form.epff-scope .elementor-field-type-submit .elementor-button:active,
.epff-nav__btn:active {
	transform: translateY(0) scale(.985);
	box-shadow: none;
}
form.epff-scope .elementor-field-type-submit .elementor-button:focus-visible,
.epff-nav__btn:focus-visible,
.epff-tabbar__tab:focus-visible {
	outline: none;
	box-shadow: var(--epff-ring);
}
form.epff-submitting .elementor-field-type-submit .elementor-button,
.epff-nav__btn--loading {
	opacity: .85;
	pointer-events: none;
}

/* --- Floating labels (label inside the field, shrinks on focus/value) -- */
/* Robust across themes: high-specificity, per-field-type behavior.
   - Text-like inputs: label rests over the input, floats up on focus/value.
   - Selects & Select2: label ALWAYS floated (a select always displays text).
   - Textarea: label anchored top, floats to the very top edge.
   - Choice/upload/submit groups: normal labels (floating makes no sense).
   - Groups with NO visible label (Show Labels off / screen-only) are marked
     .epff-no-float by JS and excluded — their placeholders must stay visible
     and their inputs keep normal geometry. */
.epff-float .elementor-field-group { position: relative; }
form.epff-float .elementor-field-group > .elementor-field-label:not(.elementor-screen-only) {
	position: absolute;
	left: 13px;
	/* Anchor to the input's own protected geometry (56px min-height below),
	   NOT the group's center — help text and error messages appended inside
	   the group must never push the label off the input. */
	top: 28px;
	transform: translateY(-50%);
	margin: 0 !important;
	padding: 0 4px;
	font-size: 1em;
	line-height: 1.2;
	color: var(--epff-muted);
	pointer-events: none;
	transition: all .16s var(--epff-ease);
	background: transparent;
	z-index: 2;
	max-width: calc(100% - 32px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	width: auto;
}
form.epff-float .elementor-field-group:focus-within > .elementor-field-label:not(.elementor-screen-only),
form.epff-float .elementor-field-group.epff-has-value > .elementor-field-label:not(.elementor-screen-only),
form.epff-float .elementor-field-group.epff-always-float > .elementor-field-label:not(.elementor-screen-only) {
	top: 8px;
	transform: none;
	font-size: .72em;
	font-weight: 600;
	color: var(--epff-accent);
	letter-spacing: .02em;
	text-decoration: none;
}
/* Error state: recolor ONLY — the label must stay floated, never drop back. */
form.epff-float .elementor-field-group.epff-invalid > .elementor-field-label:not(.elementor-screen-only),
form.epff-float .elementor-field-group.elementor-error > .elementor-field-label:not(.elementor-screen-only) {
	color: var(--epff-error);
	text-decoration: none;
}
/* The floated label lives in the input's top 22px — that clearance is
   PROTECTED geometry (!important): the plugin's own Input padding control
   and theme input skins emit higher-specificity `padding` shorthands that
   would otherwise put typed text underneath the label. Right/bottom/left
   padding still compose with user controls. */
form.epff-float .elementor-field-group:not(.epff-no-float) .elementor-field-textual,
form.epff-float .elementor-field-group:not(.epff-no-float) select.elementor-field {
	padding-top: 22px !important;
	padding-bottom: 8px;
	min-height: 56px;
}
/* EXACT height for single-line controls in float mode: differing UA border/
   line-height defaults left native dates 2px taller than native selects in the
   same row. Textareas and file inputs keep their own sizing. */
form.epff-float .elementor-field-group:not(.epff-no-float) input.elementor-field-textual:not([type="file"]),
form.epff-float .elementor-field-group:not(.epff-no-float) select.elementor-field:not([multiple]),
form.epff-float .elementor-field-group:not(.epff-no-float) select.elementor-field-textual:not([multiple]) {
	height: 56px;
}
form.epff-float .elementor-field-group:not(.epff-no-float) .elementor-field-textual::placeholder { color: transparent; transition: color .15s ease; }
form.epff-float .elementor-field-group:not(.epff-no-float):focus-within .elementor-field-textual::placeholder { color: var(--epff-muted); }

/* SELECTS (native + Form Flow Select): label permanently floated. */
form.epff-float .elementor-field-type-select > .elementor-field-label:not(.elementor-screen-only),
form.epff-float .elementor-field-type-epff_select2 > .elementor-field-label:not(.elementor-screen-only) {
	top: 8px;
	transform: none;
	font-size: .72em;
	font-weight: 600;
	letter-spacing: .02em;
}
form.epff-float .elementor-field-type-epff_select2:not(.epff-no-float) .select2-selection--single,
form.epff-float .elementor-field-type-epff_select2:not(.epff-no-float) .select2-selection--multiple {
	min-height: 56px;
	padding-top: 18px !important;
}
/* Native HTML5 date/time inputs always paint their format scaffold
   ("dd/mm/yyyy", "--:--") — treat them like selects: label always floated.
   (:has() is a progressive enhancement; without it these fields keep the
   previous resting-label behavior.) */
form.epff-float .elementor-field-group:has(input[type="date"], input[type="time"], input[type="datetime-local"]) > .elementor-field-label:not(.elementor-screen-only) {
	top: 8px;
	transform: none;
	font-size: .72em;
	font-weight: 600;
	letter-spacing: .02em;
}
/* Multi-select listboxes display option ROWS, not a closed value — the
   always-float select treatment would paint the label over the first row.
   Restore a normal static label and normal geometry. */
form.epff-float .elementor-field-type-select:has(select[multiple]) > .elementor-field-label:not(.elementor-screen-only) {
	position: static;
	transform: none;
	pointer-events: auto;
	font-size: 1em;
	white-space: normal;
	color: inherit;
	padding: 0;
	margin: 0 0 8px !important;
	overflow: visible;
	text-overflow: clip;
	max-width: none;
	z-index: auto;
}
form.epff-float .elementor-field-type-select:has(select[multiple]) select.elementor-field {
	padding-top: 8px !important;
	min-height: 0;
}

/* TEXTAREA: label anchored to the top, never vertically centered. An opaque
   backdrop keeps scrolled textarea lines from showing through the label. */
form.epff-float .elementor-field-type-textarea > .elementor-field-label:not(.elementor-screen-only) {
	top: 16px;
	transform: none;
	left: 8px;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--epff-field-bg, #fff);
	max-width: calc(100% - 24px);
}
form.epff-float .elementor-field-type-textarea:focus-within > .elementor-field-label:not(.elementor-screen-only),
form.epff-float .elementor-field-type-textarea.epff-has-value > .elementor-field-label:not(.elementor-screen-only) {
	top: 8px;
}
form.epff-float .elementor-field-type-textarea:not(.epff-no-float) textarea.elementor-field-textual {
	padding-top: 28px !important;
	min-height: 120px;
}

/* Groups where floating makes no sense: restore normal labels COMPLETELY —
   every property the absolute rule above set must be reset here. */
/* These labels sit ABOVE their group's options (a floated label would overlap
   the first radio/checkbox/file/row). !important is required because the base
   float rule (…:not(.elementor-screen-only), specificity 0,4,1) and the
   floated-state rule (.epff-has-value…, 0,5,1) both out-specify this selector
   (0,3,1) — so without !important the labels stay absolutely positioned and
   overlap the field. */
form.epff-float .elementor-field-type-radio > .elementor-field-label:not(.elementor-screen-only),
form.epff-float .elementor-field-type-checkbox > .elementor-field-label:not(.elementor-screen-only),
form.epff-float .elementor-field-type-acceptance > .elementor-field-label:not(.elementor-screen-only),
form.epff-float .elementor-field-type-upload > .elementor-field-label:not(.elementor-screen-only),
form.epff-float .elementor-field-type-epff_repeater > .elementor-field-label:not(.elementor-screen-only) {
	position: static !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	pointer-events: auto !important;
	font-size: 1em !important;
	font-weight: inherit !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
	white-space: normal !important;
	color: inherit !important;
	padding: 0 !important;
	margin: 0 0 8px !important;
	overflow: visible !important;
	text-overflow: clip !important;
	max-width: none !important;
	width: auto !important;
	z-index: auto !important;
	background: none !important;
}
/* And these field types never need the floated-label top padding on their
   control either. */
form.epff-float .elementor-field-type-upload .elementor-field-textual,
form.epff-float .elementor-field-type-upload input[type="file"] {
	padding-top: 8px !important;
	min-height: 0 !important;
}
.epff-float .elementor-field-type-submit, .epff-float .e-form__buttons { position: static; }

/* RTL: mirror every physical offset used by the float/error/select2 skin. */
[dir="rtl"] form.epff-float .elementor-field-group > .elementor-field-label:not(.elementor-screen-only) {
	left: auto;
	right: 13px;
}
[dir="rtl"] form.epff-float .elementor-field-type-textarea > .elementor-field-label:not(.elementor-screen-only) {
	left: auto;
	right: 8px;
}
[dir="rtl"] form.epff-scope .elementor-error .elementor-field-textual,
[dir="rtl"] form.epff-scope .epff-invalid .elementor-field-textual {
	background-position: left 12px center;
	padding-right: 12px !important;
	padding-left: 38px !important;
}
[dir="rtl"] .epff-tt-infield .elementor-field-textual {
	padding-right: 12px;
	padding-left: 40px;
}
[dir="rtl"] .epff-tt-infield .epff-tooltip-icon {
	right: auto;
	left: 12px;
}
/* The errored icon is now the SOLE indicator (the native error icon is
   suppressed), so it no longer needs the 36px shift — mirror LTR's 12px. */
[dir="rtl"] .epff-tt-infield.epff-invalid .epff-tooltip-icon,
[dir="rtl"] .epff-tt-infield.elementor-error .epff-tooltip-icon {
	right: auto;
	left: 12px;
}
[dir="rtl"] .epff-select2-wrapper .select2-selection__arrow {
	right: auto !important;
	left: 10px !important;
}
[dir="rtl"] .epff-select2-wrapper .select2-selection--single .select2-selection__rendered {
	padding: 0 0 0 24px !important;
}

/* --- Tabs mode --------------------------------------------------------- */
.epff-tabbar {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid var(--epff-border);
	margin-bottom: 22px;
	overflow-x: auto;
	scrollbar-width: none;
}
.epff-tabbar::-webkit-scrollbar { display: none; }
.epff-tabbar__tab.epff-tabbar__tab {
	/* Plugin-only chrome (no user style control) — armour every theme-abusable
	   property with !important so `button { … !important }` themes can't repaint
	   the step tabs. */
	border: 0 !important;
	background: transparent !important;
	font: inherit;
	font-weight: 600 !important;
	color: var(--epff-muted) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	padding: 10px 16px 12px;
	cursor: pointer;
	position: relative;
	white-space: nowrap;
	border-radius: var(--epff-radius) var(--epff-radius) 0 0;
}
.epff-tabbar__tab.epff-tabbar__tab:hover { color: var(--epff-ink) !important; background: var(--epff-accent-soft) !important; }
.epff-tabbar__tab.epff-tabbar__tab.is-active { color: var(--epff-accent) !important; }
.epff-tabbar__tab.is-active::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: -2px;
	height: 2px;
	background: var(--epff-accent);
	border-radius: 2px;
}
.epff-tabbar__tab.is-done { color: var(--epff-ink); }
.epff-tabbar__tab.is-done::before { content: "✓ "; color: var(--epff-accent); font-weight: 700; }

/* --- Conditional visibility -------------------------------------------- */
.epff-cond-hidden { display: none !important; }

/* --- Animated Icon widget ---------------------------------------------- */
.epff-ai { display: inline-flex; align-items: center; justify-content: center; position: relative; }
.epff-ai__svg { width: 100%; height: 100%; display: block; }
.epff-ai__circle { stroke: currentColor; stroke-width: 2; fill: none; }
.epff-ai__mark { stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.epff-ai--anim-draw .epff-ai__circle { stroke-dasharray: 166; stroke-dashoffset: 166; }
.epff-ai--anim-draw .epff-ai__mark { stroke-dasharray: 48; stroke-dashoffset: 48; }
.epff-ai--anim-draw.is-play .epff-ai__circle { animation: epff-check-stroke .6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.epff-ai--anim-draw.is-play .epff-ai__mark { animation: epff-check-stroke .35s cubic-bezier(0.65, 0, 0.45, 1) .5s forwards; }
.epff-ai--anim-pop.is-play { animation: epff-ai-pop .5s var(--epff-ease) both; }
.epff-ai--anim-bounce.is-play { animation: epff-ai-bounce .8s both; }
.epff-ai--anim-pulse.is-play { animation: epff-ai-pulse 1.6s ease-in-out infinite; }
@keyframes epff-ai-pop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes epff-ai-bounce { 0% { transform: translateY(-28px); opacity: 0; } 40% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(-10px); } 80% { transform: translateY(0); } 90% { transform: translateY(-4px); } 100% { transform: translateY(0); } }
@keyframes epff-ai-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
/* In the editor canvas, always show the drawn state so the widget is visible. */
.elementor-editor-active .epff-ai--anim-draw .epff-ai__circle,
.elementor-editor-active .epff-ai--anim-draw .epff-ai__mark { stroke-dashoffset: 0; }

/* --- Micro-interactions & touch ---------------------------------------- */
.epff-nav__btn, .epff-tabbar__tab, .epff-repeater__add, .epff-repeater__remove,
.epff-tooltip-icon, .epff-places-item {
	-webkit-tap-highlight-color: transparent;
}
@media (pointer: coarse) {
	.epff-nav__btn, .epff-tabbar__tab { min-height: 44px; }
	.epff-tooltip-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; max-width: 22px !important; max-height: 22px !important; }
	.epff-places-item { padding: 13px 14px; }
	.epff-repeater__remove { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.epff-ai, .epff-tabbar__tab,
	form.epff-scope .elementor-field-type-submit .elementor-button {
		transition: none !important;
		animation: none !important;
	}
	.epff-ai--anim-draw .epff-ai__circle, .epff-ai--anim-draw .epff-ai__mark { stroke-dashoffset: 0 !important; }
}

/* Touch: 44px hit area for the 15/22px tooltip icon without growing it. */
.epff-tooltip-icon { position: relative; }
.epff-tooltip-icon::after {
	content: "";
	position: absolute;
	inset: -12px;
}
.epff-tt-infield .epff-tooltip-icon::after { inset: -11px; }
/* A label-position icon sits directly above the field's content (the input, or
   a radio/checkbox group's first option). Keep the generous top/left/right hit
   area but trim it at the BOTTOM so the invisible touch target can't overlap —
   and steal taps from — whatever sits immediately below the label row. */
.epff-tt-labelled .epff-tooltip-icon::after { inset: -12px -12px -2px -12px; }