/* =====================================================================
   forms.css — AJAX form-state styling only.
   The original style.css is left completely untouched; this file adds
   just the classes needed for inline validation / success / error UI
   on the Contact, Careers, Payment and Newsletter forms.
   ===================================================================== */

.form-status {
  margin: 14px 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.form-status--ok {
  background: #eaf7ee;
  color: #1e7a3c;
  border: 1px solid #bfe6c9;
}
.form-status--error {
  background: #fdeceb;
  color: #b3261e;
  border: 1px solid #f3c6c2;
}

.field-error {
  display: block;
  color: #b3261e;
  font-size: 12.5px;
  margin-top: 4px;
  min-height: 15px;
}
/* Take no room until there is a message: reserving it under every field
   stretched the forms well past the design's spacing. */
.field-error:empty {
  display: none;
}

.is-invalid {
  border-color: #d64545 !important;
  box-shadow: 0 0 0 2px rgba(214, 69, 69, .12) !important;
}

button.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, .5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: se-spin .7s linear infinite;
}
@keyframes se-spin {
  to { transform: rotate(360deg); }
}

/* copy-to-clipboard chip on the payment page */
.copy-btn {
  cursor: pointer;
  background: none;
  border: 1px dashed var(--gold, #b68a3a);
  color: var(--gold, #b68a3a);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 12px;
  margin-left: 8px;
}
.copy-btn:hover { background: var(--gold, #b68a3a); color: #fff; }

/* Contact page captcha row */
.ct-captcha-row { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.ct-captcha-row img { border-radius: 8px; border: 1px solid #e4e6ec; }
.ct-captcha-refresh {
  width: 40px; height: 40px; border-radius: 8px; border: 1px solid #e4e6ec; background: #fff;
  display: flex; align-items: center; justify-content: center; flex: none; cursor: pointer;
}
.ct-captcha-refresh svg { width: 16px; height: 16px; }
.ct-captcha-row input[type="text"] { flex: 1; }

/* ---------- "Send the same details on WhatsApp" post-submit prompt ---------- */
.wa-followup {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid #cfe9d6;
  border-left: 3px solid #25D366;
  border-radius: 8px;
  background: #f3fbf6;
}
.wa-followup__text { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: #1f4d33; }
.wa-followup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wa-followup__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 8px;
  background: #25D366; color: #fff; font-size: 14px; font-weight: 600;
  text-decoration: none; border: 1px solid #1eb455;
}
.wa-followup__btn:hover { background: #1eb455; color: #fff; }
.wa-followup__btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.wa-followup__dismiss {
  padding: 9px 12px; border-radius: 8px; border: 1px solid transparent;
  background: none; color: #4a6b58; font-size: 13px; cursor: pointer;
}
.wa-followup__dismiss:hover { border-color: #cfe9d6; background: #fff; }