.tp-managed-form {
  display: grid;
  gap: 20px;
}

.tp-managed-form__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 16px;
}

.tp-managed-form__field {
  flex: 0 0 calc(var(--tp-field-desktop-width, 50%) - 8px);
  min-width: 0;
}

.tp-managed-form__field > label,
.tp-managed-form__field legend {
  display: block;
  margin: 0 0 8px;
  color: var(--tp-ink);
  font: 600 14px/1.4 "Poppins", sans-serif;
}

.tp-managed-form__field em {
  color: #c84630;
  font-style: normal;
}

.tp-managed-form input,
.tp-managed-form select,
.tp-managed-form textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 50px;
  border: 1px solid var(--tp-line);
  border-radius: 10px;
  background: #fff;
  color: var(--tp-ink);
  font: 400 15px/1.5 "Lato", sans-serif;
  padding: 12px 14px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Native date field keeps the OS picker (iOS day/month/year roller) but must
   not overflow the form: iOS gives type=date an intrinsic width otherwise. */
.tp-managed-form input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
}

.tp-managed-form input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

.tp-managed-form input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: auto;
}

.tp-managed-form textarea {
  min-height: 132px;
  resize: vertical;
}

.tp-managed-form input:focus-visible,
.tp-managed-form select:focus-visible,
.tp-managed-form textarea:focus-visible,
.tp-managed-form__submit:focus-visible {
  outline: 3px solid rgb(64 161 183 / 24%);
  outline-offset: 2px;
  border-color: var(--tp-primary);
}

.tp-managed-form__select {
  display: block;
  position: relative;
}

.tp-managed-form__select select {
  appearance: none;
  padding-right: 42px;
}

.tp-managed-form__select i {
  position: absolute;
  top: 50%;
  right: 15px;
  color: var(--tp-primary-dark);
  pointer-events: none;
  transform: translateY(-50%);
}

.tp-managed-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tp-managed-form__choices label {
  cursor: pointer;
}

.tp-managed-form__choices input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tp-managed-form__choices span {
  display: block;
  border: 1px solid var(--tp-line);
  border-radius: 999px;
  padding: 9px 15px;
}

.tp-managed-form__choices input:checked + span {
  border-color: var(--tp-primary);
  background: #eaf7fa;
  color: var(--tp-primary-dark);
}

.tp-managed-form__status {
  min-height: 22px;
  color: var(--tp-primary-dark);
  font-weight: 700;
}

.tp-managed-form__status.is-error {
  color: #a83224;
}

.tp-managed-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: var(--tp-accent);
  color: var(--tp-midnight);
  cursor: pointer;
  font: 700 15px/1 "Poppins", sans-serif;
  transition: background-color 180ms ease, transform 180ms ease;
}

.tp-managed-form__submit:hover {
  background: #e87914;
}

.tp-managed-form__submit:disabled {
  cursor: wait;
  opacity: .7;
}

@media (max-width: 767px) {
  .tp-managed-form__field {
    flex-basis: var(--tp-field-mobile-width, 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-managed-form input,
  .tp-managed-form select,
  .tp-managed-form textarea,
  .tp-managed-form__submit {
    transition: none;
  }
}