/* ==========================================================================
   Sell Your Property — редизайн формы /agency/realty/add (тема TM58887).
   2026-09-06: тот же слой обвязки носит форма заявки /agency/bids/add
   (#BidAddForm) — она подключает этот файл и делит с add-формой ритм групп,
   леджер-спайн, чекбоксы согласий, капчу и адаптив. Правила про карту,
   category_params и загрузку фото у неё просто не находят целей.
   CSS-only. Разметка .ctp НЕ меняется — всё через переопределение
   существующих классов темы.

   Задача №1: привести 40 лейблов формы к ОДНОЙ шкале. В исходнике их
   размеры разъезжались (13 / 15.6 / 16 / 18px) и цвета (#212121 / #434345 /
   #000) — потому что поля пришли из разных подсистем: form-label (тема),
   .lab (локация), .label2 (category_params), безклассовые (согласия/телефон).

   Палитра: brand/colors/palette.json (Red #BE151B / Orange #F26921 /
   Yellow #F7921E). Шрифт Montserrat — бренд-шрифт, в теме уже загружен
   (montserrat.css), но форма его не использовала: наследовался Lato.
   ВАЖНО: в montserrat.css есть только 400 и 700 — промежуточных начертаний
   (500/600) НЕТ, иерархия строится размером/цветом/трекингом, не весом.
   2026-08-10: примитивы поля (секции 1, 1.5, 1.6, 2.5, 3, 7, 9, 11, 12, 13 и блок
   токенов --ea-*) вынесены в ea-form.css — их делят три формы, включая фильтр
   каталога, куда этот файл не подключается. Здесь осталась обвязка add-формы.
   Токены --ea-* объявлены в ea-form.css; он грузится раньше (TmSiteHelper::$_css),
   так что правила ниже их видят.
   ========================================================================== */
/* ==========================================================================
   2. ГРУППЫ ПОЛЕЙ — ритм по вертикали
   ========================================================================== */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .form-group,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .control-group {
  margin-bottom: 20px;
  position: relative;
}

/* «Леджер-спайн»: брендовая полоса слева у активной группы.
   Единственный выразительный приём формы — остальное держим тихим. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .form-group::before,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .control-group::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(
    180deg,
    var(--ea-brand-yellow) 0%,
    var(--ea-brand-orange) 55%,
    var(--ea-brand-red) 100%
  );
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: 50% 50%;
  transition: opacity 0.28s var(--ea-ease), transform 0.28s var(--ea-ease);
  pointer-events: none;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .form-group:focus-within::before,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .control-group:focus-within::before {
  opacity: 1;
  transform: scaleY(1);
}

/* Спайн уходит в отрицательный отступ — на узких экранах он бы обрезался
   краем вьюпорта, поэтому там прячем (место дороже украшения). */
@media (max-width: 991px) {
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .form-group::before,
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .control-group::before {
    display: none;
  }
}

/* Спайн должен зажигаться и на select2: настоящий фокус там уходит на
   служебное поле поиска ВНЕ группы, `:focus-within` не срабатывает.
   Тот же список условий, что у волны лейбла — три эффекта живут по одному
   триггеру, иначе на селектах связка распадается. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .form-group:has(.select2-container--open)::before,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .form-group:has(.select2-container--focus)::before,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .control-group:has(.select2-container--open)::before,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .control-group:has(.select2-container--focus)::before {
  opacity: 1;
  transform: scaleY(1);
}


/* ==========================================================================
   4. КАРТА
   ========================================================================== */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .sell-map-holder,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .map-wrapper,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) #map-google {
  border-radius: var(--ea-radius);
  overflow: hidden; /* обрезаем тайлы карты по общему радиусу */
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .sell-map-holder {
  border: 1px solid var(--ea-line);
  box-shadow: var(--ea-shadow-rest);
}


/* ==========================================================================
   5. ПАРАМЕТРЫ КАТЕГОРИИ (#categoryParams)
      22 поля в правой колонке — визуально собираем в одну карточку-леджер,
      иначе они читаются как оторванный от формы список.
   ========================================================================== */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) #categoryParams {
  background: var(--ea-surface-sunken);
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-radius);
  padding: 20px 22px 4px;
  margin-top: 20px;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) #categoryParams .param-row {
  margin-bottom: 0;
}

/* .bedrooms/.bathrooms — исторические имена, фактически это просто
   ячейки-строки (тема не флоатит их даже на десктопе). */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) #categoryParams .control-group {
  padding-top: 0;
}


/* ==========================================================================
   6. ЧЕКБОКСЫ СОГЛАСИЙ
      В разметке уже есть пара .checkbox-custom + .checkbox-custom-dummy
      (тема их не дорисовала: dummy был display:inline, 0×19px).
      Используем ЭТОТ существующий хук, а не изобретаем новый.
   ========================================================================== */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) :is(.confirmation-checkbox,.ea-checks .checkbox-custom) {
  position: absolute;
  opacity: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .checkbox-custom-dummy {
  display: inline-block;
  vertical-align: top;
  width: 22px;
  height: 22px;
  margin-right: 12px;
  border: 2px solid var(--ea-line-strong);
  border-radius: 7px;
  background: var(--ea-surface);
  transition: border-color 0.2s var(--ea-ease), background-color 0.2s var(--ea-ease);
  pointer-events: none;
  position: relative;
  flex: 0 0 auto;
}

/* Галка — CSS-фигура (без иконочного шрифта: FA на фронте не канон) */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .checkbox-custom-dummy::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
  transition: opacity 0.16s var(--ea-ease), transform 0.16s var(--ea-ease);
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) :is(.confirmation-checkbox,.ea-checks .checkbox-custom):checked + .checkbox-custom-dummy {
  background: var(--ea-brand-orange);
  border-color: var(--ea-brand-orange);
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm)
  :is(.confirmation-checkbox,.ea-checks .checkbox-custom):checked
  + .checkbox-custom-dummy::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* Клавиатурный фокус обязан быть виден (WCAG) — нативный чекбокс скрыт,
   поэтому кольцо рисуем на dummy. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) :is(.confirmation-checkbox,.ea-checks .checkbox-custom):focus-visible + .checkbox-custom-dummy {
  border-color: var(--ea-brand-orange);
  box-shadow: var(--ea-shadow-focus);
}

/* Строка согласия: чекбокс и текст в одну линию, текст — обычный, не лейбл-шкала */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) :is(.confirmation-checkbox,.ea-checks .checkbox-custom) ~ label {
  display: inline-block;
  max-width: calc(100% - 40px);
  vertical-align: top;
  font-size: 14px !important;
  font-weight: 400 !important; /* перебиваем общую 700 из блока лейблов */
  line-height: 1.55 !important;
  color: var(--ea-ink) !important;
  letter-spacing: normal;
  margin: 0;
  cursor: pointer;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) :is(.confirmation-checkbox,.ea-checks .checkbox-custom) ~ label p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) :is(.confirmation-checkbox,.ea-checks .checkbox-custom) ~ label a {
  color: var(--ea-brand-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) :is(.confirmation-checkbox,.ea-checks .checkbox-custom) ~ label a:hover {
  color: var(--ea-brand-red);
}

/* У согласий спайн не нужен — это не поле ввода */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .form-group:has(.confirmation-checkbox)::before {
  display: none;
}


/* ==========================================================================
   8. ЗАГРУЗКА ФОТО (#AdvertisementPicture_list)
      DOM генерируется jquery-fileupload по шаблонам — не переинициализируем,
      только оформляем фактические классы.
   ========================================================================== */

/* --- 8.1 Иконки: glyphicon НЕ работает на этом фронте ---------------------
   В шаблонах стоят <i class="glyphicon glyphicon-plus|trash|ban-circle|upload">,
   но шрифт «Glyphicons Halflings» темой TM58887 не подключён:
   document.fonts.check('14px "Glyphicons Halflings"') === false, узлы рендерились
   как 12×15px с нерезолвящимся глифом.
   FontAwesome на ПУБЛИЧНОМ фронте тоже не подключён (FA — канон админки), а тащить
   новую либу на legacy-страницу запрещено политикой стека. Поэтому рисуем 4 нужные
   иконки чистым CSS: 0 новых запросов, 0 зависимостей.
   ponytail: только 4 используемых глифа, не весь набор — остальные добавлять,
   если появятся в шаблонах. */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .glyphicon {
  /* сбрасываем нерабочий шрифт — иначе браузер рисует «крокозябру» */
  font-family: inherit !important;
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  speak: never;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .glyphicon::before {
  content: "" !important; /* гасим кодпоинт Glyphicons */
}

/* plus — две палки */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .glyphicon-plus::before,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .glyphicon-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 1px;
}
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .glyphicon-plus::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .glyphicon-plus::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}

/* trash — корзина: крышка (::before) + корпус (::after) */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .glyphicon-trash::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  box-shadow: 0 -2px 0 -0.5px currentColor; /* «ручка» крышки */
}
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .glyphicon-trash::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 3px 3px;
}

/* ban-circle — круг с перечёркиванием */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .glyphicon-ban-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
}
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .glyphicon-ban-circle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* upload — стрелка вверх + подставка */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .glyphicon-upload::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .glyphicon-upload::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 2px;
  height: 11px;
  background: currentColor;
  transform: translateX(-50%);
  box-shadow: -5px 9px 0 0 currentColor, 5px 9px 0 0 currentColor;
}


/* --- 8.2 Кнопка «Add Photo» (span.fileinput-button) -----------------------
   Была 0×0: <span> с display:inline и <input type=file> внутри. */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .fileupload .fileupload-buttonbar {
  padding: 0;
  margin: 0 0 16px;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .fileupload .span12 {
  width: auto;
  margin: 0;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) span.fileinput-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--ea-control-h);
  padding: 0 22px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ea-brand-orange);
  background: var(--ea-surface);
  border: 1px solid rgba(242, 105, 33, 0.45);
  border-radius: var(--ea-radius);
  box-shadow: var(--ea-shadow-rest);
  cursor: pointer;
  overflow: hidden;
  transition: color 0.2s var(--ea-ease), background 0.2s var(--ea-ease),
    border-color 0.2s var(--ea-ease), box-shadow 0.2s var(--ea-ease);
}

/* вложенный <span class="fileinput-button"> с текстом — не кнопка, а подпись */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) span.fileinput-button span.fileinput-button {
  display: inline;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) span.fileinput-button:hover {
  color: #fff;
  background: var(--ea-brand-orange);
  border-color: var(--ea-brand-orange);
  box-shadow: 0 4px 14px rgba(242, 105, 33, 0.24);
}

/* Нативный file-input растягиваем на всю кнопку и прячем: клик идёт по нему,
   поэтому НЕ display:none (иначе кнопка перестанет открывать диалог). */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) span.fileinput-button input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 200px; /* старый приём: увеличивает кликабельную зону в IE/Safari */
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) span.fileinput-button:focus-within {
  border-color: var(--ea-brand-orange);
  box-shadow: var(--ea-shadow-focus);
}


/* --- 8.3 СЕТКА ПЛИТОК (переделано: было «строка-таблица») -----------------
   Паттерн как у Dropbox / Google Drive / FilePond / демо blueimp:
   загруженные фото — grid МИНИАТЮР, где плитка = само изображение,
   а действия лежат иконками ПОВЕРХ него.
   Было: #AdvertisementPicture_list display:block, .template-download строкой
   (Delete | Rotate | превью | Main), карточка 576px на одно фото. */

/* 4 колонки на всю ширину контейнера. `auto-fill, minmax(160px, 1fr)` давал
   6 плиток по 183px при контейнере 1170px — карточки мелкие, превью не
   рассмотреть. Фиксированное число колонок растягивает плитку по остатку
   ширины (замер: 1170px → 4×279px при gap 14px). */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) #AdvertisementPicture_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 16px;
  align-items: start;
}

/* Планшет — 3 колонки: при 4 плитка ужимается до нечитаемой. */
@media (max-width: 1199px) {
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) #AdvertisementPicture_list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ⚠️ Баг РАЗМЕТКИ (не CSS): tmpl_donwload.ctp не закрывает свой
   `.template-download` — в файле 2 открывающих <div> и 1 закрывающий, поэтому
   КАЖДАЯ следующая карточка рендерится ВНУТРИ предыдущей (замер на 3 фото:
   вложенность .template-download .template-download, высота 1058px,
   ширины 281/259/237 «лесенкой»). Чинится только в .ctp (менять запрещено).
   Нейтрализуем: вложенная плитка выносится из потока родителя и ведёт себя
   как самостоятельная ячейка сетки.
   Структура (замер): каждая .template-download содержит СВОИ 4 элемента
   (2 кнопки, .preview, .input.checkbox) И пятым ребёнком — следующую плитку.
   Поэтому `display:contents` на обёртке не подходит: он растворил бы и её
   собственное превью. Разложить это чистым CSS нельзя — вложенность реальная,
   а не визуальная. Единственная правка, которую делает sellprop-redesign.js:
   поднять вложенные .template-download на уровень контейнера (см. JS-файл).
   После этого плитки становятся обычными ячейками грида.
   ponytail: JS-костыль; настоящий фикс — дописать закрывающий div
   в tmpl_donwload.ctp, после чего sellprop-redesign.js не нужен. */

/* --- Плитка --------------------------------------------------------------- */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload {
  position: relative;
  display: block;
  /* Единая геометрия ВСЕХ плиток (готовых и загружающихся): любое исходное
     фото даёт одинаковую плитку независимо от своих пропорций. */
  aspect-ratio: 4 / 3;
  width: 100%;
  min-width: 0;
  box-sizing: border-box; /* рамка не увеличивает габарит */
  padding: 0;
  margin: 0;
  background: var(--ea-surface-sunken);
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-radius);
  overflow: hidden;
  box-shadow: var(--ea-shadow-rest);
  /* Готовые плитки — в начале, загружаемые уезжают в хвост (см. .template-upload) */
  order: 0;
  transition: box-shadow 0.22s var(--ea-ease), border-color 0.22s var(--ea-ease);
}

/* Плитка «в процессе загрузки» ВСЕГДА последняя в сетке.
   blueimp вставляет её туда, куда пришёл файл (часто второй позицией),
   из-за чего сетка «прыгала», когда загрузка завершалась и плитка
   подменялась готовой. `order` работает и в grid, и во flex —
   поведенческая проблема решается стилями, без вмешательства в плагин. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload {
  order: 999;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download:hover {
  border-color: var(--ea-line-strong);
  box-shadow: var(--ea-shadow-raised);
}

/* Превью = вся плитка. Клик по нему открывает #blueimp-gallery —
   поэтому кнопки НЕ перекрывают картинку целиком (только углы). */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .preview {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .preview a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

/* Жёсткие width=145 height=120 стоят атрибутами в .ctp — перебиваем стилями. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 0.35s var(--ea-ease);
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download:hover .preview img {
  transform: scale(1.04);
}

/* --- Действия поверх плитки (иконки, не текстовые кнопки) ----------------- */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .delete-model,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .delete-model,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .rotate-model,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .rotate-model,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .cancel ,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .cancel {
  position: absolute;
  top: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Жёстко равные width/height + box-sizing → КРУГ, а не эллипс.
     Без этого высота приходила от line-height/padding кнопки (замер: 34×50). */
  width: 34px;
  height: 34px;
  min-width: 34px;
  max-width: 34px;
  min-height: 34px;
  max-height: 34px;
  box-sizing: border-box;
  padding: 0;
  line-height: 1;
  /* font-size:0 прячет текстовую подпись («Delete»/«Rotate») — разметку менять
     нельзя, обернуть текст нечем. Псевдоэлементу размер задаём явно ниже,
     иначе 0px наследуется и глиф схлопывается. */
  font-size: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(24, 18, 14, 0.55);
  backdrop-filter: blur(6px);   /* плитка не скроллится сама — blur безопасен */
  cursor: pointer;
  opacity: 0;                   /* на десктопе проявляются по hover */
  transform: scale(0.9);
  transition: opacity 0.2s var(--ea-ease), transform 0.2s var(--ea-ease),
    background 0.2s var(--ea-ease);
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .delete-model ,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .delete-model { right: 8px; }
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .rotate-model,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .rotate-model,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .cancel { right: 48px; }

/* В плитке загрузки cancel — единственная кнопка, поэтому занимает крайнюю
   правую позицию (место delete на готовой плитке): при переходе
   «загружается → загружено» кнопка не перескакивает. У неё оба класса
   (`cancel delete-model`), а `.cancel` идёт ниже — задаём явно. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .cancel { right: 8px; }

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download:hover .delete-model,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload:hover .delete-model,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download:hover .rotate-model,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload:hover .rotate-model,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download:hover .cancel,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload:hover .cancel,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download:focus-within .delete-model,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload:focus-within .delete-model,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download:focus-within .rotate-model ,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload:focus-within .rotate-model {
  opacity: 1;
  transform: scale(1);
}

/* Тач-устройства: hover не существует — кнопки видны всегда. */
@media (hover: none) {
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .delete-model,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .delete-model,
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .rotate-model,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .rotate-model,
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .cancel ,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .cancel {
    opacity: 1;
    transform: scale(1);
  }
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .delete-model:hover ,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .delete-model:hover {
  background: var(--ea-brand-red);
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .rotate-model:hover,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .rotate-model:hover,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .cancel:hover ,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .cancel:hover {
  background: var(--ea-brand-orange);
}

/* Иконки действий — FA 4.7 (glyphicon в теме не рисуется). */
/* Иконка кнопки. font-family и font-size — ЯВНО и с !important:
   на кнопке стоит font-size:0 (прячет текстовую подпись) и он наследуется
   в псевдоэлемент, а font-family наследует Montserrat формы — в нём глифа
   \f1f8 нет. Оба наследования нужно перебить, иначе иконки не видно. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .delete-model::after,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .delete-model::after,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .rotate-model::after,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .rotate-model::after,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .cancel::after ,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .cancel::after {
  font-family: "FontAwesome" !important;
  font-size: 15px !important;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  display: block;
  -webkit-font-smoothing: antialiased;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .delete-model::after ,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .delete-model::after { content: "\f1f8"; } /* trash */
/* Поворот фото: \f01e (repeat) читался как «перезагрузить» — пользователь
   не понял действия. \f0e2 (undo) — изогнутая стрелка вокруг оси, однозначно
   «повернуть». Функция штатная: rotateImage() шлёт POST на
   /file_upload/handler/rotate и разворачивает оригинал + миниатюру. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .rotate-model::after ,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .rotate-model::after { content: "\f0e2"; } /* undo — rotate */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .cancel::after        ,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .cancel::after        { content: "\f00d"; } /* times */

/* glyphicon-заглушки внутри этих кнопок больше не нужны.

   `.template-upload` обязателен: без него glyphicon-ban-circle темы рисовал
   свой значок ПОВЕРХ нашего `::after` — в кружке cancel было видно два
   наложенных глифа (⊘ и ×). */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .btn .glyphicon,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .btn .glyphicon {
  display: none;
}

/* --- «Main» — бейдж-состояние плитки, а не чекбокс с подписью ------------- */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .input.checkbox {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: rgba(24, 18, 14, 0.55);
  backdrop-filter: blur(6px);
  transition: background 0.2s var(--ea-ease);
}

/* Нативный чекбокс остаётся в DOM и сабмитится — просто невидим поверх бейджа.
   НЕ display:none и НЕ visibility:hidden (ломает клик), только opacity. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .input.checkbox input.set-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .input.checkbox label {
  position: relative;
  margin: 0;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em;
  color: #fff !important;
  cursor: pointer;
  pointer-events: none; /* клик уходит на input под ним */
  /* Подпись «Main» видна только у ВЫБРАННОЙ плитки: на невыбранных бейдж
     остаётся компактной звездой-переключателем, иначе слово «Main» на каждой
     плитке читается как утверждение, а не как выбор. */
  display: none;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm)
  .template-download
  .input.checkbox:has(input.set-main:checked)
  label {
  display: inline;
}

/* Звезда живёт на САМОМ бейдже, а не на подписи: подпись «Main» скрыта
   у невыбранных плиток, и звезда должна оставаться видимой как переключатель. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .input.checkbox::after {
  font-family: "FontAwesome" !important;
  content: "\f006"; /* star-o — не выбрано */
  font-size: 12px;
  line-height: 1;
  color: #fff;
  pointer-events: none;
  order: -1; /* звезда слева от подписи */
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm)
  .template-download
  .input.checkbox:has(input.set-main:checked) {
  background: var(--ea-brand-orange);
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm)
  .template-download
  .input.checkbox:has(input.set-main:checked)::after {
  content: "\f005"; /* star — выбрано */
}

/* Невыбранный бейдж — компактный кружок только со звездой */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm)
  .template-download
  .input.checkbox:not(:has(input.set-main:checked)) {
  padding: 6px;
  border-radius: 50%;
}

/* Выбранная плитка выделена — ТОЛЬКО outline: он вне потока и не меняет
   габарит, тогда как border/доп. box-shadow делали выбранную плитку крупнее
   соседних (замечание пользователя «геометрия нарушена»). */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download:has(input.set-main:checked) {
  border-color: var(--ea-brand-orange);
  outline: 2px solid var(--ea-brand-orange);
  outline-offset: -1px; /* внутрь, чтобы не расширять ячейку сетки */
}

/* Скрытые инпуты (picture/picture_small/id) остаются в потоке сабмита. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .input.checkbox input[type="hidden"] {
  display: none;
}

/* --- 8.5 Плитка в процессе загрузки --------------------------------------- */

/* Плитка загрузки: та же форма и радиус, что у готовой (иначе сетка «прыгает»
   в момент подмены upload → download). Контент прижат к низу поверх скелетона. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 10px;
  background: var(--ea-surface-sunken);
}

/* скелетон-мерцание, чтобы сетка не «прыгала» до появления картинки */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--ea-surface-sunken) 30%,
    #efece8 50%,
    var(--ea-surface-sunken) 70%
  );
  background-size: 220% 100%;
  animation: ea-skeleton 1.4s var(--ea-ease) infinite;
}

@keyframes ea-skeleton {
  from { background-position: 180% 0; }
  to   { background-position: -60% 0; }
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload > * {
  position: relative;
  z-index: 1;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .upload-info-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .name {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--ea-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .size {
  margin: 0;
  font-size: 11px;
  color: var(--ea-ink-muted);
}

/* `.error` пуст по смыслу, но не по DOM: шаблон всегда рендерит внутрь
   переводы строк, поэтому `:empty` не срабатывает. Показываем блок только
   когда в нём есть бейдж — его вставляет ветка `if (file.error)`. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .error { display: none; }
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .error:has(.label-danger) { display: block; }

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .label-danger {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--ea-brand-red);
}

/* Геометрию, круглую форму и позиции кнопок плитки загрузки задаёт канон
   «Действия поверх плитки» (секция 6) — он распространён и на
   `.template-upload`, поэтому cancel выглядит и стоит ровно как
   delete/rotate. Локальный дубль здесь раньше задавал обёртке
   `position:absolute; display:flex` — из-за него две кнопки читались как
   один вытянутый кружок — и ужимал их до 30px против канонных 34. */

/* .cancel полностью покрыт каноном выше; .start — только в ручном режиме
   загрузки (`!o.options.autoUpload`), там канон её не знает. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .btn.start::after {
  content: "\f093"; /* upload */
  font-family: "FontAwesome" !important;
  font-size: 15px !important;
  line-height: 1;
  display: block;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .btn.start {
  background: var(--ea-brand-orange);
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .upload-preview-row .preview:empty {
  display: none;
}

/* --- 8.6 Прогресс-бар ------------------------------------------------------
   В разметке inline `height:20px;background-color:gray` на .progress-bar —
   инлайн перебивается только !important. Бар прижат к низу плитки. */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .progress {
  height: 5px;
  border-radius: 999px;
  background: rgba(24, 18, 14, 0.12);
  overflow: hidden;
  margin: 0;
  box-shadow: none;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .progress-bar {
  height: 5px !important;
  background-color: transparent !important;
  background-image: linear-gradient(
    90deg,
    var(--ea-brand-yellow),
    var(--ea-brand-orange)
  ) !important;
  border-radius: 999px;
  transition: width 0.3s var(--ea-ease);
}


/* --- 8.7 Лайтбокс blueimp: не ломаем, только скругляем -------------------- */

#blueimp-gallery .slides img {
  border-radius: var(--ea-radius);
}


/* ==========================================================================
   8.8 ВЕРТИКАЛЬНЫЙ РИТМ НИЖНЕЙ ЧАСТИ ФОРМЫ

   Тема задаёт универсальный отступ между блоками-строками:
     theme/TM58887/css/style.css →  `* + .range { margin-top: 50px }`
   Форма собрана из `.range`-строк, поэтому согласия и кнопки получали 50px
   (+ padding-bottom:15px у ячеек = до ~65px) против ритма формы 20px.

   ⚠️ Правило темы переопределяем ТОЛЬКО внутри `:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm)`:
   те же `.range` используются в шапке/футере/на других страницах — трогать
   их нельзя. Отсюда селектор с `:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) >`.

   Группировка по смыслу, а не равные отступы: два согласия — парные
   (12px между собой), перед группой кнопок — крупнее (24px). */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) > .range + .range {
  margin-top: 24px;
}

/* Ячейки внутри строк формы несут собственные 15px — обнуляем,
   иначе ритм складывается дважды. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) > .range > [class*="cell-"] {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Согласия идут подряд двумя .range — между ними ритм плотнее (парный блок) */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) > .range:has(.confirmation-checkbox)
  + .range:has(.confirmation-checkbox) {
  margin-top: 12px;
}

/* Перед строкой с кнопками — воздух чуть больше: это смена смысла
   (данные закончились, дальше действие). */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) > .range:has(.submit),
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) > .range:has(.JS-add-photo) {
  margin-top: 28px;
}

/* Первая строка формы не должна получать верхний отступ вовсе */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) > .range:first-of-type {
  margin-top: 0;
}


/* ==========================================================================
   10. АДАПТИВ
   ========================================================================== */

@media (max-width: 767px) {
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) {
    --ea-control-h: 50px;
    --ea-label-size: 13.5px;
  }

  /* 16px — порог, ниже которого iOS Safari зумит страницу при фокусе.
     Перечисляем те же селекторы, что и в базовом блоке (включая
     input[type=...]): у базового правила специфичность (1,1,1) за счёт
     атрибутных селекторов, и одного `.form-control` здесь не хватает. */
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .form-control,
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) input[type="text"],
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) input[type="email"],
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) input[type="tel"],
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) input[type="number"],
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) textarea,
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .select2-container--bootstrap .select2-selection--single {
    font-size: 16px;
  }

  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) #categoryParams {
    padding: 16px 14px 4px;
  }

  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .btn,
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) input[type="submit"],
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .JS-add-photo {
    width: 100%;
  }

  /* Кнопки в .cell-xs-6 стоят в ряд и на 375px сжимаются до нечитаемых —
     разводим в стопку. */
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .submit,
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .cell-xs-6 {
    margin-bottom: 12px;
  }

  /* Загрузчик: на телефоне — 2 колонки миниатюр (как в Google Photos/Drive),
     а не одна широкая плитка: миниатюры на всю ширину экрана выглядят
     как список, а не как галерея. */
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) #AdvertisementPicture_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) span.fileinput-button {
    display: flex;
    width: 100%;
  }
}


/* ==========================================================================
   14. ПЛИТКА ЗАГРУЗКИ: превью во всю площадь + читаемый прогресс

   Замер до правки (Slow 3G, MutationObserver по #AdvertisementPicture_list):
     плитка 183×137, превью <canvas> 80×60 — картинка занимала четверть
     площади и «растягивалась» только после загрузки (готовая плитка 181×135);
     .progress высотой 5px стоял В ПОТОКЕ под именем файла и терялся на фоне
     скелетон-мерцания, хотя технически работал (0% → 53% → 100%).

   blueimp рисует превью в <canvas> фиксированного размера (опция
   previewMaxWidth/Height в JS-инициализации) — менять её нельзя, это правка
   логики загрузчика. Поэтому масштабируем средствами CSS: canvas
   растягивается на всю плитку через object-fit, как обычная картинка.
   ========================================================================== */

/* Превью — фон плитки на всю площадь, а не маленький центрированный холст */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .upload-preview-row {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .upload-preview-row .preview {
  display: block;
  width: 100%;
  height: 100%;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .upload-preview-row .preview canvas,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .upload-preview-row .preview img {
  /* canvas от blueimp приходит 80×60 своими width/height-атрибутами —
     переопределяем именно размер БОКСА, содержимое масштабирует object-fit */
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  border-radius: calc(var(--ea-radius) - 2px);
  /* пока грузится — приглушаем, чтобы читались имя файла и прогресс поверх */
  opacity: 0.55;
}

/* Появилось превью — скелетон больше не нужен, иначе мерцает поверх картинки */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload:has(.preview canvas)::before,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload:has(.preview img)::before {
  content: none;
}

/* Текст поверх превью — с подложкой, иначе имя файла тонет в картинке.

   `position: static` осознанно: строка не должна быть containing block'ом.
   Кнопки лежат ВНУТРИ неё по разметке загрузчика, и при `relative` они
   отсчитывали свои top/right от строки, а не от плитки — уезжали на
   top 66 / right 20 (замер) и накрывали процент, тогда как на готовой
   плитке стоят на 11/11. Слой над превью держит `isolation` — он поднимает
   строку без создания containing block'а для absolute-потомков.

   `backdrop-filter` убран по той же причине: он создаёт containing block
   для absolute-потомков ДАЖЕ при `position: static` — с ним кнопки так и
   отсчитывались от строки (замер: offsetParent = .upload-info-row при
   position static). Подложка непрозрачна на 82%, размытия под ней почти
   не видно. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .upload-info-row {
  position: static;
  isolation: isolate;
  z-index: 1;
  margin-top: auto;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

/* --- Прогресс: заметная полоса, прижатая к низу плитки ------------------- */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .upload-size-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .progress {
  height: 8px;
  border-radius: 999px;
  /* контраст к светлой подложке — 5px на белом полупрозрачном не читались */
  background: rgba(24, 18, 14, 0.18);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(24, 18, 14, 0.12);
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .progress-bar {
  height: 8px !important;
  min-width: 2px;
}

/* Полосы движутся В СТОРОНУ ЗАПОЛНЕНИЯ, слева направо.

   Тема анимирует `background-position: 40px → 0` (style_formating.css:6449),
   то есть справа налево — против роста бара. Правило темы трогать нельзя
   (общий файл), поэтому переопределяем анимацию здесь: свои кейфреймы
   `0 → 40px` и явный `background-size`, иначе шаг 40px не совпадёт с шагом
   полос и движение будет рваным.

   Полосы кладём поверх фирменного градиента вторым слоем — сам градиент
   (жёлтый → оранжевый) остаётся неподвижным, «бежит» только штриховка. */
@keyframes ea-progress-stripes-ltr {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 40px 0, 0 0; }
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .progress-striped .progress-bar,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .progress-bar {
  background-image:
    linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.22) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.22) 50%,
      rgba(255, 255, 255, 0.22) 75%,
      transparent 75%,
      transparent
    ),
    linear-gradient(90deg, var(--ea-brand-yellow), var(--ea-brand-orange)) !important;
  background-size: 40px 40px, 100% 100%;
  background-repeat: repeat, no-repeat;
  animation: ea-progress-stripes-ltr 1.2s linear infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .progress-striped .progress-bar,
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .progress-bar {
    animation: none !important;
  }
}

/* Размер и процент — одной строкой НАД полосой, полоса во всю ширину.
   Замер до правки: .upload-size-progress оставалась flex-строкой, полоса
   получала 90px из 161 и уезжала на 36px вправо от текста, а процент был
   спозиционирован от неё же (bottom:22px) и висел ниже-правее полосы —
   на скриншоте это читалось как «текст смещён относительно прогресс-бара».
   Значение берётся из aria-valuenow, его обновляет blueimp на .progress. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .upload-size-progress {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .upload-size-progress .size {
  /* размер слева, процент справа — одна строка, полоса под ними */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .upload-size-progress .size::after {
  content: attr(data-pct);
  font-weight: 700;
  color: var(--ea-brand-orange);
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .progress {
  width: 100%;
}

/* --- 14.1 Алерты загрузки — отдельной строкой НАД сеткой плиток -----------
   Ошибка рендерится загрузчиком внутрь карточки (`.template-upload .error`),
   а карточка ~183×137 — текст вроде «File is too large» туда не влезает.
   `sellprop_upload_alerts.js` переносит текст в общий блок перед списком;
   здесь только раскладка, вид берётся от штатных `.alert`/`.alert-danger`
   темы TM58887 — свой компонент не заводим. */

#AdvertisementPictureUploadAlerts:empty {
  display: none;
}

#AdvertisementPictureUploadAlerts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .upload-alert,
.upload-alerts .upload-alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 40px 12px 14px;
  border-radius: var(--ea-radius);
  font-size: 13px;
  line-height: 1.45;
}

/* Иконка предупреждения — тем же приёмом, что иконки лейблов (FA 4.7) */
.upload-alerts .upload-alert::before {
  content: "\f071";
  flex: 0 0 auto;
  font-family: "FontAwesome";
  font-size: 14px;
  line-height: 1.35;
}

.upload-alerts .upload-alert-text {
  /* длинное имя файла не должно распирать строку за край формы */
  min-width: 0;
  overflow-wrap: anywhere;
}

.upload-alerts .upload-alert .close {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 0 4px;
  font-size: 20px;
  line-height: 1;
  background: none;
  border: 0;
  opacity: 0.55;
  cursor: pointer;
}

.upload-alerts .upload-alert .close:hover {
  opacity: 1;
}

/* --- 14.2 Ширина строк внутри плитки загрузки ----------------------------
   Тема задаёт детям инфо-строки flex-базис под ГОРИЗОНТАЛЬНУЮ раскладку
   загрузчика: `.upload-name-error {flex:1 1 140px}`, `.upload-size-progress
   {flex:1 1 100px}`. Мы развернули строку в колонку (плитка 183px, в ряд не
   помещается), и базис стал вредным: замер дал 68px и 90px внутри 161px —
   имя файла, размер и полоса висели узкой колонкой со сдвигом 36px вправо.
   Обнуляем базис, чтобы каждый ряд занимал всю ширину подложки. */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .upload-info-row > * {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

/* ==========================================================================
   15. ПЛИТКА: единое место кнопок + выравнивание бейджа «Main»

   1) Кнопки. На готовой плитке delete/rotate уже стоят справа вверху
      (замер: top 9, right 9 и 49), а на плитке ЗАГРУЗКИ кнопка отмены шла
      в потоке слева и наезжала на имя файла. Приводим оба состояния к одной
      точке — правый верхний угол, одинаковый размер и шаг.

   2) Бейдж «Main». Замер отмеченного состояния: у лейбла остался
      `padding-left: 20px` от темы (место под нативный чекбокс, который мы
      скрыли) — отсюда «слишком большой отступ от звёздочки до текста»;
      высота лейбла 24px при line-height 13.2px тянула текст вверх внутри
      бокса. Обнуляем падинг (расстояние задаёт gap флекса) и снимаем
      лишнюю высоту.
   ========================================================================== */

/* --- 15.1 Кнопки: одно место в обоих состояниях -------------------------- */

/* Геометрию и круглую форму кнопкам задаёт канон выше («Действия поверх
   плитки») — он теперь распространён и на `.template-upload`, поэтому
   cancel выглядит и стоит ровно как delete/rotate: КАЖДАЯ кнопка —
   отдельный круг, позиционируется сама.

   Обёртка `.upload-buttons` есть только в разметке загрузки; она не должна
   ни позиционировать, ни собирать кнопки в общий бокс — иначе две кнопки
   читаются как один вытянутый кружок. Схлопываем её в ноль. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload .upload-buttons {
  display: contents;
}

/* --- 15.2 Бейдж «Main»: текст по центру, отступ от звезды — ровно gap ---- */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .input.checkbox label {
  /* padding темы держал место под нативный чекбокс — он скрыт (opacity:0,
     растянут на весь бейдж), поэтому отступ лишний: его роль играет gap */
  padding: 0;
  /* line-height и height — с !important: правило секции 8 задаёт
     `line-height: 1.2 !important`, из-за него бокс лейбла был 24px против
     13px текста, и при align-items:center подпись уезжала вверх
     относительно звезды (замер: labelH 24 при lineHeight 13.2px). */
  line-height: 1 !important;
  height: auto !important;
  /* Bootstrap: `.checkbox label { min-height: 24px }` — место под нативный
     чекбокс. Он здесь скрыт, а 24px против 11px текста и держали подпись
     выше звезды (замер: labelH 24 при lineHeight 11px). */
  min-height: 0 !important;
  align-self: center;
}

/* Звезда и подпись — на одной оптической линии */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-download .input.checkbox::after {
  line-height: 1;
  align-self: center;
}

/* --- 15.3 Битая плитка не должна мелькать --------------------------------
   `sellprop_upload_alerts.js` снимает её через .cancel, но между отрисовкой
   и срабатыванием MutationObserver проходит заметное время (замер: первое
   событие через 18с при валидации на стороне загрузчика). Прячем плитку с
   ошибкой сразу — CSS применяется в тот же кадр, что и вставка узла,
   поэтому пользователь её не увидит. JS всё равно нужен: он переносит
   текст в алерт и убирает файл из очереди blueimp.

   Признак ошибки — бейдж `.label-danger`: шаблон вставляет его только в
   ветке `if (file.error)`. `.error:not(:empty)` для этого НЕ годится —
   сам `<div class="error">` в tmpl_files.ctp рендерится с переводами
   строк внутри, поэтому текстовый узел там есть ВСЕГДА и `:empty` не
   срабатывает даже у исправного файла (замер: 34 символа) — правило
   скрывало все загружаемые плитки подряд. */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .template-upload:has(.error .label-danger) {
  display: none !important;
}

/* ==========================================================================
   16. СОГЛАСИЯ + КАПЧА — одна строка, две половины
      Слева два чекбокса, справа reCAPTCHA. Раньше капча висела внутри правой
      колонки под категориями, а чекбоксы шли двумя отдельными `range` на всю
      ширину — строка выглядела рваной.
   ========================================================================== */

/* Капча — по левому краю САМОЙ карточки категорий (`#categoryParams`), а не
   её содержимого: визуально она читается как продолжение блока над ней, и
   любой сдвиг сразу заметен (замер до правки: +22px вправо, +44px вниз).
   `.controls` темы даёт `padding: 20px 0 0` — снимаем, интервал строк
   задаёт сам `.range`. Второй источник отступа, `#form_recaptcha
   { padding-top: 20px }` из custom.css, убран в самом custom.css: селектор
   по id перебивает любое классовое правило отсюда. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .sell-recaptcha-holder {
  padding: 0;
}

/* Строка согласий выравнивается по верху: чекбоксы и капча начинаются с
   одной линии независимо от того, что выше. */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .sell-consent-row {
  align-items: start;
}

@media (max-width: 991px) {
  /* Колонки схлопнулись в одну — капча встаёт под чекбоксами, нужен зазор. */
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .sell-recaptcha-holder {
    padding-top: 16px;
  }
}

/* ==========================================================================
   17. ФОРМА СВЯЗИ НА ГЛАВНОЙ (#MessageViewForm) — тёмный контекст

   Разметка приходит из CMS-блока `blocks.id=36` и повторяет структуру эталона
   (`.form-group > label.form-label` + `.form-control`), поэтому весь стиль выше
   применяется к ней без правки разметки. Здесь — только отличия контекста:

   1) Секция стоит на тёмном параллаксе `.context-dark`. Замер фона
      (`4f70…855crop.jpg`, sRGB relative luminance): min 0.0091 / p50 0.0262 /
      max 0.0603 — тёмный по всей площади. Поэтому вся палитра формы
      переопределяется ТОКЕНАМИ: базовые правила читают --ea-surface/--ea-ink/
      --ea-line, менять сами правила не нужно.
   2) Валидация тут не jquery-validation, а regula из темы (`script.js`):
      класс `has-error` на `.form-group` + `<span class="form-validation">`.
      Контейнер рендерится ПУСТЫМ ещё до ввода — его обязательно гасить,
      иначе форма при загрузке выглядит ошибочной.
   3) Свой набор полей → свои глифы у лейблов.
   ========================================================================== */

.context-dark #MessageViewForm {
  /* Поле — тонированная стеклянная подложка, а не сплошной белый блок:
     белые прямоугольники на тёмном параллаксе слишком броские. 7% белого
     поверх самого светлого участка фона (L 0.0603) даёт L≈0.126 → белый
     текст 5.9:1, поверх среднего (0.0262) — 8.9:1. */
  --ea-surface: rgba(255, 255, 255, 0.07);
  --ea-ink: #ffffff;
  --ea-ink-label: #ffffff;
  --ea-ink-muted: rgba(255, 255, 255, 0.74);
  /* Рамка — non-text UI (WCAG 1.4.11, порог 3.0). Композитить надо в sRGB,
     а не в пространстве яркостей: при .24 выходит 2.10 на самом светлом
     участке фото. .38 даёт 3.14 (light) / 3.41 (mid) / 3.54 (dark) и при этом
     поле не превращается обратно в «броский белый». */
  --ea-line: rgba(255, 255, 255, 0.38);
  --ea-line-strong: rgba(255, 255, 255, 0.62);

  /* Осветлённая ветка брендовой рампы для ВОЛНЫ ПО ЛЕЙБЛУ (background-clip:
     text). Исходные стопы на фото-фоне проваливают AA: #BE151B = 1.88,
     #F26921 = 3.86 на самом светлом участке (порог 4.5 — лейбл 14px/700 не
     является large text). Последовательность красный→оранжевый→жёлтый→белый
     сохранена, каждый стоп замерен на трёх точках фона (см. отчёт).
     Базовые --ea-brand-* НЕ переопределяем: их же читают кольцо обводки,
     спайн и градиент кнопки — там нужен исходный бренд. */
  --ea-ramp-1: #ff9d8a; /* 5.92 / 7.29 / 8.29 */
  --ea-ramp-2: #ffb04d; /* 6.56 / 8.08 / 9.18 — он же --ea-accent-on-dark */
  --ea-ramp-3: #ffd08a; /* 8.30 / 10.22 / 11.62 */
  /* Стеклянная кромка: тонкий внутренний блик по верхнему краю — без него
     полупрозрачная подложка читается как «дырка» в фоне, а не как поверхность.
     Тень наружу на тёмном не работает (её просто не видно), поэтому обе
     переменные держат только inset-блик + брендовый ореол фокуса. */
  --ea-shadow-rest: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --ea-shadow-focus: inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 4px rgba(247, 146, 30, 0.18);
  /* Высота textarea в одном месте: её же читает коробка обводки ниже. */
  --ea-msg-textarea-h: 150px;
  /* Акцент для ТЕКСТА на тёмном: брендовый #F7921E даёт на самом светлом
     участке фото 4.12:1 — ниже порога AA. Осветлённый до #FFB04D — 5.24:1
     (на среднем участке 7.59:1). Для рамок/иконок бренд остаётся исходным. */
  --ea-accent-on-dark: #ffb04d;

  /* База формы (блок 0) ставит color: var(--ea-ink) = тёмная тушь — именно
     из-за неё текст согласия на параллаксе был нечитаем (1.3:1). */
  color: #ffffff;
}

.context-dark #MessageViewForm .form-control {
  /* Стекло: подложка полупрозрачная, поэтому фон под ней размываем — иначе
     сквозь поле читается деталь фотографии и текст ввода дробится. */
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

.context-dark #MessageViewForm .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Автозаполнение Chrome заливает поле собственным непрозрачным фоном и
   ставит тёмный текст — на тёмной секции это возврат к «броскому белому». */
.context-dark #MessageViewForm .form-control:-webkit-autofill {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px rgba(38, 40, 44, 0.92) inset;
  caret-color: #ffffff;
}

.context-dark #MessageViewForm .form-group > label {
  color: var(--ea-ink-label) !important;
}

#MessageViewForm label[for="MessageName"]::before  { content: "\f007"; } /* user */
#MessageViewForm label[for="MessageTitle"]::before { content: "\f007"; } /* user */
#MessageViewForm label[for="MessagePhone"]::before { content: "\f095"; } /* phone */
#MessageViewForm label[for="MessageEmail"]::before { content: "\f0e0"; } /* envelope */
#MessageViewForm label[for="MessageBody"]::before  { content: "\f036"; } /* align-left */

/* Textarea: высота из переменной (было inline `height:150px` в CMS-блоке —
   !important единственный способ его перебить и держать один источник
   правды с коробкой обводки). resize запрещён: растянутое поле разъехалось
   бы с обводкой, которая знает высоту из той же переменной. */
#MessageViewForm textarea.form-control {
  height: var(--ea-msg-textarea-h) !important;
  min-height: var(--ea-msg-textarea-h);
  padding: 14px 16px;
  line-height: 1.6;
  resize: none;
}

/* --- Обводка-развёртка: строго по периметру САМОГО поля --------------------
   Базовая коробка `top:26px; bottom:0` верна для эталона, но здесь под полем
   живёт ещё контейнер regula (замер: +22px снизу у 4 из 5 групп) — обводка
   захватывала его вместе с полем. Поэтому нижний край не тянем к низу группы,
   а задаём высоту контрола явно; верх — не «подогнанные» 26px, а точная
   высота лейбла из тех же токенов (14px × 1.35 + 8px = 26.9px, замер
   deltaTop = 26.9 на всех пяти группах). */
#MessageViewForm .form-group::after {
  top: calc(var(--ea-label-size) * var(--ea-label-lh) + var(--ea-label-gap));
  bottom: auto;
  height: var(--ea-control-h);
}

#MessageViewForm .form-group:has(textarea)::after {
  height: var(--ea-msg-textarea-h);
}

/* --- Валидация regula ------------------------------------------------------
   Контейнер сообщения тема выводит ПУСТЫМ при загрузке страницы. Пустой он
   обязан не занимать места и ничего не рисовать, иначе форма читается как
   уже провалившая проверку (жалоба пользователя). */
#MessageViewForm .form-validation:empty {
  display: none;
}

#MessageViewForm .has-error .form-control {
  border-color: var(--ea-brand-yellow);
  box-shadow: 0 0 0 4px rgba(247, 146, 30, 0.16);
}

/* Сообщение — просто строка текста, без плашки: рамка вокруг подписи на
   тёмном фоне читалась как вторая обводка поля. Тёплый акцент, а не красный:
   #BE151B на этом фоне даёт 1.4:1 (замер), --ea-accent-on-dark — 5.24:1. */
#MessageViewForm .form-validation {
  position: static;
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ea-accent-on-dark);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}

/* Согласие: текст и ссылка на тёмном — замер контраста ниже в отчёте. */
#MessageViewForm .confirmation-text,
#MessageViewForm .confirmation-text p {
  color: rgba(255, 255, 255, 0.86);
}

#MessageViewForm .confirmation-text a {
  color: var(--ea-accent-on-dark);
  text-decoration: underline;
}

/* Обязательность полей видна ДО первой ошибки: у эталона звёздочка вшита в
   текст лейбла, здесь разметка приходит из CMS-блока без неё — берём признак
   из атрибута regula, который уже стоит на контроле. Без этого пользователь
   узнаёт про required только по факту ошибки. */
#MessageViewForm .form-group:has([data-constraints*="@Required"]) > label::after {
  content: " *";
  color: var(--ea-accent-on-dark);
  font-weight: 700;
}

#MessageViewForm .confirmation-checkbox {
  accent-color: var(--ea-brand-orange);
}

/* --- Фон секции: приём из `.ea-quick` (custom.css:886-912) -----------------
   Там фото лежит отдельным слоем, а поверх него — затемняющая пелена
   `.ea-quick::before` с теми же стопами, и только потом белый текст. Здесь
   фото уже вынесено темой в `.rd-parallax-layer[data-type="media"]`, поэтому
   повторяем ровно недостающее звено — пелену. Носитель — html-слой: замер
   даёт y/h 1:1 с секцией (1041px, вся ширина 1425), значит стопы градиента
   ложатся на бокс СЕКЦИИ, как в оригинале, а не на смещённый параллаксом
   медиа-слой (тот на 51px выше и живёт своей прокруткой).
   z-index:-1 — слой fixed, т.е. свой stacking context: пелена уходит под
   контент слоя, но остаётся НАД соседним медиа-слоем. */
.rd-parallax:has(#MessageViewForm) .rd-parallax-layer[data-type="html"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(20, 20, 22, 0.72) 0%,
    rgba(20, 20, 22, 0.58) 45%,
    rgba(20, 20, 22, 0.78) 100%
  );
}

/* --- Секция выходит из штатного rd-parallax ---------------------------------
   Тема двигает `.rd-parallax-inner` (position:fixed) ТОЛЬКО из scroll-обработчика
   (js/script.js:1106-1115 + плагин RDParallax). Фиксированный слой со страницей не
   едет, поэтому на инерционной прокрутке компоновщик рисует кадр раньше, чем JS
   пересчитает transform, и снизу секции открывается полоса фона страницы РОВНО в
   дельту кадра (замер: 119.3px при шаге 120px, воспроизводится на каждом кадре).
   Запас на дочерних слоях эту дыру не лечит: слои лежат внутри
   `.rd-parallax-inner { overflow:hidden }` и обрезаются вместе с ним.
   Поэтому берём схему `.ea-quick` (custom.css:886-930): слои позиционируются
   внутри секции и едут со страницей, скролл-параллакс — на композиторе через
   animation-timeline:view(), без участия JS.
   `!important` обязателен: position/height/transform тема пишет инлайном из JS. */
.rd-parallax:has(#MessageViewForm) {
  /* Собственный containing block для абсолютного медиа-слоя ниже. Полагаться на
     `.rd-parallax-inner` нельзя: обёртку создаёт $.RDParallax(), а он не стартует
     при мобильном User-Agent (js/script.js:1103 `!isIE && !isMobile`) — секция
     остаётся static, и `top/bottom:-42%` слоя считаются от `body{position:relative}`
     высотой ВСЕЙ страницы. Замер прода 15.08: −42% × 15072px = 6330px пустоты под
     футером в обе стороны (scrollHeight 21402 против body 15072). `overflow:clip`
     ниже это не режет — containing block выше клипящего бокса. */
  position: relative;
  /* clip, а не hidden: hidden сделал бы секцию scroll-контейнером и заморозил
     view()-таймлайн фото (тот же нюанс, что у `.ea-quick`, custom.css:893). */
  overflow: clip !important;
}

/* relative, а не absolute: секция берёт высоту от этого слоя (тема пишет её
   инлайном по замеру inner). Вынь inner из потока — секция схлопнется в 0. */
.rd-parallax:has(#MessageViewForm) .rd-parallax-inner {
  position: relative !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible;
  transform: none !important;
}

.rd-parallax:has(#MessageViewForm) .rd-parallax-layer-holder {
  position: static;
  transform: none !important;
}

.rd-parallax:has(#MessageViewForm) .rd-parallax-layer[data-type="html"] {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  z-index: 2;
}

/* Фото-слой: запас 42% сверху и снизу, как у `.ea-quick__bg` — при сдвиге
   параллакса край картинки не выезжает за секцию.
   Сдвиг за мышью идёт по каналу background-position: transform слоя занят
   скролл-параллаксом, два transform на одном элементе перетёрли бы друг друга.
   --mx/--my пишет home_cards.js (тот же обработчик, что у `.ea-quick`). */
.rd-parallax:has(#MessageViewForm) .rd-parallax-layer[data-type="media"] {
  position: absolute !important;
  left: 0;
  right: 0;
  top: -42%;
  bottom: -42%;
  width: auto !important;
  height: auto !important;
  z-index: 0;
  /* без !important: важное авторское объявление перебило бы CSS-анимацию ниже.
     Инлайновый translate3d темы остаётся только там, где анимации нет (<992px
     или нет поддержки view()) — его отставание съедает запас 42%. */
  transform: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: calc(50% + var(--mx, 0px)) calc(50% + var(--my, 0px));
  transition: background-position 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: background-position;
}

/* Параллакс с 992px — как штатный rd-parallax темы; ниже фон статичен.
   Ключевые кадры переиспользуем из custom.css (`ea-quick-parallax`).
   `transform` здесь без !important: иначе важное объявление выше перебило бы
   анимацию (в каскаде важные авторские правила стоят над анимациями). */
@media (min-width: 992px) {
  @supports (animation-timeline: view()) {
    .rd-parallax:has(#MessageViewForm) .rd-parallax-layer[data-type="media"] {
      transform: none;
      animation: ea-quick-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-parallax:has(#MessageViewForm) .rd-parallax-layer[data-type="media"] {
    transition: none;
    animation: none;
  }
}

/* --- Строка согласия: чекбокс и текст в одну строку ------------------------
   В CMS-блоке чекбокс, его визуальный дубль `.checkbox-custom-dummy` и
   `.confirmation-text` — блочные соседи, поэтому текст падал под чекбокс.
   Flex-строка вместо блоков: на переносе длинный текст остаётся в своей
   колонке и не подтекает под чекбокс (этим flex лучше float/inline-block). */
#MessageViewForm .confirmation {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

#MessageViewForm .confirmation .checkbox-custom-dummy {
  flex: 0 0 auto;
}

#MessageViewForm .confirmation-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* line-height 15px при кегле 15px — текст шёл вплотную и не совпадал по
   высоте с 22px-чекбоксом. 1.5 выравнивает первую строку с ним и заодно
   выводит межстрочный в читаемый диапазон. */
#MessageViewForm .confirmation-text p {
  line-height: 1.5;
}

/* ==========================================================================
   18. ПАРА СЕЛЕКТОВ Category / Sell-Rent — общая для add-формы и формы заявки

   kanban ^input-field-gaps: убираем «мёртвый» отступ под селектами. Ячейки
   cell-sm-6 несут padding-bottom:15px (гаттер сетки) → суммарный зазор до
   следующего блока ~39px против 10px между остальными полями. Обнуляем низ
   ячеек; на мобиле (ячейки в стопку) возвращаем 10px между Category и
   Sell/Rent. Переехало из инлайнового <style> в Realty/form.ctp 2026-09-06,
   когда тот же ряд появился на /agency/bids/add.
   ========================================================================== */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) :is(.sell-rent-range,.sell-pair-range) > [class*="cell-"] {
  padding-bottom: 0;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) :is(.sell-rent-range,.sell-pair-range) > [class*="cell-"]:first-child {
    margin-bottom: 10px;
  }
}

/* ==========================================================================
   19. ГРУППЫ ФЛАЖКОВ ФОРМЫ ЗАЯВКИ (.ea-checks)

   Разметка приходит из CMS-блока `tm58887_bid_add` набором
   `.control-group.ea-checks > label.label2 + .wrapper-group > .form-group*`,
   где каждый `.form-group` — один флажок. Примитив самого флажка (скрытый
   нативный input + `.checkbox-custom-dummy` + строчный лейбл) общий с
   согласиями — селекторы примитива расширены выше на `.ea-checks
   .checkbox-custom` (класс вешает тема, script.js:640).

   Здесь только раскладка: внутри группы поля идут стопкой в 10px, и с них
   снимается обвязка «поля» — леджер-спайн и кольцо-обводка рисуются вокруг
   контрола, а у флажка контрола нет: спайн вставал слева от каждой строки,
   кольцо обводило текст.
   ========================================================================== */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .ea-checks .wrapper-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Глобальный `.wrapper-group{padding-left:10px}` (app/webroot/css/style.css) сдвигал
     квадратик флажка на 10px вправо от подписи группы и от левого края соседних
     полей — в общей сетке это читалось как «чекбоксы живут по своим направляющим».
     Отступ ТЕКСТА от квадратика он не задаёт: его держит
     `.wrapper-group label{padding-left:10px!important}` (site-custom.css:187). */
  padding-left: 0;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .ea-checks .form-group {
  margin: 0;
  display: flex;
  align-items: flex-start;
  position: relative;
}

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .ea-checks .form-group::before,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .ea-checks .form-group::after {
  content: none !important;
}

/* Сама группа — тоже не поле: спайн и обводка ей не положены, а нижний ритм
   держим общим для всех групп формы (20px). */
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .ea-checks::before,
:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .ea-checks::after {
  content: none !important;
}

/* ==========================================================================
   20. ПАРНЫЕ РЯДЫ ПОЛЕЙ (.sell-pair-range) — «от / до» в одну строку

   Вложенный `.range` внутри колонки получает от темы margin-top:50px (он
   рассчитан на самостоятельные секции страницы), из-за чего между парами
   полей открывался разрыв в 2.5 раза больше обычного ритма групп. Ритм
   задаёт нижний отступ `.form-group` предыдущей строки — ряду добавочный
   отступ не нужен.
   ========================================================================== */

:is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .sell-pair-range {
  margin-top: 0;
}

/* ==========================================================================
   21. ПУСТАЯ ЯЧЕЙКА ЕДИНОЙ СЕТКИ (.ea-grid-spacer)

   Форма заявки собрана одним `.range` (flex-wrap) из ячеек `cell-md-3`: ряд,
   где полей меньше четырёх, добирается пустой ячейкой, чтобы следующая
   смысловая группа начиналась с новой строки, а направляющие оставались
   общими. Ячейка не должна занимать высоту там, где сетка схлопнута в одну
   колонку (мобильный) — иначе между группами открывается пустой ряд.
   ========================================================================== */

@media (max-width: 767px) {
  :is(#AdvertisementAddForm,#MessageViewForm,#BidAddForm) .ea-grid-spacer {
    display: none;
  }
}