/* [apex-forms-20260922] Правки Дарьи 22.09: телефон, список стран, кнопки подвала.
   На апексе стоит СТАРАЯ intl-tel-input: .iti__flag-container + .iti__country-list,
   поиска по странам в ней нет вовсе — его добавляет apex-iti-search.js. */

/* 1. Поле телефона: цифры налезали на код страны.
   Блок «флаг + код» — 84px, а padding-left у поля было 37–56px: первая цифра пряталась
   под «+7», плейсхолдер «Phone» перекрывался. Обёртка .iti (inline-block) рвала раскладку,
   из-за чего поле теряло рамку и высоту соседних полей. */
.ui.input .iti,
.feedback__phone .iti { display: block !important; width: 100%; }
/* Селектор нарочно «раздут» атрибутами: на апексе три файла задают padding-left
   этому полю с !important — common.css (0,3,1), footer.css (0,3,1) и one_office.css
   (0,5,1), и все грузятся позже. Самый цепкий — one_office.css:
   `.form__inner .form__section-wrapper .feedback__form .feedback__item .item__content[type="tel"]`
   = (0,6,0). Поэтому здесь (0,6,3): три атрибута плюс html/body/input. */
html body .iti[class][class] > input[class][class][type],
html body .iti[class][class] > input[class][class],
html body .iti[class][class] > input {
  box-sizing: border-box;
  width: 100%;
  padding-left: 104px !important;   /* 84 блок кода + 20 запас */
  font-size: 16px !important;       /* заодно снимает автозум iOS */
}

/* 2. Список стран: компактнее, код рядом с названием, в одну строку. */
.iti__country-list { font-size: 14px; max-height: 280px; }
.iti__country {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; line-height: 1.25; white-space: nowrap;
}
.iti__country-name { overflow: hidden; text-overflow: ellipsis; }
.iti__dial-code { margin-left: 6px; color: #6b6b6b; }

/* 2-бис. Поиск по странам (вставляется скриптом). */
.rot-iti-search-wrap {
  position: absolute; z-index: 4; box-sizing: border-box;
  background: #fff; padding: 6px; border: 1px solid #ccc; border-bottom: 0;
}
.rot-iti-search-wrap.iti__hide { display: none; }
.rot-iti-search {
  width: 100%; box-sizing: border-box; height: 36px; padding: 0 10px;
  font-size: 16px; border: 1px solid #ddd; border-radius: 4px;
}

/* 3. Кнопки подвала — как «Отправить»: тёмная заливка, охристая рамка, белый текст.
   Белый по охре давал рябь (контраст 1,9:1). */
.footer .ui.button,
.footer button:not(.rot-iti-search) {
  background: #3a3a3a !important;
  color: #fff !important;
  border: 1px solid #f0b64c !important;
}

/* 4. Тёмная форма «Complete the form…» (на части страниц она НЕ внутри <footer>,
   поэтому привязка к .footer не срабатывала — Дарья увидела старый охряной вид
   на странице города): поля были сплошной охрой с белым плейсхолдером (контраст 1,9:1 — рябит).
   Делаем как в форме здания: тёмная заливка, охристая рамка, белый текст. */
html body .feedback .feedback__row,
html body .feedback .feedback__form { background: transparent !important; }
html body .feedback .feedback__item input,
html body .feedback .feedback__item .iti > input,
html body .feedback .feedback__item .ui.input { background: #3a3c3d !important; }
html body .feedback .feedback__item input {
  color: #fff !important;
  /* рамку здесь НЕ рисуем: она одна и на ячейке (п. 7), иначе выходит двойная линия */
  border: 0 !important;
}
html body .feedback .feedback__item input::placeholder { color: #cfcfcf !important; }
html body .feedback .iti__flag-container { background: #3a3c3d !important; }
html body .feedback .iti__selected-dial-code { color: #fff !important; }

/* 5. Двойная неровная рамка под формой подвала.
   Замер: у обёртки .feedback__form своя рамка (низ 492,9), а поля кончаются на 488,3 —
   отсюда вторая линия; плюс телефон и «Отправить» на 3,6px выше остальных полей,
   отчего линия ещё и неровная. Рамку обёртки убираем (её дублируют рамки полей),
   высоту всех ячеек равняем. */
html body .feedback .feedback__form,
html body .feedback .feedback__row { border: 0 !important; box-shadow: none !important; }
html body .feedback .feedback__item,
html body .feedback .feedback__item .ui.input,
html body .feedback .feedback__item .iti { height: 56px !important; }
html body .feedback .feedback__item input,
html body .feedback .feedback__item button {
  height: 56px !important;
  box-sizing: border-box !important;
}

/* 6. Рамка у ячейки телефона выглядела тоньше соседних: её рисовал сам input,
   а поверх левой части лежит блок флага со своим фоном — линия прерывалась.
   Переносим рамку на всю ячейку (.iti), у поля убираем. */
html body .feedback .feedback__item .iti {
  border: 1px solid #f0b64c !important;
  box-sizing: border-box !important;
}
html body .feedback .feedback__item .iti > input { border: 0 !important; }

/* 7. Единая рамка у ВСЕХ ячеек формы подвала (включая телефон и «Отправить»).
   Раньше рамку рисовал каждый внутренний элемент по-своему: у текстовых полей — input,
   у телефона — обёртка .iti под блоком флага, у кнопки — сама кнопка. Отсюда разная
   толщина и пропадающая рамка у телефона. Теперь рамка одна и на ячейке. */
html body .feedback .feedback__item {
  border: 1px solid #f0b64c !important;
  box-sizing: border-box !important;
}
html body .feedback .feedback__item input,
html body .feedback .feedback__item button,
html body .feedback .feedback__item .iti,
html body .feedback .feedback__item .ui.input {
  border: 0 !important;
  box-shadow: none !important;
}

/* 8. Форма на странице здания (не подвал): те же рамки, что у остальных полей.
   Там своя разметка `.form__inner`, поэтому правила из п. 4–7 её не накрывали:
   у телефона оставалась серая рамка semantic (rgba(34,36,38,.15)). */
html body .form__inner .feedback__item {
  border: 1px solid #f0b64c !important;
  box-sizing: border-box !important;
}
html body .form__inner .feedback__item input,
html body .form__inner .feedback__item button,
html body .form__inner .feedback__item .iti,
html body .form__inner .feedback__item .ui.input {
  border: 0 !important;
  box-shadow: none !important;
}
html body .form__inner .feedback__item .iti__flag-container { background: transparent !important; }

/* 9. Код страны на тёмном фоне должен быть белым (был чёрный, сливался и наезжал). */
/* 🔴 По умолчанию код ТЁМНЫЙ: формы бывают и на белом (лид-попап) — там белый код
   исчезал. Белым он становится только в тёмных формах — подвал и форма здания. */
html body .iti__selected-dial-code { color: #252729 !important; }
html body .footer .iti__selected-dial-code,
html body .form__inner .iti__selected-dial-code { color: #fff !important; }
html body .iti__selected-flag { padding-right: 8px !important; }

/* 10. Пропала нижняя рамка у ячеек: внутренние элементы были ровно 56px при такой же
   высоте ячейки, то есть перекрывали её рамку своим фоном. Внутренние тянем по 100%
   высоты ячейки — рамка остаётся видимой со всех четырёх сторон. */
html body .feedback .feedback__item input,
html body .feedback .feedback__item button,
html body .feedback .feedback__item .ui.input,
html body .feedback .feedback__item .iti,
html body .form__inner .feedback__item input,
html body .form__inner .feedback__item button,
html body .form__inner .feedback__item .ui.input,
html body .form__inner .feedback__item .iti { height: 100% !important; }

/* 11. Строка согласия под кнопкой — фирменной охрой со свечением.
   В шаблоне у неё инлайновый color:#6b6b6b, поэтому только !important. */
html body .feedback__agree,
html body .feedback__agree a,
html body .feedback__agree,
html body .feedback__agree a {
  color: #f0b64c !important;
  text-shadow: none !important;   /* свечение убрано по просьбе Дарьи 22.09 */
}
html body .feedback__agree a { text-decoration: underline !important; }
html body .feedback__agree a:hover { color: #ffd27a !important; text-shadow: none !important; }

/* 12. Поле телефона: текст как у соседних ячеек (13px, uppercase, разрядка 0,5px)
   и по центру свободной части ячейки — слева её занимает флаг с кодом.
   На телефонах оставляем 16px: меньший размер включает автозум iOS при фокусе. */
@media only screen and (min-width: 768px) {
  html body .feedback__phone .iti > input,
  html body .form__inner .feedback__phone .iti > input {
    font-size: 13px !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    padding-right: 16px !important;
  }
}
html body .feedback__phone .iti > input::placeholder { text-transform: uppercase; }

/* 13. Форма здания: выравниваем ячейки, но БЕЗ фиксированной высоты.
   Первая попытка (height:46px) дала полосу над каждым полем: внутренний элемент
   оставался 42px и прижимался книзу, сверху зиял фон ячейки — Дарья это и увидела.
   Делаем ячейку флексом, содержимое растягиваем на всю высоту. */
html body .form__inner .feedback__item {
  display: flex !important;
  align-items: stretch !important;
  height: auto !important;
  padding: 0 !important;
}
html body .form__inner .feedback__item > * {
  flex: 1 1 auto !important;
  min-height: 44px !important;
  margin: 0 !important;
}

/* 14. Плейсхолдер «PHONE» визуально по центру всей ячейки, а не оставшейся её части.
   Слева ячейку занимает блок кода (80px), поэтому центрирование сдвигаем влево на его
   половину — но ТОЛЬКО пока поле пустое (:placeholder-shown). Как только начинают
   набирать номер, сдвиг исчезает и цифры остаются правее кода. */
/* сдвиг = (padding-left − padding-right)/2 = (104 − 14)/2 ≈ 45px */
html body .feedback__item[class][class] .iti input:placeholder-shown,
html body .feedback__phone .iti > input:placeholder-shown {
  text-indent: -45px !important;
}

/* 15. Форма города в подвале = форма здания: тёмная заливка задаётся и на самой ячейке,
   и на поле, а не только на обёртке .ui.input — иначе на части страниц сквозь неё
   просвечивала старая охряная заливка ряда. */
html body .feedback .feedback__item,
html body .feedback .feedback__item input,
html body .feedback .feedback__item .iti,
html body .feedback .feedback__item .iti__flag-container { background: #3a3c3d !important; }
html body .feedback .feedback__item.feedback__buttom,
html body .feedback .feedback__item button { background: #3a3a3a !important; color: #fff !important; }
html body .feedback .feedback__item input::placeholder { color: #cfcfcf !important; }

/* 16. Размер текста в телефоне и «Отправить» = как у остальных ячеек (13px, uppercase).
   В п.12 правило проигрывало по специфичности собственному п.1 (0,6,3), поэтому здесь
   тот же «раздутый» селектор. На телефонах поле остаётся 16px — иначе автозум iOS. */
@media only screen and (min-width: 768px) {
  html body .iti[class][class] > input[class][class][type],
  html body .iti[class][class] > input[class][class],
  html body .feedback .feedback__item button,
  html body .feedback .feedback__buttom button {
    font-size: 13px !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
  }
}

/* 17. Двойная рамка в форме здания: линию рисует не только ячейка, но и обёртка
   .ui.input внутри неё (правила one_office.css со специфичностью до (0,6,0)).
   Поднимаем свою до (0,6,2) атрибутами и гасим ВСЕ внутренние рамки. */
html body .feedback__item[class][class] {
  border: 1px solid #f0b64c !important;
  box-sizing: border-box !important;
}
html body .feedback__item[class][class] .ui.input[class],
html body .feedback__item[class][class] .iti[class],
html body .feedback__item[class][class] input[class],
html body .feedback__item[class][class] button[class] {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* 18. Неровная заливка ячейки телефона: у вендорной библиотеки блок кода красится
   отдельно (.iti__selected-flag — rgba(0,0,0,.05) в режиме separate-dial-code),
   отсюда более светлый прямоугольник слева и вертикальный шов. Гасим — цвет один. */
html body .feedback__item[class][class] .iti__selected-flag,
html body .feedback__item[class][class] .iti__flag-container,
html body .feedback__item[class][class] .iti--separate-dial-code .iti__selected-flag {
  background: transparent !important;
}
html body .feedback__item[class][class] .iti[class] { background: #3a3c3d !important; }

/* 18-бис. Цвет ячейки телефона берём ТОТ ЖЕ, что у соседних полей, а не свой.
   Замер: у имени/почты в форме здания фон rgba(255,255,255,.15) поверх тёмного,
   а я красила телефон сплошным #3a3c3d — рядом они читаются как разные оттенки. */
html body .form__inner .feedback__item .iti[class],
html body .form__inner .feedback__item .iti[class] input {
  background: rgba(255, 255, 255, .15) !important;
}
html body .form__inner .feedback__item .iti[class] input { background: transparent !important; }

/* 19. Форма здания: соседние плейсхолдеры там в обычном регистре («Enter your name»,
   «Company», «E-mail»), поэтому телефон — «Phone», без uppercase и разрядки,
   и по центру ячейки — на одной вертикали с надписью «Send». */
html body .form__inner .feedback__item .iti input,
html body .form__inner .feedback__phone .iti > input {
  text-transform: none !important;
  letter-spacing: normal !important;
}
html body .form__inner .feedback__item .iti input::placeholder { text-transform: none !important; }

/* 19-бис. Те же две правки для карточки здания, но со специфичностью выше моих же
   общих правил (п. 16 красит регистр, п. 18 — фон; оба били п. 19 и 18-бис). */
html body .form__inner .feedback__item[class][class] .iti[class] {
  background: rgba(255, 255, 255, .15) !important;
}
html body .form__inner .feedback__item[class][class] .iti[class] input[class] {
  text-transform: none !important;
  letter-spacing: normal !important;
  background: transparent !important;
}

/* 20. Серая заливка не доходила до краёв ячейки: её красили внутренние элементы,
   а они уже ячейки (высота/ширина не 100%), и вдоль рамки оставалась тёмная полоса.
   Переносим фон на саму ячейку, внутренние делаем прозрачными и растягиваем. */
html body .form__inner .feedback__item[class][class] {
  background: rgba(255, 255, 255, .15) !important;
  overflow: hidden !important;
}
html body .form__inner .feedback__item[class][class] > *,
html body .form__inner .feedback__item[class][class] .ui.input[class],
html body .form__inner .feedback__item[class][class] .iti[class] {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}
html body .form__inner .feedback__item[class][class] input[class] {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}
html body .form__inner .feedback__item.feedback__buttom[class] { background: transparent !important; }

/* 20-бис. СРОЧНО: в п.20 я обнулила фон у всех внутренних элементов ячейки —
   вместе с ними пропала заливка кнопки «Send» (осталась пустая рамка).
   Возвращаем кнопке фирменный охряной фон и тёмный текст. */
html body .form__inner .feedback__item.feedback__buttom[class],
html body .form__inner .feedback__item[class][class] button[class],
html body .form__inner .feedback__buttom[class] button {
  background: #f0b64c !important;
  color: #252729 !important;
  border: 0 !important;
}

/* 21. Кнопка «Send» в карточке здания: её класс — .feedback-button (one_office.css),
   а мой сброс фона в п.20 бил по всем детям ячейки. Возвращаем заливку адресно
   и с запасом по специфичности. */
html body .form__inner .feedback__buttom[class][class] button[class][class],
html body .form__inner .feedback__item[class][class] .feedback-button[class],
html body .feedback__item[class][class] .feedback-button[class] {
  background: #f0b64c !important;
  color: #252729 !important;
  border: 0 !important;
}

/* 22. Слово «Phone» — сразу после кода страны, а не по центру ячейки
   (решение Дарьи 22.09: «расположи рядом с кодом страны»). */
html body .form__inner .feedback__item[class][class] .iti[class] input[class],
html body .form__inner .feedback__phone .iti > input {
  text-align: left !important;
  text-indent: 0 !important;
  padding-left: 96px !important;
}

/* 23. СРОЧНО. На части страниц кнопка отправки — не <button>, а <input type="submit">
   (и/или .feedback-button), поэтому мои прежние селекторы её не накрывали: ячейка
   оставалась пустой рамкой без заливки и с невидимым текстом. Накрываем ВСЕ варианты. */
html body .feedback__buttom[class] button,
html body .feedback__buttom[class] input[type="submit"],
html body .feedback__buttom[class] .feedback-button,
html body .form__inner .feedback__buttom[class] button,
html body .form__inner .feedback__buttom[class] input[type="submit"],
html body .feedback__item[class][class] input[type="submit"] {
  background: #f0b64c !important;
  color: #252729 !important;
  border: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 44px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
}
html body .feedback__buttom[class] { background: #f0b64c !important; border-color: #f0b64c !important; }

/* 24. СРОЧНО. Список стран обрезался до одной строки: в п.20 я поставила ячейкам
   overflow:hidden (чтобы заливка не вылезала за рамку), а список стран лежит ВНУТРИ
   ячейки телефона — он и обрезался. Ячейке с телефоном обрезку снимаем. */
html body .feedback__item[class][class] { overflow: visible !important; }
html body .feedback__phone[class],
html body .feedback__phone[class] .iti[class],
html body .feedback__phone[class] .ui.input[class] { overflow: visible !important; }
html body .feedback__phone[class] .iti__country-list { z-index: 9999 !important; }

/* 25. СРОЧНО, телефоны: на узком экране мой сдвиг центрирования (text-indent) уводил
   плейсхолдер под блок флага — от слова «PHONE» на экране оставался хвост «…IE».
   На ≤767px никакого сдвига: текст слева, отступ ровно под блок кода. */
@media only screen and (max-width: 767px) {
  html body .iti[class][class] > input[class][class],
  html body .feedback__phone .iti > input,
  html body .feedback__phone .iti > input:placeholder-shown {
    text-indent: 0 !important;
    text-align: left !important;
    /* на телефоне блок кода узкий (флаг + галочка, без кода), поэтому отступ меньше:
       иначе «PHONE» висит далеко от флага */
    font-size: 16px !important;
  }
  /* 🔴 Ширина блока слева РАЗНАЯ: с кодом (.iti--separate-dial-code) он ~82px,
     без кода — только флаг с галочкой, ~50px. Поэтому отступ задаём по классу,
     иначе на одних страницах «Phone» висит далеко от флага, на других лезет под код. */
  html body .iti--separate-dial-code[class] > input[class],
  html body .feedback__phone .iti--separate-dial-code > input { padding-left: 90px !important; }
  html body .iti[class]:not(.iti--separate-dial-code) > input[class],
  html body .feedback__phone .iti:not(.iti--separate-dial-code) > input { padding-left: 56px !important; }
}

/* 26. ИТОГОВОЕ правило по плейсхолдеру телефона (отменяет мои прежние п.12/14/16/22/25).
   Решение Дарьи: «Phone» стоит слева, вплотную к блоку кода, на всех экранах.
   Отступ — по факту разметки: с кодом (.iti--separate-dial-code) блок ~82px, без кода ~50px.
   Селекторы нарочно раздуты атрибутами: в common.css, footer.css и one_office.css
   стоят свои !important со специфичностью до (0,6,0). */
html body .iti[class][class][class] > input[class][class],
html body .iti[class][class][class] > input[class][class]:placeholder-shown {
  text-align: left !important;
  text-indent: 0 !important;
}
html body .iti--separate-dial-code[class][class] > input[class][class],
html body .iti--separate-dial-code[class][class] > input[class][class]:placeholder-shown {
  padding-left: 92px !important;
}
html body .iti[class][class]:not(.iti--separate-dial-code) > input[class][class],
html body .iti[class][class]:not(.iti--separate-dial-code) > input[class][class]:placeholder-shown {
  padding-left: 58px !important;
}

/* 27. Ширина списка стран. ПЕРВАЯ версия этого правила снимала у блока флага
   абсолютное позиционирование (position:static) — и ломала раскладку ячейки телефона
   во всём подвале апекса (код и «PHONE» разъезжались на две строки). Откатано.
   Позиционирование вендора не трогаем, ограничиваем только ширину самого списка. */
html body .iti[class] .iti__country-list {
  width: 320px !important;
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box !important;
}
html body .iti[class] .iti__country-list .iti__country {
  white-space: normal !important;
}

/* 28. СРОЧНО. В карточке здания список стран снова обрезался до одной строки:
   в п.20 у ячеек стоит overflow:hidden со специфичностью выше, чем снятие в п.24.
   Снимаем обрезку там же, где её поставили. */
html body .form__inner .feedback__item[class][class],
html body .form__inner .feedback__item[class][class] .ui.input[class],
html body .form__inner .feedback__item[class][class] .iti[class] { overflow: visible !important; }