.section-contact-form--bulk-popover {
  margin-bottom: 20px;
}
/* "Remove space below heading/description" — beats the global
   .section-title--wrapper margin-bottom (50px desktop / 37.5px mobile in
   theme.min.css) at both breakpoints via the extra class, no media query
   needed here. */
.section-title--wrapper.no-bottom-margin {
  margin-bottom: 0;
}
.section-contact-form .section-contact-form--form {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 20px;
}
.section-contact-form .input-wrapper {
  display: flex;
  flex-direction: column;
}
.section-contact-form .w-full,
.section-contact-form .w-partial {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .section-contact-form .w-partial {
    width: calc(50% - 10px);
  }
  .section-contact-form .form-success {
    display: inline-block;
  }
}
.section-contact-form .section-contact-form--submit-wrapper [data-spam-detection-disclaimer] {
  font-size: smaller;
}
.section-contact-form .section-contact-form--submit-wrapper [data-spam-detection-disclaimer] a {
  cursor: pointer;
}
.border-radius-round .section-contact-form textarea {
  padding: 10px 18px;
}
.section-contact-form .h-captcha {
  display: contents;
}
.section-contact-form .contact-form-dropdown-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 5px;
}
.section-contact-form .contact-form-dropdown-wrapper .form-input-hint {
  font-size: 12px;
}
.section-contact-form .form-input-wrapper .dropdown-container {
  position: relative;
  width: 100%;
  display: flex;
}
.section-contact-form .form-input-wrapper .dropdown-container .contact-form-select {
  width: 100%;
  min-height: 46px;
  text-align: left;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--input-border-radius);
  padding: 8px 10px;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.border-radius-round .section-contact-form .form-input-wrapper .dropdown-container .contact-form-select {
  padding-left: 18px;
}
.color-scheme--accent .section-contact-form .form-input-wrapper .dropdown-container .contact-form-select,
.color-scheme--dark .section-contact-form .form-input-wrapper .dropdown-container .contact-form-select,
.color-scheme--light .section-contact-form .form-input-wrapper .dropdown-container .contact-form-select {
  color: var(--color-scheme-text-color);
  border: 1px solid var(--color-scheme-border-color);
}
.section-contact-form .form-input-wrapper .dropdown-container .contact-form-select-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
}
.section-contact-form .form-input-wrapper .dropdown-container .contact-form-select-icon svg {
  margin: 0;
}
.section-contact-form.color-scheme--light input:not(.btn),
.section-contact-form.color-scheme--light textarea {
  color: var(--color-scheme-light-text);
}
.section-contact-form.color-scheme--light input:not(.btn)::placeholder,
.section-contact-form.color-scheme--light textarea::placeholder {
  color: var(--color-scheme-light-text);
}
.section-contact-form.color-scheme--light input:not(.btn) {
  border-bottom-color: var(--color-scheme-light-text-transparent25);
}
.section-contact-form.color-scheme--light textarea {
  border-color: var(--color-scheme-light-text-transparent25);
}
.section-contact-form.color-scheme--accent input:not(.btn),
.section-contact-form.color-scheme--accent textarea {
  color: var(--color-scheme-accent-text);
}
.section-contact-form.color-scheme--accent input:not(.btn)::placeholder,
.section-contact-form.color-scheme--accent textarea::placeholder {
  color: var(--color-scheme-accent-text);
}
.section-contact-form.color-scheme--accent input:not(.btn) {
  border-bottom-color: var(--color-scheme-feature-text-transparent25);
}
.section-contact-form.color-scheme--accent textarea {
  border-color: var(--color-scheme-feature-text-transparent25);
}
.section-contact-form.color-scheme--dark input:not(.btn),
.section-contact-form.color-scheme--dark textarea {
  color: var(--color-scheme-dark-text);
}
.section-contact-form.color-scheme--dark input:not(.btn)::placeholder,
.section-contact-form.color-scheme--dark textarea::placeholder {
  color: var(--color-scheme-dark-text);
}
.section-contact-form.color-scheme--dark input:not(.btn) {
  border-bottom-color: var(--color-scheme-dark-text-transparent25);
}
.section-contact-form.color-scheme--dark textarea {
  border-color: var(--color-scheme-dark-text-transparent25);
}
.contact-form-content {
  padding: 40px;
  border-radius: 12px;
  border: 1px solid var(--color-scheme-accent-color, #63A314);
}
.contact-form-content.no-border {
  border: none;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .contact-form-content {
    padding: 24px 16px;
  }
}
/* ---- Optional image: two-column layout, image left / form right, stacks on mobile ---- */
.contact-form-layout {
  display: flex;
  align-items: stretch;
  gap: 2.5rem;
}
.contact-form-layout .contact-form-image {
  flex: 1 1 50%;
  overflow: hidden;
}

.contact-form-layout .contact-form-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
.contact-form-layout .contact-form-content {
  flex: 1 1 50%;
  min-width: 0;
}
@media screen and (max-width: 767px) {
  .contact-form-layout {
    flex-direction: column;
    gap: 1.5rem;
  }
}
/* Custom text/form column width — desktop only (the mobile media query
   above switches .contact-form-layout to a stacked column, where this must
   not apply). flex-grow:0 so the column holds its width instead of
   stretching to fill leftover row space; the image column already grows
   (flex: 1 1 50%) to take up whatever the form column doesn't use.
   max-width:100% keeps it from overflowing a narrower desktop viewport. */
@media screen and (min-width: 768px) {
  .contact-form-layout .contact-form-content--custom-width {
    flex: 0 1 var(--contact-form-column-width);
    max-width: 100%;
  }
}
.contact-label {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.67;
  margin-bottom: 8px;
  padding: 0 24px;
  color: #000;
}
/* !important used to override theme.min.css chained :not selectors */
.section-contact-form input:focus, 
.section-contact-form input:active {
  border-width: 2px !important;
}
.section-contact-form {
  --border-color: var(--color-scheme-accent-color, #63A314);
}
.section-contact-form input:user-invalid, 
.section-contact-form select:user-invalid, 
.section-contact-form textarea:user-invalid {
  --border-color: var(--error-color);
  border-width: 2px !important;
}

.contact-form-content ol {
  margin: 1rem 0 0;
  padding-left: 0;
  list-style: none;
  counter-reset: contact-form-steps;
}

/* Custom counter + flex instead of native list-style: gives independent
   control over the number-to-text gap, and wrapped lines hang-indent to
   align with the text (not the number) — native ol/li can't do the first
   part without also fighting the second. */
.contact-form-content ol li {
  counter-increment: contact-form-steps;
  display: flex;
  gap: 0.5em;
  margin: 0 0 1.25rem;
  font-size: 18px;
  font-weight: 600;
}
.contact-form-content ol li:last-of-type {
  margin-bottom: 0;
}

.contact-form-content ol li::before {
  content: counter(contact-form-steps) ".";
  flex: 0 0 auto;
}
.contact-form-content .section-title--wrapper h3.section-title {
  font-size: var(--h3-size);
}
@media screen and (max-width: 767px) {
  .contact-form-content .section-title--wrapper h3.section-title {
    font-size: var(--h3-size-mobile);
  }
}