/*
    Deterministic beautiful-site shell chrome (header burger, drawer, breadcrumbs, footer).
    Loaded after main.css; uses theme CSS variables from the LLM-generated palette.
*/

/* Reference logo ratio (mostbeteg.app: width="800" height="128") */
body.fartux-site {
    margin: 0;
    --fartux-logo-ratio: 800 / 128;
    --fartux-logo-header-height: 36px;
    --fartux-logo-footer-max-width: 24%;
    --fartux-logo-footer-max-cap: 28%;
    --fartux-burger-size: 44px;
    --fartux-burger-bar: 18px;
    --fartux-burger-gap: 6px;
    --fartux-drawer-width: 288px;
    --fartux-drawer-ease: 0.18s;
    --fartux-actions-gap: 8px;
    --fartux-drawer-nav-gap: 6px;
}

body.fartux-site,
body.fartux-site .fartux-site-header,
body.fartux-site .fartux-page-strip,
body.fartux-site .fartux-site-footer,
body.fartux-site .fartux-site-drawer,
body.fartux-site .fartux-site-drawer__panel {
    font-family: var(--fartux-font);
}

body.fartux-site.fartux-site-nav-open .fartux-site-burger__bar:nth-child(1) {
    transform: translateY(calc(2px + var(--fartux-burger-gap, 5px))) rotate(45deg);
}

body.fartux-site.fartux-site-nav-open .fartux-site-burger__bar:nth-child(2) {
    opacity: 0;
}

body.fartux-site.fartux-site-nav-open .fartux-site-burger__bar:nth-child(3) {
    transform: translateY(calc(-1 * (2px + var(--fartux-burger-gap, 5px)))) rotate(-45deg);
}

/* Измерено из самого файла логотипа при сборке (mostbet-logo.png): прозрачная кайма слева. */
:root { --fartux-logo-bleed-inline: 2.5391%; }

/* Burger toggle */
body.fartux-site .fartux-site-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--fartux-burger-gap, 5px);
    flex: 0 0 auto;
    width: var(--fartux-burger-size, 44px);
    height: var(--fartux-burger-size, 44px);
    margin: 0;
    padding: 0;
    border: 1px solid var(--fartux-border, rgba(217, 164, 65, 0.22));
    border-radius: var(--fartux-radius-sm, 12px);
    background: rgba(0, 0, 0, 0.22);
    color: var(--fartux-text, #fff8ef);
    cursor: pointer;
}

body.fartux-site .fartux-site-burger__bar {
    display: block;
    width: var(--fartux-burger-bar, 20px);
    height: 2px;
    margin-inline: auto;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Off-canvas drawer — viewport-sized overlay (header backdrop-filter creates a fixed containing block). */
body.fartux-site .fartux-site-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    z-index: 1200;
    display: flex;
    justify-content: flex-end;
    /* Clip the closed panel: it rests at translateX(100%), i.e. one panel-width past
        the right edge. The header's backdrop-filter makes this "fixed" box a containing
        block, so that offset counted toward document scroll width and every page had a
        horizontal scrollbar with a strip of empty space beside the content. */
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    background: color-mix(in srgb, var(--fartux-panel, rgba(40, 9, 4, 0.94)) 55%, transparent);
    opacity: 0;
    transition: opacity var(--fartux-drawer-ease, 0.22s) ease, visibility var(--fartux-drawer-ease, 0.22s) ease;
}

body.fartux-site.fartux-site-nav-open .fartux-site-drawer {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}

body.fartux-site .fartux-site-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: var(--fartux-drawer-nav-gap, 8px);
}

body.fartux-site .fartux-site-drawer__panel {
    width: min(100%, var(--fartux-drawer-width, 320px));
    max-width: 100%;
    height: 100%;
    min-height: 100dvh;
    box-sizing: border-box;
    overflow: auto;
    padding: clamp(18px, 4vw, 28px);
    color: var(--fartux-text, #fff8ef);
    /* Opaque base under the gradient: theme panels carry alpha (KZ ships
        --fartux-panel: rgba(45,13,8,.92) / --fartux-panel-2: .86), so the open menu let the
        hero art and the header CTA show through it. */
    background-color: var(--fartux-bg, #160502);
    background-image:
        linear-gradient(
            180deg,
            var(--fartux-panel, var(--fartux-panel-2, rgba(71, 16, 7, 0.86))),
            var(--fartux-panel-2, var(--fartux-panel, rgba(40, 9, 4, 0.94)))
        );
    border-inline-start: 1px solid var(--fartux-border, rgba(217, 164, 65, 0.22));
    box-shadow: var(--fartux-shadow, 0 22px 70px rgba(0, 0, 0, 0.42));
    transform: translateX(100%);
    transition: transform var(--fartux-drawer-ease, 0.22s) ease;
}

body.fartux-site[dir="rtl"] .fartux-site-drawer__panel {
    transform: translateX(-100%);
}

body.fartux-site.fartux-site-nav-open .fartux-site-drawer__panel {
    transform: translateX(0);
}

/* Shell chrome typography — header/footer live outside .fartux-article after convert. */
body.fartux-site {
    --fartux-font: var(
        --fartux-font,
        "Inter",
        "Noto Sans",
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif
    );
}

/* Reset inline dropdown rules from main.css — shell owns off-canvas layout */
body.fartux-site .fartux-site-drawer {
    inset: unset !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    height: 100dvh !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    margin-block: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    /* Was `visible !important`, which let the closed panel (translateX(100%))
        stick out one panel-width past the right edge and stretch document scroll
        width — a horizontal scrollbar on every page. The panel scrolls itself. */
    overflow: hidden !important;
    /* The open menu must outrank anything the theme paints. main.css is generated
        per site, so its stacking values vary (this run alone ships 50, 999, 1000,
        1200 and 9999) — the shell's plain `z-index: 1200` only held by luck, and a
        theme rule at 1200 wins on DOM order alone. Pin it above every theme value. */
    z-index: 999999 !important;
}

body.fartux-site .fartux-site-drawer__nav a {
    display: block;
    padding: 12px 14px;
    border-radius: var(--fartux-radius-sm, 12px);
    color: var(--fartux-text-soft, #f0d9c4);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

body.fartux-site .fartux-site-drawer__nav a:hover,
body.fartux-site .fartux-site-drawer__nav a:focus-visible {
    color: var(--fartux-gold-2, #f3d488);
    border-color: var(--fartux-border, rgba(217, 164, 65, 0.22));
    background: color-mix(
        in srgb,
        var(--fartux-gold-2, var(--fartux-gold, var(--fartux-primary, #b3281a))) 8%,
        transparent
    );
}

/* Header layout: logo left, actions right (override theme mobile column stack) */
body.fartux-site .fartux-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 2vw, 18px);

    /* Same container geometry as .fartux-page-strip__inner below, and for one reason:
        the logo's left edge and the breadcrumbs' left edge must land on one line.
        The strip is pinned here in shell.css, but main.css is LLM-authored per site
        and drifts — it wrote `width: min(100%, 1120px)` + `padding-inline:
        clamp(1rem, 4vw, 1.5rem)` for the header, which puts the logo 24px to the
        right of the crumbs at desktop. Pinning only one of the two containers is
        what created the gap, so both are pinned. padding-block is deliberately
        left to the theme. */
    width: 100%;
    max-width: calc(
        var(--fartux-container, 1120px) + var(--fartux-page-pad, 28px) + var(--fartux-page-pad, 28px)
    );
    margin-inline: auto;
    padding-inline: var(--fartux-page-pad, clamp(16px, 3.4vw, 28px));
}

body.fartux-site .fartux-site-drawer__cta + .fartux-site-drawer__cta {
    margin-top: 10px;
}

body.fartux-site .fartux-site-drawer__nav a[aria-current="page"] {
    color: var(--fartux-teal, var(--fartux-primary, var(--fartux-red, #8f1f12)));
    border-color: color-mix(
        in srgb,
        var(--fartux-teal, var(--fartux-primary, var(--fartux-red, #8f1f12))) 35%,
        transparent
    );
    background: color-mix(
        in srgb,
        var(--fartux-teal, var(--fartux-primary, var(--fartux-red, #8f1f12))) 10%,
        transparent
    );
}

body.fartux-site .fartux-site-brand {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

body.fartux-site .fartux-site-header .fartux-site-brand__logo {
    display: block;
    max-height: var(--fartux-logo-header-height);
    max-width: 100%;
    width: auto;
    height: auto;
    aspect-ratio: var(--fartux-logo-ratio);
    object-fit: contain;

    /* Логотип-PNG несёт собственную прозрачную кайму, поэтому его коробка
        выравнена по контейнеру, а видимая надпись — нет. Кайма пропорциональна
        размеру отрисовки: на мобильной (82px) это 2px и незаметно, на десктопе
        (250px) — 7px, и это видно.

        Проценты в `transform` считаются от собственной коробки элемента, а не от
        родителя, поэтому одно значение верно на любом размере. Величину измеряет
        `sitegen/logo_bleed.py` из самого файла и дописывает переменную к копии
        этого файла при сборке — поменяется логотип, поменяется и компенсация.
        Запасное значение 0% означает «не сдвигать». */
    transform: translateX(calc(-1 * var(--fartux-logo-bleed-inline, 0%)));
}

body.fartux-site .fartux-site-footer__brand {
    display: block;
    flex-shrink: 0;
    width: min(var(--fartux-logo-footer-max-width, 24%), var(--fartux-logo-footer-max-cap, 30%));
    max-width: min(var(--fartux-logo-footer-max-width, 24%), var(--fartux-logo-footer-max-cap, 30%));
}

body.fartux-site .fartux-site-footer .fartux-site-brand__logo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--fartux-logo-ratio);
    max-width: none;
    object-fit: contain;
}

body.fartux-site .fartux-site-header__actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--fartux-actions-gap, 10px);
    flex: 0 0 auto;
    flex-shrink: 0;
}

/* Header CTA — deterministic pill button (LLM main.css may omit .fartux-site-btn). */
body.fartux-site .fartux-site-btn,
body.fartux-site .fartux-site-drawer__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid color-mix(
        in srgb,
        var(--fartux-teal, var(--fartux-primary, var(--fartux-red, #8f1f12))) 45%,
        transparent
    );
    color: var(--fartux-on-accent, var(--fartux-btn-text, #09100f));
    background: linear-gradient(
        135deg,
        var(--fartux-teal, var(--fartux-primary, var(--fartux-red, var(--fartux-pink, #63ded2)))),
        var(--fartux-teal-2, var(--fartux-primary-2, var(--fartux-red-2, var(--fartux-pink-2, #45cfc2))))
    );
    text-decoration: none;
    font-weight: 800;
    font-size: 0.94rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 0 24px color-mix(
        in srgb,
        var(--fartux-teal, var(--fartux-primary, var(--fartux-red, #8f1f12))) 22%,
        transparent
    );
    overflow-wrap: anywhere;
}

/* APK CTA — secondary outline style so it differs from Register. */
body.fartux-site .fartux-site-btn--apk,
body.fartux-site .fartux-site-drawer__cta--apk {
    color: var(--fartux-text, #fff8ef);
    background: transparent;
    border: 1px solid color-mix(
        in srgb,
        var(--fartux-gold, var(--fartux-primary, var(--fartux-teal, #b3281a))) 70%,
        transparent
    );
    box-shadow: none;
}

body.fartux-site .fartux-site-btn--apk:hover,
body.fartux-site .fartux-site-btn--apk:focus-visible,
body.fartux-site .fartux-site-drawer__cta--apk:hover,
body.fartux-site .fartux-site-drawer__cta--apk:focus-visible {
    filter: brightness(1.08);
    background: color-mix(
        in srgb,
        var(--fartux-gold, var(--fartux-primary, var(--fartux-teal, #b3281a))) 16%,
        transparent
    );
    outline: none;
    text-decoration: none;
}

body.fartux-site .fartux-site-btn:hover,
body.fartux-site .fartux-site-btn:focus-visible,
body.fartux-site .fartux-site-drawer__cta:hover,
body.fartux-site .fartux-site-drawer__cta:focus-visible {
    filter: brightness(1.06);
    outline: none;
    text-decoration: none;
}

body.fartux-site .fartux-site-drawer__cta {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
}

body.fartux-site {
    overflow-x: clip;
}

@supports not (overflow: clip) {
    body.fartux-site {
        overflow-x: hidden;
    }
}

/* Main content spacing below header chrome (override per-site main.css gaps). */
body.fartux-site .fartux-site-main {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0;
    padding-block: clamp(18px, 3vw, 34px) clamp(34px, 5vw, 64px);
    padding-inline: var(--fartux-page-pad, var(--fartux-site-gutter, clamp(16px, 3.4vw, 28px)));
}

body.fartux-site .fartux-site-drawer__panel {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.fartux-site .fartux-site-main .fartux-article,
body.fartux-site main .fartux-article {
    width: 100%;
    max-width: min(100%, var(--fartux-container, 1120px));
    box-sizing: border-box;
}

/* Drawer nav: normalize ul/li from LLM headers (avoid phantom scrollbars). */
body.fartux-site .fartux-site-drawer__nav ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.fartux-site .fartux-site-drawer__panel::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

body.fartux-site .fartux-site-drawer__nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Hide legacy horizontal nav when drawer chrome is used */
body.fartux-site .fartux-site-header__inner > .fartux-site-nav,
body.fartux-site .fartux-site-header__inner > .fartux-main-nav {
    display: none;
}

/* Breadcrumbs inside header — compact strip, left-aligned */
body.fartux-site .fartux-site-header .fartux-page-strip {
    border-block: none;
    border-top: 1px solid color-mix(
        in srgb,
        var(--fartux-border, var(--fartux-line, rgba(217, 164, 65, 0.22))) 60%,
        transparent
    );
    background: transparent;
    margin-block-end: 0;
}

body.fartux-site .fartux-site-header .fartux-page-strip__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    width: 100%;
    max-width: calc(var(--fartux-container, 1120px) + var(--fartux-page-pad, 28px) + var(--fartux-page-pad, 28px));
    margin-inline: auto;
    padding-inline: var(--fartux-page-pad, clamp(16px, 3.4vw, 28px));
    padding-block: 8px;
}

body.fartux-site .fartux-site-header .fartux-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--fartux-muted, #c9a37e);
    font-size: 0.93rem;
    line-height: 1.5;
}

body.fartux-site .fartux-breadcrumbs li + li::before {
    content: "/";
    margin-inline-end: 8px;
    color: var(--fartux-muted-2, #9c7658);
}

/* Footer: logo + wrapping inline nav links (reference: flex row, not columns) */
body.fartux-site .fartux-site-footer__top {
    display: grid;
    gap: clamp(16px, 3vw, 28px);
    align-items: center;
}

body.fartux-site .fartux-breadcrumbs a {
    color: var(--fartux-gold-2, #f3d488);
    text-decoration: none;
}

body.fartux-site .fartux-footer-nav {
    display: block !important;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0 !important;
    margin: 0;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow: visible !important;
}

body.fartux-site .fartux-breadcrumbs a:hover,
body.fartux-site .fartux-breadcrumbs a:focus-visible {
    color: var(--fartux-teal, #b3281a);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Reference (mostbeteg.app/info): flex-wrap rows, each item grows to fill row width */
body.fartux-site .fartux-footer-nav__list {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
    overflow: visible !important;
}

body.fartux-site .fartux-footer-nav__list > li {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    min-width: 0;
}

body.fartux-site .fartux-footer-nav a,
body.fartux-site .fartux-footer-nav__link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    padding: 10px clamp(16px, 3vw, 30px) !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--fartux-text-soft, #f0d9c4);
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(0.94rem, 1.7vw, 1rem);
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    transform: none !important;
    overflow-wrap: anywhere;
}

/*
    Подвал: колонка на всю ширину контейнера.

    Здесь сталкивались два источника стилей. main.css пишет модель, и она верстает подвал
    флексом: `display: flex; justify-content: space-between`. Этот файл переводит контейнер
    в грид, но `justify-content` от флекса никуда не девается — в гриде оно раскладывает
    ТРЕКИ, и единственный автоширинный трек прижимается к началу вместо растяжения.

    Замер 26.08.2026, пакистанский прогон, окно 1440: контейнер подвала 1120px с центром 720,
    а всё содержимое — колонка 413px с центром 394. Логотип, ссылка, лицензия и копирайт
    сидели слева от середины, и это читалось как «текст стоит неровно». Разметка была цела,
    раскладку ломала одна унаследованная строчка.

    Поэтому трек объявлен явно, а выравнивание сброшено — что бы модель ни написала выше.
*/
body.fartux-site .fartux-site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    justify-items: stretch;
    gap: clamp(16px, 3vw, 24px);
}

body.fartux-site .fartux-footer-nav a:hover,
body.fartux-site .fartux-footer-nav a:focus-visible,
body.fartux-site .fartux-footer-nav__link:hover,
body.fartux-site .fartux-footer-nav__link:focus-visible {
    color: var(--fartux-gold-2, #f3d488);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    transform: none;
    background: none;
}

@media (min-width: 768px) {
    body.fartux-site .fartux-site-footer__top {
        grid-template-columns: min(var(--fartux-logo-footer-max-width, 24%), var(--fartux-logo-footer-max-cap, 30%)) minmax(0, 1fr);
        gap: clamp(24px, 4vw, 48px);
    }

    body.fartux-site .fartux-site-footer__brand {
        width: 100%;
        max-width: none;
    }

    body.fartux-site .fartux-site-footer__top > .fartux-footer-nav {
        justify-self: stretch;
        align-self: center;
    }

    /*
        Логотип у края, остальное — по центру подвала.

        Колонок стало три: логотип, ссылки, пустой противовес той же ширины. Без противовеса
        колонка ссылок занимает весь остаток, и её середина уезжает вправо: замер 26.08.2026
        давал центр ссылок 904 при центре подвала 720, тогда как лицензия и копирайт стояли
        ровно на 720. Две разные оси в одном подвале и читались как «текст стоит неровно».

        Противовес — пустая ячейка из `::after`, а не лишний тег: разметку подвала строит
        сборщик, и ради выравнивания её трогать незачем.
    */
    body.fartux-site .fartux-site-footer__top {
        grid-template-columns:
            min(var(--fartux-logo-footer-max-width, 24%), var(--fartux-logo-footer-max-cap, 30%))
            minmax(0, 1fr)
            min(var(--fartux-logo-footer-max-width, 24%), var(--fartux-logo-footer-max-cap, 30%));
    }

    body.fartux-site .fartux-site-footer__top::after {
        content: "";
        display: block;
    }
}

body.fartux-site .fartux-footer-nav a[aria-current="page"],
body.fartux-site .fartux-footer-nav__link[aria-current="page"] {
    color: var(--fartux-teal, #b3281a);
    background: none;
    border: none;
}

body.fartux-site .fartux-site-footer__copy {
    margin: 0;
    color: var(--fartux-muted, #c9a37e);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
}

/* Compact one-row header on phone + tablet (incl. iPad landscape < 1024). */
@media (max-width: 1023px) {
    body.fartux-site .fartux-site-header__inner {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 4px;
    }

    body.fartux-site .fartux-site-header .fartux-site-brand {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 24%;
        overflow: hidden;
        justify-content: flex-start !important;
    }

    body.fartux-site .fartux-site-header .fartux-site-brand__logo {
        max-height: 20px;
        max-width: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    body.fartux-site .fartux-site-header__actions {
        flex: 1 1 auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 3px;
        min-width: 0;
    }

    body.fartux-site .fartux-site-btn {
        height: 30px;
        padding: 0 5px;
        font-size: clamp(0.54rem, 2.4vw, 0.64rem);
        width: auto;
        box-sizing: border-box;
    }

    body.fartux-site .fartux-site-burger {
        width: 30px;
        height: 30px;
        gap: 4px;
    }

    body.fartux-site .fartux-site-burger__bar {
        width: 14px;
    }

    body.fartux-site .fartux-site-drawer__cta {
        display: flex;
        margin-top: 14px;
    }

    body.fartux-site .fartux-site-drawer__cta + .fartux-site-drawer__cta {
        margin-top: 10px;
    }

    body.fartux-site .fartux-site-header .fartux-page-strip__inner {
        flex-direction: row !important;
        align-items: center !important;
    }

    /* Stacked footer: logo spans full row width (reference mobile layout) */
    body.fartux-site .fartux-site-footer__top {
        grid-template-columns: 1fr;
        gap: clamp(20px, 5vw, 28px);
    }

    body.fartux-site .fartux-site-footer__brand {
        display: block;
        width: 100%;
        max-width: none;
    }

    body.fartux-site .fartux-site-footer .fartux-site-brand__logo {
        display: block;
        width: 100%;
        height: auto;
        max-width: none;
        aspect-ratio: var(--fartux-logo-ratio);
        object-fit: contain;
    }
}

/* main.css stacks header nav pills at 380px; footer keeps reference row grow layout */
@media (max-width: 380px) {
    body.fartux-site .fartux-footer-nav a,
    body.fartux-site .fartux-footer-nav__link {
        flex-basis: auto !important;
    }
}

/* Article TOC (fair-pages-kit / pipeline-injected after hero) */
.fartux-article .fartux-toc,
.mbpk-article .fartux-toc,
.mbpk-page .fartux-article .fartux-toc {
    width: 100%;
    max-width: var(--fartux-container);
    margin-inline: auto;
    margin-block-end: var(--fartux-stack-gap, var(--fartux-section-gap, clamp(34px, 6vw, 64px)));
    padding: clamp(20px, 4vw, 36px) var(--fartux-page-pad, var(--fartux-gutter, clamp(16px, 3.4vw, 28px)));
    border: 1px solid var(--fartux-border, rgba(217, 164, 65, 0.22));
    border-radius: var(--fartux-radius-lg, 22px);
    background:
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--fartux-gold, var(--fartux-primary, #b3281a)) 14%, transparent), transparent 16rem),
        linear-gradient(180deg, var(--fartux-panel, var(--fartux-panel-2, rgba(71, 16, 7, 0.86))), var(--fartux-panel-2, rgba(71, 16, 7, 0.86)));
    box-shadow: var(--fartux-shadow, 0 22px 70px rgba(0, 0, 0, 0.42));
}

/* Drawer CTAs only needed when burger is the nav path (phone/tablet). */
@media (min-width: 1024px) {
    body.fartux-site .fartux-site-btn--apk,
    body.fartux-site .fartux-site-drawer__cta--apk {
        display: none !important;
    }

    body.fartux-site .fartux-site-drawer__cta {
        display: none;
    }
}

@media (max-width: 640px) {
    .fartux-article .fartux-toc,
    .mbpk-article .fartux-toc,
    .mbpk-page .fartux-article .fartux-toc {
        max-width: 100%;
    }
}

.fartux-article .fartux-toc__summary,
.mbpk-article .fartux-toc__summary,
.mbpk-page .fartux-article .fartux-toc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fartux-article .fartux-toc__summary::-webkit-details-marker,
.mbpk-article .fartux-toc__summary::-webkit-details-marker,
.mbpk-page .fartux-article .fartux-toc__summary::-webkit-details-marker {
    display: none;
}

.fartux-article .fartux-toc__summary::after,
.mbpk-article .fartux-toc__summary::after,
.mbpk-page .fartux-article .fartux-toc__summary::after {
    content: "+";
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--fartux-border-strong, rgba(217, 164, 65, 0.42));
    border-radius: var(--fartux-radius-sm, 12px);
    color: var(--fartux-gold-2, #f3d488);
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.2s ease, background 0.2s ease;
}

.fartux-article .fartux-toc__title,
.mbpk-article .fartux-toc__title,
.mbpk-page .fartux-article .fartux-toc__title {
    margin: 0;
    color: var(--fartux-gold-2, #f3d488);
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    line-height: 1.25;
}

.fartux-article .fartux-toc[open] .fartux-toc__summary::after,
.mbpk-article .fartux-toc[open] .fartux-toc__summary::after,
.mbpk-page .fartux-article .fartux-toc[open] .fartux-toc__summary::after {
    content: "−";
}

.fartux-article .fartux-toc__list,
.mbpk-article .fartux-toc__list,
.mbpk-page .fartux-article .fartux-toc__list {
    margin: clamp(14px, 2.5vw, 20px) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: clamp(8px, 1.5vw, 12px);
}

.fartux-article .fartux-toc__list--sub,
.mbpk-article .fartux-toc__list--sub,
.mbpk-page .fartux-article .fartux-toc__list--sub {
    margin: clamp(8px, 1.5vw, 10px) 0 0;
    padding-left: clamp(12px, 2vw, 18px);
    border-left: 1px solid var(--fartux-border, rgba(217, 164, 65, 0.22));
}

.fartux-article .fartux-toc__item,
.mbpk-article .fartux-toc__item,
.mbpk-page .fartux-article .fartux-toc__item {
    margin: 0;
}

.fartux-article .fartux-toc__link,
.mbpk-article .fartux-toc__link,
.mbpk-page .fartux-article .fartux-toc__link {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--fartux-radius-sm, 12px);
    color: var(--fartux-text, var(--fartux-ink, #f2f2ee));
    text-decoration: none;
    background: color-mix(in srgb, var(--fartux-text, var(--fartux-ink, #f2f2ee)) 3%, transparent);
    border: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

/*
    Просвет между абзацами — гарантированный минимум, а не переопределение.

    main.css пишет модель, и на двух сайтах из семи она поставила абзацам нулевые поля:
    замер 26.08.2026 дал зазор 0px на трёх страницах (mostbetloginpakistan.pk обе,
    mostbetofficialwebsite.pk английская), тогда как на остальных пяти он 17–22px. Текст
    шёл сплошняком.

    Правило намеренно задаёт margin СВЕРХУ у второго абзаца, а не снизу у первого.
    Контейнер — обычный блок (проверено: display=block), значит соседние вертикальные поля
    СХЛОПЫВАЮТСЯ и берётся большее. Там, где сайт уже поставил свои 17 или 22 — ничего не
    меняется; там, где ноль — появляется просвет. Разнообразие вёрстки между доменами при
    этом не страдает, а оно здесь и есть смысл всей затеи.

    Единица em, а не пиксели: у каждого сайта свой кегль, и просвет должен быть ему под стать.

    `!important` — не грубость, а единственный устойчивый способ. Селекторы в main.css пишет
    модель, и их вес непредсказуем: на mostbetofficialwebsite.pk она выдала
    `:is(.fartux-article, .mbpk-article, .mbpk-page .fartux-article) .fartux-hero__lead { margin-block: 0 }`
    — три класса против двух у обычного правила, и порог молча проигрывал. Гнаться за весом
    бессмысленно: следующий сайт напишет на класс длиннее.

    Переопределения при этом не происходит: задаётся поле СВЕРХУ, а поля схлопываются по
    большему. Сайт со своими 22px снизу сохранит 22px; сайт с нулём получит просвет.
*/
body.fartux-site .fartux-hero__copy p + p,
body.fartux-site .fartux-copy p + p,
body.fartux-site .fartux-card__body p + p {
    margin-block-start: 0.9em !important;
}

/* Hero: single-column stack at every breakpoint (media → CTA → copy share one column). */
body.fartux-site .fartux-hero,
body.fartux-site .fartux-hero.fartux-row--stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "media"
        "cta"
        "copy";
}

.fartux-article .fartux-toc__num,
.mbpk-article .fartux-toc__num,
.mbpk-page .fartux-article .fartux-toc__num {
    flex: 0 0 auto;
    min-width: 2.2rem;
    color: var(--fartux-gold, #d9a441);
    font-variant-numeric: tabular-nums;
}

.fartux-article .fartux-toc__link:hover,
.mbpk-article .fartux-toc__link:hover,
.mbpk-page .fartux-article .fartux-toc__link:hover,
.fartux-article .fartux-toc__link:focus-visible,
.mbpk-article .fartux-toc__link:focus-visible,
.mbpk-page .fartux-article .fartux-toc__link:focus-visible {
    color: var(--fartux-gold-2, #f3d488);
    border-color: var(--fartux-border-strong, rgba(217, 164, 65, 0.42));
    background: color-mix(
        in srgb,
        var(--fartux-gold, var(--fartux-primary, #b3281a)) 8%,
        transparent
    );
}

.fartux-article .fartux-toc__text,
.mbpk-article .fartux-toc__text,
.mbpk-page .fartux-article .fartux-toc__text {
    flex: 1 1 auto;
}

/* Формы секций (sitegen/layout_reshape.py). Роль .fartux-row остаётся вторым классом и
   несёт сетку; здесь снимается только то, что ломает её у нестандартного контейнера. */
.fartux-band, .fartux-note, .fartux-brief, .fartux-prose, .fartux-deck, .fartux-steps, .fartux-panel, .fartux-disclose,
.fartux-split, .fartux-wide { margin: 0 0 var(--fartux-section-gap, 2rem); padding: 0; }
figure.fartux-band { margin-inline: 0; }
/* Лишний уровень не должен менять раскладку: сетка живёт на .fartux-row, которая теперь
   снаружи, и `display: contents` отдаёт её ячейки детям обёртки. */
/* Внутренний контейнер СТРУКТУРНЫЙ, а не визуальный, и это поправка к первой редакции.
   Там он получал собственную сетку — и становился единственной ячейкой родительской,
   то есть содержание секции сжималось в одну колонку из двух. Раскладка рассыпалась
   молча: теги сбалансированы, текст на месте, видно только на скриншоте.
   `display: contents` отдаёт ячейки родителя детям обёртки, и сетка остаётся там, где
   её написала модель, — на `.fartux-row`. Визуальное различие форм несут САМИ формы
   (`.fartux-note` с линейкой, `figure.fartux-band`), а не обёртка. */
.fartux-split > .fartux-shape__inner, .fartux-deck > .fartux-shape__inner, .fartux-steps > .fartux-shape__inner,
.fartux-panel > .fartux-shape__inner, .fartux-disclose > .fartux-shape__inner,
.fartux-prose > .fartux-shape__inner, .fartux-wide > .fartux-shape__inner, .fartux-band > .fartux-shape__inner,
.fartux-note > .fartux-shape__inner, .fartux-brief > .fartux-shape__inner { display: contents; }
.fartux-note { border-inline-start: 3px solid var(--fartux-accent, currentColor); padding-inline-start: 1rem; }
.fartux-prose > .fartux-media { max-width: 100%; }

/* Обвязка (sitegen/layout_chrome.py). */
.fartux-foot__grid { display: grid; gap: var(--fartux-gap, 1.25rem);
  grid-template-columns: repeat(var(--fartux-foot-cols, 2), minmax(0, 1fr)); }
.fartux-foot__grid[data-cols="3"] { --fartux-foot-cols: 3; }
.fartux-foot__grid[data-cols="4"] { --fartux-foot-cols: 4; }
@media (max-width: 720px) { .fartux-foot__grid { --fartux-foot-cols: 2; } }
/* Список внутри колонки обязан стать столбиком, и селектор здесь длиннее не от лени.
   `beautiful_site_shell.css` держит `body.fartux-site .fartux-footer-nav__list { display: flex
   !important }` — специфичность 0-2-1. Правило `.fartux-foot__grid .fartux-footer-nav__list`
   (0-2-0) ему проигрывает даже со своим `!important`, и колонки выходили по 2x2 вместо
   столбиков. Поймано скриншотом: разметка была верной, рендер — нет. */
.fartux-foot__col { min-width: 0; }
body.fartux-site .fartux-foot__grid .fartux-footer-nav__list {
  display: block !important; margin: 0; padding: 0; list-style: none; }
body.fartux-site .fartux-foot__grid .fartux-footer-nav__list > li {
  display: block !important; flex: none; margin: 0 0 .5rem; }
.fartux-toc-wrap, .fartux-toc-aside, .fartux-toc-box { display: block; margin: 0 0 var(--fartux-gap, 1.25rem); }
figure.fartux-hero { margin-inline: 0; }

/* Locale switcher — top of fartux-site drawer */
body.fartux-site .fartux-site-drawer__panel .fartux-lang-switch {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	flex-shrink: 0;
}
body.fartux-site .fartux-lang-switch__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.95);
	text-decoration: none;
	padding: 6px 10px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	white-space: nowrap;
	line-height: 1.15;
}
body.fartux-site .fartux-lang-switch__link:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}
body.fartux-site .fartux-lang-switch__link.is-active {
	background: rgba(255, 179, 0, 0.22);
	border-color: rgba(255, 179, 0, 0.65);
	color: #fff;
}

/* Override main.css: keep copyright below logo+nav, not beside them */
body.fartux-site .fartux-site-footer__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(16px, 3vw, 24px);
  align-items: stretch;
}
body.fartux-site .fartux-footer-nav__list > li {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
@media (max-width: 639px) {
  body.fartux-site .fartux-footer-nav__list > li {
    flex-basis: auto !important;
  }
}

/* Prevent horizontal document scroll (drawer 100vw + wide tables) */
html {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: #050505;
}
@supports not (overflow: clip) {
  html {
    overflow-x: hidden;
  }
}
body.fartux-site {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
  box-sizing: border-box;
}
@supports not (overflow: clip) {
  body.fartux-site {
    overflow-x: hidden !important;
  }
}
/* Closed drawer must not expand document scrollWidth via translateX(100%) */
body.fartux-site .fartux-site-drawer,
.fartux-site-drawer {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
  contain: paint;
}
body.fartux-site .fartux-site-main,
body.fartux-site .fartux-article {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Wide data tables scroll inside their box instead of the page */
body.fartux-site .fartux-table,
body.fartux-site table.fartux-table {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.fartux-site .fartux-table thead,
body.fartux-site .fartux-table tbody,
body.fartux-site .fartux-table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* Header APK/download CTA — accent pill beside registration.
   Use a.fartux-site-btn.fartux-site-btn--apk so we beat body.fartux-site a.fartux-site-btn in main.css. */
body.fartux-site a.fartux-site-btn.fartux-site-btn--apk,
body.fartux-site .fartux-site-drawer__cta.fartux-site-drawer__cta--apk {
  border-color: color-mix(in srgb, var(--fartux-accent, #ffb300) 55%, transparent);
  color: var(--fartux-on-accent-2, #1a0f08);
  background: linear-gradient(
    135deg,
    var(--fartux-accent, #ffb300),
    var(--fartux-accent-2, #e6a200)
  );
  box-shadow: 0 0 20px color-mix(in srgb, var(--fartux-accent, #ffb300) 24%, transparent);
}

body.fartux-site a.fartux-site-btn.fartux-site-btn--apk:hover,
body.fartux-site a.fartux-site-btn.fartux-site-btn--apk:focus-visible,
body.fartux-site .fartux-site-drawer__cta.fartux-site-drawer__cta--apk:hover,
body.fartux-site .fartux-site-drawer__cta.fartux-site-drawer__cta--apk:focus-visible {
  color: var(--fartux-on-accent-2, #1a0f08);
  background: linear-gradient(
    135deg,
    var(--fartux-accent, #ffb300),
    var(--fartux-accent-2, #e6a200)
  );
  filter: brightness(1.05);
}

body.fartux-site .fartux-site-header__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 6px;
}

@media (min-width: 1024px) {
  /* APK/download CTA is mobile+tablet only; desktop keeps registration only. */
  body.fartux-site .fartux-site-btn--apk,
  body.fartux-site .fartux-site-drawer__cta--apk {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body.fartux-site .fartux-site-header {
    overflow-x: clip;
  }

  body.fartux-site .fartux-site-header__inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    padding: 8px 6px;
    box-sizing: border-box;
  }

  body.fartux-site .fartux-site-header .fartux-site-brand {
    flex: 0 1 24%;
    min-width: 0;
    max-width: 24%;
  }

  body.fartux-site .fartux-site-header .fartux-site-brand__logo {
    max-height: 20px;
    max-width: 100%;
    width: auto;
    height: auto;
  }

  body.fartux-site .fartux-site-header__actions {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    max-width: none;
    min-width: 0;
  }

  body.fartux-site .fartux-site-btn,
  body.fartux-site .fartux-site-btn--apk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    padding: 0 5px;
    font-size: clamp(0.54rem, 2.4vw, 0.64rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    flex-shrink: 1;
    min-width: 0;
  }

  body.fartux-site .fartux-site-burger {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
  }

  body.fartux-site .fartux-site-burger__bar {
    width: 14px;
  }
}

body.fartux-site .fartux-site-drawer__cta--apk {
  margin-top: 8px;
}

/* Drawer CTA fit — avoid clipping long register/download labels */
body.fartux-site a.fartux-site-drawer__cta,
body.fartux-site .fartux-site-drawer__cta {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.15;
}