/**
 * JMeks stepped layout for Elementor Pro forms (.jmeks-stepped-yes).
 *
 * jmeks-stepped-form.js gives every .e-form__step a header and moves its
 * fields into a body; data-jmeks-sf on the step says which it is: current,
 * done (before it), next (the one after) or ahead. Every step shows its
 * header; only the current one's body is open.
 *
 * Selectors carry the widget and form classes on purpose: Elementor's own
 * control CSS is written as `.elementor-N .elementor-element.elementor-element-
 * ID .target` (four classes), and several of these rules have to beat it.
 *
 * Knobs (Style > JMeks stepped layout sets them):
 *   --jmeks-sf-label-color, --jmeks-sf-bullet-size
 *   --jmeks-sf-rule-color / -width
 *   --jmeks-sf-step-gap              between one step and the next header (32px)
 *   --jmeks-sf-body-gap              under an open header, above its fields (24px)
 *   --jmeks-sf-tick-color            finished steps (#1E9E5A)
 *   --jmeks-sf-chip-bg / -color / -on-bg / -on-color / -pad (10px 14px) / -gap
 */

/* Elementor's own indicators and Back / Next buttons: replaced by the headers. */
.elementor-widget-form.jmeks-stepped-yes .e-form__indicators,
.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .e-form__buttons__wrapper:not( .elementor-field-type-submit ) {
	display: none !important;
}

.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .e-form__buttons:not( :has( .elementor-field-type-submit ) ) {
	display: none !important;
}

/*
 * The submit button, on the last step. Elementor's default alignment,
 * Stretch, would make it the full width of the form; in the stepped layout
 * that default means the design's instead: on the right, as wide as its
 * words, like the Next buttons. Start, Center and End (Content > Buttons >
 * Alignment) still do what they say.
 */
.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .e-form__buttons {
	display: flex;
	width: 100%;
}

.elementor-widget-form.jmeks-stepped-yes.elementor-button-align-stretch .jmeks-sf .e-form__buttons {
	justify-content: flex-end;
}

.elementor-widget-form.jmeks-stepped-yes.elementor-button-align-stretch .jmeks-sf .e-form__buttons__wrapper {
	flex: 0 0 auto;
}

.elementor-widget-form.jmeks-stepped-yes.elementor-button-align-stretch .jmeks-sf .e-form__buttons__wrapper__button {
	flex-basis: auto;
	width: auto;
}

/* Every step shows (its header, at least), whatever Elementor hides. */
.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .e-form__step.jmeks-sf__step,
.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .e-form__step.jmeks-sf__step.elementor-hidden {
	display: flex !important;
	flex-wrap: wrap;
	width: 100%;
}

.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .jmeks-sf__step + .jmeks-sf__step {
	margin-top: var( --jmeks-sf-step-gap, 32px );
}

/* -------------------------------------------------------------- headers */

.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .jmeks-sf__head.elementor-field-group {
	display: block;
	width: 100%;
	margin-bottom: 0;
}

.jmeks-sf__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 40px;
	padding: 12px 0;
	border-bottom:
		var( --jmeks-sf-rule-width, 1px )
		solid
		var( --jmeks-sf-rule-color, color-mix( in srgb, var( --jmeks-sf-label-color, var( --e-global-color-primary, #05001c ) ) 25%, transparent ) );
}

/* The title is a button: Hello Elementor's pink button look taken back. */
.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .jmeks-sf__title,
.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .jmeks-sf__title:hover,
.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .jmeks-sf__title:focus,
.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .jmeks-sf__title:disabled {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var( --jmeks-sf-label-color, var( --e-global-color-primary, #05001c ) );
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-align: start;
	opacity: 1;
	cursor: default;
}

.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .jmeks-sf__title::before {
	content: "";
	flex: none;
	width: var( --jmeks-sf-bullet-size, 8px );
	height: var( --jmeks-sf-bullet-size, 8px );
	background: currentColor;
}

/*
 * A finished step's header takes you back to it: the whole row, not just its
 * words. The title's click area is stretched over the bar (the tick is only
 * decoration, and a finished step shows no Next).
 */
.jmeks-sf__bar {
	position: relative;
}

.elementor-widget-form.jmeks-stepped-yes .jmeks-sf [data-jmeks-sf="done"] .jmeks-sf__title {
	position: static;
	cursor: pointer;
}

.elementor-widget-form.jmeks-stepped-yes .jmeks-sf [data-jmeks-sf="done"] .jmeks-sf__title::after {
	content: "";
	position: absolute;
	inset: 0;
}

.elementor-widget-form.jmeks-stepped-yes .jmeks-sf [data-jmeks-sf="done"] .jmeks-sf__bar:hover .jmeks-sf__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.elementor-widget-form.jmeks-stepped-yes .jmeks-sf [data-jmeks-sf="done"] .jmeks-sf__title:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .jmeks-sf__title:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.jmeks-sf__aside {
	display: inline-flex;
	flex: none;
	align-items: center;
}

.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .jmeks-sf__next[hidden],
.jmeks-sf__tick {
	display: none;
}

.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .jmeks-sf__next {
	width: auto;
}

/*
 * Looks disabled until the step is valid; still pressable, to say what is
 * missing. Style > JMeks stepped layout > Buttons before a step is ready sets
 * the opacity and, if wanted, its own colours; colours set there also hold on
 * hover, so the button does not seem to wake up under the pointer while it
 * still can't go.
 */
.elementor-widget-form.jmeks-stepped-yes .jmeks-sf .jmeks-sf__next[aria-disabled="true"],
.elementor-widget-form.jmeks-stepped-yes .jmeks-sf [type="submit"][aria-disabled="true"] {
	opacity: var( --jmeks-sf-disabled-opacity, 0.5 );
	cursor: not-allowed;
}

[data-jmeks-sf="done"] .jmeks-sf__tick {
	display: inline-flex;
	color: var( --jmeks-sf-tick-color, #1e9e5a );
}

/* ----------------------------------------------------------------- body */

.jmeks-sf__body {
	display: grid;
	grid-template-rows: 0fr;
	width: 100%;
	visibility: hidden;
	transition:
		grid-template-rows 300ms cubic-bezier( 0.4, 0, 0.2, 1 ),
		visibility 0s linear 300ms;
}

[data-jmeks-sf="current"] > .jmeks-sf__body {
	grid-template-rows: 1fr;
	visibility: visible;
	transition:
		grid-template-rows 300ms cubic-bezier( 0.4, 0, 0.2, 1 ),
		visibility 0s;
}

.jmeks-sf__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	min-height: 0;
	overflow: hidden;
}

[data-jmeks-sf="current"] .jmeks-sf__inner {
	padding-top: var( --jmeks-sf-body-gap, 24px );
}

/* --------------------------------------------------------------- fields */

/*
 * Everything from here to the chips is the JMeks form look, and applies to any
 * Elementor form with either switch on: "JMeks form style" (Form Fields) for a
 * plain form, or the stepped layout, which includes it. Radios share the chip
 * look with checkboxes.
 */

/*
 * The design's look out of the box: white pills, no border. Elementor's own
 * base rule (1px grey border, 3px corners) is two classes; these are four, so
 * they win over it. Anything set in Style > Field is written as six or more
 * classes into the page's CSS, so the panel still wins over these.
 */
.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form .elementor-field-textual {
	box-sizing: border-box;
	min-height: 44px;
	padding-inline: 16px;
	/*
	 * 16px at every size, not Elementor's 15px (.elementor-field-textual, one
	 * class). Also stops iPhones zooming in on a field under 16px. Style >
	 * Field > Typography is written with more classes, so it still wins.
	 */
	font-size: 16px;
	border: 0;
	border-radius: 999px;
	background-color: #fff;
	/* The design's soft lift; Style > JMeks stepped layout > Field shadow. */
	box-shadow: 0 4px 34px 0 rgba( 0, 0, 0, 0.05 );
	transition: outline-color 0.15s ease;
}

.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form textarea.elementor-field-textual {
	padding-block: 12px;
	border-radius: 20px;
}

.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form .elementor-field-textual::placeholder {
	opacity: 0.45;
}

/* The focus ring is an outline, so it sits on top of the shadow, not in place of it. */
.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form .elementor-field-textual:focus {
	outline: 2px solid color-mix( in srgb, var( --jmeks-sf-label-color, var( --e-global-color-primary, #05001c ) ) 35%, transparent );
	outline-offset: 0;
}

/*
 * Selects: Elementor's filled arrow goes, a thin chevron takes its place,
 * inside the pill's rounded end. It is a mask, so it takes the field's text
 * colour (Style > Field > Text Color).
 */
.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form .elementor-select-wrapper select {
	padding-inline-end: 44px;
}

.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form .elementor-select-wrapper .select-caret-down-wrapper {
	display: none;
}

.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form .elementor-select-wrapper::before {
	content: "" !important;
}

.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form .elementor-select-wrapper::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-end: 18px;
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.25l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.25l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
	transform: translateY( -50% );
	pointer-events: none;
}

/*
 * Required fields get a * after the label, as in the design, whether or not
 * the form's own Required Mark switch is on (that one adds a red * of its
 * own, so this steps aside when it is). A checkbox field classed
 * jmeks-required counts as required.
 */
.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form .elementor-form-fields-wrapper .elementor-field-group:is( .elementor-field-required, :has( .jmeks-required ) ):not( .elementor-mark-required ) > .elementor-field-label::after {
	content: "\00a0*";
}

/* The "Select|" placeholder option: greyed while it is still the choice. */
.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form .elementor-select-wrapper select.jmeks-sf--placeholder {
	color: color-mix( in srgb, currentColor 45%, transparent );
}

.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form .elementor-select-wrapper select option {
	color: var( --e-global-color-primary, #05001c );
}

/*
 * Field labels: primary, 500, 8px above the field. Set here and in Style >
 * JMeks stepped layout > Field labels rather than Elementor's Label controls,
 * whose typography comes pre-set to the site's text style and would override
 * a weight given any other way.
 */
.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form .elementor-form-fields-wrapper .elementor-field-group > .elementor-field-label {
	margin: 0;
	padding-bottom: var( --jmeks-sf-label-gap, 8px );
	color: var( --jmeks-sf-field-label-color, var( --e-global-color-primary, #05001c ) );
	font-weight: 500;
}

/* Next and submit: pills. Colours stay with Style > Buttons and Steps. */
.elementor-widget-form:where( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-button {
	border-radius: 999px;
}

/* ---------------------------------------------------------------- chips */

.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form :is( .elementor-field-type-checkbox, .elementor-field-type-radio ) .elementor-field-subgroup {
	display: flex;
	flex-wrap: wrap;
	gap: var( --jmeks-sf-chip-gap, 8px );
}

.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form :is( .elementor-field-type-checkbox, .elementor-field-type-radio ) .elementor-field-option {
	position: relative;
	display: inline-flex;
	margin: 0;
	padding: 0;
}

/* The box stays in the page for the keyboard and screen readers, unseen. */
.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form :is( .elementor-field-type-checkbox, .elementor-field-type-radio ) .elementor-field-option input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form :is( .elementor-field-type-checkbox, .elementor-field-type-radio ) .elementor-field-option label {
	display: inline-block;
	margin: 0;
	padding: var( --jmeks-sf-chip-pad, 10px 14px );
	border-radius: 999px;
	background: var( --jmeks-sf-chip-bg, #fff );
	color: var( --jmeks-sf-chip-color, var( --e-global-color-primary, #05001c ) );
	font-weight: 500;
	line-height: 1.2;
	/* The fields' soft lift; Style > JMeks stepped layout > Chip shadow. */
	box-shadow: 0 4px 34px 0 rgba( 0, 0, 0, 0.05 );
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}


/*
 * Radio chips (one answer, e.g. Yes / No) sit a touch taller and never
 * narrower than 90px, so short answers read as buttons of the same size.
 * Style > JMeks form > Radio chips.
 */
.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form .elementor-field-type-radio .elementor-field-option label {
	box-sizing: border-box;
	min-width: var( --jmeks-sf-radio-min, 90px );
	padding-block: var( --jmeks-sf-radio-py, 12px );
	text-align: center;
}
.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form :is( .elementor-field-type-checkbox, .elementor-field-type-radio ) .elementor-field-option input:checked + label {
	background: var( --jmeks-sf-chip-on-bg, var( --e-global-color-primary, #05001c ) );
	color: var( --jmeks-sf-chip-on-color, #fff );
}

.elementor-widget-form:is( .jmeks-stepped-yes, .jmeks-styled-yes ) .elementor-form :is( .elementor-field-type-checkbox, .elementor-field-type-radio ) .elementor-field-option input:focus-visible + label {
	outline: 2px solid var( --jmeks-sf-chip-on-bg, var( --e-global-color-primary, #05001c ) );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.jmeks-sf__body,
	[data-jmeks-sf="current"] > .jmeks-sf__body {
		transition: none;
	}
}

/* Editors only: duplicate field IDs (Stepped_Form::warn_duplicate_ids). */
.jmeks-sf-notice {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #1d2327;
	font-size: 14px;
	line-height: 1.4;
}

/*
 * Content > Form Fields > Full-width fields from. Elementor's own field widths
 * exist for Tablet Portrait and Mobile only (a Tablet Landscape value is
 * ignored), so this stacks every field at the chosen size and below. The
 * breakpoints are the site's: Tablet Landscape 1200, Tablet Portrait 1024,
 * Mobile 767; move one in Site Settings and it has to move here too.
 * Four classes, so it beats Elementor's width classes (two).
 */
@media ( max-width: 1200px ) {
	.elementor-widget-form.jmeks-stack-tablet_extra .elementor-form .elementor-field-group.elementor-column {
		width: 100%;
	}
}

@media ( max-width: 1024px ) {
	.elementor-widget-form.jmeks-stack-tablet .elementor-form .elementor-field-group.elementor-column {
		width: 100%;
	}
}

@media ( max-width: 767px ) {
	.elementor-widget-form.jmeks-stack-mobile .elementor-form .elementor-field-group.elementor-column {
		width: 100%;
	}
}