/* ==========================================================================
   AXIONMESK — MOBILE.CSS (consolidado)
   Substitui: mobile-app.css + mobile-app-v2.css + responsive-fix.css
   Uma regra por elemento. Sem duplicatas.

   Camadas (z-index):
     900  bottom nav
     950  header sticky
     980  drawer
     999  barra PWA (acima da nav, sem cobri-la)
    1000  painel "Mais"
    1001  backdrop do painel
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) BASE
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  max-width: 100%;
  overflow-x: clip;
  background-color: #0B1220;
}

body {
  overscroll-behavior-y: none;
  min-height: 100dvh;
  touch-action: manipulation;
}

*, *::before, *::after { box-sizing: border-box; }

img, svg, video, canvas { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   1) TAP TARGETS (44px mínimo)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  button, .btn, [role="button"], a.btn,
  .nav__link, .wallet-tab, .sort-tab, .chip, .fchip, .tab,
  input[type="submit"], input[type="button"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
  }

  .btn--sm, .btn--link { min-height: 44px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  .icon-btn, .btn--icon { min-width: 44px; min-height: 44px; }

  .auth-link, .forgot-link, .see-all, .link-strong, .text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 4px;
  }

  input, select, textarea { font-size: 16px !important; min-height: 48px; }
  textarea { min-height: 100px; }

  .btn:active, button:active, a:active {
    transform: scale(.97);
    transition: transform .08s ease;
  }
}

/* --------------------------------------------------------------------------
   2) HEADER
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .header, .app-header, .site-header {
    position: sticky;
    top: 0;
    z-index: 950;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px !important;
    background: rgba(11, 13, 18, .94) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    overflow: hidden;
  }

  .header__inner, .app-header__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 48px;
    flex-wrap: nowrap !important;
    height: auto !important;
  }

  /* Faixa de abas antiga não existe mais */
  .app-header__right { display: none !important; }
  .header .nav { display: none !important; }

  .logo { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
  .logo__mark { width: 28px !important; height: 28px !important; }
  .logo__text { font-size: 18px !important; font-weight: 800 !important; white-space: nowrap; }

  .header__actions, .app-header__actions {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    flex-wrap: nowrap !important;
  }

  .header__actions .btn {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 13px !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    white-space: nowrap;
  }

  .header__actions .icon-btn { display: none !important; }
}

@media (max-width: 380px) {
  .header__actions .btn--link { display: none !important; }
  .logo__text { font-size: 16px !important; }
}

/* --------------------------------------------------------------------------
   3) HERO
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero { padding: 24px 0 28px !important; }

  .hero__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    text-align: left !important;
  }

  .hero__title {
    font-size: clamp(24px, 6.8vw, 34px) !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
    margin: 0 0 18px !important;
  }

  .hero__form { width: 100% !important; margin: 0 !important; display: flex; flex-direction: column; gap: 12px; }

  .hero .field { height: 54px !important; border-radius: 14px !important; }

  .hero__form .btn, .hero__form .btn--primary {
    min-height: 54px !important;
    height: 54px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    width: 100%;
    box-shadow: none !important;
  }

  .hero__terms { font-size: 13px !important; line-height: 1.55 !important; margin: 12px 0 0 !important; }
  .hero__right { margin: 14px 0 0 !important; }
  .hero__card { width: 100%; padding: 16px !important; margin: 0 !important; }
  .hero__card-price { font-size: 21px !important; }
}

/* --------------------------------------------------------------------------
   4) TICKER DE PREÇOS
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ticker {
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }

  .ticker__track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    height: 44px !important;
    width: max-content !important;
    animation: cmTicker 34s linear infinite !important;
  }

  .ticker__item {
    flex: 0 0 auto !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap !important;
    padding: 0 16px !important;
    height: 44px;
    font-size: 13px !important;
  }

  .ticker:active .ticker__track { animation-play-state: paused; }
}

@keyframes cmTicker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   5) SEÇÕES E GRIDS
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .container { width: 100% !important; max-width: 100% !important; padding-left: 14px !important; padding-right: 14px !important; }

  .grid, .cards, .features, .features-grid, .markets-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .section-title { font-size: 18px !important; margin: 0 0 12px !important; }

  .footer__inner, .footer__grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   6) TABELAS → CARDS
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .table-wrap table:not(.no-cards) { display: block; width: 100%; }
  .table-wrap table:not(.no-cards) thead { display: none; }
  .table-wrap table:not(.no-cards) tbody,
  .table-wrap table:not(.no-cards) tr,
  .table-wrap table:not(.no-cards) td { display: block; width: 100%; }

  .table-wrap table:not(.no-cards) tr {
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
  }

  .table-wrap table:not(.no-cards) td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border: 0;
    text-align: right;
  }

  .table-wrap table:not(.no-cards) td::before {
    content: attr(data-label);
    font-size: 12.5px;
    font-weight: 600;
    opacity: .6;
    text-align: left;
    flex: 0 0 auto;
  }
}

/* --------------------------------------------------------------------------
   7) FORMULÁRIOS / AUTH
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .auth-field { height: 52px !important; min-height: 52px !important; border-radius: 13px !important; margin-bottom: 12px !important; }
  .auth-submit, .auth-card button[type="submit"] { height: 56px !important; border-radius: 14px !important; font-size: 16px !important; }
  .auth-card { width: 100% !important; max-width: 430px !important; }
  label, .field-label { font-size: 13.5px !important; margin-bottom: 6px; display: block; }
}

/* --------------------------------------------------------------------------
   8) MODAIS
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .modal__box, .modal-content, .dialog {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin: 10px auto !important;
    max-height: 90dvh;
    overflow-y: auto;
    border-radius: 18px !important;
  }
}

/* --------------------------------------------------------------------------
   9) BARRA PWA — ACIMA DA BOTTOM NAV, SEM COBRIR CONTEÚDO
   -------------------------------------------------------------------------- */
.pwa-install-bar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 66px;
  border-radius: 16px;
  background: rgba(24, 27, 36, .97);
  border: 1px solid rgba(56,107,255, .30);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .28s ease;
  color: #F5F7FA;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  pointer-events: none;
}
.pwa-install-bar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }

.pwa-install-icon { width: 42px !important; height: 42px !important; flex: 0 0 42px !important; border-radius: 11px !important; object-fit: cover; }
.pwa-install-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.pwa-install-text strong { font-size: 13.5px; font-weight: 700; }
.pwa-install-text span { font-size: 11.5px; opacity: .72; }
.pwa-install-btn {
  flex: 0 0 auto; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #5C86FF, #386BFF);
  color: #221900; font-weight: 700; font-size: 13px;
  padding: 0 16px; height: 40px; min-height: 40px; border-radius: 11px;
  touch-action: manipulation;
}
.pwa-install-close {
  flex: 0 0 32px; width: 32px; height: 32px;
  background: transparent; border: 0; color: #9AA0AA;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
}

/* Espaço reservado no fim do documento quando a barra está visível */
body.has-install-bar { padding-bottom: 0 !important; }
body.has-install-bar::after {
  content: "";
  display: block;
  height: calc(160px + env(safe-area-inset-bottom, 0px));
  width: 100%;
}

@media (max-width: 380px) {
  .pwa-install-text span { display: none; }
  .pwa-install-bar { min-height: 58px; }
}

/* --------------------------------------------------------------------------
   10) BOTTOM NAV — espaço para não cobrir conteúdo
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body:not(.auth-page) {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  }
  body:not(.auth-page) main,
  body:not(.auth-page) .page-body { padding-bottom: 20px; }
}

/* --------------------------------------------------------------------------
   11) UTILITÁRIOS
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hide-mobile { display: none !important; }
  .full-mobile { width: 100% !important; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (min-width: 901px) {
  .hide-desktop { display: none !important; }
}

/* --------------------------------------------------------------------------
   12) ACESSIBILIDADE
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ticker__track { animation: none !important; }
  .btn:active, button:active, a:active { transform: none !important; }
}

:focus-visible {
  outline: 2px solid #386BFF;
  outline-offset: 2px;
  border-radius: 8px;
}


/* ==========================================================================
   BARRA DE INSTALAR — desativada em producao
   Evitava conflito de camadas com a bottom nav.
   O app continua instalavel pelo menu do navegador.
   ========================================================================== */
.pwa-install-bar,
#pwa-install-bar {
  display: none !important;
}
body.has-install-bar::after { display: none !important; height: 0 !important; }

/* ==========================================================================
   v4.0 — CORRECAO FINAL de camadas (testada)
   ========================================================================== */

/* --- 1) Esconde DEFINITIVAMENTE a barra de instalar --- */
.pwa-install-bar,
#pwa-install-bar,
body .pwa-install-bar,
body .pwa-install-bar.is-visible {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.has-install-bar::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
}

/* --- 2) Ticker: contido, sem corte visual --- */
@media (max-width: 900px) {
  .ticker,
  #ticker {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%) !important;
  }
  .ticker__track,
  #tickerTrack {
    display: flex !important;
    flex-wrap: nowrap !important;
    animation: cmTickerSlide 32s linear infinite !important;
  }
  .ticker__item {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

@keyframes cmTickerSlide {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* --- 3) Remove elementos residuais do menu antigo no header --- */
@media (max-width: 900px) {
  .app-header__right,
  .header .nav,
  .header__nav {
    display: none !important;
  }
  /* tracinho branco ao lado do avatar */
  .header__actions > *:not(.btn):not(.cm-avatar-btn):not(.icon-btn) {
    display: none !important;
  }
}

/* ==========================================================================
   v5.0 — CORRECAO FINAL (3 problemas visiveis)
   ========================================================================== */

@media (max-width: 900px) {

  /* --- 1) Hamburger: escondido (a bottom nav ja tem Mais) --- */
  .cm-burger {
    display: none !important;
  }

  /* --- 2) Ticker: item sem corte no fim --- */
  .ticker,
  #ticker {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  .ticker__track,
  #tickerTrack {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
  }
  .ticker__item {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 0 18px !important;
  }

  /* --- 3) Mercados em alta + Ver todos: alinhamento --- */
  .section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    padding: 0 14px !important;
    margin: 0 0 14px !important;
    height: auto !important;
    min-height: 40px !important;
  }

  .section-head .section-title,
  .section-head h2 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 17px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
  }

  .section-head a {
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #386BFF !important;
    white-space: nowrap !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
  }
}

/* Remove hamburger em qualquer toque */
@media (hover: none) and (pointer: coarse) {
  .cm-burger { display: none !important; }
}

/* ==========================================================================
   v6.0 — TICKER DEFINITIVO (sem corte nas bordas)
   ========================================================================== */
@media (max-width: 900px) {

  /* Container: clipping limpo, sem mascara que corte texto */
  .ticker,
  #ticker {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 46px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* Trilha: anima suavemente da direita para a esquerda */
  .ticker__track,
  #tickerTrack {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    height: 46px !important;
    width: max-content !important;
    padding-left: 100vw !important;
    animation: cmTickV6 45s linear infinite !important;
    will-change: transform;
  }

  /* Cada item com respiro generoso */
  .ticker__item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 0 24px !important;
    height: 46px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  /* Pausa ao tocar */
  .ticker:active .ticker__track,
  #ticker:active #tickerTrack {
    animation-play-state: paused !important;
  }
}

/* Anima exatamente a largura de UMA volta do conteúdo */
@keyframes cmTickV6 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100vw, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track, #tickerTrack { animation: none !important; padding-left: 12px !important; }
}

/* ==========================================================================
   v6.1 — TICKER: remove padding excessivo e ajusta animacao
   ========================================================================== */
@media (max-width: 900px) {
  .ticker__track,
  #tickerTrack {
    padding-left: 0 !important;
    animation: cmTickV61 28s linear infinite !important;
  }

  /* Primeiro item ganha respiro inicial visivel */
  .ticker__item:first-child {
    margin-left: 16px !important;
  }

  /* Ultimo item: respiro para nao encostar na borda */
  .ticker__item:last-child {
    margin-right: 16px !important;
  }
}

@keyframes cmTickV61 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track, #tickerTrack { animation: none !important; }
}

/* ==========================================================================
   v6.2 — TICKER: respiro nas duas bordas (sem corte de dígito)
   ========================================================================== */
@media (max-width: 900px) {
  /* Container com padding lateral: texto nunca encosta na borda */
  .ticker,
  #ticker {
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }

  /* Trilha começa com margem visível */
  .ticker__track,
  #tickerTrack {
    padding-left: 0 !important;
  }

  .ticker__item {
    padding: 0 20px !important;
  }

  .ticker__item:first-child { margin-left: 0 !important; }
  .ticker__item:last-child  { margin-right: 14px !important; }
}