/* Shared Fluent Forms presentation. Wrap any future form in .dg-form. */
.dg-form .fluentform { font-family: var(--font-sans); font-size: var(--text-sm); }
.dg-form .ff-el-group { margin-bottom: var(--space-lg); }
.dg-form .ff-t-container { gap: var(--space-md); }
.dg-form .ff-t-cell { padding: 0; min-width: 0; }
.dg-form .ff-el-input--label { margin-bottom: .7em; }
.dg-form .ff-el-input--label label { color: var(--color-text); font-weight: 400; }
.dg-form .ff-el-input--label.ff-el-is-required label::after { color: var(--color-accent-soft); }
.dg-form .ff-el-form-control {
  width: 100%;
  padding: .45em 0 .8em;
  border: 0;
  border-bottom: 1px solid var(--color-border-strong);
  border-radius: 0;
  color: var(--color-text);
  background: transparent;
  font: inherit;
  line-height: 1.6;
  box-shadow: none;
}
.dg-form .ff-el-form-control::placeholder { color: var(--color-body); opacity: .8; }
.dg-form textarea.ff-el-form-control { resize: vertical; min-height: 8em; }
.dg-form .ff-el-form-control:focus {
  color: var(--color-text);
  background: transparent;
  border-color: var(--color-accent-soft);
  outline: none;
  box-shadow: 0 1px 0 var(--color-accent-soft);
}
.dg-form .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3.35em;
  padding: .9em 1.2em;
  border: 1px solid var(--color-accent-soft);
  border-radius: var(--radius-control);
  color: var(--palette-1);
  /* Keep an opaque base and the same image in every state: Fluent's
     background-color transition otherwise flashes when the gradient is removed. */
  background: var(--color-accent-soft) linear-gradient(115deg, var(--color-accent-soft), var(--color-accent)) 100% 50% / 150% 100%;
  font: inherit;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
  transition: background-position .18s ease, border-color .18s ease;
}
.dg-form .ff-btn-submit::after {
  content: "";
  flex: 0 0 1.25em;
  height: 1.25em;
  background: currentColor;
  mask: url('../../icons/btn-arrow.svg') center / contain no-repeat;
}
.dg-form .fluentform .ff-btn-submit:not(.ff_btn_no_style):hover { background-position: 0 50%; color: var(--palette-1); opacity: 1; }
.dg-form .ff-btn-submit:focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: 4px; }
.dg-form .ff-btn-submit:disabled { opacity: .65; cursor: wait; }
.dg-form .ff_submit_btn_wrapper { margin-bottom: 0; }
.dg-form .ff-el-is-error .ff-el-form-control { border-bottom: 2px solid var(--color-accent-soft); }
.dg-form .ff-el-is-error .error,
.dg-form .ff-errors-in-stack { color: var(--color-accent-soft); font-size: var(--text-sm); }
.dg-form .ff-message-success {
  margin: 0;
  padding: var(--space-lg);
  border: 1px solid var(--color-accent-soft);
  border-radius: var(--radius-control);
  color: var(--color-text);
  background: transparent;
  box-shadow: none;
}
@media (max-width: 40rem) {
  .dg-form .ff-t-container { display: block; }
  .dg-form .ff-t-cell { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dg-form .fluentform .ff-btn-submit:not(.ff_btn_no_style) { transition: none; }
}