/**
 * TrafficMeter Public Styles
 *
 * Frontend counter display styles.
 *
 * @package TrafficMeter
 */

/* ==========================================================================
   Base Counter Styles
   ========================================================================== */

.trafficmeter-count {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.9em;
	color: #666;
	line-height: 1.4;
}

.trafficmeter-auto-insert {
	margin: 1em 0;
	padding: 0.5em 0;
}

/* ==========================================================================
   Counter Elements
   ========================================================================== */

.trafficmeter-icon {
	display: inline-flex;
	align-items: center;
}

.trafficmeter-label {
	color: #888;
}

.trafficmeter-value {
	font-weight: 600;
	color: #333;
}

.trafficmeter-total {
	/* Total views styling */
}

.trafficmeter-unique {
	color: #666;
	font-weight: 400;
}

.trafficmeter-separator {
	color: #ccc;
	margin: 0 0.15em;
}

/* ==========================================================================
   Position Variants
   ========================================================================== */

/* Before content */
.trafficmeter-auto-insert:first-child {
	margin-top: 0;
	padding-bottom: 0.75em;
	border-bottom: 1px solid #eee;
	margin-bottom: 1em;
}

/* After content */
.trafficmeter-auto-insert:last-child {
	margin-bottom: 0;
	padding-top: 0.75em;
	border-top: 1px solid #eee;
	margin-top: 1em;
}

/* ==========================================================================
   Theme Compatibility
   ========================================================================== */

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.trafficmeter-count {
		color: #aaa;
	}

	.trafficmeter-value {
		color: #eee;
	}

	.trafficmeter-unique {
		color: #999;
	}

	.trafficmeter-separator {
		color: #555;
	}

	.trafficmeter-auto-insert:first-child {
		border-bottom-color: #333;
	}

	.trafficmeter-auto-insert:last-child {
		border-top-color: #333;
	}
}

/* ==========================================================================
   Size Variants
   ========================================================================== */

.trafficmeter-count.trafficmeter-sm {
	font-size: 0.8em;
}

.trafficmeter-count.trafficmeter-lg {
	font-size: 1.1em;
}

.trafficmeter-count.trafficmeter-xl {
	font-size: 1.3em;
}

/* ==========================================================================
   Style Variants
   ========================================================================== */

/* Badge style */
.trafficmeter-count.trafficmeter-badge {
	background: #f5f5f5;
	padding: 0.3em 0.6em;
	border-radius: 4px;
	font-size: 0.85em;
}

/* Pill style */
.trafficmeter-count.trafficmeter-pill {
	background: #f0f0f0;
	padding: 0.25em 0.75em;
	border-radius: 50px;
	font-size: 0.85em;
}

/* Minimal style */
.trafficmeter-count.trafficmeter-minimal {
	gap: 0.25em;
	color: #888;
}

.trafficmeter-count.trafficmeter-minimal .trafficmeter-value {
	font-weight: 500;
	color: inherit;
}

/* ==========================================================================
   Animation (for AJAX updates)
   ========================================================================== */

.trafficmeter-count.trafficmeter-updating {
	opacity: 0.6;
}

.trafficmeter-count.trafficmeter-updated .trafficmeter-value {
	animation: trafficmeter-pulse 0.3s ease;
}

@keyframes trafficmeter-pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 600px) {
	.trafficmeter-auto-insert {
		font-size: 0.85em;
	}
}