/* ═══════════════════════════════════════════════════════════════════
   Marstaller-Universum — Kontaktformular (v4.2.0 — Glass-Redesign)
   ───────────────────────────────────────────────────────────────────
   Aesthetic: Glass-Morphism mit subtilem Backdrop-Blur, gradient-borders,
   floating labels, smooth focus glow. Mobile-friendly, dark/light-aware.
   ═══════════════════════════════════════════════════════════════════ */

.mup-form-wrap {
  /* Design-Tokens */
  --mup-form-accent:        var(--gm-gold, #c9a84c);
  --mup-form-accent-rgb:    201, 168, 76;
  --mup-form-accent-soft:   rgba(var(--mup-form-accent-rgb), 0.12);
  --mup-form-accent-glow:   rgba(var(--mup-form-accent-rgb), 0.35);

  --mup-form-ink:           currentColor;
  --mup-form-label-ink:     rgba(0, 0, 0, 0.55);
  --mup-form-placeholder:   rgba(0, 0, 0, 0.32);

  --mup-form-glass-bg:      rgba(255, 255, 255, 0.55);
  --mup-form-glass-bg-fc:   rgba(255, 255, 255, 0.78);
  --mup-form-glass-border:  rgba(255, 255, 255, 0.7);
  --mup-form-input-border:  rgba(0, 0, 0, 0.08);
  --mup-form-input-bg:      rgba(255, 255, 255, 0.6);
  --mup-form-input-bg-fc:   rgba(255, 255, 255, 0.95);

  --mup-form-radius:        18px;
  --mup-form-radius-sm:     12px;
  --mup-form-pad-y:         1.15rem;
  --mup-form-pad-x:         1.25rem;
  --mup-form-gap:           1.4rem;
  --mup-form-label-sz:      0.72rem;
  --mup-form-input-sz:      1.02rem;

  --mup-form-shadow:        0 8px 32px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255,255,255,0.5) inset;
  --mup-form-glow:          0 0 0 4px rgba(var(--mup-form-accent-rgb), 0.18);

  max-width: 680px;
  margin: 0 auto;
  background: var(--mup-form-glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--mup-form-glass-border);
  border-radius: var(--mup-form-radius);
  padding: 2rem clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--mup-form-shadow);
  position: relative;
}

/* Subtiler Goldschimmer am oberen Rand */
.mup-form-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mup-form-accent-glow), transparent);
  border-radius: 1px;
  pointer-events: none;
}

/* Dark-Mode */
.has-background-dim ~ .wp-block-cover__inner-container .mup-form-wrap,
.has-dark-background .mup-form-wrap,
[data-theme="dark"] .mup-form-wrap {
  --mup-form-label-ink:     rgba(255, 255, 255, 0.65);
  --mup-form-placeholder:   rgba(255, 255, 255, 0.35);
  --mup-form-glass-bg:      rgba(20, 20, 20, 0.55);
  --mup-form-glass-border:  rgba(255, 255, 255, 0.12);
  --mup-form-input-border:  rgba(255, 255, 255, 0.12);
  --mup-form-input-bg:      rgba(0, 0, 0, 0.3);
  --mup-form-input-bg-fc:   rgba(0, 0, 0, 0.5);
  --mup-form-shadow:        0 8px 32px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255,255,255,0.06) inset;
}

/* Form Layout */
.mup-form {
  display: flex;
  flex-direction: column;
  gap: var(--mup-form-gap);
}

.mup-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mup-form-gap);
}
@media (max-width: 640px) {
  .mup-form__row { grid-template-columns: 1fr; }
}

/* Honeypot — komplett unsichtbar */
.mup-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Floating Label Field */
.mup-form__field {
  position: relative;
  display: block;
}

.mup-form__label {
  position: absolute;
  top: 50%;
  left: var(--mup-form-pad-x);
  transform: translateY(-50%);
  font-size: var(--mup-form-input-sz);
  color: var(--mup-form-label-ink);
  pointer-events: none;
  transition: top 0.22s ease, transform 0.22s ease, font-size 0.22s ease, color 0.22s ease, background 0.22s ease, padding 0.22s ease;
  font-weight: 400;
}

/* Textarea-Label sitzt oben */
.mup-form__field:has(textarea) .mup-form__label {
  top: var(--mup-form-pad-y);
  transform: translateY(0);
}

/* Input / Textarea / Select */
.mup-form__input,
.mup-form__textarea,
.mup-form__select {
  width: 100%;
  font: inherit;
  font-size: var(--mup-form-input-sz);
  color: var(--mup-form-ink);
  background: var(--mup-form-input-bg);
  border: 1px solid var(--mup-form-input-border);
  border-radius: var(--mup-form-radius-sm);
  padding: var(--mup-form-pad-y) var(--mup-form-pad-x);
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.mup-form__textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.55;
}

.mup-form__select {
  cursor: pointer;
  padding-right: 2.5rem;
}

.mup-form__field--select { position: relative; }
.mup-form__select-chevron {
  position: absolute;
  top: 50%; right: 1rem;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: var(--mup-form-label-ink);
  pointer-events: none;
  transition: color 0.22s ease, transform 0.22s ease;
}

/* Floating Label: Focus + Inhalt */
.mup-form__field:has(.mup-form__input:focus) .mup-form__label,
.mup-form__field:has(.mup-form__input:not(:placeholder-shown)) .mup-form__label,
.mup-form__field:has(.mup-form__textarea:focus) .mup-form__label,
.mup-form__field:has(.mup-form__textarea:not(:placeholder-shown)) .mup-form__label,
.mup-form__field--select:focus-within .mup-form__label,
.mup-form__field--select:has(.mup-form__select) .mup-form__label {
  top: -0.55rem;
  transform: translateY(0);
  font-size: var(--mup-form-label-sz);
  color: var(--mup-form-accent);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--mup-form-input-bg-fc);
  padding: 0 0.5rem;
  border-radius: 4px;
}

/* Focus State */
.mup-form__input:focus,
.mup-form__textarea:focus,
.mup-form__select:focus {
  background: var(--mup-form-input-bg-fc);
  border-color: var(--mup-form-accent);
  box-shadow: var(--mup-form-glow);
}

.mup-form__field--select:focus-within .mup-form__select-chevron {
  color: var(--mup-form-accent);
  transform: translateY(-50%) rotate(180deg);
}

.mup-form__input::placeholder,
.mup-form__textarea::placeholder { color: transparent; }
.mup-form__input:focus::placeholder,
.mup-form__textarea:focus::placeholder { color: var(--mup-form-placeholder); }

/* Checkbox (Datenschutz) */
.mup-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.93rem;
  line-height: 1.55;
  cursor: pointer;
  color: var(--mup-form-label-ink);
}
.mup-form__checkbox input[type="checkbox"] {
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--mup-form-accent);
  cursor: pointer;
}
.mup-form__checkbox a {
  color: var(--mup-form-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Submit Button */
.mup-form__submit {
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #1f1a12;
  background: linear-gradient(135deg, var(--mup-form-accent) 0%, #b89339 100%);
  border: none;
  border-radius: var(--mup-form-radius-sm);
  padding: 1.1rem 2.5rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 4px 20px rgba(var(--mup-form-accent-rgb), 0.35), 0 1px 0 rgba(255,255,255,0.4) inset;
  align-self: flex-start;
  min-width: 12rem;
}
.mup-form__submit::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.6s ease;
}
.mup-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(var(--mup-form-accent-rgb), 0.55), 0 1px 0 rgba(255,255,255,0.5) inset;
}
.mup-form__submit:hover::before { left: 100%; }
.mup-form__submit:active { transform: translateY(0); }
.mup-form__submit:focus-visible { outline: 3px solid var(--mup-form-accent); outline-offset: 3px; }
.mup-form__submit:disabled { opacity: 0.7; cursor: wait; transform: none; }

/* Feedback */
.zzr-form-feedback {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  border-radius: var(--mup-form-radius-sm);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid transparent;
}
.zzr-form-feedback-success {
  background: rgba(46, 125, 79, 0.12);
  border-color: rgba(46, 125, 79, 0.35);
  color: #1f5031;
}
.zzr-form-feedback-error {
  background: rgba(166, 74, 62, 0.12);
  border-color: rgba(166, 74, 62, 0.35);
  color: #6e2a22;
}
.zzr-form-feedback-icon {
  flex-shrink: 0;
  width: 1.8rem; height: 1.8rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 700;
}
.zzr-form-feedback-success .zzr-form-feedback-icon { background: #2e7d4f; color: #fff; }
.zzr-form-feedback-error .zzr-form-feedback-icon { background: #a64a3e; color: #fff; }
.zzr-form-feedback p { margin: 0; }

/* Mount-Animation */
@keyframes mup-form-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mup-form-wrap { animation: mup-form-rise 0.5s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .mup-form-wrap, .mup-form__submit, .mup-form__label,
  .mup-form__input, .mup-form__textarea, .mup-form__select { animation: none !important; transition: none !important; }
}

/* ── v5.2 File-Upload ── */
.mup-form__field--file { display: flex; flex-direction: column; gap: 0.4rem; }
.mup-form__file-label  { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; }
.mup-form__file-input  { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.mup-form__file-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: rgba(201, 168, 76, 0.12);
  border: 1px dashed var(--mup-accent, #c9a84c);
  border-radius: 6px;
  font-size: 0.88rem; font-weight: 600;
  color: var(--mup-accent, #c9a84c);
  transition: background 0.2s;
  cursor: pointer;
}
.mup-form__file-btn:hover { background: rgba(201, 168, 76, 0.22); }
.mup-form__file-name { font-size: 0.82rem; color: #6f5d3a; }
.mup-form__file-hint { font-size: 0.75rem; color: #6f5d3a; margin: 0; }

/* ── v5.2 Inline-Error nach AJAX ── */
.mup-form-inline-error {
  background: rgba(166, 74, 62, 0.1);
  border: 1px solid rgba(166, 74, 62, 0.35);
  color: #6e2a22;
  padding: 0.7rem 1rem; border-radius: 6px;
  font-size: 0.92rem; margin-bottom: 1rem;
}
.mup-form .is-invalid {
  border-color: #a64a3e !important;
  box-shadow: 0 0 0 2px rgba(166, 74, 62, 0.15) !important;
}
.mup-form__submit.is-busy {
  pointer-events: none; opacity: 0.8;
}
.mup-form-success-msg--visible {
  background: rgba(46, 125, 79, 0.12);
  border: 1px solid rgba(46, 125, 79, 0.35);
  color: #1f5031;
  padding: 1.2rem 1.4rem; border-radius: 8px;
  font-size: 1.05rem; line-height: 1.5;
}