/**
 * Menu inferior — estilo “onda”.
 * Fundos transparentes no tabbar (chunk: --skin__web_btmnav_db em ._tabbar_*).
 * Empilhamento: no chunk `._base-layout_>footer` usa z-index:10 e `>._section-content_` z-index:1,
 * o que coloca o rodapé num plano acima de *todo* o miolo — parece “engolir” o scroll.
 * Aqui alinhamos o footer ao mesmo nível da secção (z-index:1) + position relativa.
 * Faixa da onda: só o PNG em .ui-tabs__wrap; vãos = lobby por trás. Depósito: bola branca.
 */

html[data-montanha-bottom-nav="wave"] #app footer {
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
  isolation: auto !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

html[data-montanha-bottom-nav="wave"] #app footer > * {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"].ui-tabs {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Escala responsiva do botão Depósito (evita quebrar entre dispositivos) */
html[data-montanha-bottom-nav="wave"] {
  --montanha-deposit-wrap-min: clamp(53px, 13vw, 63px);
  --montanha-deposit-border: clamp(1px, 0.22vw, 2px);
  --montanha-deposit-wrap-right: clamp(8px, 3.6vw, 16px);
  --montanha-deposit-wrap-top: clamp(-11px, -1.3vw, -3px);
  --montanha-deposit-text-right: clamp(8px, 3.4vw, 16px);
  --montanha-deposit-text-top: clamp(0px, 0.35vw, 2px);
  --montanha-tabbar-inner-min: clamp(88px, 24vw, 106px);
  --montanha-tabbar-inner-top: clamp(-6px, -0.8vw, 2px);
}

html[data-montanha-bottom-nav="wave"] #app [class*="_page_"] [class*="_content_"][class*="_with-footer-bar_"] {
  padding-bottom: 2.45rem !important;
}

html[data-montanha-bottom-nav="wave"] #app [class*="_page_"] [class*="_content_"][class*="_with-footer-bar-lg_"] {
  padding-bottom: 2.95rem !important;
}

/* === Faixa da onda: só PNG; fundo transparente (vãos = lobby por trás) === */
html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] .ui-tabs__wrap[class*="_main_"],
html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] .ui-tabs__wrap._main_gtdvm_39,
html[data-montanha-bottom-nav="wave"] body.theme-natal #app footer [class*="_tabbar_"] .ui-tabs__wrap[class*="_main_"],
html[data-montanha-bottom-nav="wave"] body.theme-natal #app footer [class*="_tabbar_"] .ui-tabs__wrap._main_gtdvm_39 {
  position: relative !important;
  height: 1.54667rem !important;
  min-height: 1.54667rem !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  width: 100% !important;
  z-index: 2 !important;
  background-color: transparent !important;
  background-image: var(--montanha-bottom-nav-bg-url, url("/assets/navbg-B22Yk-cl.png")) !important;
  background-repeat: no-repeat !important;
  background-position: bottom center !important;
  /* Largura 100%: evita faixas vazias nas laterais (contain costuma parecer “borda”). */
  background-size: 100% auto !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: none !important;
  outline: none !important;
  filter: none !important;
}

html[data-montanha-bottom-nav="wave"] [dir="rtl"] #app footer [class*="_tabbar_"] .ui-tabs__wrap[class*="_main_"],
html[data-montanha-bottom-nav="wave"] [dir="rtl"] #app footer [class*="_tabbar_"] .ui-tabs__wrap._main_gtdvm_39 {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] .ui-tabs__wrap[class*="_main_"] > div,
html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] .ui-tabs__wrap._main_gtdvm_39 > div {
  position: relative !important;
  overflow: visible !important;
  align-items: flex-end !important;
  min-height: var(--montanha-tabbar-inner-min) !important;
  top: var(--montanha-tabbar-inner-top) !important;
}

html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] {
  position: relative !important;
  /* sem isolation:isolate — evita stacking context extra que “separa” o bar do resto da página */
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  padding-left: max(0px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(0px, env(safe-area-inset-right, 0px)) !important;
  padding-top: 0 !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: none !important;
  outline: none !important;
  filter: none !important;
}

html[data-montanha-bottom-nav="wave"][data-club="1"][data-skin-layout="11"] #app footer [class*="_tabbar_"] {
  background-color: transparent !important;
  background-image: none !important;
}

html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] > .ui-tabs__content {
  display: none !important;
}

html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] .ui-tabs__nav {
  align-items: flex-end !important;
  position: relative !important;
  z-index: 3 !important;
  min-height: 1.45rem !important;
  overflow: visible !important;
  background-color: transparent !important;
  background-image: none !important;
}

html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] .ui-tabs__nav > .ui-tab {
  flex: 1 1 auto !important;
  overflow: visible !important;
}

/*
 * Depósito: isolar da regra do bundle (height:100% + flex-end empurra tudo para baixo).
 * :has() com *|href apanha xlink:href="#icon_btm_cz" do React.
 */
html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] .ui-tabs__nav > .ui-tab:has(svg use:is([*|href*="icon_btm_cz"], [*|href*="icon_btm_zc"])),
html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] [class*="_main_"] > div > .ui-tab:has(svg use:is([*|href*="icon_btm_cz"], [*|href*="icon_btm_zc"])) {
  position: relative !important;
  z-index: 8 !important;
  overflow: visible !important;
}

html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] .ui-tabs__nav > .ui-tab:has(svg use:is([*|href*="icon_btm_cz"], [*|href*="icon_btm_zc"])) [class*="_itemContent_"],
html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] [class*="_main_"] > div > .ui-tab:has(svg use:is([*|href*="icon_btm_cz"], [*|href*="icon_btm_zc"])) [class*="_itemContent_"] {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] .ui-tabs__nav > .ui-tab:has(svg use:is([*|href*="icon_btm_cz"], [*|href*="icon_btm_zc"])) [class*="_itemContent_"] > div:first-child,
html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] [class*="_main_"] > div > .ui-tab:has(svg use:is([*|href*="icon_btm_cz"], [*|href*="icon_btm_zc"])) [class*="_itemContent_"] > div:first-child {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
}

html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] .ui-tabs__nav > .ui-tab:has(svg use:is([*|href*="icon_btm_cz"], [*|href*="icon_btm_zc"])) .ui-badge__wrapper,
html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] [class*="_main_"] > div > .ui-tab:has(svg use:is([*|href*="icon_btm_cz"], [*|href*="icon_btm_zc"])) .ui-badge__wrapper {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 8px !important;
  height: 8px !important;
  min-width: var(--montanha-deposit-wrap-min) !important;
  min-height: var(--montanha-deposit-wrap-min) !important;
  max-width: none !important;
  max-height: none !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: var(--skin__bg_1, #ffffff) !important;
  background-image: none !important;
  /* Borda usando a mesma cor do header */
  border-width: var(--montanha-deposit-border) !important;
  border-style: solid !important;
  border-color: var(--skin__bs_topnav_bg) !important;
  box-shadow: none !important;
  /* sem translateY — alinhamento fino com top/right */
  transform: none !important;
  z-index: 2 !important;
  top: var(--montanha-deposit-wrap-top) !important;
  right: var(--montanha-deposit-wrap-right) !important;
}

html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] .ui-tabs__nav > .ui-tab:has(svg use:is([*|href*="icon_btm_cz"], [*|href*="icon_btm_zc"])) .ui-badge__wrapper > *,
html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] [class*="_main_"] > div > .ui-tab:has(svg use:is([*|href*="icon_btm_cz"], [*|href*="icon_btm_zc"])) .ui-badge__wrapper > * {
  position: relative !important;
  z-index: 1 !important;
}

html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] .ui-tabs__nav > .ui-tab:has(svg use:is([*|href*="icon_btm_cz"], [*|href*="icon_btm_zc"])) [class*="_text_"],
html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] [class*="_main_"] > div > .ui-tab:has(svg use:is([*|href*="icon_btm_cz"], [*|href*="icon_btm_zc"])) [class*="_text_"] {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0.04rem !important;
  top: var(--montanha-deposit-text-top) !important;
  right: var(--montanha-deposit-text-right) !important;
}

html[data-montanha-bottom-nav="wave"] #app footer [class*="_tabbar_"] .ui-tabs__line {
  opacity: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

html[data-montanha-bottom-nav="wave"] #app [class*="_base-layout_"] > footer {
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
  isolation: auto !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}