/* Задача 34, раздел 5. Улучшение форм. Свой файл — можно убрать одной
   строкой (см. подключение рядом с формами), ничего в существующей
   вёрстке форм не меняет, только добавляет состояния поверх. */

/* 5.2. Проверка на лету. */
.field {
  position: relative;
}

.field--invalid .t-input {
  border-color: #d64545;
}

.field--valid .t-input {
  border-color: var(--color-accent-green);
}

.field--valid::after {
  content: '✓';
  position: absolute;
  top: 38px;
  right: 14px;
  color: var(--color-accent-green);
  font-weight: 700;
  pointer-events: none;
}

.field__hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: #d64545;
}

/* 5.3. Предупреждение о черновике в localStorage. */
.field__draft-notice {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--team-role-color);
}

/* 5.4. Индикатор отправки — чистый CSS поверх уже существующей
   блокировки кнопки (footer.php, задача 21, submitBtn.disabled=true
   на время AJAX-запроса). Текст кнопки не трогаем (не дублировать
   логику из footer.php здесь), добавляем только крутящийся индикатор
   и лёгкое затемнение, чтобы состояние "идёт отправка" было заметно
   глазу, а не только не-кликабельно. */
[data-fda-form] button[type="submit"]:disabled {
  position: relative;
  opacity: 0.75;
  cursor: not-allowed;
  padding-right: 46px;
}

@media (prefers-reduced-motion: no-preference) {
  [data-fda-form] button[type="submit"]:disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: fda-form-spin 0.7s linear infinite;
  }
}

@keyframes fda-form-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}