/* ==========================================================================
   AXIONMESK — Conversor dentro da Carteira (aba "Converter")
   Ajustes de layout para desktop e mobile.
   Depende de converter.css (estilos base do conversor).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) RESET do que era específico da página standalone /converter
   -------------------------------------------------------------------------- */
#wtab-convert .conv-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}

#wtab-convert .conv-head {
  margin: 0 0 16px;
}

#wtab-convert .conv-head h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #F5F7FA;
  margin: 0 0 4px;
}

#wtab-convert .conv-head p {
  font-size: 13.5px;
  color: #8996AA;
  margin: 0;
}

#wtab-convert .conv-history h2 {
  font-size: 15px;
}

/* encurta os paddings internos do card (já está dentro do page-body) */
#wtab-convert .conv-note {
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   2) MOBILE — card em largura total, alvos de toque confortáveis
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  #wtab-convert .conv-head h2 { font-size: 18px; }
  #wtab-convert .conv-head p { font-size: 13px; }

  #wtab-convert .conv-card {
    padding: 14px;
    border-radius: 18px;
  }

  #wtab-convert .conv-input {
    height: 60px;
  }

  #wtab-convert .conv-input input {
    font-size: 22px !important;
  }

  /* presets em 4 colunas iguais: melhor distribuição no celular */
  #wtab-convert .conv-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  #wtab-convert .conv-preset {
    width: 100%;
    padding: 0 6px;
    min-height: 34px;
    font-size: 12px;
  }

  #wtab-convert .conv-submit {
    min-height: 54px;
    font-size: 16px;
  }

  /* histórico: empilha data abaixo dos valores em telas estreitas */
  #wtab-convert .conv-hist-item {
    grid-template-columns: auto 1fr;
  }

  #wtab-convert .conv-hist-item__date {
    grid-column: 1 / -1;
    color: #59606B;
    font-size: 10.5px;
  }
}

@media (max-width: 380px) {
  #wtab-convert .conv-input { height: 56px; }
  #wtab-convert .conv-input input { font-size: 20px !important; }
  #wtab-convert .conv-presets { grid-template-columns: repeat(2, 1fr); }
  #wtab-convert .conv-preset { min-height: 34px; font-size: 12.5px; }
  #wtab-convert .conv-coin { height: 38px; padding: 0 10px; font-size: 13px; }
  #wtab-convert .conv-coin__icon { width: 21px; height: 21px; flex-basis: 21px; }
}

/* --------------------------------------------------------------------------
   3) DESKTOP — duas colunas: conversor à esquerda, histórico à direita
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  #wtab-convert {
    display: none;           /* controlado por .wallet-section.active */
  }
  #wtab-convert.active {
    display: block;
  }

  /* grid do bloco do conversor */
  #wtab-convert .conv-wrap {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    grid-template-areas:
      "head    hist"
      "rate    hist"
      "card    hist"
      "note    hist";
    column-gap: 28px;
    align-items: start;
    max-width: 980px;
  }

  #wtab-convert .conv-head   { grid-area: head; }
  #wtab-convert .conv-rate   { grid-area: rate; margin-bottom: 14px; }
  #wtab-convert .conv-card   { grid-area: card; padding: 22px; border-radius: 20px; }
  #wtab-convert .conv-note   { grid-area: note; text-align: left; margin-top: 16px; }

  #wtab-convert .conv-history {
    grid-area: hist;
    margin-top: 0;
    padding: 20px;
    background: #14181E;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    position: sticky;
    top: 88px;
  }

  #wtab-convert .conv-history[hidden] { display: none; }

  #wtab-convert .conv-history h2 {
    font-size: 15px;
    margin-bottom: 14px;
  }

  #wtab-convert .conv-hist-item {
    background: #191D24;
    padding: 12px 13px;
    margin-bottom: 8px;
  }

  /* estado vazio do histórico (preenche a coluna direita) */
  #wtab-convert .conv-empty {
    padding: 48px 20px;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: #59606B;
    border: 1px dashed rgba(255, 255, 255, .08);
    border-radius: 14px;
  }

  #wtab-convert .conv-input { height: 66px; }
  #wtab-convert .conv-input input { font-size: 25px !important; }

  #wtab-convert .conv-submit { min-height: 58px; font-size: 17px; }
  #wtab-convert .conv-submit:hover:not(:disabled) { filter: brightness(1.06); }
  #wtab-convert .conv-swap:hover { background: rgba(56,107,255, .16); transform: scale(1.06); }
  #wtab-convert .conv-coin:hover { background: rgba(255, 255, 255, .1); }
  #wtab-convert .conv-preset:hover {
    background: rgba(56,107,255, .14);
    border-color: rgba(56,107,255, .4);
    color: #386BFF;
  }
}

/* telas médias em desktop: sem a coluna do histórico grudada */
@media (min-width: 901px) and (max-width: 1180px) {
  #wtab-convert .conv-wrap {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    column-gap: 22px;
  }
}

/* --------------------------------------------------------------------------
   4) ACESSIBILIDADE
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #wtab-convert .conv-swap,
  #wtab-convert .conv-submit,
  #wtab-convert .conv-coin,
  #wtab-convert .conv-preset { transition: none !important; }
}

/* ==========================================================================
   5) SELETOR DE MOEDA (multi-moeda)
   ========================================================================== */

/* o botão da moeda precisa ancorar o popover */
#wtab-convert .conv-coin {
  position: relative;
}

#wtab-convert .conv-row {
  position: relative;
}

/* container do seletor (é movido para o <body> para não ser preso por stacking context) */
.coin-picker {
  position: fixed;
  z-index: 1500;
}

.coin-picker[hidden] {
  display: none;
}

/* slot vazio dentro do botão de moeda */
#wtab-convert .conv-coin > .coin-picker {
  display: none;
}

.coin-picker__sheet {
  background: #161A21;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .75);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(420px, calc(100vh - 120px));
  animation: coinPickerIn .16s cubic-bezier(.22, 1, .36, 1);
}

@keyframes coinPickerIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.coin-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px 9px;
  font-size: 13.5px;
  font-weight: 800;
  color: #F5F7FA;
}

.coin-picker__close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: #98A0AC;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.coin-picker__search {
  padding: 0 12px 10px;
}

.coin-picker__search input {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #10141A;
  color: #F5F7FA;
  font-family: inherit;
  font-size: 14px;
  padding: 0 12px;
  outline: none;
  box-sizing: border-box;
}

.coin-picker__search input:focus {
  border-color: rgba(56,107,255, .55);
}

.coin-picker__list {
  overflow-y: auto;
  padding: 0 8px 8px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;          /* permite o flex encolher e rolar a lista */
}

.coin-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #F5F7FA;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.coin-opt:hover,
.coin-opt.is-sel {
  background: rgba(56,107,255, .1);
}

.coin-opt__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: 0 0 32px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.coin-opt__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.25;
}

.coin-opt__info b {
  font-size: 14px;
  font-weight: 800;
  color: #F5F7FA;
}

.coin-opt__info small {
  font-size: 11.5px;
  color: #8996AA;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coin-opt__bal {
  font-size: 12px;
  font-weight: 700;
  color: #98A0AC;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.coin-picker__empty {
  padding: 26px 14px;
  text-align: center;
  font-size: 13px;
  color: #8996AA;
}

/* indicador de carregamento da cotação */
#wtab-convert .conv-rate.is-loading {
  opacity: .72;
}

/* --------------------------------------------------------------------------
   MOBILE: bottom sheet (melhor alcance do polegar)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .coin-picker {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: auto !important;
    /* acima do bottom-nav (1000) e do bottom-sheet (1200) */
    z-index: 1500 !important;
    padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .coin-picker::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: -1;
    animation: coinBackIn .18s ease;
  }

  @keyframes coinBackIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .coin-picker__sheet {
    max-height: min(70vh, 480px);
    border-radius: 20px 20px 16px 16px;
    animation: coinSheetIn .22s cubic-bezier(.22, 1, .36, 1);
  }

  @keyframes coinSheetIn {
    from { transform: translateY(24px); opacity: .6; }
    to   { transform: none; opacity: 1; }
  }

  .coin-picker__head {
    padding-top: 16px;
  }

  .coin-picker__search input {
    height: 46px;          /* alvo de toque no iOS */
    font-size: 16px;       /* evita zoom automático no iOS */
  }

  .coin-opt {
    padding: 11px 10px;
    min-height: 56px;
  }

  .coin-opt__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 11.5px;
  }

  .coin-opt__info b { font-size: 15px; }
  .coin-opt__info small { font-size: 12px; }
}