/**
 * Fluent Forms token bridge.
 * Structure and validation behavior remain owned by Fluent Forms; NonHue owns
 * typography, color, surface, border, radius and interactive states.
 */
.fluentform,
.frm-fluent-form,
.fluentform_wrapper,
.ff-message-success,
.ff-errors-in-stack {
  color: var(--nh-color-text);
  font-family: var(--nh-font-body);
}

.fluentform *,
.frm-fluent-form * {
  font-family: inherit;
}

.fluentform h1,
.fluentform h2,
.fluentform h3,
.fluentform h4,
.fluentform h5,
.fluentform h6,
.frm-fluent-form h1,
.frm-fluent-form h2,
.frm-fluent-form h3,
.frm-fluent-form h4,
.frm-fluent-form h5,
.frm-fluent-form h6 {
  color: var(--nh-color-heading);
  font-family: var(--nh-font-heading);
}

.fluentform .ff-el-input--label label,
.fluentform .ff-el-form-check-label,
.fluentform .ff-el-form-check-label span,
.frm-fluent-form .ff-el-input--label label,
.frm-fluent-form .ff-el-form-check-label,
.frm-fluent-form .ff-el-form-check-label span {
  color: var(--nh-color-text);
  font-family: var(--nh-font-body);
}

.fluentform .ff-el-form-control,
.fluentform input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.fluentform select,
.fluentform textarea,
.frm-fluent-form .ff-el-form-control,
.frm-fluent-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.frm-fluent-form select,
.frm-fluent-form textarea {
  border: 1px solid color-mix(in srgb, var(--nh-color-text) 18%, transparent);
  border-radius: var(--nh-radius-sm);
  background: var(--nh-color-white);
  color: var(--nh-color-text);
  font-family: var(--nh-font-body);
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.fluentform .ff-el-form-control::placeholder,
.fluentform input::placeholder,
.fluentform textarea::placeholder,
.frm-fluent-form .ff-el-form-control::placeholder,
.frm-fluent-form input::placeholder,
.frm-fluent-form textarea::placeholder {
  color: color-mix(in srgb, var(--nh-color-disabled) 82%, transparent);
  opacity: 1;
}

.fluentform .ff-el-form-control:focus,
.fluentform input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
.fluentform select:focus,
.fluentform textarea:focus,
.frm-fluent-form .ff-el-form-control:focus,
.frm-fluent-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
.frm-fluent-form select:focus,
.frm-fluent-form textarea:focus {
  border-color: var(--nh-color-primary);
  outline: 0;
  background: var(--nh-color-white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nh-color-primary) 14%, transparent);
}

.fluentform input[type="checkbox"],
.fluentform input[type="radio"],
.frm-fluent-form input[type="checkbox"],
.frm-fluent-form input[type="radio"] {
  accent-color: var(--nh-color-primary);
}

.fluentform .ff-el-help-message,
.fluentform .ff-el-input--content > small,
.fluentform .text-muted,
.frm-fluent-form .ff-el-help-message,
.frm-fluent-form .ff-el-input--content > small,
.frm-fluent-form .text-muted {
  color: var(--nh-color-disabled);
}

.fluentform .ff-el-is-error .ff-el-form-control,
.fluentform .error.text-danger,
.frm-fluent-form .ff-el-is-error .ff-el-form-control,
.frm-fluent-form .error.text-danger {
  border-color: var(--nh-color-error);
  color: var(--nh-color-error);
}

.fluentform .ff-el-is-error .ff-el-form-control:focus,
.frm-fluent-form .ff-el-is-error .ff-el-form-control:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nh-color-error) 13%, transparent);
}

.fluentform .ff-btn,
.fluentform .ff-btn-submit,
.fluentform button[type="submit"],
.fluentform input[type="submit"],
.frm-fluent-form .ff-btn,
.frm-fluent-form .ff-btn-submit,
.frm-fluent-form button[type="submit"],
.frm-fluent-form input[type="submit"] {
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid var(--nh-color-primary);
  border-radius: var(--nh-radius-sm);
  background: var(--nh-color-primary);
  color: var(--nh-color-on-primary);
  font-family: var(--nh-font-body);
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
  text-shadow: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.fluentform .ff-btn:hover,
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover,
.fluentform input[type="submit"]:hover,
.frm-fluent-form .ff-btn:hover,
.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form button[type="submit"]:hover,
.frm-fluent-form input[type="submit"]:hover {
  border-color: var(--nh-color-secondary);
  background: var(--nh-color-secondary);
  color: var(--nh-color-on-primary);
}

.fluentform .ff-btn:focus-visible,
.fluentform button[type="submit"]:focus-visible,
.fluentform input[type="submit"]:focus-visible,
.frm-fluent-form .ff-btn:focus-visible,
.frm-fluent-form button[type="submit"]:focus-visible,
.frm-fluent-form input[type="submit"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--nh-color-primary) 28%, transparent);
  outline-offset: 3px;
}

.fluentform .ff_upload_btn,
.fluentform .ff-el-form-check label,
.frm-fluent-form .ff_upload_btn,
.frm-fluent-form .ff-el-form-check label {
  color: var(--nh-color-text);
}

.fluentform .ff-uploaded-list,
.fluentform .ff-el-group .choices__inner,
.fluentform .ff-el-group .iti__country-list,
.frm-fluent-form .ff-uploaded-list,
.frm-fluent-form .ff-el-group .choices__inner,
.frm-fluent-form .ff-el-group .iti__country-list {
  border-color: color-mix(in srgb, var(--nh-color-text) 16%, transparent);
  border-radius: var(--nh-radius-sm);
  background: var(--nh-color-white);
  color: var(--nh-color-text);
}

.fluentform .ff-step-titles li.ff_active,
.fluentform .ff-step-titles li.ff_completed,
.fluentform .ff-el-progress-bar,
.frm-fluent-form .ff-step-titles li.ff_active,
.frm-fluent-form .ff-step-titles li.ff_completed,
.frm-fluent-form .ff-el-progress-bar {
  border-color: var(--nh-color-primary);
  background-color: var(--nh-color-primary);
  color: var(--nh-color-on-primary);
}

.ff-message-success {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--nh-color-success) 30%, transparent);
  border-radius: var(--nh-radius-sm);
  background: color-mix(in srgb, var(--nh-color-success) 8%, var(--nh-color-white));
  color: var(--nh-color-success);
  box-shadow: none;
}

.ff-errors-in-stack,
.fluentform .ff-el-is-error .text-danger,
.frm-fluent-form .ff-el-is-error .text-danger {
  color: var(--nh-color-error);
}