/* The main heading for each chart */
.ropme-chart-heading {
    margin-top: 28px; 
    margin-bottom: 20px; 
    font-size: 24px; 
    color: var(--wp--preset--color--heading, #333);
}

/* The wrapper around the canvas to ensure Chart.js sizing works */
.ropme-chart-wrapper {
    height: 300px; 
    position: relative;
    width: 100%;
}

/* The container for the statistics box below the chart */
.ropme-stats-box {
    padding: 15px; 
    margin-top: 15px; 
    /* Original margins preserved */
    margin-right: 40px; 
    margin-left: 110px; 
    border-radius: 8px; 
    border: 1px solid #e0e0e0;
    background-color: #fff;
}

/* The grid layout for the stats */
.ropme-stats-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); 
    gap: 10px; 
    font-size: 14px;
}

/* Individual stat item */
.ropme-stat-item {
    text-align: center;
}

.ropme-stat-label {
    font-weight: bold; 
    color: var(--wp--preset--color--heading, #333); 
    font-size: 14px;
}

.ropme-stat-value {
    font-size: 18px; 
    color: var(--wp--preset--color--heading, #333); 
    margin-top: 4px;
}

/* Messages (Error or No Data) */
.ropme-message-error {
    color: red; 
    padding: 20px; 
    text-align: center;
}

.ropme-message-nodata {
    padding: 10px; 
    color: red;
}

/* Responsive fix: On small screens, remove the large left/right margins */
@media (max-width: 768px) {
    .ropme-stats-box {
        margin-left: 0;
        margin-right: 0;
    }
}