/* Evita o flash de "${...}" (template Vue cru) antes do JS montar a interface. Vue remove este atributo assim que compila o elemento. */ [v-cloak] { display: none !important; } /* Restaura a rolagem interna da lista de jogos no desktop (>=992px). O container so tinha max-height, sem overflow-y, entao o conteudo que excedia a altura era cortado pelo overflow:hidden do .app (usado pro border-radius do card) e ficava inacessivel. */ .page-aposta .overflow-jogos { overflow-y: auto; overflow-x: hidden; } .header-mobile .mobile-brand { display: inline-flex; align-items: center; max-width: 100%; } /* Cupom mobile como bottom sheet fixo (abre com a classe .show ao clicar em "Ver cupom" em header.twig). As regras originais (site.css) exigiam um ancestral ".responsive" no , mas essa classe nunca existe de fato — o atributo é renderizado como "pre-loadingresponsive" (fusão de texto sem espaço, bug conhecido e mantido de propósito em outra parte do layout.twig). Por isso a classe .show era aplicada corretamente pelo clique, mas nenhuma regra de posicionamento batia e o cupom nunca aparecia. Reimplementado aqui com um seletor que não depende de ".responsive", sem alterar cores/identidade visual (já herdadas de .bilhete/.ticket-head existentes). */ @media (max-width: 768px) { .page-aposta .bilhete { position: fixed; top: 100%; left: 0; right: 0; width: 100%; height: 100vh; z-index: 999; overflow: auto; border-radius: 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px); transition: top 0.3s ease-in-out; } .page-aposta .bilhete.show { top: 0; } .page-aposta .bilhete .ticket-head { position: sticky; top: 0; width: 100%; z-index: 1; } .page-aposta .bilhete .bilhete-close { position: absolute; top: 0; right: 0; width: 27px; padding: 6px 0; font-size: 20px; text-align: center; cursor: pointer; } } .header-mobile .mobile-brand img { max-width: 140px; height: auto; } .header-mobile .btn-link { padding: 8px 10px; } .header-mobile-app .btn-link { white-space: nowrap; } .bets-reference-page .dateEventAndSearch .searchEvent input { width: 100%; } /* Remove o banner institucional (logo + "Plataforma de apostas" + "TopBets") da tela de apostar no mobile. Ele deveria já ficar escondido (o header.twig usa "d-none d-md-block" e o CSS de bets-reference-page também esconde .site-topbar), mas um bug de fusao de classes no Twig gruda a palavra seguinte ao ".site-topbar" (vira "site-topbard-none"), entao nenhuma das duas regras bate. Escondido aqui via seletor de atributo, que funciona mesmo com a classe corrompida, sem mexer no template. */ @media (max-width: 768px) { body.bets-reference-page header[class*="site-topbar"] { display: none !important; } } @media (max-width: 768px) { .header-mobile { margin-bottom: 10px !important; } .header-mobile .container-fluid { padding-left: 12px; padding-right: 12px; } .header-mobile .row { margin-left: -6px; margin-right: -6px; } .header-mobile [class*="col-"], .header-mobile .col { padding-left: 6px; padding-right: 6px; } .header-mobile .row-aposta .container { width: 100%; max-width: none; padding-left: 12px; padding-right: 12px; } .header-mobile .row-aposta .row { display: flex; flex-wrap: wrap; gap: 8px; } .header-mobile .row-aposta .col, .header-mobile .row-aposta .col-auto { padding-left: 0; padding-right: 0; } .header-mobile .row-aposta .col { flex: 1 1 calc(50% - 4px); } .header-mobile .row-aposta .col-auto { flex: 1 1 100%; } .header-mobile .row-aposta .btn { width: 100%; height: 38px; } .bets-reference-page .page-aposta > .col, .bets-reference-page .page-aposta > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } .bets-reference-page .campeonatos { width: 100% !important; margin-bottom: 12px; } .bets-reference-page .sidebar-logo img { width: 150px; } .bets-reference-page .sidebar-links { padding: 0 8px 10px; } .bets-reference-page .campeonatos .title { margin: 0 8px 10px !important; } .bets-reference-page .campeonatos ul { padding: 0 4px 0 8px !important; } .bets-reference-page .dateEventAndSearch { padding: 0 0 10px !important; } .bets-reference-page .dateEvent h1 { font-size: 28px !important; line-height: 1.05; } .bets-reference-page .dateEvent span { font-size: 14px !important; } .bets-reference-page .searchEvent { width: 100% !important; } .bets-reference-page .bets-reference-mobile-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; } .bets-reference-page .bets-reference-mobile-actions a { font-size: 12px; padding: 0 8px; } .bets-reference-page .cardItem { grid-template-columns: 52px 1fr !important; grid-template-rows: auto auto auto !important; gap: 8px !important; padding: 10px 8px !important; } .bets-reference-page .dateAndHour { grid-row: 1 / span 3 !important; } .bets-reference-page .teams { grid-column: 2; } .bets-reference-page .outcomesMain { grid-column: 1 / -1 !important; } .bets-reference-page .totalOutcomes { grid-column: 1 / -1 !important; justify-content: flex-end !important; } .bets-reference-page .boxOdds { width: 100% !important; } .bets-reference-page .boxOdds .odd { min-height: 42px; } .bets-reference-page .logoTeam { width: 24px !important; height: 24px !important; } .bets-reference-page .nameTeam { font-size: 12px !important; } .bets-reference-page .eventlist-country { height: auto !important; min-height: 32px; padding: 6px 8px !important; } .bets-reference-page .eventlist-country .name { white-space: normal !important; line-height: 1.2; } .bets-reference-page .bilhete { margin-top: 12px !important; } } /* Compliance: aviso de idade mínima (rodapé + cupom) */ .compliance-notice { font-size: 12px; color: #999; padding: 6px 0; } .compliance-notice-inline { display: block; color: #999; font-size: 11px; margin-bottom: 6px; } /* Seletor de campeonatos customizado (substitui o