/*
 * Форма подписки: состояния и оформление.
 *
 * Разметка досталась от источника (`.subscribe-form`, `.email_wrap`, `.send_btn`),
 * а приём делает ядро (`muse-forms.js`). У клиента ядра свой протокол состояний:
 * на время запроса он ставит кнопке `disabled` и класс `is-busy`, при успехе
 * вешает форме `is-sent` и показывает `[data-mf-ok]`, при ошибке — `[data-mf-error]`.
 * Тема об этом протоколе не знает, и без стилей ниже получалось следующее:
 *
 *  - `.btn[disabled]{background:0 0!important;border:1px solid #bbb!important}` из
 *    styles.css превращал фирменную кнопку в пустой белый прямоугольник и стирал
 *    стрелку (она у темы фоновой картинкой) — ровно то, что видел владелец;
 *  - `is-sent` никто не обрабатывал, поэтому поле ввода оставалось на месте, а
 *    сообщение об успехе приписывалось снизу — зелёный текст на фирменном красном;
 *  - переходов не было вовсе: состояния переключались рывком.
 *
 * Цвета берутся из переменных, чтобы одна вёрстка работала в двух контекстах:
 * в подвале блок стоит на фирменном красном, в боковой колонке — на белом.
 */

.subscribe-form {
    --sub-field-border: #e0e0e0;
    --sub-focus: rgba(189, 28, 60, .28);
}

/*
 * Фон под формой зависит НЕ от места на странице, а от блока `.wrap_bg`, и
 * привязка «подвал — красный, колонка — белый» была ошибкой: замер показал
 * обратное. В боковой колонке блок подписки идёт с фирменной заливкой
 * (rgb(181,26,57)), а в подвале лежит на светло-сером (rgb(246,246,247)).
 * Поэтому цвета текста подобраны так: светлые там, где заливка есть.
 */
.left_block .subscribe-form {
    --sub-field-border: transparent;
    --sub-focus: rgba(255, 255, 255, .45);
}

/* ——— Поле и кнопка ——— */

.subscribe-form .email_wrap {
    position: relative;
    display: block;
}

.subscribe-form .email_input {
    border: 1px solid var(--sub-field-border);
    transition: box-shadow .18s ease, border-color .18s ease;
}

.subscribe-form .email_input:focus {
    outline: none;
    border-color: var(--sub-focus);
    box-shadow: 0 0 0 3px var(--sub-focus);
}

/* Кнопка со стрелкой. Плавность и отклик: наведение затемняет, нажатие
   утапливает на пиксель — без этого кнопка ощущается неживой. */
.subscribe-form .send_btn {
    transition: background-color .18s ease, opacity .18s ease, transform .08s ease;
}

.subscribe-form .send_btn:hover {
    background-color: #a3172f;
}

.subscribe-form .send_btn:active {
    transform: translateY(1px);
}

/* Состояние отправки. Перебиваем правило темы для `[disabled]` (оно с
   `!important`, поэтому и здесь он неизбежен) и подменяем стрелку спиннером:
   кнопка остаётся фирменной, но видно, что идёт работа. */
.subscribe-form .send_btn.is-busy,
.subscribe-form .send_btn[disabled] {
    background-color: #a3172f !important;
    border-color: #a3172f !important;
    color: transparent !important;
    background-image: none !important;
    cursor: progress;
    opacity: 1 !important;
}

/* Клиент ядра вешает `is-busy` на КНОПКУ, а у `input[type=submit]` нет
   псевдоэлементов — спиннер рисуем на обёртке через `:has()`. Где селектор не
   поддержан, останется просто затемнённая кнопка: состояние всё равно видно. */
.subscribe-form .email_wrap:has(.send_btn.is-busy)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 15px;
    height: 15px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sofaSubSpin .7s linear infinite;
    pointer-events: none;
}

@keyframes sofaSubSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .subscribe-form .email_wrap:has(.send_btn.is-busy)::after { animation-duration: 2.4s; }
    .subscribe-form .send_btn { transition: none; }
    .sofa-sub-msg { animation: none; }
}

/* ——— Сообщения ——— */

.sofa-sub-msg[hidden] {
    display: none !important;
}

/*
 * Плашка сообщения не зависит от фона под ней.
 *
 * Первая версия красила текст «по контексту» — и промахнулась в обе стороны:
 * зелёный текст оказался на фирменном красном (боковая колонка), белый — на
 * светло-сером (подвал). Оба раза нечитаемо. Теперь у плашки собственный белый
 * фон и тёмный текст: такое сочетание читается на любой подложке, а состояние
 * различает цветная иконка, а не цвет всей строки.
 */
.subscribe_wrap .subscribe-form form.sform .sofa-sub-msg,
.sofa-sub-msg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid rgba(29, 32, 41, .1);
    box-shadow: 0 2px 8px rgba(16, 18, 27, .08);
    color: #1d2029;
    font-size: 13px;
    line-height: 1.45;
    animation: sofaSubIn .22s ease both;
}

.sofa-sub-msg::before {
    flex: 0 0 auto;
    font-weight: 700;
    line-height: 1.45;
}

.sofa-sub-msg.mf-ok::before {
    content: "✓";
    color: #2f7d32;
}

.sofa-sub-msg.mf-err::before {
    content: "!";
    color: #bd1c3c;
}

@keyframes sofaSubIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* Успешная отправка: поле и кнопка уезжают, на их месте остаётся сообщение.
   Клиент ядра вешает `is-sent` на форму — это его штатный сигнал, тема просто
   про него не знала.

   Форме задана минимальная высота по САМОМУ высокому состоянию — сообщению в
   две строки (замер: 79px против 52px у поля ввода). Иначе блок подписки после
   успеха подрастал, и страница дёргалась вниз ровно в тот момент, когда человек
   читает подтверждение. */
.subscribe-form form.sform {
    min-height: 80px;
}

/* Поле стоит в верху зарезервированной высоты, а не растягивается по ней. */
.subscribe-form form.sform .email_wrap {
    align-self: flex-start;
}

.subscribe-form form.is-sent .email_wrap {
    display: none;
}

.subscribe-form form.is-sent .sofa-sub-msg {
    margin-top: 0;
}