/*
 * Quinto Toolkit: Divi form labels above fields.
 *
 * Applies to text, email, textarea and select fields of the Divi contact form.
 * Checkbox, radio and captcha fields are left alone on purpose.
 *
 * Override per site by setting these variables on :root or on the form:
 *   --qt-label-color, --qt-label-size, --qt-label-weight, --qt-label-gap
 */

.et_pb_contact_form {
	--qt-label-color: inherit;
	--qt-label-size: 0.9em;
	--qt-label-weight: 600;
	--qt-label-gap: 0.35em;
}

.et_pb_contact_form .et_pb_contact_field[data-type="input"] > label.et_pb_contact_form_label,
.et_pb_contact_form .et_pb_contact_field[data-type="email"] > label.et_pb_contact_form_label,
.et_pb_contact_form .et_pb_contact_field[data-type="text"] > label.et_pb_contact_form_label,
.et_pb_contact_form .et_pb_contact_field[data-type="select"] > label.et_pb_contact_form_label {
	/* Undo any visually-hidden treatment. */
	display: block !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
	opacity: 1 !important;
	visibility: visible !important;

	margin: 0 0 var(--qt-label-gap);
	padding: 0;
	color: var(--qt-label-color);
	font-size: var(--qt-label-size);
	font-weight: var(--qt-label-weight);
	line-height: 1.3;
	text-align: left;
}

/*
 * A checkbox field with exactly one option (typically a consent line) already
 * has its own label next to the box, so the group title above it is redundant.
 * Divi renders two titles for checkbox groups: a direct-child label and the
 * .et_pb_contact_field_options_title span. Hide both.
 *
 * Kept as its own rule on purpose: browsers without :has() drop the whole rule,
 * and that must not take the rules above with it.
 */
.et_pb_contact_form .et_pb_contact_field[data-type="checkbox"]:has(> .et_pb_contact_field_options_wrapper > .et_pb_contact_field_options_list > .et_pb_contact_field_checkbox:only-child) > label.et_pb_contact_form_label,
.et_pb_contact_form .et_pb_contact_field[data-type="checkbox"]:has(> .et_pb_contact_field_options_wrapper > .et_pb_contact_field_options_list > .et_pb_contact_field_checkbox:only-child) > .et_pb_contact_field_options_wrapper > .et_pb_contact_field_options_title {
	display: none !important;
}

/* The label replaces the placeholder, so the placeholder text would be a duplicate. */
.et_pb_contact_form .et_pb_contact_field[data-type="input"] input::placeholder,
.et_pb_contact_form .et_pb_contact_field[data-type="email"] input::placeholder,
.et_pb_contact_form .et_pb_contact_field[data-type="text"] textarea::placeholder {
	color: transparent;
}