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

/* Default values used when a newly added control has not been saved yet. */
.webbo-select-style-yes {
	--webbo-select-arrow-color: #666666;
	--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-checkbox-focus-color: #111827;
	--webbo-acceptance-text-color: #555555;
	--webbo-acceptance-gap: 5px;
	--webbo-acceptance-align: center;
}

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

/* Clear keyboard-only focus indicator for accessibility. */
.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-focus-color) !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: var(--webbo-acceptance-align);
	gap: var(--webbo-acceptance-gap);
}

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

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

/*
 * Elementor may draw a separate grey interaction border on the Select wrapper.
 * Remove only that wrapper border during hover and focus. The actual Select
 * field is left untouched, so the active border configured in Field Layout
 * continues to work exactly as before.
 */
.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 {
	border-color: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}

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

/* Default values used before the Elementor controls are saved. */
.webbo-field-layout-floating {
	--webbo-floating-label-color: #667085;
	--webbo-floating-label-active-color: #667085;
	--webbo-floating-label-size: 11px;
	--webbo-floating-placeholder-color: #111111;
	--webbo-floating-label-background: #ffffff;
	--webbo-floating-active-border-color: #2563eb;
	--webbo-floating-label-top: 0px;
	--webbo-floating-transition: 180ms;
	--webbo-floating-label-horizontal-offset: 8px;
	--webbo-floating-resting-offset: 6px;
}

/*
 * 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.
 */
.webbo-field-layout-floating .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. */
.webbo-field-layout-floating .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. */
.webbo-field-layout-floating .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;
	color: var(--webbo-floating-label-color) !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 top instead of the vertical centre. */
.webbo-field-layout-floating .elementor-field-group.elementor-field-type-textarea > .elementor-field-label {
	top: 25px;
	transform: none;
}

/* Move and shrink the label on focus or when JavaScript detects a value. */
.webbo-field-layout-floating .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,
.webbo-field-layout-floating .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);
	color: var(--webbo-floating-label-active-color) !important;
	font-size: var(--webbo-floating-label-size) !important;
	background-color: var(--webbo-floating-label-background);
	box-shadow: 0 0 0 4px var(--webbo-floating-label-background);
	transform: translate3d(0, 0, 0);
}

/* Build the clean floating-field shape while leaving normal value and border colours to Elementor. */
.webbo-field-layout-floating .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-field-layout-floating .elementor-field-group.elementor-field-type-textarea > textarea.elementor-field,
.webbo-field-layout-floating .elementor-field-group.elementor-field-type-select .elementor-select-wrapper > select.elementor-field,
.webbo-field-layout-floating .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;
}

/* The Select automatically keeps a safe amount of room for the custom arrow. */
.webbo-field-layout-floating.webbo-select-style-yes .elementor-field-group.elementor-field-type-select .elementor-select-wrapper > select.elementor-field,
.webbo-field-layout-floating.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. */
.webbo-field-layout-floating .elementor-field-group.elementor-field-type-textarea > textarea.elementor-field {
	padding-top: 25px !important;
	resize: vertical;
}

/* Apply the active colour to every border side enabled in Elementor. */
.webbo-field-layout-floating .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,
.webbo-field-layout-floating .elementor-field-group.elementor-field-type-textarea:focus-within > textarea.elementor-field,
.webbo-field-layout-floating .elementor-field-group.elementor-field-type-select:focus-within .elementor-select-wrapper > select.elementor-field,
.webbo-field-layout-floating .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. */
.webbo-field-layout-floating .elementor-field-group:not(:focus-within):not(.has-value) > input.elementor-field::placeholder,
.webbo-field-layout-floating .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. */
.webbo-field-layout-floating .elementor-field-group:focus-within > input.elementor-field::placeholder,
.webbo-field-layout-floating .elementor-field-group.has-value > input.elementor-field::placeholder,
.webbo-field-layout-floating .elementor-field-group.elementor-field-type-textarea:focus-within > textarea.elementor-field::placeholder,
.webbo-field-layout-floating .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. */
.webbo-field-layout-floating .elementor-field-group.elementor-field-type-select:not(:focus-within):not(.has-value) select.webbo-select-is-placeholder {
	color: transparent !important;
}

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

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

.webbo-field-layout-floating.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. */
.webbo-field-layout-floating .elementor-field-group input.elementor-field:-webkit-autofill,
.webbo-field-layout-floating .elementor-field-group input.elementor-field:-webkit-autofill:hover,
.webbo-field-layout-floating .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; }
}

.webbo-field-layout-floating .elementor-field-group input.elementor-field:-webkit-autofill {
	animation-name: webboFloatingAutofillStart;
}

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

/* Mirror horizontal positioning on right-to-left websites. */
body.rtl .webbo-field-layout-floating .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 .webbo-field-layout-floating.webbo-select-style-yes .elementor-field-group.elementor-field-type-select .elementor-select-wrapper > select.elementor-field,
body.rtl .webbo-field-layout-floating.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) {
	.webbo-field-layout-floating .elementor-field-group > .elementor-field-label,
	.webbo-field-layout-floating .elementor-field-group > input.elementor-field,
	.webbo-field-layout-floating .elementor-field-group.elementor-field-type-textarea > textarea.elementor-field,
	.webbo-field-layout-floating .elementor-field-group.elementor-field-type-select .elementor-select-wrapper > select,
	.webbo-field-layout-floating.webbo-select-style-yes .elementor-field-group.elementor-field-type-select .elementor-select-wrapper::after {
		transition-duration: 0ms !important;
	}
}

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

/*
 * Elementor can apply a full grey border directly to the native Select while
 * it is hovered, focused, active, or still focused after an option is chosen.
 * Hide only the top and side border colours so the Select matches text and
 * textarea fields. The existing bottom border and active colour remain under
 * Elementor and Field Layout control.
 */
.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 {
	border-top-color: transparent !important;
	border-right-color: transparent !important;
	border-left-color: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}