/* === South Indian Chart Styles === */

#chart-display {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    width: 100%;
}

#chart-display svg {
    width: 100%;
    height: auto;
    max-width: 380px;
    border-radius: 8px;
}

/* Chart container specific */
.chart-container {
    min-height: 300px;
}

/* Planet table styling */
#planet-table .planet-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

#planet-table .planet-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

#planet-table small {
    font-size: 0.8em;
}

/* Birth summary info */
#birth-summary .info-row,
#ascendant-info .info-row,
#moon-info .info-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}

#birth-summary .info-row:last-child,
#ascendant-info .info-row:last-child,
#moon-info .info-row:last-child {
    border-bottom: none;
}

.info-label {
    color: var(--text-secondary);
}

.info-value {
    color: var(--text-primary);
    font-weight: 500;
}

/* Responsive chart */
@media (max-width: 768px) {
    #chart-display svg {
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    #chart-display svg {
        max-width: 280px;
    }

    #planet-table {
        font-size: 0.78rem;
    }
}