/* Список круизов (/cruises/ и др., core/page/page.front.trip.php): теплоходы и города — чипами, как в кабинете
   и новостях: белый чип с синим текстом, выбранный залит синим. Разметку не менять: по классам selectBoat, filterCity
   и data-boat работает фильтр в js/main.js, выбранный чип он отмечает классом activechar (стили сайта рисуют его
   жёлтой «кнопкой» — здесь перекрыто). */

#content .cr-boats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 8px 0 18px;
}
#content a.selectBoat,
#content a.filterCity {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 36px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid #dde5ef !important;
    border-radius: 999px;
    background: #fff;
    filter: none;
    box-shadow: none;
    color: #014090;
    font: 600 13px/1 "Segoe UI", Roboto, Arial, sans-serif;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#content a.filterCity {
    height: 30px;
    margin: 8px 6px 2px 0;
    padding: 0 14px;
    font-size: 12.5px;
}
#content a.selectBoat span,
#content a.filterCity span { display: inline; padding: 0; font: inherit; color: inherit; }
#content a.selectBoat:hover,
#content a.filterCity:hover { background: #eef5fd; border-color: #b9cfe9 !important; color: #014090; }
#content a.selectBoat.activechar,
#content a.filterCity.activechar {
    background: #014090;
    border-color: #014090 !important;
    color: #fff;
    box-shadow: 0 4px 10px -6px rgba(1, 64, 144, .8);
}
#content a.selectBoat:focus-visible,
#content a.filterCity:focus-visible { outline: 2px solid #0a6ebd; outline-offset: 2px; }