/* Контейнер в состоянии загрузки */
.form-gate.is-loading .form-gate__content {
    display: none;                 /* прячем форму целиком */
}
.form-gate__spinner {
    display: none;                 /* по умолчанию спиннера нет */
}
.form-gate.is-loading .form-gate__spinner {
    display: flex;                 /* показываем во время загрузки */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 220px;             /* чтобы контейнер не схлопывался — подгоните под высоту формы */
    padding: 24px;
}
.form-gate__spinner-circle {
    width: 40px; height: 40px;
    border: 4px solid rgba(0,0,0,0.12);
    border-top-color: #e5292f;
    border-radius: 50%;
    animation: form-spin 0.8s linear infinite;
}
@keyframes form-spin { to { transform: rotate(360deg); } }
.form-gate__spinner-text { font-size: 14px; color: #555; text-align: center; }

/* Состояние ошибки */
.form-gate.is-error .form-gate__content,
.form-gate.is-error .form-gate__spinner { display: none; }
.form-gate__error { display: none; }
.form-gate.is-error .form-gate__error {
    display: block;
    padding: 20px; text-align: center; color: #b00020;
    min-height: 220px;
}
.form-gate__error button {
    margin-top: 10px;
    padding: 8px 16px;
    cursor: pointer;
    background: #e5292f;
    color: #fff;
    border: 0;
    border-radius: 4px;
    transition: background-color 0.15s ease;  /* плавность для hover */
}
.form-gate__error button:hover {
    background: #c81f24;   /* темнее основного — как у .orderform button:hover в вашем проекте */
}
.form-gate__error button:active {
    background: #b31a1f;   /* ещё темнее при нажатии — тактильная обратная связь */
}
.form-gate__error button:focus-visible {
    outline: 2px solid #7a1013;   /* доступность: видимый фокус с клавиатуры */
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .form-gate__spinner-circle { animation-duration: 2s; }
}