/* =====================================================================
   TOPO MOBILE (estilo Brabet) + DUAS LOGOS + MENU LATERAL EMBAIXO DO TOPO
   - Desktop: mostra a logo PC (img.logo-pc)
   - Mobile (<= 768px): mostra a logo Mobile (img.logo-mobile), topo em
     uma linha só: menu + logo + carteira + avatar
   - Até 1024px: o menu lateral abre ABAIXO do topo (o topo continua visível)
   Medidas tiradas do pageHeader da Brabet (1rem = ~18,2px lá).
   Carregue DEPOIS de css/estilos.php e dashboard/css/layout-brabet.php
   ===================================================================== */

:root { --top-h: 66px; }

/* Desktop: só a logo PC */
.top-logo-link .logo-mobile { display: none; }

/* ---------- Tablet/mobile: gaveta do menu abaixo do topo ---------- */
@media (max-width: 1024px) {
    header.top-bar {
        position: sticky;
        top: 0;
        z-index: 10001;               /* acima do menu e da máscara */
    }
    .side-menu,
    body.side-collapsed .side-menu {
        top: var(--top-h);
        bottom: 0;
        height: auto;
        max-height: calc(100vh - var(--top-h));
        max-height: calc(100dvh - var(--top-h));
        z-index: 10000;
        /* rolagem do menu no celular (igual ao Brabet) */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        /* folga embaixo p/ o ultimo item nao ficar atras da barra do navegador */
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    }
    .side-cards .side-card { flex: 0 0 auto; }   /* Bonus VIP nunca encolhe/some */
    .side-group, .side-footer { flex: 0 0 auto; }
    .side-overlay {
        inset: auto;
        top: var(--top-h);
        left: 0; right: 0; bottom: 0;
    }
}

@media (max-width: 768px) {

    :root { --top-h: 80px; }

    /* barra de 80px, uma linha só */
    header.top-bar {
        height: var(--top-h);
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding: 0 10px 0 8px;
        background: #161f2c;
        box-sizing: border-box;
    }

    /* lado esquerdo: hambúrguer + logo */
    header.top-bar .top-left {
        display: flex;
        align-items: center;
        align-self: center;
        flex: 0 0 auto;
        min-width: 0;
    }
    header.top-bar .top-logo {
        width: auto;
        height: var(--top-h);
        padding-left: 0;
        gap: 6px;
        align-self: center;
    }
    header.top-bar .top-logo::before { display: none; }   /* sem o recorte do desktop */
    header.top-bar .top-menu { font-size: 28px; padding: 4px; }
    header.top-bar .top-logo-link { height: 100%; align-items: center; }

    /* troca de logo */
    .top-logo-link .logo-pc { display: none; }
    .top-logo-link .logo-mobile {
        display: block;
        height: auto;
        max-height: 70px;
        width: auto;
        max-width: 102px;
        object-fit: contain;
    }

    /* abas Cassino/Esportes saem do topo (na home já existem as abas de categoria) */
    header.top-bar .top-tabs { display: none; }

    /* lado direito */
    header.top-bar .top-right {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
        gap: 8px;
    }
    header.top-bar .top-icon { display: none; }

    /* visitante */
    header.top-bar .top-btn { padding: 11px 14px; font-size: 14px; white-space: nowrap; }

    /* carteira ocupa o espaço que sobra */
    header.top-bar .top-wallet {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: 212px;
        height: 45px;
        padding: 4px 4px 4px 9px;
        font-size: 17px;
        gap: 3px;
    }
    header.top-bar .top-wallet-val { flex: 1 1 auto; min-width: 0; }
    header.top-bar .top-wallet-refresh { width: 26px; height: 36px; }
    header.top-bar .top-wallet-add { width: 36px; height: 36px; }

    /* avatar + setinha (sem nome/ID) */
    header.top-bar .top-user { flex: 0 0 auto; }
    header.top-bar .top-user-box { min-width: 0; height: 46px; gap: 4px; padding: 1px 8px 1px 1px; }
    header.top-bar .top-user-box .top-avatar { width: 44px; height: 44px; }
    header.top-bar .top-user-box .top-avatar-vip-wrap { width: 24px; right: -8px; bottom: -7px; }
    header.top-bar .top-user-box .top-avatar-vip-txt { font-size: 8px; }
    header.top-bar .top-user-info { display: none; }
    header.top-bar .top-user-arrow { display: block; margin-left: 0; font-size: 11px; }

    /* menu do usuário abre embaixo da barra */
    .user-drop {
        position: fixed;
        top: calc(var(--top-h) + 4px);
        left: auto;
        right: 8px;                       /* encostado no canto direito, igual Brabet */
        width: 282px;
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - var(--top-h) - var(--bn-h, 64px) - 16px);
        max-height: calc(100dvh - var(--top-h) - var(--bn-h, 64px) - 16px);
        overflow-y: auto;
    }
}

@media (max-width: 380px) {
    header.top-bar { gap: 4px; padding: 0 6px 0 4px; }
    .top-logo-link .logo-mobile { max-width: 78px; max-height: 60px; }
    header.top-bar .top-wallet { font-size: 14px; padding-left: 6px; }
    header.top-bar .top-wallet-add { width: 32px; height: 32px; }
    header.top-bar .top-btn { padding: 9px 10px; font-size: 12px; }
}

/* ---------- Carteira: valor do saldo igual ao Brabet ----------
   A classe .saldo (estilos.php) forca font-size:3vw e margin-bottom:5px,
   o que deixava o valor pequeno e desalinhado. Aqui anulamos isso. */
.top-wallet .top-wallet-val.saldo {
    font-size: inherit;
    font-weight: 600;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-align: left;          /* "R$ 0" junto, como no Brabet */
    color: #fff;
}
.top-wallet { justify-content: flex-start; }

/* =====================================================================
   NAVBAR INFERIOR MOBILE (estilo Brabet) - includes/navbar-mobile.php
   5 itens iguais: icone 34px + legenda; ativo = icone azul claro + legenda branca
   ===================================================================== */
.bnav { display: none; }

@media (max-width: 768px) {
    :root {
        --bn-h: 64px;
        --bn-bg: #161f2c;
        --bn-icon: #4a586f;        /* icone inativo */
        --bn-text: #7a879d;        /* legenda inativa */
        --bn-active: #adc3f0;      /* icone ativo */
    }

    /* espaço no fim da página p/ o rodapé não ficar atrás da barra */
    body { padding-bottom: calc(var(--bn-h) + env(safe-area-inset-bottom, 0px)); }

    .bnav {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 9990;             /* abaixo do menu lateral (10000) e da máscara */
        height: calc(var(--bn-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
        background: var(--bn-bg);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .35);
    }
    .bnav-item {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        padding: 0;
        border: none;
        background: none;
        color: var(--bn-text);
        text-decoration: none;
        font-family: Montserrat, Arial, sans-serif;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }
    .bnav-icon {
        position: relative;
        z-index: 1;
        display: block;
        width: 34px;
        height: 34px;
        background-color: var(--bn-icon);
        -webkit-mask: var(--bn-ico) center / contain no-repeat;
                mask: var(--bn-ico) center / contain no-repeat;
        transition: background-color .2s;
    }
    .bnav-label {
        position: relative;
        z-index: 1;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
    }
    /* ativo */
    .bnav-item.active { color: #fff; }
    .bnav-item.active .bnav-icon { background-color: var(--bn-active); }
    .bnav-item.active .bnav-label { font-weight: 700; }
    .bnav-item.active::before {    /* brilho suave atras do item ativo */
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 35%, rgba(173, 195, 240, .16), rgba(173, 195, 240, 0) 70%);
        pointer-events: none;
    }
    .bnav-item:active .bnav-icon { transform: scale(.92); }
}

/* Bolinha de mensagens do Inbox na barra de baixo */
.bnav-badge {
    position: absolute;
    top: 6px;
    left: calc(50% + 6px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #f5224f;
    color: #fff;
    font: 700 10px/16px Montserrat, Arial, sans-serif;
    text-align: center;
    z-index: 2;
}