/* Chart Section */
.chart-section {
  text-align: center;
}

.chart-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
}

.chart-svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(212, 168, 67, 0.1));
  display: block;
}

.chart-svg .house-path {
  fill: transparent;
  stroke: var(--gold-primary);
  stroke-width: 1.5;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.chart-svg .house-path:hover {
  fill: rgba(212, 168, 67, 0.06);
  stroke-width: 2;
}

.chart-svg .house-path.ascendant {
  fill: rgba(212, 168, 67, 0.05);
}

.chart-svg .chart-border {
  fill: none;
  stroke: var(--gold-primary);
  stroke-width: 2;
}

.chart-svg line, 
.chart-svg polygon {
  stroke: var(--gold-primary);
  stroke-width: 1;
}

/* Text styles inside SVG */
.chart-svg .planet-text {
  fill: var(--gold-light);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: central;
}

.chart-svg .sign-number {
  fill: var(--text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: central;
}

.chart-svg .center-text {
  fill: var(--gold-primary);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: central;
}

/* Chart Animations */
.chart-animate .chart-border, 
.chart-animate line {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: chartDraw 2s ease forwards;
}

/* Tooltip */
.chart-tooltip {
  position: absolute;
  background: rgba(10, 14, 26, 0.95);
  border: 1px solid var(--border-gold-hover);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-primary);
  pointer-events: none;
  z-index: 50;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  transform: translate(-50%, -100%);
  margin-top: -10px;
}

.chart-tooltip.visible {
  opacity: 1;
}