/*
   Поля «плюс-минус» в «Дополнительных услугах» калькулятора переезда:
   подпись единицы («часа») налезала на введённое число.

   Замечание заказчика от 15.08.2026: «Внутри есть поля, в которых регулируются
   часы, и на узких экранах часы накладываются на текст — нужно сделать так,
   чтобы всё было видно на всех экранах».

   ПРИЧИНА (замерено в браузере, а не на глаз). Вёрстка поля такая: «−» и «+»
   вместе с подписью «часа» лежат ПОВЕРХ поля ввода — они спозиционированы
   абсолютно (site.css: `.plusminus .input-group > div { position: absolute }`),
   а само число прижато к 40 % ширины поля (`input { padding-left: 40% }`).
   Пока поле широкое, 40 % — это далеко слева от «часа», и всё в порядке. Но
   ширина поля зависит от колонки:

       экран 1440 и 1200 → поле 183 px → число на 73 px, «часа» с 106 px — норма;
       экран 992         → поле 150 px → число на 60 px, «часа» с  73 px — впритык;
       экран 768         → поле 106 px → число на 42 px, «часа» с  29 px — НАЛОЖЕНИЕ;
       телефон 320       → поле 120 px → число на 48 px, «часа» с  43 px — НАЛОЖЕНИЕ.

   То есть беда не только на телефоне: на планшете 768–991 px колонка вшестеро
   уже, и там «0» и «часа» печатаются друг на друге (видно на снимке). А при
   двузначном значении (услуги считаются до 50 часов) наложение начинается уже
   с 992 px.

   ЛЕЧЕНИЕ. Убираем процентный отступ — он и есть причина: 40 % от узкого поля
   ничего не гарантируют. Вместо него поле получает ЯВНЫЕ отступы под «−» слева
   и под «часа» с «+» справа, а число ставится по центру того, что осталось.
   Тогда наложение невозможно ни при какой ширине: место под подписи вычтено
   заранее. На широких экранах число при этом остаётся ровно там же, где стояло
   (замерено: было 73 px, стало 75) — вид десктопа не меняется.

   Отдельный файл, а не site.css: тот минифицирован и правится руками, а
   compiled-версия рядом (calc-plusminus.css) — правите одно, правьте и второе.
*/
/* Ширины оправы, из которых собраны отступы ниже.
   Считаны с живой вёрстки: значок «−»/«+» — 14 px, подпись «часа» — 33 px при
   шрифте 14 px и 26 px при 12 px. */
#calc-new .calc #gruz .row .form-group .plusminus .input-group {
  /* Число — по центру свободного места между «−» и «часа».
       input.form-control, а не просто input: селектор должен быть специфичнее
       правила из site.css (`… .input-group input { padding-left: 40% }`),
       иначе процентный отступ никуда не денется. */
}
#calc-new .calc #gruz .row .form-group .plusminus .input-group input.form-control {
  /* 15 (отступ) + 14 (значок) + 15 (воздух) = 44 */
  padding-left: 44px;
  /* 15 (отступ) + 14 (значок «+») + 15 (зазор) + 33 («часа») = 77 */
  padding-right: 77px;
  text-align: center;
}
/* Узкие колонки — всё, что ниже 1200 px.
   Порог не с потолка: на 1200 px и шире поле 183 px, и отступов выше хватает с
   запасом (свободного места 62 px). На 1199 px и ниже колонка калькулятора
   сжимается до 150 px и меньше, и той же оправе места уже нет — ужимаем её
   саму: кнопки ближе к краям, подпись мельче и ближе к «+».

   Проверено по всем ходовым ширинам: свободного места под число остаётся
   47 px (992), 22 px (768), 36 px (телефон 320), 64 px (телефон 375). Даже
   максимальные «50 часов» занимают 16 px — влезает везде. */
@media (max-width: 1199px) {
  #calc-new .calc #gruz .row .form-group .plusminus .input-group {
    /* Первый элемент правой группы — это и есть подпись единицы («часа»).
           У полей без единицы (кол-во грузчиков) первым идёт сам «+», и правило
           ему не мешает: зазор справа от «+» ничего не двигает. */
  }
  #calc-new .calc #gruz .row .form-group .plusminus .input-group > div:first-child {
    left: 8px;
  }
  #calc-new .calc #gruz .row .form-group .plusminus .input-group > div:last-child {
    right: 8px;
  }
  #calc-new .calc #gruz .row .form-group .plusminus .input-group > div:last-child span:first-child {
    margin-right: 6px;
    font-size: 12px;
  }
  #calc-new .calc #gruz .row .form-group .plusminus .input-group input.form-control {
    /* 8 + 14 + 6 = 28 */
    padding-left: 28px;
    /* 8 + 14 + 6 + 26 («часа» шрифтом 12 px) = 54, берём 56 с запасом */
    padding-right: 56px;
    text-align: center;
  }
}
