/* D3 Tooltip Styling */
.d3-tooltip {
  position: absolute;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.15s ease;
}

/* D3 Bar Chart Styling */
#blog-03-bar-graph .bar {
  fill: #FF8DA1; /* 🎨 Your pink color */
  transition: fill 0.3s ease, height 0.3s ease;
}

/* Optional: hover effect */
#blog-03-bar-graph .bar:hover {
  fill: #ff6f91; /* slightly darker on hover */
}

/* ================================
   Line Chart Styling
================================ */

/* Line path */
#blog-03-line-graph .line-point{
  stroke: #FF8DA1;
  stroke-width: 2.5;
}

/* Line data points */
#blog-03-line-graph circle,
#blog-03-scatter-chart circle {
  fill: #AD56C4;
  transition: r 0.2s ease, fill 0.2s ease;
}

/* Hover effect on points */
#blog-03-scatter-chart circle:hover {
  fill: #FF9CE9;
}

/* ================================
   Pie Chart Styling
================================ */

/* Pie slices use all theme colors */
#blog-03-pie-chart path:nth-child(1) { fill: #FF8DA1; }
#blog-03-pie-chart path:nth-child(2) { fill: #FFC2BA; }
#blog-03-pie-chart path:nth-child(3) { fill: #FF9CE9; }
#blog-03-pie-chart path:nth-child(4) { fill: #AD56C4; }

/* Smooth hover effect for pie */
#blog-03-pie-chart path {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#blog-03-pie-chart path:hover {
  opacity: 0.9;
  transform: scale(1.05);
}
/* Center all graphs */
#blog-03-bar-graph,
#blog-03-line-graph,
#blog-03-scatter-chart,
#blog-03-pie-chart {
  display: flex;
  justify-content: center;
  align-items: center;
}