/* Экран заявки — телефон.
   ═══════════════════════════════════════════════════════════════════════
   В макете это экран приложения, а не страница сайта: заголовок, строка о
   сроке ответа, поля подряд с шагом 14, согласие, оранжевая кнопка и пара
   запасных способов связаться. У нас форма приходила белой карточкой с
   рамкой и внутренними полями по 26 px, между полями было по 40 — на трёх
   полях это лишние полтора экрана пустоты, а под карточкой оставался
   пустой хвост до нижней панели.

   Правила только для телефона и только для этой страницы: у неё класс тела
   ie-app-screen (ставит callback/index.php). Ни форма на широком экране, ни
   та же форма в карточке товара не задеты. */

.ie-request-head{display:none}

@media (max-width:767.98px){

  .ie-request-head{
    display:block;
    /* Ось экрана одна и равна макетной — 16 от края. Контейнерные отступы
       темы (15 у .container, 16 у формы, 2 у fieldset) давали полям 33 и
       ломали столбец; они сняты ниже, у карточки формы. */
    padding:16px 16px 0;
  }
  .ie-request-title{
    font-weight:800;font-size:1.36rem;line-height:1.25;color:var(--ie-navy);
  }
  .ie-request-lead{
    /* Шаг 14 — единый вертикальный шаг макета между всеми блоками экрана. */
    margin:14px 0 0;font-size:.9rem;line-height:1.5;color:#5a6672;
  }

  /* Карточка формы: рамку и фон снимаем, поля идут прямо по странице.
     Боковой отступ один — 16, как у контейнера экрана в макете: отступы
     темы снаружи формы обнуляем, иначе они складываются (15+16+2 = 33) и
     поля стоят правее заголовка и чекбокса. Снизу 26 — тоже макет. */
  body.ie-app-screen .margin2{margin:0}
  body.ie-app-screen .margin2 > .container,
  body.ie-app-screen .margin2 .container{padding-left:0;padding-right:0}
  body.ie-app-screen .form.callbackForm{
    padding:14px 16px 26px;border:0;border-radius:0;box-shadow:none;background:none;
  }
  body.ie-app-screen .form.callbackForm fieldset{margin-left:0;margin-right:0}
  body.ie-app-screen .form.callbackForm .container{padding:0}
  /* Свой заголовок формы и её подпись не нужны: они стоят выше. */
  body.ie-app-screen .form.callbackForm legend,
  body.ie-app-screen .form.callbackForm .callbackForm-description,
  body.ie-app-screen .form.callbackForm .callbackForm-picture{display:none}

  /* Шаг между полями 14 вместо 40. Тема считает поля строками сетки с
     собственными отступами — задаём шаг явно, а старые отступы гасим. */
  body.ie-app-screen .form.callbackForm .form-group-row,
  body.ie-app-screen .form.callbackForm .row{
    display:flex;flex-direction:column;gap:14px;margin:0;
  }
  /* Одна вертикальная ось. Тема даёт каждому вопросу боковой отступ 15px,
     а согласие и кнопки живут вне вопросов — без него. Поля оказывались
     правее чекбокса и кнопок, и столбец читался как два. В макете весь
     экран стоит по одному левому краю — снимаем отступ темы. */
  body.ie-app-screen .form.callbackForm .form-group{margin:0;padding-left:0;padding-right:0}
  body.ie-app-screen .form.callbackForm [class*="col-"]{
    width:100%;max-width:none;flex:none;padding:0;
  }
  body.ie-app-screen .form.callbackForm input[type="text"],
  body.ie-app-screen .form.callbackForm input[type="email"],
  body.ie-app-screen .form.callbackForm input[type="tel"],
  body.ie-app-screen .form.callbackForm textarea{
    min-height:50px;border-radius:12px;
  }

  /* Порядок в макете: поля, согласие, кнопка. В разметке кнопка лежит
     внутри той же колонки, что и поля, а согласие — отдельным блоком следом,
     поэтому кнопка оказывалась ВЫШЕ согласия: человек видел действие раньше
     условия. Раскрываем обёртки в поток (display:contents) и раскладываем
     порядком — разметку компонента не трогаем. */
  body.ie-app-screen .form.callbackForm fieldset{display:flex;flex-direction:column;gap:0}
  body.ie-app-screen .form.callbackForm fieldset > .row,
  body.ie-app-screen .form.callbackForm fieldset > .row > [class*="col-"]{display:contents}
  body.ie-app-screen .form.callbackForm .form-group-row{order:1}
  body.ie-app-screen .form.callbackForm input[type="submit"],
  body.ie-app-screen .form.callbackForm .btn{order:3}
  body.ie-app-screen .form.callbackForm fieldset > [class*="col-"]{order:4}
  /* Шаг макета вешаем на саму строку согласия: её обёртка .form-info
     раскрыта общим слоем в display:contents (ie-custom.css) — коробки у
     неё нет, и отступы на ней не существуют. Нижний отступ общего слоя
     гасим, иначе он складывается с отступом кнопки (12+14 вместо 14). */
  body.ie-app-screen .form.callbackForm .ie-form-consent{margin-top:14px;margin-bottom:0}
  body.ie-app-screen .form.callbackForm .ie-form-consent + .ie-form-consent{margin-top:10px}
  body.ie-app-screen .form.callbackForm input[type="submit"]{
    width:100%;min-height:52px;margin-top:14px;border-radius:13px;
    font-weight:800;font-size:1rem;
  }

  /* Запасной путь: две кнопки в строку, как в макете. */
  body.ie-app-screen .ie-form-fallback{
    display:flex;gap:9px;margin-top:14px;
  }
  body.ie-app-screen .ie-form-fallback a.ie-form-fallback-item{
    flex:1;min-height:48px;
    display:inline-flex;align-items:center;justify-content:center;
    border:1.5px solid var(--ie-border-soft,#e7e1da);border-radius:12px;
    font-weight:800;font-size:.88rem;color:var(--ie-navy);text-decoration:none;
  }

  /* Опросный лист — второе, необязательное действие: тихой ссылкой снизу. */
  body.ie-app-screen .questionnaire-block{margin-top:14px;text-align:center}

  /* Хвост пустоты под формой: страница кончается формой и правовой строкой. */
  body.ie-app-screen main > div:last-child:empty{display:none}
  body.ie-app-screen .form-info{font-size:.82rem;line-height:1.45}
}

/* ─── тема обращения и задача ────────────────────────────────────────────
   Оба поля заведены инструментом local/tools/callback_fields.php и живут в
   той же форме, что стоит в карточке товара и на странице «О компании».
   Там они не нужны: короткая форма «перезвоните мне» не место для выбора
   темы. Поэтому по умолчанию их нет вовсе, а показываются они только на
   экране заявки и только на телефоне — ровно там, где нарисованы в макете. */

.form-group.IE_TOPIC,
.form-group.IE_TASK{display:none}

@media (max-width:767.98px){
  body.ie-app-screen .form-group.IE_TOPIC,
  body.ie-app-screen .form-group.IE_TASK{display:block}

  /* Подпись над таблетками не нужна: сами таблетки и есть вопрос. */
  body.ie-app-screen .form-group.IE_TOPIC > label{display:none}

  body.ie-app-screen .radio-group{
    display:flex;flex-wrap:wrap;gap:8px;
  }
  /* Таблетка. Кружок переключателя убираем: выбранную тему показывает сама
     таблетка — тёмная, как в макете. Скрываем не через display у input,
     иначе он перестаёт получать нажатие и выбор с клавиатуры. */
  body.ie-app-screen .radio-emulator{
    position:relative;margin:0;
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;padding:0 16px;
    border:1px solid var(--ie-border-soft,#e7e1da);border-radius:999px;
    background:#fff;cursor:pointer;
    transition:background .15s ease,border-color .15s ease,color .15s ease;
  }
  body.ie-app-screen .radio-emulator .radio-emulator__circle{display:none}
  body.ie-app-screen .radio-emulator input[type="radio"]{
    position:absolute;inset:0;width:100%;height:100%;
    margin:0;opacity:0;cursor:pointer;
  }
  body.ie-app-screen .radio-emulator__title{
    font-weight:700;font-size:.86rem;line-height:1;color:var(--ie-navy);
  }
  body.ie-app-screen .radio-emulator:has(input:checked){
    background:var(--ie-navy);border-color:var(--ie-navy);
  }
  body.ie-app-screen .radio-emulator:has(input:checked) .radio-emulator__title{color:#fff}
  body.ie-app-screen .radio-emulator:has(input:focus-visible){
    outline:2px solid var(--ie-orange);outline-offset:2px;
  }

  body.ie-app-screen .form-group.IE_TASK > label{display:none}
  body.ie-app-screen .form-group.IE_TASK textarea{
    width:100%;min-height:110px;padding:12px 14px;
    border:1px solid var(--ie-border-soft,#e7e1da);border-radius:12px;
    font-size:.94rem;line-height:1.45;resize:none;
  }

  /* Согласие на рассылку — необязательное и в макете его нет. Оставляем,
     но последней строкой: между главной кнопкой и запасными способами
     связаться ему не место. */
  body.ie-app-screen .form.callbackForm .ie-form-consent.ie-consent-optional{
    order:6;margin-top:14px;font-size:.8rem;
  }
}

@media (max-width:767.98px){
  /* Порядок хвоста: главная кнопка, сразу под ней запасные способы связаться
     (в макете это «Позвонить» и мессенджер), и только потом необязательное —
     опросный лист и согласие на рассылку. Раньше опросный лист вклинивался
     между кнопкой и запасными, разрывая одно действие на три. */
  body.ie-app-screen .form.callbackForm .ie-form-fallback{order:4}
  body.ie-app-screen .form.callbackForm .questionnaire-block{order:5;margin-top:14px}
  body.ie-app-screen .form.callbackForm fieldset > [class*="col-"]{order:5}
}

/* ─── один контакт вместо двух ──────────────────────────────────────────
   Поле IE_CONTACT заведено для экрана заявки: в макете здесь одна строка
   «Телефон или e-mail». В остальных местах формы (карточка товара, «О
   компании») и на широком экране остаются прежние два поля, поэтому общее
   поле по умолчанию скрыто, а почта и телефон — нет. */

.form-group.IE_CONTACT{display:none}

@media (max-width:767.98px){
  body.ie-app-screen .form-group.IE_CONTACT{display:block}
  body.ie-app-screen .form-group.SIMPLE_QUESTION_658,
  body.ie-app-screen .form-group.SIMPLE_QUESTION_342{display:none}

  /* Опросный лист и согласие на рассылку — необязательные добавки, которых
     в макете нет; на экране, который должен умещаться целиком, они уводят
     главное действие за сгиб. Согласие на рассылку от этого не пропадает:
     оно остаётся на широком экране и в других формах. */
  body.ie-app-screen .form.callbackForm .questionnaire-block,
  body.ie-app-screen .form.callbackForm .ie-form-consent.ie-consent-optional{display:none}
}

/* ─── размеры по макету ──────────────────────────────────────────────────
   Экран собран из прототипа и обмерян (D:	mp\claude\макет_заявка.html):
   поле 52, таблетка 38 при кегле 13/700, поле задачи 136, кнопка 52 со
   скруглением 13, запасные кнопки 48. Здесь те же числа, кроме высоты
   таблетки: у нас 44 — это наш порог цели нажатия (M-9.3), и шесть
   пикселей глазом не видны, а промах пальцем виден. */

@media (max-width:767.98px){
  body.ie-app-screen .form.callbackForm input[type="text"],
  body.ie-app-screen .form.callbackForm input[type="email"],
  body.ie-app-screen .form.callbackForm input[type="tel"]{
    min-height:50px;font-size:.94rem;
  }
  /* Звёздочка обязательности: в макете её нет, а «Имя» и контакт и так
     единственные поля, без которых заявку не отправить — об этом скажет
     проверка при отправке, а не звёздочка в спокойном состоянии. */
  body.ie-app-screen .form.callbackForm .required-field > label::after,
  body.ie-app-screen .form.callbackForm label .required,
  body.ie-app-screen .form.callbackForm .form-group-placeholder .required{display:none}

  body.ie-app-screen .radio-emulator{padding:0 14px}
  body.ie-app-screen .radio-emulator__title{font-size:.81rem}

  body.ie-app-screen .form-group.IE_TASK textarea{min-height:110px;font-size:.88rem}

  /* Согласие: одна мысль в две строки мелким кеглем, ссылка оранжевая —
     как в макете. Текст оставляем свой: он называет оба документа, а не
     только политику, и это не украшение, а основание обработки. */
  body.ie-app-screen .form.callbackForm .ie-form-consent{
    align-items:flex-start;gap:10px;font-size:.81rem;line-height:1.4;color:#7a7a7a;
  }
  body.ie-app-screen .form.callbackForm .ie-form-consent a{
    color:var(--ie-orange);text-decoration:none;
  }
  body.ie-app-screen .form.callbackForm .ie-form-consent input[type="checkbox"]{
    width:20px;height:20px;margin-top:1px;accent-color:var(--ie-orange);
  }

  body.ie-app-screen .ie-form-fallback a.ie-form-fallback-item{
    min-height:48px;font-size:.87rem;
  }
}

@media (max-width:767.98px){
  /* Таблетки — продолжение того же столбца полей, а не отдельный блок:
     шаг между ними тот же 14, что и между строками ввода. */
  body.ie-app-screen .form-group.IE_TOPIC,
  body.ie-app-screen .form-group.IE_TASK{margin:0}
  body.ie-app-screen .form.callbackForm .form-group-row{gap:14px}
}

@media (max-width:767.98px){
  /* Строка согласия — тоже цель нажатия: по ней ставят галочку, и в две
     строки мелким кеглем она выходила 33 px. Двенадцать недостающих
     пикселей забраны у поля задачи, а не добавлены к экрану: экран должен
     остаться одним. */
  body.ie-app-screen .form.callbackForm .ie-form-consent{min-height:44px}
}

@media (max-width:767.98px){
  /* Строка согласия — тоже цель нажатия: по ней ставят галочку, и в две
     строки мелким кеглем она выходила 33 px. */
  body.ie-app-screen .form.callbackForm .ie-form-consent{min-height:44px;align-items:center}
}

@media (max-width:767.98px){
  /* Галка как в шаблоне: 20 px, скругление 5, оранжевая заливка с белой
     птичкой, стоит на первой строке текста, а не плавает по центру. */
  body.ie-app-screen .form.callbackForm .ie-form-consent{align-items:flex-start}
  body.ie-app-screen .form.callbackForm .ie-form-consent input[type="checkbox"]{
    appearance:none;-webkit-appearance:none;
    width:20px;height:20px;margin:0;flex:none;
    border:1.5px solid var(--ie-border-soft,#e7e1da);border-radius:5px;
    background:#fff;cursor:pointer;position:relative;
  }
  body.ie-app-screen .form.callbackForm .ie-form-consent input[type="checkbox"]:checked{
    background:var(--ie-orange);border-color:var(--ie-orange);
  }
  body.ie-app-screen .form.callbackForm .ie-form-consent input[type="checkbox"]:checked::after{
    content:"";position:absolute;left:6px;top:2.5px;
    width:5px;height:10px;
    border:solid #fff;border-width:0 2px 2px 0;
    transform:rotate(45deg);
  }
}

/* ─── короткие экраны ────────────────────────────────────────────────────
   «Один экран без прокрутки» обязан выполняться не только на 844 px:
   у реальных телефонов видимая высота меньше — строка браузера съедает
   сотню пикселей. На коротком окне ужимаем воздух, а не выкидываем поля:
   заголовок, шаги и поле задачи становятся компактнее. */
@media (max-width:767.98px) and (max-height:799px){
  .ie-request-head{padding-top:10px}
  .ie-request-title{font-size:1.22rem}
  .ie-request-lead{margin-top:4px;font-size:.84rem}
  body.ie-app-screen .form.callbackForm{padding-top:10px;padding-bottom:12px}
  body.ie-app-screen .form.callbackForm .form-group-row{gap:10px}
  body.ie-app-screen .form.callbackForm input[type="text"],
  body.ie-app-screen .form.callbackForm input[type="email"],
  body.ie-app-screen .form.callbackForm input[type="tel"]{min-height:46px}
  body.ie-app-screen .radio-emulator{min-height:40px}
  body.ie-app-screen .form-group.IE_TASK textarea{min-height:72px}
  body.ie-app-screen .form.callbackForm .ie-form-consent{margin-top:10px}
  body.ie-app-screen .form.callbackForm input[type="submit"]{min-height:48px;margin-top:10px}
  body.ie-app-screen .ie-form-fallback{margin-top:10px}
  body.ie-app-screen .ie-form-fallback a.ie-form-fallback-item{min-height:44px}
}

/* Совсем короткое окно (бюджетный Android, 640): подзаголовок — первое,
   чем можно пожертвовать, он подтверждение, а не условие. */
@media (max-width:767.98px) and (max-height:679px){
  .ie-request-lead{display:none}
  .ie-request-head{padding-top:8px}
  body.ie-app-screen .form.callbackForm .form-group-row{gap:8px}
  body.ie-app-screen .form-group.IE_TASK textarea{min-height:64px}
  body.ie-app-screen .radio-emulator{min-height:38px}
}