/**
 * WP Traffic — Frontend Shortcode Styles
 *
 * 4 display styles for [wp_traffic_stats] shortcode.
 */

/* ═══════════════════════════════════════════════════════
   BASE RESET
   ═══════════════════════════════════════════════════════ */

.wpt-stats {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	box-sizing: border-box;
	line-height: 1.5;
}

.wpt-stats *,
.wpt-stats *::before,
.wpt-stats *::after {
	box-sizing: inherit;
}


/* ═══════════════════════════════════════════════════════
   STYLE 1: CARDS — Modern gradient cards grid
   ═══════════════════════════════════════════════════════ */

.wpt-stats--cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	padding: 4px 0;
}

.wpt-card {
	background: #fff;
	border-radius: 14px;
	padding: 22px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border: 1px solid rgba(0, 0, 0, 0.04);
}

.wpt-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

.wpt-card__icon {
	font-size: 28px;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wpt-card--online .wpt-card__icon   { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); animation: wpt-pulse 2s ease-in-out infinite; }
.wpt-card--visitors .wpt-card__icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.wpt-card--views .wpt-card__icon    { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.wpt-card--sessions .wpt-card__icon { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.wpt-card--today .wpt-card__icon    { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.wpt-card--bounce .wpt-card__icon   { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.wpt-card--pps .wpt-card__icon      { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }

@keyframes wpt-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(56, 239, 125, 0.4); }
	50% { box-shadow: 0 0 0 8px rgba(56, 239, 125, 0); }
}
.wpt-card--today-views .wpt-card__icon { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }

.wpt-card__body {
	min-width: 0;
}

.wpt-card__value {
	font-size: 26px;
	font-weight: 800;
	color: #1a1a2e;
	line-height: 1.15;
	letter-spacing: -0.5px;
}

.wpt-card__label {
	font-size: 12px;
	color: #6b7280;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════
   STYLE 2: MINIMAL — Compact single-line display
   ═══════════════════════════════════════════════════════ */

.wpt-stats--minimal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 22px;
	background: linear-gradient(135deg, #f6f8fc 0%, #eef1f5 100%);
	border-radius: 50px;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.wpt-minimal__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 0;
}

.wpt-minimal__icon {
	font-size: 14px;
}

.wpt-minimal__value {
	font-size: 15px;
	font-weight: 700;
	color: #1a1a2e;
}

.wpt-minimal__label {
	font-size: 12px;
	color: #6b7280;
	font-weight: 500;
}

.wpt-minimal__sep {
	color: #d1d5db;
	font-size: 10px;
	margin: 0 6px;
	user-select: none;
}


/* ═══════════════════════════════════════════════════════
   STYLE 3: COUNTER — Animated counter bar
   ═══════════════════════════════════════════════════════ */

.wpt-stats--counter {
	background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
	border-radius: 16px;
	padding: 28px 32px;
	color: #fff;
	overflow: hidden;
	position: relative;
}

.wpt-stats--counter::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -30%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
	pointer-events: none;
}

.wpt-counter__header {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 24px;
	opacity: 0.85;
	letter-spacing: 0.5px;
}

.wpt-counter__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 20px;
}

.wpt-counter__item {
	text-align: center;
	padding: 16px 8px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: background 0.2s ease;
}

.wpt-counter__item:hover {
	background: rgba(255, 255, 255, 0.1);
}

.wpt-counter__icon {
	font-size: 24px;
	margin-bottom: 8px;
}

.wpt-counter__value {
	font-size: 30px;
	font-weight: 800;
	color: #fff;
	line-height: 1.1;
	margin-bottom: 6px;
	font-variant-numeric: tabular-nums;
}

.wpt-counter__item--online .wpt-counter__value   { color: #4ade80; text-shadow: 0 0 10px rgba(74, 222, 128, 0.5); }
.wpt-counter__item--visitors .wpt-counter__value { color: #a78bfa; }
.wpt-counter__item--views .wpt-counter__value    { color: #f472b6; }
.wpt-counter__item--sessions .wpt-counter__value { color: #38bdf8; }
.wpt-counter__item--today .wpt-counter__value    { color: #4ade80; }
.wpt-counter__item--bounce .wpt-counter__value   { color: #fb923c; }
.wpt-counter__item--pps .wpt-counter__value      { color: #c084fc; }

.wpt-counter__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0.65;
	font-weight: 600;
}


/* ═══════════════════════════════════════════════════════
   STYLE 4: WIDGET — Compact vertical sidebar style
   ═══════════════════════════════════════════════════════ */

.wpt-stats--widget {
	background: #fff;
	border-radius: 14px;
	padding: 0;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.06);
	overflow: hidden;
	max-width: 320px;
}

.wpt-widget__title {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	padding: 14px 18px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	letter-spacing: 0.3px;
}

.wpt-widget__row {
	display: flex;
	align-items: center;
	padding: 12px 18px;
	border-bottom: 1px solid #f3f4f6;
	transition: background 0.15s ease;
}

.wpt-widget__row:last-of-type {
	border-bottom: none;
}

.wpt-widget__row:hover {
	background: #f9fafb;
}

.wpt-widget__icon {
	font-size: 16px;
	margin-right: 10px;
	flex-shrink: 0;
}

.wpt-widget__label {
	flex: 1;
	font-size: 13px;
	color: #4b5563;
	font-weight: 500;
}

.wpt-widget__value {
	font-size: 16px;
	font-weight: 800;
	color: #1a1a2e;
	font-variant-numeric: tabular-nums;
}

.wpt-widget__footer {
	padding: 10px 18px;
	background: #f9fafb;
	font-size: 11px;
	color: #9ca3af;
	text-align: center;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 640px) {
	.wpt-stats--cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.wpt-card {
		padding: 16px 14px;
		gap: 10px;
	}

	.wpt-card__icon {
		width: 40px;
		height: 40px;
		font-size: 20px;
		border-radius: 10px;
	}

	.wpt-card__value {
		font-size: 20px;
	}

	.wpt-card__label {
		font-size: 10px;
	}

	.wpt-stats--minimal {
		border-radius: 14px;
		padding: 12px 16px;
	}

	.wpt-stats--counter {
		padding: 20px;
	}

	.wpt-counter__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.wpt-counter__value {
		font-size: 22px;
	}

	.wpt-stats--widget {
		max-width: 100%;
	}
}

@media (max-width: 380px) {
	.wpt-stats--cards {
		grid-template-columns: 1fr;
	}

	.wpt-counter__grid {
		grid-template-columns: 1fr 1fr;
	}
}