.ff-message-success,
.fluentform .ff-message-success,
.frm-fluent-form .ff-message-success {
  background: var(--color-primary-500) !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;
  box-shadow: 0 0 0 1px var(--color-primary-500) !important;
  outline: 0 !important;
}

/* 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;
}

.fluentform .ff-btn-submit {
  border-radius: var(--button-radius) !important;
  font-family: var(--font-family-heading) !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-heading);
  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; }

/* 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); }