.ri-stat-card {
	background: #ffffff;
	border: 1px solid #DCE4EE;
	border-radius: 12px;
	padding: 20px 20px 18px;
	box-shadow: 0 1px 2px rgba(18, 35, 63, 0.04);
	font-family: inherit;
}

.ri-stat-label {
	font-size: 12px;
	font-weight: 500;
	color: #5B6B82;
	margin-bottom: 8px;
}

.ri-stat-value-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px;
}

.ri-stat-value {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #12233F;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.ri-stat-suffix {
	font-size: 15px;
	font-weight: 600;
	color: #5B6B82;
	margin-left: 6px;
}

.ri-stat-trend {
	font-size: 14px;
	font-weight: 600;
	color: #3E8FD9;
}

.ri-stat-chart {
	margin-top: 12px;
	height: 40px;
	width: 100%;
}

/* Chart-only mode: no label/value above, so drop the card padding
   and the chart's top margin to keep it tight. */
.ri-stat-card.ri-chart-only {
	padding: 16px;
}

.ri-stat-card.ri-chart-only .ri-stat-chart {
	margin-top: 0;
}

/* Line chart */
.ri-stat-chart.ri-chart-line svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Bar chart */
.ri-stat-chart.ri-chart-bar {
	display: flex;
	align-items: flex-end;
	gap: 6px;
}

.ri-bar {
	flex: 1 1 0;
	min-height: 3px;
	border-radius: 3px 3px 0 0;
	transition: opacity 0.15s ease;
}

.ri-bar:hover {
	opacity: 0.8;
}

/* Responsive: let cards stack cleanly inside Elementor columns */
@media (max-width: 767px) {
	.ri-stat-value {
		font-size: 26px;
	}
}