/*
 * Minimal defaults for the state transitions used by the form.
 * Full visual styling (fonts, colors, layout) is expected to come from
 * the theme — the original .form.form--webinar / .form__main / webinar-date
 * rules can be pasted into the theme stylesheet unchanged.
 */

.form.form--webinar { position: relative; }

.form--webinar .form__loading,
.form--webinar .form__thanks { display: none; }

.form--webinar.is-loading .form__main { opacity: 0.4; pointer-events: none; }
.form--webinar.is-loading .form__loading { display: block; }

.form--webinar.is-done .form__main,
.form--webinar.is-done .form__loading { display: none; }
.form--webinar.is-done .form__thanks { display: block; }

.form--webinar.is-error .form__main::after {
  content: "Anmeldung fehlgeschlagen. Bitte versuche es erneut.";
  display: block;
  color: #c00;
  padding: 0.5em 0;
  font-size: 14px;
}

.form--webinar .form__loading svg { width: 80px; height: 80px; display: block; margin: 1em auto; }