/* Tilda Zero horizontal forms: keep Name / Email / Phone / Submit in one row */
.tn-form_horiz .t-form__inputsbox {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: stretch !important;
  gap: 10px !important;
}

.tn-form_horiz .t-input-group,
.tn-form_horiz .t-form__submit,
.tn-form_horiz .tn-form__submit {
  display: block !important;
  float: none !important;
  position: relative !important;
  margin: 0 !important;
  height: auto !important;
}

.tn-form_horiz .t-input-group,
.tn-form_horiz.t-form_inputs-total_1 .t-input-group,
.tn-form_horiz.t-form_inputs-total_2 .t-input-group,
.tn-form_horiz.t-form_inputs-total_3 .t-input-group,
.tn-form_horiz.t-form_inputs-total_4 .t-input-group {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding-right: 0 !important;
  order: 1 !important;
}

.tn-form_horiz .t-form__submit,
.tn-form_horiz .tn-form__submit {
  flex: 0 0 160px !important;
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  order: 2 !important;
}

.tn-form_horiz .t-input-block {
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.tn-form_horiz .t-input,
.tn-form_horiz .t-input-phonemask__wrap {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 50px !important;
}

.tn-form_horiz .t-submit {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Error box sits after the button, not between fields */
.tn-form_horiz .t-form__errorbox-middle,
.tn-form_horiz .t-form__errorbox-bottom {
  order: 3 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  min-height: 0 !important;
}

.tn-form_horiz .t-form__errorbox-middle:has(.js-errorbox-all[style*="display: none"]),
.tn-form_horiz .t-form__errorbox-middle:has(.t-form__errorbox-wrapper[style*="display: none"]) {
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.t-input-phonemask__wrap {
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

.t-input-phonemask__select {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  padding: 0 8px !important;
}

.t-input-phonemask {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  border: 0 !important;
  background: transparent !important;
  height: 50px !important;
}

.t-input-phonemask__options-flag,
.t-input-phonemask__select-flag {
  background-image: url("/assets/images/flags7.png") !important;
}

/* 640px Tilda breakpoint and below: stack fields (artboard is already taller) */
@media screen and (max-width: 959px) {
  .tn-form_horiz .t-form__inputsbox {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .tn-form_horiz .t-input-group,
  .tn-form_horiz .t-form__submit,
  .tn-form_horiz .tn-form__submit {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .tn-form_horiz .t-submit {
    width: 100% !important;
  }

  .tn-elem[data-elem-type="form"],
  .tn-elem[data-elem-type="form"] .tn-atom {
    height: auto !important;
    overflow: visible !important;
  }
}

/* Popup t702: keep vertical, even if Tilda also set _inrow */
.t-form__inputsbox_vertical-form {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
}

.t-form__inputsbox_vertical-form .t-input-group,
.t-form__inputsbox_vertical-form .t-form__submit {
  display: block !important;
  float: none !important;
  width: 100% !important;
  flex: none !important;
}
