/* FluentForm custom styles — alle Werte über AT CSS-Framework Variablen.
   Die Inline-Styles von FluentForm (background_color in form_fields JSON)
   werden per DB-Wert auf #D4892A gesetzt und per !important hier überschrieben. */

/* ── Inputs & Textareas ─────────────────────────────────────────── */
.fluentform .ff-el-form-control {
  border: 1px solid var(--at-light-d-1);
  border-radius: var(--at-radius--m);
  padding: var(--at-space--xs) var(--at-space--m);
  font-size: var(--at-text--s);
  color: var(--at-black);
  background: var(--at-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.fluentform .ff-el-form-control:focus {
  outline: none;
  border-color: var(--at-primary);
  box-shadow: 0 0 0 3px var(--at-primary-l-3);
}
.fluentform .ff-el-form-control::placeholder {
  color: var(--at-black-l-3);
}

/* ── Labels ─────────────────────────────────────────────────────── */
.fluentform .ff-el-input--label label {
  font-size: var(--at-text--s);
  font-weight: 600;
  color: var(--at-black-l-1);
  margin-bottom: var(--at-space--3xs);
  display: block;
}

/* ── Submit + Next + Prev Buttons ───────────────────────────────── */
.fluentform .frm-fluent-form .ff-btn-submit,
.fluentform .frm-fluent-form .ff_btn_style,
.fluentform .frm-fluent-form .ff-btn-sm,
.fluentform .frm-fluent-form .ff-btn-next,
.fluentform .frm-fluent-form .ff-btn-prev {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--at-space--xs) var(--at-space--l) !important;
  background: var(--at-primary) !important;
  color: var(--at-white) !important;
  border: none !important;
  border-radius: var(--at-radius-full) !important;
  font-size: var(--at-text--s) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px var(--at-black-t-2) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-radius 0s !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  width: auto !important;
}
.fluentform .frm-fluent-form .ff-btn-submit:hover,
.fluentform .frm-fluent-form .ff-btn-submit:focus,
.fluentform .frm-fluent-form .ff_btn_style:hover,
.fluentform .frm-fluent-form .ff_btn_style:focus,
.fluentform .frm-fluent-form .ff-btn-next:hover,
.fluentform .frm-fluent-form .ff-btn-next:focus,
.fluentform .frm-fluent-form .ff-btn-prev:hover,
.fluentform .frm-fluent-form .ff-btn-prev:focus,
.fluentform .frm-fluent-form .ff-btn-sm:hover,
.fluentform .frm-fluent-form .ff-btn-sm:focus {
  background: var(--at-primary-d-1) !important;
  color: var(--at-white) !important;
  box-shadow: 0 4px 16px var(--at-black-t-2) !important;
  transform: translateY(-2px) !important;
}
.fluentform .frm-fluent-form .ff-btn-submit:active,
.fluentform .frm-fluent-form .ff_btn_style:active,
.fluentform .frm-fluent-form .ff-btn-next:active,
.fluentform .frm-fluent-form .ff-btn-prev:active,
.fluentform .frm-fluent-form .ff-btn-sm:active {
  background: var(--at-primary-d-2) !important;
  border-radius: var(--at-radius-full) !important;
  transform: translateY(0) !important;
}

/* Previous button: secondary style */
.fluentform .frm-fluent-form .ff-btn-secondary,
.fluentform .frm-fluent-form .ff-btn-prev {
  background: var(--at-light) !important;
  color: var(--at-black) !important;
  box-shadow: none !important;
}
.fluentform .frm-fluent-form .ff-btn-secondary:hover,
.fluentform .frm-fluent-form .ff-btn-prev:hover {
  background: var(--at-light-d-1) !important;
  color: var(--at-black) !important;
  box-shadow: none !important;
}

/* Mobile: volle Breite */
@media (max-width: 768px) {
  .fluentform .frm-fluent-form .ff-btn-submit,
  .fluentform .frm-fluent-form .ff_btn_style {
    width: 100% !important;
  }
}

/* ── Fehlertext ─────────────────────────────────────────────────── */
.fluentform .ff-el-is-error .text-danger {
  font-size: var(--at-text--xs);
  color: var(--at-danger);
  margin-top: var(--at-space--3xs);
}

/* ── Erfolgsmeldung ─────────────────────────────────────────────── */
.fluentform .ff-message-success {
  background: var(--at-success);
  color: var(--at-white);
  border-radius: var(--at-radius--m);
  padding: var(--at-space--m);
  font-size: var(--at-text--s);
  font-weight: 600;
}

/* ── Checkboxen & Radios ────────────────────────────────────────── */
.fluentform .ff-el-form-check-label {
  font-size: var(--at-text--s);
  color: var(--at-black-l-1);
  display: flex;
  align-items: center;
  gap: var(--at-space--xs);
  cursor: pointer;
}
.fluentform .ff-el-form-check-input {
  accent-color: var(--at-primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}