/* Xtra-Myle contact-form additions. These selectors work with the site's existing classes. */
.contact-form {
  position: relative;
}

.form-field label,
.form-consent,
.form-feedback,
.form-privacy {
  font-size: max(0.75rem, 12px);
}

.form-field label span {
  color: #788374;
  font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-size: 1rem;
}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: #9f3524;
  box-shadow: 0 0 0 3px rgb(159 53 36 / 13%);
}

.form-feedback {
  grid-column: 1 / -1;
  border-radius: 6px;
  padding: 12px 14px;
  line-height: 1.55;
}

.form-feedback[hidden] {
  display: none;
}

.form-feedback-success {
  color: #24572b;
  background: #e8f2e2;
  border: 1px solid #cfe1c7;
}

.form-feedback-error {
  color: #842c1b;
  background: #fff0ea;
  border: 1px solid #efd0c5;
}

.contact-form button {
  min-width: 184px;
}

.contact-form button:disabled {
  cursor: wait;
  opacity: 0.68;
  transform: none;
}

.contact-form button.is-loading svg {
  animation: contact-spin 0.85s linear infinite;
}

.honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

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

@media (max-width: 700px) {
  .contact-form {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .form-field-full,
  .form-feedback,
  .contact-form button,
  .form-privacy {
    grid-column: 1;
  }

  .contact-form button {
    width: 100%;
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-form button.is-loading svg {
    animation: none;
  }
}