@media (min-width: 992px) {

    .navbar .navbar-nav .dropdown-menu {
        min-width: 240px;
        padding: 8px 0;
        margin-top: 10px;
        border: 0;
        border-top: 3px solid #ff5400;
        border-radius: 0;
        background-color: #fff;
        box-shadow: 0 6px 16px 0 rgba(0, 0, 0, .10);
    }

    .navbar .navbar-nav .dropdown-item {
        padding: 9px 20px;
        border-radius: 0;
        font-family: clear_sans, sans-serif;
        font-size: 15px;
        line-height: 1.3;
        color: #191919;
        transition: color .1s, background-color .1s;
    }

    .navbar .navbar-nav .dropdown-item:hover,
    .navbar .navbar-nav .dropdown-item:focus,
    .navbar .navbar-nav .dropdown-item:active {
        color: #ff5400;
        background-color: #f7f7f7;
    }

    .navbar .navbar-nav .dropdown-item.active {
        color: #ff5400;
        background-color: transparent;
        font-weight: 700;
    }

    .navbar .navbar-nav .dropdown-item .counter {
        color: #9f9f9f;
        font-size: 13px;
        margin-left: 2px;
    }

    /* шеврон вниз у пунктов с выпадашкой — тема его отключала */
    .navbar .navbar-nav > .nav-item.dropdown > .nav-link::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 6px;
        height: 6px;
        margin-left: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        /* сдвиг только через transform: margin-top менял высоту строки
           и вся страница дёргалась при открытии */
        -webkit-transform: translateY(-1px) rotate(45deg);
        transform: translateY(-1px) rotate(45deg);
        -webkit-transition: -webkit-transform .15s, opacity .15s;
        transition: transform .15s, opacity .15s;
        opacity: .4;
    }

    .navbar .navbar-nav > .nav-item.dropdown > .nav-link:hover::after {
        opacity: 1;
    }

    .navbar .navbar-nav > .nav-item.dropdown.show > .nav-link::after,
    .navbar .navbar-nav > .nav-item.dropdown.is-open > .nav-link::after {
        opacity: 1;
        -webkit-transform: translateY(2px) rotate(-135deg);
        transform: translateY(2px) rotate(-135deg);
    }

    /* кнопка «Назад» нужна только в мобильном меню */
    .navbar .navbar-nav .menu-back {
        display: none;
    }

    .menu-main .menu-bonus {
        min-width: 470px;
    }

    .menu-main .menu-bonus .has-sub {
        position: relative;
    }

    .menu-main .menu-bonus .sub-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .menu-main .menu-bonus .has-sub--bk > .sub-toggle::after {
        content: "";
        display: inline-block;
        flex: 0 0 auto;
        width: 6px;
        height: 6px;
        margin-left: 12px;
        border-right: 2px solid currentColor;
        border-top: 2px solid currentColor;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        opacity: .4;
    }

    .menu-main .menu-bonus .has-sub--bk:hover > .sub-toggle::after {
        opacity: 1;
    }

    /* флайаут со списком букмекеров */
    .menu-main .menu-bonus .sub-menu-bk {
        display: none;
        position: absolute;
        top: -8px;
        left: 100%;
        min-width: 380px;
        margin: 0;
        border-top: 0;
        border-left: 1px solid #f1f1f1;
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 0;
        -moz-column-gap: 0;
        column-gap: 0;
    }

    .menu-main .menu-bonus .has-sub--bk:hover > .sub-menu-bk,
    .menu-main .menu-bonus .has-sub--bk:focus-within > .sub-menu-bk {
        display: block;
    }

    .menu-main .menu-bonus .sub-menu-bk .nav-item {
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
    }

    /* «Типы бонусов» — подпись секции в стиле заголовков сайта */
    .menu-main .menu-bonus .has-sub--types > .sub-toggle {
        pointer-events: none;
        margin-top: 8px;
        padding-top: 14px;
        padding-bottom: 6px;
        border-top: 1px solid #f1f1f1;
        font-family: intro, sans-serif;
        font-size: 12px;
        line-height: 1.2;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #9f9f9f;
    }

    .menu-main .menu-bonus .sub-menu-types {
        display: block;
        position: static;
        float: none;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        /* тринадцать типов в одну колонку давали ~590px высоты —
           на экранах 768px по вертикали окно упиралось в низ */
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 0;
        -moz-column-gap: 0;
        column-gap: 0;
    }

    .menu-main .menu-bonus .sub-menu-types .nav-item {
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
    }
}

/* ------------------------------------------------------------
   2. Мобильная версия
   Подсписок не раздвигает меню и не растягивается на весь экран:
   он встаёт на место списка, остальные пункты скрываются.
   Шапка сжимается до высоты панели, страница под ней остаётся видна.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

    /* шеврон вправо: подсписок уводит на новый уровень */
    .navbar .navbar-nav > .nav-item.dropdown > .nav-link,
    .navbar .navbar-nav .menu-bonus .sub-toggle {
        position: relative;
    }

    .navbar .navbar-nav > .nav-item.dropdown > .nav-link::after,
    .navbar .navbar-nav .menu-bonus .has-sub > .sub-toggle::after {
        content: "";
        display: block;
        position: absolute;
        right: 12px;
        top: 50%;
        width: 6px;
        height: 6px;
        margin-top: -4px;
        border-right: 2px solid currentColor;
        border-top: 2px solid currentColor;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        opacity: .4;
    }

    /* панель в обычном потоке, во всю ширину */
    .navbar .navbar-nav .dropdown-menu,
    .navbar .navbar-nav .menu-bonus .sub-menu {
        position: static;
        float: none;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: none;
        list-style: none;
    }

    /* третий уровень: строка возврата + 6 пунктов, дальше прокрутка.
       6 x 42px + шапка 46px = 300px. overflow-x обязателен, иначе
       браузер сам включит вторую ось и нарисует лишнюю полосу. */
    .navbar .navbar-nav .menu-bonus .sub-menu {
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .navbar .navbar-nav .menu-bonus .sub-menu::-webkit-scrollbar {
        width: 3px;
    }

    .navbar .navbar-nav .menu-bonus .sub-menu::-webkit-scrollbar-thumb {
        background: rgba(25, 25, 25, .22);
        border-radius: 2px;
    }

    /* Открытый подсписок убирает с экрана то, что было на его месте.
       Опираемся только на is-open — его ставит наш скрипт.
       Класс .show принадлежит Bootstrap, он его снимает когда захочет. */
    .navbar .navbar-nav.has-panel > .nav-item:not(.is-open),
    .navbar .navbar-nav .has-panel > .nav-item:not(.is-open) {
        display: none;
    }

    .navbar .navbar-nav.has-panel > .nav-item.is-open > .nav-link,
    .navbar .navbar-nav .has-panel > .nav-item.is-open > .sub-toggle {
        display: none;
    }

    /* пункты во всю ширину, по центру — как в основном меню */
    .navbar .navbar-nav .dropdown-item {
        padding: 11px 26px;
        border-radius: 0;
        font-size: 15px;
        line-height: 1.35;
        color: #000;
        text-align: center;
        white-space: normal;
        transition: background-color .1s, color .1s;
    }

    .navbar .navbar-nav .dropdown-item:not(.menu-back-btn):hover,
    .navbar .navbar-nav .dropdown-item:not(.menu-back-btn):focus,
    .navbar .navbar-nav .dropdown-item:not(.menu-back-btn):active,
    .navbar .navbar-nav .dropdown-item.active {
        color: #fff;
        background-color: #424242;
    }

    .navbar .navbar-nav .dropdown-item .counter {
        color: inherit;
        opacity: .6;
    }

    /* строка возврата: остаётся на месте при прокрутке списка */
    .navbar .navbar-nav .menu-back {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: #fafafa;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
    }

    .navbar .navbar-nav .menu-back-btn {
        display: block;
        position: relative;
        padding: 13px 40px;
        color: #6b6b6b;
        font-family: intro, sans-serif;
        font-size: 13px;
        letter-spacing: .02em;
        text-align: center;
        cursor: pointer;
    }

    .navbar .navbar-nav .menu-back-btn:hover {
        color: #000;
        background-color: #f1f1f1;
    }

    .navbar .navbar-nav .menu-back-btn::before {
        content: "";
        display: block;
        position: absolute;
        left: 14px;
        top: 50%;
        width: 7px;
        height: 7px;
        margin-top: -4px;
        border-left: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}

/* ------------------------------------------------------------
   3. Появление выпадашки на десктопе
   Через animation, а не transition: display:none анимировать нельзя.
   .35s ease у основного окна — та же длительность, с которой
   Bootstrap раскрывает меню (.collapsing). Флайаут букмекеров
   короче, .2s: он открывается по наведению и должен быть мгновенным.
   Окно позиционировано абсолютно, поэтому раскладка не смещается.
   ------------------------------------------------------------ */

@-webkit-keyframes wv-dd-drop {
    from { opacity: 0; -webkit-transform: translateY(-6px); transform: translateY(-6px); }
    to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}

@keyframes wv-dd-drop {
    from { opacity: 0; -webkit-transform: translateY(-6px); transform: translateY(-6px); }
    to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}

@media (min-width: 992px) {

    .navbar .navbar-nav .dropdown-menu.show {
        -webkit-animation: wv-dd-drop .35s ease;
        animation: wv-dd-drop .35s ease;
    }

    .menu-main .menu-bonus .has-sub--bk:hover > .sub-menu-bk,
    .menu-main .menu-bonus .has-sub--bk:focus-within > .sub-menu-bk {
        -webkit-animation: wv-dd-drop .2s ease;
        animation: wv-dd-drop .2s ease;
    }
}

/* уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {

    .navbar .navbar-nav .dropdown-menu.show,
    .menu-main .menu-bonus .has-sub--bk:hover > .sub-menu-bk,
    .menu-main .menu-bonus .has-sub--bk:focus-within > .sub-menu-bk {
        -webkit-animation: none;
        animation: none;
    }
}