.wonder-contact-form {
  --wonder-line: #5b5b5b;
  --wonder-text: #3b3b3b;
  --wonder-accent: #ff650b;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 25px;
  row-gap: 16px;
  color: var(--wonder-text);
  font-family: var(--font-family, "Inter Tight", sans-serif);
}

.wonder-contact-form__field {
  min-width: 0;
}

/* CF7 wraps each form tag in a paragraph by default. */
.wonder-contact-form__field > p {
  margin: 0;
  padding: 0;
}

.wonder-contact-form__field--wide,
.wonder-contact-form__submit {
  grid-column: 1 / -1;
}

.wonder-contact-form label {
  display: block;
  margin: 0 0 16px;
  color: #3b3b3b;
  font-family: var(--font-family, "Inter Tight", sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 114%;
}

.wonder-contact-form input,
.wonder-contact-form select,
.wonder-contact-form textarea {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 0 12px !important;
  color: var(--wonder-text);
  font-family: var(--font-family, "Inter Tight", sans-serif) !important;
  font-size: 14px;
  line-height: 1.25;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wonder-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  height: 36px !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
}

.wonder-contact-form input:focus,
.wonder-contact-form select:focus,
.wonder-contact-form textarea:focus {
  border-bottom-color: var(--wonder-text);
}

.wonder-contact-form textarea {
  padding-bottom: 10px !important;
  resize: vertical;
}

.wonder-contact-form select {
  padding-right: 32px !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.0532L4 9.06069L5.06069 8L12 14.9468L18.9393 8L20 9.06069L12 17.0532Z' fill='%23292929'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
  background-size: 24px 24px !important;
}

.wonder-contact-form .wpcf7-not-valid-tip {
  margin-top: 5px;
  font-size: 11px;
}

.wonder-contact-form__submit {
  margin-top: 13px;
}

.wpcf7 .wonder-contact-form .wonder-contact-form__submit > p {
  margin: 0;
}

.wpcf7 .wonder-contact-form .wonder-contact-form__submit input.wpcf7-submit,
.wpcf7 .wonder-contact-form .wonder-contact-form__submit input[type='submit'],
.wpcf7 .wonder-contact-form .wonder-contact-form__submit button[type='submit'] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 249px !important;
  min-width: 249px !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 24px 75px !important;
  box-sizing: border-box !important;
  color: var(--ffffff, #fff) !important;
  font-family: var(--font-family, "Inter Tight", sans-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  line-height: 100% !important;
  text-align: center !important;
  text-transform: uppercase !important;
  background: var(--f67011, #f67011) !important;
  border: 0 !important;
  border-radius: 200px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color .2s ease, transform .2s ease;
}

.wpcf7 .wonder-contact-form .wonder-contact-form__submit input.wpcf7-submit:hover,
.wpcf7 .wonder-contact-form .wonder-contact-form__submit button[type='submit']:hover {
  background: #e85d05 !important;
  transform: translateY(-1px);
}

.wonder-contact-form .wpcf7-spinner {
  margin-left: 10px;
}

.wonder-contact-form .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 10px 14px;
  font-size: 13px;
}

@media (max-width: 767px) {
  .wonder-contact-form {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wonder-contact-form__field--wide,
  .wonder-contact-form__submit {
    grid-column: auto;
  }
}