/* ---------------------------------------------------------------------------
   Enquiry form field visibility fixes.

   popup-form.css paints the fields and the clinic chips with a var(--borderGray)
   (#f3f5f7) border on a white panel - about 1.06:1 contrast, so the boxes read
   as invisible - and marks the selected chip with #fafafa, which is not
   distinguishable from its unselected state.

   Selectors below deliberately mirror the popup-form.css ones so they match on
   specificity and win on load order (this file is linked last). Everything is
   scoped to .enquiryForm; no other component is affected. Delete this file and
   its <link> in index.html to revert.
--------------------------------------------------------------------------- */

/* --- text fields, textareas, selects ------------------------------------- */

.enquiryForm form .inputDiv input:not([type=radio]):not([type=checkbox]),
.enquiryForm form .inputDiv textarea,
.enquiryForm form .inputDiv select,
.enquiryForm form .inputDiv datalist {
  color: var(--black);
  border: 1px solid #c9d0d8;
  background: #f6f8fa;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.enquiryForm form .inputDiv input:not([type=radio]):not([type=checkbox]):hover,
.enquiryForm form .inputDiv textarea:hover,
.enquiryForm form .inputDiv select:hover {
  border-color: #aab3bf;
  background: #fff;
}

/* Brand-coloured focus ring - works for pointer and keyboard alike. */
.enquiryForm form .inputDiv input:not([type=radio]):not([type=checkbox]):focus,
.enquiryForm form .inputDiv textarea:focus,
.enquiryForm form .inputDiv select:focus {
  outline: 0;
  border-color: var(--color1);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(231, 27, 54, .16);
}

.enquiryForm form .inputDiv input:not([type=radio]):not([type=checkbox])::placeholder,
.enquiryForm form .inputDiv textarea::placeholder,
.enquiryForm form .inputDiv select::placeholder {
  color: #5f6672;
  opacity: 1;
}

/* --- clinic / checkbox chips --------------------------------------------- */

.enquiryForm form .inputDiv:has([type=checkbox]) label,
.enquiryForm form .inputDiv:has([type=radio]) label {
  border: 1px solid #c9d0d8;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.enquiryForm form .inputDiv:has([type=checkbox]) label:hover,
.enquiryForm form .inputDiv:has([type=radio]) label:hover {
  border-color: #aab3bf;
  background-color: #f6f8fa;
}

/* The selected chip was #fafafa on white - effectively no feedback at all. */
.enquiryForm form .inputDiv:has([type=checkbox]) label:has(input:checked),
.enquiryForm form .inputDiv:has([type=radio]) label:has(input:checked) {
  border-color: var(--color1);
  background: rgba(231, 27, 54, .07);
  box-shadow: 0 0 0 1px var(--color1);
}

/* Keyboard focus for the chips, which are otherwise unreachable visually. */
.enquiryForm form .inputDiv:has([type=checkbox]) label:has(input:focus-visible),
.enquiryForm form .inputDiv:has([type=radio]) label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(231, 27, 54, .25);
}

/* --- states -------------------------------------------------------------- */

/* Validation state set by the existing .input-error class. */
.enquiryForm form .inputDiv .input-error,
.enquiryForm form .inputDiv .input-error:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(236, 76, 76, .16);
}

/* The submit button is disabled while a submission is in flight - make that
   state legible instead of leaving the button looking clickable. */
.enquiryForm form #formsubmit:disabled,
.enquiryForm form #formsubmit[disabled] {
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
}