.hero-form, .question-form{ position:relative; }

.form-states{ position:absolute; inset:0; display:none; }
.hero-form.is-success .form-states, .hero-form.is-error .form-states,
.question-form.is-success .form-states, .question-form.is-error .form-states{ display:block; }

/* приховати поля, коли показано стан (місце зберігається) */
.hero-form.is-success > :not(.form-states), .hero-form.is-error > :not(.form-states),
.question-form.is-success > :not(.form-states), .question-form.is-error > :not(.form-states){ visibility:hidden; }

.form-state{
  position:absolute; inset:0;
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:14px; padding:40px;
}
.hero-form.is-success .form-state--success, .question-form.is-success .form-state--success{ display:flex; }
.hero-form.is-error   .form-state--error,   .question-form.is-error   .form-state--error{ display:flex; }

.form-state__icon{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; color:#fff; font-weight:700;
}
.form-state__icon--ok{ background:var(--green); }
.form-state__icon--err{ background:#ff383c; }
.form-state__title{ font-size:18px; font-weight:700; color:var(--dark-green); }
.form-state__title--err{ color:#ff383c; }
.form-state__text{ font-size:14px; font-weight:400; color:#343434; max-width:340px; }

.btn--dark{ background:#1a1a1a; color:#fff; }
.btn--dark:hover{ background:#000; }