/* WebMitr Visitor Counter – public styles */
.svc-counter {
	--svc-fg: #111827;
	--svc-muted: #4b5563;
	--svc-sub: #6b7280;
	--svc-green: #16a34a;
	--svc-line: #e5e7eb;
	--svc-bg: #fff;
	font-family: inherit;
	color: var(--svc-fg);
	font-variant-numeric: tabular-nums;
	box-sizing: border-box;
	line-height: 1.2;
}
.svc-counter *, .svc-counter *::before { box-sizing: border-box; }
.svc-counter .svc-item { display: flex; align-items: center; gap: 14px; min-width: 0; }
.svc-counter .svc-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.svc-counter .svc-label { font-size: 15px; color: var(--svc-muted); white-space: nowrap; }
.svc-counter .svc-num { font-size: 24px; font-weight: 700; color: var(--svc-sub); letter-spacing: -.01em; white-space: nowrap; }
.svc-counter .svc-total .svc-num { color: var(--svc-fg); font-size: 30px; }
.svc-counter .svc-today .svc-num { color: var(--svc-green); }
.svc-counter .svc-icon { display: inline-flex; flex: none; color: var(--svc-sub); }
.svc-counter .svc-icon svg { width: 32px; height: 32px; }
.svc-counter .svc-item:not(.svc-total) .svc-icon { display: none; }

/* Clean + Dark: one card, vertical dividers */
.svc-style-clean, .svc-style-dark {
	width: fit-content; max-width: 100%;
	display: flex; flex-wrap: wrap; align-items: center;
	background: var(--svc-bg); border: 1px solid var(--svc-line); border-radius: 14px;
	padding: 18px 8px; box-shadow: 0 4px 14px rgba(17, 24, 39, .08);
}
.svc-style-clean .svc-item, .svc-style-dark .svc-item { padding: 4px 24px; border-left: 1px solid var(--svc-line); }
.svc-style-clean .svc-item:first-child, .svc-style-dark .svc-item:first-child { border-left: 0; }
.svc-style-clean .svc-total .svc-icon, .svc-style-dark .svc-total .svc-icon { padding-right: 22px; margin-right: 6px; border-right: 1px solid var(--svc-line); align-self: stretch; align-items: center; }
.svc-style-dark { --svc-bg: #16181d; --svc-fg: #fff; --svc-muted: #9ca3af; --svc-sub: #f3f4f6; --svc-green: #4ade80; --svc-line: #3a3d45; box-shadow: none; }
.svc-style-dark .svc-icon { color: #f3f4f6; }

/* Minimal + Compact: one line, "label: number" */
.svc-style-minimal, .svc-style-compact { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
.svc-style-minimal .svc-item, .svc-style-compact .svc-item { gap: 10px; padding: 0 16px; border-left: 1px solid #d1d5db; }
.svc-style-minimal .svc-item:first-child, .svc-style-compact .svc-item:first-child { border-left: 0; padding-left: 0; }
.svc-style-minimal .svc-text, .svc-style-compact .svc-text { flex-direction: row; align-items: baseline; gap: 6px; }
.svc-style-minimal .svc-label::after, .svc-style-compact .svc-label::after { content: ":"; }
.svc-style-minimal .svc-label, .svc-style-compact .svc-label { font-size: 15px; color: var(--svc-fg); }
.svc-style-minimal .svc-num, .svc-style-compact .svc-num, .svc-style-minimal .svc-total .svc-num, .svc-style-compact .svc-total .svc-num { font-size: 20px; }
.svc-style-minimal .svc-icon svg, .svc-style-compact .svc-icon svg { width: 24px; height: 24px; }
.svc-style-compact { display: inline-flex; border: 1.5px solid #d1d5db; border-radius: 999px; padding: 8px 22px; background: var(--svc-bg); }
.svc-style-compact .svc-icon { color: var(--svc-fg); }

/* Badge: pills */
.svc-style-badge { display: flex; flex-wrap: wrap; gap: 12px; }
.svc-style-badge .svc-item { border-radius: 16px; padding: 12px 22px; background: #f1f2f4; }
.svc-style-badge .svc-total { background: #1e3a6e; --svc-fg: #fff; --svc-muted: #dbe3f3; }
.svc-style-badge .svc-total .svc-icon { color: #fff; }
.svc-style-badge .svc-today { background: #e8f8ec; }
.svc-style-badge .svc-num, .svc-style-badge .svc-total .svc-num { font-size: 24px; color: var(--svc-fg); }
.svc-style-badge .svc-today .svc-num { color: #15803d; }

/* Icon boxes: every item has its own tinted box and icon */
.svc-style-iconbox { display: flex; flex-wrap: wrap; gap: 14px; }
.svc-style-iconbox .svc-item { flex: 1 1 160px; border-radius: 12px; padding: 16px 20px; background: #f1f2f4; }
.svc-counter.svc-style-iconbox .svc-item .svc-icon { display: inline-flex; color: #1f2937; }
.svc-style-iconbox .svc-total { background: #e3f1fd; }
.svc-style-iconbox .svc-total .svc-icon { color: #1e3a6e; }
.svc-style-iconbox .svc-today { background: #e5f7e9; }
.svc-style-iconbox .svc-today .svc-icon { color: #15803d; }
.svc-style-iconbox .svc-num, .svc-style-iconbox .svc-total .svc-num { font-size: 24px; color: var(--svc-fg); }
.svc-style-iconbox .svc-today .svc-num { color: #15803d; }

/* Detailed list */
.svc-style-list { display: flex; flex-direction: column; border: 1px solid var(--svc-line); border-radius: 12px; overflow: hidden; background: var(--svc-bg); }
.svc-style-list .svc-item { padding: 10px 16px; border-top: 1px solid var(--svc-line); }
.svc-style-list .svc-item:first-child { border-top: 0; }
.svc-style-list .svc-item .svc-icon { display: none; }
.svc-style-list .svc-text { flex-direction: row; justify-content: space-between; align-items: baseline; width: 100%; }
.svc-style-list .svc-num, .svc-style-list .svc-total .svc-num { font-size: 17px; color: var(--svc-fg); }
.svc-style-list .svc-total { background: #f8fafc; }
.svc-style-list .svc-today .svc-num { color: var(--svc-green); }

/* ---------- Narrow spaces (sidebars, footer columns, phones) ----------
 * Container queries size each counter by its own box. Browsers without
 * container query support keep the flex-wrap layout above. */
/* Size containment gives the box no content width of its own; in a layout that
 * sizes children to their content (e.g. an Elementor row container) it would
 * collapse. contain-intrinsic-inline-size supplies a natural width instead. */
.svc-cq { container-type: inline-size; contain-intrinsic-inline-size: 320px; max-width: 100%; }
.e-con > .elementor-widget-webmitr-visitor-counter, .e-con > .elementor-widget-webmitr-page-stats { max-width: 100%; }

@container (max-width: 420px) {
	/* Total on its own row; the other figures split into two columns below. */
	.svc-cq .svc-counter:not(.svc-style-list):not(.svc-style-card) { display: grid; grid-template-columns: 1fr 1fr; width: auto; }
	.svc-cq .svc-counter:not(.svc-style-list):not(.svc-style-card) .svc-total { grid-column: 1 / -1; }
	.svc-cq .svc-counter .svc-num { font-size: 20px; }
	.svc-cq .svc-counter .svc-total .svc-num { font-size: 26px; }
	.svc-cq .svc-counter .svc-label { font-size: 14px; }

	/* Minimal + Compact: "label: number" pairs in the grid, no separators */
	.svc-cq .svc-style-minimal, .svc-cq .svc-style-compact { gap: 12px 16px; }
	.svc-cq .svc-style-minimal .svc-item, .svc-cq .svc-style-compact .svc-item { padding: 0; border-left: 0; }
	.svc-cq .svc-style-compact { border-radius: 16px; padding: 14px 18px; }
	.svc-cq .svc-style-minimal .svc-num, .svc-cq .svc-style-compact .svc-num { font-size: 18px; }
	.svc-cq .svc-style-minimal .svc-total .svc-num, .svc-cq .svc-style-compact .svc-total .svc-num { font-size: 22px; }

	/* Badge + Icon boxes: tiles in a 2-column grid */
	.svc-cq .svc-style-badge, .svc-cq .svc-style-iconbox { gap: 10px; }
	.svc-cq .svc-style-badge .svc-item, .svc-cq .svc-style-iconbox .svc-item { padding: 12px 16px; gap: 12px; }
	.svc-cq .svc-style-iconbox .svc-item:not(.svc-total) .svc-icon svg { width: 22px; height: 22px; }
}

/* Clean, Dark and Icon boxes need ~560px for a single row, so they switch earlier. */
@container (max-width: 580px) {
	.svc-cq .svc-style-clean, .svc-cq .svc-style-dark, .svc-cq .svc-style-iconbox { display: grid; grid-template-columns: 1fr 1fr; width: auto; }
	.svc-cq .svc-style-clean .svc-total, .svc-cq .svc-style-dark .svc-total, .svc-cq .svc-style-iconbox .svc-total { grid-column: 1 / -1; }
	/* Clean + Dark: one card, horizontal divider under the total, vertical between the pair */
	.svc-cq .svc-style-clean, .svc-cq .svc-style-dark { padding: 6px 0; }
	.svc-cq .svc-style-clean .svc-item, .svc-cq .svc-style-dark .svc-item { padding: 12px 18px; border-left: 0; }
	.svc-cq .svc-style-clean .svc-total, .svc-cq .svc-style-dark .svc-total { border-bottom: 1px solid var(--svc-line); }
	.svc-cq .svc-style-clean .svc-item:nth-child(odd):not(:first-child),
	.svc-cq .svc-style-dark .svc-item:nth-child(odd):not(:first-child) { border-left: 1px solid var(--svc-line); }
	.svc-cq .svc-style-clean .svc-total .svc-icon, .svc-cq .svc-style-dark .svc-total .svc-icon { padding-right: 16px; margin-right: 0; }
	.svc-cq .svc-style-clean .svc-icon svg, .svc-cq .svc-style-dark .svc-icon svg { width: 28px; height: 28px; }
}

@container (max-width: 240px) {
	.svc-cq .svc-style-minimal .svc-icon, .svc-cq .svc-style-compact .svc-icon { display: none; }
	.svc-cq .svc-style-compact { padding: 12px 14px; }
	/* Very narrow: one column */
	.svc-cq .svc-counter:not(.svc-style-list):not(.svc-style-card) { grid-template-columns: 1fr; }
	.svc-cq .svc-style-clean .svc-item:nth-child(odd):not(:first-child),
	.svc-cq .svc-style-dark .svc-item:nth-child(odd):not(:first-child) { border-left: 0; }
	.svc-cq .svc-style-clean .svc-item:not(:last-child), .svc-cq .svc-style-dark .svc-item:not(:last-child) { border-bottom: 1px solid var(--svc-line); }
}

/* Elementor: "Show icon" switched off */
.elementor-widget-webmitr-visitor-counter:not(.svc-el-icon-yes) .svc-counter .svc-icon { display: none !important; }

/* Post views (shortcode + Elementor widget) */
.svc-post-views { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.svc-post-views-icon { display: inline-flex; line-height: 1; }
.svc-post-views-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* Page visitors & views ([page_stats], Elementor "Page Visitors & Views") */
.svc-page-stats { color: #4b5563; font-variant-numeric: tabular-nums; line-height: 1.3; }
.svc-page-stats .svc-ps-num { font-weight: 700; color: #111827; }
.svc-page-stats .svc-ps-icon { display: inline-flex; line-height: 1; }
.svc-page-stats .svc-ps-icon svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.svc-ps-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.svc-ps-inline .svc-ps-item { display: inline-flex; align-items: baseline; gap: 5px; }
.svc-ps-inline .svc-ps-sep { opacity: .5; }
.svc-ps-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.svc-ps-boxes .svc-ps-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.svc-ps-boxes .svc-ps-label { font-size: 13px; }
.svc-ps-boxes .svc-ps-num { font-size: 22px; letter-spacing: -.01em; }
.svc-ps-list { display: flex; flex-direction: column; }
.svc-ps-list .svc-ps-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e5e7eb; }
.svc-ps-list .svc-ps-item:last-child { border-bottom: 0; }

/* ---------- Stats card (footer widget) ---------- */
.svc-cq .svc-counter.svc-style-card {
	--card-bg: #f6f8fc; --card-line: #e3e8f1; --card-ink: #0f172a; --card-ink2: #1e293b; --card-sub: #475569; --card-accent: #1a6ee8;
	display: block; background: var(--card-bg); color: var(--card-ink); border: 1px solid var(--card-line); border-radius: 18px;
	padding: 24px 22px 16px; box-shadow: 0 12px 32px rgba(2, 8, 23, .18); max-width: 520px;
}
.svc-cq .svc-style-card .svc-card-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--card-line); }
.svc-cq .svc-style-card .svc-card-logo { display: inline-flex; flex: none; color: var(--card-accent); }
.svc-cq .svc-style-card .svc-card-logo svg { width: 40px; height: 40px; fill: currentColor; }
.svc-cq .svc-style-card .svc-card-title { font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--card-ink); }
.svc-cq .svc-style-card .svc-card-sub { font-size: 14px; color: var(--card-sub); margin-top: 4px; line-height: 1.4; }
.svc-cq .svc-style-card .svc-card-rows { display: flex; flex-direction: column; gap: 12px; }
.svc-cq .svc-style-card .svc-item { display: flex; align-items: center; gap: 16px; border-radius: 16px; padding: 14px 18px; background: #eef2f7; }
.svc-cq .svc-style-card .svc-item .svc-icon { display: inline-flex; color: #475569; }
.svc-cq .svc-style-card .svc-item .svc-icon svg { width: 28px; height: 28px; }
.svc-cq .svc-style-card .svc-item:not(.svc-total) .svc-text { flex: 1; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.svc-cq .svc-style-card .svc-label { font-size: 16px; font-weight: 500; color: var(--card-ink2); white-space: normal; }
.svc-cq .svc-style-card .svc-num { font-size: 23px; font-weight: 800; color: var(--card-ink2); letter-spacing: -.01em; }
/* Total: big tile */
.svc-cq .svc-style-card .svc-total { background: #e2edfc; padding: 18px; }
.svc-cq .svc-style-card .svc-total .svc-icon { width: 58px; height: 58px; border-radius: 14px; background: var(--card-accent); color: #fff; justify-content: center; align-items: center; box-shadow: 0 6px 14px rgba(26, 110, 232, .3); }
.svc-cq .svc-style-card .svc-total .svc-icon svg { width: 32px; height: 32px; }
.svc-cq .svc-style-card .svc-total .svc-label { font-size: 17px; }
.svc-cq .svc-style-card .svc-total .svc-num { font-size: 36px; color: var(--card-ink); line-height: 1.1; }
/* Row colours */
.svc-cq .svc-style-card .svc-today { background: #e7f6eb; } .svc-cq .svc-style-card .svc-today .svc-icon { color: #16a34a; } .svc-cq .svc-style-card .svc-today .svc-num { color: #15803d; }
.svc-cq .svc-style-card .svc-yesterday { background: #f0ecfb; } .svc-cq .svc-style-card .svc-yesterday .svc-icon { color: #7c3aed; }
.svc-cq .svc-style-card .svc-last7 { background: #fdf4df; } .svc-cq .svc-style-card .svc-last7 .svc-icon { color: #b7791f; }
.svc-cq .svc-style-card .svc-last30 { background: #e5f4fa; } .svc-cq .svc-style-card .svc-last30 .svc-icon { color: #0e8fb0; }
.svc-cq .svc-style-card .svc-month { background: #fcebf2; } .svc-cq .svc-style-card .svc-month .svc-icon { color: #db2777; }
.svc-cq .svc-style-card .svc-year { background: #eef2f7; } .svc-cq .svc-style-card .svc-year .svc-icon { color: #475569; }
/* Sparkline + footer */
.svc-cq .svc-style-card .svc-spark-wrap { position: relative; margin-top: 18px; color: #3b82f6; height: 64px; }
.svc-cq .svc-style-card .svc-spark { display: block; width: 100%; height: 100%; overflow: visible; }
.svc-cq .svc-style-card .svc-spark-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: currentColor; border: 2px solid var(--card-bg); transform: translate(-50%, -50%); }
.svc-cq .svc-style-card .svc-card-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; font-size: 14px; font-weight: 500; color: var(--card-sub); }
.svc-cq .svc-style-card .svc-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); animation: svc-pulse 2s infinite; flex: none; }
.svc-cq .svc-style-card .svc-card-info { margin-left: auto; display: inline-flex; color: #64748b; cursor: help; }
.svc-cq .svc-style-card .svc-card-info svg { width: 20px; height: 20px; }
@keyframes svc-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .svc-cq .svc-style-card .svc-live-dot { animation: none; } }
/* Narrow footer columns */
@container (max-width: 360px) {
	.svc-cq .svc-counter.svc-style-card { padding: 18px 14px 12px; border-radius: 16px; }
	.svc-cq .svc-style-card .svc-card-head { gap: 10px; padding-bottom: 14px; margin-bottom: 14px; }
	.svc-cq .svc-style-card .svc-card-logo svg { width: 30px; height: 30px; }
	.svc-cq .svc-style-card .svc-card-title { font-size: 19px; }
	.svc-cq .svc-style-card .svc-card-sub { font-size: 12.5px; }
	.svc-cq .svc-style-card .svc-card-rows { gap: 9px; }
	.svc-cq .svc-style-card .svc-item { gap: 12px; padding: 11px 13px; border-radius: 13px; }
	.svc-cq .svc-style-card .svc-item .svc-icon svg { width: 22px; height: 22px; }
	.svc-cq .svc-style-card .svc-total .svc-icon { width: 46px; height: 46px; border-radius: 12px; }
	.svc-cq .svc-style-card .svc-total .svc-icon svg { width: 26px; height: 26px; }
	.svc-cq .svc-style-card .svc-total .svc-num { font-size: 28px; }
	.svc-cq .svc-style-card .svc-label { font-size: 14px; }
	.svc-cq .svc-style-card .svc-total .svc-label { font-size: 15px; }
	.svc-cq .svc-style-card .svc-num { font-size: 19px; }
	.svc-cq .svc-style-card .svc-card-foot { font-size: 13px; }
}