/* ==========================================================================
   AXIONMESK — Cartão: acabamento final
   ========================================================================== */

/* ---------- 1) Espaço real para a bottom nav ---------- */
body.page-body,
body {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

main,
.page-body > *:last-child,
.sec-wrap {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Botão de recarga nunca fica sob a nav */
button[data-add],
#btnAtivar,
.btn-recarregar {
  position: relative;
  z-index: 2;
}

/* Margem extra no fim do card de ativação */
.card-ativar,
.bnx-activate,
section:last-of-type {
  margin-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ---------- 2) Cartão um pouco mais compacto ---------- */
.bnx-card {
  aspect-ratio: 1.72 / 1 !important;
  max-height: 218px !important;
  padding: 16px 18px !important;
}

.bnx-card__num {
  font-size: 15px !important;
  margin-top: 12px !important;
}

.bnx-card__mid {
  margin-top: 9px !important;
}

.bnx-card__chip {
  width: 38px !important;
  height: 29px !important;
}

.bnx-holo {
  width: 26px !important;
  height: 26px !important;
}

.bnx-card__brand { font-size: 9.5px !important; }
.bnx-card__brand small { font-size: 5.5px !important; }
.bnx-card__logo { font-size: 14px !important; }
.bnx-card__logo img { width: 22px !important; height: 22px !important; }

.bnx-card__label { font-size: 6.8px !important; }
.bnx-card__holder,
.bnx-card__exp { font-size: 10.5px !important; }

.bnx-card__status {
  top: 14px !important;
  right: 16px !important;
  transform: translateY(34px) !important;
  font-size: 7px !important;
  padding: 2px 7px !important;
}

/* ---------- 3) Ajustes finos do card de ativação ---------- */
.bnx-activate h2,
.card-ativar h2 {
  font-size: 19px !important;
  font-weight: 800 !important;
  margin: 0 0 8px !important;
}

/* Barra de progresso mais visível */
[class*="progress"] > div,
.progress-bar {
  height: 8px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.07) !important;
}

/* ---------- 4) Mobile ---------- */
@media (max-width: 900px) {
  .bnx-card {
    aspect-ratio: 1.68 / 1 !important;
    max-height: 210px !important;
    padding: 15px 17px !important;
  }
  .bnx-card__num { font-size: 14.5px !important; }
  body { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
  .card-ativar, .bnx-activate { margin-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (max-width: 380px) {
  .bnx-card { max-height: 196px !important; padding: 13px 15px !important; }
  .bnx-card__num { font-size: 13.5px !important; }
}