/* Wrapper vorbereiten */
.jet-form-builder__field-wrap {
  position: relative;
}

/* Loading-Spinner rechts im Feld */
.jet-form-builder__field-wrap.live-query-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px; /* ggf. an dein Design anpassen */
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: rgba(0,0,0,0.6);
  animation: liveQuerySpinner 0.6s linear infinite;
  pointer-events: none;
  z-index: 2; /* sicherstellen, dass der Spinner über dem Input liegt */
}

/* Statusfarben (true/false) am Wrapper */
.jet-form-builder__field-wrap.live-query-status--true input[name="user_email_check"] {
  border-color: #2e7d32; /* grün */
}

.jet-form-builder__field-wrap.live-query-status--false input[name="user_email_check"] {
  border-color: #c62828; /* rot */
}

/* Spinner-Animation */
@keyframes liveQuerySpinner {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* --- Smooth Fade+Slide für Login / Signup --- */
/* Diese Klassen hast du ja an den Conditional-Blöcken */

.slp-block--login,
.slp-block--signup {
  /* Standardzustand: sichtbar, keine Manipulation von display/opacity nötig */
}

/* Sobald JetFormBuilder den Block einblendet und er gerendert ist,
   lassen wir einmalig eine kleine Animation laufen */
.slp-block--login,
.slp-block--signup {
  animation: slpFadeSlideIn 0.3s ease-out;
}

/* Keyframes für weiches Einblenden */
@keyframes slpFadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gesamte Zeile für user_email_status ausblenden */
.jet-form-builder-row[data-update-field-name="user_email_status"] {
  display: none !important;
}