/* =====================================================
   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: 58px !important;
  height: 34px !important;
  object-fit: contain !important;
  border-radius: 8px !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 7px !important;
  margin: 0 4px !important;
  min-width: 74px !important;
  min-height: 62px !important;
  flex: 0 0 74px !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;
  }
}

/* Remove somente o reward badge associado ao cadastro nativo. */
#game-buoy .register-btn-warper > .rewardTag,
#game-buoy .register-btn-warpper > .rewardTag,
ion-menu[menu-id="main-menu"] .register-btn-warper > .rewardTag,
ion-menu[menu-id="main-menu"] .register-btn-warpper > .rewardTag,
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 (announcement nativo)
   ===================================================== */

#pwa-compulsory-modal {
  --background: rgba(2, 5, 10, 0.80) !important;
  --backdrop-opacity: 0 !important;
  background: rgba(2, 5, 10, 0.80) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

#pwa-compulsory-modal .wrapper {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom)) !important;
}

/* Card principal */
#pwa-compulsory-modal .announcement-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: min(86vw, 350px, calc((100dvh - 170px) * 0.9168)) !important;
  max-width: 350px !important;
  margin: 0 !important;
  filter: drop-shadow(0 22px 46px rgba(0, 0, 0, 0.58));
}

/* A barra de identificação não fará mais parte do popup */
#pwa-compulsory-modal .announcement-wrapper .tab-list {
  display: none !important;
}

/* A arte passa a ser o próprio card, sem rodapé acoplado */
#pwa-compulsory-modal .announcement-wrapper .content,
#pwa-compulsory-modal .announcement-wrapper .content.top,
#pwa-compulsory-modal .announcement-wrapper .content.bottom {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1201 / 1310 !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 18px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 18px 48px rgba(0, 0, 0, 0.34) !important;
  overflow: hidden !important;
}

#pwa-compulsory-modal .announcement-wrapper .content.hide-bg {
  border-color: transparent !important;
  background-color: transparent !important;
}

#pwa-compulsory-modal .announcement-wrapper .content.text {
  aspect-ratio: auto !important;
  height: auto !important;
  max-height: 62dvh !important;
  padding: 18px 14px 20px !important;
  background-color: var(--do-surface) !important;
}

/* "Sem lembretes hoje" — discreto como na referência */
#pwa-compulsory-modal .wrapper > .check-box,
#pwa-compulsory-modal .check-box {
  width: max-content !important;
  max-width: calc(100% - 32px) !important;
  height: 30px !important;
  margin: 12px auto 10px !important;
  padding: 0 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

#pwa-compulsory-modal .check-box ion-checkbox {
  --size: 16px !important;
  --border-width: 1px !important;
  --border-color: rgba(255, 255, 255, 0.46) !important;
  --border-color-checked: rgba(255, 255, 255, 0.94) !important;
  --checkbox-background: transparent !important;
  --checkbox-background-checked: rgba(255, 255, 255, 0.94) !important;
  --checkmark-color: #111722 !important;
}

#pwa-compulsory-modal .check-box p {
  margin: 0 !important;
  padding: 0 0 0 9px !important;
  line-height: 30px !important;
  color: inherit !important;
  white-space: nowrap !important;
}

/* X real do componente — terceiro filho direto do wrapper */
#pwa-compulsory-modal .wrapper > ion-icon:last-child {
  box-sizing: border-box !important;
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  margin: 4px auto 0 !important;
  padding: 0 !important;

  /* Oculta o X grosso nativo e desenha um X fino estilo A77 */
  color: transparent !important;
  background-color: rgba(8, 12, 18, 0.28) !important;
  background-image:
    linear-gradient(45deg,
      transparent 44%,
      rgba(181, 188, 198, 0.92) 45%,
      rgba(181, 188, 198, 0.92) 55%,
      transparent 56%),
    linear-gradient(-45deg,
      transparent 44%,
      rgba(181, 188, 198, 0.92) 45%,
      rgba(181, 188, 198, 0.92) 55%,
      transparent 56%) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 12px 12px !important;

  border: 1px solid rgba(154, 162, 172, 0.62) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer !important;
  transition:
    transform 0.16s ease,
    background-color 0.16s ease,
    border-color 0.16s ease !important;
}

#pwa-compulsory-modal .wrapper > ion-icon:last-child:hover {
  background-color: rgba(20, 26, 36, 0.56) !important;
  border-color: rgba(190, 197, 207, 0.82) !important;
}

#pwa-compulsory-modal .wrapper > ion-icon:last-child:active {
  transform: scale(0.94) !important;
}

/* Mobile estreito */
@media (max-width: 360px) {
  #pwa-compulsory-modal .wrapper {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #pwa-compulsory-modal .announcement-wrapper {
    width: min(90vw, 340px, calc((100dvh - 160px) * 0.9168)) !important;
  }

  #pwa-compulsory-modal .check-box {
    font-size: 11px !important;
  }

  #pwa-compulsory-modal .wrapper > ion-icon:last-child {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    background-size: 12px 12px !important;
  }
}

/* Desktop — composição própria, já que a referência A77 é mobile */
@media (max-width: 767px) {
  #pwa-compulsory-modal {
    --background: transparent !important;
    --backdrop-opacity: 1 !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  #pwa-compulsory-modal::part(content) {
    background: transparent !important;
    box-shadow: none !important;
  }

  #pwa-compulsory-modal::part(backdrop) {
    opacity: 1 !important;
    background: rgba(3, 7, 13, 0.46) !important;
    -webkit-backdrop-filter: blur(4px) saturate(0.92) !important;
    backdrop-filter: blur(4px) saturate(0.92) !important;
  }
}

@media (min-width: 768px) {
  #pwa-compulsory-modal {
    --background: transparent !important;
    --backdrop-opacity: 1 !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  #pwa-compulsory-modal::part(content) {
    background: transparent !important;
    box-shadow: none !important;
  }

  #pwa-compulsory-modal::part(backdrop) {
    opacity: 1 !important;
    background: rgba(3, 7, 13, 0.46) !important;
    -webkit-backdrop-filter: blur(4px) saturate(0.92) !important;
    backdrop-filter: blur(4px) saturate(0.92) !important;
  }

  #pwa-compulsory-modal .wrapper {
    padding: 32px !important;
  }

  #pwa-compulsory-modal .announcement-wrapper {
    width: min(420px, 32vw, calc((100dvh - 180px) * 0.9168)) !important;
    max-width: 420px !important;
    filter: drop-shadow(0 28px 64px rgba(0, 0, 0, 0.54));
  }

  #pwa-compulsory-modal .announcement-wrapper .content,
  #pwa-compulsory-modal .announcement-wrapper .content.top,
  #pwa-compulsory-modal .announcement-wrapper .content.bottom {
    border-radius: 22px !important;
  }

  #pwa-compulsory-modal .check-box {
    margin-top: 14px !important;
    margin-bottom: 12px !important;
    font-size: 13px !important;
  }

  #pwa-compulsory-modal .wrapper > ion-icon:last-child {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    background-size: 12px 12px !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
   ===================================================== */

/* FQA17_STATUS_RAIL_STORY_PREMIUM_V2
   Rail estilo Stories: sem card retangular, foco no circulo. */

.do-status-rail{
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:14px !important;
  padding:7px 10px 9px !important;
  margin-top:6px !important;
}

.do-status-card{
  position:relative !important;
  flex:0 0 72px !important;
  min-height:80px !important;
  padding:0 !important;
  gap:7px !important;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;

  transition:
    transform .18s ease,
    opacity .18s ease !important;
}

.do-status-card::after{
  display:none !important;
  content:none !important;
}

.do-status-card:hover,
.do-status-card:active{
  transform:translateY(-2px) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.do-status-card > img,
.do-status-card > .do-status-emoji{
  width:62px !important;
  height:62px !important;
  flex:0 0 62px !important;

  display:grid !important;
  place-items:center !important;

  padding:0 !important;
  border-radius:50% !important;
  object-fit:cover !important;

  border:2px solid
    color-mix(
      in srgb,
      var(--seven-primary) 80%,
      #ffffff
    ) !important;

  background:#07111f !important;

  box-shadow:
    0 0 0 2px rgba(4,10,20,.95),
    0 0 0 3px
      color-mix(
        in srgb,
        var(--seven-primary) 28%,
        transparent
      ),
    0 0 13px
      color-mix(
        in srgb,
        var(--seven-primary) 42%,
        transparent
      ),
    0 7px 15px rgba(0,0,0,.42) !important;

  filter:none !important;
}

.do-status-card > img{
  object-fit:cover !important;
}

.do-status-card > .do-status-emoji{
  font-size:32px !important;
}

.do-status-card-story > img,
.do-status-card-story > .do-status-emoji{
  border-color:#ff7619 !important;

  box-shadow:
    0 0 0 2px rgba(5,8,14,.98),
    0 0 0 4px rgba(255,118,25,.34),
    0 0 17px rgba(255,93,0,.68),
    0 0 29px rgba(255,93,0,.22),
    0 8px 16px rgba(0,0,0,.45) !important;

  animation:
    doStatusStoryPulse 1.9s ease-in-out infinite;
}

.do-status-card > span:last-child{
  width:72px !important;
  min-width:0 !important;
  gap:1px !important;
  text-align:center !important;
}

.do-status-card strong{
  display:-webkit-box !important;
  max-width:72px !important;
  min-height:21px !important;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  overflow:hidden !important;
  white-space:normal !important;

  font-size:.64rem !important;
  line-height:1.04 !important;
  font-weight:800 !important;
  letter-spacing:-.01em;

  color:#fff !important;
  text-shadow:0 2px 5px rgba(0,0,0,.85) !important;
}

.do-status-card small{
  display:none !important;
}

@keyframes doStatusStoryPulse{
  0%,100%{
    filter:brightness(1);
  }

  50%{
    filter:brightness(1.12);
  }
}

@media (min-width:768px){
  .do-status-rail{
    justify-content:center !important;
    gap:18px !important;
  }

  .do-status-card{
    flex-basis:78px !important;
    min-height:88px !important;
  }

  .do-status-card > img,
  .do-status-card > .do-status-emoji{
    width:64px !important;
    height:64px !important;
    flex-basis:64px !important;
  }
}

@media (max-width:767px){
  .do-status-rail{
    width:100% !important;
    gap:10px !important;
    padding:6px 8px 8px !important;
  }

  .do-status-card{
    flex:0 0 59px !important;
    min-height:70px !important;
    gap:5px !important;
  }

  .do-status-card > img,
  .do-status-card > .do-status-emoji{
    width:50px !important;
    height:50px !important;
    flex-basis:50px !important;
  }

  .do-status-card > .do-status-emoji{
    font-size:27px !important;
  }

  .do-status-card > span:last-child,
  .do-status-card strong{
    width:59px !important;
    max-width:59px !important;
  }

  .do-status-card strong{
    font-size:.57rem !important;
  }
}



/* FQA17_RAIL_FINAL_REFINEMENT_V3
   Refinamento final: glow discreto e visual mais premium. */

.do-status-card > img,
.do-status-card > .do-status-emoji{
  border-color:
    color-mix(
      in srgb,
      var(--seven-primary) 76%,
      #ffffff
    ) !important;

  box-shadow:
    0 0 0 2px rgba(5,8,14,.95),
    0 0 0 3px
      color-mix(
        in srgb,
        var(--seven-primary) 20%,
        transparent
      ),
    0 0 8px
      color-mix(
        in srgb,
        var(--seven-primary) 24%,
        transparent
      ),
    0 5px 12px rgba(0,0,0,.40) !important;
}

.do-status-card-story > img,
.do-status-card-story > .do-status-emoji{
  border-color:
    color-mix(
      in srgb,
      var(--seven-primary) 76%,
      #ffffff
    ) !important;

  box-shadow:
    0 0 0 2px rgba(5,8,14,.95),
    0 0 0 3px
      color-mix(
        in srgb,
        var(--seven-primary) 20%,
        transparent
      ),
    0 0 8px
      color-mix(
        in srgb,
        var(--seven-primary) 24%,
        transparent
      ),
    0 5px 12px rgba(0,0,0,.40) !important;

  animation:doStatusStoryPulseFinal 3s ease-in-out infinite !important;
}

@keyframes doStatusStoryPulseFinal{
  0%,100%{
    filter:brightness(1);
  }

  50%{
    filter:brightness(1.035);
  }
}


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;
}

/* Primeiro paint: replica visual leve dos controles enquanto o token
   real ainda esta sendo lido do storage assincrono do SPA. */
.do-header-bootstrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  margin-right: 10px !important;
  flex: 0 0 auto !important;
  width: fit-content !important;
  position: relative !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.do-header-bootstrap-out > div {
  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;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.do-header-bootstrap-out .do-bootstrap-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-bootstrap-out .do-bootstrap-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-bootstrap-in .do-bootstrap-deposit {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 16px !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;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.do-header-bootstrap-in .do-bootstrap-pix {
  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;
  border-radius: 1.5rem !important;
  background: #a3dbd4 !important;
  color: #1f1f1f !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.do-header-bootstrap-in .do-bootstrap-balance {
  height: 34px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !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;
  color: #fff !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

html.do-header-ready ion-header .do-header-bootstrap {
  display: none !important;
}

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

  .do-header-bootstrap-out > div {
    height: 30px !important;
    padding: 0 11px !important;
    font-size: 0.72rem !important;
    border-radius: 9px !important;
  }

  .do-header-bootstrap-in .do-bootstrap-deposit {
    height: 28px !important;
    font-size: 13px !important;
    padding: 0 12px !important;
  }

  .do-header-bootstrap-in .do-bootstrap-pix {
    top: -8px !important;
  }

  .do-header-bootstrap-in .do-bootstrap-balance {
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 0.72rem !important;
  }
}

/* =====================================================
   HEADER FIRST-PAINT GUARD
   Evita FOUC entre hidratacao do SPA e estado de auth.
   visibility preserva a altura: nao causa layout shift.
   ===================================================== */
html:not(.do-header-ready) ion-header ion-toolbar.toolbar > .assets-box,
html:not(.do-header-ready) ion-header .do-header-deposit-box,
html:not(.do-header-ready) ion-header .do-header-auth,
html:not(.do-header-ready) ion-header .pwa-header-wrap .btn-default,
html:not(.do-header-ready) ion-header .flex.items-center.height-text-white {
  visibility: hidden !important;
}

html.do-header-ready ion-header ion-toolbar.toolbar > .assets-box,
html.do-header-ready ion-header .do-header-deposit-box,
html.do-header-ready ion-header .do-header-auth,
html.do-header-ready ion-header .pwa-header-wrap .btn-default,
html.do-header-ready ion-header .flex.items-center.height-text-white {
  visibility: visible !important;
}

/* =====================================================
   FQA-8 — GAME SEARCH / TABS MOBILE
   Evita compressao de Pesquisar, Popular, Recente e Favoritos.
   Mantem o bundle e a logica do catalogo intactos.
   ===================================================== */
body .search-container[data-v-da021b37] ion-segment {
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body .search-container[data-v-da021b37] ion-segment::-webkit-scrollbar {
  display: none !important;
}

body .search-container[data-v-da021b37] ion-segment ion-segment-button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
}

body .search-container[data-v-da021b37] ion-segment ion-segment-button .tab {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

body .search-container[data-v-da021b37] ion-segment ion-segment-button .tab span {
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (max-width: 768px) {
  body .search-container[data-v-da021b37] ion-segment {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body .search-container[data-v-da021b37] ion-segment ion-segment-button {
    --padding-start: 7px !important;
    --padding-end: 7px !important;
  }
}
/* =====================================================
   FQA-8 — GAME CATEGORY / SIDEBAR + TABS MOBILE
   Corrige labels quebrados, baixo contraste e compressao.
   Nao altera catalogo, filtros ou logica de navegacao.
   ===================================================== */
body .category-container[data-v-ed5e4738] .container .side {
  flex: 0 0 5.75rem !important;
  width: 5.75rem !important;
  min-width: 5.75rem !important;
  max-width: 5.75rem !important;
  --padding-start: 5px !important;
  --padding-end: 5px !important;
}

body .category-container[data-v-ed5e4738] .container .side ion-segment {
  --background: transparent !important;
  width: 100% !important;
}

body .category-container[data-v-ed5e4738] .container .side ion-segment ion-segment-button {
  --background: var(--do-surface-2, #232327) !important;
  --color: rgba(255,255,255,.86) !important;
  --color-checked: #fff !important;
  --padding-start: 3px !important;
  --padding-end: 3px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 3.65rem !important;
  margin-bottom: 8px !important;
  border: 1px solid var(--do-line, rgba(255,255,255,.10)) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

body .category-container[data-v-ed5e4738] .container .side ion-segment ion-segment-button .label {
  display: block !important;
  width: 100% !important;
  color: rgba(255,255,255,.86) !important;
  font-size: .69rem !important;
  font-weight: 600 !important;
  line-height: .9rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: unset !important;
}

body .category-container[data-v-ed5e4738] .container .side ion-segment ion-segment-button ion-img,
body .category-container[data-v-ed5e4738] .container .side ion-segment ion-segment-button ion-icon {
  filter: none !important;
  opacity: .9 !important;
  width: 2.1rem !important;
  height: 2.1rem !important;
  font-size: 2.1rem !important;
  object-fit: contain !important;
}

body .category-container[data-v-ed5e4738] .container .side ion-segment ion-segment-button.active-tab {
  --background: color-mix(in srgb, var(--seven-primary) 18%, var(--do-surface-2, #232327)) !important;
  border-color: var(--seven-primary) !important;
  color: #fff !important;
}

body .category-container[data-v-ed5e4738] .container .side ion-segment ion-segment-button.active-tab::part(indicator-background) {
  background: color-mix(in srgb, var(--seven-primary) 22%, transparent) !important;
}

body .category-container[data-v-ed5e4738] .container .side ion-segment ion-segment-button.active-tab .label {
  color: #fff !important;
}

body .category-container[data-v-ed5e4738] .container #main .tab-bar {
  display: flex !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body .category-container[data-v-ed5e4738] .container #main .tab-bar::-webkit-scrollbar {
  display: none !important;
}

body .category-container[data-v-ed5e4738] .container #main .tab-bar ion-segment-button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  --color: rgba(255,255,255,.72) !important;
  --color-checked: #fff !important;
  --indicator-color: var(--seven-primary) !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

body .category-container[data-v-ed5e4738] .container #main .tab-bar ion-segment-button ion-label {
  white-space: nowrap !important;
  color: inherit !important;
}

/* =====================================================
   FQA-8 - CATEGORY PROVIDERS SYNC
   Usa a mesma ordem/logos do rail aprovado da Home.
   Mantem provedores extras em modo demonstracao.
   ===================================================== */
body .category-container[data-v-ed5e4738] .do-category-provider-list {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

body .category-container[data-v-ed5e4738] .do-category-all .label {
  color: #fff !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

body .category-container[data-v-ed5e4738] .do-category-native-provider ion-img,
body .category-container[data-v-ed5e4738] .do-category-native-provider ion-icon {
  display: none !important;
}

body .category-container[data-v-ed5e4738] .do-category-provider-logo {
  display: block !important;
  width: 2.1rem !important;
  height: 2.1rem !important;
  object-fit: contain !important;
  margin: 0 auto 2px !important;
  opacity: 1 !important;
  filter: none !important;
}

body .category-container[data-v-ed5e4738] button.do-category-demo-provider {
  appearance: none;
  width: 100% !important;
  min-height: 3.65rem !important;
  margin: 0 0 8px !important;
  padding: 4px 3px !important;
  border: 1px solid var(--do-line, rgba(255,255,255,.10)) !important;
  border-radius: 10px !important;
  background: var(--do-surface-2, #232327) !important;
  color: rgba(255,255,255,.86) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: inherit !important;
  cursor: pointer;
}

body .category-container[data-v-ed5e4738] .do-category-provider-name {
  display: block !important;
  max-width: 100% !important;
  font-size: .69rem !important;
  line-height: .9rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.86) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body .category-container[data-v-ed5e4738] .container #main .tab-bar ion-segment-button ion-label {
  color: rgba(255,255,255,.72) !important;
}

body .category-container[data-v-ed5e4738] .container #main .tab-bar ion-segment-button.segment-button-checked ion-label {
  color: #fff !important;
}
/* =====================================================
   FQA-8 - CATEGORY FINAL VISUAL REFINE
   Recupera area da grade, cria respiro no topo e
   uniformiza provedores nativos e demonstracao.
   ===================================================== */
body .category-container[data-v-ed5e4738] .container .side {
  flex: 0 0 5.3125rem !important;
  width: 5.3125rem !important;
  min-width: 5.3125rem !important;
  max-width: 5.3125rem !important;
  --padding-start: 4px !important;
  --padding-end: 4px !important;
}

body .category-container[data-v-ed5e4738] .do-category-provider-list {
  padding-top: 12px !important;
  box-sizing: border-box !important;
}

body .category-container[data-v-ed5e4738] .container .side ion-segment ion-segment-button,
body .category-container[data-v-ed5e4738] button.do-category-demo-provider {
  width: 100% !important;
  min-height: 3.55rem !important;
  margin: 0 0 8px !important;
  padding: 4px 3px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 9px !important;
  background: #191e2d !important;
  color: rgba(255,255,255,.9) !important;
  box-sizing: border-box !important;
}

body .category-container[data-v-ed5e4738] .container .side ion-segment ion-segment-button.active-tab {
  background: #222631 !important;
  border-color: var(--seven-primary) !important;
}

body .category-container[data-v-ed5e4738] .do-category-provider-logo {
  width: 1.9rem !important;
  height: 1.9rem !important;
  margin: 0 auto 2px !important;
  object-fit: contain !important;
}

body .category-container[data-v-ed5e4738] .do-category-provider-name,
body .category-container[data-v-ed5e4738] .container .side ion-segment ion-segment-button .label {
  font-size: .67rem !important;
  line-height: .85rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.9) !important;
  text-align: center !important;
}

body .category-container[data-v-ed5e4738] button.do-category-demo-provider:hover,
body .category-container[data-v-ed5e4738] button.do-category-demo-provider:focus {
  background: #202634 !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* =====================================================
   FQA-8 - CATEGORY GRID + UNIFIED PROVIDER BUTTONS
   ===================================================== */
body .category-container[data-v-ed5e4738] .container .side {
  flex: 0 0 4.4rem !important;
  width: 4.4rem !important;
  min-width: 4.4rem !important;
  max-width: 4.4rem !important;
  --padding-start: 3px !important;
  --padding-end: 3px !important;
}

body .category-container[data-v-ed5e4738] .container #main {
  flex: 1 1 0 !important;
  width: calc(100% - 4.4rem) !important;
  max-width: calc(100% - 4.4rem) !important;
  min-width: 0 !important;
}

body .category-container[data-v-ed5e4738] .do-category-provider-list {
  padding-top: 18px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body .category-container[data-v-ed5e4738] .container .side ion-segment ion-segment-button,
body .category-container[data-v-ed5e4738] button.do-category-demo-provider {
  width: 100% !important;
  min-width: 100% !important;
  min-height: 3.35rem !important;
  margin: 0 0 7px !important;
  padding: 5px 2px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 8px !important;
  background: #191e2d !important;
  color: rgba(255,255,255,.92) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}

body .category-container[data-v-ed5e4738] .container .side ion-segment ion-segment-button.active-tab {
  background: #242833 !important;
  border-color: var(--seven-primary) !important;
  color: #fff !important;
}

body .category-container[data-v-ed5e4738] .do-category-provider-logo {
  display: block !important;
  width: 1.65rem !important;
  height: 1.65rem !important;
  max-width: 1.65rem !important;
  max-height: 1.65rem !important;
  object-fit: contain !important;
  margin: 0 auto 1px !important;
  opacity: 1 !important;
  filter: none !important;
}

body .category-container[data-v-ed5e4738] .container .side ion-segment ion-segment-button .label,
body .category-container[data-v-ed5e4738] .do-category-provider-name {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 1px !important;
  font-size: .61rem !important;
  line-height: .78rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  color: rgba(255,255,255,.92) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body .category-container[data-v-ed5e4738] .do-category-all .label {
  color: #fff !important;
  font-weight: 700 !important;
}

body .category-container[data-v-ed5e4738] .container #main .tab-bar ion-segment-button {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

body .category-container[data-v-ed5e4738] .do-category-tab-icon {
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  object-fit: contain !important;
  margin: 0 !important;
}

body .category-container[data-v-ed5e4738] .container #main .tab-bar ion-segment-button ion-label {
  white-space: nowrap !important;
  margin: 0 !important;
}
/* =====================================================
   FQA-8 - CATEGORY TAB INLINE + SIDEBAR POLISH
   ===================================================== */
body .category-container[data-v-ed5e4738] .container .side {
  flex: 0 0 4.75rem !important;
  width: 4.75rem !important;
  min-width: 4.75rem !important;
  max-width: 4.75rem !important;
}

body .category-container[data-v-ed5e4738] .container #main {
  flex: 1 1 0 !important;
  width: calc(100% - 4.75rem) !important;
  max-width: calc(100% - 4.75rem) !important;
  min-width: 0 !important;
}

body .category-container[data-v-ed5e4738] .container #main .tab-bar ion-segment-button::part(native) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

body .category-container[data-v-ed5e4738] .container #main .tab-bar ion-segment-button .do-category-tab-icon {
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  flex: 0 0 13px !important;
  margin: 0 !important;
  object-fit: contain !important;
}

body .category-container[data-v-ed5e4738] .container #main .tab-bar ion-segment-button ion-label {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

body .category-container[data-v-ed5e4738] .container .side ion-segment ion-segment-button .label,
body .category-container[data-v-ed5e4738] .do-category-provider-name {
  font-size: .60rem !important;
  letter-spacing: -.01em !important;
  text-overflow: ellipsis !important;
}
/* FQA-8 - top tabs icon spacing */
body .category-container[data-v-ed5e4738] .container #main .tab-bar ion-segment-button .do-category-tab-icon {
  margin-right: 4px !important;
}

body .category-container[data-v-ed5e4738] .container #main .tab-bar ion-segment-button::part(native) {
  gap: 0 !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
/* FQA-8 - top tabs fit mobile */
body .category-container[data-v-ed5e4738] .container #main .tab-bar ion-segment-button::part(native) {
  padding-left: 3px !important;
  padding-right: 3px !important;
}

body .category-container[data-v-ed5e4738] .container #main .tab-bar ion-segment-button .do-category-tab-icon {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  flex: 0 0 11px !important;
  margin-right: 3px !important;
}

body .category-container[data-v-ed5e4738] .container #main .tab-bar ion-segment-button ion-label {
  font-size: .69rem !important;
  letter-spacing: -.01em !important;
}
/* =====================================================
   FQA-12 - PROMO TABS MOBILE
   Evita compressao de Eventos, Rebate, Codigo,
   Historico e Pendentes. Mantem scroll horizontal.
   ===================================================== */
body ion-toolbar.promo-toolbar-first[data-v-eea1b4ce] ion-segment.md {
  display: flex !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body ion-toolbar.promo-toolbar-first[data-v-eea1b4ce] ion-segment.md::-webkit-scrollbar {
  display: none !important;
}

body ion-toolbar.promo-toolbar-first[data-v-eea1b4ce] ion-segment-button.md {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
}

body ion-toolbar.promo-toolbar-first[data-v-eea1b4ce] ion-segment-button.md::part(native) {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

body ion-toolbar.promo-toolbar-first[data-v-eea1b4ce] ion-segment-button.md ion-label {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  body ion-toolbar.promo-toolbar-first[data-v-eea1b4ce] ion-segment-button.md::part(native) {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
/* =====================================================
   FQA-13 - DEPOSITO / CANAIS DE PAGAMENTO
   Corrige labels longos e badge "Recomendado"
   ===================================================== */
body .new-skin-symbol .pay-list[data-v-0c1a4ff7] ion-segment {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body .new-skin-symbol .pay-list[data-v-0c1a4ff7] ion-segment::-webkit-scrollbar {
  display: none !important;
}

body .new-skin-symbol .pay-list[data-v-0c1a4ff7] ion-segment-button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

body .new-skin-symbol .pay-list[data-v-0c1a4ff7] ion-segment-button::part(native) {
  white-space: nowrap !important;
  overflow: visible !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

body .new-skin-symbol .pay-list .tag[data-v-0c1a4ff7] {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  height: .875rem !important;
  line-height: .875rem !important;
  white-space: nowrap !important;
  overflow: visible !important;
  padding-left: .375rem !important;
  padding-right: .375rem !important;
  right: 0 !important;
}
/* FQA-13 - ajuste exato do Deposito / theme-27 */

/* Depósito on-line + percentual */
html.theme-27.new-skin-symbol .pay-list.theme-27[data-v-3c3d7389] ion-segment-button[data-v-0c1a4ff7] {
  min-width: 10.75rem !important;
  --padding-start: 16px !important;
  --padding-end: 34px !important;
  overflow: visible !important;
}

html.theme-27.new-skin-symbol .pay-list.theme-27[data-v-3c3d7389] ion-segment-button[data-v-0c1a4ff7]::part(native) {
  white-space: nowrap !important;
  overflow: visible !important;
}

html.theme-27.new-skin-symbol .pay-list.theme-27[data-v-3c3d7389] .tag[data-v-0c1a4ff7] {
  right: 0 !important;
}

/* Canal PIX + selo Recomendado */
html.theme-27.new-skin-symbol ion-content[data-v-3c3d7389] .channel-wrap.sub-tab[data-v-53ac9577] .channel-list.tag-list[data-v-53ac9577] li[data-v-53ac9577] {
  min-width: 7.25rem !important;
}

html.theme-27.new-skin-symbol ion-content[data-v-3c3d7389] .channel-wrap.sub-tab[data-v-53ac9577] .channel-list.tag-list[data-v-53ac9577] li .tag[data-v-53ac9577] {
  width: 5.75rem !important;
  right: .25rem !important;
}

html.theme-27.new-skin-symbol ion-content[data-v-3c3d7389] .channel-wrap.sub-tab[data-v-53ac9577] .channel-list.tag-list[data-v-53ac9577] li .tag i[data-v-53ac9577] {
  white-space: nowrap !important;
}
/* FQA-13 - separacao vertical Recomendado / PIX */
html.theme-27.new-skin-symbol ion-content[data-v-3c3d7389] .channel-wrap.sub-tab[data-v-53ac9577] .channel-list.tag-list[data-v-53ac9577] {
  height: 3rem !important;
  align-items: stretch !important;
}

html.theme-27.new-skin-symbol ion-content[data-v-3c3d7389] .channel-wrap.sub-tab[data-v-53ac9577] .channel-list.tag-list[data-v-53ac9577] li[data-v-53ac9577] {
  height: 2.75rem !important;
  line-height: 1rem !important;
  padding-top: 1.35rem !important;
  padding-bottom: .35rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.theme-27.new-skin-symbol ion-content[data-v-3c3d7389] .channel-wrap.sub-tab[data-v-53ac9577] .channel-list.tag-list[data-v-53ac9577] li .tag[data-v-53ac9577] {
  top: .125rem !important;
  right: 50% !important;
  transform: translateX(50%) !important;
}
/* FQA-14 - withdrawSubView tabs nativos */
html.new-skin-symbol .do-withdraw-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-height: 3.25rem !important;
  background: var(--ep-color-background-fill-surface-lowered) !important;
  border-bottom: .0625rem solid var(--ep-color-border-default) !important;
}

html.new-skin-symbol .do-withdraw-tab {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 3.25rem !important;
  margin: 0 !important;
  padding: 0 .5rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--ep-color-text-weaker) !important;
  font-family: Saira, sans-serif !important;
  font-size: var(--ep-font-size-m) !important;
  font-weight: var(--ep-font-weight-regular) !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  cursor: pointer !important;
}

html.new-skin-symbol .do-withdraw-tab.active {
  color: var(--ep-color-text-selected) !important;
  font-weight: var(--ep-font-weight-bold) !important;
}

html.new-skin-symbol .do-withdraw-tab.active::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  background: var(--ep-color-text-selected) !important;
}
/* =========================================================
   FQA-PROVIDER-BUTTONS-ONLY-V1
   SOMENTE cards dos provedores.
   Não alterar rail, scroll ou setas.
   ========================================================= */

body #stickyElement
ion-segment.do-provider-rail-v2
> ion-segment-button {
  flex: 0 0 64px !important;

  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;

  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;

  margin-left: 2px !important;
  margin-right: 2px !important;

  padding: 0 !important;

  --padding-start: 0 !important;
  --padding-end: 0 !important;
}

body #stickyElement
ion-segment.do-provider-rail-v2
> ion-segment-button::part(native) {
  box-sizing: border-box !important;

  width: 64px !important;
  height: 58px !important;

  padding: 5px 3px 4px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 2px !important;

  border-radius: 10px !important;

  background:
    linear-gradient(
      180deg,
      rgba(31,37,48,.98),
      rgba(23,28,37,.98)
    ) !important;

  border:
    1px solid rgba(255,255,255,.10) !important;

  overflow: hidden !important;
}

body #stickyElement
ion-segment.do-provider-rail-v2
> ion-segment-button.segment-button-checked::part(native) {
  border-color:
    var(--seven-primary,#ff6b35) !important;
}

body #stickyElement
ion-segment.do-provider-rail-v2
.btn-wall {
  display: none !important;
}

body #stickyElement
ion-segment.do-provider-rail-v2
.do-provider-logo {
  display: block !important;

  width: 42px !important;
  max-width: 42px !important;

  height: 26px !important;
  max-height: 26px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  transform: none !important;
}

body #stickyElement
ion-segment.do-provider-rail-v2
.do-provider-name {
  display: block !important;

  width: 58px !important;
  max-width: 58px !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 8px !important;
  line-height: 10px !important;
  font-weight: 700 !important;

  text-align: center !important;
  white-space: nowrap !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;

  transform: none !important;
}

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

/* =========================================================
   FQA-PROVIDER-BUTTONS-ONLY-V2
   Somente conteúdo visual dos cards e setas.
   NÃO altera estrutura/scroll do rail.
   ========================================================= */

/* Logos maiores */
body #stickyElement
ion-segment.do-provider-rail-v2
.do-provider-logo {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;

  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;

  margin: 0 auto 1px !important;

  object-fit: contain !important;
  object-position: center !important;

  transform: none !important;
}

/* Nome compacto */
body #stickyElement
ion-segment.do-provider-rail-v2
.do-provider-name {
  width: 59px !important;
  max-width: 59px !important;

  margin: 0 !important;

  font-size: 8px !important;
  line-height: 9px !important;
}

/*
 * Mantém os botões de navegação originais.
 * Esconde somente o desenho/texto antigo e redesenha o chevron.
 */
body #stickyElement .do-provider-prev,
body #stickyElement .do-provider-next {
  display: flex !important;

  position: absolute !important;
  z-index: 50 !important;

  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 20px !important;
  min-width: 20px !important;

  height: 48px !important;

  padding: 0 !important;
  margin: 0 !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;

  border: 0 !important;

  background: rgba(13,17,22,.90) !important;
  color: transparent !important;

  text-shadow: none !important;
  box-shadow: none !important;
}

body #stickyElement .do-provider-prev {
  left: 0 !important;
  border-radius: 0 8px 8px 0 !important;
}

body #stickyElement .do-provider-next {
  right: 0 !important;
  border-radius: 8px 0 0 8px !important;
}

body #stickyElement .do-provider-prev > *,
body #stickyElement .do-provider-next > * {
  opacity: 0 !important;
}

body #stickyElement .do-provider-prev::before,
body #stickyElement .do-provider-next::before {
  display: block !important;

  color: var(--seven-primary,#ff6b35) !important;

  font-family: Arial,sans-serif !important;
  font-size: 27px !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  opacity: 1 !important;

  transform: translateY(-1px) !important;
}

body #stickyElement .do-provider-prev::before {
  content: "‹" !important;
}

body #stickyElement .do-provider-next::before {
  content: "›" !important;
}

/* =========================================================
   FQA-PROVIDER-ARROWS-ORIGINAL-V1
   Retorna ao desenho original anterior.
   ========================================================= */

body #stickyElement {
  padding-right: 23px !important;
}

/* Neutraliza as setas artificiais criadas depois */
body #stickyElement .do-provider-prev::before,
body #stickyElement .do-provider-next::before {
  display: none !important;
  content: none !important;
}

body #stickyElement .do-provider-prev > *,
body #stickyElement .do-provider-next > * {
  opacity: 1 !important;
}

/* Estilo original */
body #stickyElement .do-provider-prev {
  position: absolute !important;
  z-index: 8 !important;

  left: 0 !important;
  top: 50% !important;

  transform: translateY(-50%) !important;

  width: 23px !important;
  min-width: 23px !important;
  height: 44px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  color:
    var(
      --color-primary-600,
      var(--seven-primary)
    ) !important;

  font-size: 29px !important;
  font-weight: 900 !important;
  line-height: 44px !important;

  text-shadow: none !important;
  box-shadow: none !important;

  cursor: pointer !important;
}

body #stickyElement .do-provider-next {
  position: absolute !important;
  z-index: 8 !important;

  right: 0 !important;
  top: 50% !important;

  transform: translateY(-50%) !important;

  width: 23px !important;
  min-width: 23px !important;
  height: 44px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  color:
    var(
      --color-primary-600,
      var(--seven-primary)
    ) !important;

  font-size: 29px !important;
  font-weight: 900 !important;
  line-height: 44px !important;

  text-shadow: none !important;
  box-shadow: none !important;

  cursor: pointer !important;
}


/* =========================================================
   FQA-A77-LOGO-SIZE-V1
   Logo maior dentro do MESMO botão atual.
   ========================================================= */

body #stickyElement
ion-segment.do-provider-rail-v2
.do-provider-logo {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;

  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;

  margin: 0 auto 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  background: transparent !important;
  border: 0 !important;

  transform: none !important;
}

body #stickyElement
ion-segment.do-provider-rail-v2
.do-provider-name {
  margin-top: 0 !important;

  font-size: 8px !important;
  line-height: 9px !important;

  transform: none !important;
}

/* =========================================================
   FQA-ARROWS-ASCII-FINAL-V1
   ASCII puro para evitar mojibake de ‹ ›.
   ========================================================= */

body #stickyElement .do-provider-prev::before,
body #stickyElement .do-provider-prev::after,
body #stickyElement .do-provider-next::before,
body #stickyElement .do-provider-next::after {
  content: none !important;
  display: none !important;
}

body #stickyElement .do-provider-prev,
body #stickyElement .do-provider-next {
  position: absolute !important;
  z-index: 50 !important;

  top: 50% !important;
  transform: translateY(-50%) !important;

  display: block !important;

  width: 23px !important;
  min-width: 23px !important;
  height: 44px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  color:
    var(
      --color-primary-600,
      var(--seven-primary,#ff6b35)
    ) !important;

  font-family: Arial,sans-serif !important;
  font-size: 25px !important;
  line-height: 44px !important;
  font-weight: 700 !important;

  letter-spacing: 0 !important;
  text-align: center !important;
  text-indent: 0 !important;
  text-shadow: none !important;

  box-shadow: none !important;

  opacity: 1 !important;
}

body #stickyElement .do-provider-prev {
  left: 0 !important;
}

body #stickyElement .do-provider-next {
  right: 0 !important;
}

/* Logo grande e limpa dentro dos mesmos cards atuais */
body #stickyElement
ion-segment.do-provider-rail-v2
.do-provider-logo {
  width: 54px !important;
  max-width: 54px !important;

  height: 32px !important;
  max-height: 32px !important;

  margin: 0 auto !important;

  object-fit: contain !important;
  object-position: center !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
}

/* =========================================================
   FQA-RAIL-STYLE-A77-ONLY-V1
   Apenas visual do carrossel:
   - mantém nossos provedores / disponibilidade / home_sort
   - não copia provedores da A77
   - copia só a linguagem visual do rail
   ========================================================= */

body #stickyElement {
  position: relative !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* trilho */
body #stickyElement ion-segment.do-provider-rail-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* botões */
body #stickyElement
ion-segment.do-provider-rail-v2
> ion-segment-button {
  flex: 0 0 58px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;

  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;

  margin: 0 2px !important;
  padding: 0 !important;

  --padding-start: 0 !important;
  --padding-end: 0 !important;
  --padding-top: 0 !important;
  --padding-bottom: 0 !important;
}

body #stickyElement
ion-segment.do-provider-rail-v2
> ion-segment-button::part(native) {
  box-sizing: border-box !important;

  width: 58px !important;
  height: 58px !important;

  padding: 5px 3px 4px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 2px !important;

  border-radius: 10px !important;

  background:
    linear-gradient(
      180deg,
      rgba(18, 20, 58, 0.98) 0%,
      rgba(9, 12, 42, 0.98) 100%
    ) !important;

  border: 1px solid rgba(111, 94, 255, 0.75) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 0 0 1px rgba(0,0,0,0.08) !important;

  overflow: hidden !important;
}

body #stickyElement
ion-segment.do-provider-rail-v2
> ion-segment-button.segment-button-checked::part(native) {
  border-color: var(--seven-primary, #ff6b35) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 0 10px rgba(255,107,53,0.08) !important;
}

body #stickyElement
ion-segment.do-provider-rail-v2
.btn-wall,
body #stickyElement
ion-segment.do-provider-rail-v2
.segment-button-indicator {
  display: none !important;
}

/* logos dos nossos provedores */
body #stickyElement
ion-segment.do-provider-rail-v2
.do-provider-logo {
  display: block !important;

  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;

  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;

  margin: 0 auto 1px !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;

  transform: none !important;
}

/* nome pequeno embaixo, igual linguagem A77 */
body #stickyElement
ion-segment.do-provider-rail-v2
.do-provider-name {
  display: block !important;

  width: 52px !important;
  max-width: 52px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: rgba(255,255,255,0.90) !important;

  font-size: 8px !important;
  line-height: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;

  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  transform: none !important;
}

body #stickyElement
ion-segment.do-provider-rail-v2
> ion-segment-button.segment-button-checked
.do-provider-name {
  color: #ffffff !important;
}

/* setas simples como antes */
body #stickyElement .do-provider-prev,
body #stickyElement .do-provider-next {
  position: absolute !important;
  z-index: 60 !important;

  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;

  height: 44px !important;
  min-height: 44px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;

  color: var(--seven-primary, #ff6b35) !important;

  font-family: Arial, sans-serif !important;
  font-size: 22px !important;
  line-height: 44px !important;
  font-weight: 700 !important;

  text-align: center !important;
  text-shadow: none !important;
  box-shadow: none !important;

  overflow: visible !important;
  opacity: 1 !important;
}

body #stickyElement .do-provider-prev {
  left: 2px !important;
}

body #stickyElement .do-provider-next {
  right: 2px !important;
}

/* mata qualquer pseudo seta antiga quebrada */
body #stickyElement .do-provider-prev::before,
body #stickyElement .do-provider-prev::after,
body #stickyElement .do-provider-next::before,
body #stickyElement .do-provider-next::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   FQA-RAIL-DARKORANGE-V2
   Geometria inspirada no rail A77.
   Cores continuam sendo Seven7/DarkOrange.
   ========================================================= */

body #stickyElement {
  position: relative !important;

  padding-left: 23px !important;
  padding-right: 23px !important;
}


/* trilho existente */
body #stickyElement
ion-segment.do-provider-rail-v2 {
  gap: 4px !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  background: transparent !important;
}


/* cards maiores */
body #stickyElement
ion-segment.do-provider-rail-v2
> ion-segment-button {
  flex: 0 0 64px !important;

  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;

  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;

  margin: 0 2px !important;
  padding: 0 !important;

  --padding-start: 0 !important;
  --padding-end: 0 !important;
  --padding-top: 0 !important;
  --padding-bottom: 0 !important;
}


body #stickyElement
ion-segment.do-provider-rail-v2
> ion-segment-button::part(native) {
  box-sizing: border-box !important;

  width: 64px !important;
  height: 64px !important;

  padding: 6px 4px 5px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 2px !important;

  border-radius: 10px !important;

  /*
   * CINZA/PRETO do nosso tema.
   * Não azul/roxo A77.
   */
  background:
    linear-gradient(
      180deg,
      #252a33 0%,
      #1a1e25 100%
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.10) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.035) !important;

  overflow: hidden !important;
}


/* selecionado acompanha a identidade do tenant */
body #stickyElement
ion-segment.do-provider-rail-v2
> ion-segment-button.segment-button-checked::part(native) {
  border-color:
    var(
      --color-primary-600,
      var(--seven-primary,#ff6b35)
    ) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.04),
    0 0 0 1px
      rgba(255,107,53,.08) !important;
}


/* logo maior */
body #stickyElement
ion-segment.do-provider-rail-v2
.do-provider-logo {
  display: block !important;

  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;

  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;

  margin: 0 auto 1px !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  transform: none !important;
}


/* nome */
body #stickyElement
ion-segment.do-provider-rail-v2
.do-provider-name {
  width: 58px !important;
  max-width: 58px !important;

  margin: 0 !important;
  padding: 0 !important;

  color:
    rgba(255,255,255,.88) !important;

  font-size: 8px !important;
  line-height: 9px !important;
  font-weight: 700 !important;

  text-align: center !important;
  text-transform: uppercase !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  transform: none !important;
}


/* remove qualquer pseudo-seta criada nos testes */
body #stickyElement
.do-provider-prev::before,
body #stickyElement
.do-provider-prev::after,
body #stickyElement
.do-provider-next::before,
body #stickyElement
.do-provider-next::after {
  content: none !important;
  display: none !important;
}


/*
 * SETAS COMO O RAIL ORIGINAL:
 * transparentes, estreitas e fora dos cards.
 */
body #stickyElement
.do-provider-prev,
body #stickyElement
.do-provider-next {
  position: absolute !important;

  z-index: 80 !important;

  top: 50% !important;

  transform:
    translateY(-50%) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 23px !important;
  min-width: 23px !important;
  max-width: 23px !important;

  height: 50px !important;
  min-height: 50px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  color:
    var(
      --color-primary-600,
      var(--seven-primary,#ff6b35)
    ) !important;

  font-family:
    Arial,
    sans-serif !important;

  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  text-align: center !important;

  text-shadow: none !important;
  box-shadow: none !important;

  overflow: visible !important;

  opacity: 1 !important;

  cursor: pointer !important;
}


body #stickyElement
.do-provider-prev {
  left: 0 !important;
}


body #stickyElement
.do-provider-next {
  right: 0 !important;
}


/* =========================================================
   FQA-CATEGORY-PROVIDER-LOGO-CSS-V2
   Mesma logo usada no rail, agora na página de categoria.
   ========================================================= */

.category-container
ion-segment-button
.do-category-provider-logo {
  display: block !important;

  width: 32px !important;
  max-width: 32px !important;

  height: 22px !important;
  max-height: 22px !important;

  margin:
    2px auto 2px !important;

  padding: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
}

/* =========================================================
   FQA-PROVIDER-LOGO-SIZE-FINAL-V1
   Só tamanho das marcas.
   ========================================================= */

/* HOME */
body #stickyElement
ion-segment.do-provider-rail-v2
.do-provider-logo {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;

  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;

  margin: 0 auto 0 !important;

  object-fit: contain !important;
  object-position: center !important;
}

/* CATEGORIA / SLOT */
.category-container
.do-category-provider-logo {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;

  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;

  object-fit: contain !important;
}

/* EXPANDIR */
ion-menu.do-drawer-premium
.do-drawer-provider-logo {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;

  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;

  object-fit: contain !important;
}

/* FQA-PROVIDER-DESC-GATE-V3-BEGIN */

@keyframes fqaProviderDescGateV3FailOpen {
  from {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  to {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

/*
 * O ion-segment pode estar dentro de wrappers do Vue.
 * Portanto usamos descendant selector, sem ">".
 */
body #stickyElement ion-segment:not(.do-provider-rail-v2) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;

  animation:
    fqaProviderDescGateV3FailOpen
    0.001s
    linear
    3s
    forwards;
}

body #stickyElement ion-segment.do-provider-rail-v2 {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  animation: none !important;
}

/* FQA-PROVIDER-DESC-GATE-V3-END */

/* FQA-GAME-BUOY-COIN-HIDE-V1-BEGIN
   The native Layout27 login/account card is collapsed on the FQA Home.
   Its decorative ::after remained visible outside the zero-height card
   and rendered content-bg27 as a floating coin stack over provider rail.
   Scope this override only to the residual child of #game-buoy.
*/
body.home-type-Platform
#game-buoy > .content-box.layout27::after {
  display: none !important;
  content: none !important;
  background: none !important;
}
/* FQA-GAME-BUOY-COIN-HIDE-V1-END */

/* FQA-STATUS-MOBILE-CENTER-CLEAN-V1-BEGIN */
@media (max-width:767px){
  .do-status-rail{
    justify-content:center !important;
  }
}
/* FQA-STATUS-MOBILE-CENTER-CLEAN-V1-END */


/* FQA-SEARCH-DARKORANGE-V1-BEGIN */
html.theme-27 .search-container{
  background:#0d1119!important;
  min-height:100%;
}

html.theme-27 .search-container ion-header{
  box-shadow:none!important;
}

html.theme-27 .search-container ion-header ion-toolbar{
  --background:#111827!important;
  --color:#f8fafc!important;
  --border-width:0!important;
}

html.theme-27 .search-container ion-header ion-toolbar:first-child{
  --min-height:52px!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
}

html.theme-27 .search-container ion-header ion-title{
  font-weight:750!important;
  font-size:15px!important;
  letter-spacing:-.15px!important;
}

html.theme-27 .search-container .toolbar-search{
  --background:#111827!important;
  padding:7px 10px 10px!important;
}

html.theme-27 .search-container #searchbar{
  --background:#1a2230!important;
  --color:#fff!important;
  --placeholder-color:#7f8999!important;
  --placeholder-opacity:1!important;
  --icon-color:#ff6a19!important;
  --clear-button-color:#9ca3af!important;
  --border-radius:11px!important;
  padding:0!important;
  min-height:42px!important;
  border:1px solid rgba(255,106,25,.20)!important;
  border-radius:11px!important;
}

html.theme-27 .search-container #searchbar.searchbar-has-focus{
  border-color:rgba(255,106,25,.58)!important;
  box-shadow:0 0 0 2px rgba(255,106,25,.08)!important;
}

html.theme-27 .search-container > ion-content,
html.theme-27 .search-container .container{
  --background:#0d1119!important;
  background:#0d1119!important;
}

html.theme-27 .search-container ion-segment{
  --background:#111722!important;
  background:#111722!important;
  padding:5px 7px!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
}

html.theme-27 .search-container ion-segment-button{
  --color:#8c96a7!important;
  --color-checked:#ff6a19!important;
  --indicator-color:transparent!important;
  min-width:0!important;
  min-height:40px!important;
  font-size:11px!important;
  font-weight:650!important;
  text-transform:none!important;
  letter-spacing:0!important;
}

html.theme-27 .search-container ion-segment-button::part(indicator-background){
  background:transparent!important;
}

html.theme-27 .search-container ion-segment-button.segment-button-checked{
  background:rgba(255,106,25,.075)!important;
  border-radius:9px!important;
}

html.theme-27 .search-container .tab-icon{
  margin-right:4px!important;
  font-size:14px!important;
}

html.theme-27 .search-container .game-box{
  padding:9px 7px 80px!important;
}

html.theme-27 .search-container .game-item{
  border-radius:10px!important;
  overflow:hidden!important;
  background:#161d29!important;
  box-shadow:0 2px 8px rgba(0,0,0,.22)!important;
}

html.theme-27 .search-container .game-item img,
html.theme-27 .search-container .game-item ion-img{
  border-radius:10px!important;
  overflow:hidden!important;
}

html.theme-27 .search-container .empty{
  color:#7e8795!important;
}
/* FQA-SEARCH-DARKORANGE-V1-END */