/* =====================================================
   1. VARIÁVEIS DO DARK ORANGE
      --seven-primary / --seven-secondary vêm do banco
   ===================================================== */
:root {
  --seven-primary:    #FF6B35;
  --seven-secondary:  #1D2A55;
  --seven-gradient:   linear-gradient(135deg, #FF6B35, #1D2A55);

  /* Identidade escura do Theme #27 — nunca mudar */
  --do-bg:        #0e1628;
  --do-bg-deep:   #080f1e;
  --do-surface:   #1a2540;
  --do-surface-2: #1d2a55;
  --do-line:      #2d3e6a;
  --do-text-muted: rgba(136, 153, 187, 0.85);
  --do-active:     #FF6B35;
}

/* =====================================================
   2. FUNDO GLOBAL
   ===================================================== */
html,
body {
  background: linear-gradient(180deg, var(--do-bg) 0%, var(--do-bg-deep) 100%) !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%,
      color-mix(in srgb, var(--seven-primary) 6%, transparent), transparent 26%),
    radial-gradient(circle at 78% 62%,
      color-mix(in srgb, var(--seven-secondary) 8%, transparent), transparent 30%);
  z-index: 0;
}

ion-app { background: transparent !important; }
.main-content { --background: transparent !important; }

/* =====================================================
   3. HEADER / TOOLBAR
   ===================================================== */
ion-header ion-toolbar {
  --background: linear-gradient(180deg,
    color-mix(in srgb, var(--do-surface-2) 95%, transparent),
    color-mix(in srgb, var(--do-bg) 90%, transparent)
  ) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--do-line);
}

/* Prevent page title from being clipped inside the toolbar. */
ion-header ion-toolbar ion-title,
ion-header ion-toolbar .toolbar-title {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  max-width: none !important;
  font-size: 1rem !important;
}

/* =====================================================
   4. OBJETIVO 1 — REMOVER MARQUEE COMPLETAMENTE
      Seletor: .marquee-wrapper (classe Vue exata confirmada)
      Colapso total: display:none remove espaço ocupado
   ===================================================== */
.marquee-wrapper {
  display: none !important;
}

/* =====================================================
   5. ATALHOS DA HOME — ocultar o container nativo único
      O componente Layout2:DarkOrange gera:
        .scroll-box.layout27 > ul.list-box
      para Depósito, Saque, VIP e Promoção.
   ===================================================== */
.content-box.layout1 > .scroll-box.layout27:has(> .list-box) {
  display: none !important;
}

/* =====================================================
   5.1. PROVIDER RAIL — catálogo navegável
      Mantido entre os banners e a grade. A fonte continua
      sendo o catálogo ativo, sem duplicar provedores no tema.
   ===================================================== */
#stickyElement.wrapper.layout1.segment-c {
  display: block !important;
  position: relative !important;
  width: calc(100% - 20px) !important;
  margin: 12px auto 4px !important;
  padding: 8px !important;
  border: 1px solid color-mix(in srgb, var(--seven-primary) 22%, var(--do-line)) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--do-surface) 88%, transparent) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22) !important;
}

/* =====================================================
   6. BANNERS PRINCIPAIS (swiper)
   ===================================================== */
.swiper-poster {
  height: auto !important;
  aspect-ratio: 2.05 / 1;
  border-radius: 14px !important;
  border: 1px solid var(--do-line);
  box-shadow: 0 14px 36px rgba(0,0,0,0.5);
}

.swiper-poster .poster-img {
  object-fit: cover !important;
  border-radius: 14px !important;
}

/* =====================================================
   6. OBJETIVO 3 — ACTIVITY BAR: só 2 promos lado a lado
      Estrutura real confirmada via DOM inspection (Chrome DevTools):
        .wrapper.layout27 (flex row wrap)
          ion-img.item-image.item-0  ← manter
          ion-img.item-image.item-1  ← manter
          ion-img.item-image.item-2  ← esconder (3º banner)
   ===================================================== */

/* Esconder o 3º banner pequeno */
.wrapper.layout27 .item-image.item-2 {
  display: none !important;
}

/* Os 2 primeiros ocupam 50% cada com gap entre eles */
.wrapper.layout27 .item-image.item-0,
.wrapper.layout27 .item-image.item-1 {
  flex: 0 0 calc(50% - 4px) !important;
  width: calc(50% - 4px) !important;
  max-width: calc(50% - 4px) !important;
}

/* =====================================================
   7. OBJETIVO 2 — PROVIDERS / CATEGORIAS COMPACTAS
      Seletores confirmados:
        .wrapper.segment-c     (container da barra)
        ion-segment            (scroll horizontal)
        ion-segment-button     (cada item)
        .Segment_layout_button (classe interna Vue)
        .segment-button-checked / .Segment_checked (ativo)
   ===================================================== */
.wrapper.segment-c {
  padding-block: 6px !important;
  padding-inline: 0.5rem !important;
  background: var(--do-bg) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

ion-segment {
  gap: 4px !important;
  --background: transparent !important;
}

#stickyElement.wrapper.layout1.segment-c > ion-segment {
  --background: var(--do-bg) !important;
  background: var(--do-bg) !important;
  border-radius: 0 !important;
}

ion-segment {
  --background: transparent !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* 8px alinha Popular à margem natural da página.
     O scrollLeft inicial do Ionic é absorvido pelo tamanho compacto dos cards. */
  padding-inline: 8px !important;
  scroll-padding-inline-start: 8px !important;
}

ion-segment::-webkit-scrollbar { display: none; }

/* Apenas estrutura/click/scroll: sem superfície visual própria. */
ion-segment-button {
  flex: 0 0 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  box-sizing: border-box !important;
  scroll-snap-align: start;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

ion-segment-button::before,
ion-segment-button::after,
ion-segment-button::part(indicator) {
  content: none !important;
  display: none !important;
}

/* Única superfície visual da rail: card nativo .btn-wall. */
ion-segment-button .btn-wall.layout27 {
  width: 56px !important;
  height: 58px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  box-sizing: border-box !important;
  padding: 5px 3px 4px !important;
  gap: 3px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg, var(--do-surface-2), var(--do-bg)) !important;
  border: 1px solid var(--do-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: hidden !important;
  --color: var(--do-text-muted) !important;
  --color-checked: #ffffff !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
}

ion-segment-button.segment-button-checked .btn-wall.layout27 {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--do-active) 20%, var(--do-surface-2)),
    color-mix(in srgb, var(--do-active) 10%, var(--do-bg))
  ) !important;
  border-color: var(--do-active) !important;
  box-shadow: none !important;
  outline: 0 !important;
  --color: #ffffff !important;
}

ion-segment-button .btn-wall.layout27::before,
ion-segment-button .btn-wall.layout27::after {
  content: none !important;
  display: none !important;
}

ion-segment-button .btn-wall.layout27 img,
ion-segment-button .btn-wall.layout27 ion-img,
ion-segment-button .btn-wall.layout27 .hot-img,
ion-segment-button .btn-wall.layout27 ion-icon {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  font-size: 26px !important;
  object-fit: contain !important;
  filter: none !important;
}

ion-segment-button .btn-wall.layout27 .label {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-size: 0.6875rem !important;
}

/* Indicador da linha sob item ativo — remover o default */
ion-segment-button::part(indicator) {
  display: none !important;
}

/* =================================================
   8. BOTAO FLUTUANTE (xuanfu) — ocultar no DarkOrange mobile
   ================================================= */
.box.xuanfu {
  display: none !important;
}

/* =================================================
   9. ICONE SAQUE — cores CSS (symbol injetado por dark-orange.js)
   ================================================= */
.tab-btn.layout2[tab="withdraw"] .wall.tab-icon {
  color: rgba(255, 255, 255, 0.4) !important;
}

.tab-bar .tab-btn.layout2[tab="withdraw"].active-tab .wall.tab-icon,
ion-tab-bar .tab-btn.layout2[tab="withdraw"][class*="active"] .wall.tab-icon {
  color: var(--seven-primary) !important;
}

/* =================================================
   10. WELCOME / AÇÕES NATIVAS — CSS-only
   ================================================= */
/* O Vue mantém .button-box.layout27 dentro de .content-box.layout27.
   O card perde altura visual, mas nenhum ancestral do botão é removido. */
#game-buoy.content-box.layout1:has(> .content-box.layout27) {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

#game-buoy > .content-box.layout27 {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#game-buoy > .content-box.layout27 > .account.layout27 {
  display: none !important;
}

/* O saldo da Home foi substituído por HeaderBar_assets nativo. */
#game-buoy > .content-box.layout27 > .assets-box.layout27 {
  display: none !important;
}

/* Balance nativo: preservar o click e a animação, ocultando só o saldo duplicado. */
ion-header ion-toolbar > .flex.items-center.height-text-white > span,
ion-header ion-toolbar > .flex.items-center.height-text-white > div {
  display: none !important;
}

ion-header ion-toolbar > .flex.items-center.height-text-white > ion-icon {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin-inline: 4px !important;
}

/* Botões Entrar/Registro nativos no header, ao lado do botão de expandir/menu.
   A boia flutuante original (#game-buoy) fica oculta para não duplicar. */
ion-header ion-toolbar.toolbar {
  position: relative !important;
}

#game-buoy > .content-box.layout27 > .button-box.layout27 {
  display: none !important;
}

.do-header-auth {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-right: 10px !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
  width: fit-content !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Colar os botões no botão de expandir/menu, sem espaço flexível entre eles. */
ion-header ion-toolbar.toolbar ion-buttons.menu-btn {
  margin-left: 0 !important;
  margin-inline-start: 0 !important;
}

/* ── HEADER LOGADO: réplica do header da Jogão (btn-deposit / btn-balance) ── */
.do-header-deposit-box {
  display: flex !important;
  align-items: center !important;
  margin-right: 8px !important;
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 5 !important;
}

.do-header-deposit-box .do-header-deposit {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: 1.5rem !important;
  background: linear-gradient(90deg, #f3bf40, #f19f38) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: opacity 0.15s ease !important;
}

.do-header-deposit-box .do-header-deposit:hover { opacity: 0.9 !important; }

/* Selo PIX: pílula sobreposta ao topo do botão (depositButtonPill da Jogão). */
.do-header-deposit-box .do-pix-mark {
  position: absolute !important;
  right: 10px !important;
  top: -6px !important;
  width: 36px !important;
  height: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border-radius: 1.5rem !important;
  background: #a3dbd4 !important;
  color: #1f1f1f !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  z-index: 10 !important;
}

/* Saldo nativo (assets-box do toolbar) como pílula — escopado para não afetar
   o painel expandido do saldo, que também usa .assets-box. */
ion-header ion-toolbar.toolbar > .assets-box {
  height: 34px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(201, 201, 201, 0.2) !important;
  border: 1px solid var(--seven-primary) !important;
  border-radius: 1.5rem !important;
  padding: 0 14px !important;
  gap: 6px !important;
  margin-right: 14px !important;
  margin-left: 8px !important;
  position: relative !important;
  z-index: 5 !important;
}

ion-header ion-toolbar.toolbar > .assets-box .currency,
ion-header ion-toolbar.toolbar > .assets-box .assets-box-number {
  color: #fff !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Ícone de depósito nativo sai — substituído pelo botão Depositar do header. */
ion-header ion-toolbar.toolbar > .assets-box ion-button.deposit { display: none !important; }

/* Sem sombra preta ao redor dos modais no desktop. */
ion-modal {
  --box-shadow: none !important;
  box-shadow: none !important;
  --backdrop-opacity: 0 !important;
}

ion-backdrop { opacity: 0 !important; }

ion-modal .modal-wrapper,
ion-modal ion-content {
  box-shadow: none !important;
  --box-shadow: none !important;
}

/* Barra inferior sem a borda laranja fina. */
body ion-tab-bar.tab-bar,
body .tab-bar,
body ion-tab-bar.tab-bar.layout2,
body .tab-bar.layout2 {
  border: none !important;
  border-top: none !important;
  border-color: transparent !important;
}

/* ── CARROSSEL DE PROVEDORES: estilo a77 — botão transparente, logo + label ── */
body ion-segment.do-provider-rail-v2 ion-segment-button,
body ion-segment.do-provider-rail-v2 ion-segment-button.md {
  --background: transparent !important;
  --background-checked: transparent !important;
  --color: rgba(255, 255, 255, 0.82) !important;
  --color-checked: var(--seven-primary) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 6px 2px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Conteúdo nativo do botão (.btn-wall) sai; só nossa logo + label. */
body ion-segment.do-provider-rail-v2 ion-segment-button .btn-wall { display: none !important; }

body ion-segment.do-provider-rail-v2 .do-provider-logo {
  width: 48px !important;
  height: 48px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
  opacity: 0.72;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}

body ion-segment.do-provider-rail-v2 .do-provider-monogram { object-fit: contain !important; }

body ion-segment.do-provider-rail-v2 ion-segment-button.segment-button-checked .do-provider-logo,
body ion-segment.do-provider-rail-v2 ion-segment-button:hover .do-provider-logo {
  opacity: 1;
  transform: scale(1.06);
}

body ion-segment.do-provider-rail-v2 .do-provider-name {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  white-space: nowrap !important;
  text-align: center !important;
}

body ion-segment.do-provider-rail-v2 ion-segment-button.segment-button-checked .do-provider-name {
  color: var(--seven-primary) !important;
}

body ion-segment.do-provider-rail-v2 ion-segment-button .segment-button-indicator {
  display: none !important;
}

/* Botão no estilo a77: retângulo arredondado com borda, cores do tema,
   com respiro para não ficar embaixo das setas laterais. */
body #stickyElement ion-segment, body #stickyElement.wrapper.layout1.segment-c > ion-segment { padding-left: 30px !important; padding-right: 30px !important; scroll-padding: 0 30px; }

body ion-segment.do-provider-rail-v2 ion-segment-button,
body ion-segment.do-provider-rail-v2 ion-segment-button.md {
  --background: var(--do-surface-2, #232327) !important;
  --background-checked: color-mix(in srgb, var(--seven-primary) 18%, var(--do-surface-2, #232327)) !important;
  background: var(--do-surface-2, #232327) !important;
  border: 1px solid var(--do-line, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  padding: 8px 4px !important;
  margin: 0 3px !important;
}

body ion-segment.do-provider-rail-v2 ion-segment-button.segment-button-checked {
  border-color: var(--seven-primary) !important;
}

body ion-segment.do-provider-rail-v2 ion-segment-button:hover {
  border-color: color-mix(in srgb, var(--seven-primary) 55%, transparent) !important;
}


/* Mobile: label do provedor sobe para ficar bem posicionado no botão. */
@media (max-width: 768px) {
  body ion-segment.do-provider-rail-v2 ion-segment-button { gap: 2px !important; }
  body ion-segment.do-provider-rail-v2 .do-provider-name {
    margin-top: 0 !important;
    transform: translateY(-4px) !important;
    line-height: 1 !important;
  }
  body ion-segment.do-provider-rail-v2 .do-provider-logo { margin-bottom: -2px; }
}


/* ── Página VIP: nomes dos níveis sem corte ── */
.current-vip-level[data-v-64e19996],
.level-item .level-name,
[class*=vip] .level-name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
}

.level-item { min-width: fit-content !important; }

/* Desktop: rail centralizado quando cabe na tela. */
@media (min-width: 1024px) {
  #stickyElement { display: flex !important; justify-content: center !important; }
  #stickyElement ion-segment { justify-content: center !important; margin: 0 auto !important; }
}

/* Sem sombra em popups/alertas no desktop. */
ion-popover,ion-popover .popover-content,ion-popover ion-content,
ion-alert,ion-dialog,.popover-wrapper,.popover-arrow{box-shadow:none!important;--box-shadow:none!important}

/* Overlays decorativos do toolbar não podem engolir os cliques. */
ion-header .toolbar-bg,
ion-header .toolbar-blur { pointer-events: none !important; }

/* Refresh dentro da pílula do saldo (dispara o refresh nativo do bundle). */
ion-header .assets-box .do-refresh-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  margin-left: 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 6 !important;
}

/* Feedback visual: nosso ícone gira enquanto o refresh acontece. */
@keyframes do-refresh-spin { to { transform: rotate(1turn); } }

ion-header .assets-box .do-refresh-btn.do-spinning svg {
  animation: do-refresh-spin 0.6s linear infinite;
}

ion-header .assets-box .do-refresh-btn svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
  .do-header-deposit-box { margin-right: 6px !important; }
  .do-header-deposit-box .do-header-deposit {
    height: 28px !important;
    font-size: 13px !important;
    padding: 0 12px !important;
  }
  .do-header-deposit-box .do-pix-mark { top: -8px !important; }
  ion-header ion-toolbar.toolbar > .assets-box {
    height: 28px !important;
    padding: 0 10px !important;
    margin-right: 10px !important;
    margin-left: 6px !important;
  }
  ion-header ion-toolbar.toolbar > .assets-box .currency,
  ion-header ion-toolbar.toolbar > .assets-box .assets-box-number { font-size: 0.72rem !important; }
}

.do-header-auth .do-header-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: filter 0.15s ease, transform 0.15s ease !important;
}

.do-header-auth .do-header-btn:active {
  transform: scale(0.97) !important;
}

.do-header-auth .do-header-login {
  background: var(--do-surface-2, #2a2a2e) !important;
  color: var(--do-text, #fff) !important;
  border: 1px solid var(--do-line, rgba(255, 255, 255, 0.14)) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.do-header-auth .do-header-register {
  background: linear-gradient(145deg, var(--seven-primary), color-mix(in srgb, var(--seven-primary) 78%, #000)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--seven-primary) 35%, transparent) !important;
}

.do-header-auth .do-header-btn:hover {
  filter: brightness(1.12) !important;
}

@media (max-width: 768px) {
  .do-header-auth {
    gap: 6px !important;
    margin-right: 8px !important;
    margin-left: 6px !important;
  }

  .do-header-auth .do-header-btn {
    height: 30px !important;
    padding: 0 11px !important;
    font-size: 0.72rem !important;
    border-radius: 9px !important;
  }
}

/* Apenas o badge do Registro no header nativo. */
#game-buoy > .content-box.layout27 > .button-box.layout27 .register-btn-warper > .rewardTag {
  display: none !important;
}

/* Badge visual do formulário de cadastro no modal nativo. */
ion-modal#login-modal .register-form .rewardTag {
  display: none !important;
}

/* Media queries removidas: o posicionamento absolute com top: 50% + translateY(-50%)
   já centraliza verticalmente em qualquer resolução. O right: 18px funciona em mobile e desktop. */

/* =====================================================
   9. BOTTOM NAVIGATION — ESTRUTURA GERAL
   ===================================================== */
.tab-bar .inner-wrap {
  background: linear-gradient(180deg, var(--do-surface-2), var(--do-bg)) !important;
  border-top: 1px solid var(--do-line) !important;
  box-shadow: 0 -12px 32px rgba(0,0,0,0.6) !important;
}

.tab-bar .tab-btn {
  color: var(--do-text-muted) !important;
  font-weight: 600 !important;
}

.tab-bar .tab-btn.active-tab {
  color: var(--seven-primary) !important;
}

/* =====================================================
   10. GAME CARDS
   ===================================================== */
.game-card {
  border-radius: 12px !important;
}


/* =====================================================
   11. BOTÕES PRINCIPAIS — ENTRAR / REGISTRAR
       Cor primária configurável nos botões CTA
   ===================================================== */
ion-button.login {
  --background: var(--seven-primary) !important;
  --color: #ffffff !important;
  --border-radius: var(--ep-border-radius-m, 8px) !important;
  font-weight: 700 !important;
}

ion-button.register {
  --background: transparent !important;
  --color: var(--seven-primary) !important;
  --border-color: var(--seven-primary) !important;
  --border-radius: var(--ep-border-radius-m, 8px) !important;
  --border-width: 1px !important;
  --border-style: solid !important;
  font-weight: 700 !important;
}

/* =====================================================
   12. RESPONSIVO — MOBILE PRIMÁRIO (≤ 767 px)
   ===================================================== */
@media (max-width: 767px) {
  .swiper-poster,
  .swiper-poster .poster-img {
    border-radius: 12px !important;
  }

  ion-segment-button {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
  }

  .game-card { border-radius: 11px !important; }

  /* Activity bar mobile: força a mesma altura nos dois cards */
  .activity-bar > * {
    aspect-ratio: 2.2 / 1;
  }
}

/* =====================================================
   13. DESKTOP (≥ 1024 px)
   ===================================================== */
@media (min-width: 1024px) {
  .swiper-poster { aspect-ratio: 3.2 / 1 !important; }
  .game-content  { padding-inline: 16px !important; }

  .wrapper.segment-c {
    border-radius: 16px !important;
    margin: 10px 16px !important;
  }

  #app-content > ion-router-outlet.mx-auto {
    width: 100% !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
  }
}

/* =====================================================
   14. POPUP HOME — padrão A77 (somente anúncio nativo)
   ===================================================== */
#pwa-compulsory-modal {
  --background: rgba(0, 0, 0, 0.6) !important;
}

#pwa-compulsory-modal .wrapper {
  align-items: center !important;
  justify-content: center !important;
}

#pwa-compulsory-modal .announcement-wrapper {
  display: flex !important;
}

#pwa-compulsory-modal .announcement-wrapper.bottom {
  flex-direction: column-reverse !important;
}

#pwa-compulsory-modal .announcement-wrapper .content {
  width: 350px !important;
  height: 380px !important;
  border: 1px solid var(--do-line) !important;
  border-radius: 6px 6px 0 0 !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5) !important;
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden !important;
}

#pwa-compulsory-modal .announcement-wrapper .content.bottom {
  border-bottom-width: 0 !important;
}

#pwa-compulsory-modal .announcement-wrapper .tab-list.bottom {
  width: 350px !important;
  height: 50px !important;
  padding: 0 8px !important;
  background: var(--do-surface) !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5) !important;
}

#pwa-compulsory-modal .announcement-wrapper .check-box {
  height: 36px !important;
  margin: 16px 0 !important;
  padding-left: 12px !important;
  background: var(--do-surface-2) !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-size: 12px !important;
}

#pwa-compulsory-modal .announcement-wrapper .check-box p {
  padding: 0 12px 0 10px !important;
  line-height: 36px !important;
  color: #fff !important;
}

#pwa-compulsory-modal .announcement-wrapper .close-btn {
  min-width: 24px !important;
  min-height: 24px !important;
}

/* =====================================================
   15. ACESSIBILIDADE
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================
   16. HOME RESPONSIVA — CONSOLIDAÇÃO DESKTOP / MOBILE
   Mantém o bundle intacto e corrige proporções do Layout2.
   ===================================================== */
@media (min-width: 1024px) {
  html.theme-27 {
    --do-desktop-width: min(1440px, calc(100vw - 48px));
  }

  html.theme-27 ion-tabs.b-tabs,
  html.theme-27 #app-content > ion-router-outlet.mx-auto {
    width: var(--do-desktop-width) !important;
    max-width: 1440px !important;
  }

  html.theme-27 .swiper-poster {
    margin: 14px auto 18px !important;
    width: calc(100% - 24px) !important;
    aspect-ratio: 3.45 / 1 !important;
    border: 1px solid rgba(255, 143, 31, .22) !important;
    box-shadow: 0 20px 54px rgba(0, 0, 0, .28) !important;
  }

  html.theme-27 .game-wrapper {
    padding: 0 12px 112px !important;
  }

  html.theme-27 .tabbar-tabs-inicio-components-GameWrapper-index,
  html.theme-27 .game-head,
  html.theme-27 .game-content {
    width: 100% !important;
  }

  html.theme-27 .game-content .card-container {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 16px !important;
    height: auto !important;
    padding: 14px 10px 20px !important;
  }

  html.theme-27 .game-content .game-card {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .24) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  }

  html.theme-27 .game-content .game-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(255, 143, 31, .58) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .34) !important;
  }

  html.theme-27 .game-content .game-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  html.theme-27 .game-content .swiper,
  html.theme-27 .game-content .swiper-wrapper,
  html.theme-27 .game-content .swiper-slide.onMore {
    height: auto !important;
    min-height: 0 !important;
  }

  html.theme-27 .ranking-area.layout27 {
    width: calc(100% - 24px) !important;
    margin: 28px auto 120px !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .24) !important;
  }

  html.theme-27 .ranking-list-container.layout27 {
    max-height: 300px !important;
    overflow: hidden !important;
  }

  html.theme-27 ion-tab-bar.tab-bar.layout2 {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 18px !important;
    width: min(680px, calc(100vw - 48px)) !important;
    height: 76px !important;
    min-height: 76px !important;
    transform: translateX(-50%) !important;
    border: none !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .55) !important;
    z-index: 999 !important;
  }

  html.theme-27 ion-tab-bar.tab-bar.layout2 .inner-wrap {
    min-height: 76px !important;
    border-radius: 22px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  html.theme-27 .game-content .card-container {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  html.theme-27 .game-wrapper {
    padding-bottom: 88px !important;
  }

  html.theme-27 .ranking-area.layout27 {
    margin-bottom: 92px !important;
    overflow: hidden !important;
  }

  html.theme-27 .ranking-list-container.layout27 {
    max-height: 260px !important;
    overflow: hidden !important;
  }

  html.theme-27 ion-tab-bar.tab-bar.layout2 {
    height: 72px !important;
    min-height: 72px !important;
  }
}

/* =====================================================
   17. CARROSSEL DE STATUS — administrável e responsivo
   ===================================================== */
.do-status-rail {
  display: flex;
  gap: 18px;
  width: calc(100% - 24px);
  margin: 10px auto 2px;
  padding: 4px 2px 7px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  justify-content:center;
}
.do-status-rail::-webkit-scrollbar { display: none; }
.do-status-card {
  flex: 0 0 76px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 0;
  color: #fff;
  text-decoration: none;
  scroll-snap-align: start;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: transform .18s ease, border-color .18s ease;
}
.do-status-card:hover { transform: translateY(-4px); color: #fff; }
.do-status-card > img,.do-status-emoji {
  width: 58px; height: 58px; flex: 0 0 58px; object-fit: contain; font-size: 34px;
  display: grid; place-items: center; border-radius: 50%;
  border:1px solid var(--color-primary-600,var(--seven-primary));
  background:
    radial-gradient(circle at 38% 28%, rgba(255,255,255,.22), transparent 18%),
    radial-gradient(circle, color-mix(in srgb, var(--seven-primary) 13%, #18233b), #07111f 72%);
  box-shadow: inset 0 0 0 3px rgba(3,12,25,.82), inset 0 0 15px color-mix(in srgb,var(--seven-primary) 21%,transparent), 0 0 12px color-mix(in srgb,var(--seven-primary) 20%,transparent), 0 7px 13px rgba(0,0,0,.4);
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.32));
}
.do-status-sprite{background-repeat:no-repeat!important;background-size:82% 82%!important;background-position:center!important;background-color:#07111f!important}
.do-status-0 .do-status-sprite{background-image:url('/theme/assets/status-3d/checkin.png')!important}.do-status-1 .do-status-sprite{background-image:url('/theme/assets/status-3d/vip.png')!important}.do-status-2 .do-status-sprite{background-image:url('/theme/assets/status-3d/cupons.png')!important}.do-status-3 .do-status-sprite{background-image:url('/theme/assets/status-3d/indique.png')!important}.do-status-4 .do-status-sprite{background-image:url('/theme/assets/status-3d/promocoes.png')!important}
.do-status-card > span:last-child { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items:center; gap: 1px; text-align:center; }
.do-status-card strong { max-width:100%; font-size: .7rem; line-height:1.05; white-space: normal; overflow: hidden; text-overflow: ellipsis; text-shadow:0 2px 5px #000; }
.do-status-card small { display:none; }

.swiper-poster{position:relative!important}
/* ── Carrossel de banners: pontinhos premium (estilo Jogão, cores do tema) ── */
.do-banner-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 20;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.do-banner-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}

.do-banner-dot.do-banner-dot-active {
  width: 20px;
  background: var(--seven-primary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--seven-primary) 70%, transparent);
}

/* ── Status premium (vidro + brilho no toque, cores do tema) ── */
.do-status-card {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}

.do-status-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 60px at 50% 0%, color-mix(in srgb, var(--seven-primary) 22%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.do-status-card:hover, .do-status-card:active {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--seven-primary) 55%, transparent);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45), 0 0 14px color-mix(in srgb, var(--seven-primary) 25%, transparent);
}

.do-status-card:hover::after, .do-status-card:active::after { opacity: 1; }

@media (min-width:1024px){.do-status-card{flex-basis:82px;min-height:100px}.do-status-rail{gap:22px;justify-content:center}.do-device-mobile{display:none!important}}
@media (max-width:1023px){.do-device-desktop{display:none!important}}
@media (max-width:767px){.do-status-rail{width:100%;margin-top:4px;gap:9px;padding:4px 7px}.do-status-card{flex-basis:57px;min-height:70px;gap:2px}.do-status-card>img,.do-status-emoji{width:47px;height:47px;flex-basis:47px;font-size:28px}.do-status-card strong{font-size:.6rem}}

/* =====================================================
   18. HEADER PREMIUM — compacto no mobile, amplo no desktop
   ===================================================== */
ion-header.ion-no-border {
  background: color-mix(in srgb, var(--do-bg-deep) 92%, transparent) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.25) !important;
}
ion-header .pwa-header-wrap {
  background: linear-gradient(90deg, #070d18, color-mix(in srgb,var(--seven-secondary) 18%,#10182b), #070d18) !important;
  border-bottom: 1px solid color-mix(in srgb,var(--seven-primary) 25%,transparent) !important;
}
ion-header .pwa-header-wrap .btn-default {
  border-radius: 999px !important;
  background: linear-gradient(135deg,var(--seven-primary),color-mix(in srgb,var(--seven-primary) 65%,#ffcf4a)) !important;
  box-shadow: 0 8px 20px color-mix(in srgb,var(--seven-primary) 25%,transparent) !important;
}
ion-header ion-toolbar.toolbar {
  --min-height: 64px !important;
  border-bottom: 0 !important;
}
ion-header .logo-wrap.layout1 { display:flex!important;align-items:center!important; }
ion-header .logo-wrap.layout1 .logo { object-fit:contain!important;filter:drop-shadow(0 5px 8px rgba(0,0,0,.4)); }
ion-header .menu-btn { border:1px solid color-mix(in srgb,var(--seven-primary) 55%,transparent)!important;border-radius:13px!important;background:linear-gradient(145deg,color-mix(in srgb,var(--seven-primary) 24%,var(--do-surface-2)),var(--do-surface))!important;box-shadow:0 8px 18px rgba(0,0,0,.28)!important; }
@media(min-width:1024px){
 ion-header .pwa-header-wrap,ion-header ion-toolbar.toolbar{padding-left:max(18px,calc((100vw - min(1440px,calc(100vw - 48px)))/2))!important;padding-right:max(18px,calc((100vw - min(1440px,calc(100vw - 48px)))/2))!important}
 ion-header .pwa-header-wrap{height:54px!important;display:flex!important;align-items:center!important}
 ion-header ion-toolbar.toolbar{--min-height:76px!important}
 ion-header .logo-wrap.layout1 .logo{width:168px!important;max-width:168px!important;height:48px!important}
 ion-header .menu-btn{width:48px!important;height:48px!important;margin-left:12px!important}
}

/* =====================================================
   19. PROVEDORES — trilho A77, sem caixa externa pesada
   ===================================================== */
#stickyElement.wrapper.layout1.segment-c {
  width: calc(100% - 24px) !important;
  min-height: 68px !important;
  margin: 5px auto 2px !important;
  padding: 3px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow: hidden !important;
}
#stickyElement.wrapper.layout1.segment-c > ion-segment { gap:5px!important;padding:2px!important;background:transparent!important;overflow-y:hidden!important; }
#stickyElement ion-segment-button { flex-basis:59px!important;width:59px!important;min-width:59px!important;max-width:59px!important;height:59px!important;min-height:59px!important;max-height:59px!important;overflow:hidden!important;background-image:none!important; }
#stickyElement ion-segment-button .btn-wall.layout27 { width:59px!important;min-width:59px!important;max-width:59px!important;height:59px!important;min-height:59px!important;max-height:59px!important;border-radius:13px!important;border-color:color-mix(in srgb,var(--color-primary-600,var(--seven-primary)) 62%,var(--do-line))!important;background:linear-gradient(155deg,color-mix(in srgb,var(--color-primary-600,var(--seven-primary)) 10%,var(--do-surface-2)),var(--do-bg))!important;background-image:none!important;box-shadow:inset 0 1px rgba(255,255,255,.08),0 6px 13px rgba(0,0,0,.3)!important;overflow:hidden!important; }
#stickyElement ion-segment-button.segment-button-checked .btn-wall.layout27 { border-color:var(--color-primary-600,var(--seven-primary))!important;background:linear-gradient(150deg,color-mix(in srgb,var(--color-primary-600,var(--seven-primary)) 30%,var(--do-surface-2)),var(--do-bg))!important;box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 16px color-mix(in srgb,var(--color-primary-600,var(--seven-primary)) 23%,transparent)!important; }
#stickyElement ion-segment-button .btn-wall.layout27 img,#stickyElement ion-segment-button .btn-wall.layout27 ion-img,#stickyElement ion-segment-button .btn-wall.layout27 ion-icon{width:32px!important;height:32px!important;min-width:32px!important;font-size:32px!important;object-fit:contain!important}
@media(min-width:1024px){#stickyElement.wrapper.layout1.segment-c{min-height:82px!important}#stickyElement ion-segment-button{flex-basis:84px!important;width:84px!important;min-width:84px!important;max-width:84px!important;height:84px!important;min-height:84px!important;max-height:84px!important}#stickyElement ion-segment-button .btn-wall.layout27{width:84px!important;min-width:84px!important;max-width:84px!important;height:84px!important;min-height:84px!important;max-height:84px!important}}

/* =====================================================
   20. DENSIDADE MOBILE E CAMADAS DECORATIVAS LEGADAS
   ===================================================== */
@media(max-width:767px){
  ion-header ion-toolbar.toolbar{--min-height:52px!important;min-height:52px!important}
  ion-header .pwa-header-wrap{min-height:38px!important;height:38px!important}
  .swiper-poster{margin-top:3px!important;margin-bottom:5px!important}
  .wrapper.layout27{margin-top:4px!important;margin-bottom:4px!important;gap:5px!important}
  .game-wrapper{padding-top:2px!important}.game-head{padding-top:7px!important;padding-bottom:5px!important}
}
#stickyElement ion-segment-button::before,#stickyElement ion-segment-button::after,#stickyElement .btn-wall.layout27::before,#stickyElement .btn-wall.layout27::after{display:none!important;content:none!important;background-image:none!important}
#stickyElement .partner-img,#stickyElement .partner-img-bg,#stickyElement [class*="partner-img"]{display:none!important;visibility:hidden!important}

/* A imagem decorativa de parceiros do bundle é a pilha de moedas que
   ultrapassava o trilho. Ela não faz parte do catálogo e fica fora de
   #stickyElement em algumas variantes do componente. */
.partner-wrap > .partner-img,
.partner-wrap,
ion-img.partner-img,
img.partner-img,
.partner-img-bg,
ion-img[src*="skin-game-platform"],
img[src*="skin-game-platform"],
ion-img[src*="1761428623405/111.png"],
img[src*="1761428623405/111.png"] {
  display:none!important;
  visibility:hidden!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  opacity:0!important;
  pointer-events:none!important;
}
#stickyElement{padding-right:23px!important}
.do-provider-prev{position:absolute;z-index:8;left:0;top:50%;transform:translateY(-50%);width:23px;height:44px;padding:0;border:0;background:transparent;color:var(--color-primary-600,var(--seven-primary));font-size:29px;font-weight:900;line-height:44px;cursor:pointer;text-shadow:none;box-shadow:none}
.do-provider-next{position:absolute;z-index:8;right:0;top:50%;transform:translateY(-50%);width:23px;height:44px;padding:0;border:0;background:transparent;color:var(--color-primary-600,var(--seven-primary));font-size:29px;font-weight:900;line-height:44px;cursor:pointer;text-shadow:none;box-shadow:none}

/* Desktop funcional: conteúdo amplo, banner contido e navegação sem cobrir os jogos. */
@media (min-width:1024px){
 html.theme-27 ion-tabs.b-tabs,html.theme-27 #app-content>ion-router-outlet.mx-auto{width:min(1180px,calc(100vw - 40px))!important;max-width:1180px!important}
 html.theme-27 .swiper-poster{aspect-ratio:3.2/1!important;max-height:360px!important}
 html.theme-27 .game-content .card-container{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:12px!important}
 html.theme-27 ion-tab-bar.tab-bar.layout2{bottom:14px!important;width:min(620px,calc(100vw - 48px))!important}
}

/* Cor dos controles do catálogo acompanha exclusivamente a identidade ativa. */
:root{--do-brand:var(--seven-primary)}
.do-status-card>img,.do-status-emoji,#stickyElement ion-segment-button .btn-wall.layout27{border-color:var(--do-brand)!important}

/* Provedores com o mesmo fundo ativo do botão Popular. */
#stickyElement ion-segment-button .btn-wall.layout27,
#stickyElement ion-segment-button.segment-button-checked .btn-wall.layout27 {
  border-color: var(--color-primary-600, var(--seven-primary)) !important;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--color-primary-600, var(--seven-primary)) 30%, var(--do-surface-2)),
    var(--do-bg)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.1),
    0 0 16px color-mix(in srgb, var(--color-primary-600, var(--seven-primary)) 23%, transparent) !important;
}