/* =============================================================================
   tab-carteiras.css — Overrides específicos da página Carteiras Cripto
   Carregado APÓS tab-conversao.css; herda toda a diagramação (hero,
   description, howitworks 1/2/3, features, intergration, audience) e adiciona
   estilos para a nova seção Benefícios + adaptações do hero (Dashboard
   multi-wallet com lista de carteiras em vez de slot de conversão).
   Cores: EXCLUSIVAMENTE tokens semânticos de colors.css.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   HERO — pills flutuantes com ícone SVG (em vez de img.moeda-icon de moedas).
   Mesmo padrão do tab-api-pix.css — círculo 48 px com ícone SVG centralizado.
   ───────────────────────────────────────────────────────────────────────────── */
.ct-pill-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-pill-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.moeda-pill:hover .ct-pill-icon {
  transform: rotate(8deg) scale(1.08);
}

/* Variantes — alterna entre primary-container e surface-2 para variação visual */
.ct-pill--deposit .ct-pill-icon  { background: var(--primary-container); color: var(--on-primary-container); }
.ct-pill--withdraw .ct-pill-icon { background: var(--surface-2, #eef0f2); color: var(--text-primary); }
.ct-pill--generate .ct-pill-icon { background: var(--primary-container); color: var(--on-primary-container); }
.ct-pill--monitor .ct-pill-icon  { background: var(--surface-2, #eef0f2); color: var(--text-primary); }

@media (max-width: 64rem) {
  .ct-pill-icon { width: 36px; height: 36px; }
  .ct-pill-icon svg { width: 20px; height: 20px; }
}

@media (max-width: 36rem) {
  .ct-pill-icon { width: 32px; height: 32px; }
  .ct-pill-icon svg { width: 18px; height: 18px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO — slot central transformado em Dashboard multi-wallet
   O .exchange-swap-wrap original era um container vazio (height: 0). Aqui vira
   uma row visível mostrando o status de monitoramento (pulse + texto). A
   .exchange-section--bottom passa a comportar uma lista vertical de wallets.
   ───────────────────────────────────────────────────────────────────────────── */
.cv-exchange-wrap .exchange-swap-wrap.ct-status-row {
  position: relative;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0;
  margin: 4px 0;
}

.ct-status-row .exchange-swap {
  display: none;
}

/* Pulsing dot — mesma estética do howitworks3-status-dot */
.ct-status-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--on-primary-container);
  position: relative;
  flex-shrink: 0;
}

.ct-status-pulse::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--on-primary-container);
  opacity: 0.35;
  animation: ct-pulse 1.6s ease-out infinite;
}

@keyframes ct-pulse {
  0% { transform: scale(0.6); opacity: 0.45; }
  80%, 100% { transform: scale(2.2); opacity: 0; }
}

.ct-status-text {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--on-primary-container);
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .ct-status-pulse::before { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO — Lista de wallets dentro do .exchange-section--bottom
   Override do layout default da exchange-section (que era label+value único)
   para acomodar uma lista vertical de 3 wallet rows.
   ───────────────────────────────────────────────────────────────────────────── */
.cv-exchange-wrap .exchange-section--bottom.ct-wallet-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}

.ct-wallet-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: white;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background 300ms ease, border-color 300ms ease, transform 300ms ease;
}

.ct-wallet-row--highlight {
  background: var(--primary-container);
  border-color: var(--on-primary-container);
}

.ct-wallet-avatar {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--surface-2, #eef0f2);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ct-wallet-row--highlight .ct-wallet-avatar {
  background: white;
  color: var(--on-primary-container);
}

.ct-wallet-avatar svg {
  width: 14px;
  height: 14px;
}

.ct-wallet-addr {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Cascadia Mono", monospace;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ct-wallet-balance {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}

.ct-wallet-chain {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding: 2px 6px;
  background: var(--surface-2, #eef0f2);
  border-radius: 4px;
}

.ct-wallet-row--highlight .ct-wallet-chain {
  background: white;
  color: var(--on-primary-container);
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO — badge "Online" no header (variante verde)
   ───────────────────────────────────────────────────────────────────────────── */
.exchange-badge.ct-badge--ok {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-color: var(--on-primary-container);
}

.ct-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--on-primary-container);
  flex-shrink: 0;
  position: relative;
}

.ct-badge-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--on-primary-container);
  opacity: 0.4;
  animation: ct-pulse 1.6s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ct-badge-dot::after { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   INTERGRATION — variante para 5 step cards
   Reduz padding-block do gradient pillar para acomodar 5 cards (vs 4 default).
   ───────────────────────────────────────────────────────────────────────────── */
.intergration-stack.ct-intergration-stack--5 {
  /* Default era 24*spacing (≈96 px cada lado). Para 5 cards, 18*spacing
     mantém respiração do gradient sem ficar excessivo. */
  padding-block: calc(var(--spacing) * 18);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BENEFITS SECTION (NOVA) — grid de 4 cards com ícone + título + 3 bullets
   Layout: 4 colunas em desktop (>= 64rem), 2x2 em tablet (>= 40rem),
   1 coluna em mobile.
   ───────────────────────────────────────────────────────────────────────────── */
.benefits-section {
  /* fold padding já vem de .fold (base.css). Centraliza o conteúdo. */
  display: flex;
  justify-content: center;
}

.benefits-inner {
  width: 100%;
  max-width: 1324px;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 12);
  margin-inline: auto;
}

.benefits-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(var(--spacing) * 2);
  /* 720 px = max-width do bloco de heading; segue padrão de outras seções */
  max-width: 720px;
  margin-inline: auto;
}

.benefits-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.benefits-desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--spacing) * 5);
}

.benefit-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 6);
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  /* min-height para alinhar visualmente os 4 cards mesmo com bullets de
     comprimentos diferentes */
  min-height: 100%;
}

.benefit-card-icon {
  width: calc(var(--spacing) * 12);
  height: calc(var(--spacing) * 12);
  border-radius: var(--radius-md, 12px);
  background: var(--primary-container);
  color: var(--on-primary-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefit-card-icon svg {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}

.benefit-card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.benefit-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}

.benefit-card-list li {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.benefit-card-list li svg {
  flex-shrink: 0;
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  color: var(--on-primary-container);
  margin-top: 3px;
}

/* Reveal animation (xg-reveal já é tratada por animations.js) */
.benefits-section .xg-reveal.active {
  animation: xg-fade-up 0.9s var(--xg-ease-out-expo) forwards;
}

/* Responsivo */
@media (max-width: 64rem) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 40rem) {
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: calc(var(--spacing) * 4);
  }

  .benefits-section {
    padding-block: calc(var(--spacing) * 16);
  }

  .benefit-card {
    padding: calc(var(--spacing) * 5);
  }

  .benefits-title {
    font-size: var(--text-2xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .benefits-section .xg-reveal {
    opacity: 1;
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FIM — overrides + nova seção Benefícios. Toda a diagramação restante
   (animações .ha/.xg-reveal, gradient-warp, marquee do audience) vem direto
   de tab-conversao.css + design system.
   ───────────────────────────────────────────────────────────────────────────── */