/* Оформление живой проверки форм — пара к static/js/forms.js.
 *
 * Подключено глобально: формы есть в подвале, в шапке кабинета и на карточке
 * товара, отдельным файлом страницы это не покрыть.
 */

/* --- Сообщение под полем --------------------------------------------------- */

/* Узел появляется в разметке только пока ошибка показана, поэтому в спокойном
   состоянии он ничего не занимает. Скрытое состояние нужно ради перехода:
   вставленный узел один кадр стоит свёрнутым и лишь затем раскрывается. */
.field-error--live {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height var(--t-base),
    opacity var(--t-base),
    transform var(--t-base),
    margin-top var(--t-base);
}

.field-error--live.is-on {
  max-height: 5em;
  margin-top: var(--sp-1);
  opacity: 1;
  transform: none;
}

/* --- Подсветка поля с ошибкой ---------------------------------------------- */

/* Рамку ошибки в components.css знает только .input; textarea, список и поле
   с плавающей подписью подсвечиваем тут же, чтобы вид ошибки был один. */
.textarea.has-error,
.select.has-error,
.field-boxed.has-error {
  border-color: var(--c-danger);
}

.input.has-error:focus,
.textarea.has-error:focus,
.select.has-error:focus,
.field-boxed.has-error:focus-within {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-danger) 18%, transparent);
}

/* Скрытая радиокнопка и файл подсветить нельзя — красим сам блок выбора. */
.field.has-error .rv-rate,
.field.has-error .rv-chips {
  border-radius: var(--r-md);
  box-shadow: 0 0 0 2px var(--c-danger);
}

.check.has-error > .box {
  border-color: var(--c-danger);
}

/* Звёздочка обязательного поля: в подписях .field-label цвет уже задан,
   здесь — для подписи внутри рамки и в форме консультации. */
.field-boxed > span .req,
.consult__field > span .req {
  color: var(--c-danger);
}

/* --- Формы на тёмной подложке ---------------------------------------------- */

/* На индиговом фоне красный текст почти не читается, поэтому там сообщение
   становится плашкой: белые буквы на красном. */
.consult .field-error--live,
.footer__subscribe .field-error--live {
  color: var(--c-bg);
  font-weight: var(--fw-medium);
}

.consult .field-error--live.is-on,
.footer__subscribe .field-error--live.is-on {
  max-height: 6em;
  width: fit-content;
  max-width: 100%;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--c-danger);
}

.consult__field input.has-error {
  border-color: var(--c-danger);
}

/* Подписка в подвале выложена строкой: сообщению нужен свой ряд, иначе оно
   встанет между полем и кнопкой и растянет полосу. */
.footer__subscribe form {
  flex-wrap: wrap;
}

.footer__subscribe .field-error--live {
  flex: 1 0 100%;
  /* Сообщение уходит под строку, кнопка остаётся рядом с полем: в разметке
     оно стоит сразу за полем, а порядком отправляем его в конец. */
  order: 1;
}