/* aivonyx LP-Forms — CF7 Stepper, mirrors aivonyx/style.css JetForms aesthetic
 *
 * Tokens come from aivonyx/style.css :root (--ax-font-mono, --ax-accent, --ax-border, …)
 * — fallback values keep this readable if the parent stylesheet is missing.
 *
 * Layout: column-stacked label/field (matches CF7 wpautop output).
 * No card wrapper around steps — only mono UPPERCASE section heading + divider.
 * Sharp borders (radius 0), accent focus, mono-uppercase Weiter/Submit buttons.
 */

/* ---------- Form wrapper ---------- */
.ax-form {
  font-family: var(--ax-font-sans, system-ui, sans-serif);
  color: var(--ax-web-body, #1a2a33);
  max-width: 51.25rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* CF7 wraps each label in <p> — strip default spacing */
.wpcf7 form.wpcf7-form { margin: 0; }
.ax-form p { margin: 0 0 1rem; }
.ax-form .ax-row > p,
.ax-form .ax-row > label { margin: 0; }

/* ---------- Progress indicator ---------- */
.ax-form .ax-progress {
  font-family: var(--ax-font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ax-web-muted, #5a6a72);
}

/* ---------- Step section ---------- */
.ax-form .ax-step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ax-border, #d6e0e6);
}
.ax-form .ax-step:first-of-type {
  padding-top: 0;
  border-top: 0;
}
/* Override class-based display:flex for hidden steps —
 * .ax-form .ax-step (0,2,0) outranks [hidden] (0,1,0), so be explicit. */
.ax-form .ax-step[hidden] { display: none; }

/* Step heading — mono UPPERCASE, accent underline */
.ax-form .ax-step h3 {
  font-family: var(--ax-font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ax-web-heading, #1a2a33);
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ax-border, #d6e0e6);
}

/* Lead paragraph under heading — sans, muted */
.ax-form .ax-step > p:not([class]) {
  font-size: 0.9375rem;
  color: var(--ax-web-muted, #5a6a72);
  margin: 0 0 0.5rem;
}

/* Two-column row for inputs (vorname/nachname etc.) */
.ax-form .ax-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
  gap: 1rem;
}

/* ---------- Labels ---------- */
.ax-form label {
  display: block;
  font-family: var(--ax-font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ax-web-heading, #1a2a33);
  line-height: 1.4;
}
.ax-form label br { display: none; }
.ax-form label > input,
.ax-form label > select,
.ax-form label > textarea,
.ax-form label > .wpcf7-form-control-wrap {
  display: block;
  margin-top: 0.5rem;
}

/* ---------- Inputs / Selects / Textareas ---------- */
.ax-form input[type="text"],
.ax-form input[type="email"],
.ax-form input[type="tel"],
.ax-form input[type="url"],
.ax-form input[type="number"],
.ax-form input[type="date"],
.ax-form select,
.ax-form textarea {
  width: 100%;
  font-family: var(--ax-font-sans, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--ax-web-heading, #1a2a33);
  background: var(--ax-white, #ffffff);
  border: 1px solid var(--ax-border, #d6e0e6);
  border-radius: 0;
  padding: 0.875rem 1rem;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color var(--ax-dur-base, 200ms) var(--ax-ease, ease),
              box-shadow var(--ax-dur-base, 200ms) var(--ax-ease, ease);
}

.ax-form textarea {
  min-height: 8.75rem;
  resize: vertical;
}
/* Anamnese-Krankengeschichte: 7 Textareas → flacher starten (2 Zeilen), wachsen bei Bedarf
   per resize:vertical. Spart Scrolllänge, ohne Eingabe zu beschneiden. */
.ax-form-anamnese textarea,
.ax-form-bmc textarea {
  min-height: 3rem;
}

.ax-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ax-web-heading, #1a2a33) 50%),
                    linear-gradient(135deg, var(--ax-web-heading, #1a2a33) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) center, calc(100% - 0.875rem) center;
  background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
  cursor: pointer;
}

.ax-form input:focus,
.ax-form select:focus,
.ax-form textarea:focus {
  outline: none;
  border-color: var(--ax-accent, #00d9ff);
  box-shadow: 0 0 0 0.1875rem #00738F;
}

.ax-form ::placeholder {
  color: var(--ax-web-muted, #5a6a72);
  opacity: 1;
}

/* ---------- Checkbox / Radio (CF7 list-item) ---------- */
.ax-form .wpcf7-checkbox,
.ax-form .wpcf7-radio {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.ax-form .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--ax-border, #d6e0e6);
  background: var(--ax-white, #ffffff);
  cursor: pointer;
  transition: border-color var(--ax-dur-base, 200ms) var(--ax-ease, ease),
              background var(--ax-dur-base, 200ms) var(--ax-ease, ease);
}
.ax-form .wpcf7-list-item:hover {
  border-color: var(--ax-web-heading, #1a2a33);
}
.ax-form .wpcf7-list-item:has(input:checked) {
  border-color: var(--ax-accent, #00d9ff);
  background: rgba(0, 217, 255, .06);
}
.ax-form .wpcf7-list-item-label {
  font-family: var(--ax-font-sans, system-ui, sans-serif);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ax-web-body, #1a2a33);
  line-height: 1.5;
}

/* Native radio/checkbox restyle */
.ax-form .wpcf7-list-item input[type="checkbox"],
.ax-form .wpcf7-list-item input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0.1875rem 0 0;
  border: 0.09375rem solid var(--ax-web-muted, #5a6a72);
  background: var(--ax-white, #ffffff);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: border-color var(--ax-dur-base, 200ms) var(--ax-ease, ease),
              background var(--ax-dur-base, 200ms) var(--ax-ease, ease);
}
.ax-form .wpcf7-list-item input[type="radio"] { border-radius: 50%; }
.ax-form .wpcf7-list-item input[type="checkbox"]:checked,
.ax-form .wpcf7-list-item input[type="radio"]:checked {
  border-color: var(--ax-accent, #00d9ff);
  background: var(--ax-accent, #00d9ff);
}
.ax-form .wpcf7-list-item input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 0.1875rem;
  background: var(--ax-web-heading, #1a2a33);
  border-radius: 50%;
}
.ax-form .wpcf7-list-item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0;
  width: 0.375rem;
  height: 0.6875rem;
  border-right: 0.125rem solid var(--ax-web-heading, #1a2a33);
  border-bottom: 0.125rem solid var(--ax-web-heading, #1a2a33);
  transform: rotate(45deg);
}

/* Acceptance (Datenschutz) */
.ax-form .wpcf7-acceptance .wpcf7-list-item {
  background: transparent;
  border: 0;
  padding: 0;
}

/* ---------- Statement-Slider (Anamnese, [range]) ----------
 * Expliziter Reset: Theme-CSS packt Inputs sonst in die Text-Input-Box (Rahmen/Padding). */
.ax-form input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  height: auto;
  vertical-align: middle;
  accent-color: var(--ax-accent, #00d9ff);
  cursor: pointer;
}
.ax-form input[type="range"]:focus {
  border: 0;
  box-shadow: none;
}
/* Slider + Wertanzeige in einer Zeile (wpcf7-Wrap = CF7-Markup, ax-range-wrap = Alt-Markup) */
.ax-form .wpcf7-form-control-wrap:has(> input[type="range"]),
.ax-form .ax-range-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ax-range-value {
  flex: 0 0 auto;
  min-width: 8.5rem;
  font-family: var(--ax-font-sans, system-ui, sans-serif);
  font-size: 0.875rem;
  color: var(--ax-web-muted, #5a6a72);
  white-space: nowrap;
}

/* ---------- Nav buttons (Weiter / Zurück / Submit) ---------- */
.ax-form .ax-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.ax-form .ax-nav button,
.ax-form .ax-nav input[type="submit"],
.ax-form .ax-nav .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ax-font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ax-web-heading, #1a2a33);
  background: var(--ax-accent, #00d9ff);
  border: 1px solid var(--ax-accent, #00d9ff);
  border-radius: 0;
  padding: 1rem 1rem;
  cursor: pointer;
  transition: background var(--ax-dur-base, 200ms) var(--ax-ease, ease),
              border-color var(--ax-dur-base, 200ms) var(--ax-ease, ease),
              transform var(--ax-dur-base, 200ms) var(--ax-ease, ease);
}
.ax-form .ax-nav button:hover,
.ax-form .ax-nav input[type="submit"]:hover,
.ax-form .ax-nav .wpcf7-submit:hover {
  background: var(--ax-accent-hover, #00b8d9);
  border-color: var(--ax-accent-hover, #00b8d9);
  transform: translateY(-0.0625rem);
}
.ax-form .ax-nav button:focus-visible,
.ax-form .ax-nav input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.1875rem #00738F;
}

/* Zurück = ghost variant */
.ax-form .ax-nav .ax-prev {
  background: transparent;
  color: var(--ax-web-heading, #1a2a33);
  border-color: var(--ax-border, #d6e0e6);
}
.ax-form .ax-nav .ax-prev:hover {
  background: var(--ax-white, #ffffff);
  border-color: var(--ax-web-heading, #1a2a33);
}

/* Prefill-Felder aus der Einladung: sichtbar gesperrt (UX-Review B5) */
.ax-form input[readonly],
.ax-form textarea[readonly] {
  background: var(--ax-gray-subtle, #f5f5f5);
  cursor: default;
}

/* ---------- Validation ---------- */
/* Persistente Inline-Fehler der JS-Validierung (UX-Review B5) */
.ax-form .ax-field-error {
  font-family: var(--ax-font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ax-state-error-fg, #a01a20);
  margin: 0.5rem 0 0;
}
.ax-form .wpcf7-not-valid {
  border-color: #d83a3a !important;
  box-shadow: 0 0 0 0.1875rem rgba(216, 58, 58, .15);
}
.ax-form .wpcf7-not-valid-tip {
  font-family: var(--ax-font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #d83a3a;
  margin-top: 0.5rem;
}
.wpcf7 form .wpcf7-response-output {
  font-family: var(--ax-font-sans, system-ui, sans-serif);
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 1rem;
  border-radius: 0;
  margin: 1rem 0 0;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #d83a3a;
  color: #d83a3a;
  background: rgba(216, 58, 58, .06);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--ax-accent, #00d9ff);
  background: rgba(0, 217, 255, .08);
}
.wpcf7 .wpcf7-spinner { background-color: var(--ax-accent, #00d9ff); }

/* Forced Colors (Windows-Kontrastmodus): box-shadow entfällt dort,
   outline:none der Fokus-Styles bliebe sonst ohne Ersatz (WCAG 2.4.7). */
@media (forced-colors: active) {
  .ax-form :focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px;
  }
}