:root {
    --bs-font-sans-serif: "Fira Sans", sans-serif;
    --bs-danger-bg-subtle: #fef6f6;
    --bs-danger-border-subtle: #ffdbdb;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #72A42F;
    --bs-btn-active-border-color: #72A42F;

    /*--black: #313135;*/
    --white: #fff;
    --black: #454546;
    --dark: #242434;
    --green: #72A42F;
    --forest-green: #3c763d;
    --light-green: #d1e6b6;
    --soft-green: #f4f9ed;
    --grey: #eee;
    --muted-grey: #ebeced;
    --cool-grey: #F7F9FA;
    --slate: #A4A9B5;
    --steel-blue: #78909c;
    --gold: #ff8c00;
    --orange: #ff9800;
    --cream: #FAF6F2;
    --sand: #fc6;
    --dusty-color: #de7973;
    --default-icon: #78909c;
}
html {
    scroll-behavior: smooth;
}
body {
    background: var(--cool-grey);
    color: var(--black);
}
footer {
    color: var(--slate);
}
footer .nav-link:focus,
footer .nav-link:hover {
    color: var(--white)
}
.pagination {
    --bs-pagination-color:var(--dark);
    --bs-pagination-active-bg:var(--green);
    --bs-pagination-active-border-color:var(--green);
    --bs-pagination-hover-color:var(--green);
}
.pagination .page-item:not(.disabled):hover .page-link {
    border-top: 1px solid var(--green);
    border-bottom: 1px solid var(--green);
}
a {
    color: var(--green);
}
a[href^="tel:"],
a[href^="mailto:"] {
    text-decoration: none;
}
button {
    border: none;
}
.d-link,
.f-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    background-color: transparent;
    color: var(--black);
}
.f-link {
    font-weight: 500;
}
.d-link:hover,
.f-link:hover {
    color: var(--green)
}
/* Иконки пунктов в карточке заявки: svg — строчный элемент и сидит на базовой
   линии, из-за чего проваливается под подпись рядом. */
.order-body .table td svg.icon {
    vertical-align: -.15em;
}

/* Иконка вида перевозки перед заголовком заявки. SVG — строчный элемент и
   сидит на базовой линии, из-за чего проваливается ниже прописных букв. */
.order-body h1 svg.icon {
    vertical-align: -.15em;
}
a:hover {
    text-decoration: none;
}
/* Ссылки внутри абзаца — подчёркиванием, а не только цветом. Зелёный текст в
   сплошном абзаце заметен слабо: рядом стоят цифры и названия, глаз читает его
   как выделение, а не как «сюда можно нажать». Ссылки-кнопки и списки это не
   трогает — только то, что стоит в строке текста. */
.order-stats a,
.sitemap-intro a {
    text-decoration: underline;
    text-underline-offset: .2em;
}
.order-stats a:hover,
.sitemap-intro a:hover {
    text-decoration: underline;
    opacity: .75;
}

/* Карточка компании: .d-link и .f-link по умолчанию чёрные и зеленеют только
   под курсором, поэтому представитель и рубрики читались как обычный текст —
   рядом с ними в том же блоке лежат подписи, которые ссылками не являются. */
.company-info .d-link,
.company-info .f-link {
    color: var(--green);
}
.company-info .d-link:hover,
.company-info .f-link:hover {
    text-decoration: underline;
}
/* Категория и подкатегория вопроса — тот же случай: слева от ссылки стоит
   подпись «Категория:», и чёрная .f-link читается как её продолжение. */
.faq-meta .f-link {
    color: var(--green);
}
.faq-meta .f-link:hover {
    text-decoration: underline;
}
/* «Частые вопросы» — список-справочник вместо карточек. У каждой строки уже
   есть ответ, автор и счётчики тут не нужны: человек ведёт глазами по
   алфавитному перечню и ищет свой вопрос, поэтому строки плотные, а весь
   список — одна карточка с разделителями. */
.faq-links {
    background: var(--white);
    border: 1px solid var(--muted-grey);
    border-radius: .5rem;
    overflow: hidden;
}
.faq-links li + li {
    border-top: 1px solid var(--grey);
}
.faq-links a {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .75rem 1rem;
    color: var(--black);
    text-decoration: none;
}
.faq-links a:hover {
    background: var(--soft-green);
    color: var(--green);
}
.faq-links-mark {
    flex: 0 0 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--light-green);
    color: var(--green);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    align-self: center;
}
.a-link {
    color: var(--green);
    background: none;
    padding: 0;
}
.a-link:hover {
    text-decoration: underline;
}
.text-success {
    color: var(--green) !important;
    fill: var(--green) !important;
}
.bg-grey {
    background-color: var(--grey);
}
.bg-cool-grey {
    background-color: var(--cool-grey);
}
.bg-gold {
    background-color: var(--gold);
}
.bg-cream {
    background-color: var(--cream);
}
.bg-telegram {
    background: linear-gradient(90deg, rgba(230,242,255,1) 0%, rgba(203,240,255,1) 35%, rgba(234,250,255,1) 100%);
}
.bg-orange {
    background: var(--orange);
}
/* Плашка ТОП в колонке даты; свой оттенок, чтобы не путалась с «АКТУАЛЬНАЯ». */
.bg-top {
    background: #f0a800;
}
/* Значок «собрано помощником». Фиолетовый - единственный цвет, не занятый
   состояниями заявки: зелёный «новая», оранжевый «актуальная», жёлтый ТОП,
   красный «срочно». Это подпись способа подачи, а не ещё одно состояние. */
.badge-ai {
    background: #6f42c1;
    color: #fff;
}
.bi-telegram {
    color: #37AEE2;
}
.text-blue {
    color: var(--steel-blue);
}
.text-black {
    color: var(--black) !important;
}
.text-gold {
    color: var(--gold);
    fill: var(--gold);
}
.text-forest {
    color: var(--forest-green);
}
/* Класс стоит в 44 шаблонах - подписи, даты, счётчики, - но объявлен не был:
   обычный текст оставался цветом body, а ссылки под ним - зелёными, потому что
   в теме есть `a { color: var(--green) }`. Один класс эту элементную ссылку
   перебивает по специфичности, поэтому без !important. */
.text-grey {
    color: #6c757d;
}
.small, small {
    font-size: .875rem;
}
.small-12 {
    font-size: .75rem !important;
}
.bg-success {
    background: var(--green) !important;
}
.relative-200 {
    position: relative;
    z-index: 200;
}
.col-side {
    flex: 1 0 0;
    max-width: 19rem;
}
/* У .col по умолчанию min-width:auto, поэтому один text-truncate внутри
   (white-space:nowrap) распирает колонку по всей длине строки, и она
   сваливается под сайдбар. Даём ей ужиматься — обрезка сработает внутри. */
main.container > .row > .col {
    min-width: 0;
}
select {
    cursor: pointer;
}
::placeholder {
    opacity: .5 !important;
    color: var(--black) !important;
}
.nav-tabs .nav-link {
    font-weight: 700;
    color: var(--black);
}
.nav-tabs .nav-link.active {
    color: var(--green);
}

/* Вкладки профиля. Шесть подписей не влезают в строку уже на планшете, а
   переносом ряд превращался в два-три этажа и отжимал содержимое за сгиб.
   Ряд остаётся рядом и уезжает горизонтальной прокруткой - тем же приёмом,
   что #panel-search и .category-tabs. */
#userTab {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Свайп по полосе не должен доставаться странице: iOS передаёт его
       родителю, и вся страница уезжает вбок резиновой прокруткой. */
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
#userTab::-webkit-scrollbar {
    display: none;
}
/* Полоса прокручивается, значит вкладкам сжиматься незачем. Без этого
   браузер отбирает у крайней подписи её последние буквы. */
#userTab .nav-item {
    flex: 0 0 auto;
}
#userTab .nav-link {
    white-space: nowrap;
}
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap:.25rem;
    line-height: 18px;
    padding: .2rem .5rem;
    height: 100%;
}
/* Значок ТОП открывает окно с условиями услуги - он кликабельный для всех,
   поэтому и выглядеть должен нажимаемым. */
.badge[data-top-info] {
    cursor: pointer;
}
.badge.badge-sm {
    font-size: 10px !important;
    line-height: 12px;
    gap: .1rem;
    height: auto;
}
.badge.badge-count {
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    font-size: .6rem;
    line-height: 1;
    border-radius: 50%;
    left: 75%;
}
.badge.badge-count.badge-count-wide {
    width: auto;
    padding: 0 .35rem;
    border-radius: 999px;
}
/* Бейдж «Новое» у пункта меню - про новую функцию раздела, а не про свежую
   запись. Зелёный, а не оранжевый как у публикаций: одним цветом «новая
   заявка» и «новый раздел» склеились бы в одно. height у .badge стоит 100%,
   и внутри flex-ссылки пункта он растянулся бы на всю её высоту. */
.badge-feature {
    background: var(--light-green);
    color: var(--forest-green);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 12px;
    padding: .15rem .35rem;
    height: auto;
    flex-shrink: 0;
}
.choices {
    margin: 0;
}
.choices .choices__inner {
    padding: .25rem .75rem !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    min-height: 38px;
}
/* iOS увеличивает страницу, когда фокус уходит в поле мельче 16px, и обратно
   сам не отъезжает - страница остаётся зумленной и «гуляет» вбок. Choices
   рисует строку поиска в выпадающем списке своими 14px
   (--choices-font-size-md), поэтому каждый выбор страны или города растягивал
   форму на айфоне. */
.choices__input {
    font-size: 1rem;
}
.choices__list--single {
    padding: 0 16px 0 0;
}
.choices__placeholder {
    padding-top: 2px;
}
/* Подсказку выключенного поля Choices рисует обычным пунктом списка, а не
   плейсхолдером (её ставит syncCityField через setChoices), и отступ сверху к
   ней не применялся: текст стоял на пару пикселей выше, чем в соседнем живом
   поле. */
.choices.is-disabled .choices__list--single .choices__item {
    padding-top: 2px;
}
/* Город делит строку с радиусом подачи, и на телефоне подсказка «Сначала
   страна» переносилась на вторую строку: поле становилось выше соседнего, и
   пара разъезжалась. Обрезаем, а не переносим. */
.field-city .choices__list--single,
.field-city .choices__list--single .choices__item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ...и из-за этого overflow поле города было на 3px выше соседних: у
   инлайн-блока с overflow:hidden базовой линией становится нижний край, под
   ним остаётся место под свисающие буквы. Блочным элементом строки нет. */
.field-city .choices__list--single {
    display: block;
}
/* Выключенное поле показывает это фоном - тем же серым, что у плашек
   «Добавьте груз/машину бесплатно». Choices рисует поверх select свой
   контейнер, и белый фон из правила .choices .choices__inner оставался на
   поле города, пока страна не выбрана. */
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input,
.form-select:disabled,
.form-control:disabled {
    background-color: var(--muted-grey);
}
/* Крестик «очистить» у подсказки: в пустом поле очищать нечего, у
   заблокированного - тем более. */
.choices__item.choices__placeholder .choices__button,
.choices.is-disabled .choices__button {
    display: none;
}
.choices__list--dropdown.is-active {
    z-index: 3000;
}
.choices[data-type*=select-one]::after,
.choices[data-type*=select-one].is-open::after{
    border:none;
    margin-top: 0;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    right: 14px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Крестик «снять значение» лежит внутри плашки, за самим значением, и в узком
   поле уходил в обрезку: у города строка обрезается по ширине (он делит её с
   радиусом подачи), и вместо крестика оставалось многоточие - снять город
   мышью было нельзя. Вынимаем кнопку из потока (position: absolute ниже):
   место под неё держит правый отступ, обрезается только само значение, а
   плашка шире поля не становится. */
.choices__list--single .choices__item--selectable:not(.choices__placeholder)[aria-selected="true"] {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    max-width: 100%;
    border-radius: 3px;
    padding: 2px 30px 2px 10px;
    font-size: 14px;
    font-weight: 500;
    background-color: var(--green);
    border: 1px solid var(--green);
    color: #fff;
    word-break: break-all;
    box-sizing: border-box;
    text-shadow: 0 1px 0 rgba(0,51,83,.3);
}
.choices__list--single .choices__item--selectable .choices__button {
    position: absolute;
    top: 2px;
    right: 4px;
    display: inline-block;
    margin: 0;
    padding-left: 18px;
    border-left: 1px solid #fff;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
    background-size: 8px;
    width: 8px;
    line-height: 1;
    opacity: 1;
    border-radius: 0;
}
form label {
    font-weight: 500;
}
/* Choices прячет исходный select в своём контейнере: класс is-invalid
   остаётся на спрятанном поле, и рамка не появлялась ни у страны, ни у города
   - форма отвечала «Проверка не пройдена», ничем не показывая, где именно.
   Метка ловит только те поля, где она соседствует с селектом (у города она
   лежит в своей строке с ссылкой «Добавить свой город»), поэтому вторым
   селектором смотрим на сам контейнер. */
form label.is-invalid ~ .choices,
form .choices:has(select.is-invalid) {
    border: 1px solid var(--bs-form-invalid-border-color);
    padding-right: calc(3em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(2em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
form label.is-invalid ~ .choices .choices__inner,
form .choices:has(select.is-invalid) .choices__inner {
    border: none;
}
/* Сообщение об ошибке показываем по факту текста, а не по соседству с полем:
   у города оно лежит за обёрткой «город + радиус», у цены - за «сумма +
   валюта», у любого Choices - за его контейнером, и bootstrap-правило
   `.is-invalid ~ .invalid-feedback` до него не достаёт. Пустой span
   по-прежнему скрыт, а очистка ошибки его опустошает. */
form .invalid-feedback:not(:empty) {
    display: block;
}
/* Город и радиус поиска («Киев» + «+200 km») в одной строке фильтра.
   Обёртке города нужен min-width:0: у flex-элемента он по умолчанию auto, и
   Choices с длинным названием города выталкивает радиус за край колонки. */
.field-with-radius {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
}
.field-with-radius > .field-city {
    flex: 1 1 auto;
    min-width: 0;
}
.field-with-radius > .form-select {
    flex: 0 0 auto;
    width: auto;
}
/* Ссылка рядом с меткой («Добавить свой город», «Указать свой груз») занимает
   одну строку, как на старом сайте: из трёх слов она на телефоне ломалась
   пополам и уводила поле ниже соседних. Метке перенос оставлен - если строки
   всё-таки не хватит (немецкий), пусть ломается она, а не ссылка. */
.field-head {
    flex-wrap: nowrap;
}
.field-head > .btn-link {
    white-space: nowrap;
}
form label.required::after {
    content: "*";
    color: #dc3545;
}
.logo {
    color: var(--black);
    font-weight: 700;
    font-size: 1.5rem;
    text-decoration: none;
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    padding: .5rem 1rem;
    transition: .3s;
}
.btn-default {
    color: var(--black);
    background: var(--grey);
    border-color: var(--grey);
}
.btn .icon {
    fill: var(--default-icon);
}
.btn .tab-content > .tab-pane > .icon {
    width: 26px;
    height: 26px;
}
.btn.btn-sm {
    padding: .25rem .5rem;
    font-size: .875rem;
}
.btn.btn-sm.text-uppercase {
    padding: .5rem 1rem;
}
/* Вход и регистрация ниже остальных капслочных кнопок: в шапке они стоят
   в один ряд с логотипом и бургером, а не сами по себе. */
.header .btn[data-auth-tab] {
    padding: .25rem 1rem;
}
.btn.btn-link,
.btn.btn-link:hover {
    background: none;
    border:none;
    text-decoration: none;
    color: var(--black);
}
.btn:hover,
.btn-dark {
    background-color: var(--dark);
    border-color: var(--dark);
    color: var(--white);
}
.btn-success {
    background-color: var(--green);
    border-color: var(--green);
    color: var(--white);
}
.btn:hover .icon,
.btn-success .icon,
.btn.btn-success .bi,
.btn-outline.btn-success:hover .icon,
.btn-outline.btn-success:hover .bi {
    fill: var(--white);
    color: var(--white);
}
.btn-outline {
    background-color: transparent;
}
.btn-outline.btn-success {
    color: var(--green);
}
.btn-outline.btn-success:hover {
    color: var(--white);
}
.btn-outline.btn-success .icon,
.btn-outline.btn-success .bi {
    fill: var(--green);
    color: var(--green);
}
.btn-control {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: none;
    background: transparent;
    text-align: center;
    text-decoration: none;
    color: var(--black);
    /* «копировать» на 11px занимает 60.6px, и в шестидесяти пикселях перенос
       откусывал от него «ь» на отдельную строку. */
    width: 68px;
}
.btn-control .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: relative;
    width: 34px;
    height: 34px;
    padding: 8px;
}
/* Плашка «опция уже включена»: статус, выделение и ТОП ставятся модалкой, и по
   самой кнопке не видно, действует уже что-то или нет. */
.btn-control .control-active {
    position: absolute;
    top: -2px;
    right: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid var(--white, #fff);
    border-radius: 50%;
    background: var(--green);
    color: #fff;
}
.btn-control .control-active .bi {
    font-size: 9px;
    line-height: 1;
}
.btn-control small {
    font-size: 11px;
    line-height: 11px;
}
/* Полоса управления заявкой. Своя, а не бутстраповские d-flex/gap-2: на
   телефоне она превращается в сетку, а утилиты объявлены с !important и
   перебить их без такого же !important не выйдет. */
.order-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .5rem;
}
.btn-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
}
.btn-link .icon {
    /* Иконка — флекс-элемент рядом с длинной подписью, и без запрета на сжатие
       её ужимало до 19x28: зелёный кружок превращался в овал, а рисунок внутри
       масштабировался дробно и мылил. */
    flex: none;
    width: 28px;
    height: 28px;
    background: var(--green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    fill: #fff;
    padding: 4px;
}
.navbar-nav .nav-item {
    border-radius: 6px;
    padding: 0;
    font-size: .875rem;
    transition: .3s background-color;
}
.navbar-nav .nav-link {
    white-space: nowrap;
}
.navbar-nav .nav-item:hover {
    background: var(--green);
    color:var(--white);
}
.navbar-nav .nav-item a {
    color: inherit;
}
.navbar-nav .nav-item.active {
    background: var(--black);
    color: var(--white);
}
/* ---- Главное меню: пункты сверх строки уходят под «Ещё» ---------------
   Колонка Bootstrap - это flex: 1 0 0% с min-width: auto, то есть она раздаётся
   под содержимое. Пока это так, строка меню не переполняется никогда: JS мерить
   нечего, а лишняя ширина выталкивает блок авторизации на вторую строку. Значит
   разрешаем сжатие по всей цепочке до списка, лишнее режем по overflow, а хвост
   JS переносит в .greedy-nav-hidden. */
.header .row > .col,
.header .navbar,
.header .navbar-collapse {
    min-width: 0;
}
.greedy-nav {
    display: flex;
    align-items: center;
    gap: .25rem;
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.greedy-nav [data-greedy-list] {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}
/* В верхнем меню список занимает всю ширину, а пункты внутри стоят по центру -
   иначе меню прижимается к логотипу. Отсюда же требование к замерам в main.js:
   при центрировании overflow уходит в обе стороны и scrollWidth переполнения не
   показывает, поэтому ширина пунктов там складывается вручную. Нижняя полоса
   идёт от левого края, плитки в ней стоят вплотную. */
.header .greedy-nav [data-greedy-list] {
    justify-content: center;
    column-gap: .875rem;
}
.greedy-nav-toggle {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
    padding: .25rem .5rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    font-size: .875rem;
    transition: .3s background-color;
}
.greedy-nav-toggle:hover,
.greedy-nav.is-open .greedy-nav-toggle {
    background: var(--green);
    color: var(--white);
}
.greedy-nav-toggle.has-active {
    background: var(--black);
    color: var(--white);
}
.greedy-nav-toggle .bi {
    font-size: .75rem;
    transition: .2s transform;
}
.greedy-nav.is-open .greedy-nav-toggle .bi {
    transform: rotate(180deg);
}
.greedy-nav-hidden {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1030;
    min-width: 200px;
    margin-top: .25rem;
    padding: .25rem;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
}
.greedy-nav.is-open .greedy-nav-hidden {
    display: block;
}
.greedy-nav-hidden .nav-item {
    border-radius: 6px;
}
.greedy-nav-hidden .nav-link {
    padding: .5rem .75rem;
}

.submenu {
    z-index: 1000;
}
/* Фон и скругление держит обёртка, а не список: кнопка «Ещё» лежит рядом со
   списком и на голом фоне страницы читалась бы как оторванная от полосы.
   Сам список ширину не занимает - иначе кнопку уносит к правому краю полосы,
   и между ней и плитками остаётся пустое поле. */
.submenu-nav [data-greedy-list] {
    flex: 0 1 auto;
    /* Список несёт margin-bottom из reboot. Пока полосой был он сам, этот отступ
       отделял её от контента; внутри обёртки он превратился в серое поле под
       плитками, а зазор снизу пропал. Переносим отступ на обёртку. */
    margin-bottom: 0;
}
.submenu-nav {
    margin-bottom: 1rem;
}
.submenu-nav .greedy-nav-toggle {
    margin-left: .25rem;
    padding-inline: .625rem;
}
/* Плитка держит свою ширину. Иначе flex ужимает её до min-content: подпись
   переносится на вторую строку внутри плитки, полоса становится вдвое выше, а
   переполнения при этом не возникает - и кнопка «Ещё» не появляется, потому что
   складывать нечего. */
.submenu .nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
}
.submenu .nav-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
}
.submenu .nav-item .icon {
    fill: var(--white);
}
.submenu .nav-item:hover {
    opacity: .8;
}
.sidebar {
    top: 3rem;
    z-index: 900;
}
.main-menu svg {
    min-width: 16px;
    width: 16px;
    height: auto;
    fill: var(--green);
}
.main-menu li {
    transition: .3s;
}
.main-menu li a {
    color: var(--black);
    width: 100%;
}
.main-menu li a span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.section-menu .main-menu li a span {
    white-space: normal;
}
@media (min-width: 992px) {
    .section-menu .side-menu {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 4rem);
        overflow: hidden;
    }
    .section-menu .main-menu {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, .2) transparent;
    }
}
.main-menu li:hover {
    background: rgba(113,163,46,.8);
    color: var(--green);
}
.main-menu li.active {
    background: var(--dark);
}
.main-menu > li:hover > a,
.main-menu > li.active > a,
.main-menu li:hover svg,
.main-menu li.active svg {
    color: var(--white);
    fill:var(--white);
}
/* Строки «Грузы» и «Транспорт» несут вторую ссылку — «Добавить». Заголовок
   занимает остаток строки и ужимается многоточием, кнопка держит свою ширину. */
.main-menu > li.has-add {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.main-menu > li.has-add > a:first-child {
    min-width: 0;
}
.side-menu-add {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
    width: auto !important;
    padding: .0625rem .5rem;
    border: 1px solid var(--green);
    border-radius: .5rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--green) !important;
    white-space: nowrap;
}
.main-menu > li.has-add:hover > .side-menu-add,
.main-menu > li.has-add.active > .side-menu-add {
    border-color: var(--white);
    color: var(--white) !important;
}
.main-menu > li.has-add > .side-menu-add:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--green) !important;
}
/* Метка «тариф кончается» у пункта «Тариф и оплата». Янтарная, а не красная:
   срок ещё не вышел и доступ работает - красный читался бы как поломка.
   Фон у метки светлый при любом состоянии пункта: на зелёной подсветке
   активного раздела она остаётся читаемой, а второй набор цветов пришлось бы
   держать ещё и для наведения. */
/* Та же янтарная нота в самом разделе «Тариф и оплата» - строкой под датой.
   Пишем цветом, а не плашкой: рядом стоит зелёная дата, и вторая плашка
   спорила бы с ней за внимание. */
.billing-expiring {
    color: #7a5200;
}
.side-menu-expiring {
    flex: 0 0 auto;
    padding: 0 .375rem;
    border-radius: .5rem;
    background: #fff3cd;
    color: #7a5200;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
/* Восклицательный знак у «Моих грузов» и «Моего транспорта»: заявки погасли или
   вот-вот погаснут. Кружок, а не число: счёт стоит на вкладках самого раздела, а
   в меню нужно лишь позвать туда зайти.
   Размер задан в em от кегля меню, чтобы знак не перерастал строку, а ширина
   равна высоте - иначе кружок под одним символом выходит овалом. */
.side-menu-alert {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.side-menu-alert-danger {
    background: var(--bs-danger, #dc3545);
}
/* Жёлтый знак тёмной цифрой: на янтаре белое не читается - та же пара цветов,
   что у вкладки «Истекают» над списком заявок. */
.side-menu-alert-warning {
    background: #ffc107;
    color: #533f03;
}
/* Пункт под курсором и открытый раздел заливаются зелёным, и знак на этом фоне
   спорил бы с заливкой. Белый кружок с цветной цифрой читается на обоих. */
.profile-menu .main-menu li.list-group-item:hover .side-menu-alert,
.profile-menu .main-menu li.list-group-item.active .side-menu-alert {
    background: #fff;
}
.profile-menu .main-menu li.list-group-item:hover .side-menu-alert-danger,
.profile-menu .main-menu li.list-group-item.active .side-menu-alert-danger {
    color: var(--bs-danger, #dc3545);
}
.profile-menu .main-menu li.list-group-item:hover .side-menu-alert-warning,
.profile-menu .main-menu li.list-group-item.active .side-menu-alert-warning {
    color: #533f03;
}
/* Число непрочитанных уведомлений у своего пункта. Не кружок соседних разделов:
   там знак зовёт зайти разобраться, а здесь важно именно сколько нового.
   Поэтому ширина не фиксированная, а минимальная с отбивкой по бокам - «99+»
   в кружок под один символ не влезает. */
.side-menu-count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .375rem;
    border-radius: .625rem;
    background: var(--bs-danger, #dc3545);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}
/* На зелёной заливке (наведение, открытый раздел) красное на красном пропало бы
   - меняемся местами, как восклицательный знак выше. */
.profile-menu .main-menu li.list-group-item:hover .side-menu-count,
.profile-menu .main-menu li.list-group-item.active .side-menu-count {
    background: #fff;
    color: var(--bs-danger, #dc3545);
}
/* Заголовок группы в меню кабинета. Это такой же <li>, как пункт, поэтому в нём
   приходится гасить зелёную подсветку, которую .main-menu li раздаёт по
   наведению: заголовок никуда не ведёт, и подсветка обещала бы ссылку.
   Маркер списка гасим здесь же: пунктам его снимает .list-group-item, а этим
   двум - нечему, и слева от заголовка повисала точка. */
.main-menu > li.side-menu-group,
.main-menu > li.side-menu-groupbox,
.main-menu > li.side-menu-sep {
    list-style: none;
}
/* Заголовок группы теперь кнопка: отступы и типографика остались прежними,
   поэтому правило описывает и сам li, и кнопку внутри - иначе схлопывание
   поменяло бы вид меню, хотя просили только сворачивание. */
.main-menu > li.side-menu-group {
    padding: 0;
}
/* Заголовок группы набран тем же кеглем, что и пункты, и с теми же отступами
   (py-2 px-3): разный размер читался как два разных меню в одной колонке.
   Отличает его только вес и приглушённый цвет - этого хватает, чтобы он не
   притворялся ссылкой. */
.main-menu > li.side-menu-group > .side-menu-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .5rem 1rem;
    background: none;
    border: 0;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    color: rgba(0, 0, 0, .45);
}
/* Стрелка мельче заголовка и того же приглушённого цвета: она подсказка, а не
   действие. Поворот - тот же приём, что у кнопки меню на телефоне. */
.main-menu > li.side-menu-group > .side-menu-group-toggle > .bi {
    flex: 0 0 auto;
    font-size: .75rem;
    transition: transform .2s ease-in-out;
}
.main-menu > li.side-menu-group > .side-menu-group-toggle.collapsed > .bi {
    transform: rotate(-90deg);
}
/* Группа, у которой свёрнут список, не должна оставлять снизу воздух от
   прежнего отступа заголовка. */
.main-menu > li.side-menu-groupbox > .side-menu-items:not(.show) {
    margin-bottom: .25rem;
}
/* ПОДСВЕТКА В МЕНЮ КАБИНЕТА. Общие правила выше раздают её любому `li` внутри
   .main-menu, а в кабинете `li` стало три вида: пункт, заголовок группы и
   контейнер со свёрнутым списком. Наведение на два последних красило иконки
   пунктов в белый, а фона под ними нет - иконки пропадали.
   Поэтому здесь сначала гасим унаследованное для всех, а потом возвращаем
   зелёную подсветку только настоящим пунктам. Ограничено .profile-menu, чтобы
   не задеть меню разделов и шапку, где .main-menu тоже используется. */
.profile-menu .main-menu li:hover {
    background: none;
}
.profile-menu .main-menu li:hover > a {
    color: var(--black);
}
.profile-menu .main-menu li:hover svg {
    fill: var(--green);
}
/* Активный и наведённый пункт - сплошной зелёный с белым текстом и белой
   иконкой. Сплошной, а не полупрозрачный: рядом с active на тёмной заливке
   полупрозрачный выглядел как другой цвет. */
.profile-menu .main-menu li.list-group-item:hover,
.profile-menu .main-menu li.list-group-item.active {
    background: var(--green);
}
.profile-menu .main-menu li.list-group-item:hover > a,
.profile-menu .main-menu li.list-group-item.active > a,
.profile-menu .main-menu li.list-group-item:hover svg,
.profile-menu .main-menu li.list-group-item.active svg {
    color: var(--white);
    fill: var(--white);
}
/* Заголовок группы подсветки не получает вовсе: он никуда не ведёт. Меняется
   только цвет текста и стрелки - этого достаточно, чтобы показать, что по нему
   можно нажать. */
.profile-menu .main-menu li.side-menu-group > .side-menu-group-toggle:hover {
    color: var(--green);
}
.main-menu > li.side-menu-group:hover,
.main-menu > li.side-menu-groupbox:hover {
    background: none;
    color: rgba(0, 0, 0, .45);
}
.drophover:hover .dropdown-menu {
    display: block;
    position: absolute;
    inset: 0 auto auto 0;
    margin: 0;
    transform: translate(280px, 0);
}
/* The submenu of the current section carries Bootstrap's .show so the touch
   accordion starts expanded. On desktop .dropdown-menu is an absolutely
   positioned fly-out, so .show left it permanently hanging over the page.
   Here hover is the only thing that may open it. */
@media (min-width: 992px) {
    .side-menu .drophover .dropdown-menu.collapse.show {
        display: none;
    }
    .side-menu .drophover:hover .dropdown-menu.collapse.show {
        display: block;
    }
}
.dropdown-menu {
    transition: all 0.2s ease-in-out;
}
.dropdown-menu a {
    position: relative;
}
.main-menu .dropdown-menu li:hover,
.main-menu .dropdown-menu li.active {
    background: var(--light-green);
    color: var(--black);
}
.dropdown-menu a:before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border: 1px solid var(--green);
    background: var(--green);
    border-radius: 10px;
}
/*
 * Меню под аватаркой в шапке. Зелёный маркер выше — для фай-аутов бокового
 * меню: он display:block без позиционирования, поэтому встаёт отдельной
 * строкой над пунктом. Здесь он не нужен.
 *
 * z-index берём выше липкого .submenu (у него 1000): при равном значении
 * подменю идёт позже в разметке и накрывает первый пункт.
 */
.user-menu {
    z-index: 1100;
}

/*
 * Переключатель языков. Три правки, и все три — повторение того, что уже
 * решено для меню под аватаркой чуть выше:
 *
 * z-index: липкая полоса .submenu идёт позже в разметке и при равном значении
 * накрывает список, из-за чего первый язык уезжал под неё.
 *
 * Маркер: .dropdown-menu a:before рисует зелёную точку для фай-аутов бокового
 * меню. Он display:block без позиционирования, поэтому встаёт отдельной
 * строкой НАД пунктом — в списке языков это просто мусор.
 *
 * Активный пункт: бутстраповский .active синий, а тема зелёная.
 */
.language-switcher .dropdown-menu {
    z-index: 1100;
    min-width: 10rem;
}
.language-switcher .dropdown-item:before {
    content: none;
}
.language-switcher .dropdown-item.active,
.language-switcher .dropdown-item:active {
    background: var(--light-green);
    color: var(--black);
}
.language-switcher .dropdown-item:hover {
    background: var(--light-green);
}
.user-menu a:before {
    content: none;
}
/* Touch-only accordion control; the desktop fly-out opens on hover instead. */
.side-menu-toggle {
    display: none;
}
/* Свёрнутое меню кабинета на телефоне: строка с текущим разделом и стрелка.
   Прятать её на десктопе незачем - там .d-lg-none, а список рядом висит
   раскрытым через .d-lg-flex поверх .collapse. */
.profile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    padding: .625rem 1rem;
    background: none;
    border: 0;
    border-radius: 1rem;
    font-weight: 600;
    color: var(--black);
    text-align: left;
}
.profile-menu-toggle > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-menu-toggle > .bi {
    flex: 0 0 auto;
    color: var(--green);
    transition: transform .2s ease-in-out;
}
.profile-menu-toggle:not(.collapsed) > .bi {
    transform: rotate(180deg);
}
.drophover .dropdown-toggle::after {
    margin-left: auto;
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
}
.main-info {
    position: relative;
    z-index: 100;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
}
.main-info:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
    background: rgba(113,163,46,.8);
}
.main-info a {
    color: #fff;
}
#panel-search {
    background: #eee;
    height: 2.5rem;
    border-radius: 5px;
}
#panel-search .nav-tabs {
    border-bottom: none;
}
#panel-search .nav-link {
    gap: .5rem;
    cursor: pointer;
    padding: 0 18px;
    font-size: 0;
    color: var(--white);
    height: 100%;
    border: none;
    border-right: 1px solid #dadada;
    background: transparent;
    display: flex;
    align-items: center;
}
#panel-search .nav-item:last-child .nav-link {
    border-right: none;
}
#panel-search .nav-link.active {
    background: #71a32e;
    border-radius: 5px;
    font-size: 1rem;
    border: none;
}
#panel-search .icon {
    fill: #78909c;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
#panel-search .nav-link.active .icon {
    fill: var(--white);
}
#panel-search .radio-name {
    white-space: nowrap;
}
.add-free-side {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--muted-grey) 100%);
}

/* Кнопка прижата к низу карточки: тексты у трёх карточек разной длины, и без
   этого кнопки стояли лесенкой. Раньше их держал на месте фиксированный
   отступ под картинку в углу - картинок больше нет. */
.add-free-side > .col-12 {
    min-height: 100%;
}
.order-lists .nav-link {
    font-size: 1.5rem;
    color: var(--black);
}
.order-lists .nav-link.active {
    color: var(--green);
    font-weight: 400;
}
.row-main td {
    padding: 1rem;
    font-size: 14px;
}

.row-main td span {
    font-size: 14px;
}
.row-main td .td {
    display: flex;
    align-items: center;
    gap: .5rem
}
.row-main td .td + .td {
    margin-top: .5rem;
}
.row-main.last {
    border-bottom-color: transparent;
}

/* Шапка над таблицей заявок: заголовок, итог поиска и строка про помощника.
   Отступ задаём блоку целиком, а у абзацев внутри снимаем: у каждого свой
   нижний margin от Bootstrap, и строки расходились по вертикали тем сильнее,
   чем больше их в шапке. */
.table-desc {
    margin-bottom: 1.5rem;
}
.table-desc p {
    margin-bottom: 0;
}

/* Скругление у полосы слева работает только при separate: в режиме collapse
   браузер игнорирует border-radius у ячеек, а границы соседних ячеек ещё и
   схлопываются в одну. Отступов между ячейками не добавляем. */
.table-order {
    border-collapse: separate;
    border-spacing: 0;
    /* Ширины колонок фиксированные: при auto в расчёт попадает и ячейка
       раскрытой панели (она colspan на всю ширину), из-за чего при открытии
       заявки колонки шапки прыгали. */
    table-layout: fixed;
}
.table-order td {
    overflow-wrap: break-word;
}
/* Проценты обязаны давать ровно 100 на каждый набор колонок. Остаток при
   table-layout: fixed браузеры делят по-разному: Chrome растягивает колонки
   пропорционально, Firefox оставляет его пустой полосой справа - у гостя без
   колонки «Менеджер» сумма была 88%, и таблица обрывалась, не доходя до края
   контейнера. Поэтому набор с менеджером ({admin} в шапке ставит таблице класс
   has-manager) и доска транспорта, где колонки груза нет вовсе, получают свои
   доли, а не поправку на глазок. */
.table-order .tc-from    { width: 17%; }
.table-order .tc-to      { width: 17%; }
.table-order .tc-date    { width: 12%; }
.table-order .tc-type    { width: 16%; }
.table-order .tc-cargo   { width: 17%; }
.table-order .tc-client  { width: 21%; }

.table-order.has-manager .tc-from    { width: 15%; }
.table-order.has-manager .tc-to      { width: 15%; }
.table-order.has-manager .tc-date    { width: 11%; }
.table-order.has-manager .tc-type    { width: 14%; }
.table-order.has-manager .tc-cargo   { width: 15%; }
.table-order.has-manager .tc-manager { width: 12%; }
.table-order.has-manager .tc-client  { width: 18%; }

/* Доска транспорта: колонок на одну меньше - наименования груза у борта нет,
   вместо него тип транспорта. Освободившуюся долю отдаём маршруту и
   перевозчику. */
.table-order.table-transport .tc-from    { width: 20%; }
.table-order.table-transport .tc-to      { width: 20%; }
.table-order.table-transport .tc-date    { width: 15%; }
.table-order.table-transport .tc-type    { width: 19%; }
.table-order.table-transport .tc-client  { width: 26%; }

.table-order.table-transport.has-manager .tc-from    { width: 18%; }
.table-order.table-transport.has-manager .tc-to      { width: 18%; }
.table-order.table-transport.has-manager .tc-date    { width: 13%; }
.table-order.table-transport.has-manager .tc-type    { width: 16%; }
.table-order.table-transport.has-manager .tc-manager { width: 13%; }
.table-order.table-transport.has-manager .tc-client  { width: 22%; }

/* Компактная таблица кабинета: четыре колонки вместо семи - боковое меню
   забирает треть ширины, и на долях доски слова рвались по слогам. Здесь
   проценты дают ровно 100: набор колонок фиксирован, «Менеджер» в компактной
   строке не печатается и у админа. */
.table-order.table-compact .tc-route  { width: 34%; }
.table-order.table-compact .tc-date   { width: 16%; }
.table-order.table-compact .tc-cargo  { width: 24%; }
.table-order.table-compact .tc-client { width: 26%; }
/* Стрелка между пунктами маршрута - разделитель, а не содержимое: бледная и
   в собственной строке, иначе читается как часть названия города. */
.table-order .route-sep {
    color: #9aa7b4;
    line-height: 1;
    margin: 2px 0;
}
.table-order .route-sep i {
    font-size: 14px;
}

/* Разделение заявок - как на старом сайте: зазоров нет, заявки отделяет
   тонкая линия снизу. Чередование строк убрано: сплошная подложка #f7f7f7
   спокойнее, чем меняющийся через строку фон. */
.table-order tbody tr.row-main > td {
    background: #f7f7f7;
    border-bottom: 1px solid #dde5f0;
}
.table-order tbody tr.row-main:hover > td {
    background: #f0f2f4;
}
/* В кабинете заявки на белом. На досках серая подложка отделяет их друг от
   друга, а здесь у каждой своя полоса управления снизу - отделять нечем не
   приходится, и серое только глушит содержимое. */
.table-own tbody tr.row-main > td {
    background: var(--white);
}
.table-own tbody tr.row-main:hover > td {
    background: var(--cool-grey);
}

/* Раскрытая строка и её панель читаются как одна заявка: у строки гасим
   нижнюю линию, панель закрывает её собой. Класс row-open вешает JS по
   событию Bootstrap: `tr:has(+ tr.show) > td` Chrome матчит, но к ячейкам
   не применяет. */
.table-order tbody tr.accordion-collapse > td {
    background: #fff;
    border-bottom: 1px solid #dde5f0;
}
.table-order tbody tr.row-main.row-open > td {
    background: #eef1f4;
    border-bottom-color: transparent;
}

/* Раскрытие без анимации: на старом сайте это чекбокс, панель появляется
   мгновенно. Bootstrap тянет высоту 0.35s - гасим переход. */
.table-order tbody tr.collapsing {
    transition: none;
}

/* Текст-описание заявки под карточками. Тонированная подложка с зелёной
   полосой слева вместо рамки: рамка спорила с рамками карточек над текстом. */
.order-summary {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 1rem 0 0;
    padding: .75rem 1rem;
    border-left: 4px solid var(--green);
    border-radius: 4px;
    background: #f3f6f2;
    color: #4a5568;
    font-size: 13px;
    line-height: 1.5;
}
.order-summary .bi {
    flex: 0 0 auto;
    margin-top: .1rem;
    color: var(--green);
}
.order-summary strong {
    color: #2c3e50;
}
.order-summary a {
    color: var(--green);
    text-decoration: underline;
}

/* Число продлеваемых заявок в заголовке окна: рядом с белым текстом на
   зелёном нужен свой оттенок, иначе цифра сливается с названием. */
.renew-count {
    font-weight: 700;
    color: #ffe08a;
    white-space: nowrap;
}

/* Хлебные крошки кабинета. Бокового меню на этих страницах нет, поэтому крошки
   работают как «назад в раздел», а не как путь от главной: стрелка смотрит
   влево и стоит перед названием. */
.breadcrumbs {
    font-size: 14px;
}
.breadcrumbs .bi {
    font-size: 12px;
    margin-right: .25rem;
}
.breadcrumbs-link {
    color: var(--black);
    text-decoration: none;
}
.breadcrumbs-link:hover {
    color: var(--green);
}
.breadcrumbs-current {
    color: #78909c;
}
/* Разделитель пути от главной (chunks/main/crumbs.tpl). Отступ справа от него
   снимаем: у крошек кабинета стрелка стоит перед словом и место ей нужно, а
   здесь она сама стоит в промежутке, который уже держит gap. */
.breadcrumbs-sep {
    color: #b0bec5;
    margin-right: 0 !important;
    font-size: 10px !important;
}

/* Красная полоса под категорией в кабинете: сколько заявок перестало
   показываться. Приклеена к строке снизу, как на старом сайте, поэтому у самой
   строки в этом случае снимается нижнее скругление. */
/* Плашка модератора в кабинете. Белой на белом фоне её не замечали: панель
   ничем не отличалась от меню над ней. Зелёная подложка с полосой слева и
   воронкой в заголовке — тот же приём, что у «Истек срок», только не тревожный:
   это не проблема, а новая возможность. */
.manager-notice {
    background: var(--soft-green);
    border: 1px solid var(--light-green);
    border-left: 4px solid var(--green);
    color: var(--black);
}
.manager-notice-head {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .35rem;
    font-weight: 700;
    color: var(--forest-green);
}
.manager-notice-head .bi {
    flex: none;
    margin-top: .15rem;
    color: var(--green);
}
.expired-note {
    display: block;
    background: #f4443c;
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    padding: .35rem .75rem;
    border-radius: 0 0 .375rem .375rem;
    text-decoration: none;
}
.expired-note:hover {
    background: #dc3a33;
    color: var(--white);
    text-decoration: underline;
}
.list-group-item > a.list-group-item {
    border-radius: .375rem .375rem 0 0;
}

/* Колонка выделения в кабинете заявок. Узкая, по ширине самой галочки: на
   старом сайте она такая же, растягивать её незачем.

   Ширину держим в rem, а не в «1%»: у таблицы table-layout: fixed, и процент
   там берётся буквально — колонка получала 12px при 16px полей и 14px самой
   галочке, так что галочка вылезала на соседнюю колонку и терялась в городе. */
.table-order .col-select {
    width: 3rem;
    white-space: nowrap;
    vertical-align: top;
}
.table-order .col-select .form-check-input {
    margin: 0;
    cursor: pointer;
}
/* Направление: флаг, код страны и её название держатся одной строкой, город
   идёт в скобках следом. */
.direction-point {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

/* Кабинет заявок: полоса управления уезжает под данные, во всю ширину строки.

   Ячейка таблицы не умеет вставать под соседями, а вторая <tr> на заявку
   развалила бы удаление: pb-swap сносит один #order-N, и полоса иконок
   осталась бы висеть без заявки. Поэтому строку раскладываем гридом - разметка
   не меняется вовсе, а управление просто занимает второй ряд на все колонки.

   Только с планшета и шире: ниже 768px строки и так превращаются в карточки
   (display: block) правилами в медиазапросе. */
@media (min-width: 769px) {
    .table-own thead tr,
    .table-own tbody tr.row-main {
        display: grid;
        grid-template-columns: 3rem 2fr 1fr 1.4fr 1.2fr;
    }
    /* Та же карточка на чужой странице: чекбокса выделения нет, и без своей
       раскладки первая колонка вставала в отведённые ему 3rem — направление
       сжималось в столбик флагов, а справа оставалась пустая пятая дорожка. */
    .table-own.table-own-readonly thead tr,
    .table-own.table-own-readonly tbody tr.row-main {
        grid-template-columns: 2fr 1fr 1.4fr 1.2fr;
    }
    .table-own thead .col-controls {
        display: none;
    }
    /* Нижняя граница есть у каждой ячейки, а высота у грида своя на каждую:
       без этого вместо одной линии под строкой выходит пять огрызков на разной
       высоте — то, что и было видно как рваные полурамки. */
    .table-own tbody tr.row-main > td {
        border-bottom: 0;
    }
    /* Полоса управления встаёт не под всей строкой, а в пустоту справа: у
       «Направления» четыре строки, а у даты, груза и типа — одна-две, и под
       ними оставалось незанятое место высотой с саму полосу. Заняв его, заявка
       стала короче на треть, а отдельной ленты во всю ширину больше нет. */
    .table-own tbody tr.row-main > .col-controls {
        grid-column: 3 / -1;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
    .table-own tbody tr.row-main > .col-controls > div {
        justify-content: center;
    }
    /* Галочка и направление тянутся на оба ряда. Галочка — ради зелёной метки
       статуса на её левой границе, иначе метка обрывалась на половине высоты.
       Направление — потому что оно и есть самая высокая ячейка: пока оно
       занимало только первый ряд, дата, груз и тип растягивались под него, и
       пустота оставалась на месте, а полоса управления просто добавлялась
       снизу.

       Пишем «span 2», а не «1 / -1»: явных рядов у грида нет, оба создаются
       неявно, а -1 указывает на последнюю линию явной сетки — то есть на
       первую же, и растяжка молча не срабатывает.

       Цепляемся за класс .col-route, а не за data-label: подпись колонки идёт
       из лексикона и меняется вместе с языком. Пока селектор ждал
       «Направление», а лексикон отдавал «Маршрут», ячейка не растягивалась —
       во втором ряду оставалась пустая клетка, и на наведении она белела
       полосой поверх серой строки. */
    .table-own:not(.table-own-readonly) tbody tr.row-main > .col-select,
    .table-own:not(.table-own-readonly) tbody tr.row-main > .col-route {
        grid-row: 1 / span 2;
    }
    /* Линия между заявками — на самой строке: у грида это одна линия во всю
       ширину, границы ячеек дали бы огрызки на разной высоте. */
    .table-own tbody tr.row-main {
        border-bottom: 1px solid var(--bs-border-color);
    }
    /* На странице пользователя таблица без полосы управления, а линию под
       строкой рисовала именно она - заявки сливались в сплошной список.
       Вешаем разделитель на саму строку: у грида это одна линия во всю
       ширину, тогда как границы ячеек дали бы четыре огрызка. */
    .table-own.table-own-readonly tbody tr.row-main {
        border-bottom: 1px solid var(--bs-border-color);
    }
    .table-own.table-own-readonly tbody tr.row-main:last-child {
        border-bottom: 0;
    }
}

/* Кабинет заявок на телефоне - карточка старого сайта.

   Общее правило .table-order отдаёт каждой ячейке подпись слева и значение
   справа; для «Направления» это выходило боком: подпись съедала 38% ширины, а
   флаги, просмотры и «Транспорт по вашему направлению» жались в остаток и
   ломались по три строки. На старом сайте направление - шапка карточки во всю
   ширину без подписи, галочка выделения в правом верхнем углу, а управление -
   ровная сетка иконок. Табличные строки «Дата погрузки / Наименование груза /
   Тип транспорта» остаются как есть, там пара «подпись - значение» и нужна. */
@media (max-width: 768px) {
    .table-own tbody tr.row-main {
        position: relative;
    }
    /* Галочка не занимает отдельную полосу карточки: своей строкой она стоила
       целого ряда над направлением и читалась как пустая ячейка. */
    .table-own tbody tr.row-main > .col-select {
        position: absolute;
        top: .5rem;
        right: .5rem;
        padding: 0;
        border-bottom: 0;
    }
    /* Подписи в кабинете длиннее, чем в выдаче: «Наименование груза» в 38%
       ломалось на две строки, а справа от него оставалось пусто. */
    .table-order.table-own tbody tr.row-main > td::before {
        width: 45%;
    }
    .table-own tbody tr.row-main > .col-route {
        text-align: left;
    }
    .table-own tbody tr.row-main > .col-route::before {
        display: none;
    }
    /* Место под галочку выкраивает только первая строка направления: отдавать
       отступ всей ячейке нельзя - плашки просмотров и встречного борта тогда
       переносятся раньше времени. */
    .table-own:not(.table-own-readonly) tbody tr.row-main > .col-route .direction {
        padding-right: 1.75rem;
    }
    /* Точки направления в столбик: страна отправления сверху, назначения
       снизу. Во flex-wrap они вставали в строку и переносились по середине
       названия города. */
    .table-own tbody tr.row-main .direction {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }
    /* Управление - сетка в четыре колонки, как на старом сайте. Во flex-wrap
       кнопки шириной 68px оставляли рваный правый край, а подписи вроде
       «Выделить» рвались посреди слова. */
    .table-own tbody tr.row-main > .col-controls .order-controls {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: .75rem .25rem;
    }
    .table-own tbody tr.row-main > .col-controls .btn-control {
        width: auto;
    }
}

/* Панель групповых действий: выключенные кнопки видно, но они не зовут нажать. */
.my-toolbar .btn:disabled {
    opacity: .5;
}
/* «Выделить все» в панели — запаска для телефона, где шапка таблицы скрыта.
   На широком экране работает галочка в thead, а две сразу только путают. */
.my-toolbar-all {
    display: none;
}
.my-toolbar-all input {
    cursor: pointer;
}
@media (max-width: 768px) {
    .my-toolbar-all {
        display: flex;
    }
}

/* ТОП-заявка. Песочный фон с концентрическим узором и пунктирная рамка слева -
   как на старом сайте; узор нужен, чтобы строка читалась как особая, а не как
   ещё одна «жёлтая» среди статусных подсветок. */
.table-order tbody tr.row-main.top td {
    background: #fef8e2;
    background-image: repeating-radial-gradient(#ffefaf 52.94%, #fff 54.2%, #ffefaf 54.62%);
}
.table-order tbody tr.row-main.top:hover td {
    background: #fdf3d2;
    background-image: repeating-radial-gradient(#ffefaf 52.94%, #fff 54.2%, #ffefaf 54.62%);
}
.table-order tbody tr.row-main.top td:first-child {
    border-left: 3px dashed var(--orange);
}
/* Заявка, скрытая этим же пользователем. Она поднята над списком только ему
   (FreightController::getPaginator), поэтому строка должна читаться как своя:
   красная пунктирная кромка и бледный фон - тот же язык, что у ТОПа, но в
   цвете плашки «скрыта». */
.table-order tbody tr.row-main.hidden-mine td {
    background: #fdf1f1;
}
.table-order tbody tr.row-main.hidden-mine:hover td {
    background: #fbe7e7;
}
.table-order tbody tr.row-main.hidden-mine td:first-child {
    border-left: 3px dashed var(--bs-danger, #dc3545);
}

/* Пояснение «почему вы это видите» в раскрытой строке. */
.order-top-note {
    border: 1px dashed var(--orange);
    border-radius: .5rem;
    background: #fff9e8;
    padding: .75rem 1rem;
    font-size: 14px;
    line-height: 1.45;
}

/* Подложка модалок fancybox. Своя у неё почти непрозрачная
   (rgba(24,24,27,.95)) - страница за окном пропадает совсем, тогда как
   бутстраповские модалки на сайте затемняют её наполовину. Селектор с body,
   потому что fancybox.css подключается после main.css и при равной
   специфичности выигрывает он. */
body .fancybox__container {
    --fancybox-backdrop-bg: rgba(0, 0, 0, .5);
}

/* Выделение заявки (платная опция, App/elements/chunks/fields/highlight.tpl):
   `font` — жирная строка, `frame` — рамка вокруг неё. Рамку рисуем внутренними
   тенями на ячейках, а не border на tr: у таблицы border-collapse и
   overflow:hidden с закруглением, обычный бордюр строки в них теряется. */
.table-order tbody tr.row-main.highlight-font td {
    font-weight: 700;
}
.table-order tbody tr.row-main.highlight-font td span,
.table-order tbody tr.row-main.highlight-font td .td {
    font-weight: 700;
}
/* В своём кабинете выделение шрифтом не рисуем. Оно работает в выдаче, где
   заявку надо вырвать из ряда чужих; среди собственных заявок отличать нечего,
   а жирной становилась вся карточка - от стран до подписей. На старом сайте
   так и было: класс выделения попадал только в чанки выдачи, строка
   «Моих грузов» (tpl.orders.row.my.orders.new_art.admin) знала лишь
   «истёк срок». Что опция включена, видно по зелёной галочке на кнопке
   «Выделить». */
.table-order.table-own:not(.table-own-readonly) tbody tr.row-main.highlight-font td,
.table-order.table-own:not(.table-own-readonly) tbody tr.row-main.highlight-font td span,
.table-order.table-own:not(.table-own-readonly) tbody tr.row-main.highlight-font td .td {
    font-weight: inherit;
}
.table-order tbody tr.row-main.highlight-frame td {
    box-shadow: inset 0 2px 0 var(--green), inset 0 -2px 0 var(--green);
}
.table-order tbody tr.row-main.highlight-frame td:first-child {
    box-shadow: inset 0 2px 0 var(--green), inset 0 -2px 0 var(--green), inset 2px 0 0 var(--green);
}
.table-order tbody tr.row-main.highlight-frame td:last-child {
    box-shadow: inset 0 2px 0 var(--green), inset 0 -2px 0 var(--green), inset -2px 0 0 var(--green);
}


/* На узких экранах строка — это блок со своей рамкой (см. @media ниже), и
   рамку заявки красим прямо на нём: тени на ячейках дали бы по рамке на
   каждое поле. */
@media (max-width: 768px) {
    .table-order tbody tr.row-main.highlight-frame {
        border-color: var(--green);
        border-width: 2px;
    }
    .table-order tbody tr.row-main.highlight-frame td,
    .table-order tbody tr.row-main.highlight-frame td:first-child,
    .table-order tbody tr.row-main.highlight-frame td:last-child {
        box-shadow: none;
    }
}

/* В кабинете рамки выделения нет вовсе. Она нужна, чтобы заявку заметили
   среди чужих, — на досках это и покупают. В своём списке все заявки твои,
   и обводка вокруг одной из них только шумит. Идёт последней: правила выше
   той же силы, и снимает их порядок. */
.table-own tbody tr.row-main.highlight-frame,
.table-own tbody tr.row-main.highlight-frame td,
.table-own tbody tr.row-main.highlight-frame td:first-child,
.table-own tbody tr.row-main.highlight-frame td:last-child {
    box-shadow: none;
}
/* Только на самой строке: на телефоне рамку заявки рисует она, и зелёный цвет
   с двойной толщиной надо вернуть к обычным. Ячейкам границы не трогаем —
   иначе включаются все четыре стороны и заявка расчерчивается на клетки. */
.table-own tbody tr.row-main.highlight-frame {
    border-color: #dee2e6;
    border-width: 1px;
}

/* Подписи колонок переносятся: у морского и авиа бортов заголовок длинный
   («Страна/город/аэропорт отправки»), а при table-layout: fixed nowrap не
   расширял колонку - текст просто налезал на соседнюю. */
.table-order th {
    white-space: normal;
    /* Подписи разной длины: часть переносится на две строки, часть нет.
       По умолчанию Bootstrap прижимает их к низу ячейки, и однострочные
       уезжали вниз - выравниваем по верху. */
    vertical-align: top;
}
.accordion-button::after {
    display: none;
}
.accordion-button {
    display: flex;
    justify-content: center;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
.accordion-button .bi {
    transition: transform 0.3s;
}
.accordion-button:not(.collapsed) .bi {
    transform: rotate(180deg);
}
tr.accordion-collapse .card-body {
    font-size: .875rem;
}
tr.accordion-collapse .card-body hr {
    margin: .5rem 0;
}
.card-header {
    background: #E9EEF4;
    font-weight: bold;
}
.card-body .table tr:last-child {
    border-color: transparent;
}

@media (max-width: 768px) {
    .table-order thead {
        display: none;
    }
    .table-order,
    .table-order tbody,
    .table-order tr,
    .table-order td {
        display: block;
        width: 100%;
    }
    .table-order tr {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: .5rem;
        overflow: hidden;
    }
    .table-order td {
        padding: .75rem 1rem;
        border: none;
        border-bottom: 1px solid #eee;
        text-align: left;
    }
    .table-order td:last-child {
        border-bottom: none;
    }
    .table-order td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        color: #666;
        margin-bottom: 4px;
        font-size: 0.85rem;
    }

    /* One stacked field per line made a result card 624px tall — barely one
       result per screen across 20 of them. Pair the fields up instead; the
       last cell holds the actions and keeps the full width. Detail rows are
       excluded, they are full-width colspan panels. */
    .table-order tbody tr:not(.accordion-collapse) {
        display: block;
    }
    /* The field name sits on the left and the value is right-aligned opposite
       it, one field per line with a hairline between — the layout the old site
       used. Подпись — float, а не absolute: у ячейки своя разметка значения
       (два-три ряда, <br>), поэтому во флекс её не завернёшь, а absolute не
       держал высоту — двухстрочная «Страна/город погрузки» вылезала на
       соседнюю строку. overflow создаёт BFC, и ячейка растёт по самой
       высокой из двух колонок. */
    .table-order tbody tr:not(.accordion-collapse) > td {
        display: block;
        width: auto !important;
        padding: .5rem;
        overflow: hidden;
        border-bottom: 1px solid #eee;
        text-align: right;
    }
    .table-order tbody tr:not(.accordion-collapse) > td::before {
        float: left;
        width: 38%;
        margin: 0;
        padding-right: .5rem;
        font-size: .875rem;
        font-weight: 600;
        color: var(--black);
        text-align: left;
        text-transform: none;
        letter-spacing: normal;
    }
    /* The actions cell carries no data-label, so it takes the whole width. */
    .table-order tbody tr:not(.accordion-collapse) > td:not([data-label]) {
        border-bottom: none;
        text-align: left;
    }

    /* Страна и город — одной строкой. В столбик каждое направление занимало
       две строки, а место справа от подписи оставалось пустым. */
    .table-order tbody tr:not(.accordion-collapse) > td .td {
        display: inline-flex;
        vertical-align: middle;
    }
    .table-order tbody tr:not(.accordion-collapse) > td .td + .td {
        margin-top: 0;
        margin-left: .35rem;
    }

    /* Category tabs — переключатель доски и над формой добавления, и над
       своими объявлениями. Шести кнопкам в столбик уходил весь экран, а форма
       или список оказывались за сгибом. Ряд остаётся рядом и уезжает
       горизонтальной прокруткой, как на старом сайте: кнопки по ширине
       подписи, кегль мельче. */
    .category-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        /* Свайп по полосе не должен доставаться странице: iOS передаёт его
           родителю, и вся страница уезжает вбок резиновой прокруткой.
           Полосу прокрутки прячем, а край растворяем - так же, как у
           #panel-search и #userTab: это и есть подсказка, что полосу тянут. */
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
    .category-tabs::-webkit-scrollbar {
        display: none;
    }
    .category-tabs > .col {
        flex: 0 0 auto;
    }
    /* Активная категория уезжала за правый край полосы: у авиа- и почтовых
       грузов она пятая из шести, и открыв форму, пользователь видел ряд
       чужих кнопок, а свою - нет. Ставим её первой, как на старом сайте;
       порядок в разметке при этом не трогаем - на десктопе, где помещаются
       все шесть, ряд остаётся в привычном порядке. */
    .category-tabs > .col.is-active {
        order: -1;
    }
    .category-tabs .btn {
        width: auto;
        white-space: nowrap;
        padding: .5rem .75rem;
        font-size: .875rem;
    }

    /* Expanded detail panel. Its four cards are Bootstrap .col, i.e.
       flex: 1 0 0% — a zero basis, so they never wrapped, they just shrank:
       at 390px each was 67px wide and the text broke one character per line.
       Give them a real basis so they wrap into two columns, and one below. */
    .table-order .accordion-collapse .card.col {
        flex: 1 1 calc(50% - .5rem);
    }
}
.section-content h2 {
    font-size: 1.75rem;
}
.section-content h3 {
    font-size: 1.5rem;
}
/*.section-content p,*/
/*.section-content li {*/
/*    font-size: .875rem;*/
/*}*/
.card-item {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: var(--white);
    border-radius: var(--bs-border-radius-lg);
}
.card-item.border-left {
    border-left: 6px solid var(--green);
}
.card-item.vip {
    background: #fcfdfe;
    background-image: radial-gradient(circle farthest-corner at 10% 20%,rgba(226,240,254,1) 0%,rgba(255,247,228,1) 90%);
}
.card-item.top {
    background: #fef8e2;
    background-image: none;
    background-image: repeating-radial-gradient(#ffefaf 52.94%,#fff 54.2%,#ffefaf 54.62%);
}
.card-item ul .bi {
    color: var(--default-icon);
}
.card-item:hover .title,
.card-item:hover .bi-arrow-right {
    color: var(--green);
    fill: var(--green);
}
/* Строка репутации внизу карточки держит высоту, даже когда репутации нет:
   иначе низ карточки короче на эту строку, и кнопки соседей по ряду стоят
   на разных уровнях. */
.card-item .card-meta-row {
    min-height: 1.5rem;
}
.company-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    color: var(--black);
    background: var(--white);
    border-radius: var(--bs-border-radius-lg);
}
.company-card-photo {
    position: relative;
    background: var(--white);
}
.company-card-photo img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}
.company-card-status {
    position: absolute;
    left: 12px;
    bottom: -12px;
}
.company-card-status > div {
    margin-bottom: 0 !important;
}
.company-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 24px 16px 16px;
    background: var(--cool-grey);
}
.company-card.vip .company-card-body,
.company-card.top .company-card-body {
    background: #fef8e2;
    background-image: repeating-radial-gradient(#ffefaf 52.94%,#fff 54.2%,#ffefaf 54.62%);
}
.company-card-title {
    font-weight: 600;
    color: var(--dark);
}
.company-card:hover .company-card-title {
    color: var(--green);
}
.company-card-place {
    margin-top: auto;
    font-size: 14px;
    color: var(--slate);
}
.company-card-role {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
}
.company-card-role .bi {
    color: var(--default-icon);
}
.bi-plus::before, .bi-plus-lg::before {
    font-weight: bold !important;
}
.alert {
    border-color: transparent;
    font-size: 14px;
    line-height: 18px;
}
.alert.alert-success {
    color: var(--green);
}
.alert p {
    margin: 0;
}
.alert p + p {
    margin-top: 1rem;
}
.alert-success {
    background: rgba(139, 195, 74, .1);
}
.seo-links a {
    text-decoration: none;
    color: var(--dark)
}
.seo-links a:hover {
    color: var(--green)
}
.ellipsis {
    /* break-all split ordinary words mid-syllable ("Таможенное оформлен|ие").
       Only break a word when it cannot fit on a line of its own. */
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    /* Высота в em и свой line-height, а не 4.5rem: у заголовков бутстрап
       ставит line-height 1.2, а у small - font-size .875rem, и фиксированная
       высота в rem переставала быть кратной строке. В карточке блога это
       вылезало обрезком третьей строки заголовка поверх описания. */
    line-height: 1.5;
    height: calc(1.5em * 3);
}
.ellipsis.row-2 {
    -webkit-line-clamp: 2;
    height: calc(1.5em * 2);
}
.ellipsis.row-3 {
    -webkit-line-clamp: 3;
    height: calc(1.5em * 3);
}
.ellipsis.row-8 {
    -webkit-line-clamp: 8;
    height: calc(1.5em * 8);
}
/* То же обрезание, но без фиксированной высоты: в списках, где выравнивать
   соседей не с чем, зарезервированная вторая строка заголовка отрывала его
   от анонса пустой полосой. */
.clamp {
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}
.clamp-2 {
    -webkit-line-clamp: 2;
}
.clamp-3 {
    -webkit-line-clamp: 3;
}
.consultant-photo {
    background-color: #f0f6fa;
    filter: brightness(.95);
}

.f-carousel {
    --f-carousel-slide-height: 60% !important;
    --f-carousel-slide-width: calc(100% / 3) !important;
    --f-carousel-spacing: 10px !important;

    height: 250px;
}
.f-caption {
    display: none !important;
}
.ads-control button:not([disabled]) {
    background-color: var(--grey);
    color: var(--black);
    text-align: center;
}
[disabled] .bi {
    color: var(--black) !important;
}
.ads-control a:hover,
.ads-control button:hover {
    background-color: var(--black) !important;
    color: #fff !important;
}
.filepond--item {
    width: 120px !important;
    height: 120px !important;
}
.filepond--image-preview {
    object-fit: cover;
}
.filepond--drop-label {
    background-color: var(--cool-grey);
}
.filepond--credits {
    display: none !important;
}
.company-content .card-item {
    background-color: var(--cool-grey);
}
i.flag:not(.icon) {
    display: inline-block;
    width: 16px;
    height: 11px;
    line-height: 18px;
    vertical-align: baseline;
    margin: 0;
    text-decoration: inherit;
    speak: none;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
i.flag:not(.icon)::before {
    display: inline-block;
    content: "";
    background: url("/assets/images/flags.png") no-repeat 0 15px;
    background-position-x: 0px;
    background-position-y: 15px;
    width: 16px;
    height: 11px;
    vertical-align: super;
}
i.flag.ad:before,
i.flag.andorra:before {
    background-position:0 0
}
i.flag.ae:before,
i.flag.uae:before,
i.flag.united.arab.emirates:before {
    background-position:0 -26px
}
i.flag.af:before,
i.flag.afghanistan:before {
    background-position:0 -52px
}
i.flag.ag:before,
i.flag.antigua:before {
    background-position:0 -78px
}
i.flag.ai:before,
i.flag.anguilla:before {
    background-position:0 -104px
}
i.flag.al:before,
i.flag.albania:before {
    background-position:0 -130px
}
i.flag.am:before,
i.flag.armenia:before {
    background-position:0 -156px
}
i.flag.an:before,
i.flag.netherlands.antilles:before {
    background-position:0 -182px
}
i.flag.angola:before,
i.flag.ao:before {
    background-position:0 -208px
}
i.flag.ar:before,
i.flag.argentina:before {
    background-position:0 -234px
}
i.flag.american.samoa:before,
i.flag.as:before {
    background-position:0 -260px
}
i.flag.at:before,
i.flag.austria:before {
    background-position:0 -286px
}
i.flag.au:before,
i.flag.australia:before {
    background-position:0 -312px
}
i.flag.aruba:before,
i.flag.aw:before {
    background-position:0 -338px
}
i.flag.aland.islands:before,
i.flag.ax:before {
    background-position:0 -364px
}
i.flag.az:before,
i.flag.azerbaijan:before {
    background-position:0 -390px
}
i.flag.ba:before,
i.flag.bosnia:before {
    background-position:0 -416px
}
i.flag.barbados:before,
i.flag.bb:before {
    background-position:0 -442px
}
i.flag.bangladesh:before,
i.flag.bd:before {
    background-position:0 -468px
}
i.flag.be:before,
i.flag.belgium:before {
    background-position:0 -494px
}
i.flag.bf:before,
i.flag.burkina.faso:before {
    background-position:0 -520px
}
i.flag.bg:before,
i.flag.bulgaria:before {
    background-position:0 -546px
}
i.flag.bahrain:before,
i.flag.bh:before {
    background-position:0 -572px
}
i.flag.bi:before,
i.flag.burundi:before {
    background-position:0 -598px
}
i.flag.benin:before,
i.flag.bj:before {
    background-position:0 -624px
}
i.flag.bermuda:before,
i.flag.bm:before {
    background-position:0 -650px
}
i.flag.bn:before,
i.flag.brunei:before {
    background-position:0 -676px
}
i.flag.bo:before,
i.flag.bolivia:before {
    background-position:0 -702px
}
i.flag.br:before,
i.flag.brazil:before {
    background-position:0 -728px
}
i.flag.bahamas:before,
i.flag.bs:before {
    background-position:0 -754px
}
i.flag.bhutan:before,
i.flag.bt:before {
    background-position:0 -780px
}
i.flag.bouvet.island:before,
i.flag.bv:before {
    background-position:0 -806px
}
i.flag.botswana:before,
i.flag.bw:before {
    background-position:0 -832px
}
i.flag.belarus:before,
i.flag.by:before {
    background-position:0 -858px
}
i.flag.belize:before,
i.flag.bz:before {
    background-position:0 -884px
}
i.flag.ca:before,
i.flag.canada:before {
    background-position:0 -910px
}
i.flag.cc:before,
i.flag.cocos.islands:before {
    background-position:0 -962px
}
i.flag.cd:before,
i.flag.congo:before {
    background-position:0 -988px
}
i.flag.central.african.republic:before,
i.flag.cf:before {
    background-position:0 -1014px
}
i.flag.cg:before,
i.flag.congo.brazzaville:before {
    background-position:0 -1040px
}
i.flag.ch:before,
i.flag.switzerland:before {
    background-position:0 -1066px
}
i.flag.ci:before,
i.flag.cote.divoire:before {
    background-position:0 -1092px
}
i.flag.ck:before,
i.flag.cook.islands:before {
    background-position:0 -1118px
}
i.flag.chile:before,
i.flag.cl:before {
    background-position:0 -1144px
}
i.flag.cameroon:before,
i.flag.cm:before {
    background-position:0 -1170px
}
i.flag.china:before,
i.flag.cn:before {
    background-position:0 -1196px
}
i.flag.co:before,
i.flag.colombia:before {
    background-position:0 -1222px
}
i.flag.costa.rica:before,
i.flag.cr:before {
    background-position:0 -1248px
}
i.flag.cs:before,
i.flag.serbia:before {
    background-position:0 -1274px
}
i.flag.cu:before,
i.flag.cuba:before {
    background-position:0 -1300px
}
i.flag.cape.verde:before,
i.flag.cv:before {
    background-position:0 -1326px
}
i.flag.christmas.island:before,
i.flag.cx:before {
    background-position:0 -1352px
}
i.flag.cy:before,
i.flag.cyprus:before {
    background-position:0 -1378px
}
i.flag.cz:before,
i.flag.czech.republic:before {
    background-position:0 -1404px
}
i.flag.de:before,
i.flag.germany:before {
    background-position:0 -1430px
}
i.flag.dj:before,
i.flag.djibouti:before {
    background-position:0 -1456px
}
i.flag.denmark:before,
i.flag.dk:before {
    background-position:0 -1482px
}
i.flag.dm:before,
i.flag.dominica:before {
    background-position:0 -1508px
}
i.flag.do:before,
i.flag.dominican.republic:before {
    background-position:0 -1534px
}
i.flag.algeria:before,
i.flag.dz:before {
    background-position:0 -1560px
}
i.flag.ec:before,
i.flag.ecuador:before {
    background-position:0 -1586px
}
i.flag.ee:before,
i.flag.estonia:before {
    background-position:0 -1612px
}
i.flag.eg:before,
i.flag.egypt:before {
    background-position:0 -1638px
}
i.flag.eh:before,
i.flag.western.sahara:before {
    background-position:0 -1664px
}
i.flag.er:before,
i.flag.eritrea:before {
    background-position:0 -1716px
}
i.flag.es:before,
i.flag.spain:before {
    background-position:0 -1742px
}
i.flag.et:before,
i.flag.ethiopia:before {
    background-position:0 -1768px
}
i.flag.eu:before,
i.flag.european.union:before {
    background-position:0 -1794px
}
i.flag.fi:before,
i.flag.finland:before {
    background-position:0 -1846px
}
i.flag.fiji:before,
i.flag.fj:before {
    background-position:0 -1872px
}
i.flag.falkland.islands:before,
i.flag.fk:before {
    background-position:0 -1898px
}
i.flag.fm:before,
i.flag.micronesia:before {
    background-position:0 -1924px
}
i.flag.faroe.islands:before,
i.flag.fo:before {
    background-position:0 -1950px
}
i.flag.fr:before,
i.flag.france:before {
    background-position:0 -1976px
}
i.flag.ga:before,
i.flag.gabon:before {
    background-position:-36px 0
}
i.flag.gb:before,
i.flag.united.kingdom:before {
    background-position:-36px -26px
}
i.flag.gd:before,
i.flag.grenada:before {
    background-position:-36px -52px
}
i.flag.ge:before,
i.flag.georgia:before {
    background-position:-36px -78px
}
i.flag.french.guiana:before,
i.flag.gf:before {
    background-position:-36px -104px
}
i.flag.gh:before,
i.flag.ghana:before {
    background-position:-36px -130px
}
i.flag.gi:before,
i.flag.gibraltar:before {
    background-position:-36px -156px
}
i.flag.gl:before,
i.flag.greenland:before {
    background-position:-36px -182px
}
i.flag.gambia:before,
i.flag.gm:before {
    background-position:-36px -208px
}
i.flag.gn:before,
i.flag.guinea:before {
    background-position:-36px -234px
}
i.flag.gp:before,
i.flag.guadeloupe:before {
    background-position:-36px -260px
}
i.flag.equatorial.guinea:before,
i.flag.gq:before {
    background-position:-36px -286px
}
i.flag.gr:before,
i.flag.greece:before {
    background-position:-36px -312px
}
i.flag.gs:before,
i.flag.sandwich.islands:before {
    background-position:-36px -338px
}
i.flag.gt:before,
i.flag.guatemala:before {
    background-position:-36px -364px
}
i.flag.gu:before,
i.flag.guam:before {
    background-position:-36px -390px
}
i.flag.guinea-bissau:before,
i.flag.gw:before {
    background-position:-36px -416px
}
i.flag.guyana:before,
i.flag.gy:before {
    background-position:-36px -442px
}
i.flag.hk:before,
i.flag.hong.kong:before {
    background-position:-36px -468px
}
i.flag.heard.island:before,
i.flag.hm:before {
    background-position:-36px -494px
}
i.flag.hn:before,
i.flag.honduras:before {
    background-position:-36px -520px
}
i.flag.croatia:before,
i.flag.hr:before {
    background-position:-36px -546px
}
i.flag.haiti:before,
i.flag.ht:before {
    background-position:-36px -572px
}
i.flag.hu:before,
i.flag.hungary:before {
    background-position:-36px -598px
}
i.flag.id:before,
i.flag.indonesia:before {
    background-position:-36px -624px
}
i.flag.ie:before,
i.flag.ireland:before {
    background-position:-36px -650px
}
i.flag.il:before,
i.flag.israel:before {
    background-position:-36px -676px
}
i.flag.in:before,
i.flag.india:before {
    background-position:-36px -702px
}
i.flag.indian.ocean.territory:before,
i.flag.io:before {
    background-position:-36px -728px
}
i.flag.iq:before,
i.flag.iraq:before {
    background-position:-36px -754px
}
i.flag.ir:before,
i.flag.iran:before {
    background-position:-36px -780px
}
i.flag.iceland:before,
i.flag.is:before {
    background-position:-36px -806px
}
i.flag.it:before,
i.flag.italy:before {
    background-position:-36px -832px
}
i.flag.jamaica:before,
i.flag.jm:before {
    background-position:-36px -858px
}
i.flag.jo:before,
i.flag.jordan:before {
    background-position:-36px -884px
}
i.flag.japan:before,
i.flag.jp:before {
    background-position:-36px -910px
}
i.flag.ke:before,
i.flag.kenya:before {
    background-position:-36px -936px
}
i.flag.kg:before,
i.flag.kyrgyzstan:before {
    background-position:-36px -962px
}
i.flag.cambodia:before,
i.flag.kh:before {
    background-position:-36px -988px
}
i.flag.ki:before,
i.flag.kiribati:before {
    background-position:-36px -1014px
}
i.flag.comoros:before,
i.flag.km:before {
    background-position:-36px -1040px
}
i.flag.kn:before,
i.flag.saint.kitts.and.nevis:before {
    background-position:-36px -1066px
}
i.flag.kp:before,
i.flag.north.korea:before {
    background-position:-36px -1092px
}
i.flag.kr:before,
i.flag.south.korea:before {
    background-position:-36px -1118px
}
i.flag.kuwait:before,
i.flag.kw:before {
    background-position:-36px -1144px
}
i.flag.cayman.islands:before,
i.flag.ky:before {
    background-position:-36px -1170px
}
i.flag.kazakhstan:before,
i.flag.kz:before {
    background-position:-36px -1196px
}
i.flag.la:before,
i.flag.laos:before {
    background-position:-36px -1222px
}
i.flag.lb:before,
i.flag.lebanon:before {
    background-position:-36px -1248px
}
i.flag.lc:before,
i.flag.saint.lucia:before {
    background-position:-36px -1274px
}
i.flag.li:before,
i.flag.liechtenstein:before {
    background-position:-36px -1300px
}
i.flag.lk:before,
i.flag.sri.lanka:before {
    background-position:-36px -1326px
}
i.flag.liberia:before,
i.flag.lr:before {
    background-position:-36px -1352px
}
i.flag.lesotho:before,
i.flag.ls:before {
    background-position:-36px -1378px
}
i.flag.lithuania:before,
i.flag.lt:before {
    background-position:-36px -1404px
}
i.flag.lu:before,
i.flag.luxembourg:before {
    background-position:-36px -1430px
}
i.flag.latvia:before,
i.flag.lv:before {
    background-position:-36px -1456px
}
i.flag.libya:before,
i.flag.ly:before {
    background-position:-36px -1482px
}
i.flag.ma:before,
i.flag.morocco:before {
    background-position:-36px -1508px
}
i.flag.mc:before,
i.flag.monaco:before {
    background-position:-36px -1534px
}
i.flag.md:before,
i.flag.moldova:before {
    background-position:-36px -1560px
}
i.flag.me:before,
i.flag.montenegro:before {
    background-position:-36px -1586px
}
i.flag.madagascar:before,
i.flag.mg:before {
    background-position:-36px -1613px
}
i.flag.marshall.islands:before,
i.flag.mh:before {
    background-position:-36px -1639px
}
i.flag.macedonia:before,
i.flag.mk:before {
    background-position:-36px -1665px
}
i.flag.mali:before,
i.flag.ml:before {
    background-position:-36px -1691px
}
i.flag.burma:before,
i.flag.mm:before,
i.flag.myanmar:before {
    background-position:-36px -1717px
}
i.flag.mn:before,
i.flag.mongolia:before {
    background-position:-36px -1743px
}
i.flag.macau:before,
i.flag.mo:before {
    background-position:-36px -1769px
}
i.flag.mp:before,
i.flag.northern.mariana.islands:before {
    background-position:-36px -1795px
}
i.flag.martinique:before,
i.flag.mq:before {
    background-position:-36px -1821px
}
i.flag.mauritania:before,
i.flag.mr:before {
    background-position:-36px -1847px
}
i.flag.montserrat:before,
i.flag.ms:before {
    background-position:-36px -1873px
}
i.flag.malta:before,
i.flag.mt:before {
    background-position:-36px -1899px
}
i.flag.mauritius:before,
i.flag.mu:before {
    background-position:-36px -1925px
}
i.flag.maldives:before,
i.flag.mv:before {
    background-position:-36px -1951px
}
i.flag.malawi:before,
i.flag.mw:before {
    background-position:-36px -1977px
}
i.flag.mexico:before,
i.flag.mx:before {
    background-position:-72px 0
}
i.flag.malaysia:before,
i.flag.my:before {
    background-position:-72px -26px
}
i.flag.mozambique:before,
i.flag.mz:before {
    background-position:-72px -52px
}
i.flag.na:before,
i.flag.namibia:before {
    background-position:-72px -78px
}
i.flag.nc:before,
i.flag.new.caledonia:before {
    background-position:-72px -104px
}
i.flag.ne:before,
i.flag.niger:before {
    background-position:-72px -130px
}
i.flag.nf:before,
i.flag.norfolk.island:before {
    background-position:-72px -156px
}
i.flag.ng:before,
i.flag.nigeria:before {
    background-position:-72px -182px
}
i.flag.ni:before,
i.flag.nicaragua:before {
    background-position:-72px -208px
}
i.flag.netherlands:before,
i.flag.nl:before {
    background-position:-72px -234px
}
i.flag.no:before,
i.flag.norway:before {
    background-position:-72px -260px
}
i.flag.nepal:before,
i.flag.np:before {
    background-position:-72px -286px
}
i.flag.nauru:before,
i.flag.nr:before {
    background-position:-72px -312px
}
i.flag.niue:before,
i.flag.nu:before {
    background-position:-72px -338px
}
i.flag.new.zealand:before,
i.flag.nz:before {
    background-position:-72px -364px
}
i.flag.om:before,
i.flag.oman:before {
    background-position:-72px -390px
}
i.flag.pa:before,
i.flag.panama:before {
    background-position:-72px -416px
}
i.flag.pe:before,
i.flag.peru:before {
    background-position:-72px -442px
}
i.flag.french.polynesia:before,
i.flag.pf:before {
    background-position:-72px -468px
}
i.flag.new.guinea:before,
i.flag.pg:before {
    background-position:-72px -494px
}
i.flag.ph:before,
i.flag.philippines:before {
    background-position:-72px -520px
}
i.flag.pakistan:before,
i.flag.pk:before {
    background-position:-72px -546px
}
i.flag.pl:before,
i.flag.poland:before {
    background-position:-72px -572px
}
i.flag.pm:before,
i.flag.saint.pierre:before {
    background-position:-72px -598px
}
i.flag.pitcairn.islands:before,
i.flag.pn:before {
    background-position:-72px -624px
}
i.flag.pr:before,
i.flag.puerto.rico:before {
    background-position:-72px -650px
}
i.flag.palestine:before,
i.flag.ps:before {
    background-position:-72px -676px
}
i.flag.portugal:before,
i.flag.pt:before {
    background-position:-72px -702px
}
i.flag.palau:before,
i.flag.pw:before {
    background-position:-72px -728px
}
i.flag.paraguay:before,
i.flag.py:before {
    background-position:-72px -754px
}
i.flag.qa:before,
i.flag.qatar:before {
    background-position:-72px -780px
}
i.flag.re:before,
i.flag.reunion:before {
    background-position:-72px -806px
}
i.flag.ro:before,
i.flag.romania:before {
    background-position:-72px -832px
}
i.flag.rs:before,
i.flag.serbia:before {
    background-position:-72px -858px
}
i.flag.ru:before,
i.flag.russia:before {
    background-position:-72px -884px
}
i.flag.rw:before,
i.flag.rwanda:before {
    background-position:-72px -910px
}
i.flag.sa:before,
i.flag.saudi.arabia:before {
    background-position:-72px -936px
}
i.flag.sb:before,
i.flag.solomon.islands:before {
    background-position:-72px -962px
}
i.flag.sc:before,
i.flag.seychelles:before {
    background-position:-72px -988px
}
i.flag.sd:before,
i.flag.sudan:before {
    background-position:-72px -1040px
}
i.flag.se:before,
i.flag.sweden:before {
    background-position:-72px -1066px
}
i.flag.sg:before,
i.flag.singapore:before {
    background-position:-72px -1092px
}
i.flag.saint.helena:before,
i.flag.sh:before {
    background-position:-72px -1118px
}
i.flag.si:before,
i.flag.slovenia:before {
    background-position:-72px -1144px
}
i.flag.jan.mayen:before,
i.flag.sj:before,
i.flag.svalbard:before {
    background-position:-72px -1170px
}
i.flag.sk:before,
i.flag.slovakia:before {
    background-position:-72px -1196px
}
i.flag.sierra.leone:before,
i.flag.sl:before {
    background-position:-72px -1222px
}
i.flag.san.marino:before,
i.flag.sm:before {
    background-position:-72px -1248px
}
i.flag.senegal:before,
i.flag.sn:before {
    background-position:-72px -1274px
}
i.flag.so:before,
i.flag.somalia:before {
    background-position:-72px -1300px
}
i.flag.sr:before,
i.flag.suriname:before {
    background-position:-72px -1326px
}
i.flag.sao.tome:before,
i.flag.st:before {
    background-position:-72px -1352px
}
i.flag.el.salvador:before,
i.flag.sv:before {
    background-position:-72px -1378px
}
i.flag.sy:before,
i.flag.syria:before {
    background-position:-72px -1404px
}
i.flag.swaziland:before,
i.flag.sz:before {
    background-position:-72px -1430px
}
i.flag.caicos.islands:before,
i.flag.tc:before {
    background-position:-72px -1456px
}
i.flag.chad:before,
i.flag.td:before {
    background-position:-72px -1482px
}
i.flag.french.territories:before,
i.flag.tf:before {
    background-position:-72px -1508px
}
i.flag.tg:before,
i.flag.togo:before {
    background-position:-72px -1534px
}
i.flag.th:before,
i.flag.thailand:before {
    background-position:-72px -1560px
}
i.flag.tajikistan:before,
i.flag.tj:before {
    background-position:-72px -1586px
}
i.flag.tk:before,
i.flag.tokelau:before {
    background-position:-72px -1612px
}
i.flag.timorleste:before,
i.flag.tl:before {
    background-position:-72px -1638px
}
i.flag.tm:before,
i.flag.turkmenistan:before {
    background-position:-72px -1664px
}
i.flag.tn:before,
i.flag.tunisia:before {
    background-position:-72px -1690px
}
i.flag.to:before,
i.flag.tonga:before {
    background-position:-72px -1716px
}
i.flag.tr:before,
i.flag.turkey:before {
    background-position:-72px -1742px
}
i.flag.trinidad:before,
i.flag.tt:before {
    background-position:-72px -1768px
}
i.flag.tuvalu:before,
i.flag.tv:before {
    background-position:-72px -1794px
}
i.flag.taiwan:before,
i.flag.tw:before {
    background-position:-72px -1820px
}
i.flag.tanzania:before,
i.flag.tz:before {
    background-position:-72px -1846px
}
i.flag.ua:before,
i.flag.ukraine:before {
    background-position:-72px -1872px
}
i.flag.ug:before,
i.flag.uganda:before {
    background-position:-72px -1898px
}
i.flag.um:before,
i.flag.us.minor.islands:before {
    background-position:-72px -1924px
}
i.flag.america:before,
i.flag.united.states:before,
i.flag.us:before {
    background-position:-72px -1950px
}
i.flag.uruguay:before,
i.flag.uy:before {
    background-position:-72px -1976px
}
i.flag.uz:before,
i.flag.uzbekistan:before {
    background-position:-108px 0
}
i.flag.va:before,
i.flag.vatican.city:before {
    background-position:-108px -26px
}
i.flag.saint.vincent:before,
i.flag.vc:before {
    background-position:-108px -52px
}
i.flag.ve:before,
i.flag.venezuela:before {
    background-position:-108px -78px
}
i.flag.british.virgin.islands:before,
i.flag.vg:before {
    background-position:-108px -104px
}
i.flag.us.virgin.islands:before,
i.flag.vi:before {
    background-position:-108px -130px
}
i.flag.vietnam:before,
i.flag.vn:before {
    background-position:-108px -156px
}
i.flag.vanuatu:before,
i.flag.vu:before {
    background-position:-108px -182px
}
i.flag.wallis.and.futuna:before,
i.flag.wf:before {
    background-position:-108px -234px
}
i.flag.samoa:before,
i.flag.ws:before {
    background-position:-108px -260px
}
i.flag.ye:before,
i.flag.yemen:before {
    background-position:-108px -286px
}
i.flag.mayotte:before,
i.flag.yt:before {
    background-position:-108px -312px
}
i.flag.south.africa:before,
i.flag.za:before {
    background-position:-108px -338px
}
i.flag.zambia:before,
i.flag.zm:before {
    background-position:-108px -364px
}
i.flag.zimbabwe:before,
i.flag.zw:before {
    background-position:-108px -390px
}

#toTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    width: 3rem;
    height: 3rem;
    padding: 0;
    font-size: 2rem;
    border-radius: 8px;
    border: none;
    background: var(--green);
    color: #fff;
    cursor: pointer;
}
.f-carousel {
    --f-arrow-pos: 10px;
    --f-arrow-width: 38px;
    --f-arrow-height: 38px;
    --f-arrow-svg-width: 16px;
    --f-arrow-svg-height: 16px;
    --f-arrow-svg-stroke-width: 2.5;
    --f-arrow-color: #475569;
    --f-arrow-shadow: 0 6px 12px -2px rgb(50 50 93 / 25%), 0 3px 7px -3px rgb(0 0
    0 / 30%);
    --f-arrow-border-radius: 50%;
    --f-arrow-bg: #fff;
    --f-arrow-hover-bg: #f9f9f9;
    --f-arrow-active-bg: #f0f0f0;
}

/* Стрелки стояли внутри ленты и закрывали край первой и последней карточки -
   у карточек с текстом пропадало начало строки. Отрицательный --f-arrow-pos
   выносит кнопку целиком в поле страницы (её ширина 38px, поэтому -38px).

   Ниже 1200px полей нет вовсе: на 1024px слева остаётся 16-28px, на телефоне -
   от нуля, и вынесенная кнопка ушла бы за край экрана. Там она остаётся поверх
   карточки, как и была, - листают всё равно свайпом.

   Между 1200 и 1440 поля узкие (на главной слева 23-32px), поэтому кнопка
   выносится наполовину: целиком она бы срезалась краем окна. Порог полного
   выноса именно 1440, а не 1400: на 1400 главной не хватало шести пикселей. */
@media (min-width: 1200px) {
    .f-carousel {
        --f-arrow-pos: -19px;
    }
}
@media (min-width: 1440px) {
    .f-carousel {
        --f-arrow-pos: -38px;
    }
}

/* Messages inbox: dialog cards */
.message-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.message-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 12%) !important;
    border-color: var(--green, #198754);
}

/* Companies on the order's route (chunks/order/direction-companies.tpl).
   Cards sit inside a white .card, and .card-item has no border of its own -
   without one they read as a single sheet with text floating on it. */
.direction-companies .card-item {
    border: 1px solid #e6e6e6;
    transition: border-color .15s ease-in-out;
}
.direction-companies .card-item:hover {
    border-color: var(--green);
}
/* Жёсткая коробка под логотип: у битой картинки браузер рисует текст alt, и
   без фиксированных размеров название компании переносилось по букве в колонке
   шириной 48px, вытягивая карточку и весь ряд следом. */
.direction-companies .card-item img {
    width: 48px;
    height: 48px;
    overflow: hidden;
    font-size: 0;
    border-radius: var(--bs-border-radius);
    object-fit: cover;
}
/* One line for the header row whatever the name is: the logo must not shrink
   and the title must not wrap, otherwise the rows below it (role, city, flags,
   count) sit at a different height in every card of the row. */
.direction-companies .dc-card-head {
    min-width: 0;
    min-height: 48px;
}
.direction-companies .dc-card-head h3 {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}
.direction-companies .dc-card-head h3 a {
    min-width: 0;
    overflow: hidden;
    color: var(--black);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.direction-companies .dc-card-head h3 a:hover {
    color: var(--green);
}
.direction-companies .dc-card-head .pro-badge-group {
    flex-shrink: 0;
}
/* Six roles do not fit one line on a desktop either, so the strip wraps.
   Sideways scrolling stays for the phone, where a swipe is the natural move
   and four rows of pills would push the cards off the screen. */
@media (max-width: 767.98px) {
    .direction-companies-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        /* Полоса выходит за отбивку карточки, чтобы вкладка обрывалась о край
           экрана, а не о поле в 24px: обрыв у края читается как «дальше есть
           ещё», обрыв с полем - как поехавшая вёрстка. */
        margin-right: -1.5rem;
        padding-right: 1.5rem;
    }
    .direction-companies-tabs::-webkit-scrollbar {
        display: none;
    }
}
.direction-companies-tabs .nav-link {
    padding: .35rem .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--black);
    white-space: nowrap;
    background: #f5f6f8;
    border: 1px solid #e6e6e6;
}
.direction-companies-tabs .nav-link.active {
    color: var(--white);
    background: var(--green);
    border-color: var(--green);
}

/* Freight statistics (chunks/stats/cargo.tpl, transport.tpl) */
.freight-stats__tabs .nav-link {
    color: var(--black);
    font-weight: 500;
}
.freight-stats__tabs .nav-link.active {
    color: var(--green, #71a32e);
    font-weight: 600;
}

/* Period cards (today / 2 days / week / month) */
.fstats-period {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    padding: .85rem 1rem;
    border: 1px solid #e6e6e6;
    border-radius: .75rem;
    background: #fff;
    text-decoration: none;
    transition: box-shadow .15s linear, border-color .15s linear;
}
.fstats-period:hover {
    border-color: var(--green, #71a32e);
    box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
}
.fstats-period__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--green, #71a32e);
}
.fstats-period__icon svg,
.fstats-period__icon .icon {
    width: 24px;
    height: 24px;
    fill: var(--green, #71a32e);
}
.fstats-period__count {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--black);
}
.fstats-period__sub {
    display: block;
    font-size: .8rem;
    color: #777;
}

/* Breakdown rows: grey label + solid green count block, two columns */
.fstats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}
.fstats-cell {
    display: flex;
    align-items: stretch;
    border-radius: 5px;
    overflow: hidden;
    text-decoration: none;
}
.fstats-cell span {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: .55rem .85rem;
    background: #eee;
    color: #454545;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color .15s linear;
}
.fstats-cell b {
    flex: 0 0 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    background: var(--green, #71a32e);
    color: #fff;
    font-weight: 600;
    transition: background-color .15s linear;
}
.fstats-cell:hover span,
.fstats-cell:hover b {
    background: var(--green, #71a32e);
    color: #fff;
}
/* Countries table: 200 строк в обычном потоке растянули бы страницу на десять
   экранов, поэтому список прокручивается внутри себя, а шапка остаётся видна */
.fstats-countries {
    max-height: 420px;
    overflow: auto;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
}
.fstats-countries__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: .9rem;
}
.fstats-countries__table th,
.fstats-countries__table td {
    padding: .45rem .75rem;
    border-bottom: 1px solid #eee;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
}
.fstats-countries__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f5f5f5;
    color: #777;
    font-size: .8rem;
}
.fstats-countries__table td {
    width: 1%;
    text-align: right;
}
.fstats-countries__table thead th + th {
    text-align: right;
}
.fstats-countries__table tbody tr:last-child th,
.fstats-countries__table tbody tr:last-child td {
    border-bottom: 0;
}
.fstats-countries__table tbody tr:hover th,
.fstats-countries__table tbody tr:hover td {
    background: #f7f7f7;
}
.fstats-countries__table td a {
    color: var(--green, #71a32e);
    font-weight: 600;
    text-decoration: none;
}
.fstats-countries__table td a:hover {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .fstats-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 575.98px) {
    .fstats-cell b {
        flex-basis: 92px;
    }

    /* На 360px плитка полосы шириной 161px, а «Добавить транспорт» кеглем 14px
       вместе с иконкой просит 172px - подпись уезжала на вторую строку, и один
       ряд сетки становился выше другого. Уменьшаем кегль и зазор до иконки;
       выше 576px место есть, там трогать нечего. */
    .submenu .nav-link {
        gap: .375rem;
        font-size: .75rem;
    }
    .submenu .nav-item .icon,
    .submenu .nav-item .bi {
        width: 12px;
        height: 12px;
        font-size: 12px;
    }
}

/* A post whose {if $images} passes but yields no slides still renders an
   empty .f-carouses, and initialising the carousel on it reserves a 250px
   viewport — a blank gap under the title. Hide the ones with nothing in
   them. The underlying template condition is worth fixing separately. */
.f-carouses:not(:has(.f-carousel__slide)) {
    display: none;
}

/* Fields inside a request's detail cards. The old site puts the name and the
   value on one line in two aligned columns; ours had the value on a line of
   its own, either after a <br> or as a col-5/col-7 pair that a flex-column
   parent stacked anyway. */
/* "Кол. машин" holds a single digit but sat in a full-width column, so the
   input ran the whole width of the "Дополнительно" block. */
.field-narrow {
    max-width: 140px;
}

/* Author of a request: photo on the left, everything about them on the right.
   It used to print the name, then the avatar with the name again beside it,
   then the link — three stacked rows with the picture in the middle. */
.info-user {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #eee;
}
.info-user-photo {
    flex-shrink: 0;
}
.info-user img {
    width: 48px;
    height: 48px;
    object-fit: cover;
}
.info-user-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: break-word;
}

.info-row {
    display: flex;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid #eee;
}
.info-row:last-child {
    border-bottom: 0;
}
.info-label {
    flex: 0 0 45%;
    font-weight: 600;
}
.info-value {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}

/* The mobile menu and the panel's title bar live inside the collapse so
   Bootstrap toggles them with it; above the navbar breakpoint the same
   collapse is the inline desktop bar, which has no use for either. */
.mobile-menu-head,
.mobile-menu {
    display: none;
}

/* Category tabs above the owner's listings. Their six labels need 1538px of
   nowrap text, and a flex item will not shrink below its min-content, so the
   row ran past a 1248px container at every desktop width and
   overflow-x: hidden cut the last tab off. Let the columns shrink and the
   labels wrap; the columns are flex so the tabs come out the same height. */
.category-tabs > .col {
    display: flex;
    min-width: 0;
}
/* Только кнопки в колонках: шесть видов перевозок делят ряд поровну, и каждая
   занимает свою колонку целиком. Коротким вкладкам кабинета («Грузы»,
   «Транспорт», «Компании», «Недавно смотрели») колонок нет, они лежат в том же
   .category-tabs прямыми ссылками - и от общего width: 100% вставали в столбик
   во всю ширину страницы. */
.category-tabs > .col .btn {
    width: 100%;
    white-space: normal;
    /* Высоту ряда задаёт самая длинная подпись — «Транспорт для сборных
       грузов». На базовых 16px с полем в 1rem по бокам она ломается на три
       строки, и по ней вытягиваются все шесть кнопок. Мельче кегль и уже
       поля — та же подпись укладывается в две строки. */
    padding: .5rem;
    font-size: .875rem;
    line-height: 1.25;
    text-wrap: balance;
}

/* The comment box is a flex item with no grow, so the "Отправить" button
   took the width it wanted and left the textarea a ~130px sliver. */
form[data-comment-form] textarea {
    flex: 1;
}

/* "Написать отзыв" / «Ответить» jump here; keep the 45px sticky submenu off
   the heading. */
[id^="comments-form-"],
#forum-reply {
    scroll-margin-top: 60px;
}

/* Comment avatars. The markup sets width/height, but the blanket
   img { height: auto } below drops the height, and the image is lazy — so
   until it loads it has no intrinsic size and, as a flex child, stretches to
   the whole row. On a long comment that meant a 40x782 sliver. Pin both
   dimensions so the row is stable whether or not the image has arrived. */
[data-comment-id] > img.rounded-circle {
    width: 40px;
    height: 40px;
    object-fit: cover;
}
[data-comment-id] > .flex-grow-1 {
    min-width: 0;
}
.comment-body {
    overflow-wrap: anywhere;
}
/* Same story in the message list, milder because the row centres its items:
   sizes drifted between 56x56 and 56x64. Не прямой потомок: карточка обзавелась
   кнопкой «Удалить», а её нельзя класть внутрь <a> - ссылка стала вложенной, и
   аватар вместе с ней уехал на уровень ниже. */
.message-card img.rounded-circle {
    width: 56px;
    height: 56px;
    object-fit: cover;
}

/* =========================================================================
   RESPONSIVE LAYER
   Mobile / tablet adaptation. Everything below lives inside media queries
   (Bootstrap breakpoints), so desktop (>=992px) renders exactly as before.
   ========================================================================= */

/* Global safety net: nothing should force horizontal scrolling, media stays
   fluid. clip rather than hidden: hidden computes overflow-y to auto, which
   turns <body> into a scroll container and quietly disables every
   position: sticky on the page — the profile sidebar and the action bar both
   have it and neither was sticking. clip crops the same way without creating
   one. */
html,
body {
    overflow-x: clip;
}
img,
svg,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Справочник типов транспорта на странице раздела: чипы-ссылки. Тип, под
   который страницы ещё нет, показан неактивным — так видно, что осталось
   написать. */
.transport-types a,
.transport-types .disabled {
    display: inline-block;
    padding: .25rem .6rem;
    border: 1px solid var(--grey);
    border-radius: .5rem;
    background: var(--cool-grey);
    font-size: .875rem;
    line-height: 1.4;
    text-decoration: none;
    color: var(--black);
}

.transport-types a:hover {
    border-color: var(--green);
    background: var(--soft-green);
    color: var(--green);
}

.transport-types .disabled {
    background: var(--white);
    border-style: dashed;
    color: var(--slate);
}

/* Страницы ошибок: 404 и 403 делят одну карточку, поэтому стили лежат тут,
   а не в <style> шаблона. Карточка стоит внутри .section-content, где h2 -
   это 1.75rem контентной типографики; для подзаголовка списка это слишком
   крупно, отсюда переопределение. */
.error-page {
    max-width: 720px;
    margin: 0 auto;
}
.error-page .error-code {
    font-size: clamp(72px, 18vw, 132px);
    font-weight: 700;
    line-height: 1;
    color: var(--green);
}
.error-page h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--black);
}
.error-page h2 {
    font-size: 1rem;
    font-weight: 600;
}
.error-page .error-text {
    color: var(--slate);
}
.error-page .error-sections a {
    color: var(--black);
    background: var(--cool-grey);
    border-radius: 2rem;
    font-size: 14px;
    padding: .35rem .9rem;
    text-decoration: none;
}
.error-page .error-sections a:hover {
    color: var(--white);
    background: var(--green);
}

/* ---- Small desktops ( 992px – 1199px ) --------------------------------
   The listing table needs ~1115px to lay its seven columns out and refuses
   to shrink below that, while Bootstrap caps .container at 960px until the
   xl breakpoint — so at, say, 1185px the table ran 156px past the edge and
   html{overflow-x:hidden} silently cut the last column off. Reclaim the
   ~225px of unused side margin; every .container widens together so the
   header, action bar and footer stay aligned with the content. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .container {
        max-width: calc(100% - 2rem);
    }
}

/* Even widened the container is not always enough, and clipping the table
   would hide data. Let it scroll sideways instead. Matched on the parent of
   the table rather than a specific column class: the listing sits in .col-12,
   the "similar cargo" block on a detail page in a .d-flex. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    div:has(> .table-order) {
        overflow-x: auto;
    }
}

/* ---- Collapsed navbar ( < 1200px ) ------------------------------------
   The top menu holds ten items and only fits on one line from ~1200px, so
   the navbar is .navbar-expand-xl and the burger is in play up to here. */
@media (max-width: 1199.98px) {
    /* Bootstrap positions the dropdown against .navbar, which lives in a
       narrow middle column, so the menu came out 147px wide and stretched the
       header row (logo and account icons drifted to the middle of the list).
       Pin it to .header instead and give the links full-width rows. The
       !important calls override the .mx-auto / .gap-1 / .align-items-center
       utilities carried by the markup. */
    .header {
        position: relative;
    }
    .header .navbar {
        position: static;
    }
    /* Full-screen panel with its own title bar and close button, the way the
       old site did it — a dropdown hanging under the header left the page
       showing through and the rows cramped. */
    .header .navbar-collapse {
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: #fff;
        overflow-y: auto;
    }
    .mobile-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .25rem 1rem;
        background: var(--grey);
    }
    .mobile-menu-head .logo {
        font-size: 1.125rem;
        text-transform: uppercase;
    }
    .mobile-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--slate);
        font-size: 1.25rem;
    }

    /* Levels replace one another; only one is ever mounted. */
    .mobile-menu {
        display: block;
    }
    .mobile-menu-level {
        display: none;
    }
    .mobile-menu-level.is-active {
        display: block;
    }
    .mobile-menu-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .mobile-menu-item {
        display: flex;
        align-items: center;
        gap: .625rem;
        width: 100%;
        min-height: 60px;
        padding: .75rem 1rem;
        border: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .08);
        background: none;
        color: var(--black);
        font-weight: 600;
        text-align: left;
        text-decoration: none;
    }
    .mobile-menu-text {
        flex: 1;
    }
    .mobile-menu-arrow {
        flex-shrink: 0;
        color: var(--slate);
    }
    .mobile-menu-item .icon,
    .mobile-menu-item svg {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
    }
    .mobile-menu-item > .bi:not(.mobile-menu-arrow) {
        flex-shrink: 0;
        width: 22px;
        color: var(--slate);
        font-size: 1.125rem;
        text-align: center;
    }
    .mobile-menu-heading {
        padding: 1rem 1rem .5rem;
        color: var(--slate);
        font-weight: 600;
    }

    /* The plain desktop list is redundant once the panel is in play. It
       carries Bootstrap's .d-flex, which is !important. */
    .header .navbar-nav,
    .header .greedy-nav {
        display: none !important;
    }
    .header .navbar-nav {
        width: 100%;
        margin: 0 !important;
        gap: 0 !important;
        align-items: stretch !important;
    }
    .header .navbar-nav .nav-item {
        width: 100%;
        border-radius: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .08);
        font-size: 1rem;
        font-weight: 600;
    }
    .header .navbar-nav .nav-link {
        display: flex;
        align-items: center;
        min-height: 60px;
        padding: .75rem 1rem;
    }
}

/* ---- Feedback form hints ---------------------------------------------- */
.icon-feedback,
.icon-feedback-whatsapp,
.icon-feedback-viber,
.icon-feedback-telegram {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.icon-feedback-whatsapp {
    background-image: url('/assets/images/img/new/feedback/whatsapp.svg');
}
.icon-feedback-viber {
    background-image: url('/assets/images/img/new/feedback/viber.svg');
}
.icon-feedback-telegram {
    background-image: url('/assets/images/img/new/feedback/telegram.svg');
}

/* ---- Tablet and below ( < 992px ) ------------------------------------- */
@media (max-width: 991.98px) {
    /* Ниже планшета шесть подписей перестают влезать в строку - значит
       полосу тянут. Растворяем правый край: сама полоса прокрутки скрыта, и
       обрезанная на полуслове подпись - единственная подсказка, что ряд
       продолжается. */
    #userTab {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        /* Хвост под растворяющийся край: без него полоса, докрученная до
           упора, подводит последнюю вкладку («Блог») ровно под градиент, и
           открытая вкладка выглядит полустёртой. */
        padding-right: 28px;
    }

    /* Primary layout: sidebar drops to the end of the page and spans full
       width. Ordering inside the row is not enough — the listing rows are
       siblings of that row, not children, so the 794px sidebar landed between
       the filter and the results. Dissolving the row with display:contents
       puts the sidebar, the filter and the listings in one flex context, and
       the sidebar can then travel past all of them. flex-basis has to go back
       to auto: in a column flex container it would size the height. */
    main.container {
        display: flex;
        flex-direction: column;
    }
    main.container > .row:has(> .sidebar.col-side) {
        display: contents;
    }
    /* Scoped to the dissolved row only. A page can have a second, intact
       main.container > .row — /vacancies keeps its listing in one — and there
       the row's -12px margins still need the columns' gutter padding to
       cancel them. Zeroing it there pulled the cards to the screen edge. */
    main.container > .row:has(> .sidebar.col-side) > .col,
    main.container > .row:has(> .sidebar.col-side) > .sidebar.col-side {
        flex: 0 0 auto;
        max-width: 100%;
        /* display:contents drops the row, and with it the -12px side margins
           that used to cancel this column's gutter padding. Left in, that
           padding pushed the filter panel 12px further in than the cards. */
        padding-left: 0;
        padding-right: 0;
    }
    /* Listing pages put their results in a second row that opens with an empty
       .col-side — a spacer that lines the list up with the content column
       beside the sidebar on desktop. On a phone the sidebar is gone from that
       position, so the spacer just ate 154px and squeezed the cards into
       221px. */
    main.container > .row > .col-side:not(.sidebar) {
        display: none;
    }

    /* Панель из шапки повторяет боковое меню целиком - menu(1), menu(12) и
       menu(74) со всеми детьми, - поэтому на узком экране сайдбар только
       дублировал её и растягивал страницу. Меню раздела оставляем: ссылок на
       соседние страницы в мобильной панели нет. */
    main.container > .row > .sidebar.col-side:not(.section-menu) {
        display: none;
    }

    /* Кроме меню кабинета: его разделов - «Мои грузы», «Сообщения», «Подписки» -
       в шапке нет, поэтому вместо того чтобы прятать, поднимаем его над
       содержимым, сразу под подменю. «Грузы» и «Транспорт» из него убираем:
       эти двое как раз в подменю и есть. */
    main.container > .row > .sidebar.col-side.profile-menu {
        display: block;
        order: -2;
        position: static !important;
        top: auto;
        height: auto !important;
        margin-bottom: 1rem;
    }
    .sidebar.profile-menu .main-menu > li.has-add,
    .sidebar.profile-menu .main-menu > li.side-menu-sep,
    .sidebar.profile-menu .side-menu hr {
        display: none;
    }
    /* Раскрытый список отделяем от кнопки: без черты они сливаются в одно
       белое пятно, и непонятно, где кончается текущий раздел. */
    .sidebar.profile-menu .main-menu.show {
        border-top: 1px solid rgba(0, 0, 0, .08);
    }

    main.container > .row:has(> .sidebar.col-side) > .col {
        order: -1;
    }
    main.container > .row:has(> .sidebar.col-side) > .sidebar.col-side:not(.profile-menu) {
        order: 99;
        position: static !important;
        top: auto;
        height: auto !important;
        margin-top: 1rem;
    }

    /* Полоса действий на телефоне - четыре плитки 2x2, как на старом сайте:
       поиск грузов и транспорта, добавить груз и транспорт. Прокрутка вбок,
       которая была здесь раньше, прятала половину пунктов за краем экрана и
       требовала догадаться, что полосу можно тянуть. Остальное с полосы никуда
       не делось - оно в панели бургера. */
    /* На старом сайте полоса идёт от края до края и без скруглений. Отступы
       снимаем у самой полосы, а не у общего .container: он раскладывает всю
       остальную страницу. */
    .submenu > .container {
        padding-left: 0;
        padding-right: 0;
    }
    .submenu > .container > .row {
        margin-left: 0;
        margin-right: 0;
    }
    .submenu > .container > .row > [class*="col"] {
        padding-left: 0;
        padding-right: 0;
    }
    .submenu-nav {
        display: block;
        overflow: hidden;
    }
    /* !important - радиусы приходят классами .rounded-4 / .rounded-start-4,
       которые у Bootstrap объявлены с !important. */
    .submenu-nav,
    .submenu .nav-item {
        border-radius: 0 !important;
    }
    /* Оба поисковых пункта лежат на одном сером фоне и сливались в одну строку -
       делим их чертой, как на старом сайте. Второй пункт сетки это «Поиск
       транспорта»: порядок задан шаблоном, а скрытые .submenu-extra идут ниже и
       нумерацию не сбивают. */
    .submenu [data-greedy-list] > .nav-item:nth-child(2) {
        border-left: 1px solid var(--bs-border-color);
    }
    /* !important - у списка Bootstrap'овский .d-flex, он тоже !important. */
    .submenu [data-greedy-list] {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        overflow: visible;
    }
    .submenu-extra,
    .submenu .greedy-nav-toggle,
    .submenu .greedy-nav-hidden {
        display: none !important;
    }
    /* В сетке плитка занимает половину ширины экрана - подписи здесь можно
       переносить, иначе на самых узких экранах их нечем спасать. */
    .submenu .nav-item {
        white-space: normal;
    }
    .submenu .nav-link {
        justify-content: center;
        min-height: 40px;
        text-align: center;
    }

    /* Меню раздела - единственный сайдбар, который остаётся на телефоне.
       Отступы стоят на <li>, поэтому нажималась только внутренняя часть
       строки; переносим их на саму ссылку. */
    .side-menu .list-group-item {
        padding: 0 !important;
    }
    .side-menu .list-group-item > a {
        padding: .625rem 1rem;
        min-height: 44px;
    }

    /* .btn is white-space: nowrap, so a long call-to-action such as "Все грузы
       из Украины в Украину" on a cargo page ran past the viewport edge instead
       of wrapping. */
    .btn {
        white-space: normal;
    }

    /* Sitewide "Сервисы" link columns: 52 links stacked at a 24px pitch, so
       neighbouring targets sat 5px apart and mis-taps were easy. Spacing them
       out costs ~14% of page height, which is the better trade for a block
       that sits near the bottom. */
    .services ul.list-unstyled a {
        display: block;
        padding: .55rem 0;
    }

    /* Form touch targets. A Bootstrap checkbox is 16px inside a 24px label
       row, so a short label like "TIR" left roughly 40x24 to aim at; inputs
       and Choices selects sit at 38px. The Choices selector carries the extra
       .choices because the 38px min-height above is set at that weight. */
    .form-check {
        display: flex;
        align-items: center;
        gap: .625rem;
        min-height: 44px;
        padding-left: 0;
        margin-bottom: 0;
    }
    /* Inline groups are meant to share a line — keep them inline. */
    .form-check.form-check-inline {
        display: inline-flex;
    }
    .form-check .form-check-input {
        float: none;
        flex-shrink: 0;
        width: 1.25rem;
        height: 1.25rem;
        margin: 0;
    }
    /* Тумблер — не галочка. Квадрат под палец выше схлопывает его в кружок:
       дорожки не видно, и «включено» от «выключено» отличается только цветом.
       Ширину возвращаем, высоту оставляем увеличенной — попасть проще. */
    .form-check.form-switch .form-check-input {
        width: 2em;
    }
    .form-check .form-check-label {
        display: flex;
        align-items: center;
        align-self: stretch;
        flex: 1;
    }
    .form-control,
    .form-select,
    .choices .choices__inner {
        min-height: 44px;
    }
    /* .btn-sm renders 31px tall — thin for a thumb, and on a cargo card one
       of these three is "Удалить". */
    .btn-sm {
        min-height: 44px;
    }
    /* Кроме ссылки в строке заголовка поля («Добавить свой город», «Указать
       свой груз»): 44px раздували строку до 44px вместо 24px, и поле уезжало
       на 10px ниже, чем у соседей без такой кнопки. */
    .field-head .btn-sm {
        min-height: 0;
    }

    /* In the "по стране" create forms the two supplementary checkboxes and
       "Кол. машин" share one non-wrapping row, so on a phone the second
       checkbox ended at 420px and the field started at 428 — both off the
       screen. */
    .d-flex:has(> .field-narrow) {
        flex-wrap: wrap;
    }

    /* Owner action rows on articles, vacancies, resumes and the rest put five
       items in a d-flex of Bootstrap .col. A zero basis cannot shrink past the
       labels' min-content width, and the wrapper is overflow-hidden, so the
       last controls were simply cut off — "На модер", "Удал". Let the row wrap
       into three per line instead. */
    .ads-control,
    .article-control,
    .blog-control,
    .company-control,
    .consultant-control,
    .faq-control,
    .presentation-control,
    .resume-control,
    .vacancy-control {
        flex-wrap: wrap;
    }
    .ads-control > .col,
    .article-control > .col,
    .blog-control > .col,
    .company-control > .col,
    .consultant-control > .col,
    .faq-control > .col,
    .presentation-control > .col,
    .resume-control > .col,
    .vacancy-control > .col {
        /* Без роста: с ним неполный последний ряд растягивал свои две кнопки на
           половину ширины каждую, и они переставали попадать в колонки
           верхних рядов — «Удалить» и «Уничтожить» стояли враскоряку. */
        flex: 0 0 33.333%;
        min-width: 0;
        overflow-wrap: break-word;
    }
}

/* ---- Landscape phones and below ( < 768px ) --------------------------- */
@media (max-width: 767.98px) {
    /* .75rem, а не .5rem: у .row отрицательные поля -12px, и при 8px у
       контейнера каждая строка вылезала за экран на 4px с каждой стороны.
       Сам вынос прятал html{overflow-x:clip}, но Safari на iOS всё равно
       давал странице ездить вбок - хватало любого свайпа по горизонтальной
       полосе вкладок. 12px гасят -12px точно, и ни одна строка (в том числе
       с g-0 и g-3) за край больше не выходит. */
    main.container {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    /* p-4 inset the fields far enough that the form stopped lining up with
       the result cards below. At zero the .row inside cancels out exactly —
       its -8px side margins meet the columns' 8px padding — so the fields
       land on the same 12px gutter as the cards. */
    .search-form.p-4,
    .relative-200.p-4,
    .bg-white.p-4:has(form),
    .bg-white.p-4:has(> .category-tabs) {
        padding: 1rem 0 !important;
    }

    /* Filter tabs: .btn-group sizes itself to its content and wrapped into a
       ragged stack — two 203px buttons, then an 80px and a 125px sharing a
       line. It also sits beside an "Add" button in a nowrap .d-flex, which
       squeezed it to 203px, so the parent has to wrap first. */
    .d-flex:has(> .btn-group) {
        flex-wrap: wrap;
        /* Without this the "Add" button ends up flush against the group. */
        gap: .5rem;
    }
    .btn-group {
        flex: 1 0 100%;
        /* A .btn-group deliberately has no gap — its buttons are meant to be
           joined side by side. Once it wraps, that leaves the rows stuck
           together, so give the wrap a gap of its own. */
        row-gap: .5rem;
    }
    .btn-group > .btn {
        flex: 1 0 50%;
    }
    /* The "Add" button beside the group carries .ms-auto, which stranded it
       alone against the right edge once the parent started wrapping. */
    .d-flex:has(> .btn-group) > .ms-auto {
        margin-left: 0 !important;
        flex: 1 0 100%;
    }

    /* .ellipsis pins a card title to two lines and 48px so the cards in a row
       line up. With one card per row there is nothing to line up with, and
       "Где искать надёжного перевозчика? Советы и рекомендации." lost its
       tail. Let the title run to its full length. Объявления идут по две в
       ряд, как на старом сайте, — там заголовки снова надо ровнять, поэтому
       перечислены только полноширинные обёртки: .col-12 и слайд карусели. */
    .col-12 > .card-item .ellipsis,
    .f-carousel__slide > .card-item .ellipsis {
        display: block;
        height: auto;
        overflow: visible;
        -webkit-line-clamp: none;
    }

    /* The carousel shows three slides at a fixed 250px height. On a phone a
       third of the width is ~101px, so a 306px image shrank to 101x83 and
       left ~167px of dead space under it. One slide per view, height by
       content. */
    .f-carousel {
        --f-carousel-slide-width: 100% !important;
        height: auto;
    }

    /* Комментарий: put the button under the box rather than beside it. */
    [data-comment-id].ms-5 {
        margin-left: 1.5rem !important;
    }
    form[data-comment-form] {
        flex-wrap: wrap;
    }
    form[data-comment-form] textarea {
        flex: 1 1 100%;
    }
    form[data-comment-form] .btn {
        width: 100%;
    }

    /* Search tabs: scroll horizontally rather than squashing */
    #panel-search {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    #panel-search::-webkit-scrollbar {
        display: none;
    }
    #panel-search .nav-tabs {
        flex-wrap: nowrap;
    }
    /* Полоса прокручивается, значит вкладкам сжиматься незачем. Без этого
       браузер отбирал у активной вкладки те самые 3-27px, которых не хватало
       строке, и подпись («Все заявки», «Все грузы») теряла правый отступ и
       последнюю букву. */
    #panel-search .nav-item {
        flex: 0 0 auto;
    }
    #panel-search {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }

    /* One detail card per row once two no longer fit. The old site runs these
       sections edge to edge — no gutter around the panel, no gap between the
       cards and no rounded corners, so they read as one continuous list. */
    .table-order .accordion-collapse .card.col {
        flex: 1 1 100%;
        border-radius: 0;
        border-width: 0 0 1px;
    }
    .table-order tbody tr.accordion-collapse > td {
        padding: 0;
    }
    /* Строка и её панель - два соседних <tr>, и margin-bottom в 1rem стоит у
       каждого. Внутри панели карточки идут вплотную, а между «Заказчиком» и
       «Контактными данными» оставалась полоса шире полей самих карточек -
       панель принадлежит строке, ей и держаться ближе. */
    .table-order tbody tr.row-main.row-open {
        margin-bottom: .5rem;
    }
    /* Карточки идут в край намеренно, но голый текст описания так упирался
       буквами в зелёную полосу и в правый край - ему отступ нужен. */
    .order-summary {
        padding: .6rem .75rem;
    }
    .table-order .accordion-collapse .d-flex.flex-wrap {
        gap: 0 !important;
    }

    /* Страница заявки: карточки во всю ширину, без обрамляющей панели */
    .order-body {
        min-width: 0;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0;
        gap: .5rem !important;
    }
    .order-body > * {
        flex: 1 0 100%;
        min-width: 0;
    }
    .order-body table td {
        padding: .5rem;
        font-size: .875rem;
        overflow-wrap: anywhere;
    }
    .order-body table td:first-child {
        width: 50%;
        color: var(--bs-secondary-color);
    }

    /* "Добавьте груз / машину бесплатно" — two Bootstrap .col cards, i.e.
       flex: 1 0 0%, so they never wrapped and shrank to ~155px each. The
       illustration is pinned to the bottom-right corner of the card and
       landed on top of the button. Give them a real basis. */
    .col:has(> .add-free-side) {
        flex: 1 1 100%;
    }

    /* Шапка фильтра: заголовок и «Добавить транспорт» делят строку, из-за чего
       «Поиск грузов для международных автоперевозок» рвётся на четыре строки в
       166px, а кнопка уезжает за правый край. Кнопку — под заголовок. */
    .search-form > .d-flex.justify-content-between {
        flex-wrap: wrap;
    }
    .search-form > .d-flex.justify-content-between > .col-auto {
        flex: 1 0 100%;
    }

    /* «Поиск грузов» и «Поиск транспорта»: вдвоём им достаётся по 150px, и
       подпись ломается пополам — «Поиск / транспорта». Ставим друг под друга. */
    .search-form .tab-pane > .d-flex.gap-3 {
        flex-wrap: wrap;
    }
    .search-form .tab-pane > .d-flex.gap-3 > .btn {
        flex: 1 0 100%;
    }

    /* Карточки консультантов и пользователей идут по две в ряд. В 168px аватар
       и заголовок бок о бок не помещаются — названию оставалось два десятка
       пикселей, и оно вылезало за карточку. Ставим их друг под другом и
       убавляем поля. Карточек объявлений, статей и презентаций это не
       касается: у них картинка и так сверху. Карточки компаний идут по одной
       в ряд (.col-12), там ширины хватает — логотип остаётся слева от
       названия, как на старом сайте. */
    .col-6 > .card-item:has(> .d-flex.gap-3 > .col-auto img) {
        padding: .75rem !important;
    }
    .col-6 > .card-item > .d-flex.gap-3:has(> .col-auto img) {
        flex-direction: column;
        gap: .5rem !important;
    }
    /* Подвал карточки статьи и презентации: автор слева, просмотры прижаты
       вправо через ms-auto. В 168px они рядом не встают, и счётчик вылезал за
       карточку — разрешаем переносить. */
    .card-item > .d-flex.align-items-center.border-top {
        flex-wrap: wrap;
    }
    /* Строки «рубрика», «адрес» и прочие: иконка плюс колонка текста. У колонки
       min-width: auto, и на 320px, где карточка 133px, названия рубрик выходили
       за край. Даём ей сжиматься и ломать длинные слова. */
    .card-item li.d-flex > .d-flex.flex-column,
    .card-item li.d-flex {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Карточка компании: два столбца контактов — это .col, то есть flex: 1 0 0,
       и на телефоне они делили 311px пополам. «Специализация: Таможенный
       представитель» и почта ломались по слогам в 150px. Ставим друг под
       другом, с просветом между ними. */
    .company-info {
        row-gap: .75rem;
    }
    .company-info > .col {
        flex: 1 0 100%;
    }

    /* Разделы кабинета: обрамляющая панель отнимала по 24px с каждой стороны
       поверх гутера страницы, и «Международные автоперевозки» переставали
       умещаться в строку. Как на старом сайте — карточки идут прямо по фону,
       без панели вокруг, и разделены просветом. */
    .bg-white.p-4:has(> .list-group) {
        padding: 0 !important;
        background: transparent !important;
    }
    .bg-white:has(> .list-group) > .list-group > .list-group-item {
        margin-bottom: .5rem;
        border-radius: .5rem;
    }

    /* Колонки строки на телефоне встают друг под другом, а вертикальный гуттер
       у .row по умолчанию нулевой — кнопка «Добавить груз» упиралась в карточку
       контактов без зазора. Гуттер и есть штатный способ: он ставит отступ
       сверху каждой колонке, кроме первой, и ничего не добавляет после
       последней. */
    main.container .row {
        --bs-gutter-y: 1rem;
    }

    /* Секции главной разделены my-5: 48px сверху и снизу, и поля соседей не
       схлопываются — между блоками получается 96px, четверть экрана телефона
       уходит в пустоту. */
    main.container > .my-5 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Stats bar: smaller gaps and numbers */
    .main-info {
        column-gap: 1.5rem !important;
        row-gap: 1rem !important;
        padding: 1.25rem !important;
    }
    .main-info .h2 {
        font-size: 1.4rem;
    }

    /* Filter/search footers and button groups wrap instead of overflowing */
    .d-flex.justify-content-between.gap-3 {
        flex-wrap: wrap;
    }
    .btn-group {
        flex-wrap: wrap;
    }

    /* Страница пользователя */
    .bg-white.p-4:has(> .user-header) {
        padding: 1rem !important;
        gap: 1rem !important;
    }
    .user-header > .d-flex {
        flex-wrap: wrap;
        gap: .75rem !important;
    }
    .user-header img {
        width: 64px;
        height: 64px;
    }
    .user-header .col {
        min-width: 0;
    }
    .user-header h1 {
        font-size: 1.15rem;
    }
    .user-header small {
        font-size: .8125rem;
        line-height: 1.3;
    }
    .user-header > .d-flex > .col-auto:has(.btn) {
        flex: 1 0 100%;
    }
    .user-header > .d-flex > .col-auto:has(.btn) .btn {
        width: 100%;
    }

    #userTab .nav-link {
        font-size: .8125rem;
        padding: .4rem .6rem;
    }

    #userTab ~ .tab-content .row.row-gap-4 {
        row-gap: .75rem !important;
    }
    #userTab ~ .tab-content .table {
        margin-bottom: 1rem;
    }
    #userTab ~ .tab-content .table > tbody > tr > td {
        padding: .5rem .25rem;
        overflow-wrap: anywhere;
        vertical-align: top;
    }
    #userTab ~ .tab-content .table > tbody > tr > td:first-child {
        width: 40%;
        color: var(--bs-secondary-color);
    }

    /* Heading scale */
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }
    h3, .h3 { font-size: 1.15rem; }
    .section-content h2,
    .section-content h3 {
        font-size: 1.25rem;
    }

    /* Modals: near full-width on small screens */
    .fancybox__content {
        max-width: 94vw !important;
    }
}

/* ---- Phones ( < 576px ) ----------------------------------------------- */
@media (max-width: 575.98px) {
    /* Все номера остаются видимыми: сжимаем ячейки и разрешаем перенос на
       вторую строку — на глубокой странице номера четырёхзначные и в 303px
       одной строкой не влезают. */
    .pagination {
        flex-wrap: wrap !important;
        column-gap: 2px !important;
        row-gap: .25rem !important;
    }
    .pagination .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        min-height: 36px;
        padding: .25rem .25rem;
        font-size: .8125rem;
    }

    /* Бургер вперёд, название следом: на телефоне меню — главное, чем со
       страницы уходят. Переставляем порядком, а не разметкой, — кнопка лежит
       внутри .col с навигацией, вынуть её оттуда нельзя. Колонке снимаем рост,
       иначе она заберёт всю строку и отожмёт логотип вправо. */
    .header .row > .col:has(.navbar-toggler) {
        order: -1;
        flex: 0 0 auto;
        width: auto;
    }
    /* .navbar — блочный флекс-контейнер и занимает всю колонку, из-за чего та
       забирала строку целиком и логотип уезжал под неё. */
    .header .row > .col:has(.navbar-toggler) > .navbar {
        display: inline-flex;
    }
    /* Распирать строку стало некому, когда колонка с навигацией перестала
       расти, — письмо с аватаром прилипли к названию. */
    .header .row > .col-auto:last-child {
        margin-left: auto;
    }

    /* Гостю в шапке нужны и логотип, и бургер, и две кнопки: в полном размере
       «ВХОД» наезжает на бургер. */
    .header .btn[data-auth-tab] {
        padding: .25rem .75rem;
        font-size: .75rem;
    }
    /* И даже так гостевая шапка просила 398px: на 390 и 393 (iPhone 12 и 14)
       строка ломалась, «ВХОД» с «РЕГИСТРАЦИЯ» уезжали на вторую, а слева от
       них оставалась пустая полоса. Забираем недостающее из зазора между
       колонками (по краям поля держит .container, они не меняются) и из кегля
       названия - трёх колонок хватает уже на 360px. */
    .header .row {
        --bs-gutter-x: .5rem;
    }
    .header .logo {
        font-size: 1.25rem;
    }

    /* Order-card action buttons: shrink so the row never overflows */
    .btn-control {
        width: 52px;
    }
    .btn-control small {
        font-size: 10px;
    }

    /* Stats: two per row */
    .main-info a {
        flex: 0 0 40%;
    }

    /* Card-footer / prominent buttons go full width */
    .card-item .btn,
    .d-flex.gap-3 > .btn.w-100 {
        width: 100%;
    }

    /* Auth / large forms: p-5 is too much padding on a phone */
    form.p-5 {
        padding: 1.25rem !important;
    }

    /* Владельческие кнопки объекта: на телефоне подпись под иконкой шире самой
       кнопки, поэтому ряд из пяти-семи штук ломался на два-три ряда (см. правило
       про flex: 0 0 33.333% в блоке < 992px). Прячем подписи — иконки помещаются
       в одну строку; смысл кнопки остаётся в tooltip'е. */
    .ads-control,
    .article-control,
    .blog-control,
    .company-control,
    .consultant-control,
    .faq-control,
    .presentation-control,
    .resume-control,
    .vacancy-control {
        flex-wrap: nowrap;
        /* Иконки разной природы - шрифтовая .bi и 16px svg - дают разную высоту
           строки, и при align-items-center кнопки вставали лесенкой. Растяжка
           равняет их по самой высокой; !important нужен потому, что утилита
           .align-items-center на обёртке объявлена с ним же. */
        align-items: stretch !important;
    }
    .ads-control > .col,
    .article-control > .col,
    .blog-control > .col,
    .company-control > .col,
    .consultant-control > .col,
    .faq-control > .col,
    .presentation-control > .col,
    .resume-control > .col,
    .vacancy-control > .col {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }
    .ads-control :is(br, small),
    .article-control :is(br, small),
    .blog-control :is(br, small),
    .company-control :is(br, small),
    .consultant-control :is(br, small),
    .faq-control :is(br, small),
    .presentation-control :is(br, small),
    .resume-control :is(br, small),
    .vacancy-control :is(br, small) {
        display: none;
    }
}
/* Телефон и модалка мессенджеров (chunks/phone.tpl + initPhoneModal) */
.pb-phone {
    cursor: pointer;
    white-space: nowrap;
}
.pb-phone-modal .pb-phone-number {
    color: var(--text-color, inherit);
}
.pb-phone-messenger img {
    display: block;
    border-radius: 12px;
    transition: transform .15s ease-in-out;
}
.pb-phone-messenger:hover img {
    transform: scale(1.06);
}

/* Ручная выдача платного доступа на странице пользователя (только админу) */
.btn-pro-1,
.btn-pro-3,
.btn-pro-6,
.btn-pro-12 {
    color: var(--white);
}
.btn-pro-1 {
    background-color: var(--green);
    border-color: var(--green);
}
.btn-pro-3 {
    background-color: #2f6fdb;
    border-color: #2f6fdb;
}
.btn-pro-6 {
    background-color: #9b4dca;
    border-color: #9b4dca;
}
.btn-pro-12 {
    background-color: #e0357b;
    border-color: #e0357b;
}
.btn-pro-off {
    background-color: transparent;
    border-color: var(--dusty-color);
    color: var(--dusty-color);
}
.btn-pro-off:hover {
    background-color: var(--dusty-color);
    border-color: var(--dusty-color);
    color: var(--white);
}

/* Баннеры (блок «Баннер», чанк banner.tpl). Палитра перенесена со старого
   сайта: promo_color_1…22 → banner-color-1…22. Первые 19 — светлые фоны,
   их и раздаёт случайный выбор; 20–22 назначаются вручную. */
.banner {
    position: relative;
    display: block;
    width: 100%;
    border: 1px solid #e0dae8;
    border-radius: 1rem;
    overflow: hidden;
}
.banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 1.125rem;
    row-gap: .75rem;
    padding: 1rem;
}
.banner-icon {
    display: block;
    flex: 0 0 auto;
    order: 2;
    width: 54px;
    height: 54px;
    padding: 7px;
    margin-left: auto;
    object-fit: contain;
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 7px rgb(0 0 0 / 8%), 0 1px 1px rgb(0 0 0 / 10%);
}
.banner-text {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 72px);
    color: var(--black);
}
.banner-title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.banner-description {
    margin-top: .25rem;
    font-size: .8125rem;
    line-height: 1.375;
    overflow-wrap: anywhere;
}
.banner-button {
    position: relative;
    z-index: 2;
    order: 3;
    width: 100%;
    padding: .5rem 1rem;
    background-color: var(--white);
    color: var(--black);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 6px;
    box-shadow: 0 4px 7px rgb(0 0 0 / 8%), 0 1px 1px rgb(0 0 0 / 10%);
}
.banner-button:hover,
.banner-button:focus {
    color: var(--black);
    background-color: var(--grey);
}

/* От 576px карточка выстраивается в строку. Перенос оставлен включённым
   намеренно: кнопка не сжимается (nowrap), и на узкой колонке ей проще
   съехать вниз, чем разгонять заголовок на три строки. */
@media (min-width: 576px) {
    .banner-inner {
        padding: .875rem 1.25rem;
    }
    .banner-icon {
        order: 0;
        margin-left: 0;
    }
    .banner-text {
        order: 0;
        flex: 1 1 15rem;
        max-width: none;
    }
    .banner-button {
        order: 0;
        flex: 0 0 auto;
        width: auto;
        margin-top: .25rem;
        margin-left: auto;
    }
}

.banner-color-1 { background-image: radial-gradient(circle 321px at 8.3% 75.7%, rgb(209 243 247) 0%, rgb(217 213 249) 81%); }
.banner-color-2 { background-image: radial-gradient(circle farthest-corner at 10% 20%, rgb(255 229 168) 0%, rgb(251 174 222) 100.7%); }
.banner-color-3 { background-image: linear-gradient(109.6deg, rgb(253 199 141) 11.3%, rgb(249 143 253) 100.2%); }
.banner-color-4 { background-image: linear-gradient(to right, rgb(182 244 146), rgb(86 202 208)); }
.banner-color-5 { background-image: radial-gradient(circle farthest-corner at 1.5% 1.4%, rgb(159 227 255) 0%, rgb(185 255 177) 100.2%); }
.banner-color-6 { background-image: linear-gradient(359deg, rgb(255 242 150) -17.7%, rgb(255 161 161) 101.5%); }
.banner-color-7 { background-image: linear-gradient(359deg, rgb(150 255 236) -17.7%, rgb(255 248 161) 101.5%); }
.banner-color-8 { background-image: linear-gradient(89.9deg, rgb(208 246 255) 0.1%, rgb(255 237 237) 47.9%, rgb(255 255 231) 100.2%); }
.banner-color-9 { background-image: linear-gradient(106.8deg, rgb(117 255 210) 6%, rgb(163 216 255) 47.6%, rgb(248 215 251) 87.8%); }
.banner-color-10 { background-image: linear-gradient(89.9deg, rgb(208 246 255) 0.1%, rgb(255 237 237) 47.9%, rgb(255 255 231) 100.2%); }
.banner-color-11 { background-image: linear-gradient(106.8deg, rgb(117 255 210) 6%, rgb(255 187 187) 47.6%, rgb(246 237 247) 87.8%); }
.banner-color-12 { background-image: radial-gradient(circle farthest-corner at 1.5% 1.4%, rgb(205 251 202) 0%, rgb(251 216 234) 100.2%); }
.banner-color-13 { background-image: linear-gradient(89.9deg, rgb(239 255 253) 0.1%, rgb(216 255 207) 47.9%, rgb(225 251 255) 100.2%); }
.banner-color-14 { background-image: linear-gradient(106.8deg, rgb(251 210 231) 6%, rgb(254 255 163) 47.6%, rgb(247 227 249) 87.8%); }
.banner-color-15 { background-image: linear-gradient(106.8deg, rgb(210 251 247) 6%, rgb(211 255 163) 47.6%, rgb(227 249 242) 87.8%); }
.banner-color-16 { background-image: linear-gradient(89.9deg, rgb(250 251 255) 0.1%, rgb(218 255 215) 47.9%, rgb(255 255 231) 100.2%); }
.banner-color-17 { background-image: linear-gradient(89.9deg, rgb(255 247 230) 0.1%, rgb(215 242 255) 47.9%, rgb(242 255 231) 100.2%); }
.banner-color-18 { background-image: radial-gradient(circle farthest-corner at 10% 20%, rgb(204 255 246) 43%, rgb(255 197 218) 100.7%); }
.banner-color-19 { background-image: radial-gradient(circle farthest-corner at 10% 20%, rgb(255 242 204) 43%, rgb(255 210 197) 100.7%); }
.banner-color-20 { background-image: linear-gradient(90deg, rgb(230 242 255) 0%, rgb(203 240 255) 35%, rgb(234 250 255) 100%); }
.banner-color-21 { background-image: linear-gradient(90deg, rgb(255 189 11) 0%, rgb(255 189 11 / 90%) 25%, rgb(255 255 255) 100%); }
.banner-color-22 { background-image: linear-gradient(90deg, rgb(124 7 43) 0%, rgb(141 7 49) 30%, rgb(214 16 75) 100%); }
.banner-color-22 .banner-text {
    color: var(--white);
    text-shadow: 1px 1px 1px #710727;
}

/* Вариант карточки для блока «VIP-публикация» (чанк vip-content.tpl): та же
   сетка, что у баннера, но фон белый, слева не иконка, а превью записи, а
   вместо кнопки — значок VIP в углу. */
.banner-plain {
    background: var(--white);
}
.banner-plain .banner-inner {
    padding-right: 4.25rem;
}
.banner-photo {
    order: 0;
    margin-left: 0;
    padding: 0;
    object-fit: cover;
}
.banner-badge {
    position: absolute;
    z-index: 2;
    top: .75rem;
    right: .75rem;
    /* .badge тянется на height:100%, а у абсолютного элемента это высота всей
       карточки — значок уезжал на её середину. */
    height: auto;
}
.banner-plain .banner-text {
    /* Запас справа держит .banner-inner, а текст должен ужиматься под остаток
       строки, а не переноситься под превью: без flex-basis 0 он мерил себя по
       содержимому и уезжал на вторую строку. */
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}
.banner-plain .banner-title,
.banner-plain .banner-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    /* Заголовок записи рвать по слогам нельзя — только переносить целиком. */
    overflow-wrap: break-word;
}
/* «Информация» у ТОП-компании: рассказ об услуге, а не переход в карточку,
   поэтому кнопка лежит над .banner-overlay (z-index 1), иначе клик по ней
   уходит на страницу компании. Строку под неё резервирует .banner-has-info:
   описание в карточке обрезано по двум строкам и иначе оказалось бы под ней. */
.banner-has-info .banner-inner {
    padding-bottom: 2rem;
}
.banner-info {
    position: absolute;
    z-index: 2;
    right: .75rem;
    bottom: .75rem;
    display: inline-flex;
    align-items: center;
    color: var(--steel-blue);
    font-size: .8125rem;
    text-decoration: none;
}
.banner-info:hover {
    color: var(--green);
    text-decoration: underline;
}
/* На телефоне и планшете мобильный тап-таргет растит .btn-sm до 44px, а места
   под кнопку зарезервировано 32px - «Информация» ложилась поверх второй строки
   описания. Резервируем ровно высоту кнопки с её отступом снизу. */
@media (max-width: 991.98px) {
    .banner-has-info .banner-inner {
        padding-bottom: 3.5rem;
    }
}


/* Модалка авторизации: две вкладки сверху, как на старом сайте. */
.auth-modal .modal-dialog {
    max-width: 540px;
}
/* Крестик вынесен вбок, а не наверх: форма регистрации высокая, и над ней
   остаётся 20-30px — меньше, чем нужно кнопке, поэтому раньше приходилось
   убирать её внутрь ленты вкладок. Сбоку место есть всегда, пока диалог
   (540px) уже вьюпорта. position: fixed тут не годится — .modal-dialog
   создаёт для него containing block, и координаты снова считаются от окна. */
.auth-modal-close {
    position: absolute;
    top: .5rem;
    right: -2.75rem;
    z-index: 2;
    opacity: .85;
}
.auth-modal-close:hover {
    opacity: 1;
}
.auth-tabs {
    --bs-nav-tabs-border-width: 0;
    border-bottom: 1px solid var(--grey);
}
.auth-tabs .nav-link {
    border: 0;
    border-radius: 0;
    padding: 1rem .75rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--black);
    background-color: var(--white);
}
.auth-tabs .nav-link:hover {
    color: var(--green);
}
.auth-tabs .nav-link.active {
    color: var(--white);
    background-color: var(--green);
}
/* Углы скругляем самим вкладкам: overflow: hidden на .modal-content обрезал бы
   вынесенный наружу крестик. */
.auth-tabs .nav-item:first-child .nav-link {
    border-top-left-radius: var(--bs-modal-inner-border-radius);
}
.auth-tabs .nav-item:last-child .nav-link {
    border-top-right-radius: var(--bs-modal-inner-border-radius);
}
/* Узкий экран: окно занимает его целиком, выносить крестик некуда — возвращаем
   его внутрь, в свободный правый край ленты вкладок. */
@media (max-width: 660px) {
    .auth-modal-close {
        --bs-btn-close-white-filter: none;
        position: absolute;
        top: .875rem;
        right: .75rem;
        z-index: 3;
    }
    .auth-tabs {
        padding-right: 2.5rem;
    }
    .auth-tabs .nav-link {
        padding: .875rem .5rem;
        font-size: .95rem;
    }
}

/* Обзор компании пишет сам владелец в Quill, где из заголовков только H2 и
   H3. Глобальный h3 в 28px внутри такого текста читается как ещё один
   заголовок страницы, поэтому здесь он подзаголовок абзаца. */
.company-overview h3 {
    font-size: 18px;
}

.password-field {
    position: relative;
}
.password-field .form-control {
    padding-right: 2.75rem;
}
.password-field .form-control.is-invalid {
    background-image: none;
}
.password-field .password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: #6c757d;
    line-height: 1;
}
.password-field .password-toggle:hover,
.password-field .password-toggle:focus-visible {
    color: #212529;
}
.password-field .password-toggle i {
    font-size: 1.125rem;
}
.password-field:has(.is-invalid) + .invalid-feedback {
    display: block;
}

/* Левая колонка кабинета: просмотры, ссылка на встречный борт и подписка -
   одна и та же плашка «иконка в зелёном кружке + подпись». Раньше каждая из
   трёх выглядела по-своему: кнопка, голая ссылка и btn-sm. */
.order-aside {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .5rem .15rem .15rem;
    border: 0;
    background: transparent;
    color: var(--black);
    text-align: left;
    text-decoration: none;
    font-size: 12px;
}
.order-aside:hover {
    color: var(--green);
}
/* Только своя иконка плашки: `>` обязателен - внутри плашки даты создания
   лежит бейдж «НОВАЯ» со своей иконкой, и без него она тоже превращалась бы в
   зелёный кружок 22px. */
.order-aside > .bi {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-size: 12px;
}
.order-aside:disabled {
    background: #f1f3f5;
    color: var(--muted, #8b96a3);
}
.order-aside:disabled > .bi {
    background: #adb5bd;
}
/* Отметка, а не действие (дата создания заявки в кабинете): та же плашка, но
   серая и без отклика на наведение - иначе читается как ещё одна кнопка. */
.order-aside-info,
.order-aside-info:hover {
    color: var(--muted, #8b96a3);
    cursor: default;
}

/* Три кнопки строки - избранное, раскрытие и заметка - стоят столбиком у
   правого края ячейки: в ряд они отнимали у колонки заказчика 90 пикселей, и
   телефон с почтой переносились по слогам. flex: none обязателен: без него
   длинное имя заказчика сдавливало группу и кружки съезжали в овалы. */
.order-row-actions {
    flex: none;
}
/* Коробка подсказки у кнопки раскрытия: data-bs-toggle у самой кнопки занят
   аккордеоном, а Bootstrap держит на элементе один компонент. Без inline-flex
   коробка была бы строчной и добавляла бы под кнопкой полосу базовой линии. */
.order-open-box {
    display: inline-flex;
}
/* Звёздочка «в избранное». Размер тот же, что у соседней кнопки раскрытия
   строки (30x30), иначе в плотной таблице она сбивала высоту ячейки.

   Неотмеченная - контурная и приглушённая: в строке уже есть значок PRO,
   бэйджик статуса и кнопка контактов, и четвёртый яркий элемент читался бы как
   ещё одно платное выделение. Отмеченная заливается золотом - тем же цветом,
   которым на сайте помечены ТОП и VIP, потому что смысл у неё тот же:
   «выделено», только выделено лично тобой. */
.order-fav {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted, #8b96a3);
    line-height: 1;
}
.order-fav .bi {
    font-size: 17px;
}
.order-fav:hover {
    background: var(--bs-secondary-bg, #e9ecef);
    color: #e8a33d;
}
.order-fav.is-on {
    color: #e8a33d;
}
/* Личная заметка к карточке: значок блокнота и начало текста рядом с ним.

   Значок того же размера, что и звёздочка, и так же приглушён, пока заметки
   нет: в строке уже есть значок PRO, бэйджик статуса и две кнопки, и третий
   яркий элемент читался бы как ещё одно платное выделение. С заметкой он
   становится зелёным - цветом собственных действий на сайте, а не золотом
   ТОПа: заметка ничего не выделяет для других, её вообще видит один автор.

   Коробка - inline-flex: без заметки она занимает ровно значок и не добавляет
   строке пустой полосы, с заметкой встаёт рядом с текстом. */
.order-note-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}
.order-note {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted, #8b96a3);
    line-height: 1;
}
.order-note .bi {
    font-size: 16px;
}
.order-note:hover {
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-success, #198754);
}
.order-note.is-on {
    color: var(--bs-success, #198754);
}
/* Те же два значка, но в шапке карточки: там они стоят не в плотной строке
   таблицы, а рядом с именем и телефонами - размер строки доски (30x30) рядом с
   заголовком и кнопками мессенджеров 40x40 читался как мелочь на полях.
   Отдельным правилом, а не правкой базовых: доски держат высоту ячейки этими
   тридцатью пикселями.

   Размер висит на коробке ряда, а не классом на самой кнопке: после нажатия
   сервер возвращает чанк заново и подменяет кнопку по id, а `class` обратно не
   ездит - значок съёжился бы ровно в момент отметки. */
.object-marks .order-fav,
.object-marks .order-note {
    width: 40px;
    height: 40px;
}
.object-marks .order-fav .bi {
    font-size: 24px;
}
.object-marks .order-note .bi {
    font-size: 22px;
}
/* Текст заметки - двумя строками максимум: в строке доски он стоит в ячейке
   заказчика, и длинная памятка растянула бы всю таблицу. Целиком заметка
   открывается в окне и показывается всплывающей подсказкой. */
.order-note-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.3;
    color: var(--muted, #8b96a3);
    word-break: break-word;
}

/* Полоса заметки под строкой заявки - во всю ширину таблицы и целиком, без
   обрезки по двум строкам. Стоит везде, где есть строка: доска, избранное,
   «Недавно смотрели», раздел заметок. Раскрывать заявку ради собственной
   памятки не надо - её пишут, чтобы увидеть в списке.

   Ячейка без подложки, а плашка внутри - со своей: сверху строка бывает
   обычная, ТОПовая (песочный узор) и подсвеченная сроком, и повторять каждую
   подложку пришлось бы правилом на случай. На белом одинаково читается под
   любой.

   Светло-зелёная плашка с зелёной чертой - тем же цветом, что значок заметки:
   это цвет собственных действий на сайте, а не золото ТОПа. Заметка ничего не
   выделяет для других, её вообще видит один автор. */
.table-order tbody tr.row-note > td {
    padding: 0 .75rem .6rem;
    background: transparent;
    border-bottom: 1px solid #dde5f0;
}
/* Линию под строкой гасим: заметка и её заявка - одно целое, а разделяет их
   теперь линия под самой заметкой. Класс ставит шаблон, а не :has - у строки
   есть текст заметки ещё до вывода. */
.table-order tbody tr.row-main.has-note > td {
    border-bottom-color: transparent;
}
.order-note-row {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: .4rem;
    padding: .5rem .75rem;
    border-left: 3px solid var(--green);
    border-radius: 4px;
    background: #f1f7e9;
    font-size: 13px;
    line-height: 1.45;
    color: var(--black);
    word-break: break-word;
}
.order-note-row > .bi {
    flex: none;
    color: var(--green);
    line-height: 1.45;
}
.order-note-row-text {
    flex: 1 1 auto;
    min-width: 0;
}
/* Карандаш и корзина справа - правка и удаление на месте, без разворачивания
   заявки: заметку перечитывают и тут же дополняют («ещё раз возили, опять
   вовремя») или убирают, когда она устарела. Прижаты к правому краю, чтобы не
   разрывать текст, и того же зелёного, что вся полоса. */
.order-note-row-actions {
    flex: none;
    display: inline-flex;
    align-items: flex-start;
    gap: 2px;
    margin-left: auto;
}
.order-note-edit,
.order-note-remove {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--green);
    line-height: 1;
}
.order-note-edit:hover,
.order-note-remove:hover {
    background: var(--white);
}
/* Корзина краснеет только под курсором: в спокойном виде она такая же часть
   полосы, как карандаш, и красный значок у каждой заметки читался бы как
   предупреждение о самой заметке. */
.order-note-remove:hover {
    color: var(--bs-danger, #dc3545);
}
.order-note-edit .bi,
.order-note-remove .bi {
    font-size: 14px;
}

/* «Управление» раскрытой заявки - полосой под карточками, а не четвёртой
   колонкой: кнопок там десяток, и столбиком они растягивали панель вдвое.
   Кнопки встают по ширине подписи и переносятся на вторую строку.

   Флекс свой, а не бутстраповские d-flex/flex-wrap/gap-2: правило мобильного
   медиазапроса гасит зазоры у всякого `.d-flex.flex-wrap` внутри раскрытой
   строки (`gap: 0 !important` - карточки панели на телефоне идут в край), и на
   телефоне кнопки слипались в сплошное полотно. Тот же приём, что у
   .order-controls выше. */
.order-manage .card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .5rem;
}
/* Заметка тянет за собой свой текст, и в ряду кнопок он расползался на
   пол-полосы: коробке ставим потолок, дальше текст переносится. */
.order-manage .order-note-box {
    max-width: 260px;
}
/* Плашка «вы скрыли заявку» - не кнопка, а сообщение: занимает всю полосу и
   встаёт на свою строку. */
.order-manage .alert {
    flex: 1 1 100%;
}
@media (max-width: 768px) {
    /* На телефоне десять кнопок ложатся в пять-шесть рядов, и полрядка
       восьмипиксельных зазоров читались как сплошное полотно: добавляем
       воздуха. Заметке потолок ширины снимаем - на узком экране он оставлял
       её текст в одной колонке с пустым полем справа. */
    .order-manage .card-body {
        gap: .625rem;
    }
    .order-manage .order-note-box {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    /* На телефоне строка таблицы - карточка со своей рамкой и отступом снизу.
       Полоса заметки отдельной карточкой оторвалась бы от заявки: подтягиваем
       её вплотную и отдаём верхние углы предыдущей карточке. */
    .table-order tbody tr.row-note {
        margin-top: -1rem;
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    /* Подпись слева ячейке заметки не нужна: data-label у неё нет, а пустой
       float в 38% ширины отъедал бы место у текста. */
    .table-order tbody tr.row-note > td::before {
        display: none;
    }
    .table-order tbody tr.row-note > td {
        padding: .5rem;
        text-align: left;
    }
}
.order-aside-info > .bi {
    background: #adb5bd;
}
/* Уже подписан: кружок красный, как красная кнопка «Отписаться» на странице
   заявки. Класс вешает themes/js/main.js после переключения. */
.order-aside.is-subscribed > .bi {
    background: var(--red, #dc3545);
}
/* Счётчик подписчиков направления в кнопке подписки и число встречных заявок
   в ссылке на встречный борт. Приглушённая пилюля, а не badge с цветом: это
   справка о спросе, а не действие, и на зелёной кнопке «Подписаться» яркая
   метка перетягивала бы внимание с подписи. currentColor с прозрачностью -
   чтобы читалось и на светлой кнопке доски, и на красной «Отписаться», и на
   плашке кабинета. */
.subscribe-count,
.order-count {
    flex: none;
    margin-left: .35rem;
    padding: 0 .4rem;
    border-radius: 20px;
    background: rgb(0 0 0 / .08);
    color: inherit;
    font-size: .85em;
    line-height: 1.6;
    opacity: .75;
}
.btn-danger .subscribe-count,
.btn-success .subscribe-count {
    background: rgb(255 255 255 / .25);
}
/* В узкой колонке кабинета подпись и так короткая - счётчик прижимаем
   вплотную, иначе плашка расходится по ширине колонки. */
.order-aside .subscribe-count,
.order-aside .order-count {
    margin-left: .2rem;
}
/* Строка кабинета: подписка есть, а писем нет - потому что под ней нет
   действующего объявления. Предупреждение, а не ошибка: подписка цела и
   оживёт сама, как только владелец продлит заявку. */
.subscription-idle {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    margin-top: .25rem;
    color: #a1670c;
    font-size: 12px;
    line-height: 1.35;
}
.subscription-idle .bi {
    flex: none;
    font-size: 11px;
}

/* Окно со списком: зелёная шапка с крестиком - как на старом сайте.
   Собственная кнопка закрытия, потому что фансибоксовая висит поверх угла
   шапки и на зелёном не читается. */
.views-modal {
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.views-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    background: var(--green);
    color: #fff;
    font-weight: 700;
}
.views-modal-close {
    padding: 0 .25rem;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 24px;
    line-height: 1;
}
.views-modal-body {
    padding: 1rem;
    max-height: 60vh;
    overflow-y: auto;
}
.fancybox__content:has(#order-views) {
    padding: 0;
}
.fancybox__content:has(#order-views) > .f-button.is-close-btn {
    display: none;
}

.order-views-list {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.order-views-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    width: 84px;
    color: inherit;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.order-views-item img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.order-views-item:hover span {
    color: var(--green);
}

/* Заказчик/перевозчик в строке: имя и, если у заявки стоит статус, его бейдж
   под ним - как на старом сайте. Длинные названия компаний рвём по символу,
   иначе одно слово растягивало колонку. */
.order-client {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    min-width: 0;
    overflow-wrap: anywhere;
}
.badge-order-status {
    background: var(--orange, #e1782b);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Тело поста блога. Тексты перенесены со старого сайта, где статья шла в
   17px/155%, а заголовки внутри неё были всего 18px и 17px. Бутстрап рисует
   h2 в 32px, h3 в 28px - рядом с абзацем в 16px это выглядит выкриком, и
   разметка легаси (h2 на каждый раздел) превращает пост в лестницу
   заголовков. Возвращаем старые пропорции. */
.blog .content {
    font-size: 17px;
    line-height: 1.55;
    overflow-wrap: break-word;
}
.blog .content p {
    margin: 12px 0;
}
.blog .content h1,
.blog .content h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 1em 0 .7em;
}
.blog .content h3,
.blog .content h4,
.blog .content h5,
.blog .content h6 {
    font-size: 17px;
    font-weight: 500;
    margin: 1em 0 .7em;
}
.blog .content b,
.blog .content strong {
    font-weight: 600;
}

/* На странице заявки сводка уже лежит в белой карточке - вторая подложка с
   полосой и отступами выглядела блоком в блоке. Оставляем только текст. */
.order-summary-page .order-summary {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* Витрина тарифов (/services-prices). Раскладка со старого сайта: колонка на
   период, разделённые тонкими линиями, ценник и кнопка прибиты к низу - чтобы
   строки «Добавление заявок» у соседних колонок стояли на одной высоте. */
.tariffs-head {
    background: var(--green);
}
.tariffs-head p {
    margin-bottom: .5rem;
}
.tariffs-currency .btn {
    min-width: 200px;
}
.tariffs-currency .btn-check:checked + .btn {
    background: var(--green);
    border-color: var(--white);
    color: var(--white);
}
.tariffs-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.tariff-card {
    display: flex;
    flex-direction: column;
    padding: 2rem 1rem;
    text-align: center;
    border-left: 1px solid var(--muted-grey);
}
.tariff-card:first-child {
    border-left: 0;
}
.tariff-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
}
.tariff-name {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 1.5rem;
}
.tariff-description {
    font-size: 14px;
    color: var(--slate);
    margin-bottom: 1rem;
}
.tariff-features {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}
.tariff-features li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem .25rem;
    border-top: 1px solid var(--grey);
}
.tariff-features li:first-child {
    border-top: 0;
}
.tariff-feature-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.tariff-feature-icon {
    flex: none;
    fill: var(--black);
}
.tariff-foot {
    margin-top: auto;
    padding-top: 2rem;
}
.tariff-price {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}
.tariff-old {
    display: block;
    font-size: 18px;
    font-weight: 400;
    color: var(--slate);
}
.tariff-free,
.tariff-note {
    margin-top: .5rem;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--slate);
}
/* .btn в теме - блочный флекс, и кнопка вставала по левому краю карточки, а не
   под ценой: колонка выровнена по центру, а кнопка одна смотрела влево.
   Размер по содержимому плюс auto-поля возвращают её на середину. */
.tariff-button {
    display: inline-flex;
    width: auto;
    margin: 1rem auto 0;
    min-width: 130px;
    text-transform: uppercase;
}
.tariffs-bottom p {
    margin-bottom: .25rem;
}

/* Карточка «что доступно бесплатно». Стоит между шапкой и прайсом и нарочно не
   похожа на колонку тарифа: там покупают период, здесь просто перечисляют, что
   уже есть. Отсюда светлый фон и рамка вместо белой колонки с ценником. */
.tariffs-free {
    border-bottom: 1px solid var(--muted-grey);
}
.tariffs-free-head {
    text-align: center;
}
.tariffs-free-badge {
    display: inline-block;
    margin-bottom: .75rem;
    padding: .25rem .75rem;
    border-radius: 2rem;
    background: var(--green);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.tariffs-free-title {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: .5rem;
}
.tariffs-free-lead {
    font-size: 14px;
    color: var(--slate);
    margin-bottom: 1.5rem;
}
/* Шесть пунктов в столбик растягивают блок на экран: на широком они идут в две
   колонки, на узком сами сворачиваются в одну. */
.tariffs-free-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: .75rem 2rem;
    margin: 0 auto;
    max-width: 900px;
    font-size: 14px;
    font-weight: 600;
}
.tariffs-free-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.tariffs-free-list .bi {
    flex: none;
    color: var(--green);
    line-height: 1.5;
}
.tariffs-free-foot {
    margin-top: 1.5rem;
    text-align: center;
}
.tariffs-free-button {
    display: inline-flex;
    width: auto;
    margin: 0 auto .75rem;
    text-transform: uppercase;
}
.tariffs-free-note {
    margin-bottom: 0;
    font-size: 13px;
    color: var(--slate);
}

/* На узком экране колонки встают друг под друга, и вертикальная линия между
   ними превращается в лишнюю черту сбоку. */
@media (max-width: 767.98px) {
    .tariff-card {
        border-left: 0;
        border-top: 1px solid var(--muted-grey);
    }
    .tariff-card:first-child {
        border-top: 0;
    }
    /* Три валюты в 311px не помещались по 140px, и «Лей MDL» уезжал на вторую
       строку, вставая по центру под стыком двух верхних — ряд выглядел
       обрубленным. Делим ширину поровну на всех. */
    .tariffs-currency {
        display: flex;
        width: 100%;
    }
    .tariffs-currency .btn {
        flex: 1 1 0;
        min-width: 0;
        padding-left: .5rem;
        padding-right: .5rem;
    }
}

/* Блок «бесплатные показы кончились». Был alert-danger — красная плашка про
   ошибку, хотя ничего не сломалось: человеку просто предлагают тариф. Косая
   штриховка цепляет взгляд не хуже красного, но читается как «внимание», а не
   «авария», и оставляет зелёной кнопке роль единственного яркого пятна.

   Кнопка была btn-outline-success, то есть бутстраповский #198754 — такого
   зелёного на сайте больше нигде нет. Теперь заливка фирменным --green. */
.contacts-limit {
    padding: 1.25rem;
    border: 1px solid #ffdf9e;
    border-radius: .5rem;
    color: var(--black);
    background-color: #fffaef;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 152, 0, .09) 0 10px,
        transparent 10px 20px
    );
}
.contacts-limit h5 {
    margin-bottom: .75rem;
    font-weight: 700;
}
.contacts-limit p {
    margin-bottom: .5rem;
}
.contacts-limit a:not(.btn) {
    color: var(--forest-green);
    font-weight: 600;
}
/* .btn в теме — блочный флекс, и кнопка растягивалась во всю ширину блока.
   Возвращаем ей размер по содержимому. */
.contacts-limit .btn {
    display: inline-flex;
    width: auto;
    margin-top: .5rem;
}

/* Оформление заказа (/checkout). Раскладка со старого сайта: слева период и
   способы оплаты, разбитые на группы с заголовками и логотипами платёжных
   систем, справа контакты и итог. */
.checkout-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 1rem;
}
.checkout-title:not(:first-child) {
    margin-top: 1.5rem;
}
/* Кнопки периода компактные: их четыре, и они не должны спорить с ценой. */
.checkout-period {
    padding: .5rem .75rem;
    font-size: 14px;
    font-weight: 600;
}
.checkout-periods .btn-check:checked + .checkout-period {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
}
.checkout-periods {
    max-width: 500px;
}
.checkout-payment {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
    padding-left: 0;
}
.checkout-payment .form-check-input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
}
.checkout-payment .form-check-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    cursor: pointer;
}
/* Логотипы приходят разной высоты - от узкой полоски VISA до квадратного
   счёта, поэтому ограничиваем высоту, а не ширину. */
.checkout-logo {
    max-height: 34px;
    max-width: 100%;
    width: auto;
}
.checkout-payment-name {
    font-weight: 600;
}
/* Набор «Visa, МИР, MasterCard, СБП» - четыре знака в две строки, поэтому под
   общую высоту он не влезает: у него своя. */
.checkout-logo-payanyway {
    max-height: 70px;
}
/* Страница реквизитов (/order-pending): выбранный период уже не переключатель,
   а напоминание о том, что человек купил, - зелёная плашка вместо радиокнопки. */
.checkout-period-chosen {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
}
.checkout-period-chosen:hover {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
    cursor: default;
}
/* .btn в теме - блочный флекс, и на телефоне плашка «10 дней» растягивалась во
   всю колонку, притворяясь кнопкой во весь экран. Возвращаем размер по
   содержимому - так же, как это уже сделано для .contacts-limit. */
.checkout-pending .btn {
    display: inline-flex;
    width: auto;
}
/* Инструкция способа - HTML из менеджера: там встречается и один абзац с
   номером карты, и десяток строк банковских реквизитов. */
.checkout-instructions p:last-child {
    margin-bottom: 0;
}

/* Единственное фото записи показываем целиком, во всю ширину карточки: гонять
   ради него карусель не за чем, а слайд в 306x250 обрезал вертикальные
   картинки. Старый сайт делал так же - класс `one` вместо слайдера.
   Класс общий на все разделы, разметку даёт chunks/gallery.tpl. */
.single-photo {
    display: block;
}
.single-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .5rem;
}

/* Расширенная строка заявки: контакты заказчика и переход на встречную доску.
   Видны только менеджеру и администратору. */
.order-client-full {
    /* 14px вместо прежних 12: колонка с телефонами и почтой - рабочий
       инструмент менеджера, и мелочью её было не прочитать. */
    font-size: .875rem;
    line-height: 1.35;
}
.order-client-full > * {
    display: block;
    margin-bottom: .35rem;
}
.order-client-full > *:last-child {
    margin-bottom: 0;
}
.order-client-full a {
    /* Графит вместо фирменного зелёного: в колонке пять ссылок подряд, и
       зелёным она превращалась в частокол. Интерактивность показываем
       подчёркиванием при наведении. */
    color: var(--black);
}
.order-client-full a:hover,
.order-client-full a:focus {
    color: var(--dark);
    text-decoration: underline;
}
.order-counter.btn {
    /* Флекс, а не inline-flex: кнопка встаёт под тип транспорта отдельной
       строкой, иначе липнет к нему сбоку. fit-content держит её по ширине
       подписи - тема объявляет .btn блочным, и он растянулся бы на колонку. */
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-top: .75rem;
    white-space: normal;
    text-align: left;
    line-height: 1.25;
}
.order-counter.btn + .order-counter.btn {
    /* Вторая кнопка идёт следом за первой, а не за типом транспорта: отступ в
       .75rem между ними читался как разрыв между разными блоками. */
    margin-top: .35rem;
}

/* Значок платного тарифа. Словом, а не звездой: над карточкой компании уже
   висят золотые VIP и ТОП, обе со звёздами, - третий золотой значок рядом
   читался бы как ещё одно платное выделение объявления. Здесь речь о другом:
   аккаунт оплачен, значит контакты открыты и написать можно без лимита.
   Отсюда и цвет - фирменный зелёный, не золото рекламных плашек. */
.pro-badge-group {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    vertical-align: middle;
    cursor: help;
}
.pro-badge {
    display: inline-block;
    padding: .05rem .3rem;
    border-radius: 3px;
    background: var(--green);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .04em;
}
.pro-badge-text {
    color: var(--steel-blue);
    font-size: 12px;
    font-weight: 600;
}
/* Объяснение под контактами: почему они открыты. Тон спокойный - это не
   реклама на месте телефона, а подпись к нему. */
.pro-note {
    line-height: 1.35;
}
.pro-note small {
    color: var(--steel-blue);
}
/* Та же мысль в плашке исчерпанного лимита, только со стороны покупателя. */
.pro-limit-hint {
    font-size: 13px;
    line-height: 1.6;
    color: var(--steel-blue);
}

/* Кнопка «Показать ещё» под списком. Была outline-контуром в зелёном на белом
   и терялась между строками списка и пагинацией — писали, что её не видно.
   Возвращаем вид старого сайта: сплошная заливка фирменным зелёным, ширина
   заметно больше содержимого, капслок. */
.btn[pb-loadmore] {
    min-width: min(400px, 100%);
    padding: .9rem 2rem;
    background-color: var(--green);
    border-color: var(--green);
    color: var(--white);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.btn[pb-loadmore]:hover {
    background-color: var(--forest-green);
    border-color: var(--forest-green);
    color: var(--white);
}

/* Формы заявок и фильтры разложены рядами пар: страна погрузки - страна
   разгрузки, город - город, zip - zip. На десктопе это читается колонками
   («слева весь маршрут откуда, справа куда»), а на телефоне ряды схлопываются
   в один столбец, и поля начинают чередоваться: страна, страна, город, город.

   Порядок в DOM не трогаем - он нужен ряду на широком экране. На узком
   собираем ногу маршрута вместе: сперва все поля погрузки (export_*), затем
   разгрузки (import_*), остальные поля ряда - датами и типом груза - остаются
   после них в своём порядке. Ноги узнаются по префиксу имени поля, поэтому
   правило работает и там, где вместо zip стоит порт или аэропорт. */
@media (max-width: 767.98px) {
    .route-row > :has([name^="export_"]) {
        order: 0;
    }
    .route-row > :has([name^="import_"]) {
        order: 1;
    }
    .route-row > :not(:has([name^="export_"], [name^="import_"])) {
        order: 2;
    }
}

/* Профиль пользователя: три отдельные таблицы «подпись - значение» идут одна
   под другой. При обычной раскладке каждая делит ширину по своему содержимому,
   и граница между колонками у секций расходится - значения статистики стоят
   правее данных пользователя. Фиксируем колонку подписей, чтобы все три
   таблицы читались одной парой столбцов. */
.table-pairs {
    table-layout: fixed;
}
.table-pairs td {
    overflow-wrap: anywhere;
}
.table-pairs td:first-child {
    width: 40%;
}
@media (max-width: 575.98px) {
    .table-pairs td:first-child {
        width: 45%;
    }
}

/* Календарь фильтров: разрешённый день соседнего месяца не должен выглядеть
   запрещённым. flatpickr красит их почти одинаково - 30% чёрного у дня чужого
   месяца против 10% у запрещённого, - и в поле с потолком «сегодня» календарь,
   открытый первого числа, читался как «ничего, кроме сегодня, выбрать нельзя»:
   весь месяц впереди справедливо погашен, а вчерашнее число стоит в первом
   ряду тем же серым, что и погашенные. Кликалось оно и так, но по виду - нет. */
.flatpickr-day.prevMonthDay:not(.flatpickr-disabled),
.flatpickr-day.nextMonthDay:not(.flatpickr-disabled) {
    color: rgba(57, 57, 57, .75);
}

/* Строка поиска по сайту. Круглая и без кнопки: единственное поле формы
   отправляется по Enter, а на телефоне клавиатура сама показывает клавишу
   поиска - кнопка занимала бы треть ширины экрана впустую. */
.site-search-field {
    position: relative;
}

.site-search-field .form-control {
    border-radius: 2rem;
    padding-left: 3rem;
    padding-right: 3.25rem;
    box-shadow: 0 .125rem .5rem rgba(19, 28, 33, .08);
    transition: box-shadow .15s ease-in-out, border-color .15s ease-in-out;
}

.site-search-field .form-control:focus {
    box-shadow: 0 .25rem 1rem rgba(19, 28, 33, .14);
}

/* Иконка внутри поля, а не отдельной колонкой: с колонкой круглые углы
   пришлось бы городить у двух элементов и стыковать их между собой. */
.site-search-icon {
    position: absolute;
    top: 50%;
    left: 1.15rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color, #6c757d);
    pointer-events: none;
    line-height: 1;
}

/* Крестик очистки у type=search в вебките лезет под нашу правую подложку. */
.site-search-field input[type="search"]::-webkit-search-cancel-button {
    margin-right: .25rem;
}

/* Подсказки. Абсолютом над контентом: в потоке список раздвигал бы страницу
   на каждую букву. */
.site-search-suggest {
    position: absolute;
    z-index: 1030;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    max-height: 22rem;
    overflow-y: auto;
    border-radius: 1.25rem;
}

.site-search-suggest .list-group-item {
    border-left: 0;
    border-right: 0;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.site-search-suggest .list-group-item:first-child {
    border-top: 0;
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
}

.site-search-suggest .list-group-item:last-child {
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
}

/* Кнопка голосового ввода. Внутри поля справа - там же, где её ищут в
   поисковиках и мессенджерах. В разметке скрыта: показывает её скрипт и
   только там, где браузер умеет распознавать речь. */
.site-search-voice {
    position: absolute;
    top: 50%;
    right: .75rem;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.site-search-voice:hover {
    background: rgba(19, 28, 33, .06);
    color: var(--bs-body-color, #212529);
}

/* Слушает: красным и с пульсацией - состояние должно читаться без подписи,
   потому что в этот момент человек смотрит не на экран, а говорит. */
.site-search-voice.is-listening {
    color: #dc3545;
    background: rgba(220, 53, 69, .1);
    animation: site-search-pulse 1.2s ease-in-out infinite;
}

@keyframes site-search-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, .35); }
    50%      { box-shadow: 0 0 0 .4rem rgba(220, 53, 69, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .site-search-voice.is-listening { animation: none; }
}

/* Сводная выдача поиска: /search.

   Список, а не сетка карточек с картинками, как в разделах. Человек здесь не
   разглядывает, а сканирует глазами и уходит в нужный раздел, и главное для
   него - заголовок и та строка, из-за которой находка попала в выдачу.
   Совпавшие слова приходят из PHP уже обёрнутыми в <b>. */
.site-search-results {
    max-width: 56rem;
}

.search-heading {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 1.75rem;
}

.search-empty {
    padding: 2rem 0 1rem;
}

.search-group + .search-group {
    margin-top: 2rem;
}

.search-group-head {
    /* Те же горизонтальные отступы, что у строк ниже: без них подчёркивание
       заголовка и разделители строк расходятся по ширине на 1,5rem. */
    margin: 0 -.75rem;
    padding: 0 .75rem .5rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    /* На телефоне «Все результаты (15)» рядом с длинным заголовком раздела не
       помещается: переносим, а не сжимаем название. */
    flex-wrap: wrap;
    gap: .25rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.search-group-title {
    font-size: .95rem;
    font-weight: 600;
    margin: 0;
}

/* Счётчик тише заголовка: он уточняет, а не называет. */
.search-group-count {
    font-weight: 400;
    color: var(--bs-secondary-color, #6c757d);
    margin-left: .25rem;
}

.search-group-all {
    font-size: .85rem;
    text-decoration: none;
    white-space: nowrap;
}

.search-group-all:hover {
    text-decoration: underline;
}

.search-hits {
    display: flex;
    flex-direction: column;
}

.search-hit {
    display: block;
    padding: .75rem .75rem .8rem;
    margin: 0 -.75rem;
    border-radius: .75rem;
    text-decoration: none;
    color: inherit;
    transition: background-color .12s ease;
}

.search-hit + .search-hit {
    border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .075));
}

.search-hit:hover,
.search-hit:focus-visible {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/* Соседняя рамка при наведении мешает: подсветка уже отделила строку. */
.search-hit:hover + .search-hit,
.search-hit:hover {
    border-top-color: transparent;
}

.search-hit-title {
    display: block;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bs-link-color, #0d6efd);
}

.search-hit:hover .search-hit-title {
    text-decoration: underline;
}

/* Две строки описания - ровно столько, чтобы понять, о чём находка. */
.search-hit-note {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: .15rem;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--bs-secondary-color, #6c757d);
}

.search-hit b {
    font-weight: 700;
    color: inherit;
}

/* Оценка в отзыве. Радиокнопки идут от пяти к одной, поэтому подсветка
   «до выбранной» рисуется соседями ~: у CSS нет обратного комбинатора, и
   обратный порядок в разметке - единственный способ обойтись без скрипта. */
.stars-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: .25rem;
    border: 0;
    padding: 0;
    margin: 0;
}

.stars-input legend {
    float: none;
    width: auto;
    order: 1;
    margin: 0 .5rem 0 0;
    font-size: 1rem;
}

.stars-input__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.stars-input__star {
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--bs-gray-400);
    transition: color .12s ease-in-out;
}

.stars-input__radio:checked ~ .stars-input__star,
.stars-input__star:hover,
.stars-input__star:hover ~ .stars-input__star {
    color: #ffc107;
}

/* Клавиатура: обводка нужна на самой звезде - у инпута её не видно. */
.stars-input__radio:focus-visible + .stars-input__star {
    outline: 2px solid var(--bs-success);
    outline-offset: 2px;
    border-radius: 2px;
}

.stars-view {
    font-size: .9rem;
    line-height: 1;
    white-space: nowrap;
}

/* Флаг страны в блоке событий на главной.

   Спрайт `i.flag` пришёл со старого сайта и рассчитан на строку доски: у
   самого значка `line-height: 18px`, а у его `::before` - `vertical-align:
   super`. В ячейке доски шрифт мельче и это сходится, а в заголовке ленты
   (16px при line-height 24px) двойное выравнивание выталкивало флаг к
   верхней кромке строки - он висел над текстом.

   Поэтому здесь `super` снимается, высота строки прижимается к самому
   значку, и уже готовый бокс 16x11 выравнивается по середине текста.
   Правка нарочно ограничена `.eventfeed`: на досках спрайт стоит верно, и
   трогать его там нечего. */
.eventfeed i.flag {
    vertical-align: middle;
    line-height: 1;
}

.eventfeed i.flag::before {
    vertical-align: top;
}

/* Плитки статусов в форме подачи заявки (chunks/fields/order-status.tpl).

   Список был колонкой обычных `form-check`, и на широкой форме пять галочек
   занимали высоту, ничего при этом не подсказывая. Плитка - та же галочка, но
   с иконкой и собственной рамкой: пункты читаются по сетке, а кликабельна
   вся карточка, а не подпись шириной в слово.

   Отмеченное и заблокированное состояния берутся с самого инпута через
   `:has()` - он в этом файле уже используется, отдельного класса от JS не
   нужно. */
.status-tile {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    margin: 0;
    padding: .75rem .875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.status-tile:hover {
    border-color: var(--bs-success);
}

.status-tile__icon {
    flex: 0 0 auto;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--bs-secondary-color);
}

.status-tile__label {
    flex: 1 1 auto;
    min-width: 0;
}

.status-tile__input {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

.status-tile:has(input:checked) {
    border-color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), .06);
}

.status-tile:has(input:checked) .status-tile__icon {
    color: var(--bs-success);
}

/* Лимит в три пункта JS проставляет инпутам `disabled`: плитка должна гаснуть
   вместе с галочкой, иначе она выглядит рабочей и не нажимается. */
.status-tile:has(input:disabled) {
    opacity: .55;
    cursor: default;
}

.status-tile:has(input:disabled):hover {
    border-color: var(--bs-border-color);
}

.status-tile:has(input:focus-visible) {
    outline: 2px solid var(--bs-success);
    outline-offset: 2px;
}

/* Образец выделенной строки в форме подачи (chunks/fields/highlight.tpl).

   Повторяет строку доски настолько, насколько нужно для выбора: точка
   свежести слева, маршрут с весом и кузовом, время подачи справа. Само
   выделение рисуется теми же приёмами, что и в выдаче - жирный шрифт либо
   зелёная рамка (.highlight-font / .highlight-frame выше). */
.highlight-preview {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .875rem;
    border: 2px solid transparent;
    border-radius: .5rem;
    background: var(--bs-tertiary-bg, #f5f6f7);
    font-size: .9375rem;
    line-height: 1.3;
}

.highlight-preview__dot {
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--green, #6aa84f);
}

.highlight-preview__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.highlight-preview__text--empty {
    color: var(--bs-secondary-color);
}

.highlight-preview__date {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
}

.highlight-preview--font .highlight-preview__text {
    font-weight: 700;
}

.highlight-preview--frame {
    border-color: var(--green, #6aa84f);
    background: #fff;
}

/* На широком экране кнопки выделения стоят по своему тексту: равные доли
   (flex-basis: 0) схлопывали колонку col-md-auto до минимума, и «Без
   выделения» обрезалось собственной кнопкой - у .btn текст не переносится.

   На телефоне наоборот: группа занимает строку целиком и делится поровну, а
   подписи внутри кнопок переносятся - втроём в 380px они не помещаются. */
.highlight-choice .btn {
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .highlight-choice {
        width: 100%;
    }

    .highlight-choice .btn {
        flex: 1 1 0;
        min-width: 0;
        white-space: normal;
    }
}

/* На телефоне образец не влезает в строку - там он переносится, а время
   остаётся в первой строке справа. */
@media (max-width: 575.98px) {
    .highlight-preview {
        align-items: flex-start;
    }

    .highlight-preview__dot {
        margin-top: .4rem;
    }

    .highlight-preview__text {
        white-space: normal;
        overflow: visible;
    }
}

/* Форма доски внутри окна правки разобранной заявки.

   В окно попадает та же форма, что стоит на странице, - со своей вёрсткой:
   каждая группа полей там отдельная белая карточка с большим внутренним
   отступом, и таких карточек в форме четыре. На странице это ряд блоков с
   воздухом между ними, а в модальном окне тот же воздух складывается с
   отступом самого окна и растягивает форму вдвое.

   Поэтому карточки здесь разбираются обратно в простой поток: фон и скругление
   ни к чему - окно уже белое, - а расстояние между группами задаётся один раз. */
[data-ai-editor] .modal-body form {
    gap: 1rem;
}

[data-ai-editor] .modal-body .bg-white {
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0;
}

[data-ai-editor] .modal-body .mb-4,
[data-ai-editor] .modal-body .mb-3 {
    margin-bottom: 0;
}

/* Заголовок формы в окне лишний: его место занимает заголовок самого окна, а
   подзаголовок формы - подсказка для страницы подачи, а не для правки. */
[data-ai-editor] .modal-body form h1,
[data-ai-editor] .modal-body form > .bg-white > p:first-of-type {
    display: none;
}

/* Группы «Дополнительно / Документы / Оплата» и блок статусов идут внутри
   формы своими рядами - им хватает половины прежнего отступа. */
[data-ai-editor] .modal-body .row.g-3 {
    --bs-gutter-y: .75rem;
}

/* Пометки под разобранной заявкой.

   «Не хватает для публикации» и «доска не поддерживается» - это причины, по
   которым заявку не отправить, и в общем сером тексте они терялись: человек
   жал «Опубликовать выбранные» и не понимал, почему часть карточек не ушла.
   Даём им рамку и цвет по весу: красное останавливает, жёлтое предупреждает. */
.ai-note {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: .25rem 0;
    padding: .35rem .6rem;
    border: 1px solid;
    border-radius: .5rem;
    font-weight: 500;
}

.ai-note i {
    flex: none;
    line-height: 1.4;
}

.ai-note-blocking {
    color: #b02a37;
    background: #fdecea;
    border-color: #f1aeb5;
}

.ai-note-warning {
    color: #8a6100;
    background: #fff6e5;
    border-color: #ffd99b;
}

/* Кнопка внутри пометки «не хватает для публикации». Прижата вправо и не
   сжимается: список недостающих полей бывает и в одно слово, и в три строки,
   а кнопка, встающая то сразу за текстом, то далеко от него, ищется глазами
   дольше самой пометки. */
.ai-note-action {
    flex: none;
    margin-left: auto;
    padding: .05rem .5rem;
    line-height: 1.5;
}

/* Аккордеон с описанием Smart-заявки.

   Своим классом, потому что тема уже переопределила `.accordion-button` под
   раскрывашку строки в таблице заявок: подпись по центру, нулевые отступы и
   спрятанный `::after`. Для обычного аккордеона это давало ряд одинаковых
   строчек по центру без единого намёка, что на них нажимают. Возвращаем
   привычный вид, не трогая таблицу.

   Шеврон — своим элементом `<i>`, а не псевдоэлементом: его тема прячет
   глобально, зато поворот иконки у открытого раздела там же и написан
   (`.accordion-button:not(.collapsed) .bi`) — достаётся даром. */
.ai-accordion .accordion-button {
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: inherit;
}

/* Открытый раздел Bootstrap красит в голубое и подсвечивает рамкой. Здесь это
   чужой цвет: заголовок раздела не должен выглядеть выделенным полем ввода. */
.ai-accordion .accordion-button:not(.collapsed) {
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.ai-accordion .accordion-body {
    padding: 0 0 1rem;
}

/* Поля недостающего под красной пометкой. Подпись над полем, а не слева:
   «Объём груза» вдвое длиннее самого поля, и в строку они укладывались только
   на широком экране. */
.ai-card-fill {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    margin: .25rem 0 .5rem;
}

.ai-card-fill-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 8rem;
}

.ai-card-fill-item .form-control,
.ai-card-fill-item .form-select {
    min-width: 8rem;
    padding: .15rem .5rem;
    font-size: .875rem;
}

/* Сама строка такой заявки - с красной чертой слева: когда заявок восемь, глаз
   идёт по колонкам и пометку под строкой замечает не сразу. */
.ai-card-blocked > td:first-child {
    box-shadow: inset 3px 0 0 #dc3545;
}

/* Кнопки помощника — фирменным зелёным.

   Тема перекрашивает `.btn-success` в var(--green), но у кнопок внутри виджета
   побеждало базовое правило Bootstrap `.btn { background: var(--bs-btn-bg) }`:
   специфичность у них одинаковая, а порядок решает не в нашу пользу. Задаём
   цвет адресно — заодно видно, что виджет не заводит своей палитры, а берёт
   ту же, что и весь сайт. */
[data-ai-widget] .btn-success,
[data-ai-widget] .btn-success:disabled {
    background-color: var(--green);
    border-color: var(--green);
    color: var(--white);
}

[data-ai-widget] .btn-success:hover:not(:disabled) {
    background-color: var(--forest-green, var(--dark));
    border-color: var(--forest-green, var(--dark));
}

/* Выбор доски и вида на «Быстрой заявке».

   Тот же приём, что у переключателя валют на витрине тарифов: Bootstrap красит
   отмеченную кнопку своим тёмно-зелёным (--bs-btn-active-bg), а у сайта зелёный
   свой. Ховер — общий тёмный темы, как у всех кнопок. */
[data-ai-scope] .btn-check:checked + .btn {
    background-color: var(--green);
    border-color: var(--green);
    color: var(--white);
}

[data-ai-scope] .btn:hover,
[data-ai-scope] .btn-check:checked + .btn:hover {
    background-color: var(--dark);
    border-color: var(--dark);
    color: var(--white);
}

[data-ai-scope] .btn-check:focus-visible + .btn {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* Поля окна правки стояли слишком далеко от его краёв: 16px самого окна плюс
   12px колонки сетки давали 41px до первой подписи при ширине окна в 800px.
   Ужимаем окно, а не сетку: сетка тут общая с формой на странице. */
[data-ai-editor] .modal-header,
[data-ai-editor] .modal-footer {
    padding: .75rem 1rem;
}

[data-ai-editor] .modal-body {
    padding: .5rem .75rem 1rem;
}


/* Выбор типа и категории на телефоне.

   Кнопок девять, строка узкая. Ряд не переносим - слитная группа для того и
   выбрана, чтобы читаться переключателем, - а отдаём горизонтальной прокрутке:
   край последней кнопки виден, и понятно, что список продолжается. */
@media (max-width: 767.98px) {
    [data-ai-scope] .btn-group {
        max-width: 100%;
        /* У бутстраповской группы перенос разрешён, и ряд ломался на три
           строки вместо того, чтобы уехать за край. */
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    [data-ai-scope] .btn-group::-webkit-scrollbar {
        display: none;
    }

    [data-ai-scope] .btn-group > .btn {
        flex: 0 0 auto;
        padding: .25rem .6rem;
        font-size: .8125rem;
        white-space: nowrap;
    }

    [data-ai-scope] .fw-semibold {
        font-size: .8125rem;
        margin-bottom: .35rem !important;
    }

    [data-ai-scope] .mb-3 {
        margin-bottom: .75rem !important;
    }
}


/* Описание Smart-заявки на её странице - то, что видит гость вместо формы.

   Номер шага кружком и цитата чужого сообщения моноширинным: и то и другое
   встречается только здесь, поэтому живёт рядом, а не в общих утилитах. */
.ai-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    font-size: .875rem;
    font-weight: 600;
}

.ai-example-in {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.6;
    /* Свой светло-зелёный, а не --light-green: тот насыщенный (#d1e6b6) и под
       мелким моноширинным текстом читается плохо. */
    background: #f8faf5;
    border-radius: .5rem;
    padding: .75rem;
    /* Длинный телефон и тире без пробелов не должны растягивать карточку на
       телефоне - перенос по любому месту, как в самом поле ввода. */
    overflow-wrap: anywhere;
}


/* Полоса про Smart-заявку над шапкой сайта.

   Зелёная, во всю ширину, с крестиком справа. На телефоне остаётся только
   заголовок: пояснение и кнопка съедали три строки над и без того тесной
   шапкой. */
.smart-promo {
    background: var(--green);
    color: var(--white);
    font-size: .875rem;
}

.smart-promo-inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: .45rem;
    padding-bottom: .45rem;
}

.smart-promo-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--white);
    text-decoration: none;
}

.smart-promo-link:hover {
    color: var(--white);
    text-decoration: underline;
}

.smart-promo-icon {
    flex: none;
    fill: currentColor;
}

.smart-promo-text {
    min-width: 0;
}

.smart-promo-lead::before {
    content: ' — ';
}

/* Короткий заголовок - только для телефона, где лид спрятан. */
.smart-promo-title-short {
    display: none;
}

.smart-promo-cta {
    flex: none;
    margin-left: auto;
    padding: .15rem .6rem;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 1rem;
    white-space: nowrap;
}

.smart-promo-close {
    flex: none;
    padding: 0 .25rem;
    border: 0;
    background: none;
    color: var(--white);
    font-size: 1.35rem;
    line-height: 1;
    opacity: .8;
}

.smart-promo-close:hover {
    opacity: 1;
}

@media (max-width: 767.98px) {
    .smart-promo {
        font-size: .8125rem;
    }

    .smart-promo-lead,
    .smart-promo-cta,
    .smart-promo-title {
        display: none;
    }

    .smart-promo-title-short {
        display: inline;
    }
}

/* Блок «Таможенное оформление» (chunks/main/customs-brokers.tpl).

   ТЕКСТ ЧЁРНЫЙ. Блок стоит в баннерном месте - между формой фильтра и таблицей
   заявок, - и зелёным в нём было всё: подписи кнопок (btn-outline-success),
   названия компаний (обычный цвет ссылки), галочки услуг. Рядом зелёная кнопка
   «Поиск грузов», за которой человек сюда и пришёл, и пять зелёных пятен подряд
   перетягивали внимание на подсказку. Зелёный остался акцентом: галочка услуги,
   наведение на название и фон раскрытой кнопки.

   Открытую панель видно по самой кнопке: две одинаковые кнопки рядом иначе не
   показывают, какая из них сейчас развёрнута, и список компаний читается как
   общий для обеих стран. Состояние держит Bootstrap - у закрытой кнопки стоит
   класс .collapsed, поэтому правило и написано через :not(). */
.customs-brokers-toggle {
    color: var(--black);
    background-color: var(--white);
    border-color: #e0dae8;
}

.customs-brokers-toggle:hover,
.customs-brokers-toggle:focus {
    color: var(--black);
    background-color: var(--cool-grey);
    border-color: #d5cddf;
}

.customs-brokers-toggle:not(.collapsed) {
    color: var(--black);
    background-color: var(--soft-green);
    border-color: var(--light-green);
}

.customs-brokers-toggle .bi-chevron-down {
    transition: transform .2s;
}

.customs-brokers-toggle:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

.customs-broker-name {
    color: var(--black);
}

.customs-broker-name:hover,
.customs-broker-name:focus {
    color: var(--green);
}

/* Галочка перед услугой - единственное зелёное в строке: она читается как
   отметка в списке, а не как ссылка, и в 12 пикселях внимания не забирает. */
.customs-broker-services .bi-check2 {
    color: var(--green);
}

/* Последняя строка панели упирается в ссылку «Все таможенные представители»:
   черта под ней читалась бы как черта над ссылкой. */
.customs-brokers .customs-broker-item:last-of-type {
    border-bottom: 0 !important;
}