/*
 * mf-mobile.css - мобильный слой квиз-лендинга mebel-family.online (MF309377).
 *
 * Работает только на ширине <=639px. Десктоп отдан родной тильдовской вёрстке
 * без единой правки. Ничего не удаляет: фон-фото, заголовок с гарантией,
 * фиксированная цена, скидка, 3D-проект, рассрочка, блок основателя и все пять
 * карточек подарков остаются на странице - меняются плотность и раскладка.
 *
 * Основание - воронка 14-20.09: 526 визитов, 93 старта квиза, 47 дошли до
 * экрана контактов, заявку отправили 2, с мобильных ноль.
 *
 * Что делает:
 *   - экран контактов: короткий заголовок, поле телефона с рамкой, заметная
 *     ошибка согласия;
 *   - первый экран: иконки ботов уезжают в нижний закреп, заголовку добавлен
 *     воздух, второй подзаголовок переносится к квизу, преимущества - сеткой 2x2;
 *   - блок подарков: заголовок неподвижен, карточки едут слайдером;
 *   - нижний закреп: расчёт и оба бота на любом экране.
 *
 * Обкатано на копиях /preview/mobile-v2 ... v7.
 */

@media (max-width: 639px) {
  /* Тильдовские зеро-блоки любят вылезать за экран после переупорядочивания. */
  #allrecords, .t-records { overflow-x: hidden; }

  /* --- квиз t835: плотнее, но без потери текста -------------------------- */
  .t835 .t-container { box-sizing: border-box; width: 100%; max-width: 100%; padding: 0 12px !important; }
  .t835__col { box-sizing: border-box; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .t835__quiz { box-sizing: border-box; width: 100%; max-width: 100%; padding: 0 !important; border-width: 3px !important; }
  .t835__quiz-description-wrapper { padding: 14px 14px 0 !important; }
  .t835__quiz-form-wrapper { padding: 14px !important; }

  .t835 .t-input-title { font-size: 17px !important; line-height: 1.25 !important; margin-bottom: 8px !important; }
  .t835 .t-input-subtitle { font-size: 13px !important; line-height: 1.35 !important; margin-bottom: 12px !important; }
  .t835 .t-input-group { margin-bottom: 8px !important; }
  .t835 .t-input-group_ph .t-input-title { font-size: 16px !important; line-height: 1.4 !important; }

  /* Варианты ответа - сетка 2 в ряд, последний нечётный тянется на всю строку. */
  .t835 .t-img-select__container { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; }
  .t835 .t-img-select__control { width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important; }
  .t835 .t-img-select__indicator { width: 100% !important; height: 102px !important; padding-bottom: 0 !important; }
  .t835 .t-img-select__text { font-size: 13px !important; line-height: 1.2 !important; padding: 6px 4px !important; }
  .t835 .t-img-select__control:last-child:nth-child(odd) { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
  .t835 .t-img-select__control:last-child:nth-child(odd) .t-img-select__indicator { width: 58px !important; height: 48px !important; flex-shrink: 0; }

  /* Кнопки и поля - палец, а не пиксель: минимум 44-52px. */
  .t835__btn-wrapper { gap: 10px; }
  .t835__btn-wrapper .t-btn { min-height: 46px; padding: 12px 16px; }
  .t835 .t-form__submit .t-submit { width: 100%; min-height: 52px; }
  .t835 .t-checkbox__control { display: flex; align-items: center; min-height: 44px; color: #444 !important; font-size: 13px; line-height: 1.35; }
  .t835 .t-checkbox__control a { color: #555 !important; text-decoration: underline; }
  .t835 .t-checkbox__indicator { flex-shrink: 0; }

  /* Прогресс и номер шага. */
  .t835__progressbar { left: 0; right: 0; width: auto; max-width: 100%; margin: 10px 0 0; }
  .t835__progress { background-color: #ffd900 !important; }
  .t835__result-title { margin: 0 !important; padding: 0 0 16px !important; font: 600 19px/1.35 'TildaSans', Arial, sans-serif !important; }
}

/* --- первый экран: разгрузка по разбору Алексея -------------------------- */
@media (max-width: 639px) {
  /* Иконки Telegram/MAX уезжают из шапки в нижний закреп. */
  #rec611877181 .mf-header-messengers,
  #rec683849369 .mf-header-messengers { display: none !important; }

  /* Заголовок опускаем: сверху нужен воздух, а не плотная строка под шапкой. */
  .tn-elem__6118771811663003461271,
  .tn-elem__6838493691663003461271 { top: 160px !important; }

  /* Подзаголовок про фиксированную цену идёт следом. */
  .tn-elem__6118771811663004243914,
  .tn-elem__6838493691663004243914 { top: 315px !important; }

  /* Второй подзаголовок («пройдите простой тест... 3 варианта, скидка, 3D»)
   * из первого экрана убираем - mf-preview.js показывает его перед квизом. */
  .tn-elem__6118771811665324936091,
  .tn-elem__6838493691665324936091 { display: none !important; }

  /* Кнопка поднимается на освободившееся место. */
  .tn-elem__6118771811663005383386,
  .tn-elem__6118771811671131045227,
  .tn-elem__6838493691663005383386,
  .tn-elem__6838493691671131045227 { top: 415px !important; }

  /* Четыре преимущества: были колонкой в строку, стали сеткой 2x2 и мельче. */
  .tn-elem__6118771811663004497311 { top: 535px !important; left: 42px !important; }
  .tn-elem__6118771811663004587427 { top: 537px !important; left: 80px !important; width: 108px !important; }
  .tn-elem__6118771811663004658321 { top: 535px !important; left: 202px !important; }
  .tn-elem__6118771811663004658331 { top: 537px !important; left: 240px !important; width: 108px !important; }
  .tn-elem__6118771811663004617088 { top: 621px !important; left: 42px !important; }
  .tn-elem__6118771811663004617097 { top: 623px !important; left: 80px !important; width: 108px !important; }
  .tn-elem__6118771811663004717926 { top: 621px !important; left: 202px !important; }
  .tn-elem__6118771811663004717935 { top: 623px !important; left: 240px !important; width: 108px !important; }

  /* Галочки: 45px в две колонки смотрятся тяжело, уменьшаем сам элемент. */
  .tn-elem__6118771811663004497311,
  .tn-elem__6118771811663004658321,
  .tn-elem__6118771811663004617088,
  .tn-elem__6118771811663004717926 { width: 32px !important; height: 32px !important; }

  #rec611877181 .tn-elem[data-elem-id="1663004497311"] .tn-atom,
  #rec611877181 .tn-elem[data-elem-id="1663004658321"] .tn-atom,
  #rec611877181 .tn-elem[data-elem-id="1663004617088"] .tn-atom,
  #rec611877181 .tn-elem[data-elem-id="1663004717926"] .tn-atom { width: 32px !important; height: 32px !important; background-size: contain !important; }

  #rec611877181 .tn-elem[data-elem-id="1663004587427"] .tn-atom,
  #rec611877181 .tn-elem[data-elem-id="1663004658331"] .tn-atom,
  #rec611877181 .tn-elem[data-elem-id="1663004617097"] .tn-atom,
  #rec611877181 .tn-elem[data-elem-id="1663004717935"] .tn-atom { font-size: 13px !important; line-height: 1.25 !important; }

  /* После сетки под буллетами оставался пустой провал почти в 250px. */
  #rec611877181 .t396__artboard,
  #rec611877181 .t396__carrier,
  #rec611877181 .t396__filter { height: 705px !important; }
}

/* --- блок подарков: заголовок стоит, карточки едут слайдером -------------- */
@media (max-width: 639px) {
  #rec611870367 .t396__artboard,
  #rec611870367 .t396__carrier,
  #rec611870367 .t396__filter,
  #rec683849373 .t396__artboard,
  #rec683849373 .t396__carrier,
  #rec683849373 .t396__filter { height: 340px !important; }
  #rec611870367 .t396__artboard,
  #rec683849373 .t396__artboard { overflow: hidden; }

  /* Карточки выстроены в ряд; сдвигает их mf-preview.js, поэтому заголовок
   * остаётся на месте - именно это было не так в прошлой версии. */
  .mf-mp-card { transition: transform .45s ease; }

  .tn-elem__6118703671663008382168, .tn-elem__6838493731663008382168 { top: 176px !important; left: 14px !important; }
  .tn-elem__6118703671671126190137, .tn-elem__6838493731671126190137 { top: 205px !important; left: 21px !important; }
  .tn-elem__6118703671663008540611, .tn-elem__6838493731663008540611 { top: 237px !important; left: 50px !important; }
  .tn-elem__6118703671663014220141, .tn-elem__6838493731663014220141 { top: 176px !important; left: 414px !important; }
  .tn-elem__6118703671671126296687, .tn-elem__6838493731671126296687 { top: 205px !important; left: 421px !important; }
  .tn-elem__6118703671663008668962, .tn-elem__6838493731663008668962 { top: 237px !important; left: 450px !important; }
  .tn-elem__6118703671663098535244, .tn-elem__6838493731663098535244 { top: 176px !important; left: 814px !important; }
  .tn-elem__6118703671671126259995, .tn-elem__6838493731671126259995 { top: 205px !important; left: 821px !important; }
  .tn-elem__6118703671663098535248, .tn-elem__6838493731663098535248 { top: 237px !important; left: 850px !important; }
  .tn-elem__6118703671663098535237, .tn-elem__6838493731663098535237 { top: 176px !important; left: 1214px !important; }
  .tn-elem__6118703671671126275556, .tn-elem__6838493731671126275556 { top: 205px !important; left: 1221px !important; }
  .tn-elem__6118703671663098535250, .tn-elem__6838493731663098535250 { top: 237px !important; left: 1250px !important; }
  .tn-elem__6118703671663014295481, .tn-elem__6838493731663014295481 { top: 176px !important; left: 1614px !important; }
  .tn-elem__6118703671671126267966, .tn-elem__6838493731671126267966 { top: 205px !important; left: 1621px !important; }
  .tn-elem__6118703671663008673346, .tn-elem__6838493731663008673346 { top: 237px !important; left: 1650px !important; }

  /* Точки под лентой - сколько карточек и где мы сейчас. */
  .mf-mp-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 7px; z-index: 5; }
  .mf-mp-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .3); transition: background .3s ease; }
  .mf-mp-dots span.is-on { background: #ffd900; }
}

/* --- экран контактов: здесь теряли всех, кто дошёл ----------------------- */
@media (max-width: 639px) {
  /* Поле телефона выглядело неактивным: серый плейсхолдер и тонкая линия.
   * Рамку вешаем на обёртку, внутри которой живут флаг, +7 и сам input. */
  .t835 .t-input-phonemask__wrap.t-input_bbonly {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 14px !important;
    border: 2px solid #1a1d22 !important;  /* t-input_bbonly держит свой border */
    border-radius: 12px !important;
    background: #fff !important;
  }
  .t835 .t-input-phonemask__wrap.t-input_bbonly:focus-within { border-color: #f0c000 !important; box-shadow: 0 0 0 3px rgba(255, 217, 0, .35); }
  /* Пустоты вокруг поля: группа занимала 140px при поле в 60px. */
  .t835 .t-input-group_ph { margin-bottom: 4px !important; }
  .t835 .t-form__submit { margin-top: 14px !important; }
  .t835 .t-input-phonemask__select { position: static; margin-right: 6px; }
  .t835 input[type="tel"],
  .t835 input[type="text"],
  .t835 input[type="email"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    padding: 12px 4px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 17px !important;  /* меньше 16px - iOS зумит страницу на фокусе */
    color: #1a1d22 !important;
    text-align: left !important;
  }
  .t835 input[type="tel"]:focus { outline: none; }

  /* Согласие заметнее: это единственная причина, по которой кнопка молчит. */
  .t835 .t-checkbox__control { padding: 8px 0; font-size: 14px !important; }
  .mf-mp-error,
  .t835 .mf-form-error {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fdecec;
    color: #b42318;
    font: 14px/1.4 'TildaSans', Arial, sans-serif;
    text-align: left;
  }
}

/* --- номер шага над вопросом (ставит mf-preview.js) ---------------------- */
.mf-mp-step-label { display: none; }
@media (max-width: 639px) {
  .mf-mp-step-label { display: block; padding: 0 0 12px; font: 600 12px/1.3 'TildaSans', Arial, sans-serif; color: #666; }
}

/* --- нижний закреп: расчёт и боты всегда под рукой (ставит mf-preview.js) --
 * Иконки Telegram/MAX убраны из шапки и из шагов квиза, их место здесь. */
.mf-mp-bar { display: none; }
@media (max-width: 639px) {
  .mf-mp-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(26, 29, 34, .96);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .3);
  }
  .mf-mp-bar__cta {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 16px;
    border-radius: 100px;
    background: #ffd900;
    color: #1a1d22;
    font: 700 16px/1.2 'TildaSans', Arial, sans-serif;
    text-decoration: none;
  }
  /* Белые кружки терялись на тёмной панели - красим в цвета самих каналов,
   * иконку оставляем в белом кружке, чтобы она читалась поверх заливки. */
  .mf-mp-bar__msgr {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    text-decoration: none;
  }
  .mf-mp-bar__msgr_telegram { background: #229ED9; }
  .mf-mp-bar__msgr_max { background: linear-gradient(135deg, #8A4BFF, #2F6BFF); }
  .mf-mp-bar__msgr img {
    width: 30px;
    height: 30px;
    padding: 4px;
    border-radius: 50%;
    background: #fff;
  }

  /* Один короткий пульс вскоре после загрузки: поймать взгляд и замолчать.
   * Во время прохождения квиза больше не повторяется, чтобы не сбивать. */
  .mf-mp-bar__msgr.is-pulse { animation: mf-mp-pulse 1.1s ease-out 2; }
  @keyframes mf-mp-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 217, 0, .6); transform: scale(1); }
    45% { box-shadow: 0 0 0 10px rgba(255, 217, 0, 0); transform: scale(1.07); }
    100% { box-shadow: 0 0 0 0 rgba(255, 217, 0, 0); transform: scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mf-mp-bar__msgr.is-pulse { animation: none; }
  }
  .mf-mp-bar a:active { opacity: .85; }
  /* Чтобы закреп не накрывал футер и политику. */
  body { padding-bottom: 76px; }
}


/* Подзаголовок, перенесённый из первого экрана на место перед квизом. */
.mf-mp-lead { display: none; }
@media (max-width: 639px) {
  .mf-mp-lead {
    display: block;
    margin: 0;
    padding: 22px 18px 6px;
    background: #1a1d22;
    color: #fff;
    font: 15px/1.45 'TildaSans', Arial, sans-serif;
    text-align: center;
  }
}

/* Когда кнопка расчёта в закрепе спрятана, иконки ботов занимают всю ширину. */
@media (max-width: 639px) {
  .mf-mp-bar__cta[hidden] { display: none; }
  .mf-mp-bar:has(.mf-mp-bar__cta[hidden]) .mf-mp-bar__msgr { flex: 1 1 auto; width: auto; border-radius: 100px; gap: 8px; }
  .mf-mp-bar:has(.mf-mp-bar__cta[hidden]) .mf-mp-bar__msgr::after { content: attr(aria-label); font: 600 15px/1.2 'TildaSans', Arial, sans-serif; color: #fff; }
}