.form-notif--success {
  background-color: #bbffdd;
  border: 1px solid #084;
  padding: 1em;
}

.form-notif--failure {
  background-color: #fbb;
  border: 1px solid #800;
  padding: 1em;
}

.form-notif--pending {
  background-color: #bdf;
  padding: 1em;
}

.unity-form > fieldset {
  display: grid;
  column-gap: 1rem;
  row-gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 576px) {
  .unity-form > fieldset {
    grid-template-columns: 1fr 1fr;
  }

  /* :has() is not IE-compatible, but done to avoid applying dynamic class
     list to the <div> as well as its contained <input> */
  fieldset > legend,
  .unity-form__field:has(.unity-form__field--wide) {
    grid-column: span 2;
  }
}

input:invalid:not(:placeholder-shown):not([type="checkbox"]),
select:valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown) {
  background-color: #ffbbbb;
  border: 1px solid #800;
}

input:valid:not(:placeholder-shown):not([type="checkbox"]),
select:valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown) {
  background-color: #bbffdd;
  border: 1px solid #084;
}

input::placeholder {
  opacity: 0.6 !important;
}

p.stripe-error,
.bambora-error-message > p {
  background-color: #ffbbbb;
  border: 1px solid #800;
  padding: 1em;
}

.hide {
  display: none !important;
}