.divi-bouncer-gate {
  --db-accent: #3858e9;
  --db-contact-gap-horizontal: 3%;
  --db-contact-gap-vertical: 20px;
  --bouncer-confirmation-background: rgba(56, 88, 233, .08);
  --bouncer-confirmation-color: #1f3fbf;
  --bouncer-confirmation-border-color: rgba(56, 88, 233, .28);
  --bouncer-confirmation-border-width: 1px;
  --bouncer-confirmation-border-radius: 6px;
  --bouncer-confirmation-padding-y: 12px;
  --bouncer-confirmation-padding-x: 16px;
  --bouncer-confirmation-shadow: none;
  --bouncer-confirmation-font-size: 14px;
  --bouncer-confirmation-font-weight: 500;
  --bouncer-confirmation-text-align: left;
  --bouncer-confirmation-margin-top: 0;
  --bouncer-confirmation-margin-bottom: 0;
  --bouncer-confirmation-filter: none;
}

.bouncer-gate-block {
  --bouncer-field-gap: 20px;
  --bouncer-column-gap: 24px;
  --bouncer-label-color: inherit;
  --bouncer-label-font-size: 16px;
  --bouncer-label-spacing: 8px;
  --bouncer-input-background: transparent;
  --bouncer-input-color: inherit;
  --bouncer-input-border-color: #d7ded9;
  --bouncer-input-border-width: 1px;
  --bouncer-input-border-radius: 2px;
  --bouncer-input-padding-y: 16px;
  --bouncer-input-padding-x: 18px;
  --bouncer-input-shadow: none;
  --bouncer-input-focus-border-color: var(--bouncer-input-border-color);
  --bouncer-input-focus-shadow: 0 0 0 1px var(--bouncer-input-border-color);
  --bouncer-input-filled-background: var(--bouncer-input-background);
  --bouncer-input-filled-border-color: var(--bouncer-input-border-color);
  --bouncer-button-background: var(--wp--preset--color--contrast, #111111);
  --bouncer-button-color: var(--wp--preset--color--base, #ffffff);
  --bouncer-button-border-color: transparent;
  --bouncer-button-border-width: 0;
  --bouncer-button-border-radius: 4px;
  --bouncer-button-padding-y: 12px;
  --bouncer-button-padding-x: 24px;
  --bouncer-anti-spam-input-width: 64px;
  --bouncer-anti-spam-gap: 8px;
  --bouncer-captcha-question-color: inherit;
  --bouncer-captcha-question-font-size: 16px;
  --bouncer-error-color: #9c2226;
  --bouncer-error-background: #fdf5f5;
  --bouncer-error-border-color: rgba(203, 39, 45, 0.28);
  --bouncer-error-border-width: 1px;
  --bouncer-error-border-radius: 6px;
  --bouncer-error-padding-y: 10px;
  --bouncer-error-padding-x: 14px;
  --bouncer-error-margin-top: 12px;
  --bouncer-error-margin-bottom: 0;
  --bouncer-error-shadow: none;
  --bouncer-error-font-size: 14px;
  --bouncer-error-font-weight: 400;
  --bouncer-error-text-align: left;
  --bouncer-error-filter: none;
  --bouncer-confirmation-background: rgba(56, 88, 233, .08);
  --bouncer-confirmation-color: #1f3fbf;
  --bouncer-confirmation-border-color: rgba(56, 88, 233, .28);
  --bouncer-confirmation-border-width: 1px;
  --bouncer-confirmation-border-radius: 6px;
  --bouncer-confirmation-padding-y: 12px;
  --bouncer-confirmation-padding-x: 16px;
  --bouncer-confirmation-shadow: none;
  --bouncer-confirmation-font-size: 14px;
  --bouncer-confirmation-font-weight: 500;
  --bouncer-confirmation-text-align: left;
  --bouncer-confirmation-margin-top: 0;
  --bouncer-confirmation-margin-bottom: 0;
  --bouncer-confirmation-filter: none;
  border: 0;
  outline: 0;
}

.bouncer-gate-block,
.bouncer-gate-block * {
  box-sizing: border-box;
}

.bouncer-gate__description {
  margin: 0 0 20px;
}

.bouncer-gate__form {
  width: 100%;
}

.bouncer-gate__fields {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--bouncer-column-gap);
  row-gap: var(--bouncer-field-gap);
}

.bouncer-gate__field {
  flex: 0 0 100%;
}

.bouncer-gate__field--half {
  flex-basis: calc((100% - var(--bouncer-column-gap)) / 2);
  max-width: calc((100% - var(--bouncer-column-gap)) / 2);
}

.bouncer-gate__field--full {
  flex-basis: 100%;
  max-width: 100%;
}

.bouncer-gate-block--layout-stacked .bouncer-gate__field--half {
  flex-basis: 100%;
  max-width: 100%;
}

.bouncer-gate__label {
  display: block;
  margin: 0 0 var(--bouncer-label-spacing);
  color: var(--bouncer-label-color);
  font-size: var(--bouncer-label-font-size);
  font-weight: 600;
}

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

.bouncer-gate-block .bouncer-gate__input,
.bouncer-gate-block .bouncer-gate__select,
.bouncer-gate-block .bouncer-gate__textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: var(--bouncer-input-padding-y) var(--bouncer-input-padding-x);
  border: var(--bouncer-input-border-width) solid var(--bouncer-input-border-color);
  border-radius: var(--bouncer-input-border-radius);
  background: var(--bouncer-input-background);
  box-shadow: var(--bouncer-input-shadow);
  color: var(--bouncer-input-color);
  font: inherit;
  line-height: 1.4;
}

/* Custom select caret, matching the Divi module (frontend.css select rule) so the
   block select renders a single consistent caret instead of the native browser arrow. */
.bouncer-gate-block .bouncer-gate__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  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;
}

.bouncer-gate-block .bouncer-gate__input.is-filled,
.bouncer-gate-block .bouncer-gate__select.is-filled,
.bouncer-gate-block .bouncer-gate__textarea.is-filled {
  border-color: var(--bouncer-input-filled-border-color);
  background: var(--bouncer-input-filled-background);
}

.bouncer-gate-block .bouncer-gate__input:focus,
.bouncer-gate-block .bouncer-gate__select:focus,
.bouncer-gate-block .bouncer-gate__textarea:focus {
  border-color: var(--bouncer-input-focus-border-color);
  box-shadow: var(--bouncer-input-focus-shadow);
  outline: 0;
}

.bouncer-gate__choices {
  display: grid;
  gap: 10px;
}

.bouncer-gate__choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bouncer-gate__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  width: 100%;
  margin-top: var(--bouncer-field-gap);
}

.bouncer-gate-block--actions-left .bouncer-gate__actions {
  justify-content: flex-start;
}

.bouncer-gate-block--actions-center .bouncer-gate__actions {
  justify-content: center;
}

.bouncer-gate-block--actions-right .bouncer-gate__actions {
  justify-content: flex-end;
}

.bouncer-gate-block--actions-between .bouncer-gate__actions {
  justify-content: space-between;
}

.bouncer-gate__anti-spam {
  display: inline-flex;
  align-items: center;
  gap: var(--bouncer-anti-spam-gap);
}

.bouncer-gate__captcha-label {
  display: inline-flex;
  align-items: center;
  gap: var(--bouncer-anti-spam-gap);
}

.bouncer-gate-block .bouncer-gate__captcha-question {
  color: var(--bouncer-captcha-question-color);
  font-size: var(--bouncer-captcha-question-font-size);
}

.bouncer-gate-block .bouncer-gate__captcha {
  width: var(--bouncer-anti-spam-input-width);
  min-height: 52px;
  padding: var(--bouncer-input-padding-y) 10px;
  border: var(--bouncer-input-border-width) solid var(--bouncer-input-border-color);
  border-radius: var(--bouncer-input-border-radius);
  background: var(--bouncer-input-background);
  box-shadow: var(--bouncer-input-shadow);
  color: var(--bouncer-input-color);
  font: inherit;
  text-align: center;
}

.bouncer-gate-block .bouncer-gate__captcha.is-filled {
  border-color: var(--bouncer-input-filled-border-color);
  background: var(--bouncer-input-filled-background);
}

.bouncer-gate-block .bouncer-gate__captcha:focus {
  border-color: var(--bouncer-input-focus-border-color);
  box-shadow: var(--bouncer-input-focus-shadow);
  outline: 0;
}

.bouncer-gate__submit.wp-element-button {
  padding: var(--bouncer-button-padding-y) var(--bouncer-button-padding-x);
  border: var(--bouncer-button-border-width) solid var(--bouncer-button-border-color);
  border-radius: var(--bouncer-button-border-radius);
  background: var(--bouncer-button-background);
  color: var(--bouncer-button-color);
  cursor: pointer;
}

.bouncer-gate__confirmation,
.divi-bouncer-confirmation {
  display: block;
  width: 100%;
  margin: var(--bouncer-confirmation-margin-top) 0 var(--bouncer-confirmation-margin-bottom);
  padding: var(--bouncer-confirmation-padding-y) var(--bouncer-confirmation-padding-x);
  border: var(--bouncer-confirmation-border-width) solid var(--bouncer-confirmation-border-color);
  border-radius: var(--bouncer-confirmation-border-radius);
  background: var(--bouncer-confirmation-background);
  box-shadow: var(--bouncer-confirmation-shadow);
  color: var(--bouncer-confirmation-color);
  filter: var(--bouncer-confirmation-filter);
  font-size: var(--bouncer-confirmation-font-size);
  font-weight: var(--bouncer-confirmation-font-weight);
  line-height: 1.55;
  text-align: var(--bouncer-confirmation-text-align);
}

.divi-bouncer-confirmation[hidden] {
  display: none;
}

/* Keep WordPress comments visually connected to a completed gate. This is
   intentionally scoped to a successful state so normal post spacing is intact. */
body.single.divi-bouncer-has-successful-gate #comment-wrap,
body.single:has([data-builder-preview-state="success"]) #comment-wrap {
  padding-top: 24px;
}

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

.bouncer-gate-block.is-submitted .bouncer-gate__form,
.divi-bouncer-gate.is-submitted .et_pb_contact {
  display: none;
}

.bouncer-gate-block.is-submitted .divi-bouncer-form__message,
.divi-bouncer-gate.is-submitted .divi-bouncer-form__message {
  display: none;
}

.bouncer-gate__message {
  clear: both;
  margin: var(--bouncer-error-margin-top) 0 var(--bouncer-error-margin-bottom);
}

.bouncer-gate__message.is-error {
  color: #a62626;
}

.bouncer-gate-block .bouncer-gate__message.is-error {
  padding: var(--bouncer-error-padding-y) var(--bouncer-error-padding-x);
  border: var(--bouncer-error-border-width) solid var(--bouncer-error-border-color);
  border-radius: var(--bouncer-error-border-radius);
  background: var(--bouncer-error-background);
  box-shadow: var(--bouncer-error-shadow);
  color: var(--bouncer-error-color);
  filter: var(--bouncer-error-filter);
  font-size: var(--bouncer-error-font-size);
  font-weight: var(--bouncer-error-font-weight);
  text-align: var(--bouncer-error-text-align);
}

.bouncer-gate__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .bouncer-gate__field--half {
    flex-basis: 100%;
    max-width: 100%;
  }

  .bouncer-gate__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.divi-bouncer-gate,
.divi-bouncer-gate * {
  box-sizing: border-box;
}

.bouncer-locked-source-page.et_pb_pagebuilder_layout .entry-content,
.bouncer-locked-source-page.et_pb_pagebuilder_layout .et_pb_post .entry-content {
  padding-top: 0;
}

.bouncer-locked-source-page.et_pb_pagebuilder_layout.single-post:not(.et-tb-has-body) #main-content .et_pb_row {
  width: 100%;
}

.bouncer-locked-source-page.et_pb_pagebuilder_layout.single-post:not(.et-tb-has-body) #main-content .et_pb_row::after {
  display: block;
  clear: both;
  content: "";
}

.bouncer-locked-source-page.et_pb_pagebuilder_layout.single-post:not(.et-tb-has-body) #main-content .et_pb_column_4_4 {
  width: 100%;
  margin-right: 0;
}

.divi-bouncer-gate .et_pb_contact_description {
  margin: 0 0 22px;
  color: inherit;
  opacity: .72;
  font-size: 1rem;
  line-height: 1.6;
}

/*
 * Field appearance (inputs / select / textarea) is intentionally NOT styled here.
 * The gate renders Divi's native Contact Field markup and now loads Divi's native
 * contact_form / fields / buttons stylesheets (see Plugin::enqueue_native_field_styles),
 * so fields look exactly like a native Divi Contact Form — same as Contact Form Plus.
 *
 * One exception: Divi positions the native <select> caret (a ::after triangle) for a
 * label-less field, so the gate's "show labels" layout (label above the field) pushes it
 * to the top. Hide Divi's caret and center our own on the select so it reads correctly in
 * both label modes.
 */
.divi-bouncer-gate .et_pb_contact_field:has(select)::after {
  display: none;
}

.divi-bouncer-gate 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;
}

.divi-bouncer-gate--protected .et_pb_contact_form_label {
  display: block;
  margin: 0 0 8px;
  font-weight: 600;
}

.divi-bouncer-gate .et_pb_contact {
  position: relative;
  clear: both;
}

/*
 * The Divi Bouncer Gate field row uses Divi's native flex system (et_flex_module
 * form + et_flex_column_* fields, sized by Divi core via --module-gutter), exactly
 * like the native Contact Form. We only flip the form to a wrapping row — Divi core
 * (.et_flex_module) defaults --flex-direction to column — and let core handle all
 * column widths and gaps so the layout matches the builder with no custom sizing.
 */
.divi-bouncer-gate .et_pb_contact_form {
  --flex-direction: row;
  flex-wrap: wrap;
}

/*
 * Legacy fallback gate (Renderer::render_form) uses et_pb_contact_field_half markup
 * instead of Divi's native flex columns, so it needs explicit two-column sizing. This
 * is scoped to --legacy so it never touches the native-flex Divi module fields.
 */
.divi-bouncer-gate--legacy .et_pb_contact_form {
  column-gap: var(--horizontal-gap, var(--db-contact-gap-horizontal));
}

.divi-bouncer-gate--legacy .et_pb_contact_form > .et_pb_contact_field_half {
  flex: 0 0 calc((100% - var(--horizontal-gap, var(--db-contact-gap-horizontal))) / 2 - .5px);
  max-width: calc((100% - var(--horizontal-gap, var(--db-contact-gap-horizontal))) / 2 - .5px);
  min-width: 0;
}

.divi-bouncer-gate--legacy .et_pb_contact_form > .et_pb_contact_field_full {
  flex: 0 0 100%;
  max-width: 100%;
}

.divi-bouncer-gate .et_pb_contact_form > .divi-bouncer-form__message {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
}

.divi-bouncer-gate .et_pb_contact_form > .divi-bouncer-form__message:empty {
  display: none;
}

.divi-bouncer-gate .et_contact_bottom_container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  width: 100%;
  flex: 0 0 100%;
  margin-left: auto;
  margin-right: 0;
  margin-top: 0;
  padding-top: 4px;
  text-align: right;
}

.divi-bouncer-gate .et_pb_contact_right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 134px;
  /* Capped at 100% (not 134px) so the emitted button-sizing declarations
     (min-width: max-content) can reserve captcha space when a width is set. */
  max-width: 100%;
  flex: 0 0 134px;
  min-width: 105px;
  margin: 0;
  text-align: right;
}

.divi-bouncer-gate .et_pb_contact_right p {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}

.divi-bouncer-gate .et_pb_contact .et_pb_contact_right input.et_pb_contact_captcha {
  width: auto;
  max-width: 76px;
}

/*
 * The submit button carries Divi's native .et_pb_contact_submit.et_pb_button
 * classes, so the global .et_pb_button base (border, padding, radius, transparent
 * bg) applies. But Divi 5 only inlines the button COLOR rule
 * (.et_pb_bg_layout_light.et_pb_button{color:#2ea3f2}) when it recognizes a
 * button-bearing module — the gate is a custom module, so that rule is absent and
 * `border:2px solid` falls back to currentColor (black). Restore Divi's default
 * accent so the frontend matches the builder. Kept at 2-class specificity so the
 * Design tab's .et_pb_contact_form_container.et_pb_module .et_pb_button (3 classes)
 * overrides it whenever the user customizes the button color.
 */
.divi-bouncer-gate .et_pb_contact_submit {
  flex: 0 0 auto;
  color: #2ea3f2;
}

@media (max-width: 767px) {
  .divi-bouncer-gate .et_pb_contact_form > .et_pb_contact_field_half {
    width: 100%;
    max-width: 100%;
    flex-basis: 100%;
    flex-grow: 0;
  }

  .divi-bouncer-gate--protected .et_pb_contact_form > .et_pb_contact_field_half {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  .divi-bouncer-gate .et_contact_bottom_container {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.divi-bouncer-gate--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;
}

.divi-bouncer-gate--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
   (.et_pb_contact_field_options_title), so the main field label would duplicate it. */
.divi-bouncer-gate--show-labels .et_pb_contact_field[data-type="checkbox"] > .et_pb_contact_form_label,
.divi-bouncer-gate--show-labels .et_pb_contact_field[data-type="radio"] > .et_pb_contact_form_label {
  display: none !important;
}

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

.divi-bouncer-gate--show-labels .et_pb_contact_form > .et_pb_contact_field > .input,
.divi-bouncer-gate--show-labels .et_pb_contact_form > .et_pb_contact_field > input,
.divi-bouncer-gate--show-labels .et_pb_contact_form > .et_pb_contact_field > textarea,
.divi-bouncer-gate--show-labels .et_pb_contact_form > .et_pb_contact_field > select {
  margin-top: 0 !important;
}

.divi-bouncer-form .et_pb_contact_submit:disabled {
  opacity: .65;
  cursor: progress;
}

.divi-bouncer-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Compact banner treatment (matches Contact Plus): :where() keeps specificity at
   zero for the message element so the module's Error Message design settings win. */
.divi-bouncer-form :where(.divi-bouncer-form__message) {
  clear: both;
  margin: 12px 0 0;
  color: var(--db-accent);
  font-size: 14px;
  line-height: 1.5;
}

.divi-bouncer-form :where(.divi-bouncer-form__message.is-error) {
  padding: 10px 14px;
  border: 1px solid rgba(203, 39, 45, 0.28);
  border-radius: 6px;
  background: #fdf5f5;
  color: #9c2226;
}

.divi-bouncer-admin-preview {
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 1px solid #f0c33c;
	border-radius: 6px;
	background: #fcf9e8;
	color: #50575e;
	font-size: 14px;
	line-height: 1.5;
}

.divi-bouncer-admin-preview strong {
	color: #1d2327;
}

.divi-bouncer-admin-preview a {
	color: #9a6700;
	font-weight: 600;
	text-decoration: underline;
}