/* Responsivo — celular/tablet ocupa 100% da tela */
:root {
    --shell-max: 100%;
    --shell-gutter: clamp(6px, 2vw, 12px);
    --shell-footer-h: calc(76px + env(safe-area-inset-bottom, 0px));
}

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    min-width: 0;
    width: 100%;
}

img,
video,
iframe,
svg {
    max-width: 100%;
    height: auto;
}

/* Blocos — largura total */
body.home-ref .ref-header,
body.home-ref .ref-slider-card,
body.home-ref .ref-ticker,
body.home-ref .ref-auth-split,
body.home-ref .ref-jackpot,
body.home-ref .ref-categories-bar,
body.home-ref .ref-filters,
body.home-ref .busca-container,
body.home-ref .home-ref-games,
body.home-ref .aovivo-resultados,
body.home-ref .footer,
body.home-ref .footer-line,
body.home-ref .footer-text,
body.home-ref .footer-centered-img,
body.home-ref .footer-bottom {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

body.home-ref .ref-header {
    padding-left: var(--shell-gutter);
    padding-right: var(--shell-gutter);
}

body.home-ref .ref-slider-card {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 1024px) {
    body.home-ref .ref-slider-card {
        margin: 0 !important;
        border-radius: 0 !important;
    }

    body.home-ref .ref-ticker {
        margin: 8px 0 !important;
        border-radius: 0;
    }

    body.home-ref .ref-jackpot {
        margin: 10px 0 0 !important;
        border-radius: 0;
    }

    body.home-ref .ref-categories-bar {
        margin: 1px 0 0 !important;
        padding-left: var(--shell-gutter);
        padding-right: var(--shell-gutter);
    }

    body.home-ref .ref-filters {
        margin: 10px 0 0 !important;
    }

    body.home-ref .home-ref-games {
        padding-left: var(--shell-gutter) !important;
        padding-right: var(--shell-gutter) !important;
    }

    body.home-ref .aovivo-resultados {
        margin: 16px 0 0 !important;
    }
}

body.home-ref .ref-ticker,
body.home-ref .ref-jackpot,
body.home-ref .ref-categories-bar,
body.home-ref .ref-filters,
body.home-ref .busca-container,
body.home-ref .home-ref-games,
body.home-ref .aovivo-resultados {
    padding-left: var(--shell-gutter);
    padding-right: var(--shell-gutter);
}

/* Rodapé fixo — largura total (celular + tablet) */
@media (max-width: 1366px) {
    .layout-footer {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        transform: none;
        z-index: 9999;
        background: #010401;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
        justify-content: space-around;
        align-items: flex-end;
        box-sizing: border-box;
    }

    .layout-footer-item {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.55);
        font-size: 11px;
        font-weight: 600;
        padding: 0;
        font-family: Arial, sans-serif;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .layout-footer-icon {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        font-size: 20px;
        color: rgba(255, 255, 255, 0.7);
        transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }

    .layout-footer-label {
        line-height: 1;
        white-space: nowrap;
    }

    .layout-footer-item.active {
        color: #288a00;
    }

    .layout-footer-item.active .layout-footer-icon {
        background: #288a00;
        color: #000000;
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    }

    .layout-footer-item:not(.active):active .layout-footer-icon {
        background: rgba(255, 255, 255, 0.1);
    }

    body.home-ref,
    body.pagina-ofertas,
    body.pagina-extrato,
    body.pagina-perfil,
    body.pagina-afiliado {
        padding-bottom: var(--shell-footer-h);
    }

    body:not(.pagina-ofertas):not(.home-ref) {
        padding-bottom: var(--shell-footer-h);
    }
}

@media (min-width: 1367px) {
    .layout-footer {
        display: none !important;
    }

    body.home-ref {
        padding-bottom: 24px;
    }
}

/* Ofertas, afiliado — largura total */
body.pagina-ofertas .ofertas-topbar,
body.pagina-ofertas .ofertas-tabs-scroll,
body.pagina-ofertas .ofertas-page,
body.pagina-afiliado .container-conteudo {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

body.pagina-afiliado .top-bar,
body.pagina-afiliado .top-bar .container {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 1024px) {
    body.pagina-afiliado {
        padding-top: var(--dash-topbar-h, 68px);
        padding-bottom: var(--shell-footer-h);
    }
}

/* Extrato / perfil — tela cheia no mobile */
body.pagina-extrato .painel-extrato,
body.pagina-perfil .painel-perfil {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    transform: none;
}

/* Modais — largura total no mobile/tablet */
@media (max-width: 1024px) {
    .modal-deposito,
    .modal-retirada,
    .modal-suporte {
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        transform: none;
    }

    .modal-auth-wrap,
    .modal:not(.modal-deposito):not(.modal-retirada):not(.modal-suporte) {
        width: calc(100% - 16px);
        max-width: none;
        margin: 0 auto;
    }
}

/* Resultados ao vivo */
.aovivo-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 var(--shell-gutter);
    box-sizing: border-box;
}

.aovivo-resultados {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding-left: var(--shell-gutter);
    padding-right: var(--shell-gutter);
}

/* Footer interno */
.footer .container-footer,
.footer-text,
.footer-bottom,
.footer-line,
.footer-centered-img {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Celular pequeno */
@media (max-width: 380px) {
    :root {
        --shell-gutter: 4px;
    }

    body.home-ref .home-ref-games .jogos-container {
        gap: 6px !important;
    }

    body.home-ref .ref-auth-login,
    body.home-ref .ref-auth-register {
        font-size: 14px;
    }

    .layout-footer-item {
        font-size: 10px !important;
    }

    .layout-footer-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 18px !important;
    }
}

/* Desktop grande — conteúdo centralizado com max 1000px (opcional) */
@media (min-width: 1025px) {
    :root {
        --shell-max: min(1000px, 100%);
    }

    body.home-ref .ref-header,
    body.home-ref .ref-slider-card,
    body.home-ref .ref-ticker,
    body.home-ref .ref-auth-split,
    body.home-ref .ref-jackpot,
    body.home-ref .ref-categories-bar,
    body.home-ref .ref-filters,
    body.home-ref .busca-container,
    body.home-ref .home-ref-games,
    body.home-ref .aovivo-resultados,
    body.home-ref .footer,
    body.home-ref .footer-line,
    body.home-ref .footer-text,
    body.home-ref .footer-centered-img,
    body.home-ref .footer-bottom {
        max-width: var(--shell-max);
        margin-left: auto;
        margin-right: auto;
    }

    .footer .container-footer,
    .footer-text,
    .footer-bottom {
        max-width: var(--shell-max);
        margin-left: auto;
        margin-right: auto;
    }
}