/**
 * Frontend styles for AVTA shortcodes and blocks.
 */

.avta-shortcode {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-variant-numeric: tabular-nums;
}

.avta-shortcode-label {
	color: var( --wp--preset--color--secondary, #6b7280 );
	font-size: 0.9em;
}

.avta-top-pages {
	list-style: decimal;
	padding-left: 1.5em;
	margin: 0;
}

.avta-top-pages li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	border-bottom: 1px dashed rgba( 0, 0, 0, 0.08 );
}

.avta-top-pages a {
	color: inherit;
	text-decoration: none;
}

.avta-top-pages a:hover {
	text-decoration: underline;
}

.avta-top-pages .avta-views {
	color: var( --wp--preset--color--secondary, #6b7280 );
	font-variant-numeric: tabular-nums;
}

.wp-block-avta-visitor-counter {
	font-size: 1.1em;
}

.wp-block-avta-visitor-counter .avta-count {
	font-weight: 700;
	font-size: 1.5em;
}

.wp-block-avta-traffic-chart {
	width: 100%;
	max-width: 100%;
}

.wp-block-avta-traffic-chart canvas {
	width: 100% !important;
	height: 280px !important;
}