/* ════════════════════════════════════════════════════════════════════════
   CALCULADORA DE CÂMBIO (BRL → USDT)
   ────────────────────────────────────────────────────────────────────────
   Estende o card de conversão já existente (.exchange-* em home.css) e o
   shell de hero da página de conversão (.cv-* em conversao.css). Aqui ficam
   apenas as partes NOVAS desta página:

     • .calc-rate-strip   — faixa do topo com a cotação XGate do dia
     • .calc-section--fee — campo de taxa (%) que só o operador mexe
     • .calc-breakdown    — memória de cálculo (base, taxa, câmbio final)

   Ordem de carregamento esperada:
     tokens → reset → home.css → conversao.css → ESTE arquivo
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hero: headline um pouco mais estreita que a de conversao ── */
.calc-h1 {
  max-width: 620px;
}

/* Card um pouco mais largo que o de conversão — ele carrega a memória de
   cálculo abaixo do resultado, então precisa de mais respiro vertical. */
.calc-exchange-wrap .exchange-container {
  width: 100%;
  max-width: 440px;
}

/* ──────────────────────────────────────────────────────────────
   Faixa da cotação base — topo do card.
   Mostra o dólar XGate do dia (mesma fonte do pill do rodapé) e
   um dot pulsante indicando que o valor é atualizado sozinho.
   ────────────────────────────────────────────────────────────── */
.calc-rate-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  padding: 8px 12px 12px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--border-default);
}

.calc-rate-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.calc-rate-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex: 0 0 auto;
  animation: calc-pulse 2s ease-in-out infinite;
}

@keyframes calc-pulse {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(47, 244, 211, 0.5);
  }

  50% {
    opacity: 0.6;
    box-shadow: 0 0 0 5px rgba(47, 244, 211, 0);
  }
}

.calc-rate-value {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────
   Campo de taxa (%) — o único campo do operador.
   Visualmente diferente das seções de valor (borda tracejada em
   primary) pra deixar claro que é config, não valor do cliente.
   ────────────────────────────────────────────────────────────── */
.calc-section--fee {
  margin-top: 8px;
  background: rgba(47, 244, 211, 0.05);
  border: 1px dashed #7CE7D5;
  border-radius: var(--radius-2xl);
}

.calc-fee-label-hint {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}

/* Linha do input de taxa: número + sufixo "%" colado. O operador digita
   a taxa que quiser — sem valores pré-definidos. */
.calc-fee-value {
  margin-bottom: 0;
}

.calc-fee-input {
  /* Não ocupa a linha toda como o input de valor — a taxa é curta. */
  flex: 0 1 auto;
  width: 5ch;
  min-width: 3ch;
}

.calc-fee-suffix {
  user-select: none;
  pointer-events: none;
  color: var(--text-primary);
  flex: 0 0 auto;
}

/* ──────────────────────────────────────────────────────────────
   Memória de cálculo — como se chegou no valor final.
   ────────────────────────────────────────────────────────────── */
.calc-breakdown {
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  padding: 7px 12px;
  font-size: var(--text-sm);
}

.calc-row-label {
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  margin: 0;
}

.calc-row-value {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin: 0;
}

/* Linha de destaque: o câmbio final da XGate (base + taxa). É o número
   que o operador informa ao cliente, então ganha peso visual. */
.calc-row--final {
  margin-top: 4px;
  padding: 12px;
  border-radius: var(--radius-2xl);
  background: rgba(47, 244, 211, 0.10);
  border: 1px solid #7CE7D5;
}

.calc-row--final .calc-row-label {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.calc-row--final .calc-row-value {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
}

/* Arredondamento "de boca" que o operador passa pro cliente (5,1357 → 5,14) */
.calc-row-approx {
  margin-left: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
}

/* O .exchange-btn já traz margin-top: 12px — o wrapper não soma nada. */
.calc-btn-row {
  margin-top: 0;
}

/* Feedback do botão "copiar resumo" */
.exchange-btn.is-copied {
  background: var(--primary);
  color: #05231F;
}

.calc-note {
  margin: 10px 0 0;
  padding: 0 12px;
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--text-tertiary);
  text-align: center;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .calc-rate-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .calc-row {
    padding: 7px 8px;
  }
}