/* ==================================================
   WEBBO ELEMENTOR FORM STYLER
   Structural styles controlled by Elementor settings
================================================== */

/* Default values used when a newly added control has not been saved yet. */
/* Default text colour for native Elementor text, email, textarea, and Select fields.
 * Elementor's own widget-level Field Text Colour setting remains more specific
 * and overrides this fallback whenever the user changes it. */
:where(.webbo-field-layout-standard, .webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group > :is(input.elementor-field, textarea.elementor-field),
:where(.webbo-field-layout-standard, .webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-type-select select.elementor-field {
	color: #111827AA;
}

/* Design 2 and Design 3 share the same stronger field text profile.
 * Elementor still controls font family, size, line height, letter spacing,
 * and every other typography value. Only colour and weight are supplied by
 * the selected Webbo design profile. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) :where(
	.elementor-field-group > input.elementor-field,
	.elementor-field-group > textarea.elementor-field,
	.elementor-field-type-select select.elementor-field,
	.elementor-field-type-select select.elementor-field-textual
) {
	color: #111827;
	font-weight: 500;
}


/* ==================================================
   VARIANT 1 VALUE POSITIONING
   Keep Elementor's standard layout while allowing one
   shared horizontal correction and a textarea-only
   vertical correction.
================================================== */

.webbo-field-layout-standard {
	--webbo-standard-value-horizontal-offset: 0px;
	--webbo-standard-textarea-value-offset: -2px;
}

.webbo-field-layout-standard .elementor-field-group > input.elementor-field.webbo-value-offset-ready,
.webbo-field-layout-standard .elementor-field-group.elementor-field-type-textarea > textarea.elementor-field.webbo-value-offset-ready,
.webbo-field-layout-standard .elementor-field-group.elementor-field-type-select .elementor-select-wrapper > select.elementor-field.webbo-value-offset-ready,
.webbo-field-layout-standard .elementor-field-group.elementor-field-type-select .elementor-select-wrapper > select.elementor-field-textual.webbo-value-offset-ready {
	padding-inline-start: calc(
		var(--webbo-efs-base-padding-inline-start) +
		var(--webbo-standard-value-horizontal-offset)
	) !important;
}

/* Preserve the textarea's total vertical padding so its outer height and
   bottom border stay fixed while the text moves up or down. */
.webbo-field-layout-standard .elementor-field-group.elementor-field-type-textarea > textarea.elementor-field.webbo-value-offset-ready {
	padding-top: calc(
		var(--webbo-efs-base-padding-block-start) +
		var(--webbo-standard-textarea-value-offset)
	) !important;
	padding-bottom: calc(
		var(--webbo-efs-base-padding-block-end) -
		var(--webbo-standard-textarea-value-offset)
	) !important;
}

.webbo-select-style-yes {
	--webbo-select-arrow-color: #111827AA;
	--webbo-select-arrow-size: 12px;
	--webbo-select-arrow-offset: 15px;
}

.webbo-checkbox-style-yes {
	--webbo-checkbox-size: 18px;
	--webbo-checkbox-background: #ffffff;
	--webbo-checkbox-border-color: #d9d9d9;
	--webbo-checkbox-border-width: 1px;
	--webbo-checkbox-radius: 4px;
	--webbo-checkbox-checked-background: #111827;
	--webbo-acceptance-text-color: #111827AA;
	--webbo-acceptance-gap: 8px;
	--webbo-checkbox-text-color: #111827AA;
	--webbo-checkbox-hover-text-color: #111827;
	--webbo-checkbox-checked-text-color: #111827;
	--webbo-checkbox-stacked-row-gap: 6px;
}

.webbo-radio-style-yes {
	/* Radio Dot defaults and backwards-compatible shared values. */
	--webbo-radio-size: 18px;
	--webbo-radio-background: #ffffff;
	--webbo-radio-border-color: #d9d9d9;
	--webbo-radio-border-width: 1px;
	--webbo-radio-selected-color: #111827;
	--webbo-radio-dot-color: #ffffff;
	--webbo-radio-dot-size: 6px;
	--webbo-radio-text-gap: 8px;
	--webbo-radio-option-gap: 10px;
	--webbo-radio-text-color: #111827AA;
	--webbo-radio-hover-text-color: #111827;
	--webbo-radio-selected-text-color: #111827;

	/* Radio Button defaults. */
	--webbo-radio-button-option-gap: var(--webbo-radio-option-gap);
	--webbo-radio-button-padding: 10px 16px;
	--webbo-radio-button-radius: 4px;
	--webbo-radio-button-border-width: 1px;
	--webbo-radio-button-background: #ffffff;
	--webbo-radio-button-border-color: #d9d9d9;
	--webbo-radio-button-text-color: #111827AA;
	--webbo-radio-button-hover-background: #f9fafb;
	--webbo-radio-button-hover-border-color: #9ca3af;
	--webbo-radio-button-hover-text-color: #111827;
	--webbo-radio-button-selected-background: #111827;
	--webbo-radio-button-selected-border-color: #111827;
	--webbo-radio-button-selected-text-color: #FFFFFF;

	/* Radio Bordered defaults. */
	--webbo-radio-bordered-option-gap: var(--webbo-radio-option-gap);
	--webbo-radio-bordered-padding: 8px 14px;
	--webbo-radio-bordered-radius: 4px;
	--webbo-radio-bordered-border-width: 1px;
	--webbo-radio-bordered-background: #ffffff;
	--webbo-radio-bordered-border-color: #e5e7eb;
	--webbo-radio-bordered-text-color: #111827AA;
	--webbo-radio-bordered-hover-background: #f9fafb;
	--webbo-radio-bordered-hover-border-color: #9ca3af;
	--webbo-radio-bordered-hover-text-color: #111827;
	--webbo-radio-bordered-selected-background: #f3f4f6;
	--webbo-radio-bordered-selected-border-color: #111827;
	--webbo-radio-bordered-selected-text-color: #111827;
	--webbo-radio-bordered-indicator-size: var(--webbo-radio-size);
	--webbo-radio-bordered-indicator-background: var(--webbo-radio-background);
	--webbo-radio-bordered-indicator-border-color: var(--webbo-radio-border-color);
	--webbo-radio-bordered-indicator-border-width: var(--webbo-radio-border-width);
	--webbo-radio-bordered-indicator-selected-color: var(--webbo-radio-selected-color);
	--webbo-radio-bordered-indicator-dot-color: var(--webbo-radio-dot-color);
	--webbo-radio-bordered-indicator-dot-size: var(--webbo-radio-dot-size);
	--webbo-radio-bordered-indicator-text-gap: var(--webbo-radio-text-gap);

	/* Radio Icon defaults. */
	--webbo-radio-icon-option-gap: var(--webbo-radio-option-gap);
	--webbo-radio-icon-size: 32px;
	--webbo-radio-icon-width: var(--webbo-radio-icon-size);
	--webbo-radio-icon-height: var(--webbo-radio-icon-size);
	--webbo-radio-icon-image-radius: 4px;
	--webbo-radio-icon-gap: 10px;
	--webbo-radio-icon-label-font-size: inherit;
	--webbo-radio-icon-label-font-weight: inherit;
	--webbo-radio-icon-padding: 12px;
	--webbo-radio-icon-radius: 4px;
	--webbo-radio-icon-border-width: 1px;
	--webbo-radio-icon-background: #ffffff;
	--webbo-radio-icon-border-color: #e5e7eb;
	--webbo-radio-icon-text-color: #111827AA;
	--webbo-radio-icon-hover-background: #f9fafb;
	--webbo-radio-icon-hover-border-color: #9ca3af;
	--webbo-radio-icon-hover-text-color: #111827;
	--webbo-radio-icon-selected-background: #f3f4f6;
	--webbo-radio-icon-selected-border-color: #111827;
	--webbo-radio-icon-selected-text-color: #111827;
	--webbo-radio-icon-indicator-size: var(--webbo-radio-size);
	--webbo-radio-icon-indicator-background: var(--webbo-radio-background);
	--webbo-radio-icon-indicator-border-color: var(--webbo-radio-border-color);
	--webbo-radio-icon-indicator-border-width: var(--webbo-radio-border-width);
	--webbo-radio-icon-indicator-selected-color: var(--webbo-radio-selected-color);
	--webbo-radio-icon-indicator-dot-color: var(--webbo-radio-dot-color);
	--webbo-radio-icon-indicator-dot-size: var(--webbo-radio-dot-size);
	--webbo-radio-icon-indicator-text-gap: var(--webbo-radio-text-gap);
}

/* ==================================================
   PER-FIELD LABEL VISIBILITY
================================================== */

/*
 * Visually hide only the main field label. The option labels remain visible,
 * and the main label remains available to screen readers and other assistive
 * technology. Absolute positioning removes its visual layout gap.
 */
.elementor-field-group.webbo-label-visually-hidden > .elementor-field-label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ==================================================
   CUSTOM OPENED SELECT LIST
================================================== */

.webbo-custom-opened-list-yes {
	--webbo-opened-list-background: #FFFFFF;
	--webbo-opened-option-color: #111827;
	--webbo-opened-hover-background: #1118270A;
	--webbo-opened-hover-color: #111827;
	--webbo-opened-selected-background: #FFFFFF00;
	--webbo-opened-selected-color: #111827;
	--webbo-opened-border-style: none;
	--webbo-opened-border-width: 1px;
	--webbo-opened-border-color: #E5E7EB;
	--webbo-opened-list-radius: 12px;
	--webbo-opened-list-padding: 5px;
	--webbo-opened-option-padding: 10px 12px;
	--webbo-opened-list-offset: 6px;
	--webbo-opened-max-height: 320px;
	--webbo-opened-transition: 150ms;
}

.webbo-efs-opened-list {
	position: fixed;
	z-index: 9990;
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: var(--webbo-opened-list-padding, 5px);
	max-height: var(--webbo-opened-max-height, 320px);
	overflow-x: hidden;
	overflow-y: auto;
	background: var(--webbo-opened-list-background, #FFFFFF);
	border-style: var(--webbo-opened-border-style, none);
	border-width: var(--webbo-opened-border-width, 1px);
	border-color: var(--webbo-opened-border-color, #E5E7EB);
	border-radius: var(--webbo-opened-list-radius, 12px);
	box-shadow: 0 16px 40px rgba(17, 24, 39, 0.12);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--webbo-opened-transition, 150ms) ease, transform var(--webbo-opened-transition, 150ms) ease;
}

.webbo-efs-opened-list.is-open {
	opacity: 1;
	transform: translateY(0);
}

.webbo-efs-opened-list.is-above {
	transform: translateY(4px);
}

.webbo-efs-opened-list.is-above.is-open {
	transform: translateY(0);
}

.webbo-efs-opened-list__group {
	padding: 8px 12px 4px;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--webbo-opened-option-color, #111827);
	opacity: 0.6;
}

.webbo-efs-opened-list__option {
	display: block;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin: 0;
	padding: var(--webbo-opened-option-padding, 10px 12px);
	border: 0;
	border-radius: max(0px, calc(var(--webbo-opened-list-radius, 12px) - 5px));
	background: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--webbo-opened-option-color, #111827);
	font: inherit;
	line-height: 1.35;
	text-align: start;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--webbo-opened-transition, 150ms) ease, color var(--webbo-opened-transition, 150ms) ease;
}

.webbo-efs-opened-list__option:hover,
.webbo-efs-opened-list__option.is-active {
	background: var(--webbo-opened-hover-background, #1118270A);
	color: var(--webbo-opened-hover-color, #111827);
}

.webbo-efs-opened-list__option[aria-selected="true"] {
	background: var(--webbo-opened-selected-background, transparent);
	color: var(--webbo-opened-selected-color, #111827);
}

.webbo-efs-opened-list__option.is-placeholder,
.webbo-efs-opened-list__option.is-placeholder[aria-selected="true"] {
	color: var(--webbo-floating-placeholder-color, #11182750);
}

.webbo-efs-opened-list__option:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.webbo-efs-opened-list__option[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
}

.webbo-custom-opened-list-yes .elementor-field-type-select select[aria-expanded="true"] {
	position: relative;
	z-index: 1;
}

/* ==================================================
   SELECT FIELD
================================================== */

/* The wrapper anchors the custom arrow. */
.webbo-select-style-yes .elementor-field-type-select .elementor-select-wrapper {
	position: relative;
}

/* Remove browser and Elementor select arrows from the actual field. */
.webbo-select-style-yes .elementor-field-type-select select.elementor-field,
.webbo-select-style-yes .elementor-field-type-select select.elementor-field-textual {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: none !important;
	padding-right: calc(
		var(--webbo-select-arrow-offset) +
		var(--webbo-select-arrow-size) +
		12px
	) !important;
	cursor: pointer;
}

/* Select text, placeholder, background, and typography follow Elementor settings. */

/* Hide Elementor's old and current built-in arrow elements. */
.webbo-select-style-yes .elementor-field-type-select .select-caret-down-wrapper,
.webbo-select-style-yes .elementor-field-type-select .elementor-select-wrapper::before {
	display: none !important;
	visibility: hidden !important;
	content: none !important;
}

/* Draw a colour-adjustable arrow using an SVG mask. */
.webbo-select-style-yes .elementor-field-type-select .elementor-select-wrapper::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--webbo-select-arrow-offset);
	width: var(--webbo-select-arrow-size);
	aspect-ratio: 12 / 8;
	transform: translateY(-50%);
	background-color: var(--webbo-select-arrow-color);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	pointer-events: none;
}

/* Keep the arrow and padding correct on right-to-left websites. */
body.rtl .webbo-select-style-yes .elementor-field-type-select select.elementor-field,
body.rtl .webbo-select-style-yes .elementor-field-type-select select.elementor-field-textual {
	padding-right: inherit !important;
	padding-left: calc(
		var(--webbo-select-arrow-offset) +
		var(--webbo-select-arrow-size) +
		12px
	) !important;
}

body.rtl .webbo-select-style-yes .elementor-field-type-select .elementor-select-wrapper::after {
	right: auto;
	left: var(--webbo-select-arrow-offset);
}

/* ==================================================
   CHECKBOX
================================================== */

/* Replace the browser checkbox with a consistent custom box. */
.webbo-checkbox-style-yes .elementor-field-type-acceptance input[type="checkbox"],
.webbo-checkbox-style-yes .elementor-field-type-checkbox input[type="checkbox"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box;
	width: var(--webbo-checkbox-size) !important;
	height: var(--webbo-checkbox-size) !important;
	min-width: var(--webbo-checkbox-size) !important;
	min-height: var(--webbo-checkbox-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: var(--webbo-checkbox-border-width) solid var(--webbo-checkbox-border-color) !important;
	border-radius: var(--webbo-checkbox-radius) !important;
	background-color: var(--webbo-checkbox-background) !important;
	background-image: none !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 65% auto !important;
	box-shadow: none;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Checked state with a white tick as the safe default. */
.webbo-checkbox-style-yes .elementor-field-type-acceptance input[type="checkbox"]:checked,
.webbo-checkbox-style-yes .elementor-field-type-checkbox input[type="checkbox"]:checked {
	background-color: var(--webbo-checkbox-checked-background) !important;
	border-color: var(--webbo-checkbox-checked-background) !important;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5L4.5 8L10.5 1.5' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* White tick option. */
.webbo-checkbox-style-yes.webbo-checkbox-tick-white .elementor-field-type-acceptance input[type="checkbox"]:checked,
.webbo-checkbox-style-yes.webbo-checkbox-tick-white .elementor-field-type-checkbox input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5L4.5 8L10.5 1.5' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Black tick option for light checked backgrounds. */
.webbo-checkbox-style-yes.webbo-checkbox-tick-black .elementor-field-type-acceptance input[type="checkbox"]:checked,
.webbo-checkbox-style-yes.webbo-checkbox-tick-black .elementor-field-type-checkbox input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5L4.5 8L10.5 1.5' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Keep a subtle automatic keyboard focus indicator without an extra control. */
.webbo-checkbox-style-yes .elementor-field-type-acceptance input[type="checkbox"]:focus-visible,
.webbo-checkbox-style-yes .elementor-field-type-checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--webbo-checkbox-checked-background) !important;
	outline-offset: 2px;
}

/* ==================================================
   ACCEPTANCE AND CHECKBOX TEXT
================================================== */

/* Align the checkbox and its text, then apply the adjustable gap. */
.webbo-checkbox-style-yes .elementor-field-type-acceptance .elementor-field-option,
.webbo-checkbox-style-yes .elementor-field-type-checkbox .elementor-field-option {
	display: flex;
	align-items: center;
	gap: var(--webbo-acceptance-gap);
}

/* Add vertical spacing only when Elementor's Inline List option is disabled. */
.webbo-checkbox-style-yes .elementor-field-type-checkbox .elementor-field-subgroup:not(.elementor-subgroup-inline) {
	display: flex;
	flex-direction: column;
	row-gap: var(--webbo-checkbox-stacked-row-gap);
}

/* Apply the text colour while leaving typography to Elementor controls. */
.webbo-checkbox-style-yes .elementor-field-type-acceptance .elementor-field-option label {
	color: var(--webbo-acceptance-text-color) !important;
	margin: 0;
	cursor: pointer;
}

/* ==================================================
   RADIO BUTTONS AND CHOICE STYLES
================================================== */

/*
 * Every Radio field receives its display classes on the native Elementor
 * subgroup. This works in both the frontend and the editor preview without
 * rebuilding the form markup.
 */
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-standard {
	gap: var(--webbo-radio-option-gap);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-button {
	gap: var(--webbo-radio-button-option-gap);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-bordered {
	gap: var(--webbo-radio-bordered-option-gap);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon {
	gap: var(--webbo-radio-icon-option-gap);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-option {
	box-sizing: border-box;
	margin: 0 !important;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-option label {
	margin: 0;
	cursor: pointer;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-standard .elementor-field-option label {
	color: var(--webbo-radio-text-color);
}

/* Inline options use only the width their content needs. */
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-width-inline {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-width-inline .elementor-field-option {
	flex: 0 1 auto !important;
	width: auto !important;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-width-full {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-width-full .elementor-field-option,
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-width-full .elementor-field-option label {
	width: 100%;
}

/* Map each indicator-bearing layout to its own CSS variables. */
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-standard {
	--webbo-current-radio-size: var(--webbo-radio-size);
	--webbo-current-radio-background: var(--webbo-radio-background);
	--webbo-current-radio-border-color: var(--webbo-radio-border-color);
	--webbo-current-radio-border-width: var(--webbo-radio-border-width);
	--webbo-current-radio-selected-color: var(--webbo-radio-selected-color);
	--webbo-current-radio-dot-color: var(--webbo-radio-dot-color);
	--webbo-current-radio-dot-size: var(--webbo-radio-dot-size);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-bordered {
	--webbo-current-radio-size: var(--webbo-radio-bordered-indicator-size);
	--webbo-current-radio-background: var(--webbo-radio-bordered-indicator-background);
	--webbo-current-radio-border-color: var(--webbo-radio-bordered-indicator-border-color);
	--webbo-current-radio-border-width: var(--webbo-radio-bordered-indicator-border-width);
	--webbo-current-radio-selected-color: var(--webbo-radio-bordered-indicator-selected-color);
	--webbo-current-radio-dot-color: var(--webbo-radio-bordered-indicator-dot-color);
	--webbo-current-radio-dot-size: var(--webbo-radio-bordered-indicator-dot-size);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon.webbo-radio-icon-indicator-yes {
	--webbo-current-radio-size: var(--webbo-radio-icon-indicator-size);
	--webbo-current-radio-background: var(--webbo-radio-icon-indicator-background);
	--webbo-current-radio-border-color: var(--webbo-radio-icon-indicator-border-color);
	--webbo-current-radio-border-width: var(--webbo-radio-icon-indicator-border-width);
	--webbo-current-radio-selected-color: var(--webbo-radio-icon-indicator-selected-color);
	--webbo-current-radio-dot-color: var(--webbo-radio-icon-indicator-dot-color);
	--webbo-current-radio-dot-size: var(--webbo-radio-icon-indicator-dot-size);
}

/* Custom circular indicator shared by Radio Dot, Radio Bordered, and optional Radio Icon. */
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup:is(
	.webbo-radio-layout-standard,
	.webbo-radio-layout-bordered,
	.webbo-radio-layout-icon.webbo-radio-icon-indicator-yes
) input[type="radio"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box;
	width: var(--webbo-current-radio-size) !important;
	height: var(--webbo-current-radio-size) !important;
	min-width: var(--webbo-current-radio-size) !important;
	min-height: var(--webbo-current-radio-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: var(--webbo-current-radio-border-width) solid var(--webbo-current-radio-border-color) !important;
	border-radius: 50% !important;
	background-color: var(--webbo-current-radio-background) !important;
	background-image: none !important;
	box-shadow: none !important;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup:is(
	.webbo-radio-layout-standard,
	.webbo-radio-layout-bordered,
	.webbo-radio-layout-icon.webbo-radio-icon-indicator-yes
) input[type="radio"]:checked {
	border-color: var(--webbo-current-radio-selected-color) !important;
	background-color: var(--webbo-current-radio-selected-color) !important;
	background-image: radial-gradient(
		circle at center,
		var(--webbo-current-radio-dot-color) 0 calc(var(--webbo-current-radio-dot-size) / 2),
		transparent calc((var(--webbo-current-radio-dot-size) / 2) + 0.6px)
	) !important;
}

/* A subtle automatic focus ring remains for keyboard accessibility. */
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup:is(
	.webbo-radio-layout-standard,
	.webbo-radio-layout-bordered,
	.webbo-radio-layout-icon.webbo-radio-icon-indicator-yes
) input[type="radio"]:focus-visible {
	outline: 2px solid var(--webbo-current-radio-selected-color) !important;
	outline-offset: 2px;
}

/* Radio Dot. */
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-standard .elementor-field-option {
	display: flex;
	align-items: center;
	gap: var(--webbo-radio-text-gap);
}

/* Hide the native input without removing it from accessibility APIs. */
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-button input[type="radio"],
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon:not(.webbo-radio-icon-indicator-yes) input[type="radio"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
}

/* Radio Button. */
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-button .elementor-field-option label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 1px;
	padding: var(--webbo-radio-button-padding);
	border: var(--webbo-radio-button-border-width) solid var(--webbo-radio-button-border-color);
	border-radius: var(--webbo-radio-button-radius);
	background-color: var(--webbo-radio-button-background);
	color: var(--webbo-radio-button-text-color);
	line-height: inherit;
	text-align: center;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-button .elementor-field-option label:hover {
	border-color: var(--webbo-radio-button-hover-border-color);
	background-color: var(--webbo-radio-button-hover-background);
	color: var(--webbo-radio-button-hover-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-button input[type="radio"]:checked + label {
	border-color: var(--webbo-radio-button-selected-border-color);
	background-color: var(--webbo-radio-button-selected-background);
	color: var(--webbo-radio-button-selected-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-button input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--webbo-radio-button-selected-border-color);
	outline-offset: 2px;
}

/* Radio Bordered. */
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-bordered .elementor-field-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--webbo-radio-bordered-indicator-text-gap);
	padding: var(--webbo-radio-bordered-padding);
	border: var(--webbo-radio-bordered-border-width) solid var(--webbo-radio-bordered-border-color);
	border-radius: var(--webbo-radio-bordered-radius);
	background-color: var(--webbo-radio-bordered-background);
	color: var(--webbo-radio-bordered-text-color);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-bordered .elementor-field-option label {
	position: static;
	flex: 1 1 auto;
	color: var(--webbo-radio-bordered-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-bordered .elementor-field-option label::after,
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .elementor-field-option label::after {
	content: "";
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-bordered .elementor-field-option:hover {
	border-color: var(--webbo-radio-bordered-hover-border-color);
	background-color: var(--webbo-radio-bordered-hover-background);
	color: var(--webbo-radio-bordered-hover-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-bordered .elementor-field-option:hover label {
	color: var(--webbo-radio-bordered-hover-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-bordered .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) {
	border-color: var(--webbo-radio-bordered-selected-border-color);
	background-color: var(--webbo-radio-bordered-selected-background);
	color: var(--webbo-radio-bordered-selected-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-bordered .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) label {
	color: var(--webbo-radio-bordered-selected-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-bordered .elementor-field-option:focus-within {
	outline: 2px solid var(--webbo-radio-bordered-selected-border-color);
	outline-offset: 2px;
}

/* Radio Icon. */
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .elementor-field-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--webbo-radio-icon-indicator-text-gap);
	padding: var(--webbo-radio-icon-padding);
	border: var(--webbo-radio-icon-border-width) solid var(--webbo-radio-icon-border-color);
	border-radius: var(--webbo-radio-icon-radius);
	background-color: var(--webbo-radio-icon-background);
	color: var(--webbo-radio-icon-text-color);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .elementor-field-option label {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--webbo-radio-icon-gap);
	flex: 1 1 auto;
	color: var(--webbo-radio-icon-text-color);
	text-align: center;
	font-size: var(--webbo-radio-icon-label-font-size, inherit);
	font-weight: var(--webbo-radio-icon-label-font-weight, inherit);
	line-height: 1;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon.webbo-radio-icon-position-top .elementor-field-option label {
	flex-direction: column;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon.webbo-radio-icon-position-left .elementor-field-option label {
	flex-direction: row;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon.webbo-radio-icon-position-right .elementor-field-option label {
	flex-direction: row-reverse;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .webbo-radio-option-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--webbo-radio-icon-size);
	height: var(--webbo-radio-icon-size);
	flex: 0 0 var(--webbo-radio-icon-size);
	pointer-events: none;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .webbo-radio-option-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .elementor-field-option:hover {
	border-color: var(--webbo-radio-icon-hover-border-color);
	background-color: var(--webbo-radio-icon-hover-background);
	color: var(--webbo-radio-icon-hover-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .elementor-field-option:hover label {
	color: var(--webbo-radio-icon-hover-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) {
	border-color: var(--webbo-radio-icon-selected-border-color);
	background-color: var(--webbo-radio-icon-selected-background);
	color: var(--webbo-radio-icon-selected-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) label {
	color: var(--webbo-radio-icon-selected-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .elementor-field-option:focus-within {
	outline: 2px solid var(--webbo-radio-icon-selected-border-color);
	outline-offset: 2px;
}


/* ==================================================
   PHP-RENDERED RADIO CLASS FALLBACK

   Elementor places field CSS classes on the native field wrapper. These
   selectors mirror the subgroup rules so core Radio layouts are styled on
   first paint, before the small icon/state script runs.
================================================== */

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-standard .elementor-field-subgroup {
	gap: var(--webbo-radio-option-gap);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-button .elementor-field-subgroup {
	gap: var(--webbo-radio-button-option-gap);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-bordered .elementor-field-subgroup {
	gap: var(--webbo-radio-bordered-option-gap);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup {
	gap: var(--webbo-radio-icon-option-gap);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-standard .elementor-field-subgroup .elementor-field-option label {
	color: var(--webbo-radio-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-width-inline .elementor-field-subgroup {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-width-inline .elementor-field-subgroup .elementor-field-option {
	flex: 0 1 auto !important;
	width: auto !important;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-width-full .elementor-field-subgroup {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-width-full .elementor-field-subgroup .elementor-field-option,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-width-full .elementor-field-subgroup .elementor-field-option label {
	width: 100%;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-standard .elementor-field-subgroup {
	--webbo-current-radio-size: var(--webbo-radio-size);
	--webbo-current-radio-background: var(--webbo-radio-background);
	--webbo-current-radio-border-color: var(--webbo-radio-border-color);
	--webbo-current-radio-border-width: var(--webbo-radio-border-width);
	--webbo-current-radio-selected-color: var(--webbo-radio-selected-color);
	--webbo-current-radio-dot-color: var(--webbo-radio-dot-color);
	--webbo-current-radio-dot-size: var(--webbo-radio-dot-size);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-bordered .elementor-field-subgroup {
	--webbo-current-radio-size: var(--webbo-radio-bordered-indicator-size);
	--webbo-current-radio-background: var(--webbo-radio-bordered-indicator-background);
	--webbo-current-radio-border-color: var(--webbo-radio-bordered-indicator-border-color);
	--webbo-current-radio-border-width: var(--webbo-radio-bordered-indicator-border-width);
	--webbo-current-radio-selected-color: var(--webbo-radio-bordered-indicator-selected-color);
	--webbo-current-radio-dot-color: var(--webbo-radio-bordered-indicator-dot-color);
	--webbo-current-radio-dot-size: var(--webbo-radio-bordered-indicator-dot-size);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon.webbo-radio-icon-indicator-yes .elementor-field-subgroup {
	--webbo-current-radio-size: var(--webbo-radio-icon-indicator-size);
	--webbo-current-radio-background: var(--webbo-radio-icon-indicator-background);
	--webbo-current-radio-border-color: var(--webbo-radio-icon-indicator-border-color);
	--webbo-current-radio-border-width: var(--webbo-radio-icon-indicator-border-width);
	--webbo-current-radio-selected-color: var(--webbo-radio-icon-indicator-selected-color);
	--webbo-current-radio-dot-color: var(--webbo-radio-icon-indicator-dot-color);
	--webbo-current-radio-dot-size: var(--webbo-radio-icon-indicator-dot-size);
}

.webbo-radio-style-yes .elementor-field-type-radio:is(
	.webbo-radio-layout-standard,
	.webbo-radio-layout-bordered,
	.webbo-radio-layout-icon.webbo-radio-icon-indicator-yes
) .elementor-field-subgroup input[type="radio"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box;
	width: var(--webbo-current-radio-size) !important;
	height: var(--webbo-current-radio-size) !important;
	min-width: var(--webbo-current-radio-size) !important;
	min-height: var(--webbo-current-radio-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: var(--webbo-current-radio-border-width) solid var(--webbo-current-radio-border-color) !important;
	border-radius: 50% !important;
	background-color: var(--webbo-current-radio-background) !important;
	background-image: none !important;
	box-shadow: none !important;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.webbo-radio-style-yes .elementor-field-type-radio:is(
	.webbo-radio-layout-standard,
	.webbo-radio-layout-bordered,
	.webbo-radio-layout-icon.webbo-radio-icon-indicator-yes
) .elementor-field-subgroup input[type="radio"]:checked {
	border-color: var(--webbo-current-radio-selected-color) !important;
	background-color: var(--webbo-current-radio-selected-color) !important;
	background-image: radial-gradient(
		circle at center,
		var(--webbo-current-radio-dot-color) 0 calc(var(--webbo-current-radio-dot-size) / 2),
		transparent calc((var(--webbo-current-radio-dot-size) / 2) + 0.6px)
	) !important;
}

.webbo-radio-style-yes .elementor-field-type-radio:is(
	.webbo-radio-layout-standard,
	.webbo-radio-layout-bordered,
	.webbo-radio-layout-icon.webbo-radio-icon-indicator-yes
) .elementor-field-subgroup input[type="radio"]:focus-visible {
	outline: 2px solid var(--webbo-current-radio-selected-color) !important;
	outline-offset: 2px;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-standard .elementor-field-subgroup .elementor-field-option {
	display: flex;
	align-items: center;
	gap: var(--webbo-radio-text-gap);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-button .elementor-field-subgroup input[type="radio"],
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon:not(.webbo-radio-icon-indicator-yes) .elementor-field-subgroup input[type="radio"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-button .elementor-field-subgroup .elementor-field-option label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 1px;
	padding: var(--webbo-radio-button-padding);
	border: var(--webbo-radio-button-border-width) solid var(--webbo-radio-button-border-color);
	border-radius: var(--webbo-radio-button-radius);
	background-color: var(--webbo-radio-button-background);
	color: var(--webbo-radio-button-text-color);
	line-height: inherit;
	text-align: center;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-button .elementor-field-subgroup .elementor-field-option label:hover {
	border-color: var(--webbo-radio-button-hover-border-color);
	background-color: var(--webbo-radio-button-hover-background);
	color: var(--webbo-radio-button-hover-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-button .elementor-field-subgroup input[type="radio"]:checked + label {
	border-color: var(--webbo-radio-button-selected-border-color);
	background-color: var(--webbo-radio-button-selected-background);
	color: var(--webbo-radio-button-selected-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-button .elementor-field-subgroup input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--webbo-radio-button-selected-border-color);
	outline-offset: 2px;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-bordered .elementor-field-subgroup .elementor-field-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--webbo-radio-bordered-indicator-text-gap);
	padding: var(--webbo-radio-bordered-padding);
	border: var(--webbo-radio-bordered-border-width) solid var(--webbo-radio-bordered-border-color);
	border-radius: var(--webbo-radio-bordered-radius);
	background-color: var(--webbo-radio-bordered-background);
	color: var(--webbo-radio-bordered-text-color);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-bordered .elementor-field-subgroup .elementor-field-option label {
	position: static;
	flex: 1 1 auto;
	color: var(--webbo-radio-bordered-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-bordered .elementor-field-subgroup .elementor-field-option label::after,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .elementor-field-option label::after {
	content: "";
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-bordered .elementor-field-subgroup .elementor-field-option:hover {
	border-color: var(--webbo-radio-bordered-hover-border-color);
	background-color: var(--webbo-radio-bordered-hover-background);
	color: var(--webbo-radio-bordered-hover-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-bordered .elementor-field-subgroup .elementor-field-option:hover label {
	color: var(--webbo-radio-bordered-hover-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-bordered .elementor-field-subgroup .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) {
	border-color: var(--webbo-radio-bordered-selected-border-color);
	background-color: var(--webbo-radio-bordered-selected-background);
	color: var(--webbo-radio-bordered-selected-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-bordered .elementor-field-subgroup .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) label {
	color: var(--webbo-radio-bordered-selected-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-bordered .elementor-field-subgroup .elementor-field-option:focus-within {
	outline: 2px solid var(--webbo-radio-bordered-selected-border-color);
	outline-offset: 2px;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .elementor-field-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--webbo-radio-icon-indicator-text-gap);
	padding: var(--webbo-radio-icon-padding);
	border: var(--webbo-radio-icon-border-width) solid var(--webbo-radio-icon-border-color);
	border-radius: var(--webbo-radio-icon-radius);
	background-color: var(--webbo-radio-icon-background);
	color: var(--webbo-radio-icon-text-color);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .elementor-field-option label {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--webbo-radio-icon-gap);
	flex: 1 1 auto;
	color: var(--webbo-radio-icon-text-color);
	text-align: center;
	font-size: var(--webbo-radio-icon-label-font-size, inherit);
	font-weight: var(--webbo-radio-icon-label-font-weight, inherit);
	line-height: 1;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon.webbo-radio-icon-position-top .elementor-field-subgroup .elementor-field-option label {
	flex-direction: column;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon.webbo-radio-icon-position-left .elementor-field-subgroup .elementor-field-option label {
	flex-direction: row;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon.webbo-radio-icon-position-right .elementor-field-subgroup .elementor-field-option label {
	flex-direction: row-reverse;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .webbo-radio-option-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--webbo-radio-icon-size);
	height: var(--webbo-radio-icon-size);
	flex: 0 0 var(--webbo-radio-icon-size);
	pointer-events: none;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .webbo-radio-option-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .elementor-field-option:hover {
	border-color: var(--webbo-radio-icon-hover-border-color);
	background-color: var(--webbo-radio-icon-hover-background);
	color: var(--webbo-radio-icon-hover-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .elementor-field-option:hover label {
	color: var(--webbo-radio-icon-hover-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) {
	border-color: var(--webbo-radio-icon-selected-border-color);
	background-color: var(--webbo-radio-icon-selected-background);
	color: var(--webbo-radio-icon-selected-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) label {
	color: var(--webbo-radio-icon-selected-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .elementor-field-option:focus-within {
	outline: 2px solid var(--webbo-radio-icon-selected-border-color);
	outline-offset: 2px;
}

/* ==================================================
   FIELD HOVER AND FOCUS
================================================== */

/* Remove browser outlines and shadows without changing Elementor borders. */
.webbo-field-state-clean-yes .elementor-field-group:not(.elementor-field-type-checkbox):not(.elementor-field-type-radio):not(.elementor-field-type-acceptance) .elementor-field:hover,
.webbo-field-state-clean-yes .elementor-field-group:not(.elementor-field-type-checkbox):not(.elementor-field-type-radio):not(.elementor-field-type-acceptance) .elementor-field:focus,
.webbo-field-state-clean-yes .elementor-field-group:not(.elementor-field-type-checkbox):not(.elementor-field-type-radio):not(.elementor-field-type-acceptance) .elementor-field:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Keep Elementor's Select border colours intact while removing browser or theme outlines. */
.webbo-field-state-clean-yes .elementor-field-type-select:hover .elementor-select-wrapper,
.webbo-field-state-clean-yes .elementor-field-type-select .elementor-select-wrapper:hover,
.webbo-field-state-clean-yes .elementor-field-type-select:focus-within .elementor-select-wrapper,
.webbo-field-state-clean-yes .elementor-field-type-select .elementor-select-wrapper:focus-within {
	outline: none !important;
	box-shadow: none !important;
}

/* ==================================================
   FIELD LAYOUT VARIANT 2: FLOATING LABELS
================================================== */

/* Default values used before the Elementor controls are saved. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) {
	--webbo-floating-label-size: 13px;
	--webbo-floating-placeholder-color: #11182750;
	--webbo-floating-label-background: #ffffff;
	--webbo-floating-active-border-color: #111827;
	--webbo-floating-label-top: -6px;
	--webbo-floating-transition: 180ms;
	--webbo-floating-label-horizontal-offset: 22px;
	--webbo-floating-resting-offset: 0px;
	--webbo-floating-textarea-resting-label-offset: -12px;
	--webbo-floating-active-value-offset: -8px;
	--webbo-floating-textarea-value-offset: -8px;
	--webbo-floating-value-horizontal-offset: 0px;
	--webbo-floating-textarea-value-horizontal-offset: 0px;
}

/* Design 3 uses the same floating-label engine with its own starting profile. */
.webbo-field-layout-design3 {
	--webbo-floating-label-top: 7px;
	--webbo-floating-label-horizontal-offset: 18px;
	--webbo-floating-value-horizontal-offset: -4px;
	--webbo-floating-textarea-value-horizontal-offset: -4px;
	--webbo-floating-active-value-offset: 1px;
	--webbo-floating-textarea-value-offset: -2px;
}

/*
 * Target Elementor's own field-type classes directly.
 * This allows all Style controls to update immediately in the editor preview
 * without waiting for JavaScript to add a helper class.
 */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group:is(
	.elementor-field-type-text,
	.elementor-field-type-email,
	.elementor-field-type-tel,
	.elementor-field-type-url,
	.elementor-field-type-number,
	.elementor-field-type-date,
	.elementor-field-type-time,
	.elementor-field-type-password,
	.elementor-field-type-search,
	.elementor-field-type-month,
	.elementor-field-type-week,
	.elementor-field-type-datetime-local,
	.elementor-field-type-textarea,
	.elementor-field-type-select
) {
	position: relative;
}

/* Keep the Select wrapper at the full field width. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-select .elementor-select-wrapper {
	width: 100%;
}

/* Place the normal Elementor label inside supported fields. The horizontal offset is shared by resting and floated states, so movement stays vertical only. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group:is(
	.elementor-field-type-text,
	.elementor-field-type-email,
	.elementor-field-type-tel,
	.elementor-field-type-url,
	.elementor-field-type-number,
	.elementor-field-type-date,
	.elementor-field-type-time,
	.elementor-field-type-password,
	.elementor-field-type-search,
	.elementor-field-type-month,
	.elementor-field-type-week,
	.elementor-field-type-datetime-local,
	.elementor-field-type-textarea,
	.elementor-field-type-select
) > .elementor-field-label {
	display: block !important;
	position: absolute;
	z-index: 3;
	top: calc(50% + var(--webbo-floating-resting-offset));
	left: var(--webbo-floating-label-horizontal-offset);
	width: auto !important;
	max-width: calc(100% - (var(--webbo-floating-label-horizontal-offset) * 2));
	margin: 0 !important;
	padding: 0 !important;
	background-color: transparent;
	box-shadow: none;
	line-height: 1.2;
	transform: translate3d(0, -50%, 0);
	transform-origin: left top;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition:
		top var(--webbo-floating-transition) ease,
		transform var(--webbo-floating-transition) ease,
		font-size var(--webbo-floating-transition) ease,
		color var(--webbo-floating-transition) ease;
}

/* Textarea labels start near the first line instead of the vertical centre.
 * The dedicated offset affects only the empty, inactive resting state. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-textarea:not(:focus-within):not(.has-value) > .elementor-field-label {
	top: calc(25px + var(--webbo-floating-textarea-resting-label-offset));
	transform: none;
}

/* Move and shrink the label on focus or when JavaScript detects a value. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group:is(
	.elementor-field-type-text,
	.elementor-field-type-email,
	.elementor-field-type-tel,
	.elementor-field-type-url,
	.elementor-field-type-number,
	.elementor-field-type-date,
	.elementor-field-type-time,
	.elementor-field-type-password,
	.elementor-field-type-search,
	.elementor-field-type-month,
	.elementor-field-type-week,
	.elementor-field-type-datetime-local,
	.elementor-field-type-textarea,
	.elementor-field-type-select
):focus-within > .elementor-field-label,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group:is(
	.elementor-field-type-text,
	.elementor-field-type-email,
	.elementor-field-type-tel,
	.elementor-field-type-url,
	.elementor-field-type-number,
	.elementor-field-type-date,
	.elementor-field-type-time,
	.elementor-field-type-password,
	.elementor-field-type-search,
	.elementor-field-type-month,
	.elementor-field-type-week,
	.elementor-field-type-datetime-local,
	.elementor-field-type-textarea,
	.elementor-field-type-select
).has-value > .elementor-field-label {
	top: var(--webbo-floating-label-top);
	font-size: var(--webbo-floating-label-size) !important;
	background-color: transparent;
	box-shadow: none;
	transform: translate3d(0, 0, 0);
}

/*
 * Background Mask keeps the previous solid-colour method available for forms
 * placed over a flat background. The label itself keeps zero padding so its
 * vertical position and line box are not enlarged.
 */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group:is(
	.elementor-field-type-text,
	.elementor-field-type-email,
	.elementor-field-type-tel,
	.elementor-field-type-url,
	.elementor-field-type-number,
	.elementor-field-type-date,
	.elementor-field-type-time,
	.elementor-field-type-password,
	.elementor-field-type-search,
	.elementor-field-type-month,
	.elementor-field-type-week,
	.elementor-field-type-datetime-local,
	.elementor-field-type-textarea,
	.elementor-field-type-select
):is(:focus-within, .has-value) > .elementor-field-label {
	background-color: var(--webbo-floating-label-background);
	box-shadow:
		4px 0 0 var(--webbo-floating-label-background),
		-4px 0 0 var(--webbo-floating-label-background);
}

/* Build the clean floating-field shape while leaving normal value and border colours to Elementor. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group:is(
	.elementor-field-type-text,
	.elementor-field-type-email,
	.elementor-field-type-tel,
	.elementor-field-type-url,
	.elementor-field-type-number,
	.elementor-field-type-date,
	.elementor-field-type-time,
	.elementor-field-type-password,
	.elementor-field-type-search,
	.elementor-field-type-month,
	.elementor-field-type-week,
	.elementor-field-type-datetime-local
) > input.elementor-field,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-textarea > textarea.elementor-field,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-select .elementor-select-wrapper > select.elementor-field,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-select .elementor-select-wrapper > select.elementor-field-textual {
	box-sizing: border-box;
	width: 100%;
	padding-top: 22px !important;
	padding-bottom: 6px !important;
	transition:
		border-color var(--webbo-floating-transition) ease,
		color var(--webbo-floating-transition) ease,
		padding-top var(--webbo-floating-transition) ease,
		padding-bottom var(--webbo-floating-transition) ease,
		padding-inline-start var(--webbo-floating-transition) ease;
}

/*
 * Preserve Elementor's original horizontal field padding, then apply the
 * optional value offset on top. JavaScript captures the computed starting
 * padding once per rendered field, so the border and overall field width do
 * not move. This also keeps every line of textarea content aligned.
 */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group:is(
	.elementor-field-type-text,
	.elementor-field-type-email,
	.elementor-field-type-tel,
	.elementor-field-type-url,
	.elementor-field-type-number,
	.elementor-field-type-date,
	.elementor-field-type-time,
	.elementor-field-type-password,
	.elementor-field-type-search,
	.elementor-field-type-month,
	.elementor-field-type-week,
	.elementor-field-type-datetime-local
) > input.elementor-field.webbo-value-offset-ready,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-select .elementor-select-wrapper > select.elementor-field.webbo-value-offset-ready,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-select .elementor-select-wrapper > select.elementor-field-textual.webbo-value-offset-ready {
	padding-inline-start: calc(
		var(--webbo-efs-base-padding-inline-start, 0px) +
		var(--webbo-floating-value-horizontal-offset)
	) !important;
}

/* Give textarea content an independent horizontal adjustment. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-textarea > textarea.elementor-field.webbo-value-offset-ready {
	padding-inline-start: calc(
		var(--webbo-efs-base-padding-inline-start, 0px) +
		var(--webbo-floating-textarea-value-horizontal-offset)
	) !important;
}

/*
 * Fine-tune the active value without moving the field border. The total vertical
 * padding stays unchanged, so the field height remains controlled by Elementor.
 * Negative values move the placeholder or entered value upward. Number fields
 * use a stable centred content box below so their native spinner does not jump.
 */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group:is(
	.elementor-field-type-text,
	.elementor-field-type-email,
	.elementor-field-type-tel,
	.elementor-field-type-url,
	.elementor-field-type-date,
	.elementor-field-type-time,
	.elementor-field-type-password,
	.elementor-field-type-search,
	.elementor-field-type-month,
	.elementor-field-type-week,
	.elementor-field-type-datetime-local
):is(:focus-within, .has-value) > input.elementor-field,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-select:is(:focus-within, .has-value) .elementor-select-wrapper > select.elementor-field,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-select:is(:focus-within, .has-value) .elementor-select-wrapper > select.elementor-field-textual {
	padding-top: calc(22px + var(--webbo-floating-active-value-offset)) !important;
	padding-bottom: calc(6px - var(--webbo-floating-active-value-offset)) !important;
}

/*
 * Keep browser-native number spinners vertically centred in every state.
 * The spinner shares the input content box, so changing asymmetric vertical
 * padding would move it. A stable 14px / 14px split preserves the same total
 * padding as the normal 22px / 6px field while keeping the arrows centred.
 */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-number > input.elementor-field[type="number"] {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
}

:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-number > input.elementor-field[type="number"]::-webkit-inner-spin-button,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-number > input.elementor-field[type="number"]::-webkit-outer-spin-button {
	margin-block: 0;
}

/* The Select automatically keeps a safe amount of room for the custom arrow. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3).webbo-select-style-yes .elementor-field-group.elementor-field-type-select .elementor-select-wrapper > select.elementor-field,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3).webbo-select-style-yes .elementor-field-group.elementor-field-type-select .elementor-select-wrapper > select.elementor-field-textual {
	padding-right: calc(
		var(--webbo-select-arrow-offset) +
		var(--webbo-select-arrow-size) +
		12px
	) !important;
}

/* Keep textarea sizing under Elementor control while reserving room for the floating label. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-textarea > textarea.elementor-field {
	padding-top: 25px !important;
	resize: vertical;
}

/*
 * Move textarea content independently after its label floats while preserving
 * the total block padding. Keeping top + bottom padding constant prevents an
 * auto-height textarea from becoming shorter and moving its bottom border.
 */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-textarea:is(:focus-within, .has-value) > textarea.elementor-field {
	padding-top: calc(25px + var(--webbo-floating-textarea-value-offset)) !important;
	padding-bottom: calc(6px - var(--webbo-floating-textarea-value-offset)) !important;
}

/* Apply the active colour to every border side enabled in Elementor. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group:is(
	.elementor-field-type-text,
	.elementor-field-type-email,
	.elementor-field-type-tel,
	.elementor-field-type-url,
	.elementor-field-type-number,
	.elementor-field-type-date,
	.elementor-field-type-time,
	.elementor-field-type-password,
	.elementor-field-type-search,
	.elementor-field-type-month,
	.elementor-field-type-week,
	.elementor-field-type-datetime-local
):focus-within > input.elementor-field,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-textarea:focus-within > textarea.elementor-field,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-select:focus-within .elementor-select-wrapper > select.elementor-field,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-select:focus-within .elementor-select-wrapper > select.elementor-field-textual {
	border-color: var(--webbo-floating-active-border-color) !important;
}

/* Hide the real placeholder while the label is still acting as one. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group:not(:focus-within):not(.has-value) > input.elementor-field::placeholder,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-textarea:not(:focus-within):not(.has-value) > textarea.elementor-field::placeholder {
	color: transparent !important;
	opacity: 0 !important;
}

/* Reveal the real placeholder after the label has moved upward. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group:focus-within > input.elementor-field::placeholder,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.has-value > input.elementor-field::placeholder,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-textarea:focus-within > textarea.elementor-field::placeholder,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-textarea.has-value > textarea.elementor-field::placeholder {
	color: var(--webbo-floating-placeholder-color) !important;
	opacity: 1 !important;
	transition: opacity var(--webbo-floating-transition) ease;
}

/* A Select placeholder is text inside an empty option, not ::placeholder. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-select:not(:focus-within):not(.has-value) select.webbo-select-is-placeholder {
	color: transparent !important;
}

:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-select:focus-within select.webbo-select-is-placeholder {
	color: var(--webbo-floating-placeholder-color) !important;
}

/* Option colours are applied once during Select initialisation and focus.
   This prevents real options from inheriting the placeholder colour. */

/* Rotate the custom Select arrow while the field has focus. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3).webbo-select-style-yes .elementor-field-group.elementor-field-type-select .elementor-select-wrapper::after {
	transition: transform var(--webbo-floating-transition) ease;
}

:is(.webbo-field-layout-floating, .webbo-field-layout-design3).webbo-select-style-yes .elementor-field-group.elementor-field-type-select:focus-within .elementor-select-wrapper::after {
	transform: translateY(-50%) rotate(180deg);
}

/* Keep autofilled text legible without replacing the field border settings. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group input.elementor-field:-webkit-autofill,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group input.elementor-field:-webkit-autofill:hover,
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group input.elementor-field:-webkit-autofill:focus {
	-webkit-text-fill-color: currentColor !important;
	box-shadow: 0 0 0 1000px transparent inset !important;
	transition: background-color 9999s ease-out 0s;
}

/* Add animation hooks so JavaScript can detect browser autofill. */
@keyframes webboFloatingAutofillStart {
	from { opacity: 1; }
	to { opacity: 1; }
}

@keyframes webboFloatingAutofillCancel {
	from { opacity: 1; }
	to { opacity: 1; }
}

:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group input.elementor-field:-webkit-autofill {
	animation-name: webboFloatingAutofillStart;
}

:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group input.elementor-field:not(:-webkit-autofill) {
	animation-name: webboFloatingAutofillCancel;
}

/* Mirror horizontal positioning on right-to-left websites. */
body.rtl :is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group:is(
	.elementor-field-type-text,
	.elementor-field-type-email,
	.elementor-field-type-tel,
	.elementor-field-type-url,
	.elementor-field-type-number,
	.elementor-field-type-date,
	.elementor-field-type-time,
	.elementor-field-type-password,
	.elementor-field-type-search,
	.elementor-field-type-month,
	.elementor-field-type-week,
	.elementor-field-type-datetime-local,
	.elementor-field-type-textarea,
	.elementor-field-type-select
) > .elementor-field-label {
	right: var(--webbo-floating-label-horizontal-offset);
	left: auto;
	transform-origin: right top;
}

body.rtl :is(.webbo-field-layout-floating, .webbo-field-layout-design3).webbo-select-style-yes .elementor-field-group.elementor-field-type-select .elementor-select-wrapper > select.elementor-field,
body.rtl :is(.webbo-field-layout-floating, .webbo-field-layout-design3).webbo-select-style-yes .elementor-field-group.elementor-field-type-select .elementor-select-wrapper > select.elementor-field-textual {
	padding-left: calc(
		var(--webbo-select-arrow-offset) +
		var(--webbo-select-arrow-size) +
		12px
	) !important;
}

/* Respect visitors who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group > .elementor-field-label,
	:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group > input.elementor-field,
	:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-textarea > textarea.elementor-field,
	:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.elementor-field-type-select .elementor-select-wrapper > select,
	:is(.webbo-field-layout-floating, .webbo-field-layout-design3).webbo-select-style-yes .elementor-field-group.elementor-field-type-select .elementor-select-wrapper::after {
		transition-duration: 0ms !important;
	}
}

/* ==================================================
   SELECT FIELD CLEAN ACTIVE STATE
================================================== */

/* Preserve Elementor's actual Select borders and remove only extra outlines. */
.webbo-field-state-clean-yes .elementor-field-type-select select.elementor-field:hover,
.webbo-field-state-clean-yes .elementor-field-type-select select.elementor-field:focus,
.webbo-field-state-clean-yes .elementor-field-type-select select.elementor-field:focus-visible,
.webbo-field-state-clean-yes .elementor-field-type-select select.elementor-field:active,
.webbo-field-state-clean-yes .elementor-field-type-select select.elementor-field-textual:hover,
.webbo-field-state-clean-yes .elementor-field-type-select select.elementor-field-textual:focus,
.webbo-field-state-clean-yes .elementor-field-type-select select.elementor-field-textual:focus-visible,
.webbo-field-state-clean-yes .elementor-field-type-select select.elementor-field-textual:active,
.webbo-field-state-clean-yes .elementor-field-type-select:focus-within .elementor-select-wrapper > select.elementor-field,
.webbo-field-state-clean-yes .elementor-field-type-select:focus-within .elementor-select-wrapper > select.elementor-field-textual {
	outline: none !important;
	box-shadow: none !important;
}

/* Radio Icon supports Elementor library icons and uploaded SVG/image files. */
.webbo-radio-style-yes .elementor-field-type-radio .webbo-radio-option-icon i,
.webbo-radio-style-yes .elementor-field-type-radio .webbo-radio-option-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	font-size: var(--webbo-radio-icon-size);
	line-height: 1;
	fill: currentColor;
}

.webbo-radio-style-yes .elementor-field-type-radio .webbo-radio-option-icon i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}


/* ==================================================
   VERSION 2.7 RADIO PREVIEW AND IMAGE REFINEMENTS
================================================== */

/* Elementor field typography remains the single source of truth for Radio Dot. */
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-standard .elementor-field-option label,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-standard .elementor-field-subgroup .elementor-field-option label {
	color: var(--webbo-radio-text-color) !important;
}

/* Make Radio Button state styling reliable regardless of Elementor label spacing. */
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-button .elementor-field-option,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-button .elementor-field-subgroup .elementor-field-option {
	position: relative;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-button .elementor-field-option label,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-button .elementor-field-subgroup .elementor-field-option label {
	border-color: var(--webbo-radio-button-border-color) !important;
	background-color: var(--webbo-radio-button-background) !important;
	color: var(--webbo-radio-button-text-color) !important;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-button .elementor-field-option:hover label,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-button .elementor-field-subgroup .elementor-field-option:hover label {
	border-color: var(--webbo-radio-button-hover-border-color) !important;
	background-color: var(--webbo-radio-button-hover-background) !important;
	color: var(--webbo-radio-button-hover-text-color) !important;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-button .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) label,
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-button input[type="radio"]:checked ~ label,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-button .elementor-field-subgroup .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) label,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-button .elementor-field-subgroup input[type="radio"]:checked ~ label {
	border-color: var(--webbo-radio-button-selected-border-color) !important;
	background-color: var(--webbo-radio-button-selected-background) !important;
	color: var(--webbo-radio-button-selected-text-color) !important;
}

/* Radio Icon images use a predictable crop, centred inside user-controlled dimensions. */
.webbo-radio-style-yes .elementor-field-type-radio .webbo-radio-option-icon {
	width: var(--webbo-radio-icon-width) !important;
	height: var(--webbo-radio-icon-height) !important;
	flex: 0 0 var(--webbo-radio-icon-width) !important;
	border-radius: var(--webbo-radio-icon-image-radius);
	overflow: hidden;
}

.webbo-radio-style-yes .elementor-field-type-radio .webbo-radio-option-icon img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	border-radius: inherit;
	object-fit: cover !important;
	object-position: center center !important;
}

/* SVG artwork stays fully visible while raster images use cover and centre. */
.webbo-radio-style-yes .elementor-field-type-radio .webbo-radio-option-icon.webbo-radio-option-icon-svg img {
	object-fit: contain !important;
}

/* Strengthen Radio Icon normal, hover, and selected states in editor and frontend. */
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .elementor-field-option,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .elementor-field-option {
	border-color: var(--webbo-radio-icon-border-color) !important;
	background-color: var(--webbo-radio-icon-background) !important;
	color: var(--webbo-radio-icon-text-color) !important;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .elementor-field-option label,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .elementor-field-option label {
	color: var(--webbo-radio-icon-text-color) !important;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .elementor-field-option:hover,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .elementor-field-option:hover {
	border-color: var(--webbo-radio-icon-hover-border-color) !important;
	background-color: var(--webbo-radio-icon-hover-background) !important;
	color: var(--webbo-radio-icon-hover-text-color) !important;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .elementor-field-option:hover label,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .elementor-field-option:hover label {
	color: var(--webbo-radio-icon-hover-text-color) !important;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)),
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) {
	border-color: var(--webbo-radio-icon-selected-border-color) !important;
	background-color: var(--webbo-radio-icon-selected-background) !important;
	color: var(--webbo-radio-icon-selected-text-color) !important;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-icon .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) label,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .elementor-field-subgroup .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) label {
	color: var(--webbo-radio-icon-selected-text-color) !important;
}

/* Radio Icon library icons and uploaded SVG files inherit the same colour as
 * the option text in Normal, Hover, and Selected states. Raster images remain
 * unchanged. Uploaded SVG files are rendered as a monochrome CSS mask. */
.webbo-radio-style-yes .elementor-field-type-radio .webbo-radio-option-icon {
	color: var(--webbo-radio-icon-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-option:hover .webbo-radio-option-icon {
	color: var(--webbo-radio-icon-hover-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) .webbo-radio-option-icon {
	color: var(--webbo-radio-icon-selected-text-color);
}

.webbo-radio-style-yes .elementor-field-type-radio .webbo-radio-option-icon.webbo-radio-option-icon-svg-mask {
	display: block;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

/* ==================================================
   VERSION 2.8 STABLE TEXT STATES
================================================== */

/* Checkbox option text follows Elementor typography, with plugin colour states. */
.webbo-checkbox-style-yes .elementor-field-type-checkbox .elementor-field-option label {
	color: var(--webbo-checkbox-text-color) !important;
	margin: 0;
	cursor: pointer;
}

.webbo-checkbox-style-yes .elementor-field-type-checkbox .elementor-field-option:hover label {
	color: var(--webbo-checkbox-hover-text-color) !important;
}

.webbo-checkbox-style-yes .elementor-field-type-checkbox .elementor-field-option:is(.is-checked, :has(input[type="checkbox"]:checked)) label,
.webbo-checkbox-style-yes .elementor-field-type-checkbox input[type="checkbox"]:checked + label,
.webbo-checkbox-style-yes .elementor-field-type-checkbox input[type="checkbox"]:checked ~ label {
	color: var(--webbo-checkbox-checked-text-color) !important;
}

/* Radio Dot uses Elementor Field Typography and only overrides colour states. */
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-standard .elementor-field-option label,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-standard .elementor-field-subgroup .elementor-field-option label {
	color: var(--webbo-radio-text-color) !important;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-standard .elementor-field-option:hover label,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-standard .elementor-field-subgroup .elementor-field-option:hover label {
	color: var(--webbo-radio-hover-text-color) !important;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-standard .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) label,
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-standard input[type="radio"]:checked + label,
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-layout-standard input[type="radio"]:checked ~ label,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-standard .elementor-field-subgroup .elementor-field-option:is(.is-checked, :has(input[type="radio"]:checked)) label,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-standard .elementor-field-subgroup input[type="radio"]:checked + label,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-standard .elementor-field-subgroup input[type="radio"]:checked ~ label {
	color: var(--webbo-radio-selected-text-color) !important;
}

/* ==================================================
   SEGMENTED PROGRESS BAR
================================================== */

/* Safe defaults for the dedicated Steps Settings type. */
.webbo-steps-segmented-type {
	--webbo-step-completed-color: #0000DE50;
	--webbo-step-current-color: #0000DE;
	--webbo-step-upcoming-color: #eeeeee;
	--webbo-step-height: 3px;
	--webbo-step-gap: 6px;
	--webbo-step-radius: 999px;
	--webbo-step-spacing: 30px;
	--webbo-step-transition: 180ms;
}

/* Hidden by default so ordinary Elementor step types remain untouched. */
.webbo-step-segments {
	display: none;
}

/* The custom type uses its own server-rendered row. Hide Elementor's native
 * continuous or numbered indicator immediately, before frontend JavaScript. */
.webbo-steps-segmented-type
	.e-form__indicators:not(.webbo-segmented-step-indicators) {
	display: none !important;
}

/* The indicator can be Elementor-generated or the lightweight fallback
 * inserted by the plugin when Elementor does not render an unknown type. */
.webbo-steps-segmented-type .webbo-segmented-step-indicators {
	display: block !important;
	grid-column: 1 / -1;
	order: -999;
	width: 100%;
	margin: 0 0 var(--webbo-step-spacing) !important;
	padding: 0 !important;
}

/* Hide Elementor's native number, text, icon, or continuous meter output.
 * Step pages, buttons, validation, and submission remain fully native. */
.webbo-steps-segmented-type
	.webbo-segmented-step-indicators
	> :not(.webbo-step-segments) {
	display: none !important;
}

.webbo-steps-segmented-type
	.webbo-segmented-step-indicators
	> .webbo-step-segments {
	display: grid;
	grid-template-columns: repeat(var(--webbo-step-count, 1), minmax(0, 1fr));
	gap: var(--webbo-step-gap);
	width: 100%;
}

.webbo-step-segment {
	display: block;
	width: 100%;
	height: var(--webbo-step-height);
	border-radius: var(--webbo-step-radius);
	background-color: var(--webbo-step-upcoming-color);
	transition: background-color var(--webbo-step-transition) ease;
}

.webbo-step-segment.is-completed {
	background-color: var(--webbo-step-completed-color);
}

.webbo-step-segment.is-current {
	background-color: var(--webbo-step-current-color);
}

@media (prefers-reduced-motion: reduce) {
	.webbo-step-segment {
		transition: none;
	}
}



/* ==================================================
   RADIO ICON GRID AND MEDIA NORMALISATION
================================================== */

/* Uploaded raster images fill their configured frame consistently. The media
 * wrapper clips the image and applies the image-specific radius. SVG masks and
 * icon-library glyphs remain centred by the existing Radio Icon rules. */
.webbo-radio-style-yes .elementor-field-type-radio .webbo-radio-option-icon,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .webbo-radio-option-icon {
	overflow: hidden;
	border-radius: var(--webbo-radio-icon-image-radius);
	box-sizing: border-box;
}

.webbo-radio-style-yes .elementor-field-type-radio .webbo-radio-option-icon img,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-layout-icon .webbo-radio-option-icon img {
	object-fit: cover;
	object-position: center;
}

/* Grid layout uses the full subgroup width. Column counts come from lightweight
 * per-field classes, so no frontend layout JavaScript is required. */
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-width-grid,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-width-grid .elementor-field-subgroup {
	display: grid;
	grid-template-columns: repeat(var(--webbo-radio-icon-columns-desktop, 4), minmax(0, 1fr));
	width: 100%;
}

.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-width-grid .elementor-field-option,
.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-width-grid .elementor-field-option label,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-width-grid .elementor-field-subgroup .elementor-field-option,
.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-width-grid .elementor-field-subgroup .elementor-field-option label {
	width: 100%;
	min-width: 0;
}

.webbo-radio-icon-columns-desktop-1 { --webbo-radio-icon-columns-desktop: 1; }
.webbo-radio-icon-columns-desktop-2 { --webbo-radio-icon-columns-desktop: 2; }
.webbo-radio-icon-columns-desktop-3 { --webbo-radio-icon-columns-desktop: 3; }
.webbo-radio-icon-columns-desktop-4 { --webbo-radio-icon-columns-desktop: 4; }
.webbo-radio-icon-columns-tablet-1 { --webbo-radio-icon-columns-tablet: 1; }
.webbo-radio-icon-columns-tablet-2 { --webbo-radio-icon-columns-tablet: 2; }
.webbo-radio-icon-columns-tablet-3 { --webbo-radio-icon-columns-tablet: 3; }
.webbo-radio-icon-columns-tablet-4 { --webbo-radio-icon-columns-tablet: 4; }
.webbo-radio-icon-columns-mobile-1 { --webbo-radio-icon-columns-mobile: 1; }
.webbo-radio-icon-columns-mobile-2 { --webbo-radio-icon-columns-mobile: 2; }
.webbo-radio-icon-columns-mobile-3 { --webbo-radio-icon-columns-mobile: 3; }
.webbo-radio-icon-columns-mobile-4 { --webbo-radio-icon-columns-mobile: 4; }


@media (max-width: 1024px) {
	.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-width-grid,
	.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-width-grid .elementor-field-subgroup {
		grid-template-columns: repeat(var(--webbo-radio-icon-columns-tablet, 3), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.webbo-radio-style-yes .elementor-field-type-radio .elementor-field-subgroup.webbo-radio-width-grid,
	.webbo-radio-style-yes .elementor-field-type-radio.webbo-radio-width-grid .elementor-field-subgroup {
		grid-template-columns: repeat(var(--webbo-radio-icon-columns-mobile, 2), minmax(0, 1fr));
	}
}

/* ==================================================
   RADIO ICON TOP-POSITION VERTICAL BALANCE
================================================== */

/* When Radio Icon media is positioned above the text, centre the complete
 * media-and-label stack inside the option card. This keeps the perceived top
 * and bottom spacing balanced, including when adjacent grid options contain
 * text only. */
.webbo-radio-style-yes
.elementor-field-type-radio
.elementor-field-subgroup.webbo-radio-layout-icon.webbo-radio-icon-position-top
.elementor-field-option,
.webbo-radio-style-yes
.elementor-field-type-radio.webbo-radio-layout-icon.webbo-radio-icon-position-top
.elementor-field-subgroup
.elementor-field-option {
	justify-content: center;
}

.webbo-radio-style-yes
.elementor-field-type-radio
.elementor-field-subgroup.webbo-radio-layout-icon.webbo-radio-icon-position-top
.elementor-field-option label,
.webbo-radio-style-yes
.elementor-field-type-radio.webbo-radio-layout-icon.webbo-radio-icon-position-top
.elementor-field-subgroup
.elementor-field-option label {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	justify-content: center;
	width: 100%;
	min-width: 0;
	margin: 0;
}

/* Remove inline-icon baseline space, which can make equal card padding look
 * visually uneven even when the configured top and bottom values match. */
.webbo-radio-style-yes
.elementor-field-type-radio
.elementor-field-subgroup.webbo-radio-layout-icon.webbo-radio-icon-position-top
.webbo-radio-option-icon,
.webbo-radio-style-yes
.elementor-field-type-radio.webbo-radio-layout-icon.webbo-radio-icon-position-top
.elementor-field-subgroup
.webbo-radio-option-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	margin: 0;
}

.webbo-radio-style-yes
.elementor-field-type-radio
.elementor-field-subgroup.webbo-radio-layout-icon.webbo-radio-icon-position-top
.webbo-radio-option-icon :is(img, svg, i),
.webbo-radio-style-yes
.elementor-field-type-radio.webbo-radio-layout-icon.webbo-radio-icon-position-top
.elementor-field-subgroup
.webbo-radio-option-icon :is(img, svg, i) {
	display: block;
	margin: 0;
}

/* ==================================================
   SIMPLE CONDITIONAL LOGIC
================================================== */

.webbo-condition-hidden,
.elementor-field-group.webbo-condition-hidden,
.e-form__step.webbo-condition-step-hidden,
.e-form__indicators__indicator.webbo-condition-step-indicator-hidden {
	display: none !important;
}

/* ==================================================
   FORM BUTTON SPACING
================================================== */

.elementor-widget-form .e-form__buttons,
.elementor-widget-form .elementor-form-fields-wrapper > .elementor-field-type-submit {
	padding-top: var(--webbo-button-top-spacing, 0px) !important;
}

/* A submit group inside Elementor's final step already inherits spacing from
 * the shared button row. Reset the child so Send stays level with Back. */
.elementor-widget-form .e-form__buttons > .elementor-field-type-submit,
.elementor-widget-form .e-form__buttons > .e-form__buttons__wrapper {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	align-self: stretch !important;
}

.elementor-widget-form .e-form__buttons {
	align-items: stretch !important;
}

.elementor-widget-form .e-form__buttons > :is(.elementor-field-type-submit, .e-form__buttons__wrapper) > .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

/* ==================================================
   DRAG AND DROP FILE UPLOAD
================================================== */

.webbo-drag-drop-upload-yes {
	--webbo-upload-background: #FFFFFF;
	--webbo-upload-border-color: #E5E7EB;
	--webbo-upload-border-style: dashed;
	--webbo-upload-border-width: 1px;
	--webbo-upload-drag-background: #11182705;
	--webbo-upload-drag-border-color: #111827;
	--webbo-upload-radius: 8px;
	--webbo-upload-padding: 24px 20px;
	--webbo-upload-icon-size: 28px;
	--webbo-upload-icon-color: #111827AA;
	--webbo-upload-title-color: #111827;
	--webbo-upload-helper-color: #111827AA;
	--webbo-upload-file-color: #111827;
	--webbo-upload-label-top-gap: 0px;
}

.webbo-drag-drop-upload-yes .elementor-field-type-upload {
	padding-top: var(--webbo-upload-label-top-gap, 0px);
}

.webbo-efs-upload-native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.webbo-efs-upload-zone {
	display: flex;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: var(--webbo-upload-padding, 24px 20px);
	border-style: var(--webbo-upload-border-style, dashed);
	border-width: var(--webbo-upload-border-width, 1px);
	border-color: var(--webbo-upload-border-color, #E5E7EB);
	border-radius: var(--webbo-upload-radius, 8px);
	background: var(--webbo-upload-background, #FFFFFF);
	text-align: center;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.webbo-efs-upload-zone:hover,
.webbo-efs-upload-zone:focus-visible,
.webbo-efs-upload-zone.is-dragover {
	border-color: var(--webbo-upload-drag-border-color, #111827);
	background: var(--webbo-upload-drag-background, #11182705);
}

.webbo-efs-upload-zone:focus-visible {
	outline: 2px solid var(--webbo-upload-drag-border-color, #111827);
	outline-offset: 2px;
}

.webbo-efs-upload-icon {
	display: grid;
	place-items: center;
	width: var(--webbo-upload-icon-size, 28px);
	height: var(--webbo-upload-icon-size, 28px);
	color: var(--webbo-upload-icon-color, #111827AA);
	line-height: 0;
}

.webbo-efs-upload-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.webbo-efs-upload-title {
	color: var(--webbo-upload-title-color, #111827);
	font-weight: 500;
}

.webbo-efs-upload-helper {
	color: var(--webbo-upload-helper-color, #111827AA);
	font-size: 0.9em;
}

.webbo-efs-upload-files {
	display: grid;
	width: 100%;
	gap: 8px;
	margin-top: 4px;
}

.webbo-efs-upload-files:empty {
	display: none;
}

.webbo-efs-upload-file {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border-radius: max(4px, calc(var(--webbo-upload-radius, 8px) / 2));
	background: rgba(17, 24, 39, 0.04);
	color: var(--webbo-upload-file-color, #111827);
	text-align: start;
}

.webbo-efs-upload-file__thumb {
	display: block;
	width: 34px;
	height: 34px;
	border-radius: 4px;
	object-fit: cover;
	object-position: center;
}

.webbo-efs-upload-file__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.webbo-efs-upload-file__remove {
	appearance: none !important;
	display: grid !important;
	place-items: center !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: currentColor !important;
	font: inherit !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer;
}


/* ==================================================
   ACCESSIBLE FIELD LABEL VISIBILITY FINAL OVERRIDE
================================================== */

/*
 * This rule is intentionally placed after the floating-label system. It hides
 * only the main field label and wins over later floating-label width/display
 * declarations, while option and Acceptance text remain visible.
 */
.elementor-field-group.webbo-label-visually-hidden > label.elementor-field-label,
.elementor-field-group.webbo-label-visually-hidden > .elementor-field-label {
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	width: 1px !important;
	min-width: 1px !important;
	max-width: 1px !important;
	height: 1px !important;
	min-height: 1px !important;
	max-height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	transform: none !important;
	transition: none !important;
	pointer-events: none !important;
}

/* ==================================================
   TELEPHONE COUNTRY CODE SELECTOR
================================================== */

.elementor-field-group.webbo-tel-country-enabled {
	position: relative;
	--webbo-tel-picker-width: 52px;
}

/* The full left-hand flag area remains clickable. It deliberately follows the
 * original integrated appearance, with no separate dropdown arrow. */
.elementor-field-group.webbo-tel-country-enabled > .webbo-tel-country-button {
	position: absolute;
	z-index: 5;
	inset-inline-start: 1px;
	width: var(--webbo-tel-picker-width, 52px);
	min-width: var(--webbo-tel-picker-width, 52px);
	margin: 0 !important;
	padding: 0 10px !important;
	border: 0 !important;
	border-inline-end: 1px solid #eeeeee !important;
	box-sizing: border-box;
	border-start-end-radius: 0 !important;
	border-end-end-radius: 0 !important;
	background-clip: padding-box !important;
	overflow: hidden;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit !important;
	line-height: 1 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.elementor-field-group.webbo-tel-country-enabled > .webbo-tel-country-button:hover,
.elementor-field-group.webbo-tel-country-enabled > .webbo-tel-country-button:focus,
.elementor-field-group.webbo-tel-country-enabled > .webbo-tel-country-button:focus-visible {
	background: rgba(17, 24, 39, 0.035) !important;
	outline: none !important;
	box-shadow: none !important;
}

.webbo-tel-country-button__flag,
.webbo-tel-country-option__flag {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(17, 24, 39, 0.045);
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-style: normal;
	line-height: 1;
}

.webbo-tel-country-button__flag {
	width: 24px;
	height: 16px;
	font-size: 18px;
}

.webbo-tel-country-option__flag {
	width: 20px;
	height: 14px;
	font-size: 15px;
}

.webbo-tel-country-button__flag img,
.webbo-tel-country-option__flag img {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: inherit;
	object-fit: cover;
}

/* Keep the native Telephone input as Elementor's real submitted control. */
.elementor-field-group.webbo-tel-country-enabled > input[type="tel"].elementor-field {
	padding-inline-start: calc(var(--webbo-tel-picker-width, 52px) + 12px) !important;
}

.webbo-field-layout-standard .elementor-field-group.webbo-tel-country-enabled > input[type="tel"].elementor-field.webbo-value-offset-ready {
	padding-inline-start: calc(
		var(--webbo-efs-base-padding-inline-start, 0px) +
		var(--webbo-standard-value-horizontal-offset, 0px) +
		var(--webbo-tel-picker-width, 52px)
	) !important;
}

:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.webbo-tel-country-enabled > input[type="tel"].elementor-field.webbo-value-offset-ready {
	padding-inline-start: calc(
		var(--webbo-efs-base-padding-inline-start, 0px) +
		var(--webbo-floating-value-horizontal-offset, 0px) +
		var(--webbo-tel-picker-width, 52px)
	) !important;
}

/* Move the resting and floated label clear of the flag button. */
:is(.webbo-field-layout-floating, .webbo-field-layout-design3) .elementor-field-group.webbo-tel-country-enabled > .elementor-field-label {
	left: calc(var(--webbo-floating-label-horizontal-offset) + var(--webbo-tel-picker-width, 52px));
	max-width: calc(100% - var(--webbo-floating-label-horizontal-offset) - var(--webbo-tel-picker-width, 52px) - 18px);
}

.webbo-tel-country-menu {
	position: fixed;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 180px;
	padding: 8px;
	border: 1px solid rgba(17, 24, 39, 0.18);
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 18px 45px rgba(17, 24, 39, 0.18);
	color: #4b5563;
	font-family: inherit;
	overflow: hidden;
}

.webbo-tel-country-search {
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 44px !important;
	margin: 0 0 6px !important;
	padding: 10px 12px !important;
	border: 1px solid #111827 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	box-shadow: none !important;
	color: #111827 !important;
	font: inherit !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	outline: none !important;
}

.webbo-tel-country-list {
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

.webbo-tel-country-option {
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 9px 8px !important;
	border: 0 !important;
	border-radius: 7px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #4b5563 !important;
	font: inherit !important;
	font-size: 16px !important;
	line-height: 1.35 !important;
	text-align: start !important;
	display: grid !important;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.webbo-tel-country-option:hover,
.webbo-tel-country-option:focus,
.webbo-tel-country-option:focus-visible {
	background: rgba(17, 24, 39, 0.055) !important;
	color: #111827 !important;
	outline: none !important;
}

.webbo-tel-country-option[aria-selected="true"] {
	background: rgba(17, 24, 39, 0.08) !important;
	color: #111827 !important;
}

.webbo-tel-country-option__flag {
	text-align: center;
}

.webbo-tel-country-option__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.webbo-tel-country-option__code {
	color: #9ca3af;
	white-space: nowrap;
}

.webbo-tel-country-empty {
	padding: 18px 10px;
	color: #6b7280;
	font-size: 14px;
	text-align: center;
}