/* Переключатель вида спорта в шапке (27.08.2026, владелец: «панель не настолько длинная,
   я бы сделал футбол/хоккей слева вначале»).

   Шапка читается тремя зонами: СПОРТ слева — РАЗДЕЛЫ по центру — УТИЛИТЫ справа.
   Язык, избранное, настройки и вход от вида спорта не зависят и не переезжают, поэтому
   переключатель встроен в ту же строку, а не вынесен отдельным ярусом над шапкой.

   Два контейнера шапки, пока они не сведены в один компонент:
     .sg-topnav-live — футбольный грид (live.aspx, инлайновые стили страницы),
     .sg-topnav      — хоккейные страницы (HockeyUi.Nav).
   Внутри блок одинаковый, отличается только позиционирование. */

.sportbar-inline { display: flex; align-items: center; gap: 4px; }

.sportbar-inline .sport-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: #6b7686;
    font: 600 12.5px/1.15 Inter, Arial, sans-serif;
    white-space: nowrap;
    transition: color .12s ease, background .12s ease;
}
.sportbar-inline .sport-item i { font-size: 16px; line-height: 1; }
.sportbar-inline .sport-item:not(.is-active):hover { background: #e9edf3; color: #1f2937; }
.sportbar-inline .sport-item:focus-visible { outline: 2px solid #1565C0; outline-offset: 1px; }

/* Активный держится заливкой, а не подчёркиванием: в строке шапки нет вертикали
   под нижнюю линию, она бы конфликтовала с высотой строки. */
.sportbar-inline .sport-item.is-active { background: #1565C0; color: #fff; }

/* Счётчик живых матчей: цифра и точка того же тона, что минута лайва в гриде. */
.sportbar-inline .sport-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 700 11px/1 Inter, Arial, sans-serif;
    color: #e53935;
    font-variant-numeric: tabular-nums;
}
.sportbar-inline .sport-live::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #e53935;
    box-shadow: 0 0 0 0 rgba(229, 57, 53, .55);
    animation: sbPulse 1.9s ease-out infinite;
}
.sportbar-inline .sport-item.is-active .sport-live { color: #fff; }
.sportbar-inline .sport-item.is-active .sport-live::before { background: #fff; box-shadow: none; animation: none; }
@keyframes sbPulse {
    0%   { box-shadow: 0 0 0 0 rgba(229, 57, 53, .5); }
    70%  { box-shadow: 0 0 0 5px rgba(229, 57, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
}
@media (prefers-reduced-motion: reduce) { .sportbar-inline .sport-live::before { animation: none; } }

/* ---- футбольный грид: зеркально кластеру утилит (right:calc(50% - 760px) в live.aspx) ---- */
@media (min-width: 769px) {
    .sg-topnav-live .sportbar-inline {
        position: absolute;
        left: calc(50% - 760px);
        top: 50%;
        transform: translateY(-50%);
        z-index: 1000;
    }
}
@media (min-width: 769px) and (max-width: 1560px) {
    .sg-topnav-live .sportbar-inline { left: 16px; }
}

/* ---- хоккейные страницы: sg-topnav раскладывает ряды флексом, спорт идёт первым ---- */
@media (min-width: 769px) {
    .sg-topnav .sportbar-inline { margin-right: 10px; padding-right: 12px; border-right: 1px solid #dfe4ea; }
}

/* ---- мобильный: спорт занимает свою строку над разделами ----
   В строку с языком, настройками и входом он не помещается, а ужимать его нельзя:
   это главный переключатель. */
@media (max-width: 768px) {
    /* В хоккейной шапке блок лежит внутри .sg-nav-left — без переноса он вставал в одну
       строку с языком и входом, и строка уезжала в горизонтальный скролл. */
    .sg-topnav .sg-nav-left { flex-wrap: wrap; }
    .sg-topnav-live .sportbar-inline,
    .sg-topnav .sportbar-inline {
        position: static;
        transform: none;
        order: -1;
        flex: 1 1 100%;
        justify-content: center;
        gap: 6px;
        padding: 4px 6px;
        margin: 0;
        border-right: 0;
        border-bottom: 1px solid #e6eaf0;
    }
    .sportbar-inline .sport-item { flex: 0 1 auto; padding: 6px 12px; font-size: 12.5px; }
}

body.dark-theme .sportbar-inline .sport-item { color: #8a94a3; }
body.dark-theme .sportbar-inline .sport-item:not(.is-active):hover { background: #1c242c; color: #e8eef5; }
body.dark-theme .sg-topnav .sportbar-inline { border-right-color: #2a3038; }
body.dark-theme .sportbar-inline { border-bottom-color: #2a3038; }