/* bts-badges.css — вид бейджей тура, единый для всего сайта.
 *
 * Разметку ставит bts-badges.js поверх картинки карточки.
 * Флажок: горизонтальная лента слева, треугольный срез справа —
 * цвет среза = фону самого бейджа (см. правила ::after ниже).
 * Несколько бейджей — стопкой друг под другом.
 * Цвета: хит — фирменный зелёный, новинка — фирменный синий,
 * 18+ — красный, сопровождение — бледно-зелёный с тёмным текстом
 * (по белому на светлом читать невозможно).
 */

.bts-badges {
    position: absolute;
    top: 14px;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    pointer-events: none;
}

.bts-badge {
    position: relative;
    display: inline-block;
    padding: 4px 18px 4px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: #fff;
}

.bts-badge::after {
    content: '';
    position: absolute;
    right: -9px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-right: 9px solid transparent;
}

/* ЕДИНАЯ ПАЛИТРА БЕЙДЖЕЙ — одинаковая на всех страницах.
   Продублирована в bts-afisha.css (карточки афиши) и в COLORS
   в bts-badges.js (ленты карусели). Меняешь тут — поменяй и там,
   иначе один и тот же бейдж будет разного цвета в разных местах. */
.bts-badge-hit     { background: #61AD10; }
.bts-badge-hit::after     { border-top-color: #61AD10; }
.bts-badge-new     { background: #61AD10; }
.bts-badge-new::after     { border-top-color: #61AD10; }
.bts-badge-18plus  { background: #C0392B; }
.bts-badge-18plus::after  { border-top-color: #C0392B; }
.bts-badge-gastro  { background: #C9782B; }
.bts-badge-gastro::after  { border-top-color: #C9782B; }
.bts-badge-custom  { background: #7C5CBF; }
.bts-badge-custom::after  { border-top-color: #7C5CBF; }
/* Оба «сопровождения» — одним серым: это про одно и то же свойство
   тура, разными цветами читались как разные по смыслу метки. Раньше
   были прозрачными с серой рамкой — поверх фото почти не видны. */
.bts-badge-escort,
.bts-badge-noguide,
.bts-badge-walking { background: #6C757D; color: #fff; }
.bts-badge-escort::after,
.bts-badge-noguide::after,
.bts-badge-walking::after { border-top-color: #6C757D; }

/* ── Вид закладки, как лента в карусели ───────────────────────────
   Сетка «Афиша экскурсий» на главной и страницы категорий. Форма та
   же (прямоугольник, заходящий за левый край, под ним загнутый
   уголок), размер прежний — мелкий. Класс ставит bts-badges.js там,
   где вешает бейджи на саму карточку, а не внутрь превью: внутри
   overflow:hidden срезал бы выступ.
   Вместо флажкового выреза справа (::after у обычных бейджей) — тень
   сгиба слева снизу (::before), как у ленты темы. */
.bts-badges-ribbon {
    top: 20px;
    left: -6px;
    /* просвет больше загиба (он на 6px ниже ленты), иначе следующая
       лента наезжает на хвостик предыдущей */
    gap: 10px;
}
.bts-badges-ribbon .bts-badge {
    border-radius: 0;
    padding: 4px 10px;
}
.bts-badges-ribbon .bts-badge::after { display: none; }
.bts-badges-ribbon .bts-badge::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 6px 0;
    border-color: transparent;
}
/* Цвет сгиба — затемнённый оттенок самого бейджа, как тень у ленты.
   «Новинка» с 11.09.2026 зелёная, как «Хит», — сгиб тот же тёмно-зелёный.
   Раньше тут стоял тёмно-синий от прежней синей «Новинки»: на фото он
   не читался, и закладка выглядела без сгиба, а рядом у «Без
   сопровождения» сгиб был виден (Юля, 12.09.2026: «в поиске поправь
   бейджи»). */
.bts-badges-ribbon .bts-badge-hit::before    { border-right-color: #4A8500; }
.bts-badges-ribbon .bts-badge-new::before    { border-right-color: #4A8500; }
.bts-badges-ribbon .bts-badge-18plus::before { border-right-color: #A8332C; }
.bts-badges-ribbon .bts-badge-escort::before { border-right-color: #A9C98A; }
.bts-badges-ribbon .bts-badge-gastro::before { border-right-color: #9E5C1F; }
.bts-badges-ribbon .bts-badge-custom::before { border-right-color: #5F45A0; }
/* «С сопровождением» / «Без сопровождения» в общем стиле — прозрачные
   с серой рамкой (так они задуманы на афише, на белом фоне читаются).
   Поверх фото рядом со сплошным бейджем такой выглядел «по-старому»,
   поэтому здесь, как и в карусели, даём им сплошную заливку теми же
   цветами. `!important` у цвета текста — в bts-afisha.css он задан с
   !important, иначе не перебить. */
.bts-badges-ribbon .bts-badge-escort,
.bts-badges-ribbon .bts-badge-noguide,
.bts-badges-ribbon .bts-badge-walking {
    border: 0 !important;
    color: #fff !important;
    padding: 4px 10px;
}
.bts-badges-ribbon .bts-badge-escort,
.bts-badges-ribbon .bts-badge-noguide,
.bts-badges-ribbon .bts-badge-walking { background: #6C757D !important; }
.bts-badges-ribbon .bts-badge-escort::before,
.bts-badges-ribbon .bts-badge-noguide::before,
.bts-badges-ribbon .bts-badge-walking::before { border-right-color: #4E565C; }

/* Крупный размер — один в один с лентой карусели: шрифт 14px/600,
   отступы 10/14/10/20 (слева больше на величину выступа), выступ и
   уголок по 10px. Применяется во всех плитках тура. */
.bts-badges-ribbon-lg {
    top: 30px;
    left: -10px;
    /* просвет между лентами должен быть больше загиба (он висит на 10px
       ниже ленты), иначе следующая лента наезжает на хвостик предыдущей
       — Юля: «один находит на хвостик другой» */
    gap: 14px;
}
.bts-badges-ribbon-lg .bts-badge {
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    padding: 10px 14px 10px 20px;
}
.bts-badges-ribbon-lg .bts-badge-escort,
.bts-badges-ribbon-lg .bts-badge-noguide,
.bts-badges-ribbon-lg .bts-badge-walking { padding: 10px 14px 10px 20px; }
.bts-badges-ribbon-lg .bts-badge::before {
    bottom: -10px;
    border-width: 0 10px 10px 0;
}

/* Поиск экскурсий: колонке результатов тема ставит overflow:hidden —
   это распорка, чтобы колонка не заезжала под плавающий блок фильтров
   слева. Но у карточек первого столбца левый край совпадает с краем
   колонки, и выступ закладки (10px за карточкой) вместе с загибом
   срезался: слева бейдж «внутри фото», справа — как на главной (Юля,
   20.09.2026, два скрина). flow-root даёт ту же распорку без обрезки. */
body.tourmaster-template-search .tourmaster-tour-search-content-wrap {
    overflow: visible !important;
    display: flow-root;
}

/* На узких экранах карточка сужается, бейджи мельчают вместе с ней. */
@media (max-width: 480px) {
    .bts-badge {
        font-size: 10px;
        padding: 3px 15px 3px 8px;
    }
    .bts-badges {
        gap: 3px;
        top: 10px;
    }
    /* у лент есть загиб снизу — просвет всё равно должен быть больше него */
    .bts-badges-ribbon { gap: 9px; }
    .bts-badges-ribbon-lg { gap: 13px; }
}