/*
 * Дополнения поверх реальной темы etransp.ru (theme.css = оригинальный
 * style990.css). Здесь только то, чего в оригинальной теме не было:
 * новые UI-элементы (хлебные крошки, похожие маршруты, панель
 * сортировки/фильтра результатов, оверлей загрузки, автокомплит).
 * НЕ переопределяем базовые элементы (body/header/footer/формы) —
 * это отдаёт настоящая тема.
 */

/*
 * КРИТИЧНО: .b-header__main в theme.css имеет ЖЁСТКО зафиксированную
 * высоту (100px на десктопе, разные значения вплоть до 88px в добром
 * десятке медиазапросов под разные ширины) — рассчитана на то, что
 * форма в шапке всегда умещается в одну строку. С нашим flex-wrap
 * (форма переносится на несколько строк на узких экранах) это ломает
 * вёрстку насмерть: контент страницы съезжает и накладывается поверх
 * шапки, потому что высота контейнера не растёт под фактический контент.
 * Одно правило с !important перебивает все брейкпоинтные варианты сразу
 * — гоняться за каждым медиазапросом по отдельности смысла нет.
 */
.b-header .b-header__main {
    height: auto !important;
    min-height: 60px;
    padding-top: 16px;
    padding-bottom: 20px;
}

/* Иконка для "Городской транспорт" (pseudo-gortrans) — это НАШ добавленный
   тип, которого не было в оригинальной форме поиска, поэтому и иконки для
   него в реальной теме нет. Стиль/структура (font-family, font-weight,
   font-size) взяты один в один с остальными .ico*:before в theme.css —
   код глифа fa-shuttle-van (\f5b6, доступен в Font Awesome 5 Free Solid). */
.icogortrans:before {
    font-family: "Font Awesome 5 Free";
    content: '\f5b6';
    font-weight: 600;
    color: #8e44ad;
    font-size: 1.3em;
}
/* та же отступ-логика, что и у остальных кнопок типа транспорта (#b1x—#b5x в theme.css) */
#b6x { padding: 4px 22px; }

.autocomplete-list {
    position: fixed; z-index: 10000; background: #fff; border: 1px solid #ddd;
    border-radius: 4px; max-height: 220px; overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.autocomplete-item { padding: 8px 12px; cursor: pointer; text-align: left; }
.autocomplete-item:hover { background: #f0f4fa; }

/* breadcrumbs */
.breadcrumbs { margin: 12px 0 8px; font-size: 1.4rem; color: #666; }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumbs li:not(:last-child)::after { content: '›'; margin-left: 4px; color: #999; }
.breadcrumbs a { color: #1a3c6e; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* related routes */
.related-routes { margin-top: 32px; padding-top: 16px; border-top: 1px solid #eee; }
.related-routes h2 { font-size: 1.1rem; }

/* results toolbar (sort/filter) */
.results-toolbar {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin: 16px 0; padding: 12px; background: #f5f7fa; border-radius: 6px;
}
.results-toolbar span { font-size: 1.4rem; color: #666; margin-right: 4px; }
.results-toolbar button {
    background: #fff; border: 1px solid #ccc; border-radius: 4px;
    padding: 6px 12px; cursor: pointer; font-size: 1.4rem;
}
.results-toolbar button.active { background: #1a3c6e; color: #fff; border-color: #1a3c6e; }
.results-toolbar label { font-size: 1.4rem; display: flex; align-items: center; gap: 4px; cursor: pointer; }
section.route.js-hidden, section.route.js-hidden-lastochka { display: none !important; }

/* абзацы в контентных блоках (например пояснение над результатами поиска) */
.g-container p {
    width: 100% !important;
    margin-top: 9px;
    margin-bottom: 0px;
    line-height: 1.3em;
}
.g-container h1 {
    margin-bottom: 15px !important;
}
@media (max-width: 680px) {
    .g-container h1 {
        padding-top: 0px !important;
    }
}

.route .transfer, .route .transport_type {
    margin-bottom: 7px;
}

.bilet {
  width: 708px;
  height: 50px;
  margin-left: 0px;
  margin-bottom: 30px;
  margin-top: 0px;
}

.g-text ul {
  list-style: none;
  margin-left: 0;
}

/* route summary / stop elapsed time */
.route-summary {
  list-style: none;
  padding: 0;
  margin: 20px 0 10px;
  margin-left: 0px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.route-summary li {
    background: #f5f7fa;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 1.4rem;
}
.station-elapsed {
    color: #888;
    font-size: 1.3rem;
    margin-left: 8px;
}
.col-xs-6 {
    width: 50%;
}
header.b-header {
    border-bottom: none;
    padding-top: 0px;
    padding-bottom: 0;
}

/* search loading overlay */
.search-loading-overlay {
    position: fixed; inset: 0; background: rgba(255,255,255,0.85);
    display: none; align-items: center; justify-content: center;
    z-index: 1000; font-size: 1.1rem; color: #1a3c6e;
}
.search-loading-overlay.active { display: flex; }

/* простые страницы содержимого (список раздела, 404 и т.п.) —
   без своего дизайна в оригинальной теме, минимальное оформление */
.content-list { list-style: none; padding: 0; }
.content-list li { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #eee; }
.pagination a, .pagination span { margin-right: 8px; }
.pagination .current { font-weight: bold; }

/*
 * Кнопка "поменять местами" в компактной форме шапки (.rbut) в реальной
 * теме позиционируется через position:absolute с ФИКСИРОВАННЫМ пиксельным
 * right:58px относительно ВСЕЙ .input-group (от поля "Откуда" до кнопки
 * "Расписание") — то есть завязана на общую ширину формы, а не на
 * границу между двумя городскими полями. При ресайзе экрана это "плывёт".
 * В присланном архиве темы не было ни адаптивных вариантов этого правила,
 * ни точной оригинальной обёртки вокруг пары полей, под которую эти
 * фиксированные 58px были рассчитаны изначально — поэтому вместо
 * дальнейшего гадания даём этому месту свою независимую, гарантированно
 * стабильную раскладку через flex, игнорируя абсолютное позиционирование
 * темы (наш style.css грузится после theme.css, поэтому побеждает).
 */
/*
 * Переделано по образцу оригинала (etransp.ru): поля "Откуда"/"Куда"
 * стоят ДРУГ ПОД ДРУГОМ (не в один тесный ряд с типом/датой/кнопкой) —
 * у каждого крестик очистки справа, общая стрелка "поменять местами"
 * одна, по центру между двумя полями. Тип/дата/кнопка — отдельным рядом
 * ниже. Эта раскладка сама по себе устойчивее к нехватке ширины, чем
 * прежняя попытка втиснуть всё в одну строку (источник почти всех
 * прошлых проблем со сжатием/наложением полей).
 */
.header-cities-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.city-field-row {
    position: relative;
}
.header-cities-wrap #fromInput,
.header-cities-wrap #toInput {
    width: 100% !important;
    padding-right: 32px !important; /* место под крестик очистки */
    box-sizing: border-box;
}
.city-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
}
.city-clear:hover { color: #1a3c6e; }
/*
 * У #del_from/#del_to в theme.css есть СВОИ правила по ID
 * (position:absolute; top:2px/top:57px; right:0; width:34px;height:44px)
 * — ID специфичнее любого класса независимо от порядка загрузки файлов,
 * поэтому .city-clear выше проигрывал этому правилу целиком (крестики
 * улетали в верхний левый угол формы). Перебиваем через сами ID + !important.
 */
#del_from, #del_to {
    top: 43% !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    width: 18px !important;
    height: 18px !important;
    transform: translateY(-50%) !important;
    line-height: 18px !important;
    text-align: center;
    color: #999;
    background: transparent !important;
}
#del_from:hover, #del_to:hover { color: #1a3c6e; }
/* сами внутренние "перекладины" крестика из оригинала (2 повёрнутые
   линии) больше не используем — заменили на текстовый символ "×"
   напрямую в #del_from/#del_to, эти вложенные псевдо-элементы не нужны */
#del_from1, #del_from2, #del_to1, #del_to2 { display: none !important; }

.header-cities-wrap .rbut {
    position: absolute !important;
    right: -34px !important;
    top: 50% !important;
    left: auto !important;
    transform: translateY(-50%) rotate(90deg) !important;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
/* место под стрелку сбоку, раз она теперь абсолютно позиционирована
   относительно .header-cities-wrap, а не внутри потока строки */
.cities-cell {
    padding-right: 34px;
}

/* тип/дата/кнопка — отдельный ряд под городами, тоже с переносом при нехватке места */
.header-row2 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
}

/*
 * Та же история с .rbut_first (кнопка "поменять местами" на ГЛАВНОЙ
 * странице, крупная форма) — в теме сразу ЧЕТЫРЕ конфликтующих правила с
 * разным right (489px/352px/351px/30px), явно рассчитанные на разные
 * варианты обёртки/брейкпоинты, которых нет в нашей структуре. Даём и
 * этому месту свою предсказуемую flex-раскладку.
 */
.inputmainitems2 {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.inputmainitems2 .city-field-row {
    position: relative;
    flex: 1 1 160px;
}
.inputmainitems2 #fromInput,
.inputmainitems2 #toInput {
    width: 100% !important;
    padding-right: 32px !important; /* место под крестик очистки */
    box-sizing: border-box;
    margin-right: 0 !important;
}
.inputmainitems2 .rbut_first {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}
.inputmainitems2 .ondate_main {
    flex: 0 0 auto;
}
.ondate_main {
    height: 48px;
    border: solid 1px #ccc;
    padding-left: 10px;
    margin-top: 0px;
    width: 20%;
    padding-right: 10px;
}
.inputmainitems2 .date-quick-wrap {
    flex: 0 0 auto;
}

/*
 * Логотип в шапке: .slogan1/.slogan2 в теме позиционируются через
 * ОТРИЦАТЕЛЬНЫЙ margin-top (-76px/-52px) поверх float:left — хак,
 * рассчитанный на точный контекст (конкретную высоту/ширину соседних
 * элементов), которого у нас нет — из-за этого текст логотипа наезжает
 * сам на себя. Свой flex вместо этого (только для внутреннего контейнера
 * иконка+название, не для всего .b-logo_x — там ещё колонка с кнопкой
 * мобильного меню, которую трогать не нужно).
 */
.logo-text-wrap {
    display: flex !important;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap; /* было wrap — из-за этого название иногда
        уезжало ПОД иконку на мобильных, вместо места рядом с ней */
    width: 170px; /* попросили — но именно у .logo-text-wrap, не у общего
                     .g-col-12, иначе сломало бы сетку по всему сайту */
}
/*
 * В theme.css у .b-logo есть вариант с position:absolute (top:29px;
 * left:50px и т.п.) — рассчитан на точный контекст оригинальной
 * структуры (абсолютные координаты относительно конкретного предка),
 * которого у нас нет. Из-за этого иконка вытаскивалась из потока
 * полностью и накладывалась на текст в произвольном месте вместо
 * места рядом с ним внутри flex. Возвращаем в обычный поток.
 */
.logo-text-wrap .b-logo {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    text-align: left !important;
}
.logo-text-wrap .slogan2 {
    float: none !important;
    margin: 0 !important;
    width: auto !important;
    font-weight: 700;
    line-height: 1.25;
}
.logo-text-wrap .b-logo__img {
    margin: 0 !important;
    width: 48px !important;
}

/*
 * Переход десктопного меню (.b-menu) в гамбургер (.toggler/.hamburger) —
 * в теме зашит на @media(max-width:580px). Сдвигаем на 1200px: ниже
 * этой ширины показываем гамбургер и прячем инлайн-меню, выше —
 * наоборот (это уже поведение темы по умолчанию, явно не дублируем).
 */
@media (max-width: 1200px) {
    .toggler, .hamburger { display: block !important; }
    .b-menu { display: none !important; }
}
/* немного опускаем гамбургер вслед за увеличенным верхним отступом
   шапки (.b-header__main padding-top выше) — иначе визуально слишком
   близко к полям формы под ним */
.hamburger { top: 36px !important; }
.toggler {
    z-index: 2;
    height: 100px;
    width: 100px;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    top: 0px;
    right: 0;
    z-index: 100000000000000001;
    display: none;
}

/*
 * У выезжающего мобильного меню (.menu) в theme.css z-index:1000 — а у
 * .rbut (стрелка "поменять местами") там же z-index:10000000, у
 * #del_from/#del_to — 1001. Оба выше меню, поэтому крестики и стрелка
 * просвечивали поверх открытого меню вместо того, чтобы скрыться под
 * ним. Поднимаем сам .menu заведомо выше всех элементов формы, а
 * гамбургер — ещё выше меню (иначе им нельзя будет закрыть открытое
 * меню, если оно окажется поверх самой кнопки-переключателя).
 */
.toggler:checked ~ .menu {
    z-index: 999999998 !important;
}
.hamburger {
    z-index: 999999999 !important;
}

/* кнопки быстрого выбора даты "Сегодня"/"Завтра" справа от поля даты */
.date-quick-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* было center — из-за этого поле даты
    визуально центрировалось внутри более высокого блока (Сегодня+Завтра
    друг над другом), и не совпадало по верху с кнопкой "Расписание" */
  gap: 6px;
  max-width: none;
}
.date-quick-buttons {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 0px;
}
.date-quick-btn {
    font-size: 0.95rem;
    width: 59px;
    padding: 3px 8px; border: 1px solid #ccc;
    border-radius: 4px; background: #fff; cursor: pointer; color: #333;
    white-space: nowrap;
}
.date-quick-btn:hover { background: #f0f4fa; border-color: #1a3c6e; }
.date-quick-btn.active { background: #1a3c6e; color: #fff; border-color: #1a3c6e; }

/* поле даты — своя ширина, не растягивается на всю строку теперь,
   т.к. кнопки Сегодня/Завтра стоят рядом, а не под ним */
.date-quick-wrap input[type="date"] {
    width: auto;
    flex: 0 0 auto;
}

/*
 * ВАЖНО: этот фикс — только для компактной формы в ШАПКЕ (.b-header).
 * У формы на ГЛАВНОЙ странице (search_widget.php) СВОЯ, отдельная
 * структура (.inputmain > .input-group > .inputmainitems2, плюс отдельный
 * второй .input-group.search_c для кнопок типа транспорта) — та форма
 * нормально свёрстана через float/flex самой темы, её не трогаем.
 *
 * История вопроса (для понимания, если снова придётся сюда лезть):
 * сначала пробовали display:table на .input-group с процентными
 * ширинами ячеек — сама раскладка полей заработала, но табличная
 * раскладка не умеет переносить контент на новую строку при нехватке
 * места: когда сумма ширин (города+тип+дата+кнопки+кнопка "Расписание")
 * превышала ширину колонки g-col-5 в шапке, всё просто вылезало за
 * границы поверх соседнего меню, а не переносилось. Заменили на flex
 * с явным переносом строк (flex-wrap: wrap) — при нехватке места
 * элементы аккуратно уходят на вторую строку внутри той же формы,
 * а не наезжают на соседние блоки шапки.
 */
/*
 * ВАЖНО: этот фикс — только для компактной формы в ШАПКЕ (.b-header).
 * У формы на ГЛАВНОЙ странице (search_widget.php) СВОЯ, отдельная
 * структура (.inputmain > .input-group > .inputmainitems2, плюс отдельный
 * второй .input-group.search_c для кнопок типа транспорта) — та форма
 * нормально свёрстана через float/flex самой темы, её не трогаем.
 *
 * История вопроса (для понимания, если снова придётся сюда лезть):
 * сначала пробовали display:table с процентными ширинами ячеек — не
 * умеет переносить контент на новую строку при нехватке места, всё
 * вылезало за границы поверх соседнего меню. Затем — flex с переносом
 * строк в ОДНОМ ряду (города+тип+дата+кнопка вместе) — работало, но было
 * тесно и хрупко на средних ширинах. Финальная версия: два отдельных
 * ряда, как в оригинале (etransp.ru) — .cities-cell (Откуда/Куда друг
 * под другом) сверху, .header-row2 (тип/дата/кнопка) снизу. Так надёжнее
 * и ближе к тому, как это реально выглядело на старом сайте.
 */
.b-header .input-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
  background: transparent;
}
.b-header .input-group > .cities-cell {
    width: 100%;
    max-width: 320px;
}
.header-row2 > #selval {
    flex: 0 1 150px;
    max-width: 150px;
    width: auto !important;
}
.header-row2 > .date-quick-wrap {
    flex: 0 0 auto;
}
.header-row2 > #getrasp {
    flex: 0 0 auto;
}

/*
 * В theme.css есть правило с !important и ID-селекторами:
 *   #fromInput,#toInput,.form-control,.btn-success{width:100%!important;...}
 * — оно перебивало наши размеры. Перебиваем обратно — наш селектор
 * специфичнее (класс-предок + id) и тоже с !important, плюс грузится
 * позже в каскаде.
 */
.b-header #getrasp {
    width: auto !important;
    height: auto !important;
    padding: 8px 16px !important;
    white-space: nowrap;
}

/*
 * Мобильные ширины: крупный шрифт темы (унаследован от десктопных
 * значений и наших же 1.4rem у breadcrumbs/results-toolbar) на узком
 * экране приводил к тому, что поля формы уже не помещались в свою
 * строку и наезжали друг на друга. Плюс попросили: тип транспорта —
 * на отдельную строку (а не втискивать рядом с городами, где ему и так
 * не хватало места), поля Откуда/Куда — друг под другом.
 */
@media (max-width: 600px) {
    .breadcrumbs { font-size: 1.4rem; }
    .results-toolbar span,
    .results-toolbar button,
    .results-toolbar label { font-size: 1rem; }

    /* Откуда/Куда теперь всегда друг под другом (десктоп и мобильный
       одинаково) — специальный override для мобильных больше не нужен,
       кроме как дать блоку городов занять всю ширину колонки */
    .b-header .input-group > .cities-cell {
        max-width: none;
    }

    /* тип транспорта — на новую строку целиком, не сжимается рядом с городами */
    .header-row2 > #selval {
        flex: 1 1 100%;
        max-width: none;
    }
}

/*
 * На ширинах примерно до 900px тесный перенос по отдельным элементам
 * внутри .header-row2 (тип+дата+кнопки+кнопка "Расписание" все в один
 * ряд с flex-wrap) вёл себя нестабильно — поле даты и Сегодня/Завтра
 * могли визуально "уезжать" при недостатке места для точного переноса
 * именно на границе элементов. Вместо тонкой настройки переноса —
 * принудительно в столбец пошире этой границы, так каждый элемент
 * гарантированно получает всю ширину строки и не должен ни с кем делить
 * место по горизонтали.
 */
@media (max-width: 900px) {
    .header-row2 {
        flex-direction: column;
        align-items: stretch;
    }
    .header-row2 > #selval {
        max-width: none;
        width: 100% !important;
    }
    .header-row2 .date-quick-wrap {
        width: 100%;
    }
    /* поле даты растягиваем вместе с обёрткой, иначе оно остаётся узким
       по контенту, а кнопки "Сегодня"/"Завтра" повисают отдельно справа
       с большим пустым промежутком */
    .header-row2 .date-quick-wrap input[type="date"] {
        flex: 1 1 auto;
    }
    /* кнопка "Расписание" тоже на всю ширину — иначе единственная
       остаётся узкой рядом с растянутыми select/датой, смотрится нелепо */
    .b-header #getrasp {
        width: 100% !important;
    }
}

/* --- новый пакет правок --- */

@media (max-width: 607px) {
    .g-row_valign-mid [class*="g-col-"] {
        vertical-align: top;
        margin-top: 0;
    }
}
@media (max-width: 650px) {
    .inputmain .input-group {
        width: 100%;
        text-align: center;
        margin: 50px 0 0px 0px;
    }
}
@media (max-width: 650px) {
    #b1x, #b2x, #b3x, #b4x, #b5x {
        padding: 4px 19px 4px;
    }
}

.btn-warning {
    color: #000;
    background-color: #37c337;
    border-color: #fff;
    border-bottom: none;
    background-image: none;
    filter: none;
    background-color: #f9f8f8;
    color: #000;
    text-shadow: none;
    margin-top: 4px;
}
.btn-warning.active, .btn-warning:active, .open>.dropdown-toggle.btn-warning {
    color: #000;
    border-color: #e9e9e9;
    background: #fff8c6;
}
.btn.active, .btn:active {
    background-image: none;
    outline: 0;
}

.col-md-3 {
    width: 23%;
    border-right: none;
    margin-top: 0;
    padding-left: 19px;
    min-width: 33%;
    min-width: 200px;
}
@media (max-width: 850px) {
    .route .station {
        border-top: none;
        padding-top: 10px;
    }
}
.route a {
    color: #369;
    border-bottom: none;
    margin-left: 0;
    font-size: 1.0em;
}
@media (max-width: 850px) {
    div.col-md-3.col-xs-6.route-from {
        border-left: none !important;
        padding-left: 0px !important;
        border-bottom: dashed 1px #ccc;
        padding-bottom: 10px;
    }
}
@media (max-width: 650px) {
    .route .route-duration {
        padding-bottom: 10px;
        margin-top: 10px;
        background: #ebf9ff;
        text-align: left !important;
        font-size: 1em;
        margin-left: 0px;
        padding-bottom: 2px;
        min-height: 56px;
        background: #ebf9ff;
        padding-bottom: 10px;
        margin-top: 10px;
        background: #f3f6ff;
        padding-top: 7px;
        padding-left: 15px;
        background: #ebfdea;
        border: none !important;
        border-top: none;
        border-bottom: none;
    }
}
.route-info-transfer {
    padding: 15px 3px 10px 5px;
    border-left: none;
    border-right: none;
    border-radius: 0;
    background-color: #fff;
    min-height: 90px;
    background: #ffe8e8 !important;
    margin-bottom: 10px;
    border-radius: 8px;
    max-width: 680px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 15px;
}
@media (max-width: 850px) {
    .route-info-transfer {
        padding: 15px 3px 10px 5px;
        border-left: none;
        border-right: none;
        border-radius: 0;
        background-color: #fff;
        min-height: 90px;
        background: #ffe8e8 !important;
        margin-bottom: 0px;
        border-radius: 8px;
        max-width: 680px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 30px;
    }
}