/* ==========================================================================
   Ожидание: крутилка и полупрозрачная плёнка поверх формы.

   Нужна там, где между нажатием и ответом проходит заметное время и на экране не
   меняется ничего: вход (проверка пароля — это намеренно медленная операция),
   регистрация (ещё и письмо), оплата (уход на сторону платёжной системы). Пустая
   пауза читается как «подвисло», и человек жмёт второй раз.
   ========================================================================== */

.spinner {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spinner-turn 0.7s linear infinite;
}
@keyframes spinner-turn { to { transform: rotate(360deg); } }

/* Плёнка поверх всей страницы. Именно поверх всего, а не внутри формы: пока идёт
   отправка, любое другое нажатие на странице либо бесполезно, либо вредно (второй
   счёт, второй аккаунт), и закрыть их — часть ответа «мы работаем». */
#page-loading {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-bg, #0b0b10) 62%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s var(--ease, ease);
}
#page-loading.is-visible { opacity: 1; pointer-events: auto; }

.page-loading-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.15rem;
  border-radius: 0.9rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-xl, 0 18px 40px rgba(0, 0, 0, .25));
  color: var(--color-text);
  font-size: 0.82rem;
}
.page-loading-card .spinner { color: var(--color-primary); width: 1.1rem; height: 1.1rem; }

/* Кнопка, которая уже нажата. Ширина фиксируется собственным содержимым, поэтому
   подмена текста на крутилку не дёргает разметку вокруг. */
button.is-loading,
a.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
button.is-loading::after,
a.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border-radius: 50%;
  border: 2px solid var(--color-on-primary, #fff);
  border-right-color: transparent;
  animation: spinner-turn 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .spinner,
  button.is-loading::after,
  a.is-loading::after { animation-duration: 2.4s; }
}