/* BetZap — Sportsbook em iframe
   A página ocupa exatamente a área útil da viewport (abaixo do header e à
   direita do menu), sem rolagem dupla e sem depender de 100dvh. */

/* Trava de rolagem enquanto o sportsbook está montado.
   A regra com :has() libera sozinha quando o painel sai do DOM, mesmo que o
   JS não rode — sem ela, uma classe presa no <html> matava o scroll do site. */
html.sbx-lock,
html.sbx-lock body,
html:has(#sbx-page),
html:has(#sbx-page) body {
  overflow: hidden !important;
  height: 100%;
}

.sbx-page {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 216px;          /* sobrescrito por JS com --side real */
  top: 78px;            /* sobrescrito por JS com a altura real do header */
  height: calc(100dvh - 78px);
  z-index: 14;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  background: #061310;
  font-family: Montserrat, system-ui, sans-serif;
}

/* ---------- modo imersivo: sem menu lateral no sportsbook ----------
   betzap-layout-fixed-v2.css força `body:not(.admin) #app > aside.side
   { display:flex !important }` em telas ≥1100px. Para vencer essa regra a
   especificidade precisa ser maior (dois IDs), e o JS também marca inline. */
html:has(#sbx-page) body #app > aside.side,
html.sbx-lock body #app > aside.side,
html:has(#sbx-page) .side,
html.sbx-lock .side {
  display: none !important;
}

html:has(#sbx-page) body #app > .content,
html.sbx-lock body #app > .content,
html:has(#sbx-page) .content,
html.sbx-lock .content {
  margin-left: 0 !important;
  padding: 0 !important;
}

/* ---------- barra superior enxuta (somente controles) ---------- */
.sbx-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  background: transparent;
}

.sbx-bar-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #00dda0;
  white-space: nowrap;
}

.sbx-bar-title::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00dda0;
  box-shadow: 0 0 8px #00dda0;
}

.sbx-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.sbx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid #1e4133;
  border-radius: 7px;
  background: #0c2018;
  color: #cfe6da;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.sbx-btn:hover {
  border-color: #2f5a45;
  color: #fff;
  background: #10281e;
}

.sbx-btn.primary {
  border-color: transparent;
  background: #00dda0;
  color: #04140e;
}

.sbx-btn.primary:hover {
  filter: brightness(1.07);
  background: #00dda0;
}

.sbx-btn[disabled] {
  opacity: .55;
  cursor: default;
}

/* ---------- alerta de sessão ---------- */
.sbx-warn {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 12px;
  border-bottom: 1px solid #6b5a1f;
  background: #221d09;
  color: #e8d896;
  font-size: 11px;
  line-height: 1.4;
}

.sbx-warn[hidden] {
  display: none;
}

/* ---------- palco do iframe ---------- */
.sbx-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #061310;
  overflow: hidden;
}

/* o palco carrega .game-frame-shell (evita re-render do heartbeat),
   então neutraliza a altura fixa definida em game-detail.css */
.sbx-stage.game-frame-shell {
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  background: #061310 !important;
}

.sbx-stage.game-frame-shell iframe {
  width: 100%;
  height: 100%;
}

.sbx-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #061310;
}

.sbx-stage:fullscreen {
  width: 100vw;
  height: 100vh;
  background: #000;
}

.sbx-placeholder,
.sbx-msg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px;
  text-align: center;
  color: #a8c4b6;
  font-size: 13px;
  line-height: 1.6;
}

.sbx-msg strong {
  color: #fff;
  font-size: 15px;
}

.sbx-msg .sbx-btn {
  height: 38px;
  padding: 0 18px;
  font-size: 12px;
}

.sbx-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #1d3a2d;
  border-top-color: #00dda0;
  animation: sbx-spin .8s linear infinite;
}

@keyframes sbx-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 720px) {
  .sbx-page {
    left: 0;
  }

  .sbx-bar {
    height: 36px;
    padding: 0 8px;
  }

  .sbx-btn {
    height: 26px;
    padding: 0 9px;
    font-size: 10.5px;
  }
}