/* --------------------------------------------------------------------------
   Feedback while an enquiry is being submitted.

   send-enquiry.php stores the submission in Google Sheets and sends the
   notification email before it replies, which takes several seconds — and the
   order form may also be uploading STL/X-ray files. Without this the visitor
   sees nothing happen and submits again.
   -------------------------------------------------------------------------- */

@keyframes odl-spin {
  to { transform: rotate(360deg); }
}

.btn-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: odl-spin 0.7s linear infinite;
  margin-right: 9px;
  vertical-align: -2px;
  flex-shrink: 0;
}

.btn-spinner--dark {
  border-color: rgba(170, 44, 37, 0.25);
  border-top-color: #aa2c25;
  margin-right: 0;
}

/* The submit button while the request is in flight. */
.thm-btn.is-submitting {
  cursor: not-allowed;
  opacity: 0.8;
  pointer-events: none;
}

/* Status panel shown in the form's .result container. */
.form-loading-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 20px;
  padding: 15px 20px;
  border: 1px solid #dbe6ff;
  border-radius: 12px;
  background: #f4f7ff;
  color: #031B4E;
  font-size: 15px;
  line-height: 1.5;
}

.form-loading-status__text {
  flex: 1 1 auto;
}

/* Upload progress, only rendered for forms that carry files. */
.form-progress {
  flex: 1 1 100%;
  height: 6px;
  border-radius: 4px;
  background: #e3ebff;
  overflow: hidden;
}

.form-progress > i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: #aa2c25;
  transition: width 0.2s ease-out;
}

/* The template ships no styling for these — the result div was previously
   only ever filled on success. */
.result .alert {
  margin-top: 20px;
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
}

.result .alert-success {
  background: #eefaf1;
  border: 1px solid #bfe6cb;
  color: #17693a;
}

.result .alert-danger {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  color: #c53030;
}

.result .alert-warning {
  background: #fffaf0;
  border: 1px solid #fbe3b8;
  color: #975a16;
}

/* --------------------------------------------------------------------------
   Client-side validation messages.

   jquery.validate injects these on submit and the template shipped no styling
   for them at all, so they rendered as unstyled black text jammed against the
   field and were easy to miss entirely.
   -------------------------------------------------------------------------- */

.contact-form-validated span.field-error {
  display: block;
  margin: 6px 2px 0;
  color: #c53030;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.contact-form-validated span.field-error::before {
  content: "!";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border-radius: 50%;
  background: #c53030;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  vertical-align: 1px;
}

/* The case-form rows are a two-column grid: label | field. An error message
   left to itself becomes a third grid item and lands in column 1 *under the
   label*, squeezed into the narrow label column and wrapping onto two lines.
   Put it under the field instead, spanning the full remaining width. */
.contact-two__field-row span.field-error,
.contact-two__time-row span.field-error {
  grid-column: 2 / -1;
  align-self: start;
  margin: 5px 0 0;
}

/* The offending field itself. */
.contact-form-validated input.field-error,
.contact-form-validated select.field-error,
.contact-form-validated textarea.field-error {
  border-color: #e53e3e !important;
  background-color: #fffafa;
}

.contact-form-validated input.field-error:focus,
.contact-form-validated select.field-error:focus,
.contact-form-validated textarea.field-error:focus {
  border-color: #c53030 !important;
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.12);
}

/* --------------------------------------------------------------------------
   Checkbox groups on the case form.

   These were laid out with inline styles that fought the form's own rules —
   `.contact-two__field-row input` forces width:100% and min-height:46px, so
   each box needed inline width/height overrides, and a `margin-top:10px` plus
   a `padding-top:35px` on the Stickers label to fake the alignment. A tidy
   grid does it properly and keeps both columns level.
   -------------------------------------------------------------------------- */

.contact-two__checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 9px 14px;
  align-items: center;
  margin: 0;
}

.contact-two__field-row .contact-two__checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--careon-gray);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
  cursor: pointer;
}

/* Beats `.contact-two__field-row input` without needing !important.
   That base rule also applies a border, radius and fill to every input, which
   on a checkbox paints over the native tick — so those are reset here too and
   the box is left to render natively with the brand colour as its accent. */
.contact-two__field-row .contact-two__checkbox-item input[type="checkbox"],
.contact-two__field-row .contact-two__checkbox-item input[type="checkbox"]:focus {
  flex: 0 0 auto;
  -webkit-appearance: checkbox;
  appearance: checkbox;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  accent-color: #aa2c25;
  cursor: pointer;
}

/* The specific-colour panel that appears under the Colour dropdown. */
.contact-two__subfield {
  grid-column: 2 / -1;
  margin-top: 10px;
}

.contact-two__subfield > label {
  display: block;
  margin-bottom: 7px;
  color: var(--careon-gray);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
}

@media (max-width: 767px) {
  .contact-two__field-row span.field-error,
  .contact-two__time-row span.field-error,
  .contact-two__subfield {
    grid-column: 1 / -1;
  }
}