/* ==========================================================================
   AXIONMESK — Correções da área do cartão
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) HEADER — logo com ícone visível
   -------------------------------------------------------------------------- */
.header .logo,
.app-header .logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px;
}

.header .logo__mark,
.app-header .logo__mark {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  object-fit: contain !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.header .logo__text,
.app-header .logo__text {
  display: inline-block !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #F5F7FA !important;
  letter-spacing: -.02em;
}

/* --------------------------------------------------------------------------
   2) CARTÃO — chip e holo mais próximos do topo
   -------------------------------------------------------------------------- */
.bnx-card__mid {
  margin-top: 12px !important;
}

/* Distribui melhor o conteúdo interno */
.bnx-card {
  justify-content: flex-start !important;
}

/* Numero sobe um pouco */
.bnx-card__num {
  margin-top: 14px !important;
}

/* Dados sempre no rodapé */
.bnx-card__row {
  margin-top: auto !important;
  padding-top: 12px !important;
}

/* --------------------------------------------------------------------------
   3) ESPAÇO PARA A BOTTOM NAV (botão "Recarregar" não fica cortado)
   -------------------------------------------------------------------------- */
body.page-body,
body.page {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Garante que o último card tenha respiro */
body > main,
body > .page-body,
.page-body > .sec-wrap,
.sec-wrap,
main {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Se o conteúdo estiver em container próprio */
.card-ativar,
.cartao-ativar,
section:last-of-type {
  margin-bottom: 12px !important;
}

/* --------------------------------------------------------------------------
   4) MOBILE — cartão e conteúdo ajustados
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .header .logo__mark,
  .app-header .logo__mark {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }

  .header .logo__text,
  .app-header .logo__text {
    font-size: 19px !important;
  }

  .bnx-card__mid { margin-top: 10px !important; }
  .bnx-card__num { margin-top: 12px !important; }

  /* Espaço extra no fim do conteúdo */
  .sec-wrap,
  main,
  .page-body {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* --------------------------------------------------------------------------
   5) Chips de recarga com destaque
   -------------------------------------------------------------------------- */
.bnx-card ~ * button,
button[data-add] {
  transition: transform .14s ease, background .15s ease, border-color .15s ease;
}

button[data-add]:active {
  transform: scale(.96);
}

/* Chip selecionado */
button[data-add].is-selected,
button[data-add][aria-pressed="true"] {
  background: rgba(56,107,255, .16) !important;
  border-color: rgba(56,107,255, .5) !important;
  color: #386BFF !important;
}