/**
 * Layout Betano — tokens KDS + grid system (main.C6skmmqm.css)
 * Complementa LayoutDesktop.BBnDPOlZ.css (chunk lazy-load do shell desktop).
 * Mobile: mesmo arquivo — breakpoints via @media (não existe LayoutMobile.css).
 */

:root,
[data-kds-theme="retro"],
[data-kds-mode="retro"] [data-kds-theme="retro"],
[data-kds-theme="always-dark"] {
    --kds-global-color-black: #090915;
    --kds-global-color-stone: #0e1320;
    --kds-global-color-slate: #1a202d;
    --kds-global-color-off-black-10: #151923;
    --kds-global-color-off-black-15: #212536;
    --kds-global-color-off-black-20: #2a3046;
    --kds-global-color-off-black-25: #2d374d;
    --kds-global-color-off-black-30: #343f56;
    --kds-global-color-gray-60: #41506c;
    --kds-global-color-gray-70: #242a3d;

    --kds-sem-color-bg-layout: var(--kds-global-color-black);
    --kds-sem-color-bg-dialog: var(--kds-global-color-slate);
    --kds-sem-color-bg-container-lowest-default: var(--kds-global-color-off-black-15);
    --kds-sem-color-bg-skeleton-start: var(--kds-global-color-off-black-20);
    --kds-sem-color-border-dialog: var(--kds-global-color-off-black-30);
    --kds-sem-color-border-gray-subtle: var(--kds-global-color-off-black-25);
    --kds-sem-typography-font-weight-bold-plus: 700;
    --kds-sem-typography-font-weight-medium-plus: 600;
    --kds-sem-typography-font-weight-regular-plus: 400;
}

/* Grid layout — extraído de main.C6skmmqm.css (Betano sports/shell) */
.grid__row {
    display: flex;
}

.grid__column--fixed {
    flex: 0 0 auto;
}

.grid__column--fluid {
    flex: 1;
    overflow: hidden;
}

.grid__column--full {
    flex: 0 0 100%;
}

.grid__column--main {
    height: 100%;
}

.grid__column__small {
    width: 0;
}

.grid__column__medium {
    width: 0;
}

.grid__column__large {
    width: 0;
}

.grid__column__main-content {
    background-color: var(--kds-sem-color-bg-layout);
}

@media screen and (min-width: 825px) {
    .grid__column__small {
        width: 256px;
    }

    .grid__column__medium {
        width: 320px;
    }

    .grid__column__large {
        width: 320px;
    }
}

@media screen and (min-width: 1281px) {
    .grid__column__large {
        width: 320px;
    }
}

@media screen and (min-width: 1600px) {
    .grid__column__large {
        width: 480px;
    }

    .grid__column__large--expanded {
        width: 640px;
    }
}

.grid__column__large--expanded {
    width: 480px;
}

/* Utilitários usados no HTML mobile Betano/7Games */
.tw-mb-l {
    margin-bottom: 16px;
}

/* Bridge: classes do projeto → grid Betano */
body.casino-layout-7g {
    background-color: var(--kds-sem-color-bg-layout);
    color: #fff;
}

body.casino-layout-7g .layout-module-scss-module__95db7a__shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    background-color: var(--kds-sem-color-bg-layout);
}

body.casino-layout-7g .casino-side-bar {
    flex: 0 0 auto;
}

body.casino-layout-7g .layout-module-scss-module__95db7a__main,
body.casino-layout-7g .page-module-scss-module__qnDekq__main,
body.casino-layout-7g .casino-main-content {
    background-color: var(--kds-sem-color-bg-layout);
}

body.casino-layout-7g .sidebar-wrapper {
    display: block;
}

/* Mobile: sidebar some, conteúdo ocupa 100% — mesmo CSS, regra responsiva */
@media (max-width: 900px) {
    body.casino-layout-7g .layout-module-scss-module__95db7a__shell {
        display: block;
    }

    body.casino-layout-7g .grid__column__small,
    body.casino-layout-7g .grid__column__medium,
    body.casino-layout-7g .grid__column__large {
        width: 0;
        display: none;
    }

    body.casino-layout-7g .grid__column--fluid,
    body.casino-layout-7g .grid__column__main-content {
        width: 100%;
        flex: 1 1 100%;
    }
}