/* ==========================================================================
   AXIONMESK — Logos das moedas (acabamento)

   O coin-visuals.js injeta os badges; aqui cuidamos da apresentação:
     • círculo perfeito com anel de luz
     • tamanho consistente
     • sombra sutil para dar profundidade
   ========================================================================== */

/* -------------------------------------------------- badge base */
.cm-pair-badge,
.coin-badge,
.cm-qty-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  vertical-align: middle;
}

/* o círculo do catálogo já vem com background; adicionamos o anel */
.coin-badge {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .18) inset,
    0 2px 6px -2px rgba(0, 0, 0, .7) !important;
}

.coin-badge svg {
  display: block !important;
  width: 62% !important;
  height: 62% !important;
  margin: auto;
}

/* -------------------------------------------------- seletor do par */
.pair-picker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}

/* o ::before cinza do CSS antigo sai de cena quando o badge está presente */
.pair-picker:has(.cm-pair-badge)::before {
  display: none !important;
  content: none !important;
}

.pair-picker .cm-pair-badge .coin-badge {
  width: 24px !important;
  height: 24px !important;
}

/* -------------------------------------------------- sub-nav */
.tsp__sym {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.tsp__sym .coin-badge {
  width: 16px !important;
  height: 16px !important;
}

.tsp__sym .coin-badge svg {
  width: 62% !important;
  height: 62% !important;
}

/* -------------------------------------------------- campo de quantidade */
.cm-qty-badge .coin-badge {
  width: 18px !important;
  height: 18px !important;
  opacity: .92;
}

/* em telas estreitas o badge do campo é escondido (não cabe) */
@media (max-width: 380px) {
  .cm-qty-badge { display: none !important; }
}

/* -------------------------------------------------- lista de moedas */
.coin-list-item .coin-badge,
.markets-list li .coin-badge,
.pair-list li .coin-badge {
  width: 20px !important;
  height: 20px !important;
}

/* -------------------------------------------------- animação suave */
@keyframes cmCoinIn {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

.cm-pair-badge,
.cm-qty-badge {
  animation: cmCoinIn .22s cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .cm-pair-badge,
  .cm-qty-badge { animation: none !important; }
}

/* ==========================================================================
   AXIONMESK — Tamanhos dos logos de moeda (área de negociação)

   Medido em 390×844:
     sub-nav   15×15 (svg 9×9)   ← pequeno demais, parecia um "ponto"
     seletor   24×24 (svg 15×15) ← correto
     campo     18×18             ← ok, mas some da tela ao rolar

   Correções:
     1. sub-nav: 22px com svg 14px (proporcional ao texto de 11px)
     2. seletor: 26px com svg 16px (mais presença)
     3. garante 1 badge por contexto (nunca duplicado)
     4. remove qualquer badge fora destes 3 locais
   ========================================================================== */

/* ---------- 1) sub-nav: logo maior e alinhado ---------- */
.trade-subnav__pair .tsp__sym .coin-badge,
#subSymbol .coin-badge {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .18) inset,
    0 2px 6px -2px rgba(0, 0, 0, .7) !important;
}

.trade-subnav__pair .tsp__sym .coin-badge svg,
#subSymbol .coin-badge svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  margin: auto !important;
}

/* texto do par alinhado ao centro do logo */
#subSymbol .tsp__txt {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
}

/* ---------- 2) seletor do par: 26px ---------- */
.pair-picker .cm-pair-badge .coin-badge {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
}

.pair-picker .cm-pair-badge .coin-badge svg {
  width: 16px !important;
  height: 16px !important;
}

/* ---------- 3) campo de quantidade: 20px, discreto ---------- */
.cm-qty-badge .coin-badge {
  width: 20px !important;
  height: 20px !important;
}

.cm-qty-badge .coin-badge svg {
  width: 13px !important;
  height: 13px !important;
}

/* ---------- 4) evita duplicatas: só 1 badge por contexto ---------- */
#subSymbol > .coin-badge ~ .coin-badge,
.pair-picker > .cm-pair-badge ~ .cm-pair-badge,
.pair-picker .coin-badge .coin-badge,
.cm-qty-badge .coin-badge .coin-badge {
  display: none !important;
}

/* ---------- 5) em telas pequenas, ajusta proporcionalmente ---------- */
@media (max-width: 380px) {
  .trade-subnav__pair .tsp__sym .coin-badge,
  #subSymbol .coin-badge { width: 20px !important; height: 20px !important; flex-basis: 20px !important; }

  .trade-subnav__pair .tsp__sym .coin-badge svg,
  #subSymbol .coin-badge svg { width: 12px !important; height: 12px !important; }

  #subSymbol .tsp__txt { font-size: 10.5px !important; }

  .pair-picker .cm-pair-badge .coin-badge { width: 24px !important; height: 24px !important; }
  .pair-picker .cm-pair-badge .coin-badge svg { width: 15px !important; height: 15px !important; }
}

/* ---------- 6) o badge do campo não deve flutuar sobre o texto ---------- */
.cm-qty-badge {
  right: 38px !important;
  pointer-events: none !important;
  opacity: .85 !important;
}

/* ==========================================================================
   REMOÇÃO DO ÍCONE NO CAMPO DE QUANTIDADE

   O .cm-qty-badge (20×20, bitcoin) ficava flutuando dentro do campo de
   quantidade, sem função clara — o usuário não precisa do logo ali,
   porque a moeda já está explícita no cabeçalho e no seletor do par.

   Aqui ele é ocultado do DOM e o campo recupera o padding original.
   ========================================================================== */
.cm-qty-badge,
.cm-qty-badge .coin-badge,
.cm-qty-badge svg {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* o campo de quantidade não precisa mais do padding extra */
.order-panel input#orderQty,
.order-panel input[name="orderQty"],
.order-panel .order-field input[type="number"] {
  padding-right: 14px !important;
}


/* ==========================================================================
   REMOÇÃO DEFINITIVA DO BADGE NO CAMPO DE QUANTIDADE

   Medido: badge x=305 y=934 · campo x=27 y=869 h=50 (termina em 919)
   → o badge ficava 15px ABAIXO do campo, flutuando solto no formulário.

   O ícone não agrega ali (a moeda já está no cabeçalho e no seletor),
   então é removido por completo — inclusive do fluxo.
   ========================================================================== */
.cm-qty-badge,
.cm-qty-badge *,
.cm-qty-badge .coin-badge,
.cm-qty-badge svg {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  pointer-events: none !important;
}

/* o campo não precisa mais de padding extra */
#orderQty,
[id="orderQty"],
.order-field input[type="number"] {
  padding-right: 14px !important;
}

/* qualquer badge solto dentro do painel de ordem é ocultado */
.order-panel > .coin-badge,
.order-panel .cm-pair-badge {
  display: none !important;
}