/*
 * Формы входа и регистрации — X-110 и то, что нашлось рядом.
 *
 * Файл начинался как правила одного поля телефона и назывался соответственно, но правок
 * формы в нём накопилось больше: высота селектора страны, плашка ошибок AJAX. Имя
 * приведено к содержимому, чтобы следующий не искал их в другом месте.
 *
 * ЧАСТЬ 1. Поле телефона.
 *
 * Одна строка, один бордер, два сегмента: слева страна номера (флаг + код), справа
 * национальная часть. Высоты обязаны совпадать — разнобой высот первым выдаёт склеенную
 * на коленке группу, поэтому оба контрола тянутся до высоты строки, а не задают её сами.
 *
 * Правила идут ПОСЛЕ choices.min.css и переопределяют его. Цвета берутся у темы через
 * `inherit` и `currentColor` везде, где это возможно: тема тёмная, а базовые правила
 * Choices светлые, и хардкодить сюда палитру значит завести вторую правду о цветах.
 */

.phone-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Сегмент страны. Ширина по содержимому: флаг + код + шеврон, не больше. */
.phone-row .choices {
    margin-bottom: 0;
    flex: 0 0 auto;
}

.phone-row .choices__inner {
    height: 100%;
    min-height: 0;
    padding: 5px 6px 5px 10px;
    background: #fff;
    /* Цвет, радиус и кегль — те же, что у `.form-control` темы: `#0089ff`, 6px, 16px.
     * Радиус измерен у соседнего поля, а не взят из `main.css`: объявленные там 3px
     * перекрыты, и на глаз строка телефона выглядела более угловатой, чем вся форма. */
    border: 1px solid #0089ff;
    border-right: 0;
    border-radius: 6px 0 0 6px;
    min-width: 62px;
    /* Choices задаёт свои 14px; у соседних полей формы 16px. */
    font-size: 16px;
    color: inherit;
    display: flex;
    align-items: center;
}

.phone-row .choices__list--single {
    padding: 0;
}

.phone-row .choices__item {
    white-space: nowrap;
}

/*
 * Нижний отступ сегмента: у Choices правило `.choices[data-type*="select-one"] .choices__inner`
 * специфичнее моего, и его 7.5px делали сегмент на пиксель выше соседнего поля — при
 * требовании «высоты должны совпадать» пиксель имеет значение.
 */
.phone-row .choices[data-type*="select-one"] .choices__inner {
    padding-bottom: 5px;
}

/* Штатная стрелка Choices — псевдоэлемент `.choices`; своя живёт внутри строки и не зависит
 * от того, относительно чего позиционируется контейнер. */
.phone-row .choices[data-type*="select-one"]::after {
    display: none;
}

.phone-row .phone-option__arrow {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    margin-left: 2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .5;
}

.phone-row .choices.is-open .phone-option__arrow {
    border-top: 0;
    border-bottom: 5px solid currentColor;
}

/*
 * Сегмент страны не растягивается текстом. Пока страна не выбрана, в нём стоит заполнитель, и
 * без ограничения он растянул бы строку на всю длину подписи — найдено пробой на обоих
 * вьюпортах 2026-09-03.
 */
.phone-row .phone-option--empty .phone-option__flag {
    opacity: .55;
}

.phone-row .choices__list--single .choices__item {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Поле номера примыкает к сегменту страны: общий бордер, скруглены только внешние углы. */
.phone-row .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.phone-row .choices.is-open .choices__inner {
    border-radius: 6px 0 0 6px;
}

/*
 * Шов между сегментами убирается тем, что бордер на стыке рисует только один из них.
 * У `.form-control` темы бордер объявлен через `!important`, поэтому и здесь `!important` —
 * иначе левая граница поля остаётся и даёт двойную линию.
 */
.phone-row .form-control {
    border-left: 0 !important;
    border-radius: 0 !important;
}

.phone-row:has(.phone-apply.d-none) .form-control {
    border-radius: 0 6px 6px 0 !important;
}

/*
 * Ошибка красит ВСЮ строку. Раньше поле становилось красным, а сегмент страны оставался
 * синим — шов был виден сильнее всего там, где важнее всего.
 */
.phone-row:has(.hasError) .choices__inner,
.phone-row:has(.hasError) .phone-apply {
    border-color: #ea5455;
}

/*
 * Панель. На узком экране — во всю ширину строки, а не под сегментом страны: иначе
 * «Bosnia and Herzegovina» и «United States Minor Outlying Islands» переносятся или
 * обрезаются, а места под ними достаточно.
 */
/*
 * **Цвета берутся у темы, а не сочиняются здесь.**
 *
 * Первая версия этих правил задавала тёмную панель (`#10131c`) по макету — и на глазах
 * оказалась тёмным окном посреди белой формы: этот шаблон светлый, что видно по его же
 * правилу `.floating-label label { background: #fff }`. Ровно то, от чего я в шапке этого
 * файла предостерегал и в чём сам ошибся. Значения ниже — те же, на которых стоит тема и
 * Bootstrap под ней, а не вторая палитра.
 */
.phone-row .choices__list--dropdown {
    min-width: 280px;
    z-index: 30;
    background: #fff;
    border: 1px solid #0089ff;
    color: #212529;
}

/*
 * **Названия стран отрисовались красными, и причина не в Choices.**
 *
 * В теме есть `.floating-label span { color: #dc3545 }` — правило для звёздочки
 * «обязательное поле». Строки списка собраны из `<span>` и лежат внутри `.floating-label`,
 * поэтому забрали цвет звёздочки: весь список выглядел как ошибка. Увидено на снимке —
 * измерение высот и ширин этого показать не могло.
 *
 * Селектор ниже специально длиннее исходного, иначе он не выигрывает.
 */
.floating-label .phone-row .choices__list--dropdown .choices__item,
.floating-label .phone-row .phone-option__name,
.floating-label .phone-row .phone-option__dial,
.floating-label .phone-row .choices__list--single .phone-option span {
    color: #212529;
}

.floating-label .phone-row .phone-option__dial {
    opacity: .65;
}

.phone-row .choices__list--dropdown .choices__item.is-highlighted {
    background: #f1f3f5;
}

/* Заполнитель — не строка списка. */
.phone-row .choices__list--dropdown .choices__placeholder {
    display: none;
}

/*
 * Панель — во всю ширину строки, на любом экране.
 *
 * Choices задаёт `.choices { position: relative }`, поэтому панель позиционировалась
 * относительно сегмента страны, а он 68px: на снимке владельца список стран оказался вдвое
 * уже строки, и длинные названия жались. Точкой отсчёта становится сама строка — и это верно
 * не только на телефоне: на десктопе панель уже строки тоже ничем не оправдана.
 */
.phone-row {
    position: relative;
}

.phone-row .choices {
    position: static;
}

.phone-row .choices__list--dropdown {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
}

/* Полоса прокрутки в списке — тонкая: штатная лезла на текст. */
.phone-row .choices__list--dropdown .choices__list {
    scrollbar-width: thin;
}

.phone-row .choices__list--dropdown .choices__list::-webkit-scrollbar {
    width: 6px;
}

.phone-row .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb {
    background: #c9ced6;
    border-radius: 3px;
}

/*
 * **Высота строки и высота списка заданы явно, чтобы обрез приходился на границу строк.**
 *
 * Штатно строка выходила 25.6px, а список ограничен 300px — то есть одиннадцать строк и
 * ещё семь десятых двенадцатой: снизу всегда торчала половина названия. Ровно пять строк
 * по 36px, как на макете: 180px и ни пикселем больше.
 */
.phone-row .choices__list--dropdown .choices__item--selectable {
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    font-size: 14px;
}

.phone-row .choices__list--dropdown .choices__list {
    max-height: 180px;
}

/* Строка списка: флаг, название, код. Код прижат вправо и не спорит с длинным названием. */
.phone-row .phone-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.phone-row .phone-option__flag {
    font-family: "Twemoji Country Flags", inherit;
    font-size: 16px;
    line-height: 1;
}

.phone-row .phone-option__name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone-row .phone-option__dial {
    flex: 0 0 auto;
    opacity: .7;
}

/* Свёрнутое состояние: только флаг и код. */
.phone-row .choices__list--single .phone-option__name {
    display: none;
}

/* Поиск внутри панели — первая строка, как на макете. */
.phone-row .choices__list--dropdown .choices__input {
    background: transparent;
    border-bottom: 1px solid #dee2e6;
    color: #212529;
    padding: 10px 12px;
    margin: 0;
}

/*
 * Подпись в вырезе бордера — слот состояния.
 *
 * Штатные правила темы поднимают подпись через `.form-control:not(:placeholder-shown) + label`,
 * но здесь перед подписью стоит не контрол, а строка из двух контролов, поэтому правило не
 * срабатывает и подпись легла бы поперёк поля. Она поднята всегда — как это уже сделано в теме
 * для `select`, по той же причине.
 */
.floating-label .phone-row + .phone-label {
    top: -14px;
    left: 8px;
    font-size: 13px;
    /* Тот же цвет, что у поднятой подписи любого другого поля формы
     * (`main.css:1978`). Без него подпись телефона оставалась серой рядом с синей
     * подписью страны — видно на снимке владельца. Состояния `is-hint` и `is-error`
     * объявлены ниже и перекрывают его. */
    color: #007bff;
    z-index: 9;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Состояния слота. Цвет — единственное, что меняется, кроме текста.
 *
 * **Оба состояния — красным звёздочки `#dc3545`** (решение владельца). На форме два цвета:
 * синий у подписей и рамок, красный у всего, что требует внимания. Янтарный был третьим и
 * читался чужим; вдобавок исходный `#f0ad4e` давал на белом **1.95** при пороге 4.5, то есть
 * подсказку, которую мы просим прочитать, прочитать было нельзя. `#dc3545` даёт **4.53**.
 *
 * **Подсказка и отказ теперь различаются не цветом, а кнопкой:** у подсказки справа стоит
 * «применить», у отказа её нет. Различие структурное, а не цветовое, и это надёжнее — цвет
 * читают не все и не всегда.
 *
 * Красный — **тот же, которым набрана звёздочка «обязательное поле»**. Он не только
 * единообразнее: он даёт **4.53** и порог берёт, тогда как красный темовых сообщений
 * (`#ea5455`) даёт 3.56 и не берёт.
 */
.floating-label .phone-label.is-hint { color: #dc3545; }
.floating-label .phone-label.is-error { color: #dc3545; }

/*
 * **Тринадцатый кегль этого слота не работал никогда — померено 2026-09-06.**
 *
 * Правило выше просит `font-size: 13px`, а подпись рендерилась четырнадцатым. Дело не в порядке
 * файлов: `auth-form.css` подключён ПОСЛЕ `main.css` и по порядку выигрывал бы. Дело в счёте.
 *
 *     .floating-label .phone-row + .phone-label                  (0,3,0)   13px, наше
 *     .signup-area-inner .popup-right .floating-label label      (0,3,1)   14px, тема
 *
 * Идентификаторов поровну, классов поровну — три и три, — а дальше у темы стоит голое `label`, и
 * один тип перевешивает. Комбинаторы (`+`, `>`, пробел) в счёт не входят вовсе, поэтому наш
 * селектор, описывающий ровно одно место в вёрстке, проигрывает общему и неряшливому. До сравнения
 * по порядку подключения дело просто не доходит: порядок смотрят только при полном равенстве счёта.
 *
 * Проверено опытом, а не арифметикой: снятие класса `.popup-right` у предка — правило темы
 * перестаёт совпадать, ничего больше не меняется — переключает вычисленный размер с 14px на 13px.
 * И тот же ответ даёт сам движок: в его списке каскада правило темы стоит последним.
 *
 * **Почему по id, а не добавлением типа.** `label.phone-label` дало бы (0,3,1) — счёт вровень, и
 * победа держалась бы на порядке файлов. Этот файл уже однажды стоял ДО `main.css`, и половина его
 * правил молча не работала; вернуть его туда — вопрос одной строки в макете. `#registerOverlay`
 * даёт (1,3,0): идентификатор перевешивает любое количество классов и типов, и правило перестаёт
 * зависеть от того, кто кого подключил раньше.
 *
 * Правится ровно то свойство, которое проигрывает. Всё остальное из правила выше — положение,
 * цвет, ширина, многоточие — доезжает и сейчас: проверено `getComputedStyle`.
 */
#registerOverlay .floating-label .phone-row + .phone-label {
    font-size: 13px;
}

/* Кнопка «применить подсказку»: в той же строке, палец попадает. */
.phone-row .phone-apply {
    flex: 0 0 auto;
    /*
     * **Заливкой, а не контуром.** Контурная кнопка на снимке владельца читалась пустой
     * ячейкой в конце строки, а не действием: рядом с залитой REGISTER она выглядела
     * частью рамки. Подсказку применяют или не применяют по тому, насколько очевидно, что
     * на неё можно нажать, — а не по тому, насколько вежлив её текст.
     *
     * Цвет тот же, что у подписи-подсказки: это одно сообщение, разнесённое по двум местам,
     * и разными цветами оно бы распалось на два.
     */
    /*
     * **Белый фон, синий знак — цветом рамки** (решение владельца).
     *
     * Тёмная заливка делала кнопку тяжелее всего остального на форме: единственное залитое
     * пятно здесь — REGISTER, и вторая заливка спорила с ней за внимание. Провалилась же
     * первая, контурная версия не из-за контура, а из-за янтарного знака с контрастом 1.95 —
     * на кнопке не было видно, что нарисовано. Синий `#0089ff` на белом даёт 3.49: для текста
     * мало, для знака достаточно (порог 3), и это тот же синий, что у рамки, поэтому кнопка
     * читается частью поля, а не наклейкой на нём.
     */
    border: 1px solid #0089ff;
    border-left: 0;
    border-radius: 0 6px 6px 0;
    background: #fff;
    color: #0089ff;
    padding: 0 12px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-row .phone-apply:hover,
.phone-row .phone-apply:focus {
    background: #eaf5ff;
    border-color: #0089ff;
}

/* Пока подсказка на экране, правый край строки принадлежит кнопке — поле не должно
 * тянуть свою синюю рамку под неё. */
.phone-row:has(.phone-apply:not(.d-none)) .form-control {
    border-right-color: #0089ff !important;
}

/*
 * Правый край строки скругляет тот, кто на нём стоит: пока кнопки подсказки нет — поле,
 * когда появилась — кнопка. Иначе между ними видна ступенька из двух скруглений (увидено
 * на снимке десктопа).
 */
.phone-row .form-control {
    border-radius: 0;
}

.phone-row:has(.phone-apply.d-none) .form-control {
    border-radius: 0 5px 5px 0;
}

/*
 * Верхний отступ: **зазор одинаковый, а просвет — нет.**
 *
 * Измерено: между всеми полями формы ровно 15px, включая email -> телефон. Но у остальных
 * полей подпись, пока они пустые, лежит ВНУТРИ рамки, а у телефона она поднята на бордер —
 * потому что поле всегда несёт placeholder-образец. Поднятая подпись занимает верхнюю часть
 * зазора, и видимого просвета остаётся около шести пикселей вместо пятнадцати. Отсюда
 * ощущение, что поле прижато к предыдущему, при формально равных отступах.
 *
 * Компенсируется высотой самой подписи, а не «на глаз»: 13px шрифта плюс её отступы дают
 * примерно девять пикселей над рамкой.
 */
.floating-label--phone .form-group {
    /* Полная компенсация (30px, ровно 15px просвета над подписью) на глаз оказалась
     * слишком воздушной: подпись всё же не пустое место, и просвет над ней читается
     * вместе с ней. 22px — примерно 8px чистого сверху; по ощущению ряд ровный. */
    margin-top: 22px;
}

/*
 * Селектор страны ПРОЖИВАНИЯ — высота как у текстовых полей.
 *
 * Тема задаёт ему `height: calc(1.5em + 1.5rem + 2px)` = 50px, а у всех input'ов формы 39px:
 * первое поле формы было заметно выше остальных. Правило живёт здесь, а не в main.css,
 * потому что вся эта форма — предмет X-110, и держать правку рядом с остальными дешевле,
 * чем править общий файл темы ради одной формы.
 */
.popup-right .floating-label select.form-control {
    height: 39px;
    min-height: 39px;
    padding-top: 0;
    padding-bottom: 0;
}

/*
 * ЧАСТЬ 3. Плашка ошибок AJAX над формой.
 *
 * **Она была уже той формы, чем поля под ней.** `main.css:10640` задаёт ей
 * `margin: 20px 31px`, и на снимке владельца сообщение висело отступив от краёв, тогда как
 * все поля идут во всю ширину: плашка читалась приклеенной не к той форме.
 *
 * И она была самым мелким текстом на форме — 12.25px от класса `small`, при 13px у подписей
 * и 16px в полях. Сообщение об ошибке, набранное мельче всего остального, — это ровно та
 * иерархия наоборот, от которой оно и должно спасать.
 */
.signup-form .auth-ajax-errors:not(.d-none),
.login-form .auth-ajax-errors:not(.d-none) {
    margin-left: 0;
    margin-right: 0;
    margin-top: 8px;
    font-size: 14px;
}

/* Приёмник ошибки поля из AJAX: сообщение показывает слот состояния в вырезе бордера,
 * поэтому сам приёмник не виден — иначе одно и то же было бы написано дважды. */
.phone-server-error {
    display: none;
}

/* ============================================================================================
   Отказ по полю в модалке «Account Details» — плашкой в вырезе бордера (владелец, 2026-09-05)
   ============================================================================================

   **Что было и почему это сломало форму.** X-114 поставил под каждое поле `<small>` с сообщением:
   отказ перестал улетать в исчезающий тост и встал у поля — это правильное решение, и оно
   остаётся. Но `<small>` занимает место в потоке, и семь отказов разом добавляли форме **158
   пикселей** (померено: карточка 442 → 600). Вместе со вторым дефектом — центрированием флексом,
   которое съедало переполнение, — форма переставала доставаться целиком: в развороте iPhone 7
   первые поля уезжали выше начала прокрутки, на 320 пикселях кнопка SUBMIT не доставалась вовсе.

   **Приём не выдуман — он уже стоит на телефоне при регистрации.** Подпись в вырезе бордера
   работает слотом состояния: текст и цвет меняются НА МЕСТЕ, форма не прыгает. Подпись
   `position: absolute`, то есть её содержимое не занимает в потоке ничего — сколько бы сообщение
   ни весило, высота формы та же. Владелец так и сформулировал: *«давай сделаем как на форме
   регистрации, сверху над полем как у телефона заводится плашка с ошибкой»*.

   **Имя поля не теряется**, хотя подпись сообщением перекрывается: сообщения набраны через
   `lang/en/validation.php → attributes`, поэтому «The first name field is required» само называет
   поле. Ровно по этой причине те `attributes` и заводились.

   **Две строки, и они растут ВВЕРХ.** Одна строка с многоточием — то, что стоит на телефоне —
   здесь не годится: померено, «The First Name field is required.» просит 179 пикселей при 148
   доступных в портрете и 113 на трёхсотдвадцатом, то есть обрезалось бы 5 сообщений из 7 и на
   узком экране 6. Поэтому плашка прикреплена НИЖНИМ краем (`bottom`, а не `top`): вторая строка
   уходит вверх, в двадцатипиксельный зазор между рядами полей, а не вниз на само поле. Больше
   двух строк не бывает — `-webkit-line-clamp` обрезает третью многоточием, чтобы длинное
   сообщение не наползло на поле СВЕРХУ; что ни одна плашка не накрыла чужое поле, проверяется
   пробой отдельным утверждением. Полный текст остаётся в `title`.

   Красный `#dc3545` — тот же, которым набрана звёздочка «обязательное поле»: он даёт контраст
   **4.53** и порог берёт, тогда как красный темовых сообщений `#ea5455` даёт 3.56 и не берёт. */
.account-popup .details-form .floating-label label.field-error {
    /* Поднята ВСЕГДА. Штатное правило поднимает подпись только у заполненного или сфокусированного
       поля, а отказ «обязательно к заполнению» приходит ровно на пустое — сообщение легло бы
       поперёк поля. */
    /* **Плашка садится НА поле верхним краем, а не встаёт целиком над ним.**
       Две строки при 12px занимают 28 пикселей; стоя целиком над полем, они на девять пикселей
       залезали в поле предыдущего ряда — померено, три-четыре плашки из семи. Опущенная на
       шестнадцать пикселей внутрь своего поля, она выступает вверх на двенадцать и укладывается в
       зазор с запасом. Поле с отказом почти всегда пустое — отказ «обязательно к заполнению»
       приходит ровно на пустое, — так что закрывать плашке там нечего. */
    top: auto;
    bottom: calc(100% - 16px);
    left: 8px;
    right: 8px;
    font-size: 12px;
    line-height: 1.15;
    color: #dc3545;
    z-index: 10;
    white-space: normal;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/*
 * **Зазор между рядами — 26 пикселей вместо двадцати, и это цена двух строк.**
 *
 * Плашка в две строки при 12px просит примерно 22 пикселя над полем, а между рядами их было 20:
 * померено, шесть плашек из семи накрывали нижнюю кромку поля предыдущего ряда. Уменьшать шрифт до
 * одиннадцати — экономить на том самом сообщении, которое просим прочитать; поэтому расширен зазор.
 *
 * Шесть пикселей стоят одинаково с ошибками и без них, поэтому «плашка не удлиняет форму» остаётся
 * правдой: высота карточки с отказами и без них совпадает, а не «почти совпадает».
 */
.account-popup .details-form .form-group {
    margin-top: 6px;
}

/* Звёздочка внутри подписи-сообщения не появляется — сообщение не подпись поля, — но правило
   темы красит `span` в тот же красный, и лишнего здесь ничего нет. */
.account-popup .details-form .floating-label label.field-error span {
    display: none;
}