/**
 * Zen Addons Pro - Counter design library (24 Pro designs).
 *
 * Hex values, sizes and glyphs are tuned to the canonical Claude Design spec
 * ("Counter Widget.dc.html", project 559ffdf9), entries P07-P30. Each design is
 * a self-contained look built ONLY on the markup the free Counter widget already
 * emits:
 *
 *   .zaso-counter (wrapper)
 *     .zaso-counter__inner
 *       .zaso-counter__icon  (optional; the user's chosen icon glyph/image)
 *       .zaso-counter__number  (.zaso-counter__prefix / __value / __suffix)
 *       .zaso-counter__title (optional; the user's label)
 *
 * Content rule (mirrors the Alert Box Pro library): the NUMBER, PREFIX/SUFFIX,
 * TITLE and ICON come from the user's own fields and are only restyled here.
 * Structural extras the widget cannot emit (progress rings, bars, sparklines,
 * accent bars, watermark digits, trend/footnote chips) are drawn purely from CSS
 * via pseudo-elements with the spec's fixed demo values, so each design renders
 * WYSIWYG without requiring new content fields. Material Symbols glyphs (speed,
 * public, extension, cloud, widgets, palette, fiber_new ...) are supplied by the
 * widget's existing icon field from the self-hosted "ZASO Material Symbols
 * Rounded" family; this stylesheet only sizes/colours/positions the icon box.
 *
 * Specificity: the free widget's compiled LESS targets .zaso-counter__* at
 * (0,2,0). Every rule here is prefixed with the doubled wrapper class
 * .zaso-counter.zaso-counter--design-<id> so descendant rules land at (0,3,0)
 * and win without !important. Nothing here touches the default render or the six
 * free designs. Enqueued by Zanp_Counter_Designs only when the license is valid.
 *
 * @package Zen Addons for SiteOrigin Page Builder Pro
 */

/* --- Shared: animated number weight (spec: 800 / -0.02em unless noted) ----- */
.zaso-counter.zaso-counter--design-gradient-text .zaso-counter__number,
.zaso-counter.zaso-counter--design-dark-card .zaso-counter__number,
.zaso-counter.zaso-counter--design-progress-ring .zaso-counter__number,
.zaso-counter.zaso-counter--design-trend .zaso-counter__number,
.zaso-counter.zaso-counter--design-solid-fill .zaso-counter__number,
.zaso-counter.zaso-counter--design-split-panel .zaso-counter__number,
.zaso-counter.zaso-counter--design-progress-bar .zaso-counter__number,
.zaso-counter.zaso-counter--design-sparkline .zaso-counter__number,
.zaso-counter.zaso-counter--design-glass .zaso-counter__number,
.zaso-counter.zaso-counter--design-currency .zaso-counter__number,
.zaso-counter.zaso-counter--design-ghost-outline .zaso-counter__number,
.zaso-counter.zaso-counter--design-centered-badge .zaso-counter__number,
.zaso-counter.zaso-counter--design-mono-metric .zaso-counter__number,
.zaso-counter.zaso-counter--design-watermark .zaso-counter__number,
.zaso-counter.zaso-counter--design-pill .zaso-counter__number,
.zaso-counter.zaso-counter--design-accent-bar .zaso-counter__number,
.zaso-counter.zaso-counter--design-eyebrow .zaso-counter__number,
.zaso-counter.zaso-counter--design-two-tone .zaso-counter__number,
.zaso-counter.zaso-counter--design-suffix .zaso-counter__number,
.zaso-counter.zaso-counter--design-ring-icon .zaso-counter__number,
.zaso-counter.zaso-counter--design-banner .zaso-counter__number,
.zaso-counter.zaso-counter--design-footer-note .zaso-counter__number,
.zaso-counter.zaso-counter--design-gradient-ring .zaso-counter__number,
.zaso-counter.zaso-counter--design-centered-icon .zaso-counter__number {
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

/* --- P07 Gradient Text (violet, views) ------------------------------------ */
.zaso-counter.zaso-counter--design-gradient-text .zaso-counter__inner {
	align-items: flex-start;
	text-align: left;
	gap: 0;
	background-color: #ffffff;
	border: 1px solid #e9d5ff;
	border-radius: 14px;
	padding: 22px 24px;
	box-shadow: 0 4px 14px rgba( 124, 58, 237, 0.08 );
}
.zaso-counter.zaso-counter--design-gradient-text .zaso-counter__number {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-size: 44px;
}
.zaso-counter.zaso-counter--design-gradient-text .zaso-counter__suffix { font-size: 28px; font-weight: 800; }
.zaso-counter.zaso-counter--design-gradient-text .zaso-counter__prefix,
.zaso-counter.zaso-counter--design-gradient-text .zaso-counter__value,
.zaso-counter.zaso-counter--design-gradient-text .zaso-counter__suffix {
	background: linear-gradient( 135deg, #7c3aed, #c026d3 );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.zaso-counter.zaso-counter--design-gradient-text .zaso-counter__title { color: #7c3aed; font-size: 13px; font-weight: 600; margin-top: 6px; }

/* --- P08 Dark Card (teal, requests; glyph "speed" via icon field) --------- */
.zaso-counter.zaso-counter--design-dark-card .zaso-counter__inner {
	align-items: flex-start;
	text-align: left;
	gap: 0;
	background-color: #0f172a;
	border-radius: 14px;
	padding: 22px 24px;
}
.zaso-counter.zaso-counter--design-dark-card .zaso-counter__icon { margin-bottom: 10px; }
.zaso-counter.zaso-counter--design-dark-card .zaso-counter__icon,
.zaso-counter.zaso-counter--design-dark-card .zaso-counter__icon span { color: #2dd4bf; font-size: 22px; }
.zaso-counter.zaso-counter--design-dark-card .zaso-counter__number {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	color: #2dd4bf;
	font-size: 38px;
}
.zaso-counter.zaso-counter--design-dark-card .zaso-counter__suffix { color: #5eead4; font-size: 24px; font-weight: 800; }
.zaso-counter.zaso-counter--design-dark-card .zaso-counter__title { color: #94a3b8; font-size: 13px; font-weight: 600; margin-top: 6px; }

/* --- P09 Progress Ring (blue, % storage; ring fill = spec 313deg static) -- */
.zaso-counter.zaso-counter--design-progress-ring .zaso-counter__inner {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 18px;
	text-align: left;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 20px 24px;
	box-shadow: 0 2px 10px rgba( 15, 23, 42, 0.04 );
}
.zaso-counter.zaso-counter--design-progress-ring .zaso-counter__number {
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: conic-gradient( #2563eb 0deg 313deg, #e2e8f0 313deg 360deg );
	color: #2563eb;
	font-size: 17px;
	letter-spacing: 0;
}
.zaso-counter.zaso-counter--design-progress-ring .zaso-counter__number::before {
	content: "";
	position: absolute;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: #ffffff;
	z-index: 0;
}
.zaso-counter.zaso-counter--design-progress-ring .zaso-counter__prefix,
.zaso-counter.zaso-counter--design-progress-ring .zaso-counter__value,
.zaso-counter.zaso-counter--design-progress-ring .zaso-counter__suffix { position: relative; z-index: 1; }
.zaso-counter.zaso-counter--design-progress-ring .zaso-counter__title { color: #1e3a8a; font-size: 18px; font-weight: 800; margin-top: 0; }

/* --- P10 Trend (users; trend chip is fixed decorative CSS) ---------------- */
.zaso-counter.zaso-counter--design-trend .zaso-counter__inner {
	gap: 0;
	align-items: flex-start;
	text-align: left;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 22px 24px;
	box-shadow: 0 2px 10px rgba( 15, 23, 42, 0.04 );
}
.zaso-counter.zaso-counter--design-trend .zaso-counter__title { order: -1; color: #64748b; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.zaso-counter.zaso-counter--design-trend .zaso-counter__number { color: #0f172a; font-size: 40px; }
.zaso-counter.zaso-counter--design-trend .zaso-counter__inner::after {
	content: "\2197  +12% vs last month";
	align-self: flex-start;
	margin-top: 10px;
	padding: 4px 9px;
	background-color: #f0fdf4;
	color: #16a34a;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 700;
}

/* --- P11 Solid Fill (rose, reach; glyph "public" via icon field) ---------- */
.zaso-counter.zaso-counter--design-solid-fill .zaso-counter__inner {
	align-items: flex-start;
	text-align: left;
	gap: 0;
	background-color: #e11d48;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 10px 26px rgba( 225, 29, 72, 0.25 );
}
.zaso-counter.zaso-counter--design-solid-fill .zaso-counter__icon { margin-bottom: 10px; }
.zaso-counter.zaso-counter--design-solid-fill .zaso-counter__icon,
.zaso-counter.zaso-counter--design-solid-fill .zaso-counter__icon span { color: rgba( 255, 255, 255, 0.85 ); font-size: 24px; }
.zaso-counter.zaso-counter--design-solid-fill .zaso-counter__number { color: #ffffff; font-size: 46px; }
.zaso-counter.zaso-counter--design-solid-fill .zaso-counter__title { color: rgba( 255, 255, 255, 0.85 ); font-size: 13px; font-weight: 600; margin-top: 6px; }

/* --- P12 Split Panel (sky, integrations; glyph "extension" via icon) ------ */
.zaso-counter.zaso-counter--design-split-panel .zaso-counter__inner {
	display: grid;
	grid-template-columns: 66px 1fr;
	grid-template-rows: auto auto;
	align-items: stretch;
	gap: 0;
	text-align: left;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba( 15, 23, 42, 0.05 );
}
.zaso-counter.zaso-counter--design-split-panel .zaso-counter__icon {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background-color: #0284c7;
}
.zaso-counter.zaso-counter--design-split-panel .zaso-counter__icon,
.zaso-counter.zaso-counter--design-split-panel .zaso-counter__icon span { color: #ffffff; font-size: 28px; }
.zaso-counter.zaso-counter--design-split-panel .zaso-counter__number { grid-column: 2; color: #0c4a6e; font-size: 40px; padding: 20px 24px 0; }
.zaso-counter.zaso-counter--design-split-panel .zaso-counter__title { grid-column: 2; color: #0369a1; font-size: 13px; font-weight: 600; padding: 5px 24px 20px; }

/* --- P13 Progress Bar (amber, %; bar fill = spec 73% static) -------------- */
.zaso-counter.zaso-counter--design-progress-bar .zaso-counter__inner {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0;
	text-align: left;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 22px 24px;
}
.zaso-counter.zaso-counter--design-progress-bar .zaso-counter__title { order: -1; color: #64748b; font-size: 14px; font-weight: 600; margin-top: 0; }
.zaso-counter.zaso-counter--design-progress-bar .zaso-counter__number {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	color: #b45309;
	font-size: 28px;
}
.zaso-counter.zaso-counter--design-progress-bar .zaso-counter__suffix { color: #f59e0b; font-size: 17px; font-weight: 700; }
.zaso-counter.zaso-counter--design-progress-bar .zaso-counter__inner::after {
	content: "";
	order: 1;
	flex-basis: 100%;
	width: 100%;
	height: 9px;
	margin-top: 14px;
	border-radius: 99px;
	background: linear-gradient( to right, #f59e0b 0 73%, #f1f5f9 73% 100% );
}

/* --- P14 Sparkline (violet, sessions; 8 bars drawn as an inline SVG) ------ */
.zaso-counter.zaso-counter--design-sparkline .zaso-counter__inner {
	gap: 0;
	align-items: flex-start;
	text-align: left;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 22px 24px;
	box-shadow: 0 2px 10px rgba( 15, 23, 42, 0.04 );
}
.zaso-counter.zaso-counter--design-sparkline .zaso-counter__number { color: #5b21b6; font-size: 40px; }
.zaso-counter.zaso-counter--design-sparkline .zaso-counter__title { color: #7c3aed; font-size: 13px; font-weight: 600; margin-top: 6px; }
.zaso-counter.zaso-counter--design-sparkline .zaso-counter__inner::after {
	content: "";
	display: block;
	width: 76px;
	height: 34px;
	margin-top: 14px;
	background-repeat: no-repeat;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 34'%3E%3Crect x='0' y='22' width='6' height='12' rx='1' fill='%23ddd6fe'/%3E%3Crect x='10' y='16' width='6' height='18' rx='1' fill='%23c4b5fd'/%3E%3Crect x='20' y='24' width='6' height='10' rx='1' fill='%23ddd6fe'/%3E%3Crect x='30' y='12' width='6' height='22' rx='1' fill='%23c4b5fd'/%3E%3Crect x='40' y='18' width='6' height='16' rx='1' fill='%23ddd6fe'/%3E%3Crect x='50' y='7' width='6' height='27' rx='1' fill='%237c3aed'/%3E%3Crect x='60' y='14' width='6' height='20' rx='1' fill='%23c4b5fd'/%3E%3Crect x='70' y='2' width='6' height='32' rx='1' fill='%237c3aed'/%3E%3C/svg%3E" );
}

/* --- P15 Glass (coral; wrapper carries gradient, inner is frosted) -------- */
.zaso-counter.zaso-counter--design-glass {
	background: linear-gradient( 135deg, #fb7185, #f97316 );
	border-radius: 16px;
	padding: 20px;
}
.zaso-counter.zaso-counter--design-glass .zaso-counter__inner {
	align-items: flex-start;
	text-align: left;
	gap: 0;
	background: rgba( 255, 255, 255, 0.18 );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 12px;
	padding: 18px 20px;
}
.zaso-counter.zaso-counter--design-glass .zaso-counter__number { color: #ffffff; font-size: 42px; }
.zaso-counter.zaso-counter--design-glass .zaso-counter__title { color: rgba( 255, 255, 255, 0.92 ); font-size: 13px; font-weight: 600; margin-top: 6px; }

/* --- P16 Currency (emerald, revenue; prefix "$") -------------------------- */
.zaso-counter.zaso-counter--design-currency .zaso-counter__inner {
	align-items: flex-start;
	text-align: left;
	gap: 0;
	background-color: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 14px;
	padding: 22px 24px;
}
.zaso-counter.zaso-counter--design-currency .zaso-counter__number {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	color: #064e3b;
	font-size: 42px;
}
.zaso-counter.zaso-counter--design-currency .zaso-counter__prefix { color: #059669; font-size: 28px; font-weight: 800; }
.zaso-counter.zaso-counter--design-currency .zaso-counter__title { color: #047857; font-size: 13px; font-weight: 600; margin-top: 6px; }

/* --- P17 Ghost Outline (reviews) ------------------------------------------ */
.zaso-counter.zaso-counter--design-ghost-outline .zaso-counter__inner {
	align-items: flex-start;
	text-align: left;
	gap: 0;
	background-color: transparent;
	border: 1.5px solid #cbd5e1;
	border-radius: 14px;
	padding: 22px 24px;
}
.zaso-counter.zaso-counter--design-ghost-outline .zaso-counter__number { color: #334155; font-size: 44px; }
.zaso-counter.zaso-counter--design-ghost-outline .zaso-counter__title { color: #64748b; font-size: 13px; font-weight: 600; margin-top: 6px; }

/* --- P18 Centered Badge (blue, M; glyph "cloud" via icon field) ----------- */
.zaso-counter.zaso-counter--design-centered-badge .zaso-counter__inner {
	gap: 0;
	align-items: center;
	text-align: center;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 22px 24px;
	box-shadow: 0 4px 14px rgba( 15, 23, 42, 0.05 );
}
.zaso-counter.zaso-counter--design-centered-badge .zaso-counter__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 12px;
	border-radius: 50%;
	background-color: #eff6ff;
}
.zaso-counter.zaso-counter--design-centered-badge .zaso-counter__icon,
.zaso-counter.zaso-counter--design-centered-badge .zaso-counter__icon span { color: #2563eb; font-size: 25px; }
.zaso-counter.zaso-counter--design-centered-badge .zaso-counter__number {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	color: #1e3a8a;
	font-size: 42px;
}
.zaso-counter.zaso-counter--design-centered-badge .zaso-counter__suffix { color: #2563eb; font-size: 26px; font-weight: 800; }
.zaso-counter.zaso-counter--design-centered-badge .zaso-counter__title { color: #2563eb; font-size: 13px; font-weight: 600; margin-top: 6px; }

/* --- P19 Mono Metric (terminal; title becomes the mono eyebrow) ----------- */
.zaso-counter.zaso-counter--design-mono-metric .zaso-counter__inner {
	gap: 0;
	align-items: flex-start;
	text-align: left;
	background-color: #0b1220;
	border: 1px solid #1e293b;
	border-radius: 12px;
	padding: 20px 22px;
}
.zaso-counter.zaso-counter--design-mono-metric .zaso-counter__title {
	order: -1;
	margin-bottom: 10px;
	color: #22c55e;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.zaso-counter.zaso-counter--design-mono-metric .zaso-counter__number {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	color: #e2e8f0;
	font-size: 38px;
	font-weight: 500;
	letter-spacing: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.zaso-counter.zaso-counter--design-mono-metric .zaso-counter__suffix { color: #64748b; font-size: 20px; font-weight: 500; }

/* --- P20 Watermark (indigo, score; giant faint digits behind) ------------- */
.zaso-counter.zaso-counter--design-watermark .zaso-counter__inner {
	position: relative;
	overflow: hidden;
	gap: 0;
	align-items: flex-start;
	text-align: left;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 22px 24px;
}
.zaso-counter.zaso-counter--design-watermark .zaso-counter__inner::before {
	content: "88";
	position: absolute;
	top: -18px;
	right: -6px;
	color: #eef2ff;
	font-size: 110px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	pointer-events: none;
	z-index: 0;
}
.zaso-counter.zaso-counter--design-watermark .zaso-counter__number { position: relative; z-index: 1; color: #4338ca; font-size: 42px; }
.zaso-counter.zaso-counter--design-watermark .zaso-counter__title { position: relative; z-index: 1; color: #6366f1; font-size: 13px; font-weight: 600; margin-top: 6px; }

/* --- P21 Pill (orange, compact; glyph "fiber_new" via icon field) ---------
 * Compact inline stadium: icon circle on the left, number over label stacked
 * to its right. inline-grid keeps the pill sized to its content (width:auto)
 * instead of stretching to the column, and the wrapper text-align:left beats
 * the widget's default --align-center so the pill hugs the left edge. */
.zaso-counter.zaso-counter--design-pill.zaso-counter--design-pill { text-align: left; }
.zaso-counter.zaso-counter--design-pill .zaso-counter__inner {
	display: inline-grid;
	grid-template-columns: auto auto;
	align-items: center;
	column-gap: 14px;
	row-gap: 0;
	width: auto;
	text-align: left;
	background-color: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 999px;
	padding: 14px 24px 14px 18px;
}
.zaso-counter.zaso-counter--design-pill .zaso-counter__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: #ffffff;
}
.zaso-counter.zaso-counter--design-pill .zaso-counter__icon,
.zaso-counter.zaso-counter--design-pill .zaso-counter__icon span { color: #ea580c; font-size: 22px; }
.zaso-counter.zaso-counter--design-pill .zaso-counter__number { grid-column: 2; align-self: end; color: #9a3412; font-size: 30px; }
.zaso-counter.zaso-counter--design-pill .zaso-counter__title { grid-column: 2; align-self: start; margin-top: 2px; color: #c2410c; font-size: 12px; font-weight: 600; }

/* --- P22 Accent Bar (teal, clicks; left bar drawn via ::before) ----------- */
.zaso-counter.zaso-counter--design-accent-bar .zaso-counter__inner {
	display: grid;
	grid-template-columns: 4px 1fr;
	column-gap: 16px;
	align-items: center;
	text-align: left;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 20px 24px;
}
.zaso-counter.zaso-counter--design-accent-bar .zaso-counter__inner::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: stretch;
	width: 4px;
	border-radius: 2px;
	background-color: #14b8a6;
}
.zaso-counter.zaso-counter--design-accent-bar .zaso-counter__number { grid-column: 2; color: #0f766e; font-size: 40px; }
.zaso-counter.zaso-counter--design-accent-bar .zaso-counter__title { grid-column: 2; color: #0d9488; font-size: 13px; font-weight: 600; margin-top: 6px; }

/* --- P23 Eyebrow (violet, satisfaction; title becomes the eyebrow) -------- */
.zaso-counter.zaso-counter--design-eyebrow .zaso-counter__inner {
	gap: 0;
	align-items: flex-start;
	text-align: left;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 22px 24px;
}
.zaso-counter.zaso-counter--design-eyebrow .zaso-counter__title {
	order: -1;
	margin-bottom: 8px;
	color: #7c3aed;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.zaso-counter.zaso-counter--design-eyebrow .zaso-counter__number {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	color: #5b21b6;
	font-size: 42px;
}
.zaso-counter.zaso-counter--design-eyebrow .zaso-counter__suffix { color: #7c3aed; font-size: 24px; font-weight: 800; }
.zaso-counter.zaso-counter--design-eyebrow .zaso-counter__inner::after {
	content: "Based on 1,200 responses";
	margin-top: 6px;
	color: #94a3b8;
	font-size: 12px;
	font-weight: 500;
}

/* --- P24 Two-tone (teal, members) ----------------------------------------- */
.zaso-counter.zaso-counter--design-two-tone .zaso-counter__inner {
	align-items: flex-start;
	text-align: left;
	gap: 0;
	background: linear-gradient( 135deg, #f0fdfa, #ecfeff );
	border: 1px solid #99f6e4;
	border-radius: 14px;
	padding: 22px 24px;
}
.zaso-counter.zaso-counter--design-two-tone .zaso-counter__number { color: #115e59; font-size: 42px; }
.zaso-counter.zaso-counter--design-two-tone .zaso-counter__title { color: #0f766e; font-size: 13px; font-weight: 600; margin-top: 6px; }

/* --- P25 Suffix (fuchsia, subscribers) ------------------------------------ */
.zaso-counter.zaso-counter--design-suffix .zaso-counter__inner {
	align-items: flex-start;
	text-align: left;
	gap: 0;
	background-color: #ffffff;
	border: 1px solid #f5d0fe;
	border-radius: 14px;
	padding: 22px 24px;
	box-shadow: 0 4px 14px rgba( 192, 38, 211, 0.06 );
}
.zaso-counter.zaso-counter--design-suffix .zaso-counter__number {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	color: #a21caf;
	font-size: 44px;
}
.zaso-counter.zaso-counter--design-suffix .zaso-counter__suffix { color: #c026d3; font-size: 28px; font-weight: 800; }
.zaso-counter.zaso-counter--design-suffix .zaso-counter__title { color: #c026d3; font-size: 13px; font-weight: 600; margin-top: 6px; }

/* --- P26 Ring Icon (blue, plugins; glyph "widgets" via icon field) -------- */
.zaso-counter.zaso-counter--design-ring-icon .zaso-counter__inner {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	align-items: center;
	text-align: left;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 20px 24px;
	box-shadow: 0 2px 10px rgba( 15, 23, 42, 0.04 );
}
.zaso-counter.zaso-counter--design-ring-icon .zaso-counter__icon {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 2px solid #bfdbfe;
}
.zaso-counter.zaso-counter--design-ring-icon .zaso-counter__icon,
.zaso-counter.zaso-counter--design-ring-icon .zaso-counter__icon span { color: #2563eb; font-size: 24px; }
.zaso-counter.zaso-counter--design-ring-icon .zaso-counter__number { grid-column: 2; color: #1e3a8a; font-size: 40px; }
.zaso-counter.zaso-counter--design-ring-icon .zaso-counter__title { grid-column: 2; color: #2563eb; font-size: 13px; font-weight: 600; margin-top: 5px; }

/* --- P27 Banner (green, all-time; title sits on the right) ---------------- */
.zaso-counter.zaso-counter--design-banner .zaso-counter__inner {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-align: left;
	background-color: #15803d;
	border-radius: 14px;
	padding: 22px 26px;
}
.zaso-counter.zaso-counter--design-banner .zaso-counter__number { color: #ffffff; font-size: 34px; }
.zaso-counter.zaso-counter--design-banner .zaso-counter__title { color: rgba( 255, 255, 255, 0.85 ); font-size: 12px; font-weight: 600; text-align: right; margin-top: 0; }

/* --- P28 Footer Note (rose, rating; divider + footnote via ::after) ------- */
.zaso-counter.zaso-counter--design-footer-note .zaso-counter__inner {
	gap: 0;
	align-items: flex-start;
	text-align: left;
	background-color: #ffffff;
	border: 1px solid #fecdd3;
	border-radius: 14px;
	padding: 22px 24px;
}
.zaso-counter.zaso-counter--design-footer-note .zaso-counter__number {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	color: #be123c;
	font-size: 42px;
}
.zaso-counter.zaso-counter--design-footer-note .zaso-counter__suffix { color: #fb7185; font-size: 18px; font-weight: 700; }
.zaso-counter.zaso-counter--design-footer-note .zaso-counter__title { color: #e11d48; font-size: 13px; font-weight: 600; margin-top: 6px; }
.zaso-counter.zaso-counter--design-footer-note .zaso-counter__inner::after {
	content: "From 360 verified reviews";
	align-self: stretch;
	margin-top: 14px;
	padding-top: 10px;
	border-top: 1px solid #fecdd3;
	color: #94a3b8;
	font-size: 12px;
	font-weight: 500;
}

/* --- P29 Gradient Ring (fuchsia, secure; wrapper is the gradient border) -- */
.zaso-counter.zaso-counter--design-gradient-ring {
	background: linear-gradient( 135deg, #d946ef, #8b5cf6 );
	border-radius: 16px;
	padding: 2px;
	box-shadow: 0 8px 22px rgba( 217, 70, 239, 0.18 );
}
.zaso-counter.zaso-counter--design-gradient-ring .zaso-counter__inner {
	gap: 0;
	align-items: center;
	text-align: center;
	background-color: #ffffff;
	border-radius: 14px;
	padding: 22px 24px;
}
.zaso-counter.zaso-counter--design-gradient-ring .zaso-counter__number {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	color: #86198f;
	font-size: 44px;
}
.zaso-counter.zaso-counter--design-gradient-ring .zaso-counter__suffix { color: #c026d3; font-size: 26px; font-weight: 800; }
.zaso-counter.zaso-counter--design-gradient-ring .zaso-counter__title { color: #a21caf; font-size: 13px; font-weight: 600; margin-top: 6px; }

/* --- P30 Centered Icon (orange, themes; glyph "palette" via icon field) --- */
.zaso-counter.zaso-counter--design-centered-icon .zaso-counter__inner {
	gap: 0;
	align-items: center;
	text-align: center;
	background-color: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 16px;
	padding: 24px 20px;
}
.zaso-counter.zaso-counter--design-centered-icon .zaso-counter__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 12px;
	border-radius: 50%;
	background-color: #ffffff;
	box-shadow: 0 4px 12px rgba( 234, 88, 12, 0.18 );
}
.zaso-counter.zaso-counter--design-centered-icon .zaso-counter__icon,
.zaso-counter.zaso-counter--design-centered-icon .zaso-counter__icon span { color: #ea580c; font-size: 25px; }
.zaso-counter.zaso-counter--design-centered-icon .zaso-counter__number {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	color: #9a3412;
	font-size: 42px;
}
.zaso-counter.zaso-counter--design-centered-icon .zaso-counter__suffix { color: #ea580c; font-size: 26px; font-weight: 800; }
.zaso-counter.zaso-counter--design-centered-icon .zaso-counter__title { color: #c2410c; font-size: 13px; font-weight: 600; margin-top: 6px; }

/* ===========================================================================
 * Alignment enforcement (must out-specify the scoped widget alignment rule).
 * ---------------------------------------------------------------------------
 * The free widget's alignment modifier compiles, via SiteOrigin, to
 *   .so-widget-<hash> .zaso-counter--align-center .zaso-counter__inner { align-items:center }
 * That instance-class prefix lands the rule at specificity (0,3,0) - the SAME
 * as a normal Pro design selector - so on the widget's default centre alignment
 * it would tie and, by load order, force every Pro design to centre. Each design
 * must instead enforce its own spec layout regardless of the widget's alignment
 * field. The design class is doubled here to reach (0,4,0) and win cleanly
 * without !important. align-items is the only cross-axis property the alignment
 * modifier sets, so re-asserting it (plus text-align) per design is sufficient;
 * structural properties (flex-direction, grid, etc.) live in the rules above and
 * are never touched by the alignment modifier.
 * ========================================================================= */

/* Left-aligned, single-column designs. */
.zaso-counter.zaso-counter--design-gradient-text.zaso-counter--design-gradient-text .zaso-counter__inner,
.zaso-counter.zaso-counter--design-dark-card.zaso-counter--design-dark-card .zaso-counter__inner,
.zaso-counter.zaso-counter--design-trend.zaso-counter--design-trend .zaso-counter__inner,
.zaso-counter.zaso-counter--design-solid-fill.zaso-counter--design-solid-fill .zaso-counter__inner,
.zaso-counter.zaso-counter--design-sparkline.zaso-counter--design-sparkline .zaso-counter__inner,
.zaso-counter.zaso-counter--design-glass.zaso-counter--design-glass .zaso-counter__inner,
.zaso-counter.zaso-counter--design-currency.zaso-counter--design-currency .zaso-counter__inner,
.zaso-counter.zaso-counter--design-ghost-outline.zaso-counter--design-ghost-outline .zaso-counter__inner,
.zaso-counter.zaso-counter--design-mono-metric.zaso-counter--design-mono-metric .zaso-counter__inner,
.zaso-counter.zaso-counter--design-watermark.zaso-counter--design-watermark .zaso-counter__inner,
.zaso-counter.zaso-counter--design-eyebrow.zaso-counter--design-eyebrow .zaso-counter__inner,
.zaso-counter.zaso-counter--design-two-tone.zaso-counter--design-two-tone .zaso-counter__inner,
.zaso-counter.zaso-counter--design-suffix.zaso-counter--design-suffix .zaso-counter__inner,
.zaso-counter.zaso-counter--design-footer-note.zaso-counter--design-footer-note .zaso-counter__inner {
	align-items: flex-start;
	text-align: left;
}

/* Left-aligned rows: keep the row vertically centred, content left. */
.zaso-counter.zaso-counter--design-progress-ring.zaso-counter--design-progress-ring .zaso-counter__inner,
.zaso-counter.zaso-counter--design-banner.zaso-counter--design-banner .zaso-counter__inner {
	align-items: center;
	text-align: left;
}

/* Progress bar: top row sits on the baseline, content left. */
.zaso-counter.zaso-counter--design-progress-bar.zaso-counter--design-progress-bar .zaso-counter__inner {
	align-items: baseline;
	text-align: left;
}

/* Left-aligned grid designs (icon/bar columns set their own stretch). */
.zaso-counter.zaso-counter--design-split-panel.zaso-counter--design-split-panel .zaso-counter__inner {
	align-items: stretch;
	text-align: left;
}
.zaso-counter.zaso-counter--design-accent-bar.zaso-counter--design-accent-bar .zaso-counter__inner,
.zaso-counter.zaso-counter--design-ring-icon.zaso-counter--design-ring-icon .zaso-counter__inner,
.zaso-counter.zaso-counter--design-pill.zaso-counter--design-pill .zaso-counter__inner {
	align-items: center;
	text-align: left;
}

/* Centre-aligned designs (the only four that stay centred). */
.zaso-counter.zaso-counter--design-centered-badge.zaso-counter--design-centered-badge .zaso-counter__inner,
.zaso-counter.zaso-counter--design-gradient-ring.zaso-counter--design-gradient-ring .zaso-counter__inner,
.zaso-counter.zaso-counter--design-centered-icon.zaso-counter--design-centered-icon .zaso-counter__inner {
	align-items: center;
	text-align: center;
}