/*
 * Contact Form Plus front-end + builder CSS for the "Show Field Labels" toggle.
 * Native Divi Contact Forms are placeholder-only (the field label is visually hidden).
 * When the toggle is on, reveal the native label above each field; when off, keep the
 * native (accessible-but-hidden) behaviour.
 */

.dcfp-hide-labels .et_pb_contact_form_label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dcfp-show-labels .et_pb_contact_form_label {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Checkbox/radio fields already print their title above the options, so the main field
   label would duplicate it. */
.dcfp-show-labels .et_pb_contact_field[data-type="checkbox"] > .et_pb_contact_form_label,
.dcfp-show-labels .et_pb_contact_field[data-type="radio"] > .et_pb_contact_form_label {
  display: none !important;
}

.dcfp-show-labels .et_pb_contact_form > .et_pb_contact_field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Divi applies a native top margin to the field controls; with the label revealed
   above, that stacks on top of the flex gap and doubles the space. Drive spacing
   from the gap alone. */
.dcfp-show-labels .et_pb_contact_form > .et_pb_contact_field > .input,
.dcfp-show-labels .et_pb_contact_form > .et_pb_contact_field > input,
.dcfp-show-labels .et_pb_contact_form > .et_pb_contact_field > textarea,
.dcfp-show-labels .et_pb_contact_form > .et_pb_contact_field > select {
  margin-top: 0 !important;
}

/*
 * Divi positions the native <select> caret (a ::after triangle) assuming a label-less
 * field. Hide Divi's caret and center our own on the select so it reads correctly in
 * both label modes (either dcfp-show-labels or dcfp-hide-labels is always present).
 */
.dcfp-show-labels .et_pb_contact_field:has(select)::after,
.dcfp-hide-labels .et_pb_contact_field:has(select)::after {
  display: none;
}

.dcfp-show-labels select.et_pb_contact_select,
.dcfp-hide-labels select.et_pb_contact_select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath fill='%23555' d='M0 0h10L5 7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* Keep WordPress comments visually connected to a completed form. The default
   Divi post template stacks section and comment-area padding, which otherwise
   leaves a large blank band after the form is replaced by its success message. */
body.single.dcfp-has-successful-form #comment-wrap,
body.single:has([data-builder-preview-state="success"]) #comment-wrap {
	padding-top: 24px;
}

body.single.dcfp-has-successful-form #respond,
body.single:has([data-builder-preview-state="success"]) #respond {
	padding-top: 0;
}

/* Submit lock: the button dims while the native POST is in flight so repeat
   clicks are visibly a no-op (frontend.js also blocks further submit events). */
.et_pb_contact_form .dcfp-is-submitting {
  cursor: default;
  opacity: 0.6;
  pointer-events: none;
}

/*
 * Default result-message state styling. The module wrapper carries
 * data-dcfp-submission-state (server render and frontend.js validation), so errors
 * read red and success reads green out of the box instead of inheriting whatever a
 * theme paints on generic .et-pb-contact-message content. :where() keeps the message
 * element itself at zero specificity, so any Success/Error Message design settings
 * configured in the builder (order-class selectors, higher specificity) still win.
 */
.et_pb_contact_form_container[data-dcfp-submission-state="error"] .et-pb-contact-message :where(p, ul),
.et_pb_contact_form_container[data-builder-preview-state="error"] .et-pb-contact-message :where(p, ul) {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(203, 39, 45, 0.28);
  border-radius: 6px;
  background: #fdf5f5;
  color: #9c2226;
  font-size: 14px;
  line-height: 1.5;
  list-style: none;
}

.et_pb_contact_form_container[data-dcfp-submission-state="error"] .et-pb-contact-message :where(li + li),
.et_pb_contact_form_container[data-builder-preview-state="error"] .et-pb-contact-message :where(li + li) {
  margin-top: 4px;
}

.et_pb_contact_form_container[data-dcfp-submission-state="success"] .et-pb-contact-message :where(p),
.et_pb_contact_form_container[data-builder-preview-state="success"] .et-pb-contact-message :where(p) {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(46, 106, 58, 0.28);
  border-radius: 6px;
  background: #f3f9f4;
  color: #24592e;
  font-size: 14px;
  line-height: 1.5;
}