/* ======================================================
 * MaxwinBR Custom Skin (base: MystLightBlue)
 *
 * Paleta:
 *   --maxwin-bg-page:  #A8E5F0  fundo turquesa claro
 *   --maxwin-bg-card:  #FFFFFF  cards brancos
 *   --maxwin-accent:   #5DCDE3  header/bottombar turquesa
 *   --maxwin-orange:   #FF8A3D  botão Entrar
 *   --maxwin-text:     #1B2240
 * ====================================================== */

:root {
  --maxwin-bg-page: rgb(112, 227, 232);
  --maxwin-bg-card: #FFFFFF;
  --maxwin-accent: #5DCDE3;
  --maxwin-accent-dark: #4AB8D0;
  --maxwin-orange: #FF8A3D;
  --maxwin-orange-hover: #FF7028;
  --maxwin-text: #1B2240;
}

/* ===== Background turquesa em toda a página ===== */
html.mystlight-blue,
html.mystlight-blue body,
html.mystlight-blue ion-app,
html.mystlight-blue ion-content {
  --ion-background-color: var(--maxwin-bg-page) !important;
}

html.mystlight-blue body {
  background: rgb(112, 227, 232) !important;
  background-attachment: fixed !important;
}

html.mystlight-blue ion-content::part(scroll) {
  background: transparent !important;
}

/* ===== Header turquesa ===== */
html.mystlight-blue ion-toolbar.toolbar {
  --background: #D1F2FF !important;
  background: #D1F2FF !important;
  --color: #1B2240 !important;
  --border-color: transparent !important;
  --min-height: 56px !important;
}

/* ===== Header logo container ===== */
html.mystlight-blue .pwa-header-wrap {
  background: #FFFFFF !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}
html.mystlight-blue .pwa-header-wrap .pwa-name {
  color: #1B2240 !important;
  font-weight: 600 !important;
}
html.mystlight-blue .pwa-header-wrap .close-icon {
  color: #1B2240 !important;
  opacity: 0.7 !important;
}
html.mystlight-blue .pwa-header-wrap .close-btn-bg {
  background: transparent !important;
}

/* ===== Botão "Entrar" laranja ===== */
html.mystlight-blue ion-button.unset-btn.login {
  --background: #F34938 !important;
  --background-activated: #D33A2A !important;
  --background-hover: #D33A2A !important;
  --background-focused: #D33A2A !important;
  --color: #FFFFFF !important;
  --color-activated: #FFFFFF !important;
  font-weight: 700 !important;
  --border-radius: 12px !important;
}

/* ===== Botão "Registro" turquesa escuro ===== */
html.mystlight-blue ion-button.unset-btn.register {
  --background: linear-gradient(90deg, #5DCDE3 0%, #B879E6 50%, #F25C8F 100%) !important;
  background: linear-gradient(90deg, #5DCDE3 0%, #B879E6 50%, #F25C8F 100%) !important;
  --background-activated: linear-gradient(90deg, #4AB8D0 0%, #A263D0 50%, #D8467A 100%) !important;
  --color: #FFFFFF !important;
  font-weight: 700 !important;
  --border-radius: 12px !important;
}

/* ===== Tag de reward (R$+X) sobre o botão registro ===== */
html.mystlight-blue .rewardTag .tag {
  background: linear-gradient(45deg, #FFD54F, #FF8A3D) !important;
  color: #FFFFFF !important;
}
html.mystlight-blue .rewardTag .merchantCy,
html.mystlight-blue .rewardTag .reward-amount {
  color: #FFFFFF !important;
}

/* ===== Marquee/aviso rolante ===== */
html.mystlight-blue .marquee-wrapper,
html.mystlight-blue .megaphone-wrapper {
  background-color: #70E3E8 !important;
  background: #70E3E8 !important;
  border: none !important;
  border-radius: 999px !important;
  width: 100% !important;
  padding-left: 1rem !important;
}
html.mystlight-blue .megaphone-wrapper .marquee__item,
html.mystlight-blue .megaphone-wrapper .marquee,
html.mystlight-blue .megaphone-wrapper * {
  color: #FFFFFF !important;
}
html.mystlight-blue .marquee__item {
  color: var(--maxwin-text) !important;
}

/* ===== Banner principal (swiper) ===== */
html.mystlight-blue .swiper-poster {
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(93, 205, 227, 0.3) !important;
  overflow: hidden;
}
html.mystlight-blue .swiper-pagination-bullet-active {
  background: var(--maxwin-orange) !important;
}

/* ===== Tabs categoria (Popular, PG, PP, SPRIBE…) ===== */
html.mystlight-blue ion-segment-button .btn-wall {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border: 1.5px solid rgba(93, 205, 227, 0.4) !important;
  border-radius: 14px !important;
  transition: all 0.2s ease;
}

html.mystlight-blue ion-segment-button.segment-button-checked .btn-wall {
  background-color: #FFFFFF !important;
  border-color: var(--maxwin-orange) !important;
  box-shadow: 0 3px 10px rgba(255, 138, 61, 0.35) !important;
}

html.mystlight-blue ion-segment-button .label {
  color: var(--maxwin-text) !important;
  font-weight: 600 !important;
}

html.mystlight-blue ion-segment-button .sub-label {
  color: #6B7280 !important;
}

/* ===== Cards de jogos ===== */
html.mystlight-blue .game-card,
html.mystlight-blue .style1.game-card {
  background-color: var(--maxwin-bg-card) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden;
}

/* ===== Game wrapper "Popular", "PG Slot" etc — títulos de seção ===== */
html.mystlight-blue .game-head .title-c .label {
  color: var(--maxwin-text) !important;
  font-weight: 700 !important;
}

html.mystlight-blue .total .label,
html.mystlight-blue .total .number {
  color: var(--maxwin-text) !important;
}

/* ===== Bottom tab bar turquesa ===== */
html.mystlight-blue ion-tab-bar.tab-bar {
  --background: var(--maxwin-accent) !important;
  background: var(--maxwin-accent) !important;
  --color: rgba(255, 255, 255, 0.85) !important;
  --color-selected: #FFFFFF !important;
  border-top: 2px solid var(--maxwin-accent-dark) !important;
}

html.mystlight-blue .tab-btn .tab-label,
html.mystlight-blue .tab-btn ion-label {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600 !important;
}

html.mystlight-blue .active-tab.tab-btn ion-label,
html.mystlight-blue .active-tab.tab-btn .tab-label {
  color: #FFFD80 !important;
  font-weight: 700 !important;
}

/* Botão central da bottombar (Convidar) com destaque laranja */
html.mystlight-blue .flexible-tab .flexible-tab-box {
  filter: drop-shadow(0 2px 8px rgba(255, 138, 61, 0.5));
}

/* ===== Drawer (menu lateral) ===== */
html.mystlight-blue ion-menu ion-content {
  --background: var(--maxwin-bg-page) !important;
}

html.mystlight-blue ion-menu ion-toolbar.header-logo {
  --background: var(--maxwin-accent) !important;
}

html.mystlight-blue ion-menu .hot-game-box,
html.mystlight-blue ion-menu .platform-item {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 12px !important;
}

/* ===== Drop-down (Provedor de jogos) ===== */
html.mystlight-blue .drop-down {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: var(--maxwin-accent) !important;
  border-radius: 12px !important;
}

/* ===== Footer ===== */
html.mystlight-blue .footer-container {
  background: transparent !important;
}

html.mystlight-blue .footer-container .content-item {
  color: var(--maxwin-text) !important;
}

html.mystlight-blue .version-box .subtitle {
  color: rgba(27, 34, 64, 0.7) !important;
}

/* ===== Botões iOS/Android download ===== */
html.mystlight-blue .ios-btn,
html.mystlight-blue .android-btn {
  background: var(--maxwin-accent-dark) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
}

html.mystlight-blue .ios-btn .text,
html.mystlight-blue .android-btn .text {
  color: #FFFFFF !important;
}

/* ===== Support flutuante ===== */
html.mystlight-blue .support {
  filter: drop-shadow(0 2px 8px rgba(93, 205, 227, 0.6));
}

/* ===== Modal de instalar PWA (header) ===== */
html.mystlight-blue .pwa-header-wrap .btn-default {
  background: linear-gradient(90deg, #5DCDE3 0%, #B879E6 50%, #F25C8F 100%) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 0.5rem 1.25rem !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(184, 121, 230, 0.4) !important;
}
html.mystlight-blue .pwa-header-wrap .btn-default .btn-text,
html.mystlight-blue .pwa-header-wrap .btn-default .download-svg {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* ===== Texto geral ===== */
html.mystlight-blue {
  color: var(--maxwin-text);
}

/* ===== Modais ===== */
html.mystlight-blue ion-modal {
  --background: var(--maxwin-bg-page) !important;
}




/* ======================================================
 * TAB BAR (inferior) — usando IMAGENS REAIS do maxwin
 * ====================================================== */

html.mystlight-blue ion-tab-bar.tab-bar.layout1 {
  --tab-bar-height: 5.25rem !important;
  --background: transparent !important;
  background: transparent !important;
  height: 5.25rem !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* Fundo "ilha" usando o SVG REAL do maxwin */
html.mystlight-blue ion-tab-bar.tab-bar.layout1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/assets/bg-tabbar-39-BLWQM41F.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  filter: drop-shadow(0 -2px 8px rgba(0, 0, 0, 0.06));
  pointer-events: none;
}

html.mystlight-blue ion-tab-bar.tab-bar.layout1 .inner-wrap {
  height: 100% !important;
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  padding-top: 0.375rem !important;
}

html.mystlight-blue ion-tab-bar .background-img {
  display: none !important;
}

/* Tab item */
html.mystlight-blue ion-tab-bar .tab-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  height: 100% !important;
  position: relative !important;
  gap: 0.25rem !important;
}

html.mystlight-blue ion-tab-bar .tab-btn .tab-img {
  width: 1.875rem !important;
  height: 1.875rem !important;
  filter: none !important;
  opacity: 1 !important;
}

html.mystlight-blue ion-tab-bar .tab-btn .tab-label {
  color: #1B2240 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  line-height: 1 !important;
}

html.mystlight-blue ion-tab-bar .active-tab.tab-btn .tab-label {
  color: #F25C8F !important;
  font-weight: 700 !important;
}

html.mystlight-blue ion-tab-bar .active-tab.tab-btn::before {
  content: "";
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 2rem;
  height: 0.1875rem;
  background: linear-gradient(90deg,
    rgba(242, 92, 143, 0) 0%,
    #F25C8F 50%,
    rgba(242, 92, 143, 0) 100%);
  border-radius: 999px;
}

/* === Botão central com IMAGEM REAL do anel maxwin === */
html.mystlight-blue ion-tab-bar .flexible-tab {
  flex: 0 0 auto !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 4.5rem !important;
}

html.mystlight-blue ion-tab-bar .flexible-tab-box {
  width: 3.75rem !important;
  height: 3.75rem !important;
  border-radius: 50% !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -1.25rem !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: 0 6px 18px rgba(93, 205, 227, 0.45) !important;
  overflow: visible !important;
}

/* Anel turquesa REAL do maxwin (bg-flexible-39) — GIRANDO */
html.mystlight-blue ion-tab-bar .flexible-img-ring {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  background-image: url("/assets/bg-flexible-39-CQX7uY1u.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: none !important;
  opacity: 1 !important;
  animation: maxwin-ring-spin 4s linear infinite;
}

/* Esconde o ion-img interno do ring (a imagem que o Vue carrega) */
html.mystlight-blue ion-tab-bar .flexible-img-ring img,
html.mystlight-blue ion-tab-bar .flexible-img-ring .img-box {
  opacity: 0 !important;
}

@keyframes maxwin-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Baú principal — imagem REAL do maxwin (flexible-39) */
html.mystlight-blue ion-tab-bar .flexible-img-main {
  position: relative !important;
  z-index: 2 !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  background-image: url("/assets/flexible-39-DuAa-dUz.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: none !important;
}

/* Esconde o ion-img interno do main */
html.mystlight-blue ion-tab-bar .flexible-img-main img,
html.mystlight-blue ion-tab-bar .flexible-img-main .img-box {
  opacity: 0 !important;
}

html.mystlight-blue ion-tab-bar .flexible-tab .tab-label {
  margin-top: 1.5rem !important;
  color: #1B2240 !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
}

/* Esconde label 'convidar' do bot�o central */
html.mystlight-blue ion-tab-bar .flexible-tab .tab-label {
  display: none !important;
}

/* Esconde wrapper espec�fico (CashBack/Mina Misteriosa duplo banner) */
html.mystlight-blue [data-v-aedda076].wrapper.layout1 {
  display: none !important;
}

/* === Bot�es Entrar/Registro: for�a via ::part(native) === */
html.mystlight-blue ion-button.unset-btn.login::part(native) {
  background: #F34938 !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

html.mystlight-blue ion-button.unset-btn.register::part(native) {
  background: linear-gradient(90deg, #5DCDE3 0%, #B879E6 50%, #F25C8F 100%) !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

/* === Esconde badge-img === */
html.mystlight-blue .badge-img,
html.mystlight-blue img.badge-img {
  display: none !important;
}

/* === Marquee/not�cia FULL WIDTH com fundo D1F2FF === */
html.mystlight-blue .marquee-wrapper {
  padding-left: 5px !important;
  padding-right: 5px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html.mystlight-blue .megaphone-wrapper {
  background-color: #70E3E8 !important;
  background: #70E3E8 !important;
  border: none !important;
  border-radius: 999px !important;
  width: 100% !important;
  padding-left: 1rem !important;
}
html.mystlight-blue .megaphone-wrapper .marquee__item,
html.mystlight-blue .megaphone-wrapper .marquee,
html.mystlight-blue .megaphone-wrapper * {
  color: #FFFFFF !important;
}

/* Esconde bot�o de pesquisar ao lado do marquee */
html.mystlight-blue .marquee-wrapper ion-button.icon-btn,
html.mystlight-blue [data-v-42d4113a].icon-btn {
  display: none !important;
}

/* Marquee agora ocupa 100% sem o bot�o */
html.mystlight-blue .marquee-wrapper .megaphone-wrapper {
  margin-right: 0 !important;
  flex: 1 1 100% !important;
}

/* === Headers de se��o de jogos (Popular / PG / PP / SPRIBE / Tada) === */
html.mystlight-blue .game-head {
  background: linear-gradient(90deg, #5DCDE3 0%, #8BE3EC 50%, #B8EEF2 100%) !important;
  border-radius: 999px !important;
  padding: 0.5rem 1rem !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 2px 8px rgba(93, 205, 227, 0.3) !important;
  position: relative !important;
}

/* Caixa do logo (fogo + texto) */
html.mystlight-blue .game-head .logo-c {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
}

html.mystlight-blue .game-head .logo-c .wall.logo {
  width: 2.25rem !important;
  height: 2.25rem !important;
  background: linear-gradient(135deg, #FF8A3D 0%, #F25C8F 100%) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.375rem !important;
}

html.mystlight-blue .game-head .logo-c .wall.logo svg {
  width: 100% !important;
  height: 100% !important;
  color: #FFFFFF !important;
}

/* T�tulo da se��o (Popular, PG, PP, etc.) */
html.mystlight-blue .game-head .title-c .label {
  color: #1B2240 !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

/* Total/Todos � direita */
html.mystlight-blue .game-head .total {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  color: #FFFFFF !important;
}

html.mystlight-blue .game-head .total .label {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
}

html.mystlight-blue .game-head .total .number {
  display: none !important;
}

html.mystlight-blue .game-head .total::after {
  content: ">" !important;
  color: #FFFFFF !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  margin-left: 6px !important;
  line-height: 1 !important;
  transform: scaleY(1.4);
  display: inline-block;
}

/* === For�a chama do logo Popular a ser BRANCA === */
html.mystlight-blue .game-head .logo-c .wall.logo svg path,
html.mystlight-blue .game-head .logo-c .wall.logo svg g path {
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Esconde os SVG defs decorativos (svg-wall) � s� atrapalham */
html.mystlight-blue .game-head .logo-c .wall.logo .svg-wall {
  display: none !important;
}

/* Centraliza melhor */
html.mystlight-blue .game-head .logo-c .wall.logo .svg-container {
  width: 1.25rem !important;
  height: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.mystlight-blue .game-head .logo-c .wall.logo .svg-container svg {
  width: 100% !important;
  height: 100% !important;
}

/* === Tela de Slots/Provedores === */
/* Container principal da p�gina */
html.mystlight-blue .platform-content,
html.mystlight-blue .game-list-container,
html.mystlight-blue .games-page {
  background: #FFFFFF !important;
  border-radius: 1rem !important;
  padding: 0.75rem !important;
  margin: 0.5rem !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* Cards da lista de provedores (lateral) */
html.mystlight-blue .platform-item,
html.mystlight-blue .provider-item {
  background: #F0F8FB !important;
  border: 1px solid rgba(93, 205, 227, 0.2) !important;
  border-radius: 0.75rem !important;
  padding: 0.625rem !important;
  margin-bottom: 0.5rem !important;
  transition: all 0.2s ease !important;
}

html.mystlight-blue .platform-item.active,
html.mystlight-blue .provider-item.active {
  background: linear-gradient(135deg, #5DCDE3, #B879E6) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(93,205,227,0.35) !important;
}

html.mystlight-blue .platform-item.active .platform-item-label,
html.mystlight-blue .platform-item.active .label {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Chips de filtro (Todos, Popular, Recente, Favoritos) */
html.mystlight-blue .segment-scrollable ion-segment-button,
html.mystlight-blue .filter-chips ion-segment-button {
  --background: #FFFFFF !important;
  --background-checked: linear-gradient(90deg, #5DCDE3, #B879E6) !important;
  --color: #1B2240 !important;
  --color-checked: #FFFFFF !important;
  --border-radius: 999px !important;
  border: 1px solid rgba(93,205,227,0.3) !important;
  border-radius: 999px !important;
  margin: 0 4px !important;
}

/* Cards de jogos com mais destaque */
html.mystlight-blue .game-card,
html.mystlight-blue .style1.game-card {
  background-color: #FFFFFF !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12) !important;
  border: 2px solid transparent !important;
  transition: all 0.2s ease !important;
}

html.mystlight-blue .game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(93,205,227,0.35) !important;
  border-color: #5DCDE3 !important;
}

/* Header 'Slot' no topo da p�gina de provedores */
html.mystlight-blue ion-toolbar.in-toolbar.toolbar-platform,
html.mystlight-blue .page-title-bar {
  --background: #FFFFFF !important;
  --color: #1B2240 !important;
}

/* ============================================
 * TELA DE PROVEDORES (slot/jogos)
 * Scope: data-v-ed5e4738
 * ============================================ */

/* Container geral da página */
html.mystlight-blue [data-v-ed5e4738].container {
  background: #D1F2FF !important;
  border-radius: 1rem !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  padding: 0.5rem !important;
  margin: 0.5rem -15px !important;
  max-width: none !important;
  width: calc(100% + 30px) !important;
  display: flex !important;
  gap: 0.25rem !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  min-height: 60vh !important;
  align-items: stretch !important;
}

/* Sidebar de provedores (coluna esquerda) */
html.mystlight-blue ion-content[data-v-ed5e4738].side {
  --background: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  flex: 0 0 4rem !important;
  max-width: 4rem !important;
}

html.mystlight-blue ion-content[data-v-ed5e4738].side ion-segment.custom-segment {
  --background: transparent !important;
  background: transparent !important;
  height: auto !important;
  flex-direction: column !important;
}

html.mystlight-blue [data-v-ed5e4738].segment-scroll {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

/* Cada item da sidebar (provedor) */
html.mystlight-blue ion-content[data-v-ed5e4738].side ion-segment-button {
  --background: #FFFFFF !important;
  --background-checked: linear-gradient(135deg, #5DCDE3 0%, #B879E6 100%) !important;
  --color: #1B2240 !important;
  --color-checked: #FFFFFF !important;
  --border-radius: 0.625rem !important;
  --indicator-color: transparent !important;
  border: none !important;
  border-radius: 0.625rem !important;
  min-height: 2.75rem !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0.375rem 0.125rem !important;
  margin: 0 0 0.5rem 0 !important;
  text-transform: none !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
}

html.mystlight-blue ion-content[data-v-ed5e4738].side ion-segment-button.segment-button-checked {
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(93, 205, 227, 0.4) !important;
}

html.mystlight-blue ion-content[data-v-ed5e4738].side ion-segment-button .label {
  color: inherit !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  margin-top: 0.125rem !important;
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}

/* Área principal (lista de jogos) */
html.mystlight-blue ion-content[data-v-ed5e4738].ion-content {
  --background: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
}

/* Filtros (Todos / Popular / Recente / Favoritos) */
html.mystlight-blue ion-segment[data-v-ed5e4738].tab-bar {
  --background: transparent !important;
  background: transparent !important;
  margin-bottom: 0.625rem !important;
  display: flex !important;
  gap: 0.375rem !important;
  justify-content: flex-start !important;
}

html.mystlight-blue ion-segment-button[data-v-ed5e4738].btn {
  --background: #F0F8FB !important;
  --background-checked: linear-gradient(90deg, #5DCDE3 0%, #B879E6 100%) !important;
  --color: #1B2240 !important;
  --color-checked: #FFFFFF !important;
  --indicator-color: transparent !important;
  --border-radius: 999px !important;
  border: 1px solid rgba(93, 205, 227, 0.3) !important;
  border-radius: 999px !important;
  min-height: 2rem !important;
  min-width: auto !important;
  padding: 0.25rem 0.625rem !important;
  margin: 0 !important;
  text-transform: none !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
}

html.mystlight-blue ion-segment-button[data-v-ed5e4738].btn.segment-button-checked {
  border-color: transparent !important;
}

/* Cards de jogos */
html.mystlight-blue [data-v-ed5e4738] .game-card.game-item {
  background: #FFFFFF !important;
  border-radius: 0.75rem !important;
  border: 1px solid rgba(93, 205, 227, 0.15) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

html.mystlight-blue [data-v-ed5e4738] .game-card.game-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(93, 205, 227, 0.4) !important;
  border-color: #5DCDE3 !important;
}

html.mystlight-blue [data-v-ed5e4738] .card-col {
  padding: 0.25rem !important;
}


/* Centralizar �cones e labels da sidebar */
html.mystlight-blue ion-content[data-v-ed5e4738].side ion-segment-button::part(native) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0.25rem !important;
}

html.mystlight-blue ion-content[data-v-ed5e4738].side ion-segment-button ion-icon,
html.mystlight-blue ion-content[data-v-ed5e4738].side ion-segment-button ion-img {
  display: block !important;
  margin: 0 auto !important;
  width: 1rem !important;
  height: 1rem !important;
  font-size: 1rem !important;
}

html.mystlight-blue ion-content[data-v-ed5e4738].side ion-segment-button .label {
  color: inherit !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  margin-top: 0.125rem !important;
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}

/* Container unificado ao redor de toda a p�gina de Slots */
html.mystlight-blue [data-v-ed5e4738].container {
  background: #D1F2FF !important;
  border-radius: 1rem !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  padding: 0.5rem !important;
  margin: 0.5rem -15px !important;
  max-width: none !important;
  width: calc(100% + 30px) !important;
  display: flex !important;
  gap: 0.25rem !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  min-height: 60vh !important;
  align-items: stretch !important;
}

/* Sidebar e conte�do dentro perdem fundo/borda (s�o parte do mesmo container agora) */
html.mystlight-blue ion-content[data-v-ed5e4738].side,
html.mystlight-blue ion-content[data-v-ed5e4738].ion-content {
  --background: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
}

/* Linha divis�ria sutil entre sidebar e �rea de jogos */
html.mystlight-blue ion-content[data-v-ed5e4738].side {
  --background: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  flex: 0 0 4rem !important;
  max-width: 4rem !important;
}

html.mystlight-blue ion-content[data-v-ed5e4738].ion-content {
  --background: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
}

/* Bloco de logos de parceiros/provedores no rodape com fundo D1F2FF */
html.mystlight-blue .partner-img,
html.mystlight-blue .partner-container,
html.mystlight-blue [class*='partner'],
html.mystlight-blue [class*='provider-box'] {
  background: #D1F2FF !important;
  --background: #D1F2FF !important;
}

/* For�a ion-content interno a se comportar como bloco normal no flex */
html.mystlight-blue [data-v-ed5e4738].container ion-content {
  position: relative !important;
  contain: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  --overflow: auto !important;
  display: block !important;
}

/* O scroll interno do ion-content */
html.mystlight-blue [data-v-ed5e4738].container ion-content::part(scroll) {
  position: relative !important;
  height: auto !important;
  overflow-y: auto !important;
}

/* Container deve ter altura m�nima */
html.mystlight-blue [data-v-ed5e4738].container {
  background: #D1F2FF !important;
  border-radius: 1rem !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  padding: 0.5rem !important;
  margin: 0.5rem -15px !important;
  max-width: none !important;
  width: calc(100% + 30px) !important;
  display: flex !important;
  gap: 0.25rem !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  min-height: 60vh !important;
  align-items: stretch !important;
}

/* Sidebar com altura full do container */
html.mystlight-blue ion-content[data-v-ed5e4738].side {
  align-self: stretch !important;
}

/* === P�gina Promo��o: laterais com bordas pra dar sensa��o de container === */
html.mystlight-blue .activity-list,
html.mystlight-blue .activities,
html.mystlight-blue .promotion-list,
html.mystlight-blue .promo-container,
html.mystlight-blue [class*='activity-container'],
html.mystlight-blue [class*='promotion-container'] {
  background: #D1F2FF !important;
  border-radius: 1rem !important;
  padding: 0.5rem !important;
  margin: 0.5rem auto !important;
  max-width: 486px !important;
  box-sizing: border-box !important;
}

/* Cards individuais de promo��o */
html.mystlight-blue .activity-item,
html.mystlight-blue .activity-card,
html.mystlight-blue .promotion-item,
html.mystlight-blue .promo-item {
  background: #FFFFFF !important;
  border-radius: 0.875rem !important;
  border: 1px solid rgba(93, 205, 227, 0.2) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  margin-bottom: 0.75rem !important;
}

/* === P�gina Promo��o (data-v-eea1b4ce / data-v-6a8eac91) === */
/* Container externo da p�gina inteira - com laterais vis�veis */
html.mystlight-blue ion-content[data-v-eea1b4ce] > [data-v-6a8eac91]:first-child {
  background: #D1F2FF !important;
  border-radius: 1rem !important;
  padding: 0.625rem !important;
  margin: 0.5rem -15px !important;
  width: calc(100% + 30px) !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Cards individuais de promo��o */
html.mystlight-blue [data-v-6a8eac91].activity-wrap {
  background: #FFFFFF !important;
  border-radius: 0.875rem !important;
  border: 1px solid rgba(93, 205, 227, 0.25) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  margin-bottom: 0.75rem !important;
}

html.mystlight-blue [data-v-6a8eac91].activity-wrap:last-child {
  margin-bottom: 0 !important;
}

/* Banner no topo do card */
html.mystlight-blue [data-v-6a8eac91].rounded-top {
  border-radius: 0.875rem 0.875rem 0 0 !important;
  border-bottom: 1px solid rgba(93, 205, 227, 0.15) !important;
}

/* Parte de baixo */
html.mystlight-blue [data-v-6a8eac91].activity-bottom {
  background: #FFFFFF !important;
  padding: 0.75rem 1rem !important;
}

/* Nome da promo */
html.mystlight-blue [data-v-6a8eac91].activity-name {
  color: #1B2240 !important;
  font-weight: 600 !important;
}

/* Bot�o  Em andamento */
html.mystlight-blue [data-v-6a8eac91].in-progress {
  background: rgba(93, 205, 227, 0.15) !important;
  color: #5DCDE3 !important;
  padding: 0.375rem 0.875rem !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
}


/* Remove sticky do filtro Popular/PG/PP sem quebrar layout */
html.mystlight-blue #stickyElement,
html.mystlight-blue [data-v-17b67330].wrapper.segment-c {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
}



/* Popup announcement transparente */
html.mystlight-blue ion-modal:has([data-v-5c32bb8d]) {
  --background: transparent !important;
  --box-shadow: none !important;
}

html.mystlight-blue [data-v-5c32bb8d].wrapper,
html.mystlight-blue [data-v-5c32bb8d].announcement-wrapper {
  background: transparent !important;
}

html.mystlight-blue [data-v-5c32bb8d].wrapper .ion-page,
html.mystlight-blue .ion-page:has([data-v-5c32bb8d].wrapper) {
  background: transparent !important;
  --background: transparent !important;
}

/* O .content do popup mant�m o background-image dele */
html.mystlight-blue [data-v-5c32bb8d].content.bottom {
  background-color: transparent !important;
}

/* Esconde o botao 'Clique e ganhe (Login)' do popup */
html.mystlight-blue [data-v-a6138718].tab-list,
html.mystlight-blue [data-v-a6138718] ion-segment-button {
  display: none !important;
}