/* funds.css */

/* === Funds Wrapper === */
.funds-wrapper {
  display: flex;
  width: 100%;
  padding: 0.5em 3em 0.5rem 1em;
  position: relative;
  align-items: center;
  gap: 0.5rem;
}

/* === Slot Containers (50/50) === */
.funds-slot {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.funds-slot.right-slot {
  min-width: 120px; /* ✅ Prevent layout shift when hidden */
}

/* === Funds Amount === */
.funds-amount {
  font-weight: bold;
  font-size: 1.2rem;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

/* === Delta === */
.funds-delta {
  font-weight: bold;
  font-size: 1rem;
  position: relative;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.funds-delta.show {
  opacity: 1;
}

.funds-delta.positive {
  color: #2ecc71 !important;
}

.funds-delta.negative {
  color: #e74c3c !important;
}

.funds-delta.hidden,
.right-slot.hidden {
  display: block;
  opacity: 0;
}

/* === Pulse Animation on Buy or Hold === */
.funds-delta.pulse {
  animation: gainPulse 0.4s ease;
}

@keyframes gainPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* === Merge Animation for Gains (Sell) === */
.funds-delta.merge {
  animation: deltaMerge 0.6s ease-in forwards;
}

@keyframes deltaMerge {
  0%   { transform: translateX(0) scale(1); opacity: 1; }
  20%  { transform: translateX(20px) scale(1); opacity: 1; }
  100% { transform: translateX(-80px) scale(0.7); opacity: 0; }
}

/* === Flash Animation for Funds === */
.funds-amount.flash-profit,
.funds-amount.flash-loss {
  animation: fundsFlash 0.8s ease;
}

.funds-amount.flash-profit {
  color: #2ecc71;
}

.funds-amount.flash-loss {
  color: #e74c3c;
}

@keyframes fundsFlash {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.2); }
  60%  { transform: scale(1); }
  100% { color: #111; }
}