/* ==========================================================================
   AXIONMESK — CARTÃO PREMIUM v3
   Preenche o cartão, tipografia forte, elementos maiores, sem cortes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) CARTÃO — composição mais densa e imponente
   -------------------------------------------------------------------------- */
.bnx-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  aspect-ratio: 1.52 / 1 !important;
  min-height: 250px !important;
  padding: 22px 24px 20px !important;
  border-radius: 22px !important;
}

/* Linha decorativa sutil no meio (preenche o vazio) */
.bnx-card::before {
  background-image:
    repeating-linear-gradient(58deg, rgba(255,255,255,.07) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-58deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px),
    radial-gradient(ellipse at 22% 10%, rgba(255,255,255,.16), transparent 48%),
    radial-gradient(ellipse at 80% 95%, rgba(56,107,255,.14), transparent 55%) !important;
}

/* --------------------------------------------------------------------------
   2) TOPO — logo maior
   -------------------------------------------------------------------------- */
.bnx-card__logo {
  font-size: 18px !important;
  gap: 10px !important;
}
.bnx-card__logo img {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
}

.bnx-card__brand {
  font-size: 12px !important;
  letter-spacing: .18em !important;
}
.bnx-card__brand small {
  font-size: 7px !important;
  letter-spacing: .28em !important;
}

/* --------------------------------------------------------------------------
   3) CHIP + HOLO — maiores, lado a lado
   -------------------------------------------------------------------------- */
.bnx-card__mid {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 16px 0 0 !important;
}
.bnx-card__mid > .bnx-card__chip {
  width: 52px !important;
  height: 39px !important;
  border-radius: 8px !important;
  flex: 0 0 auto !important;
}
.bnx-card__mid > .bnx-card__holoWrap,
.bnx-card__mid > .bnx-holo {
  flex: 0 0 auto !important;
}
.bnx-holo {
  width: 36px !important;
  height: 36px !important;
}

/* --------------------------------------------------------------------------
   4) NÚMERO — grande, com presença
   -------------------------------------------------------------------------- */
.bnx-card__num {
  font-size: 21px !important;
  letter-spacing: .105em !important;
  margin: 18px 0 0 !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.6) !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* --------------------------------------------------------------------------
   5) DADOS — titular completo, sem reticências
   -------------------------------------------------------------------------- */
.bnx-card__row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 24px !important;
  margin-top: auto !important;
  padding-top: 16px !important;
}

.bnx-card__field:nth-child(1) { flex: 1 1 auto !important; min-width: 0 !important; }

.bnx-card__holder {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 12.5px !important;
  letter-spacing: .04em !important;
  white-space: normal !important;
  line-height: 1.25 !important;
  word-break: break-word !important;
}

.bnx-card__exp {
  font-size: 12.5px !important;
  letter-spacing: .05em !important;
}

.bnx-card__label {
  font-size: 8px !important;
  letter-spacing: .16em !important;
  margin-bottom: 5px !important;
  color: rgba(255,255,255,.62) !important;
}

/* --------------------------------------------------------------------------
   6) STATUS — reposicionado para não brigar
   -------------------------------------------------------------------------- */
.bnx-card__status {
  top: 22px !important;
  right: 24px !important;
  transform: translateY(44px) !important;
  font-size: 8.5px !important;
  padding: 3px 10px !important;
  letter-spacing: .14em !important;
}

/* --------------------------------------------------------------------------
   7) MOBILE — proporcional e sem corte
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .bnx-card {
    aspect-ratio: 1.52 / 1 !important;
    min-height: 0 !important;
    padding: 19px 20px 17px !important;
    border-radius: 20px !important;
  }

  .bnx-card__logo { font-size: 16px !important; gap: 8px !important; }
  .bnx-card__logo img { width: 26px !important; height: 26px !important; }

  .bnx-card__brand { font-size: 10.5px !important; }
  .bnx-card__brand small { font-size: 6.5px !important; }

  .bnx-card__mid { margin-top: 14px !important; gap: 10px !important; }
  .bnx-card__mid > .bnx-card__chip { width: 46px !important; height: 34px !important; }
  .bnx-holo { width: 32px !important; height: 32px !important; }

  .bnx-card__num { font-size: 17.5px !important; letter-spacing: .08em !important; margin-top: 16px !important; }

  .bnx-card__row { padding-top: 14px !important; gap: 18px !important; }
  .bnx-card__holder,
  .bnx-card__exp { font-size: 11.5px !important; }
  .bnx-card__label { font-size: 7.5px !important; }

  .bnx-card__status { top: 18px !important; right: 20px !important; transform: translateY(40px) !important; font-size: 8px !important; }
}

@media (max-width: 380px) {
  .bnx-card { padding: 16px 17px 14px !important; }
  .bnx-card__num { font-size: 15.5px !important; letter-spacing: .06em !important; }
  .bnx-card__mid > .bnx-card__chip { width: 42px !important; height: 31px !important; }
  .bnx-holo { width: 28px !important; height: 28px !important; }
  .bnx-card__holder,
  .bnx-card__exp { font-size: 10.5px !important; }
}

/* --------------------------------------------------------------------------
   8) ESPAÇO PARA A BOTTOM NAV — botão nunca cortado
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  main,
  .page-body,
  .sec-wrap {
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* O último bloco da página ganha respiro extra */
  .card-ativar,
  .bnx-activate,
  main > *:last-child,
  .sec-wrap > *:last-child {
    margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
}