.ff-message-success,
.fluentform .ff-message-success,
.frm-fluent-form .ff-message-success {
  background: var(--color-primary-700) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  text-align: center !important;
  border: none !important;
  box-shadow: none !important;
}

.ff-el-form-control:focus,
.ff-el-form-control:focus-visible,
.fluentform .ff-el-form-control:focus,
.fluentform .ff-el-form-control:focus-visible,
.frm-fluent-form .ff-el-form-control:focus,
.frm-fluent-form .ff-el-form-control:focus-visible {
  border-color: var(--color-primary-500) !important;
  outline: 3px solid var(--color-neutral-0) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px var(--color-heading) !important;
}

.fluentform .ff-el-is-error .ff-el-form-control,
.fluentform .ff-el-form-control[aria-invalid="true"] {
  border-color: var(--color-error) !important;
}

.fluentform .error.text-danger,
.fluentform .ff-el-is-error .text-danger,
.fluentform .ff-errors-in-stack {
  color: var(--color-error) !important;
  font-weight: var(--font-weight-semibold);
}

/* Fluent Forms sit on a card wherever they appear in page content. */
.form-card,
.page-band__body .fluentform,
.registration-section__inner .fluentform {
  margin-top: var(--space-l);
  padding: clamp(var(--space-l), 3.5vw, var(--space-xl));
  border: var(--border-width-thin) solid var(--color-line-soft);
  border-radius: var(--radius-l);
  background: var(--surface-panel);
  box-shadow: var(--shadow-soft);
}

.page-band__body .fluentform { grid-column: content; }

.fluentform .ff-el-form-control {
  border-radius: var(--radius-s) !important;
  background: var(--color-white) !important;
  font-family: var(--font-family-body) !important;
}

.fluentform .ff-el-input--label label {
  color: var(--color-ink) !important;
  font-family: var(--font-family-heading) !important;
  font-weight: var(--font-weight-semibold) !important;
}

/* The imported form hides labels in favour of placeholders. Keep its field
   definition intact while making those labels visible and persistent. */
.fluentform .ff-el-form-hide_label .ff-el-input--label {
  display: block !important;
  visibility: visible !important;
}

.fluentform .ff-el-form-control::placeholder {
  color: var(--color-ink-muted) !important;
  opacity: 1;
}

.fluentform .ff-btn-submit {
  border-radius: var(--button-radius) !important;
  font-family: var(--font-family-body) !important;
}

/*
 * Fluent Forms prints its own button colours from the form settings into an
 * inline <style> in the body, at `form.fluent_form_4 .wpf_has_custom_css
 * .ff-btn-submit` (0,3,1) and after our stylesheet. Matching that with one
 * extra class lets the design system own the button in both states, including
 * the transition it otherwise lacks.
 */
form.frm-fluent-form .ff-btn-submit.ff-btn.wpf_has_custom_css,
form.frm-fluent-form .ff-btn-submit.ff-btn {
  border: var(--button-border);
  border-radius: var(--button-radius);
  background-color: var(--button-bg);
  background-image: none;
  color: var(--button-text);
  font-family: var(--font-family-body);
  font-weight: var(--button-font-weight);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--color-gold) 90%, transparent);
  transition:
    background-color var(--transition-standard),
    border-color var(--transition-standard),
    color var(--transition-standard),
    box-shadow var(--transition-standard),
    transform var(--transition-standard);
}

form.frm-fluent-form .ff-btn-submit.ff-btn.wpf_has_custom_css:hover,
form.frm-fluent-form .ff-btn-submit.ff-btn.wpf_has_custom_css:focus-visible,
form.frm-fluent-form .ff-btn-submit.ff-btn:hover,
form.frm-fluent-form .ff-btn-submit.ff-btn:focus-visible {
  border-color: var(--color-gold-deep);
  background-color: var(--button-bg-hover);
  color: var(--button-text);
  box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--color-gold) 95%, transparent);
  transform: translateY(-1px);
}

/* Fluent's default skin animates a sliding overlay on hover. */
form.frm-fluent-form .ff-btn-submit.ff-btn::before,
form.frm-fluent-form .ff-btn-submit.ff-btn::after { display: none; }

form.frm-fluent-form .ff-btn-submit.ff-btn::after {
  content: "→";
  display: inline-block;
  position: static;
  width: auto;
  height: auto;
  margin-left: var(--space-s);
  opacity: 1;
  background: none;
  transform: none;
}

/* The consent block is fine print, not body copy. */
.fluentform .ff-legaltext .ff-el-form-check-label,
.fluentform .ff-legaltext .ff_t_c,
.fluentform .ff-legaltext p {
  color: var(--color-ink-muted);
  font-size: var(--text-s);
  line-height: var(--line-height-body-tight);
}

.fluentform .ff-legaltext a { color: var(--color-gold-deep) !important; }