/**
 * Style Customizer v2 — static frontend rule template.
 *
 * The shared half of the "one stylesheet per form" model: these rules READ the
 * `var(--evf-*)` custom properties; the Compiler emits the per-form VALUES as an inline
 * block on `#evf-{id}` (plus tablet/mobile media queries for spacing).
 *
 * SPECIFICITY: every selector is scoped `.everest-forms .evf-style-v2 …` — matching the
 * legacy compiler (`views/scss.php` scopes under `.everest-forms #evf-{id}`) so these
 * token-driven rules reliably beat Everest Forms' generic base frontend CSS (`.everest-forms
 * …`). A user's Custom CSS (injected later, or with its own specificity) can still override.
 *
 * Selectors mirror the legacy `views/scss.php` exactly, so a v2 form styles the same real
 * markup the v1 engine did. Only TOKEN-DRIVEN properties live here; structural CSS stays in
 * the base frontend stylesheet.
 *
 * @package EverestForms\Addons\StyleCustomizer\V2
 */

/* ===== FORM — container + font ===== */
.everest-forms .evf-style-v2.evf-container {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	max-width: var( --evf-wrap-width );
	margin: var( --evf-wrap-margin );
	padding: var( --evf-wrap-pad );
	font-family: var( --evf-font );
	background: var( --evf-wrap-bg );
	border-style: var( --evf-wrap-border-style, solid );
	border-width: var( --evf-wrap-bw );
	border-color: var( --evf-wrap-border-c );
	border-radius: var( --evf-wrap-radius );
}

/* ===== FORM — background image layer (own layer so opacity fades the image, not the content) ===== */
.everest-forms .evf-style-v2.evf-container::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	background-image: var( --evf-wrap-image, none );
	background-size: var( --evf-wrap-bg-size, cover );
	background-position: var( --evf-wrap-bg-position, center );
	background-repeat: var( --evf-wrap-bg-repeat, no-repeat );
	background-attachment: var( --evf-wrap-bg-attachment, scroll );
	opacity: var( --evf-wrap-bg-opacity, 1 );
}

/* ===== TEXT — label ===== */
/* The required-field <abbr> and any tooltip icon render as SIBLINGS of .evf-label inside the
   same <label> (class-evf-shortcode-form.php: `<label>…<span class="evf-label">Text</span>
   <abbr class="required">*</abbr>…</label>`). Font-style props (weight/style/decoration/
   transform) must stay scoped to the .evf-label span — same split legacy scss.php uses — or an
   underline/bold/etc. set on the whole <label> paints across the required mark and tooltip too
   (EVF-2671). Colour/size/spacing are fine on the outer <label> since nothing else there needs
   to look different from the label text. */
.everest-forms .evf-style-v2 label.evf-field-label {
	color: var( --evf-label-color );
	font-size: var( --evf-label-size );
	line-height: var( --evf-label-lh );
	text-align: var( --evf-label-align );
	margin: var( --evf-label-margin );
	padding: var( --evf-label-pad );
}
.everest-forms .evf-style-v2 label.evf-field-label .evf-label {
	font-weight: var( --evf-label-weight );
	font-style: var( --evf-label-fs );
	text-decoration: var( --evf-label-td );
	text-transform: var( --evf-label-tt );
	letter-spacing: var( --evf-label-ls );
}

/* Sublabel */
.everest-forms .evf-style-v2 label.everest-forms-field-sublabel {
	color: var( --evf-sub-color );
	font-size: var( --evf-sub-size );
	line-height: var( --evf-sub-lh );
	text-align: var( --evf-sub-align );
	margin: var( --evf-sub-margin );
	padding: var( --evf-sub-pad );
	font-weight: var( --evf-sub-weight );
	font-style: var( --evf-sub-fs );
	text-decoration: var( --evf-sub-td );
	text-transform: var( --evf-sub-tt );
	letter-spacing: var( --evf-sub-ls );
}

/* Description */
.everest-forms .evf-style-v2 .evf-field-description {
	color: var( --evf-desc-color );
	font-size: var( --evf-desc-size );
	line-height: var( --evf-desc-lh );
	text-align: var( --evf-desc-align );
	margin: var( --evf-desc-margin );
	padding: var( --evf-desc-pad );
	font-weight: var( --evf-desc-weight );
	font-style: var( --evf-desc-fs );
	text-decoration: var( --evf-desc-td );
	text-transform: var( --evf-desc-tt );
	letter-spacing: var( --evf-desc-ls );
}

/* Section title */
.everest-forms .evf-style-v2 .evf-field-title h3 {
	color: var( --evf-title-color );
	font-size: var( --evf-title-size );
	line-height: var( --evf-title-lh );
	text-align: var( --evf-title-align );
	margin: var( --evf-title-margin );
	padding: var( --evf-title-pad );
	font-weight: var( --evf-title-weight );
	font-style: var( --evf-title-fs );
	text-decoration: var( --evf-title-td );
	text-transform: var( --evf-title-tt );
	letter-spacing: var( --evf-title-ls );
}

/* Gradient text (label/sublabel/description/title) — `background-clip: text` paints the
   element's own `background` (solid or gradient, either works identically) through its glyphs
   instead of through the box. Gated on @supports so a browser without it silently keeps the
   plain `color:` declaration above instead of going invisible. Known trade-off: if a
   text-decoration (underline etc.) is ALSO set on one of these tokens, its line uses `color`
   too, so it visually disappears once `color` is forced transparent here — narrow enough
   (underline + gradient text at once) that it isn't worth a dedicated decoration-colour token. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.everest-forms .evf-style-v2 label.evf-field-label {
		background: var( --evf-label-color );
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
	.everest-forms .evf-style-v2 label.everest-forms-field-sublabel {
		background: var( --evf-sub-color );
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
	.everest-forms .evf-style-v2 .evf-field-description {
		background: var( --evf-desc-color );
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
	.everest-forms .evf-style-v2 .evf-field-title h3 {
		background: var( --evf-title-color );
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

/* ===== INPUTS — text boxes, dropdowns, textareas ===== */
.everest-forms .evf-style-v2 input[type='text'],
.everest-forms .evf-style-v2 input[type='email'],
.everest-forms .evf-style-v2 input[type='number'],
.everest-forms .evf-style-v2 input[type='password'],
.everest-forms .evf-style-v2 input[type='datetime'],
.everest-forms .evf-style-v2 input[type='datetime-local'],
.everest-forms .evf-style-v2 input[type='date'],
.everest-forms .evf-style-v2 input[type='time'],
.everest-forms .evf-style-v2 input[type='week'],
.everest-forms .evf-style-v2 input[type='url'],
.everest-forms .evf-style-v2 input[type='tel'],
.everest-forms .evf-style-v2 input[type='file'],
.everest-forms .evf-style-v2 textarea,
.everest-forms .evf-style-v2 select,
.everest-forms .evf-style-v2 canvas.evf-signature-canvas {
	color: var( --evf-input-color );
	font-size: var( --evf-input-size );
	text-align: var( --evf-input-align );
	background: var( --evf-input-bg );
	border-style: var( --evf-input-border-style, solid );
	border-width: var( --evf-input-bw );
	border-color: var( --evf-input-border-c );
	border-radius: var( --evf-input-radius );
	margin: var( --evf-field-margin );
	padding: var( --evf-input-pad );
	font-weight: var( --evf-input-weight );
	font-style: var( --evf-input-fs );
	text-decoration: var( --evf-input-td, none );
	text-transform: var( --evf-input-tt );
	letter-spacing: var( --evf-input-ls );
}

.everest-forms .evf-style-v2 input::placeholder,
.everest-forms .evf-style-v2 textarea::placeholder {
	color: var( --evf-input-ph );
}

.everest-forms .evf-style-v2 input:focus,
.everest-forms .evf-style-v2 textarea:focus,
.everest-forms .evf-style-v2 select:focus {
	border-color: var( --evf-input-focus-border );
}

/* Payment/price readouts follow the input text style */
.everest-forms .evf-style-v2 .evf-payment-total,
.everest-forms .evf-style-v2 .evf-single-item-price {
	color: var( --evf-input-color );
	font-size: var( --evf-input-size );
	text-align: var( --evf-input-align );
}

/* ===== INPUTS — upload area ===== */
.everest-forms .evf-style-v2 .everest-forms-uploader {
	background: var( --evf-file-bg );
	border-style: var( --evf-file-border-style, dashed );
	border-width: var( --evf-file-bw );
	border-color: var( --evf-file-border );
	border-radius: var( --evf-file-radius );
	margin: var( --evf-file-margin );
	padding: var( --evf-file-pad );
}

.everest-forms .evf-style-v2 .everest-forms-uploader .everest-forms-upload-title,
.everest-forms .evf-style-v2 .everest-forms-uploader .everest-forms-upload-hint,
.everest-forms .evf-style-v2 .everest-forms-uploader .dz-details,
.everest-forms .evf-style-v2 .everest-forms-uploader .dz-error-message {
	font-size: var( --evf-file-size );
}

.everest-forms .evf-style-v2 .everest-forms-uploader .everest-forms-upload-title,
.everest-forms .evf-style-v2 .everest-forms-uploader .everest-forms-upload-hint,
.everest-forms .evf-style-v2 .everest-forms-uploader .dz-details span {
	color: var( --evf-file-color );
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.everest-forms .evf-style-v2 .everest-forms-uploader .everest-forms-upload-title,
	.everest-forms .evf-style-v2 .everest-forms-uploader .everest-forms-upload-hint,
	.everest-forms .evf-style-v2 .everest-forms-uploader .dz-details span {
		background: var( --evf-file-color );
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

.everest-forms .evf-style-v2 .everest-forms-uploader .dz-message > svg {
	background: var( --evf-file-iconbg );
	fill: var( --evf-file-icon );
}

/* ===== INPUTS — character limit hint ===== */
.everest-forms .evf-style-v2 .everest-forms-field-limit-text {
	color: var( --evf-limit-color );
}

/* ===== CHOICES — radio, checkbox, and everything that follows them ===== */
.everest-forms .evf-style-v2 .evf-field-radio ul li,
.everest-forms .evf-style-v2 .evf-field-checkbox ul li,
.everest-forms .evf-style-v2 .evf-field-payment-multiple ul li,
.everest-forms .evf-style-v2 .evf-field-payment-checkbox ul li,
.everest-forms .evf-style-v2 .evf-field-privacy-policy,
.everest-forms .evf-style-v2 .evf-field-payment-subscription-plan ul li {
	text-align: var( --evf-choice-align );
	margin: var( --evf-choice-margin );
}

.everest-forms .evf-style-v2 .evf-field-radio ul li input[type='radio'],
.everest-forms .evf-style-v2 .evf-field-radio ul li input[type='checkbox'],
.everest-forms .evf-style-v2 .evf-field-checkbox ul li input[type='radio'],
.everest-forms .evf-style-v2 .evf-field-checkbox ul li input[type='checkbox'],
.everest-forms .evf-style-v2 .evf-field-payment-multiple ul li input[type='radio'],
.everest-forms .evf-style-v2 .evf-field-payment-checkbox ul li input[type='checkbox'],
.everest-forms .evf-style-v2 .evf-field-privacy-policy input[type='checkbox'],
.everest-forms .evf-style-v2 .evf-field-payment-subscription-plan ul li input[type='radio'] {
	width: var( --evf-choice-size );
	height: var( --evf-choice-size );
}

/* ===== CHOICES — outline/filled custom appearance (EVF-2675) =====
   Legacy (scss.php) only ever overrode the native radio/checkbox's appearance — and so only
   ever showed a "Selected color"/"Unselected border" effect — for these two style variations;
   `default` renders the plain OS/browser-native control, which ignores border-color/
   background-color entirely unless it opts out of native rendering via appearance:none. Ported
   1:1 from legacy's outline/filled branches, including the flex-centred ::before dot/checkmark
   (no absolute positioning needed — the input is the flex container via display:inline-flex, so
   ::before is simply a centred flex child sized as a fraction of it). `.evf-choice-{variation}`
   is added to the wrapper by FrontendEnqueue::container_class() (real frontend) and
   PreviewBridge's applyToken() (live preview) from the choice.variation token, which has no CSS
   var of its own (a "meta" token — see Compiler::declarations()). */
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-radio ul li input[type='radio'],
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-checkbox ul li input[type='checkbox'],
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-multiple ul li input[type='radio'],
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-checkbox ul li input[type='checkbox'],
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-privacy-policy input[type='checkbox'],
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-subscription-plan ul li input[type='radio'],
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-radio ul li input[type='radio'],
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-checkbox ul li input[type='checkbox'],
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-multiple ul li input[type='radio'],
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-checkbox ul li input[type='checkbox'],
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-privacy-policy input[type='checkbox'],
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-subscription-plan ul li input[type='radio'] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.everest-forms .evf-style-v2.evf-choice-outline .evf-field-radio ul li input[type='radio'],
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-multiple ul li input[type='radio'],
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-subscription-plan ul li input[type='radio'],
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-radio ul li input[type='radio'],
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-multiple ul li input[type='radio'],
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-subscription-plan ul li input[type='radio'] {
	border-radius: 50%;
}

.everest-forms .evf-style-v2.evf-choice-outline .evf-field-radio ul li input[type='radio'],
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-checkbox ul li input[type='checkbox'],
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-multiple ul li input[type='radio'],
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-checkbox ul li input[type='checkbox'],
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-privacy-policy input[type='checkbox'],
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-subscription-plan ul li input[type='radio'] {
	border: 1px solid var( --evf-choice-border );
}

.everest-forms .evf-style-v2.evf-choice-filled .evf-field-radio ul li input[type='radio'],
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-checkbox ul li input[type='checkbox'],
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-multiple ul li input[type='radio'],
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-checkbox ul li input[type='checkbox'],
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-privacy-policy input[type='checkbox'],
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-subscription-plan ul li input[type='radio'] {
	background-color: var( --evf-choice-border );
}

.everest-forms .evf-style-v2.evf-choice-outline .evf-field-radio ul li input[type='radio']:checked,
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-checkbox ul li input[type='checkbox']:checked,
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-multiple ul li input[type='radio']:checked,
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-checkbox ul li input[type='checkbox']:checked,
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-privacy-policy input[type='checkbox']:checked,
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-subscription-plan ul li input[type='radio']:checked {
	border-color: var( --evf-choice-checked );
}

.everest-forms .evf-style-v2.evf-choice-filled .evf-field-radio ul li input[type='radio']:checked,
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-checkbox ul li input[type='checkbox']:checked,
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-multiple ul li input[type='radio']:checked,
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-checkbox ul li input[type='checkbox']:checked,
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-privacy-policy input[type='checkbox']:checked,
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-subscription-plan ul li input[type='radio']:checked {
	background-color: var( --evf-choice-checked );
}

.everest-forms .evf-style-v2.evf-choice-outline .evf-field-radio ul li input[type='radio']:checked::before,
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-checkbox ul li input[type='checkbox']:checked::before,
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-multiple ul li input[type='radio']:checked::before,
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-checkbox ul li input[type='checkbox']:checked::before,
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-privacy-policy input[type='checkbox']:checked::before,
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-subscription-plan ul li input[type='radio']:checked::before,
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-radio ul li input[type='radio']:checked::before,
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-checkbox ul li input[type='checkbox']:checked::before,
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-multiple ul li input[type='radio']:checked::before,
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-checkbox ul li input[type='checkbox']:checked::before,
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-privacy-policy input[type='checkbox']:checked::before,
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-subscription-plan ul li input[type='radio']:checked::before {
	content: '';
	height: 50%;
}

/* radio dot */
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-radio ul li input[type='radio']:checked::before,
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-multiple ul li input[type='radio']:checked::before,
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-subscription-plan ul li input[type='radio']:checked::before {
	width: 50%;
	border-radius: 50%;
	background: var( --evf-choice-checked );
}

.everest-forms .evf-style-v2.evf-choice-filled .evf-field-radio ul li input[type='radio']:checked::before,
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-multiple ul li input[type='radio']:checked::before,
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-subscription-plan ul li input[type='radio']:checked::before {
	width: 50%;
	border-radius: 50%;
	background: #fff;
}

/* checkbox tick */
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-checkbox ul li input[type='checkbox']:checked::before,
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-checkbox ul li input[type='checkbox']:checked::before,
.everest-forms .evf-style-v2.evf-choice-outline .evf-field-privacy-policy input[type='checkbox']:checked::before {
	width: 25%;
	border: solid var( --evf-choice-checked );
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	margin-top: -12%;
}

.everest-forms .evf-style-v2.evf-choice-filled .evf-field-checkbox ul li input[type='checkbox']:checked::before,
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-checkbox ul li input[type='checkbox']:checked::before,
.everest-forms .evf-style-v2.evf-choice-filled .evf-field-privacy-policy input[type='checkbox']:checked::before {
	width: 25%;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	margin-top: -12%;
}

/* GDPR/Privacy-Policy checkbox — v1 (scss.php) styled this identically to any other checkbox;
   v2 originally only wired up alignment/margin (above), silently dropping size, the outline/
   filled appearance, checked-state, and this label typography. Restored 1:1 to v1 parity. */
.everest-forms .evf-style-v2 .evf-field-radio ul li input + label,
.everest-forms .evf-style-v2 .evf-field-checkbox ul li input + label,
.everest-forms .evf-style-v2 .evf-field-payment-multiple ul li input + label,
.everest-forms .evf-style-v2 .evf-field-payment-checkbox ul li input + label,
.everest-forms .evf-style-v2 .evf-field-privacy-policy input + label,
.everest-forms .evf-style-v2 .evf-field-payment-subscription-plan ul li input + label {
	font-size: var( --evf-choice-fsize );
	color: var( --evf-choice-color );
	font-weight: var( --evf-choice-weight );
	font-style: var( --evf-choice-fs );
	text-decoration: var( --evf-choice-td );
	text-transform: var( --evf-choice-tt );
	letter-spacing: var( --evf-choice-ls );
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.everest-forms .evf-style-v2 .evf-field-radio ul li input + label,
	.everest-forms .evf-style-v2 .evf-field-checkbox ul li input + label,
	.everest-forms .evf-style-v2 .evf-field-payment-multiple ul li input + label,
	.everest-forms .evf-style-v2 .evf-field-payment-checkbox ul li input + label,
	.everest-forms .evf-style-v2 .evf-field-privacy-policy input + label,
	.everest-forms .evf-style-v2 .evf-field-payment-subscription-plan ul li input + label {
		background: var( --evf-choice-color );
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

/* The Subscription Plan addon's own stylesheet (evf-payment-subscription-plan-frontend.scss)
   hardcodes font-size on these two inner classes, which otherwise silently overrides the
   choice.fsize token the label above already inherits — override it back explicitly here. */
.everest-forms .evf-style-v2 .evf-field-payment-subscription-plan .evf-plan-name,
.everest-forms .evf-style-v2 .evf-field-payment-subscription-plan .evf-plan-price {
	font-size: var( --evf-choice-fsize );
}

/* The name/price row (.evf-plan-main) is a flex row hardcoded to `justify-content: space-between`
   in the same addon stylesheet — `--evf-choice-align`'s inherited `text-align` can never reach it
   (text-align doesn't reposition flex items). `left` (the default) keeps today's name-left/
   price-right look untouched; `center`/`right` bring the pair together as a unit instead — see
   FrontendEnqueue::container_class()/PreviewBridge's `evf-choice-align-{center|right}` classes. */
.everest-forms .evf-style-v2.evf-choice-align-center .evf-field-payment-subscription-plan .evf-plan-main {
	justify-content: center;
}
.everest-forms .evf-style-v2.evf-choice-align-right .evf-field-payment-subscription-plan .evf-plan-main {
	justify-content: flex-end;
}

/* ===== BUTTON — submit / multi-part nav / upload button ===== */
.everest-forms .evf-style-v2 .evf-submit-container input[type='submit'],
.everest-forms .evf-style-v2 .evf-submit-container button[type='submit'],
.everest-forms .evf-style-v2 .evf-submit-container .everest-forms-part-button,
.everest-forms .evf-style-v2 .everest-forms-multi-part-actions input[type='submit'],
.everest-forms .evf-style-v2 .everest-forms-multi-part-actions button[type='submit'],
.everest-forms .evf-style-v2 .everest-forms-multi-part-actions .everest-forms-part-button {
	color: var( --evf-btn-color );
	font-size: var( --evf-btn-size );
	line-height: var( --evf-btn-lh );
	background: var( --evf-btn-bg );
	border-style: var( --evf-btn-border-style, solid );
	border-width: var( --evf-btn-bw );
	border-color: var( --evf-btn-border-c );
	border-radius: var( --evf-btn-radius );
	margin: var( --evf-btn-margin );
	padding: var( --evf-btn-pad );
	font-weight: var( --evf-btn-weight );
	font-style: var( --evf-btn-fs );
	text-decoration: var( --evf-btn-td, none );
	text-transform: var( --evf-btn-tt );
	letter-spacing: var( --evf-btn-ls );
}

.everest-forms .evf-style-v2 .evf-submit-container input[type='submit']:hover,
.everest-forms .evf-style-v2 .evf-submit-container input[type='submit']:active,
.everest-forms .evf-style-v2 .evf-submit-container button[type='submit']:hover,
.everest-forms .evf-style-v2 .evf-submit-container button[type='submit']:active,
.everest-forms .evf-style-v2 .evf-submit-container .everest-forms-part-button:hover,
.everest-forms .evf-style-v2 .evf-submit-container .everest-forms-part-button:active,
.everest-forms .evf-style-v2 .everest-forms-multi-part-actions input[type='submit']:hover,
.everest-forms .evf-style-v2 .everest-forms-multi-part-actions button[type='submit']:hover,
.everest-forms .evf-style-v2 .everest-forms-multi-part-actions .everest-forms-part-button:hover {
	color: var( --evf-btn-color-hover );
	background: var( --evf-btn-bg-hover );
	border-color: var( --evf-btn-border-c-hover );
}

.everest-forms .evf-style-v2 .evf-submit-container:not( .everest-forms-multi-part-actions ) {
	text-align: var( --evf-btn-align );
}

.everest-forms .evf-style-v2.evf-btn-width-fill .evf-submit-container input[type='submit'],
.everest-forms .evf-style-v2.evf-btn-width-fill .evf-submit-container button[type='submit'],
.everest-forms .evf-style-v2.evf-btn-width-fill .evf-submit-container .everest-forms-part-button,
.everest-forms .evf-style-v2.evf-btn-width-fill .everest-forms-multi-part-actions input[type='submit'],
.everest-forms .evf-style-v2.evf-btn-width-fill .everest-forms-multi-part-actions button[type='submit'],
.everest-forms .evf-style-v2.evf-btn-width-fill .everest-forms-multi-part-actions .everest-forms-part-button {
	display: block;
	width: 100%;
}

.everest-forms .evf-style-v2 .everest-forms-multi-part-actions .everest-forms-part-button.everest-forms-part-prev,
.everest-forms .evf-style-v2 .everest-forms-multi-part-actions .everest-forms-part-button.everest-forms-part-next {
	margin-right: 10px;
}

/*
 * ===== MESSAGES — success / error / validation =====
 * The message tokens are Pro-only (defined in the Pro plugin), so on a free site their
 * `--evf-msg-*` variables are never emitted. Each declaration therefore carries a FALLBACK equal
 * to the token's default, so the submission banners always render correctly (free) and are
 * overridden by the emitted variables when Pro is active.
 */
.everest-forms .evf-style-v2 .everest-forms-notice--success,
.everest-forms.everest-forms-notice--success.evf-style-v2 {
	background-color: var( --evf-msg-success-bg, #5cb85c );
	color: var( --evf-msg-success-color, #ffffff );
	font-size: var( --evf-msg-success-size, 14px );
	text-align: var( --evf-msg-success-align, left );
	border-style: var( --evf-msg-success-border-style, none );
	border-width: var( --evf-msg-success-bw, 0 );
	border-color: var( --evf-msg-success-border-c, #cccccc );
	border-radius: var( --evf-msg-success-radius, 5px );
	font-weight: var( --evf-msg-success-weight, 400 );
	font-style: var( --evf-msg-success-fs, normal );
	text-decoration: var( --evf-msg-success-td, none );
	text-transform: var( --evf-msg-success-tt, none );
}

.everest-forms .evf-style-v2 .everest-forms-notice--error {
	background-color: var( --evf-msg-error-bg, #d9534f );
	color: var( --evf-msg-error-color, #ffffff );
	font-size: var( --evf-msg-error-size, 14px );
	text-align: var( --evf-msg-error-align, left );
	border-style: var( --evf-msg-error-border-style, none );
	border-width: var( --evf-msg-error-bw, 0 );
	border-color: var( --evf-msg-error-border-c, #cccccc );
	border-radius: var( --evf-msg-error-radius, 5px );
	font-weight: var( --evf-msg-error-weight, 400 );
	font-style: var( --evf-msg-error-fs, normal );
	text-decoration: var( --evf-msg-error-td, none );
	text-transform: var( --evf-msg-error-tt, none );
}

.everest-forms .evf-style-v2 .evf-error {
	background-color: var( --evf-msg-validation-bg, #ffffff );
	color: var( --evf-msg-validation-color, #fa5252 );
	font-size: var( --evf-msg-validation-size, 14px );
	text-align: var( --evf-msg-validation-align, left );
	border-style: var( --evf-msg-validation-border-style, none );
	border-width: var( --evf-msg-validation-bw, 0 );
	border-color: var( --evf-msg-validation-border-c, #cccccc );
	border-radius: var( --evf-msg-validation-radius, 5px );
	font-weight: var( --evf-msg-validation-weight, 400 );
	font-style: var( --evf-msg-validation-fs, normal );
	text-decoration: var( --evf-msg-validation-td, none );
	text-transform: var( --evf-msg-validation-tt, none );
}