/*
 * Business Email Only for Elementor Forms — warning under the email field.
 * Colour: Elementor → Form → Style → Messages → "Kleur melding zakelijke e-mail",
 * or set --beoe-warning-color in your own CSS.
 */
.elementor-field-group .elementor-message.beoe-message {
	--beoe-color: var(--beoe-warning-color, #b45309);
	display: flex;
	align-items: flex-start;
	gap: 0.45em;
	box-sizing: border-box;
	width: 100%;
	margin: 6px 0 0;
	padding: 0.55em 0.75em;
	border-inline-start: 3px solid var(--beoe-color);
	border-radius: 3px;
	background: #fff8eb;
	background: color-mix(in srgb, var(--beoe-color) 9%, transparent);
	color: var(--beoe-color);
	font-size: 0.9em;
	line-height: 1.4;
}

/* Warning triangle instead of Elementor's error icon. */
.elementor-field-group .elementor-message.beoe-message::before {
	content: "";
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin: 0.05em 0 0;
	background-color: currentColor;
	font-family: inherit;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2 1 21h22L12 2Zm-1 7h2v6h-2V9Zm0 8h2v2h-2v-2Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2 1 21h22L12 2Zm-1 7h2v6h-2V9Zm0 8h2v2h-2v-2Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.elementor-field-group.beoe-has-warning .elementor-field {
	border-color: var(--beoe-warning-color, #b45309);
}

/* One message at a time: while the warning shows, hide other (red) messages for this field. */
.elementor-field-group.beoe-has-warning .elementor-message:not(.beoe-message),
.elementor-field-group.beoe-has-warning .elementor-form-help-inline:not(.beoe-message),
.elementor-field-group.beoe-has-warning .elementor-help-inline:not(.beoe-message) {
	display: none !important;
}