/*
    ── МИГАНИЕ СТАРОГО ВИДА НА ТЕЛЕФОНЕ. Исправлено 30.08.2026 ──

    Владелец: «когда загружаешь сайт открывается на секунду старый
    и только потом новый».

    Причина. Такое же правило для компьютера в calc-view.css есть,
    но лежит внутри @media (min-width: 1025px) — то есть на телефон
    не действует. Браузер успевал нарисовать прежний калькулятор
    задолго до того, как отработает перестройка, и человек видел,
    как блок перескакивает на глазах.

    Класс calc-rebuilding ставит calc-view.js на <html> прямо при
    разборе страницы — до отрисовки этого блока. Снимается он там же,
    в обработчике DOMContentLoaded, а перестройка мобильной версии
    идёт следом в том же такте: между ними браузер не перерисовывает,
    поэтому человек сразу видит готовый вид.

    visibility, а не display: место под блок остаётся занятым,
    страница не прыгает, когда он появляется.

    .make__setting-mobil лежит внутри .make__row (pages/sections/calc.php),
    поэтому селектор накрывает и мобильную колонку тоже.

    Страховка на 3 секунды живёт в calc-view.js. Если скрипт где-то
    споткнётся, калькулятор всё равно покажется — пусть в прежнем виде,
    но покажется. Невидимый калькулятор это ноль заказов.

    Если calc-view.js не загрузился вовсе, класса не будет и правило
    ни на что не повлияет: отказ безопасный.
*/
@media (max-width: 1024px) {
    .calc-rebuilding #make .make__row { visibility: hidden; }
}

/*
    ВСЁ НИЖЕ ЗАПЕРТО В МОБИЛЬНЫЙ МЕДИАЗАПРОС. 31.08.2026.

    Раньше медиазапроса здесь не было вовсе: файл полагался на то, что
    класс calc-m2 ставит скрипт, а тот работает только до 1024 px.
    Пока разметку собирал скрипт, этого хватало.

    Теперь класс стоит прямо в разметке — он приходит с сервера, чтобы
    человек не видел, как вид перескакивает. Без медиазапроса мобильное
    оформление поехало бы и на компьютер.

    Ничего внутри не изменено, добавлена только обёртка.
*/
@media (max-width: 1024px) {

/*
    Мобильный калькулятор, вторая версия. 15.08.2026.

    ПОДКЛЮЧАЕТСЯ ТОЛЬКО НА ТЕСТОВОЙ СТРАНИЦЕ calc-test.php?v2=1.
    На боевом сайте этого файла нет ни на одной странице.

    Все правила начинаются с .calc-m2 — класс ставит calc-mobile-v2.js
    и только после того, как перестроит разметку. Пока класса нет,
    файл не влияет ни на что вообще. Это страховка: если скрипт
    почему-то не отработает, калькулятор останется прежним, а не
    поедет наполовину перестроенным.
*/

/* ============================================================
   ПУСТОТА ПОД ЗАГОЛОВКОМ «Конструктор вашего портрета».

   Владелец 15.08.2026: «после заголовка до выбора стиля очень много
   пустоты».

   Замер на боевом при 375 px: 56 px. Отступ 36 px сверху у
   .make__content плюс 20 px внутреннего поля у самой колонки.

   Класс calc-m2-content ставит скрипт: .make__content лежит выше
   колонки, а вложенным селектором от calc-m2 до родителя не дотянуться.
   ============================================================ */
.calc-m2-content {
    margin-top: 14px !important;
}

.calc-m2 {
    padding-top: 6px !important;
}

/* ============================================================
   ШАГИ В ОДНУ СТРОКУ. Идея владельца 15.08.2026: «надписи "1. Выберите
   стиль" и другие сделать сразу в кнопке, слева в углу, а то что
   выбрали — справа».

   Было: подпись 18 px отдельной строкой, под ней кнопка 42 px. Итого
   62 px на шаг, четыре шага — 248 px.
   Стало: одна строка 44 px. Четыре шага — 176 px.

   РАЗМЕТКУ НЕ ТРОГАЕМ ВОВСЕ, и это не лень, а необходимость:

   - calc.js пишет значение как mobStyle.innerText = ... — innerText
     стирает всё внутри блока, поэтому подпись нельзя класть внутрь;
   - calc.js ищет блок значения строго как ПРЯМОГО потомка шага
     ('.make__setting-button > div[data-name]'), поэтому его нельзя
     заворачивать в обёртку.

   Значит рамкой-кнопкой делаем сам шаг, подпись оставляем слева,
   а блок значения раздеваем: снимаем с него рамку, фон и скругление
   и прижимаем текст вправо.

   Нажатие по подписи слева пробрасывает скрипт — иначе левая половина
   кнопки была бы мёртвой.
   ============================================================ */
.calc-m2 .make__setting-button.calc-m2-step {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;              /* зона нажатия под палец */
    margin-bottom: 8px;
    padding: 6px 16px;
    border: 2px solid #FFA133;
    border-radius: 50px;
    background: #F3B66F;
    cursor: pointer;
}

/*
    Подпись слева. Владелец 15.08.2026: «сделать жирнее текст
    "Выберите стиль", "размер" и так далее».

    600, а не 700: значение справа остаётся самым жирным на строке.
    Если сравнять оба, строка станет однородной кашей и перестанет
    читаться как «вопрос — ответ».
*/
.calc-m2 .calc-m2-step > span.h4 {
    flex: 0 1 auto;
    width: auto;
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;
    text-align: left;
    color: #2b2b2b;
}

/*
    Пока стиль и размер не выбраны, значение справа — это слово
    «Выбрать», то есть приглашение, а не ответ. Показываем его так же,
    как у рамки и покрытия: чуть светлее, чтобы не выдавать себя
    за сделанный выбор.

    Класс active возвращает сам calc.js, когда человек выберет, —
    и текст сразу становится обычным тёмным.
*/
.calc-m2 .calc-m2-step > div[data-name]:not(.active) {
    color: #6b6b6b;
    font-weight: 600;
}

/*
    Значение справа: раздеваем блок — рамка, фон и скругление теперь
    у всей строки. Жирным, потому что это ответ на вопрос слева.
*/
.calc-m2 .calc-m2-step > div[data-name] {
    flex: 1 1 auto;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    text-align: right;
    color: #2b2b2b;
}

/* ============================================================
   ПУНКТ 1 ВЛАДЕЛЬЦА. Пустота между покрытием и ценой.

   Владелец: «очень много пустоты между ценой и 4 покрытием».

   Замер на боевом 15.08.2026 при 375 px: зазор 80 px. Складывался
   из отступа 60 px сверху у строки цены и 10 px снизу у последнего
   шага, плюс собственные поля блока.

   Шестьдесят пикселей имели смысл, пока под ценой сразу шла кнопка:
   воздух отделял итог от действия. Теперь под ценой стоит целая
   форма, и такой провал только отрывает цену от того, за что платят.

   Ставим 16. Цена по-прежнему отделена от шагов, но не висит
   в пустоте.
   ============================================================ */
.calc-m2 p.result-price {
    margin-top: 16px;
    margin-bottom: 0;
}

/* ============================================================
   Форма заказа больше не всплывающее окно, а часть страницы.

   Зачем: из 18 человек, доскроллевших до цены, окно с формой открыли
   двое. Шестнадцать увидели цену и ушли, ни разу не увидев, где
   оставить телефон.
   ============================================================ */
.calc-m2 #makePortret {
    display: block !important;
    position: static !important;
    width: 100%;
    max-width: 100%;
    /*
        Сверху 6, было 12. Владелец 15.08.2026: «прикрепите фото поднять
        чуть выше». Блок фото — первое видимое в форме, значит форма
        и начинается с него, и весь её отступ сверху — это отступ
        до рамки фото.
    */
    margin: 6px 0 0;
    background: none;
    box-shadow: none;
    transform: none;

    /*
        Поля обнуляем с пометкой «важно», и это не перестраховка.

        В newstyle.css лежит правило .modalFormWrapper с padding
        40px 45px !important. Обычной записью его не перебить: «важно»
        сильнее любой точности селектора. Проверено на боевом 15.08.2026 —
        моё правило проигрывало, окно оставалось 197 px внутри колонки
        287 px, то есть 90 px, треть ширины, уходило в никуда, и кнопка
        не могла растянуться.

        Поля были нужны, пока это было всплывающее окно поверх страницы.
        Внутри колонки калькулятора отступы задаёт сам калькулятор.
    */
    padding: 0 !important;
}

/*
    Внутренняя обёртка формы тоже была рассчитана на окно: свои поля
    по бокам и своя ширина.
*/
.calc-m2 #makePortret .modalForm,
.calc-m2 #makePortret .modal__send {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/*
    Кнопка во всю ширину и минимум 54 px в высоту.

    Замер на боевом 15.08.2026: кнопка заказа в мобильном калькуляторе
    287x39. Рекомендованный минимум зоны нажатия — 44 px, и это не
    вкусовщина: ниже растёт доля промахов пальцем. Берём 54 с запасом,
    потому что кнопка последняя в цепочке — промах здесь стоит заявки.
*/
.calc-m2 #makePortret .cs_button_all {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 15px 20px;
    font-size: 17px;
    margin-top: 12px;
}

/*
    Поле телефона — тоже палец. 48 px и шрифт 16 px.

    16 px обязательны: Safari на айфоне сам увеличивает страницу,
    если шрифт в поле меньше 16, и человек проваливается в увеличенную
    вёрстку прямо посреди заполнения.
*/
.calc-m2 #makePortret input.phone__mask {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
}

/*
    Что прячем и почему.

    .order-list — список «Стиль / Размер / Багет / Покрытие / Цена».
    В окне он был нужен: человек уходил со страницы во всплывающее
    окно и переставал видеть свой выбор. Теперь форма стоит прямо под
    теми же четырьмя шагами, и список повторяет их слово в слово.
    Замер: 179 px чистого дубля.

    .calc-m2-hide вешает скрипт: заголовок «Проверьте ваш заказ»
    и строка «Макет отправим на почту или в мессенджер».

    Именно ПРЯЧЕМ, а не удаляем. calc.js продолжает писать в .order-list
    выбранные значения; убери мы её из разметки — он может споткнуться
    на пустом месте, а вместе с ним и отправка заявки.
*/
.calc-m2 #makePortret .order-list,
.calc-m2 .calc-m2-hide {
    display: none !important;
}

/* ============================================================
   ПУНКТ 2. Подпись к полю телефона.

   Текст задаёт скрипт: «Оставьте телефон. Вышлем бесплатный макет
   в мессенджер.»

   Про «в один ряд». В одну строку эта фраза на телефоне не помещается
   физически: 55 знаков при колонке 287 px требуют шрифта около 10 px,
   а это уже нечитаемо. Поэтому жмём иначе — 13 px и плотная строка:
   было 37 px высоты, стало около 32, и фраза занимает две тесные
   строки вместо двух разреженных. Если нужна именно одна строка,
   надо укоротить саму фразу — скажи, и укорочу.
   ============================================================ */
.calc-m2 #makePortret .calc-m2-phonehint {
    font-size: 13px;
    line-height: 1.25;
    margin: 0 0 6px;
    /* по центру — вся форма выровнена одинаково, правка 15.08.2026 */
    text-align: center;
    color: #3D3B37;
}

/* ============================================================
   ПУНКТ 5. Загрузка фото.

   Владелец: «не видно, что тут можно выслать фото, и саму надпись
   сделать в один ряд».

   Делаем область явно похожей на место для файла: пунктирная рамка,
   светлая заливка и значок фотоаппарата слева. Текст скрипт сокращает
   до «Прикрепите фото» — помещается в одну строку.

   ЗНАЧОК ЗАДАН ФОНОМ, а не картинкой внутри блока, и это принципиально.
   calc.js при загрузке делает download.innerText = 'Загружаем фото…',
   то есть стирает всё внутри. Значок в разметке пропал бы при первой же
   загрузке; фон такую замену переживает.

   Высота была 65 px, стало 46.
   ============================================================ */
.calc-m2 #makePortret label.downFileMake {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 12px 10px 40px;

    /*
        Отступы рамки обнуляем. Зазор до подсказки задаём не здесь,
        а у самой подсказки.

        Причина: замер на боевом 15.08.2026 показал, что margin-bottom
        у этой рамки не применяется вовсе — вычисленное значение 0 px,
        его перебивает чужое правило по классу .download. Задавать
        расстояние отсюда бессмысленно, оно молча теряется.
    */
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    border: 1.5px dashed #F0913A;
    border-radius: 10px;
    background-color: #FFF7EC;
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 20px 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0913A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
    cursor: pointer;
}

/*
    Мелкая подсказка под рамкой фото. Владелец 15.08.2026: «нужно мелко
    писать, что можно и потом фото отправить, и вопрос».

    Смысл: снять обязанность искать снимок прямо сейчас. Если фото
    не под рукой, а форма выглядит так, будто без него дальше нельзя,
    человек уходит «вернусь потом» и не возвращается.

    Мелко и серым — это подсказка, а не довод, спорить с кнопкой
    за внимание она не должна.
*/
.calc-m2 #makePortret .calc-m2-photohint {
    /*
        Отступ сверху был -6px — я подтягивал подсказку к рамке, чтобы
        сэкономить место. Владелец 15.08.2026 прислал снимок: «надпись
        под кнопкой фото наехала на кнопку». Строка действительно легла
        на пунктирную рамку.

        Отрицательные отступы тут вообще неуместны: высота рамки зависит
        от текста внутри, а его меняет calc.js при загрузке фото
        («Загружаем фото…», «Фото не загрузилось…» — последняя вообще
        в две строки). Любой минус рано или поздно даст наезд.

        Теперь зазор задаётся здесь, положительным числом. Снизу у рамки
        его задать нельзя — там margin-bottom не применяется вовсе,
        его перебивает чужое правило по классу .download (проверено
        замером: вычисленное значение 0 px).
    */
    margin: 5px 0 10px;
    font-size: 11px;
    line-height: 1.3;
    color: #8a8a8a;

    /*
        По центру. Владелец 15.08.2026, по снимку экрана.

        Логика простая: сама рамка фото над ней — с текстом по центру,
        и подпись к ней должна стоять так же, иначе они читаются как два
        разных блока, а не как «рамка и пояснение к ней».
    */
    text-align: center;
}

/* Фото принято — рамка перестаёт звать, становится спокойной зелёной. */
.calc-m2 #makePortret label.downFileMake.added {
    border-style: solid;
    border-color: #4CAF50;
    background-color: #F1F8F1;
}

/* Не загрузилось — красная, чтобы человек заметил и повторил. */
.calc-m2 #makePortret label.downFileMake.failed {
    border-color: #c0392b;
    background-color: #FDF2F0;
    white-space: normal;
    line-height: 1.3;
}

/* ============================================================
   ПУНКТ 4. Комментарий сворачивается.

   Владелец: «коменты сделать чтобы можно оно открывалось
   и сворачивалось».

   Свёрнутый — одна строка вместо 86 px. Поле при этом остаётся
   в разметке всегда, просто спрятано: calc.js берёт его запросом
   по всей странице, поэтому комментарий доходит до заявки
   и в свёрнутом виде.
   ============================================================ */
/*
    Комментарий — как на компьютере: строчка с плюсом.

    Владелец 15.08.2026, второе уточнение: «добавить комментарии нужно
    сделать меньше, можно просто как на десктопе — саму надпись и плюс».

    До этого была строка с рамкой и уголком, как у четырёх шагов выше.
    Владелец посмотрел и решил, что для необязательного поля это слишком
    много, — и он прав: рамка ставила комментарий вровень с телефоном,
    хотя телефон нужен, а комментарий нет.

    Берём то, что уже работает на компьютере (.wishlink в calc-view.css):
    оранжевая строчка 14 px, впереди плюс. Ничего своего не выдумываем —
    пусть телефон и компьютер выглядят одинаково.

    Высота: было 44 px рамкой, стало 17 строчкой.
*/
.calc-m2 .calc-m2-more {
    margin: 10px 0;
    /* по центру — вся форма выровнена одинаково, правка 15.08.2026 */
    text-align: center;
}

.calc-m2 .calc-m2-more__head {
    display: inline-block;
    width: auto;
    padding: 4px 0;
    border: 0;
    background: none;
    font-size: 14px;
    line-height: 1.2;
    /* по центру — вся форма выровнена одинаково, правка 15.08.2026 */
    text-align: center;
    color: #F0913A;
    cursor: pointer;
}

.calc-m2 .calc-m2-more__body {
    display: none;
    margin-top: 8px;
}

.calc-m2 .calc-m2-more.open .calc-m2-more__body {
    display: block;
}

.calc-m2 .calc-m2-more__body textarea {
    width: 100%;
    font-size: 16px;   /* меньше 16 — айфон увеличивает страницу */
}

/*
    Согласие на обработку данных: мельче и спокойнее.
    Это обязательная строка, но она не должна спорить с кнопкой
    за внимание — читают её единицы, а места занимала 67 px.
*/
.calc-m2 #makePortret .politConfid-check {
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
    margin-top: 10px;
}

/* ============================================================
   ПУНКТ 3. Строка про доставку.

   Владелец: «поменяй на "Доставка по Москве бесплатно" и убери её
   под кнопку». Текст меняет скрипт, он же переставляет строку.

   Под кнопкой ей и место: это довод, а доводы работают там, где
   человек решается, а не в начале блока, где он ещё выбирает размер.
   ============================================================ */
.calc-m2 #makePortret .calc-m2-delivery {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0;
    text-align: center;
    color: #4b4b4b;
}

/* ============================================================
   ПУНКТ 4. Выбор способа связи: WhatsApp, MAX, позвонить.

   Разметка та же, что на компьютере, — класс waybtn и data-w.
   calc.js ищет выбранную кнопку запросом по всей странице, поэтому
   способ связи сам попадает в комментарий заявки.

   На компьютере эти кнопки уже оформлены в calc-view.css, но там
   всё закрыто медиазапросом от 1025 px — на телефоне не применяется,
   поэтому оформляем сами.

   Три кнопки в ряд по колонке 287 px: примерно по 91 px на каждую.
   Значок плюс короткая подпись помещаются, зона нажатия 44 px.
   ============================================================ */
.calc-m2 .calc-m2-waypick {
    display: block;
    margin: 0 0 10px;
}

.calc-m2 .calc-m2-waypick__label {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    margin: 0 0 6px;
    /* по центру — вся форма выровнена одинаково, правка 15.08.2026 */
    text-align: center;
    color: #3D3B37;
}

.calc-m2 .calc-m2-waypick__row {
    display: flex;
    gap: 6px;
}

.calc-m2 .calc-m2-waypick .waybtn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 44px;
    padding: 8px 4px;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    background: #fff;
    font-size: 12px;
    line-height: 1.1;
    color: #3D3B37;
    cursor: pointer;
    white-space: nowrap;
}

.calc-m2 .calc-m2-waypick .waybtn svg {
    flex: 0 0 18px;
}

/* Выбранный канал: обводка вместо заливки — значки остаются читаемыми. */
.calc-m2 .calc-m2-waypick .waybtn.active {
    border-color: #F0913A;
    box-shadow: inset 0 0 0 1px #F0913A;
    background: #FFF7EC;
    font-weight: 600;
}

/* ============================================================
   ПУНКТ 2. Значки «Макет бесплатно» и «Без предоплаты» под ценой.

   Переставляет их скрипт. Здесь только вид: одна строка, по центру,
   сразу под ценой — это тот момент, когда человек видит сумму
   и прикидывает, чем рискует.
   ============================================================ */
.calc-m2 .footer-button-info.calc-m2-underprice {
    margin: 6px 0 0;

    /*
        По центру колонки. Владелец: «под ценой две надписи сделай
        по центру».

        justify-content: center сам по себе не помогал, и вот почему.
        Колонка калькулятора .make__setting-mobil — это flex с
        align-items: flex-end. Дочерний блок из-за этого сжимается
        до ширины содержимого и прижимается к правому краю.
        Замер на боевом 15.08.2026: блок 259 px в колонке 287 px,
        его середина уходила вправо от середины колонки на 14 px.

        Растягиваем блок на всю колонку — тогда центрирование внутри
        него совпадает с центром колонки.
    */
    align-self: stretch;
    width: 100%;
}

/* ============================================================
   ПУНКТ 3. Значки под кнопкой.

   Тексты меняет скрипт: «Макет бесплатно» и «Без предоплаты»
   вместо «Без предоплаты» и «Без спама».

   Ставим их в одну строку рядом, а не столбиком: два коротких
   довода занимают одну строку вместо двух.
   ============================================================ */
.calc-m2 .footer-button-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin-top: 8px;
    font-size: 13px;
}

.calc-m2 .footer-button-info__item {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.calc-m2 .footer-button-info__item-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

/* ============================================================
   ОПИСАНИЕ ПОКРЫТИЙ в выборе. Владелец 15.08.2026: «покрытие лак
   и гель нужно сделать описание, оно есть на десктопе».

   Тексты вставляет скрипт, взяты из calc.js — те самые, что показываются
   в блоке .cover-text. На телефоне тот блок не показывается вовсе,
   поэтому переносим текст прямо в карточки.

   Карточка узкая, 147 px на экране 375, поэтому 11 px и плотная строка.
   Текст длинный — это авторский текст владельца, сокращать его сам
   не стал.
   ============================================================ */
.calc-m2 .calc-m2-covdesc,
.calc-m2-covdesc {
    margin: 6px 0 8px;
    font-size: 11px;
    line-height: 1.35;
    text-align: left;
    color: #5a5a5a;
}

/*
    Старая кнопка «Получить мой макет», которая открывала окно.
    Окна больше нет, открывать нечего. Прячем, а не удаляем —
    к ней может быть привязан обработчик.

    Селектор именно такой: класс calc-m2 ставится НА САМ блок
    .make__setting-mobil, а не на что-то снаружи. Сначала я написал
    «.calc-m2 .make__setting-mobil > button» — это требует, чтобы блок
    лежал ВНУТРИ себя самого, и правило молча не срабатывало. Поймано
    на проверке 15.08.2026: кнопка оставалась видна.
*/
.calc-m2 > button.cs_button_all {
    display: none !important;
}

/* ============================================================
   ОТКЛИК НА НАЖАТИЕ. Добавлено 29.08.2026.

   Повод — замер Метрики за 16–28.08.2026, только телефон:
   калькулятор увидели 522 человека, тронул 71. При этом воронка
   ниже держится хорошо — кто начал, тот примерно в каждом третьем
   случае доходит до заявки. Значит теряем не на шагах и не на форме,
   а на самом первом касании.

   Две причины, обеих в этом файле не было ни одной строкой:

   1. Нажатие не даёт визуального отклика. На компьютере роль отклика
      играет подсветка при наведении мышью. На телефоне наведения
      не существует, а замены — :active — не было. Человек нажимает,
      на экране ничего не меняется, и он не понимает, сработало ли.

   2. touch-action не задан. Браузер на телефоне выжидает около 300 мс:
      вдруг будет второе касание, то есть двойной тап на увеличение.
      Вместе с пунктом 1 это читается как «калькулятор не реагирует».

   Новых цветов НЕ вводим. На сайте уже живут четыре близких оранжевых
   (#FFA133, #ED9228, #FFA722, #F0913A) — пятый добавлять нельзя.
   Поэтому отклик сделан через brightness: работает на любой заливке
   и не зависит от того, каким цветом покрашена конкретная кнопка.

   Переходов (transition) намеренно нет. Отклик на палец должен быть
   мгновенным: любая плавность здесь читается как задержка.
   ============================================================ */
.calc-m2 .make__setting-button.calc-m2-step,
.calc-m2 #makePortret .cs_button_all,
.calc-m2 #makePortret label.downFileMake,
.calc-m2 .calc-m2-more__head,
.calc-m2 .calc-m2-waypick .waybtn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/*
    Само нажатие. Затемняем на 7 % и поджимаем на 1,5 % —
    этого достаточно, чтобы палец почувствовал ответ, и мало,
    чтобы это выглядело как отдельная анимация.

    transform не влияет на поток — соседние блоки не сдвигаются,
    высота калькулятора не меняется.
*/
.calc-m2 .make__setting-button.calc-m2-step:active,
.calc-m2 #makePortret .cs_button_all:active,
.calc-m2 #makePortret label.downFileMake:active,
.calc-m2 .calc-m2-more__head:active,
.calc-m2 .calc-m2-waypick .waybtn:active {
    filter: brightness(0.93);
    transform: scale(0.985);
}

/*
    Клавиатура. :focus-visible, а не :focus — рамка появится
    только при переходе табом и не будет вылезать при обычном
    нажатии пальцем или мышью.

    Цвет рамки #ED9228 — уже существующий на сайте
    (переменная --color-primary), новый не заводим.
*/
.calc-m2 .make__setting-button.calc-m2-step:focus-visible,
.calc-m2 #makePortret .cs_button_all:focus-visible,
.calc-m2 #makePortret label.downFileMake:focus-visible,
.calc-m2 .calc-m2-more__head:focus-visible,
.calc-m2 .calc-m2-waypick .waybtn:focus-visible,
.calc-m2 #makePortret input.phone__mask:focus-visible {
    outline: 2px solid #ED9228;
    outline-offset: 2px;
}

}

/*
    ПОДПИСЬ НАД ШАГАМИ, 22.09.2026 (pages/sections/calc.php, .calc-m2-caption).
    Как на компьютере: серый #858585, 14px. Отступ слева 18px — ровно
    под текстом шага (рамка 2px + внутренний отступ 16px).
*/
.calc-m2 .calc-m2-caption {
    align-self: stretch;           /* блок шагов — flex, иначе подпись уезжает в центр */
    margin: 0 0 8px 18px;
    color: #858585;
    font: 500 14px/1.3 Montserrat, Arial, sans-serif;
    text-align: left;
}