/**
 * VibeShift Boost
 *
 * Visitors Styles
 *
 * File:
 * assets/css/visitors.css
 *
 * Responsibility:
 * - Visitor counter presentation.
 * - Live visitor indicators.
 * - Visitor statistics.
 * - Visitor badges.
 * - Visitor activity indicators.
 * - Visitor progress displays.
 * - Visitor responsive presentation.
 *
 * Does NOT contain:
 * - Visitor tracking logic.
 * - Visitor counting.
 * - Database operations.
 * - AJAX requests.
 * - Analytics calculations.
 * - JavaScript behavior.
 */


/* ==========================================================================
   VISITORS ROOT
   ========================================================================== */

.vibeshiftboost-visitors {

	--vibeshiftboost-visitors-primary: #2563eb;
	--vibeshiftboost-visitors-primary-hover: #1d4ed8;

	--vibeshiftboost-visitors-success: #16a34a;
	--vibeshiftboost-visitors-warning: #d97706;
	--vibeshiftboost-visitors-danger: #dc2626;
	--vibeshiftboost-visitors-info: #0891b2;

	--vibeshiftboost-visitors-text: #1e293b;
	--vibeshiftboost-visitors-muted: #64748b;
	--vibeshiftboost-visitors-light: #94a3b8;

	--vibeshiftboost-visitors-border: #e2e8f0;
	--vibeshiftboost-visitors-border-light: #f1f5f9;

	--vibeshiftboost-visitors-background: #f8fafc;
	--vibeshiftboost-visitors-card: #ffffff;

	--vibeshiftboost-visitors-radius: 14px;
	--vibeshiftboost-visitors-radius-small: 9px;

	--vibeshiftboost-visitors-shadow:
		0 4px 14px rgba(15, 23, 42, 0.06);

	width: 100%;

	min-width: 0;

	position: relative;

	color:
		var(--vibeshiftboost-visitors-text);

	box-sizing: border-box;
}


/* ==========================================================================
   BOX SIZING
   ========================================================================== */

.vibeshiftboost-visitors *,
.vibeshiftboost-visitors *::before,
.vibeshiftboost-visitors *::after {

	box-sizing: border-box;
}


/* ==========================================================================
   MAIN CARD
   ========================================================================== */

.vibeshiftboost-visitors-container {

	position: relative;

	width: 100%;

	min-width: 0;

	padding: 16px;

	border:
		1px solid
		var(--vibeshiftboost-visitors-border);

	border-radius:
		var(--vibeshiftboost-visitors-radius);

	background:
		var(--vibeshiftboost-visitors-card);

	box-shadow:
		var(--vibeshiftboost-visitors-shadow);
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.vibeshiftboost-visitors-header {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 12px;

	margin-bottom: 14px;
}

.vibeshiftboost-visitors-heading {

	display: flex;

	align-items: center;

	gap: 9px;

	min-width: 0;
}

.vibeshiftboost-visitors-icon {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 34px;

	height: 34px;

	flex: 0 0 34px;

	border-radius:
		var(--vibeshiftboost-visitors-radius-small);

	background:
		#eff6ff;

	color:
		var(--vibeshiftboost-visitors-primary);
}

.vibeshiftboost-visitors-icon svg {

	display: block;

	width: 18px;

	height: 18px;
}

.vibeshiftboost-visitors-title {

	margin: 0;

	color:
		var(--vibeshiftboost-visitors-text);

	font-size: 14px;

	font-weight: 750;

	line-height: 1.3;
}

.vibeshiftboost-visitors-subtitle {

	margin: 2px 0 0;

	color:
		var(--vibeshiftboost-visitors-muted);

	font-size: 10px;

	line-height: 1.4;
}


/* ==========================================================================
   LIVE INDICATOR
   ========================================================================== */

.vibeshiftboost-visitors-live {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	min-height: 25px;

	padding: 4px 9px;

	border:
		1px solid
		#bbf7d0;

	border-radius: 999px;

	background:
		#f0fdf4;

	color:
		#15803d;

	font-size: 9px;

	font-weight: 750;

	line-height: 1;

	white-space: nowrap;
}

.vibeshiftboost-visitors-live-dot {

	position: relative;

	width: 7px;

	height: 7px;

	flex: 0 0 7px;

	border-radius: 50%;

	background:
		var(--vibeshiftboost-visitors-success);
}

.vibeshiftboost-visitors-live-dot::after {

	content: "";

	position: absolute;

	inset: -3px;

	border-radius: 50%;

	background:
		rgba(
			22,
			163,
			74,
			0.18
		);

	animation:
		vibeshiftboost-visitors-live-pulse
		1.8s ease-out infinite;
}

@keyframes vibeshiftboost-visitors-live-pulse {

	0% {

		transform:
			scale(0.7);

		opacity: 0.9;
	}

	70% {

		transform:
			scale(1.5);

		opacity: 0;
	}

	100% {

		transform:
			scale(1.5);

		opacity: 0;
	}
}


/* ==========================================================================
   MAIN VISITOR NUMBER
   ========================================================================== */

.vibeshiftboost-visitors-main {

	display: flex;

	align-items: center;

	gap: 12px;

	padding: 14px 0;
}

.vibeshiftboost-visitors-main-icon {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 46px;

	height: 46px;

	flex: 0 0 46px;

	border-radius:
		12px;

	background:
		#eff6ff;

	color:
		var(--vibeshiftboost-visitors-primary);
}

.vibeshiftboost-visitors-main-value {

	display: block;

	color:
		var(--vibeshiftboost-visitors-text);

	font-size: 32px;

	font-weight: 800;

	line-height: 1;

	font-variant-numeric: tabular-nums;
}

.vibeshiftboost-visitors-main-label {

	display: block;

	margin-top: 4px;

	color:
		var(--vibeshiftboost-visitors-muted);

	font-size: 10px;

	font-weight: 600;

	line-height: 1.3;
}


/* ==========================================================================
   STAT GRID
   ========================================================================== */

.vibeshiftboost-visitors-stats {

	display: grid;

	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);

	gap: 8px;

	width: 100%;

	margin-top: 4px;
}

.vibeshiftboost-visitors-stat {

	min-width: 0;

	padding: 11px 9px;

	border:
		1px solid
		var(--vibeshiftboost-visitors-border-light);

	border-radius:
		var(--vibeshiftboost-visitors-radius-small);

	background:
		#f8fafc;

	text-align: center;
}

.vibeshiftboost-visitors-stat-value {

	display: block;

	color:
		var(--vibeshiftboost-visitors-text);

	font-size: 17px;

	font-weight: 750;

	line-height: 1.2;

	font-variant-numeric: tabular-nums;
}

.vibeshiftboost-visitors-stat-label {

	display: block;

	margin-top: 4px;

	color:
		var(--vibeshiftboost-visitors-muted);

	font-size: 8px;

	font-weight: 700;

	line-height: 1.2;

	text-transform: uppercase;

	letter-spacing: 0.04em;
}


/* ==========================================================================
   STAT VARIANTS
   ========================================================================== */

.vibeshiftboost-visitors-stat-primary {

	border-color:
		#dbeafe;

	background:
		#eff6ff;
}

.vibeshiftboost-visitors-stat-primary
.vibeshiftboost-visitors-stat-value {

	color:
		#1d4ed8;
}

.vibeshiftboost-visitors-stat-success {

	border-color:
		#dcfce7;

	background:
		#f0fdf4;
}

.vibeshiftboost-visitors-stat-success
.vibeshiftboost-visitors-stat-value {

	color:
		#15803d;
}

.vibeshiftboost-visitors-stat-warning {

	border-color:
		#fef3c7;

	background:
		#fffbeb;
}

.vibeshiftboost-visitors-stat-warning
.vibeshiftboost-visitors-stat-value {

	color:
		#b45309;
}


/* ==========================================================================
   VISITOR BADGES
   ========================================================================== */

.vibeshiftboost-visitors-badge {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 5px;

	min-height: 23px;

	padding: 4px 9px;

	border:
		1px solid transparent;

	border-radius: 999px;

	font-size: 9px;

	font-weight: 750;

	line-height: 1;

	white-space: nowrap;
}

.vibeshiftboost-visitors-badge-live {

	background:
		#f0fdf4;

	border-color:
		#bbf7d0;

	color:
		#15803d;
}

.vibeshiftboost-visitors-badge-primary {

	background:
		#eff6ff;

	border-color:
		#dbeafe;

	color:
		#1d4ed8;
}

.vibeshiftboost-visitors-badge-warning {

	background:
		#fffbeb;

	border-color:
		#fef3c7;

	color:
		#b45309;
}

.vibeshiftboost-visitors-badge-danger {

	background:
		#fef2f2;

	border-color:
		#fee2e2;

	color:
		#b91c1c;
}

.vibeshiftboost-visitors-badge-muted {

	background:
		#f8fafc;

	border-color:
		#e2e8f0;

	color:
		#64748b;
}


/* ==========================================================================
   VISITOR ROW
   ========================================================================== */

.vibeshiftboost-visitors-row {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 12px;

	width: 100%;

	min-width: 0;

	padding: 10px 0;

	border-bottom:
		1px solid
		var(--vibeshiftboost-visitors-border-light);
}

.vibeshiftboost-visitors-row:last-child {

	border-bottom: 0;
}

.vibeshiftboost-visitors-row-left {

	display: flex;

	align-items: center;

	gap: 9px;

	min-width: 0;
}

.vibeshiftboost-visitors-row-right {

	display: flex;

	align-items: center;

	gap: 8px;

	flex: 0 0 auto;
}

.vibeshiftboost-visitors-row-icon {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 28px;

	height: 28px;

	flex: 0 0 28px;

	border-radius:
		8px;

	background:
		#f1f5f9;

	color:
		var(--vibeshiftboost-visitors-muted);
}

.vibeshiftboost-visitors-row-title {

	margin: 0;

	overflow: hidden;

	color:
		var(--vibeshiftboost-visitors-text);

	font-size: 11px;

	font-weight: 700;

	line-height: 1.35;

	text-overflow: ellipsis;

	white-space: nowrap;
}

.vibeshiftboost-visitors-row-description {

	margin: 2px 0 0;

	overflow: hidden;

	color:
		var(--vibeshiftboost-visitors-muted);

	font-size: 9px;

	line-height: 1.3;

	text-overflow: ellipsis;

	white-space: nowrap;
}


/* ==========================================================================
   LIVE VISITOR COUNT
   ========================================================================== */

.vibeshiftboost-visitors-live-count {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	color:
		var(--vibeshiftboost-visitors-success);

	font-size: 12px;

	font-weight: 750;

	font-variant-numeric: tabular-nums;
}

.vibeshiftboost-visitors-live-count-number {

	min-width: 20px;

	text-align: right;
}


/* ==========================================================================
   TREND
   ========================================================================== */

.vibeshiftboost-visitors-trend {

	display: inline-flex;

	align-items: center;

	gap: 4px;

	font-size: 10px;

	font-weight: 700;

	line-height: 1;
}

.vibeshiftboost-visitors-trend-up {

	color:
		var(--vibeshiftboost-visitors-success);
}

.vibeshiftboost-visitors-trend-down {

	color:
		var(--vibeshiftboost-visitors-danger);
}

.vibeshiftboost-visitors-trend-flat {

	color:
		var(--vibeshiftboost-visitors-muted);
}


/* ==========================================================================
   PROGRESS
   ========================================================================== */

.vibeshiftboost-visitors-progress {

	width: 100%;

	height: 7px;

	overflow: hidden;

	border-radius: 999px;

	background:
		#e2e8f0;
}

.vibeshiftboost-visitors-progress-bar {

	display: block;

	width: 0;

	height: 100%;

	border-radius: inherit;

	background:
		var(--vibeshiftboost-visitors-primary);

	transition:
		width 0.35s ease;
}

.vibeshiftboost-visitors-progress-success {

	background:
		var(--vibeshiftboost-visitors-success);
}

.vibeshiftboost-visitors-progress-warning {

	background:
		var(--vibeshiftboost-visitors-warning);
}

.vibeshiftboost-visitors-progress-danger {

	background:
		var(--vibeshiftboost-visitors-danger);
}


/* ==========================================================================
   ACTIVITY INDICATOR
   ========================================================================== */

.vibeshiftboost-visitors-activity {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	color:
		var(--vibeshiftboost-visitors-muted);

	font-size: 10px;

	font-weight: 600;
}

.vibeshiftboost-visitors-activity-dot {

	width: 6px;

	height: 6px;

	flex: 0 0 6px;

	border-radius: 50%;

	background:
		var(--vibeshiftboost-visitors-success);
}


/* ==========================================================================
   VIEWER INDICATOR
   ========================================================================== */

.vibeshiftboost-visitors-viewers {

	display: flex;

	align-items: center;

	gap: 5px;

	color:
		var(--vibeshiftboost-visitors-muted);

	font-size: 10px;

	font-weight: 600;
}

.vibeshiftboost-visitors-viewers-icon {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 17px;

	height: 17px;

	color:
		var(--vibeshiftboost-visitors-primary);
}


/* ==========================================================================
   VISITOR PILL
   ========================================================================== */

.vibeshiftboost-visitors-pill {

	display: inline-flex;

	align-items: center;

	gap: 5px;

	min-height: 27px;

	padding: 5px 9px;

	border:
		1px solid
		var(--vibeshiftboost-visitors-border);

	border-radius: 999px;

	background:
		#fff;

	color:
		var(--vibeshiftboost-visitors-text);

	font-size: 10px;

	font-weight: 650;

	font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   MINI STAT
   ========================================================================== */

.vibeshiftboost-visitors-mini-stat {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	min-width: 0;

	color:
		var(--vibeshiftboost-visitors-muted);

	font-size: 10px;

	font-weight: 600;
}

.vibeshiftboost-visitors-mini-stat-value {

	color:
		var(--vibeshiftboost-visitors-text);

	font-weight: 750;

	font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   VISITOR SEPARATOR
   ========================================================================== */

.vibeshiftboost-visitors-separator {

	width: 100%;

	height: 1px;

	margin: 13px 0;

	background:
		var(--vibeshiftboost-visitors-border-light);
}


/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.vibeshiftboost-visitors-empty {

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	min-height: 115px;

	padding: 20px;

	border:
		1px dashed
		var(--vibeshiftboost-visitors-border);

	border-radius:
		var(--vibeshiftboost-visitors-radius);

	background:
		#fff;

	text-align: center;
}

.vibeshiftboost-visitors-empty-icon {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 40px;

	height: 40px;

	margin-bottom: 9px;

	border-radius: 50%;

	background:
		#f1f5f9;

	color:
		var(--vibeshiftboost-visitors-muted);
}

.vibeshiftboost-visitors-empty-title {

	margin: 0;

	color:
		var(--vibeshiftboost-visitors-text);

	font-size: 13px;

	font-weight: 700;
}

.vibeshiftboost-visitors-empty-description {

	max-width: 400px;

	margin: 4px 0 0;

	color:
		var(--vibeshiftboost-visitors-muted);

	font-size: 10px;

	line-height: 1.5;
}


/* ==========================================================================
   LOADING
   ========================================================================== */

.vibeshiftboost-visitors-loading {

	position: relative;

	min-height: 80px;

	pointer-events: none;
}

.vibeshiftboost-visitors-loading::after {

	content: "";

	position: absolute;

	inset: 0;

	z-index: 10;

	border-radius:
		inherit;

	background:
		rgba(
			255,
			255,
			255,
			0.78
		);
}

.vibeshiftboost-visitors-spinner {

	display: inline-block;

	width: 18px;

	height: 18px;

	border:
		2px solid
		#cbd5e1;

	border-top-color:
		var(--vibeshiftboost-visitors-primary);

	border-radius: 50%;

	animation:
		vibeshiftboost-visitors-spin
		0.75s linear infinite;
}

@keyframes vibeshiftboost-visitors-spin {

	to {

		transform:
			rotate(360deg);
	}
}


/* ==========================================================================
   SKELETON
   ========================================================================== */

.vibeshiftboost-visitors-skeleton {

	position: relative;

	overflow: hidden;

	background:
		#e2e8f0;

	border-radius: 6px;

	color: transparent !important;
}

.vibeshiftboost-visitors-skeleton::after {

	content: "";

	position: absolute;

	inset: 0;

	transform:
		translateX(-100%);

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(
				255,
				255,
				255,
				0.65
			),
			transparent
		);

	animation:
		vibeshiftboost-visitors-skeleton
		1.4s infinite;
}

@keyframes vibeshiftboost-visitors-skeleton {

	100% {

		transform:
			translateX(100%);
	}
}


/* ==========================================================================
   VISITOR CARD VARIANTS
   ========================================================================== */

.vibeshiftboost-visitors-card-primary {

	border-color:
		#dbeafe;

	background:
		#eff6ff;
}

.vibeshiftboost-visitors-card-success {

	border-color:
		#dcfce7;

	background:
		#f0fdf4;
}

.vibeshiftboost-visitors-card-warning {

	border-color:
		#fef3c7;

	background:
		#fffbeb;
}

.vibeshiftboost-visitors-card-danger {

	border-color:
		#fee2e2;

	background:
		#fef2f2;
}


/* ==========================================================================
   REAL-TIME UPDATE INDICATOR
   ========================================================================== */

.vibeshiftboost-visitors-updated {

	display: inline-flex;

	align-items: center;

	gap: 5px;

	color:
		var(--vibeshiftboost-visitors-muted);

	font-size: 9px;

	font-weight: 600;
}

.vibeshiftboost-visitors-updated-dot {

	width: 5px;

	height: 5px;

	border-radius: 50%;

	background:
		var(--vibeshiftboost-visitors-success);
}


/* ==========================================================================
   HIGHLIGHT UPDATE
   ========================================================================== */

.vibeshiftboost-visitors-updated-value {

	transition:
		transform 0.2s ease,
		opacity 0.2s ease;
}

.vibeshiftboost-visitors-updated-value.is-updating {

	transform:
		scale(1.08);

	opacity: 0.7;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 700px) {

	.vibeshiftboost-visitors-header {

		align-items: flex-start;

		flex-direction: column;
	}

	.vibeshiftboost-visitors-main-value {

		font-size: 28px;
	}
}


@media screen and (max-width: 520px) {

	.vibeshiftboost-visitors-container {

		padding: 14px;

		border-radius:
			var(--vibeshiftboost-visitors-radius-small);
	}

	.vibeshiftboost-visitors-stats {

		grid-template-columns:
			1fr;
	}

	.vibeshiftboost-visitors-stat {

		display: flex;

		align-items: center;

		justify-content: space-between;

		gap: 10px;

		text-align: left;
	}

	.vibeshiftboost-visitors-stat-label {

		margin-top: 0;
	}

	.vibeshiftboost-visitors-row {

		align-items: flex-start;

		flex-direction: column;
	}

	.vibeshiftboost-visitors-row-right {

		width: 100%;

		justify-content: flex-start;
	}
}


@media screen and (max-width: 380px) {

	.vibeshiftboost-visitors-main {

		align-items: flex-start;

		flex-direction: column;
	}

	.vibeshiftboost-visitors-main-value {

		font-size: 25px;
	}
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.vibeshiftboost-visitors [aria-live="polite"] {

	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {

	.vibeshiftboost-visitors *,
	.vibeshiftboost-visitors *::before,
	.vibeshiftboost-visitors *::after {

		animation-duration:
			0.01ms !important;

		animation-iteration-count:
			1 !important;

		transition-duration:
			0.01ms !important;
	}
}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {

	.vibeshiftboost-visitors {

		box-shadow: none !important;
	}

	.vibeshiftboost-visitors-live-dot::after {

		display: none !important;
	}
}


/* Privacy-safe visitor analytics consent banner. */
.vibeshiftboost-consent-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:999999;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;border:1px solid rgba(17,24,39,.12);border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.16);font:inherit}
.vibeshiftboost-consent-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.vibeshiftboost-consent-copy strong{font-size:14px;line-height:1.3}
.vibeshiftboost-consent-copy span{font-size:12px;line-height:1.45;color:#4b5563}
.vibeshiftboost-consent-actions{display:flex;gap:8px;flex:0 0 auto}
.vibeshiftboost-consent-actions button{border:0;border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:600}
.vibeshiftboost-consent-deny{background:#f3f4f6;color:#374151}
.vibeshiftboost-consent-accept{background:#2563eb;color:#fff}
@media (max-width:700px){.vibeshiftboost-consent-banner{flex-direction:column;align-items:stretch;bottom:10px}.vibeshiftboost-consent-actions{justify-content:flex-end}}