/* Counter styles. Colours: set --ga4s-accent (and --ga4s-accent-text) on .ga4s-counter or a parent to match your theme. */
.ga4s-counter { --ga4s-accent: #1e87f0; --ga4s-accent-text: #fff; font-variant-numeric: tabular-nums; }
.ga4s-counter__num { font-weight: 600; }

/* plain: inherits everything from the surrounding text */

.ga4s-counter--meta { display: inline-block; font-size: .875em; opacity: .8; }
.ga4s-counter--meta .ga4s-counter__num { font-weight: 500; }
.ga4s-counter--list.ga4s-counter--meta::before { display: none; }

.ga4s-counter--badge { display: inline-block; padding: .15em .7em; border-radius: 999px; background: rgba(127, 127, 127, .15); }

.ga4s-counter--pill { display: inline-block; padding: .25em .95em; border-radius: 999px; background: var(--ga4s-accent); color: var(--ga4s-accent-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }

.ga4s-counter--outline { display: inline-block; padding: .2em .85em; border: 2px solid var(--ga4s-accent); border-radius: 8px; color: var(--ga4s-accent); }

.ga4s-counter--icon::before, .ga4s-counter--meta::before {
	content: ""; display: inline-block; width: 1.15em; height: 1.15em; margin-right: .4em; vertical-align: -.2em; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C7 5 3 9.5 2 12c1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8zm0-6a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C7 5 3 9.5 2 12c1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8zm0-6a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ga4s-counter--stat { display: inline-flex; flex-direction: column; align-items: center; padding: .8em 1.5em; border-radius: 12px; background: rgba(127, 127, 127, .12); text-align: center; line-height: 1.25; font-size: .9em; }
.ga4s-counter--stat .ga4s-counter__num { display: block; font-size: 2.3em; line-height: 1.1; color: var(--ga4s-accent); }

.ga4s-counter--card { display: inline-block; padding: .6em 1em; border: 1px solid rgba(127, 127, 127, .35); border-radius: 8px; }

/* YOOtheme / UIkit styles: UIkit paints these with the site's theme. Light fallbacks below apply only if UIkit CSS is missing. */
.ga4s-counter--uk-label:not(.uk-label):not(.uk-list) { display: inline-block; padding: 0 10px; line-height: 1.6; font-size: .875rem; color: #fff; background: var(--ga4s-accent); border-radius: 2px; }
.ga4s-counter--uk-label.uk-label { text-transform: none; }
.ga4s-counter--uk-badge .ga4s-counter__num:not(.uk-badge) { display: inline-block; min-width: 22px; padding: 0 .4em; line-height: 22px; text-align: center; color: #fff; background: var(--ga4s-accent); border-radius: 500px; }
.ga4s-counter--uk-badge .ga4s-counter__num.uk-badge { font-weight: 600; }
.ga4s-counter--uk-card { display: block; }
.ga4s-counter--uk-card:not(.uk-card) { padding: 15px 20px; background: #fff; color: #666; box-shadow: 0 5px 15px rgba(0, 0, 0, .08); }
.ga4s-counter--uk-stat { display: block; }
.ga4s-counter--uk-stat .ga4s-counter__num { display: block; font-size: 2.3em; line-height: 1.2; }
.ga4s-counter--uk-stat:not(.uk-card) { padding: 15px 20px; background: var(--ga4s-accent); color: #fff; text-align: center; }

/* lists */
.ga4s-counter--list { list-style: none; margin: 0; padding: 0; }
.ga4s-counter--list:not(.uk-list) li { display: flex; justify-content: space-between; gap: 1em; padding: .2em 0; }
.ga4s-counter--list.uk-list li, .ga4s-counter--list.uk-card li { display: flex; justify-content: space-between; gap: 1em; }
.ga4s-counter--list.ga4s-counter--card, .ga4s-counter--list.ga4s-counter--stat, .ga4s-counter--list.ga4s-counter--pill, .ga4s-counter--list.ga4s-counter--outline { display: block; border-radius: 12px; }
.ga4s-counter--list.ga4s-counter--pill, .ga4s-counter--list.ga4s-counter--outline { padding: .5em 1.1em; }
.ga4s-counter--list.ga4s-counter--stat { flex-direction: initial; }
.ga4s-counter--list.ga4s-counter--stat .ga4s-counter__num, .ga4s-counter--list .ga4s-counter__num { display: inline; font-size: inherit; }
.ga4s-counter--list.ga4s-counter--icon::before, .ga4s-counter--meta::before { display: none; }
.ga4s-counter--list.ga4s-counter--icon .ga4s-counter__metric::before { content: ""; }
.ga4s-counter__values { display: flex; gap: 1em; flex-wrap: wrap; }
.ga4s-counter--hint { opacity: .7; font-style: italic; }
.ga4s-pageviews { margin: .6em 0; }