/* 
 * Visual indicators for investments and savings
 * Consistent with mission counter improvements style
 */

/* Base badge styling for indicators */
.indicator-badge {
  /* Size and positioning */
  height: 1.2rem;
  min-width: 1.2rem;
  padding: 0 0.4rem;
  
  /* Visual appearance */
  border-radius: 9999px;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Enhanced visual effects */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  
  /* Positioning */
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  
  /* Animation */
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Investment indicator styling */
.investment-icon {
  position: relative;
}

.investment-badge {
  background-color: #4c1d95; /* Purple for investments */
}

.investment-badge.active {
  animation: badge-pulse 1.5s infinite;
}

/* Savings indicator styling */
.savings-icon {
  position: relative;
}

.savings-badge {
  background-color: #1e40af; /* Blue for savings */
}

.savings-badge.active {
  animation: badge-pulse 1.5s infinite;
}

/* Pulse animation for active indicators */
@keyframes badge-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* Different styling based on amount */
.badge-low {
  background-color: #3b82f6; /* Blue for low amounts */
}

.badge-medium {
  background-color: #8b5cf6; /* Purple for medium amounts */
}

.badge-high {
  background-color: #10b981; /* Green for high amounts */
}