/*
 * Two things AvatarAuth (frontend-auth.js) marks on a page, styled once for every
 * Premium Design shell — loaded from partials/head, NOT from an area stylesheet, because
 * the public shell, the customer area and the partner area each load a different
 * override layer beneath this, and both of these must look the same in all three:
 *
 *   1. How a REFUSED FIELD looks. Two validators paint these pages. The trip widget
 *      marks its own wrapper (charter-search.js → `.search-field-error`); every other
 *      form is jQuery Validation through AvatarAuth, which marks the input
 *      (`.is-invalid`). They used to disagree on the colour (#d11a2a against
 *      Bootstrap's #dc3545), on the glow, and on whether a select2 was marked at all —
 *      so one form could refuse three fields in three ways.
 *   2. How a BUSY BUTTON looks, while AvatarAuth.setLoading() has it mid-request (@see
 *      that method's own doc comment for why it marks aria-disabled rather than the
 *      disabled attribute — Bootstrap's :disabled colours are undefined on a plain
 *      Premium Design .btn, so a truly disabled one read as having vanished).
 *
 * @see public/premiumDesign/development/js/frontend-auth.js
 */

:root {
  --avatar-invalid: #d11a2a;
  --avatar-invalid-glow: rgba(209, 26, 42, 0.20);
}

/* ---- The field itself ---------------------------------------------------- */

.form-control.is-invalid,
.form-select.is-invalid,
textarea.is-invalid,
input.is-invalid {
  border-color: var(--avatar-invalid) !important;
  box-shadow: 0 0 0 2px var(--avatar-invalid-glow);

  /* Bootstrap paints its own exclamation mark into the field's background. These
     fields already carry the design's own glyph (a seat, a calendar, a pin), so the
     two sat on top of each other — the border and the message say it. */
  background-image: none !important;
  padding-right: inherit;
}

/* A focused invalid field keeps the refusal: Bootstrap's focus ring would otherwise
   replace the red the moment the customer clicks into the field they must correct. */
.form-control.is-invalid:focus,
input.is-invalid:focus,
textarea.is-invalid:focus {
  border-color: var(--avatar-invalid) !important;
  box-shadow: 0 0 0 2px var(--avatar-invalid-glow);
}

/* ---- A checkbox's own label ----------------------------------------------- */

/* Bootstrap recolours a checkbox's SIBLING label red the moment the input carries
   `.is-invalid` (`.form-check-input.is-invalid ~ .form-check-label`) — this site marks a
   refused field by its border and its OWN message alone (below), never by recolouring
   surrounding copy the customer already read once; found live on the Contract &
   Agreement Confirmation checkbox, whose sentence is the terms themselves, not an error
   (todo.md §0dh-4). Only the LABEL is neutralised — the input's own red border stays,
   the same mark every other refused field gets. */
.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:invalid ~ .form-check-label {
  color: inherit;
}

/* ---- select2 ------------------------------------------------------------- */

/* jQuery Validation marks the native <select>, which select2 has hidden — so the
   customer saw nothing on a country, an airport or an amenity. The visible control is
   the sibling container; mark that instead. */
select.is-invalid + .select2-container .select2-selection,
select.is-invalid + .select2-container--default .select2-selection--single,
select.is-invalid + .select2-container--default .select2-selection--multiple {
  border-color: var(--avatar-invalid) !important;
  box-shadow: 0 0 0 2px var(--avatar-invalid-glow);
}

/* ---- A wrapper that owns the border -------------------------------------- */

/* Some fields are marked on a WRAPPER rather than on the control: the trip widget's
   `.form-field-border` is what charter-search.js flags, and AvatarAuth flags it too so
   both validators paint one look.

   What turns red is the element that actually HAS the border. `.submit-request-form-
   select-div` has none — the design draws it on the `.form-control` inside, and on the
   `.select2-selection` for an airport — so colouring the wrapper left the date and the
   passengers wearing nothing but the 2px glow while the airports beside them went
   properly red. These are the bordered elements, both skins, in one place: the dark
   home/listing widget and the white Request-a-Quote card. */
.search-field-error > .form-control,
.search-field-error .submit-request-form-select-div .form-control,
.search-field-error .submit-request-form-select-div .select2-selection,
.search-field-error .form-field-div-box-field .select-div .select2-selection,
.search-field-error .form-field-div-box-field .departing-date .form-control,
.search-field-error .form-field-div-box-field .passengers-div .form-control {
  border-color: var(--avatar-invalid) !important;
  box-shadow: 0 0 0 2px var(--avatar-invalid-glow);
}

/* ---- The message --------------------------------------------------------- */

.invalid-feedback,
.charter-search-error,
.custom_error {
  color: var(--avatar-invalid);
}

/* ---- A busy submit button -------------------------------------------------- */

/* Left enabled (never the `disabled` attribute) so it keeps its exact colours; these
   two rules just dim it slightly and say "not now" with the cursor. A second press is
   ignored in AvatarAuth.submit() and by any caller that checks `.is-loading` itself
   (@see development/js/quote-details.js). */
.btn.is-loading,
button.is-loading {
  opacity: 0.8;
  cursor: not-allowed;
}
.btn.is-loading .spinner-border,
button.is-loading .spinner-border {
  vertical-align: -0.125em;
}