/* ==========================================================================
   AXIONMESK — Mercados: ícones nítidos nos cards em destaque
   ========================================================================== */

@media (max-width: 900px) {

  /* Badge do card em destaque */
  .mk-highlight .hl-card .coin-badge,
  .hl-card__top .coin-badge {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35) !important;
  }

  /* SVG dentro do badge: maior e centralizado */
  .hl-card .coin-badge svg,
  .hl-card__top .coin-badge svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    fill: #fff !important;
    flex: 0 0 auto !important;
  }

  /* Badge dos movers (altas/quedas) */
  .mover .coin-badge,
  .mover__info .coin-badge {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }

  .mover .coin-badge svg,
  .mover__info .coin-badge svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    fill: #fff !important;
  }

  /* Card em destaque: layout mais claro */
  .hl-card__top {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
  }

  .hl-card__name {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #ECEFF3 !important;
    line-height: 1.2 !important;
  }

  .hl-card__sym {
    font-size: 11.5px !important;
    color: #8996AA !important;
    margin-top: 1px !important;
  }

  /* Pílula de variação */
  .chg-pill {
    margin-left: auto !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 4px 9px !important;
    border-radius: 7px !important;
    white-space: nowrap !important;
  }

  .chg-up { color: #16C784 !important; background: rgba(22, 199, 132, .13) !important; }
  .chg-down { color: #F6465D !important; background: rgba(246, 70, 93, .13) !important; }

  /* Movers: nome e preço legíveis */
  .mover {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 11px 0 !important;
  }

  .mover__info { flex: 1 1 auto !important; min-width: 0 !important; }

  .mover__sym,
  .mover__name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ECEFF3 !important;
  }

  .mover__price {
    font-size: 12px !important;
    color: #8996AA !important;
    margin-top: 2px !important;
  }

  .mover__chg {
    font-size: 13px !important;
    font-weight: 800 !important;
    margin-left: auto !important;
    white-space: nowrap !important;
  }
}

/* --------------------------------------------------------------------------
   Fallback: se o SVG falhar, mostra a primeira letra da moeda
   -------------------------------------------------------------------------- */
.coin-badge:empty::after {
  content: "•";
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}