/* ==========================================================================
   My Travel — form validation and feedback
   Save as assets/css/forms.css, load after styles.css.
   ========================================================================== */

/* --- Field errors --------------------------------------------------------
   The red border is not the message. Colour alone fails anyone who cannot
   distinguish it, so every invalid field gets text as well.
   ------------------------------------------------------------------------ */

.form-control.is-invalid,
.field-row__input.is-invalid,
.item__input.is-invalid {
  border-color: #d93a49;
  background-color: #fffafa;
}

.form-control.is-invalid:focus,
.field-row__input.is-invalid:focus {
  border-color: #d93a49;
  box-shadow: 0 0 0 .2rem rgba(217, 58, 73, .15);
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 6px 0 0;
  font-size: .8125rem;
  line-height: 1.45;
  color: #a4252f;
}

.field-error::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border-radius: 50%;
  background: #a4252f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* The star rating is a fieldset, so its error sits under the whole group */
fieldset .field-error {
  justify-content: center;
  margin-bottom: var(--mt-s2, 1rem);
}

/* --- Form-level feedback -------------------------------------------------
   Hidden until it has something to say, so an empty box never reserves
   space above the form.
   ------------------------------------------------------------------------ */

.form-feedback {
  display: none;
  margin: 0 0 var(--mt-s3, 1.5rem);
  padding: var(--mt-s2, 1rem);
  border-radius: var(--mt-radius-sm, 8px);
  font-size: var(--mt-small, .875rem);
  line-height: 1.6;
}

.form-feedback.is-shown { display: block; }

.form-feedback.is-ok {
  background: #e7f6ef;
  color: #1a6b4c;
}

.form-feedback.is-bad {
  background: #fdeced;
  color: #a4252f;
}

/* --- Sending -------------------------------------------------------------
   A disabled button with changed text is enough. A spinner would be more
   moving parts for a request that usually takes under a second.
   ------------------------------------------------------------------------ */

form[data-form] [type="submit"][disabled] {
  opacity: .65;
  cursor: progress;
}