/* =========================================================================
   match2.css — современная страница матча (шаблон match.php, основная страница /prognozy/...)
   Подключается по флагу btMatchNewPage, чтобы не влиять на legacy-страницу match_old.php.
   Все правила ограничены областью #match.
   ========================================================================= */

#match {
    --m2-card: #ffffff;
    --m2-ink: #1c2b42;
    --m2-ink-soft: #5d6b81;
    --m2-muted: #8a94a3;
    --m2-line: #e6eaf0;
    --m2-line-soft: #f0f3f8;
    --m2-brand: #cc1d14;
    --m2-accent: #ffda33;
    --m2-green: #2f9a4d;
    --m2-blue: #2a5a9f;
    --m2-radius: 14px;
    --m2-radius-sm: 10px;
    --m2-shadow: 0 6px 24px rgba(19, 31, 53, .07);
    --m2-shadow-sm: 0 3px 12px rgba(19, 31, 53, .06);
    color: var(--m2-ink);
}

/* ---------- Базовая раскладка страницы ---------- */
#match.grid-container {
    max-width: 1180px;
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
}

#match .main,
#match .grid-container.main {
    max-width: 100%;
}

#match .grid-container.main,
#match .grid-container[class*="main_text"] {
    background: var(--m2-card);
    border: 1px solid var(--m2-line);
    border-radius: var(--m2-radius);
    box-shadow: var(--m2-shadow-sm);
    padding: 20px 22px;
}

/* Отступ только у самостоятельных карточек — не у каждой вложенной Foundation-сетки. */
#match .grid-container.main {
    margin: 14px auto !important;
}

/* ---------- Типографика ---------- */
#match h1 {
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.18;
    font-weight: 800;
    color: var(--m2-ink);
    margin: 4px 0 6px;
}

#match .m2-mobile-h1 {
    max-width: 900px;
    margin: 14px auto 10px;
    padding: 0 8px;
    text-align: center;
}

#match h2 {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--m2-ink);
    margin: 6px 0 10px;
}

#match h3 {
    font-size: 19px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--m2-ink);
    margin: 0 0 10px;
    position: relative;
    padding-left: 14px;
}

#match h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--m2-brand), var(--m2-accent));
}

#match p { color: #33415a; line-height: 1.65; }

#match a { color: var(--m2-blue); }

/* ---------- Хлебные крошки и верхние отступы ---------- */
/* Приводим левый отступ верхних элементов к единому краю контейнера. */
#match .breadcrumb {
    margin: 10px 0 12px !important;
    padding-left: 0 !important;
}

#match .no-mobile .date_select {
    margin: 8px 0 !important;
}

#match .h1_prog {
    margin-left: 0 !important;
}

/* ---------- Форма команды: кружки строго в один ряд ---------- */
#match .m2-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 3px;
    margin-top: 4px;
    line-height: 1;
}

#match .m2-form .circl {
    flex: 0 0 auto;
    margin: 0;
}

/* ---------- Sticky-навигация по разделам ---------- */
.m2-nav {
    position: sticky;
    top: 64px;
    z-index: 60;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 8px 0 4px;
    padding: 0 4px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border: 1px solid var(--m2-line);
    border-radius: 999px;
    box-shadow: var(--m2-shadow-sm);
}

.m2-nav__inner {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 6px;
    align-items: center;
    overflow-x: auto;
    padding: 8px 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    /* Keep vertical page scrolling available when a swipe starts on the nav. */
    touch-action: auto;
}

.m2-nav__item,
.m2-nav__item img {
    -webkit-user-drag: none;
    user-drag: none;
}

.m2-nav__inner.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

/* Стрелки слайдера (только когда лента реально переполнена) */
.m2-nav__arrow {
    flex: 0 0 auto;
    display: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #eef2f8;
    color: #33415a;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.m2-nav.has-overflow .m2-nav__arrow { display: grid; }
.m2-nav__arrow:hover { background: #e2e9f3; }
.m2-nav__arrow:disabled { opacity: .35; cursor: default; }
.m2-nav__arrow:focus-visible { outline: 3px solid rgba(42, 90, 159, .35); outline-offset: 2px; }

.m2-nav__inner::-webkit-scrollbar { display: none; }

.m2-nav__item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #33415a !important;
    background: var(--m2-line-soft);
    text-decoration: none !important;
    white-space: nowrap;
    scroll-snap-align: center;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}

.m2-nav__item:hover {
    background: #e9eef6;
    color: var(--m2-ink) !important;
}

.m2-nav__item.is-active {
    background: var(--m2-brand);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(204, 29, 20, .28);
}

.m2-nav__item:focus-visible {
    outline: 3px solid rgba(42, 90, 159, .35);
    outline-offset: 2px;
}

.m2-nav__item .expert-status {
    position: static !important;
    margin: 0 0 0 2px !important;
}

/* ---------- Шапка матча (hero) ---------- */
#match .h1_prog {
    font-size: 15px;
    font-weight: 700;
    color: var(--m2-ink-soft);
    margin: 6px 0 2px 0 !important;
}

#match .h1_prog a { color: var(--m2-ink-soft) !important; }

#match .prognoz_vs { opacity: .85; }

#match .gerb {
    filter: drop-shadow(0 4px 10px rgba(19, 31, 53, .12));
}

/* Командная карточка: команды, время, счёт */
#match .m2-first-screen > .m2-match-hero {
    background: #fff !important;
    border: 1px solid var(--m2-line) !important;
    border-radius: var(--m2-radius-sm);
    padding: 20px 18px !important;
    margin: 0 !important;
}

#match .m2-first-screen > .m2-match-hero .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, .72fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 0;
}

#match .m2-first-screen > .m2-match-hero .row > [class*="col-4"] {
    width: auto;
    max-width: none;
    min-width: 0;
    padding-left: 8px !important;
    padding-right: 8px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--m2-ink);
    font-size: clamp(15px, 1.5vw, 20px) !important;
    font-weight: 750;
    line-height: 1.25 !important;
    text-align: center;
}

#match .m2-first-screen .gerb {
    width: 76px;
    height: 76px;
    object-fit: contain;
    margin: 4px auto !important;
}

#match .m2-first-screen .row > [class*="col-4"] span {
    color: var(--m2-ink-soft);
    font-size: 12px !important;
    font-weight: 500;
}

#match .m2-first-screen .prognoz_vs { display: none; }

#match .m2-first-screen .row > .col-4:nth-child(2) {
    background: var(--m2-line-soft);
    border: 1px solid var(--m2-line);
    border-radius: 12px;
    padding: 14px 10px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

#match .m2-first-screen .row > .col-4:nth-child(2) div:first-of-type span {
    display: inline-block;
    margin-top: 3px;
    color: var(--m2-ink);
    font-size: 20px !important;
    font-variant-numeric: tabular-nums;
}

#match .m2-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    max-width: 100%;
    margin: 8px auto 0;
    padding: 6px 10px;
    border: 1px solid #f0df9a;
    border-radius: 999px;
    background: #fff9e5;
    color: #6b5611;
    font-size: 12px;
    line-height: 1.25;
}

#match .m2-countdown__label {
    font-weight: 600;
}

#match .m2-countdown__value {
    color: #43370f;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#match .m2-countdown.is-due {
    border-color: var(--m2-line);
    background: #f6f8fc;
    color: var(--m2-ink-soft);
}

#match .m2-countdown.is-due .m2-countdown__value {
    color: var(--m2-ink-soft);
    white-space: normal;
}

#match .m2-match-hero__row {
    margin-bottom: 0 !important;
}

#match .m2-first-screen .m2-match-score {
    grid-column: 1 / -1;
    margin: 14px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid var(--m2-line);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ---------- Единый первый экран: шапка матча + решение ---------- */
#match .m2-first-screen {
    background: #f8f9fc;
    border: 1px solid var(--m2-line);
    border-radius: var(--m2-radius);
    box-shadow: var(--m2-shadow);
    padding: 16px;
    margin-top: 14px;
}

/* Внутри первого экрана секции плоские — без двойных рамок и лишних отступов */
#match .m2-first-screen .grid-container:not(.m2-match-hero) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

#match .m2-first-screen .expert-bet-ticket {
    margin: 12px 0 !important;
    border-left-width: 4px !important;
    border-color: var(--m2-accent) !important;
    border-radius: 12px !important;
}

#match .m2-first-screen #expert-standalone-ticket {
    margin: 8px 0 !important;
}

#match .m2-first-screen .expert-row {
    flex-wrap: wrap;
}

#match .m2-first-screen .bt-ai-summary-card {
    border-color: var(--m2-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

#match .ai-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    box-sizing: border-box;
    margin: 18px 0 8px !important;
    padding: 12px 16px;
    border-left: 4px solid var(--m2-brand);
    border-radius: 0 10px 10px 0;
    background: #f5f7fb;
    color: var(--m2-ink);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .035em;
}

#match .ai-section-title .ai-section-icon { font-size: 18px; }

/* Длинная карусель мнений ИИ идёт сразу под первым экраном */
#match #ai-model-opinions {
    margin-top: 18px;
}

/* Резервируем высоту под карусель до инициализации Owl — снижает CLS */
#match .my-owl-container { min-height: 300px; }
#match .my-owl-carousel:not(.owl-loaded) .my-owl-item { display: none; }
#match .my-owl-carousel:not(.owl-loaded) .my-owl-item:first-child { display: block; }

/* ---------- Кнопки ---------- */
#match .buttons {
    border-radius: 10px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: .2px;
    box-shadow: var(--m2-shadow-sm);
    transition: transform .1s ease, box-shadow .15s ease, filter .15s ease;
}

#match .buttons:hover { transform: translateY(-1px); }

#match .buttons.red { background: var(--m2-brand); box-shadow: 0 6px 16px rgba(204, 29, 20, .28); }
#match .buttons.green { background: var(--m2-green); box-shadow: 0 6px 16px rgba(47, 154, 77, .25); }
#match .buttons.gray { background: #5d6b81; }

/* ---------- Таблицы ---------- */
#match .main_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

#match .main_table thead th {
    background: #f6f8fc;
    color: var(--m2-ink);
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--m2-line);
    padding: 10px 8px;
    white-space: nowrap;
}

#match .main_table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--m2-line-soft);
    vertical-align: middle;
}

#match .main_table tbody tr:hover td { background: #fbfcfe; }

#match .table-scroll {
    border-radius: var(--m2-radius-sm);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* ---------- Длинный текст прогноза: читаемое превью + раскрытие ---------- */
#match .m2-analysis {
    width: 100%;
    max-width: none;
    margin: 0;
}

#match .m2-analysis__content {
    position: relative;
    overflow: hidden;
    transition: max-height .28s ease;
}

#match .m2-analysis__content.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
}

#match .m2-analysis__content h2,
#match .m2-analysis__content h3 {
    margin-top: 20px;
}

#match .m2-analysis__content h2.m2-analysis__main-heading,
#match .m2-analysis__content h3.m2-analysis__main-heading {
    display: flow-root;
    margin: 0 0 14px;
    padding: 13px 15px;
    border-left: 4px solid var(--m2-brand);
    border-radius: 0 10px 10px 0;
    background: #f5f8fd;
    color: var(--m2-ink);
    font-size: clamp(18px, 2.2vw, 23px);
    line-height: 1.35;
}

/* Кэф и логотип БК рядом с главным заголовком прогноза */
#match .m2-analysis__main-heading .kf_mob {
    float: right;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100%;
    margin: 2px 0 8px 12px !important;
    padding: 6px 9px !important;
    border: 1px solid var(--m2-line) !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: var(--m2-shadow-sm);
    vertical-align: middle;
}

#match .m2-analysis__main-heading .kf_mob > span {
    flex: 0 0 auto;
    margin: 0 !important;
    color: var(--m2-brand);
    font-size: 15px;
    font-weight: 850;
    line-height: 1;
}

#match .m2-analysis__main-heading .kf_mob a {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

#match .m2-analysis__main-heading .kf_mob img {
    display: block;
    width: 88px !important;
    height: 26px !important;
    max-width: 88px !important;
    max-height: 26px;
    object-fit: contain;
}

#match .m2-analysis__section {
    margin: 12px 0;
    border: 1px solid var(--m2-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

#match .m2-analysis__section > summary {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px;
    color: var(--m2-ink);
    font-size: 15px;
    font-weight: 750;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

#match .m2-analysis__section > summary::-webkit-details-marker { display: none; }

#match .m2-analysis__section > summary::after {
    content: "+";
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f1f4f8;
    color: var(--m2-ink-soft);
    font-size: 18px;
    line-height: 1;
}

#match .m2-analysis__section[open] > summary {
    border-bottom: 1px solid var(--m2-line);
    background: #f8f9fc;
}

#match .m2-analysis__section[open] > summary::after { content: "−"; }

#match .m2-analysis__section > summary:focus-visible {
    outline: 3px solid rgba(42, 90, 159, .3);
    outline-offset: -3px;
}

#match .m2-analysis__section-body {
    padding: 14px 16px;
}

#match .m2-analysis__section-body > :first-child { margin-top: 0; }

#match .m2-analysis__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 42px;
    margin: 12px auto 4px;
    padding: 9px 18px;
    border: 1px solid #d7e1f0;
    border-radius: 999px;
    background: #f5f8fd;
    color: var(--m2-blue);
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
}

#match .m2-analysis__toggle:hover { background: #eaf1fb; }
#match .m2-analysis__toggle:focus-visible { outline: 3px solid rgba(42, 90, 159, .3); outline-offset: 2px; }
#match .m2-analysis__toggle[hidden] { display: none !important; }

/* ---------- Матч на ТВ: список каналов-карточек ---------- */
#match .m2-tv-card {
    max-width: 100%;
}

/* ---------- Прямая трансляция ---------- */
#match #LiveStream {
    box-sizing: border-box;
    margin: 16px auto !important;
    padding: 18px 20px !important;
    border: 1px solid var(--m2-line);
    border-radius: var(--m2-radius);
    background: linear-gradient(145deg, #fff, #f8faff);
    box-shadow: var(--m2-shadow-sm);
}

#match #LiveStream > .grid-x,
#match #LiveStream > .grid-x > .main {
    margin: 0;
    padding: 0 !important;
}

#match #LiveStream h3 { margin-bottom: 8px; }

#match #LiveStream #bkwatch > div {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100% !important;
    margin: 14px 0 0 !important;
}

#match #LiveStream #bkwatch > .grid-x { grid-template-columns: repeat(2, minmax(0, 1fr)); }

#match #LiveStream #bkwatch > div > [class*="col-"] {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}

#match #LiveStream #bkwatch > div > .cell {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}

#match #LiveStream #bkwatch a {
    box-sizing: border-box;
    min-height: 66px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 10px;
    border: 1px solid var(--m2-line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(19, 31, 53, .05);
}

#match #LiveStream #bkwatch a:hover {
    border-color: #c9d7ec;
    box-shadow: 0 4px 12px rgba(19, 31, 53, .1);
}

#match #LiveStream #bkwatch img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 40px;
    object-fit: contain;
}

#match .m2-tv-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--m2-line);
}

#match .m2-tv-card__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--m2-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#match .m2-tv-card__header h3 { margin-bottom: 4px; }
#match .m2-tv-card__header h3::before { display: none; }

#match .m2-tv-card__matchup {
    margin: 0;
    color: var(--m2-ink-soft);
    font-size: 13px;
    line-height: 1.4;
}

#match .m2-tv-card__time {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    padding: 9px 12px;
    border: 1px solid var(--m2-line);
    border-radius: 10px;
    background: #f7f9fc;
    color: var(--m2-ink-soft);
    font-size: 12px;
    white-space: nowrap;
}

#match .m2-tv-card__time strong {
    color: var(--m2-ink);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

#match .m2-tv-channels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-top: 14px;
}

#match .m2-tv-channel {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--m2-line);
    border-radius: 12px;
    background: #fff;
    color: var(--m2-ink) !important;
    text-decoration: none !important;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

#match .m2-tv-channel:hover {
    border-color: #c9d7ec;
    background: #f9fbff;
    transform: translateY(-1px);
}

#match .m2-tv-channel__logo {
    flex: 0 0 54px;
    width: 54px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #f4f6f9;
}

#match .m2-tv-channel__logo img {
    display: block;
    width: 48px;
    height: 36px;
    object-fit: contain;
}

#match .m2-tv-channel__info {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
}

#match .m2-tv-channel__info strong {
    overflow: hidden;
    color: var(--m2-ink);
    font-size: 14px;
    text-overflow: ellipsis;
}

#match .m2-tv-channel__info > span {
    color: var(--m2-muted);
    font-size: 12px;
}

#match .m2-tv-channel__arrow {
    flex: 0 0 auto;
    color: var(--m2-muted);
    font-size: 24px;
    line-height: 1;
}

/* ---------- Комментарии и отзывы ---------- */
#match .m2-comments__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

#match .m2-comments__header h3 { margin-bottom: 4px; }

#match .m2-comments__header p {
    margin: 0;
    color: var(--m2-ink-soft);
    font-size: 13px;
    line-height: 1.45;
}

#match .m2-comments__count {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f1f4f8;
    color: var(--m2-ink-soft);
    font-size: 12px;
    font-weight: 750;
}

#match .m2-comments__stream {
    margin-bottom: 18px;
}

#match .m2-comments__empty {
    margin: 0;
    padding: 15px 16px;
    border: 1px dashed #ccd5e2;
    border-radius: 12px;
    background: #f8f9fc;
    color: var(--m2-ink-soft);
    font-size: 14px;
}

#match .m2-comments__stream .comments {
    display: grid;
    gap: 10px;
}

#match .m2-comments__stream .comments > .grid-x {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--m2-line);
    border-radius: 12px;
    background: #fff;
}

#match .m2-comments__stream .comments > .grid-x > .cell {
    width: auto;
    max-width: none;
    padding: 0;
}

#match .m2-comments__stream .comment_avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    object-fit: cover;
}

#match .m2-comments__stream .comment_body,
#match .m2-comments__stream .small-9 {
    min-width: 0;
    color: #33415a;
    font-size: 14px;
    line-height: 1.55;
}

#match .m2-comments__stream .comment_body > div:last-child,
#match .m2-comments__stream .small-9 > div:last-child {
    margin-top: 8px !important;
    overflow-wrap: anywhere;
}

/* ---------- Голосование «Сыграет ли прогноз?» ---------- */
#match .m2-voteblock {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    float: none;
    clear: both;
    width: 100%;
    max-width: 680px;
    margin: 20px auto 24px !important;
    padding: 18px;
    border: 1px solid var(--m2-line);
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, #f7f9fc);
    box-shadow: var(--m2-shadow-sm);
}

#match .m2-voteblock__intro {
    grid-column: 1 / -1;
    text-align: center;
}

#match .m2-voteblock__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--m2-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#match .m2-voteblock__question {
    padding: 0 !important;
    margin: 0 !important;
    color: var(--m2-ink);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

#match .m2-voteblock__question::before { display: none; }

#match .m2-voteblock__choices {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#match .m2-voteblock__bar {
    grid-column: 1 / -1;
    position: relative;
    width: 100%;
    height: 8px;
    overflow: hidden;
    margin: 0 0 2px;
    border-radius: 999px;
    background: #f3d9dc;
}

#match .m2-voteblock__bar .gr_value {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #53ad70, #2f9a4d);
    transition: width .3s ease;
}

#match .m2-voteblock__choice {
    box-sizing: border-box;
    width: auto;
    max-width: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--m2-line);
    border-radius: 12px;
    background: #fff;
    text-align: center;
}

#match .m2-vote-result {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 800;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

#match .m2-vote-result--yes { color: #27834a !important; }
#match .m2-vote-result--no { color: #c23d45 !important; }

#match .m2-vote-result .match__score {
    vertical-align: baseline !important;
    font-size: 13px;
}

#match .m2-vote-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 0;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: normal;
}

#match .m2-vote-button:focus-visible {
    outline: 3px solid rgba(42, 90, 159, .35);
    outline-offset: 2px;
}

#match .m2-comment-compose {
    padding: 14px;
    border: 1px solid var(--m2-line);
    border-radius: 14px;
    background: #f8f9fc;
}

#match .m2-comment-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 12px;
    padding: 5px;
    border: 0;
    border-radius: 11px;
    background: #edf1f6;
}

#match .m2-comment-tabs .tabs-title {
    flex: 1 1 0;
    float: none;
    text-align: center;
}

#match .m2-comment-tabs .tabs-title:last-child {
    margin-left: 10px;
}

#match .m2-comment-tabs .tabs-title > a {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px !important;
    border-radius: 8px;
    color: var(--m2-ink-soft) !important;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
    text-decoration: none !important;
}

#match .m2-comment-tabs .tabs-title.is-active > a {
    background: #fff;
    color: var(--m2-ink) !important;
    box-shadow: 0 2px 7px rgba(19, 31, 53, .09);
}

#match .m2-comment-panels {
    width: 100%;
    border: 0;
    background: transparent;
}

#match .m2-comment-panels .tabs-panel {
    padding: 8px 2px 2px;
}

/* ---------- Блок «мнение ИИ / автор» ---------- */
#match .bt-ai-summary-card,
#match .my-slide-content {
    border-radius: var(--m2-radius) !important;
    box-shadow: var(--m2-shadow) !important;
}

/* Сетки внутри карточки ИИ не должны вылезать за границы и обрезаться.
   Переводим их в адаптивную раскладку и разрешаем детям сжиматься. */
#match .bt-ai-summary-card {
    overflow: hidden;
}

/* Одна строка, как в оригинале, но с уменьшенными минимальными ширинами,
   чтобы карточка гарантированно помещалась и не обрезалась справа. */
#match .bt-ai-summary-grid {
    grid-template-columns: minmax(185px, 1fr) 80px minmax(185px, 1fr) minmax(140px, .55fr) !important;
    gap: 10px !important;
}

#match .bt-ai-combo-grid {
    grid-template-columns: minmax(190px, .86fr) 84px minmax(210px, .9fr) minmax(145px, .44fr) minmax(155px, .5fr) !important;
    gap: 10px !important;
}

#match .bt-ai-summary-grid > *,
#match .bt-ai-combo-grid > * {
    min-width: 0;
}

#match .bt-ai-combo-card.is-ai-compare .bt-ai-consensus-main,
#match .bt-ai-combo-card.is-ai-compare .bt-ai-line {
    min-width: 0;
}

/* Логотип/бонус букмекера не должны вылезать из своей колонки */
#match .bt-ai-combo-cta img {
    max-width: 100%;
}

/* Кнопки-действия «Верю ИИ / Верю аналитику»: текст строго по центру */
#match .bt-ai-actions .bt-ai-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Кнопки в блоке действий не должны вылезать за границы карточки */
#match .bt-ai-combo-card.is-ai-action {
    min-width: 0;
    overflow: hidden;
}

#match .bt-ai-actions.is-bottom-actions,
#match .bt-ai-actions.is-bottom-actions .bt-ai-actions-row {
    min-width: 0;
    width: 100%;
}

#match .bt-ai-actions.is-bottom-actions .bt-ai-action-btn {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

@media screen and (max-width: 991px) {
    #match .bt-ai-summary-grid,
    #match .bt-ai-combo-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---------- Билет эксперта ---------- */
#match .expert-bet-ticket {
    border-radius: var(--m2-radius) !important;
    box-shadow: var(--m2-shadow) !important;
}

/* ---------- Секции-справочники: компактные аккордеоны ---------- */
#match details.m2-acc {
    background: var(--m2-card);
    border: 1px solid var(--m2-line);
    border-radius: var(--m2-radius);
    box-shadow: var(--m2-shadow-sm);
    margin: 12px 0;
    overflow: hidden;
}

#match details.m2-acc > summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    font-size: 17px;
    font-weight: 800;
    color: var(--m2-ink);
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    min-height: 54px;
}

#match details.m2-acc > summary::-webkit-details-marker { display: none; }

#match details.m2-acc > summary::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--m2-muted);
    border-bottom: 2px solid var(--m2-muted);
    transform: rotate(-45deg);
    transition: transform .2s ease;
    margin-left: 2px;
}

#match details.m2-acc[open] > summary::before { transform: rotate(45deg); }

#match details.m2-acc > summary:hover { background: #fbfcfe; }

#match details.m2-acc > summary:focus-visible {
    outline: 3px solid rgba(42, 90, 159, .35);
    outline-offset: -3px;
}

#match details.m2-acc .m2-acc__body {
    padding: 0 20px 18px;
}

/* Убираем вложенную карточку внутри аккордеона, чтобы не дублировать рамку */
#match details.m2-acc .m2-acc__body .grid-container.main,
#match details.m2-acc .m2-acc__body .grid-container {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-top: 0 !important;
}

/* Секции, у которых legacy-шаблон не использует класс .main */
#match #matchPrediction,
#match #tableLastMatch,
#match #teamsLineUp,
#match #tvchannels {
    box-sizing: border-box;
    background: var(--m2-card);
    border: 1px solid var(--m2-line);
    border-radius: var(--m2-radius);
    box-shadow: var(--m2-shadow-sm);
    padding: 18px 20px;
    margin: 14px auto !important;
    max-width: 100%;
}

#match #standingsTable {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--m2-line);
    border-radius: var(--m2-radius-sm);
    padding: 16px;
}

#match #tableLastMatch .row,
#match #teamsLineUp .row {
    margin-left: 0;
    margin-right: 0;
}

#match .block-articles-link {
    border: 1px solid var(--m2-line);
    border-radius: var(--m2-radius);
    box-shadow: var(--m2-shadow-sm);
    background: #fff;
}

/* ---------- Отступы между блоками ---------- */
#match .grid-x.grid-padding-x + .grid-x.grid-padding-x { margin-top: 8px; }

/* ---------- Якорные секции: не заезжать под sticky-навигацию ---------- */
#match [id] { scroll-margin-top: 124px; }

/* ---------- Прогресс чтения ---------- */
.m2-progress {
    position: fixed;
    top: 60px;
    z-index: 61;
    height: 3px;
    background: transparent;
    margin: 0;
    width: 100%;
    left: 0px;
}

.m2-progress__bar {
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--m2-brand), var(--m2-accent));
    border-radius: 3px;
    transition: width .1s linear;
}

/* Обёртка legacy-меню не должна обрезать sticky-панель и добавлять поля */
#match .date_select:has(.m2-nav) {
    margin: 0 !important;
}

/* ---------- Адаптив ---------- */
@media screen and (max-width: 640px) {
    .bt-ai-bet-chip {font-size: 12px;}
    .bt-ai-consensus-main .bt-ai-bet-chip { font-size: 15px;}
    #match .m2-comment-tabs .tabs-title:last-child {
        margin-left: 0px;
        margin-top: .5em;
    }
    #match.grid-container { padding-left: 10px; padding-right: 10px; }

    #match .grid-container.main,
    #match .grid-container[class*="main_text"] {
        padding: 15px 13px;
        border-radius: 12px;
    }

    #match h3 { font-size: 17px !important;}
    #match h2 { font-size: 19px !important;}

    .m2-nav {
        top: 64px;
        border-radius: 12px;
        margin: 6px 0;
    }
    .m2-nav__inner { padding: 6px; }
    .m2-nav__item { min-height: 44px; padding: 10px 13px; font-size: 13px; }
    .m2-nav__arrow { display: none !important; }

    /* Якоря не должны прятаться под sticky-навигацией и прогресс-баром */
    #match [id] { scroll-margin-top: 124px; }

    #match .h1_prog { margin-left: 0 !important; }

    #match .m2-mobile-h1 {
        font-size: clamp(19px, 5.5vw, 25px);
        margin: 12px 0 10px;
        padding: 0 4px;
        text-align: left;
    }

    #match .m2-first-screen {
        padding: 10px;
        border-radius: 12px;
        margin-top: 8px;
    }

    #match .m2-first-screen > .m2-match-hero {
        padding: 14px 8px !important;
        margin-bottom: 12px !important;
    }

    #match .m2-first-screen > .m2-match-hero .row {
        grid-template-columns: minmax(0, 1fr) minmax(86px, .72fr) minmax(0, 1fr);
        gap: 4px;
    }

    #match .m2-first-screen > .m2-match-hero .row > [class*="col-4"] {
        padding-left: 3px !important;
        padding-right: 3px !important;
        font-size: 14px !important;
        overflow-wrap: anywhere;
    }

    #match .m2-first-screen .gerb {
        width: 58px;
        height: 58px;
    }

    #match .m2-first-screen .row > .col-4:nth-child(2) {
        padding: 10px 5px !important;
        font-size: 12px !important;
    }

    #match .m2-first-screen .row > .col-4:nth-child(2) div:first-of-type span {
        font-size: 17px !important;
    }

    #match .m2-countdown {
        flex-wrap: wrap;
        gap: 3px 6px;
        border-radius: 10px;
        padding: 6px 8px;
        font-size: 11px;
    }

    #match .m2-first-screen .expert-row {
        gap: 7px;
    }

    #match details.m2-acc > summary {
        padding: 14px 15px;
        font-size: 15px;
    }

    #match details.m2-acc .m2-acc__body {
        padding: 0 13px 14px;
    }

    #match .m2-analysis__content.is-collapsed::after { height: 58px; }

    #match .m2-analysis__content h2.m2-analysis__main-heading,
    #match .m2-analysis__content h3.m2-analysis__main-heading {
        padding: 11px 12px;
        font-size: 18px;
    }

    #match .m2-analysis__main-heading .kf_mob {
        float: none !important;
        width: fit-content !important;
        margin: 10px 0 2px !important;
    }

    #match .m2-analysis__section > summary {
        min-height: 48px;
        padding: 11px 12px;
        font-size: 14px;
    }

    #match .m2-analysis__section-body { padding: 12px; }

    #match .m2-analysis__toggle {
        width: 100%;
        min-height: 46px;
        margin-top: 8px;
    }

    #match #matchPrediction,
    #match #tableLastMatch,
    #match #teamsLineUp,
    #match #tvchannels {
        padding: 14px 12px;
        border-radius: 12px;
    }

    #match #standingsTable { padding: 10px; }

    #match #LiveStream { padding: 14px 12px !important; }
    #match #LiveStream #bkwatch > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    #match #LiveStream #bkwatch > .grid-x { grid-template-columns: minmax(0, 1fr); }
    #match #LiveStream #bkwatch a { min-height: 58px; padding: 8px; }

    #match .m2-tv-card__header {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    #match .m2-tv-card__time {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        white-space: normal;
    }

    #match .m2-tv-channels { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    #match .m2-tv-channel { min-height: 64px; padding: 10px; }

    #match .m2-comments__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    #match .m2-comment-compose { padding: 10px; }
    #match .m2-comment-tabs { gap: 4px; }
    #match .m2-comment-tabs .tabs-title > a { padding: 7px 6px !important; font-size: 12px; }
    #match .m2-comments__stream .comments > .grid-x { padding: 10px; }
    #match .m2-voteblock {
        gap: 8px;
        margin: 14px 0 18px !important;
        padding: 12px;
        border-radius: 13px;
    }

    #match .m2-voteblock__question { font-size: 16px; }

    #match .m2-voteblock__choices { gap: 8px; }

    #match .m2-voteblock__choice {
        padding: 9px 7px;
        border-radius: 10px;
    }

    #match .m2-vote-result { font-size: 15px !important; }

    #match .m2-vote-button {
        min-height: 48px;
        padding: 8px 6px !important;
        font-size: 13px !important;
    }

    #match .ai-section-title {
        margin: 18px 0 8px !important;
        padding: 10px 12px;
        font-size: 12px;
    }
    #match .m2-comment-panels .com_textarea {
        box-sizing: border-box;
        width: 100%;
        min-height: 132px;
        padding: 12px;
        border: 1px solid #dbe2ec;
        border-radius: 10px;
        background-color: #fff;
        font: inherit;
        font-size: 16px;
        line-height: 1.5;
    }

    #match .m2-comment-panels .buttons {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #match .m2-comment-panels .emotions-block {
        max-height: 76px;
        overflow: auto;
        border: 1px solid var(--m2-line);
        box-shadow: none;
    }

    /* Компактная мобильная сетка: эксперт и ИИ рядом, действия — второй ряд. */
    #match .bt-ai-combo-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    #match .bt-ai-combo-card.is-expert-main {
        grid-column: 1;
        grid-row: 1;
    }

    #match .bt-ai-combo-card.is-ai-compare {
        grid-column: 2;
        grid-row: 1;
    }

    #match .bt-ai-status.is-between-cards {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    #match .bt-ai-combo-card.is-ai-action {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    #match .bt-ai-combo-cta.is-bookmaker-offer {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    #match .bt-ai-combo-card.is-expert-main .bt-ai-bet-chip,
    #match .bt-ai-combo-card.is-ai-compare .bt-ai-bet-chip,
    #match .bt-ai-combo-card.is-ai-compare .bt-ai-pill,
    #match .bt-ai-combo-card.is-ai-compare .bt-ai-koef-chip,
    #match .bt-ai-combo-card.is-ai-compare .bt-ai-confidence-chip {
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: center;
    }

    #match .bt-ai-combo-card.is-ai-compare .bt-ai-consensus-main,
    #match .bt-ai-combo-card.is-ai-compare .bt-ai-line {
        flex-wrap: wrap !important;
        white-space: normal !important;
    }

    #match .bt-ai-combo-grid .bt-ai-combo-cta img {
        max-width: 100% !important;
        height: auto;
    }
}

@media screen and (max-width: 380px) {
    #match .m2-first-screen > .m2-match-hero .row {
        grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr);
    }

    #match .m2-first-screen .gerb {
        width: 48px;
        height: 48px;
    }
}

/* Активный пункт аккордеона */
.accordion-item.is-active > a {
    color: #1a1a1a !important;
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
    #match .buttons, .m2-nav__item, #match details.m2-acc > summary::before {
        transition: none !important;
    }
}