/* ============================================================================
   4founder redesign — Fluent Forms restyle (hand-written, NOT extractor-owned)
   Styles the live Fluent Forms markup (form ID 3 on /kontakt/) to the design's
   form-field look (Kontakt-v14 .ff-field / primary CTA). Loaded route-scoped
   by Classes/Redesign/Assets.php (shared map: kontakt => ['forms']); every
   rule is scoped under body.ff-redesign so Oxygen-rendered pages can never be
   affected. Class names target the real FF markup captured from staging
   (tmp/verify/capture/staging/kontakt.html) — .ff-el-group, .ff-el-input--label,
   .ff-el-form-control, .ff-t-container/.ff-t-cell columns, .ff_tc_label GDPR
   row, .ff-btn-submit, .ff-message-success, .text-danger errors.
   ============================================================================ */

/* ── Form shell ──────────────────────────────────────────────────────────── */
body.ff-redesign .fluentform {
  font-family: inherit;
}

/* Field group rhythm (design form uses an 18px stack). */
body.ff-redesign .fluentform .ff-el-group {
  margin-bottom: 18px;
}

/* Two-column rows (Name/Thema, Telefon/E-Mail): keep a real gutter and let
   the cells shrink cleanly. */
body.ff-redesign .fluentform .ff-t-container {
  display: flex;
  flex-wrap: wrap;
  column-gap: 18px;
}
body.ff-redesign .fluentform .ff-t-container .ff-t-cell {
  min-width: 0;
  flex-grow: 1;
}
/* Stack the 50%-basis cells on narrow screens (inline flex-basis needs the
   !important); FF core's own breakpoint differs per version — this one is
   deterministic. */
@media (max-width: 640px) {
  body.ff-redesign .fluentform .ff-t-container .ff-t-cell {
    flex-basis: 100% !important;
  }
}

/* ── Labels ──────────────────────────────────────────────────────────────── */
body.ff-redesign .fluentform .ff-el-input--label {
  margin-bottom: 7px;
}
body.ff-redesign .fluentform .ff-el-input--label label {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ff-heading);
}
/* Required asterisk in brand instead of FF's default red. */
body.ff-redesign .fluentform .ff-el-is-required.asterisk-right label:after {
  color: var(--ff-brand);
}

/* ── Inputs / select / textarea ──────────────────────────────────────────── */
body.ff-redesign .fluentform .ff-el-form-control {
  width: 100%;
  padding: 13px 16px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ff-heading);
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: 12px;
  box-shadow: none;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
body.ff-redesign .fluentform .ff-el-form-control::placeholder {
  color: #a2aabb;
  opacity: 1;
}
body.ff-redesign .fluentform .ff-el-form-control:focus {
  border-color: var(--ff-brand);
  box-shadow: 0 0 0 4px rgba(var(--ff-brand-rgb), 0.12);
}
body.ff-redesign .fluentform select.ff-el-form-control {
  height: auto;
  cursor: pointer;
}
body.ff-redesign .fluentform textarea.ff-el-form-control {
  min-height: 150px;
  resize: vertical;
}

/* ── GDPR checkbox row ───────────────────────────────────────────────────── */
body.ff-redesign .fluentform .ff-el-form-check label.ff_tc_label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
body.ff-redesign .fluentform .ff-el-form-check label.ff_tc_label > span,
body.ff-redesign .fluentform .ff-el-form-check label.ff_tc_label > div {
  display: block;
  text-align: left;
}
/* FF core pads the checkbox wrapper (`.ff-el-tc label.ff_tc_label>span
   {padding-top:8px!important}`), which drops the box ~9px below the consent
   text whenever that text fits on a single line. Drop the padding and centre
   the box inside a wrapper exactly as tall as the first line of .ff_t_c
   (0.86rem x 1.5) instead, so it sits on that line at every width. */
body.ff-redesign .fluentform .ff-el-form-check label.ff_tc_label > span.ff_tc_checkbox {
  display: flex;
  align-items: center;
  padding-top: 0 !important;
  min-height: 1.29rem;
}
body.ff-redesign .fluentform .ff-el-form-check label.ff_tc_label > span.ff_tc_checkbox .ff-el-form-check-input {
  top: 0;
  margin-top: 0;
}
body.ff-redesign .fluentform .ff-el-form-check-input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--ff-brand);
  flex: none;
  cursor: pointer;
}
body.ff-redesign .fluentform .ff-el-form-check .ff_t_c {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ff-text-muted);
}
body.ff-redesign .fluentform .ff_t_c a {
  color: var(--ff-brand-deep);
  font-weight: 600;
}

/* Turnstile widget (renders client-side into its FF field group). */
body.ff-redesign .fluentform .cf-turnstile {
  margin: 2px 0;
}

/* ── Submit (the design's primary CTA look) ──────────────────────────────── */
body.ff-redesign .fluentform .ff_submit_btn_wrapper {
  margin-bottom: 0;
}
body.ff-redesign .fluentform .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 16px 28px;
  border: none;
  border-radius: 14px;
  background: var(--ff-brand);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(var(--ff-brand-rgb), 0.3);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body.ff-redesign .fluentform .ff-btn-submit:hover {
  transform: translateY(-2px);
  background: var(--ff-brand);
  box-shadow: 0 14px 32px rgba(var(--ff-brand-rgb), 0.4);
}
body.ff-redesign .fluentform .ff-btn-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--ff-brand-rgb), 0.25);
}
body.ff-redesign .fluentform .ff-btn-submit[disabled] {
  opacity: 0.6;
  transform: none;
  cursor: default;
}

/* ── Success message (green-tinted card, like the design's submitted state) ─ */
body.ff-redesign .ff-message-success {
  padding: 26px;
  margin: 8px 0 0;
  border: 1px solid rgba(16, 163, 74, 0.22);
  border-radius: 1rem;
  background: rgba(16, 163, 74, 0.08);
  box-shadow: none;
  color: #0f6e56;
  font-size: 0.98rem;
  line-height: 1.5;
}

/* ── Validation errors ───────────────────────────────────────────────────── */
body.ff-redesign .fluentform .error.text-danger,
body.ff-redesign .fluentform .ff-el-is-error .text-danger,
body.ff-redesign .fluentform .ff-errors-in-stack {
  margin-top: 6px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #c0392b;
}
/* Reserved error slot: per-field messages render absolutely inside a fixed
   strip under the field, so errors appearing/clearing never shift the layout.
   Fluent Forms removes an error line the moment the corrected field blurs —
   the resulting mid-click collapse made the GDPR checkbox (and sometimes the
   submit button) swallow the first click after a correction. */
body.ff-redesign .fluentform .ff-el-group {
  position: relative;
  padding-bottom: 26px;
  margin-bottom: 0;
  scroll-margin-top: 110px; /* fixed-header clearance for scroll-to-error */
}
body.ff-redesign .fluentform .ff-el-group .error.text-danger {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  margin-top: 0;
}
@media (max-width: 480px) {
  /* narrow columns wrap the longer messages onto two lines */
  body.ff-redesign .fluentform .ff-el-group { padding-bottom: 42px; }
}
body.ff-redesign .fluentform .ff-el-is-error .ff-el-form-control {
  border-color: #c0392b;
}
body.ff-redesign .fluentform .ff-el-is-error .ff-el-form-control:focus {
  box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.12);
}