/* ===== Сторінка статистики (/statistika) ===== */

.stats-page {
	--st-blue: #0a8ff5;
	--st-blue-text: #1b8ff0;
	--st-blue-soft: #e8f3fd;
	--st-yellow: #ffb718;
	--st-yellow-link: #f7c933;
	--st-dark: #3a3a3a;
	--st-text: #333;
	font-family: 'Roboto', sans-serif;
	color: var(--st-text);
	padding: 105px 0 68px;
	background: #fff;
}

.stats-page *,
.stats-page *::before,
.stats-page *::after {
	box-sizing: border-box;
}

.stats-page__inner {
	max-width: 1190px;
	margin: 0 auto;
	padding: 0 15px;
}

.stats-page__title {
	margin: 0 0 34px;
	font-size: 40px;
	line-height: 46px;
	font-weight: 700;
	color: var(--st-dark);
	text-align: center;
}

/* ---- Таби періоду ---- */

.stats-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 30px 3px;
}

.stats-tabs__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 22px;
	border-radius: 3px;
	background: var(--st-blue-soft);
	color: #3d97e3;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: background .2s, color .2s;
}

.stats-tabs__item:hover {
	background: #d6eafb;
	color: #3d97e3;
	text-decoration: none;
}

.stats-tabs__item.is-active,
.stats-tabs__item.is-active:hover {
	background: var(--st-blue);
	color: #fff;
}

/* ---- Загальні показники ---- */

.stats-summary {
	display: flex;
	min-height: 180px;
	padding: 15px 0;
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, .08);
}

.stats-summary__item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 10px;
}

.stats-summary__item + .stats-summary__item {
	border-left: 1px solid #e5e5e5;
}

.stats-summary__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 9px;
	border: 2px solid var(--st-blue);
	border-radius: 50%;
}

.stats-summary__value {
	font-size: 22px;
	line-height: 26px;
	font-weight: 700;
	color: var(--st-blue-text);
}

.stats-summary__label {
	margin-top: 3px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
	color: var(--st-text);
}

/* ---- Блок контенту під показниками ---- */

.stats-content {
	max-width: 1090px;
	margin: 0 auto;
}

.stats-page .stats-section {
	margin-top: 0;
	padding-top: 48px;
}

.stats-section__title {
	margin: 0 0 24px;
	font-size: 30px;
	line-height: 36px;
	font-weight: 700;
	color: var(--st-dark);
	text-align: center;
}

/* ---- Топ категорій / міст ---- */

.stats-top {
	display: flex;
	gap: 22px;
	margin-bottom: 22px;
}

.stats-top__card {
	flex: 1 1 0;
	min-width: 0;
	min-height: 258px;
	padding: 18px 15px 18px 24px;
	border-radius: 12px;
	background: #f9f9f9;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
	display: flex;
	flex-direction: column;
}

.stats-top__title {
	margin-bottom: 9px;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	color: var(--st-blue-text);
}

.stats-top__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stats-top__row {
	display: flex;
	align-items: center;
	height: 31.5px;
	font-size: 12px;
	line-height: 14px;
	font-weight: 500;
	color: var(--st-text);
}

.stats-top__num {
	flex: 0 0 22px;
	padding-left: 2px;
	font-size: 14px;
	font-weight: 700;
	color: var(--st-blue-text);
}

.stats-top__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.stats-top__link,
.stats-top__link:hover {
	color: inherit;
	text-decoration: none;
}

.stats-top__link:hover {
	color: var(--st-blue-text);
}

.stats-top__icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 4px;
	vertical-align: -3px;
}

.stats-top__icon img {
	display: block;
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.stats-top__value {
	flex: 0 0 55px;
	padding-right: 4px;
	font-weight: 700;
	white-space: nowrap;
}

.stats-top__bar {
	flex: 0 0 235px;
	height: 22px;
	border-radius: 4px;
	background: var(--st-blue-soft);
	overflow: hidden;
}

.stats-top__bar span {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--st-blue);
}

.stats-top__empty {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: #8a8a8a;
}

.stats-top__more {
	margin-top: auto;
	padding-top: 8px;
	text-align: center;
}

.stats-top__more a {
	display: inline-block;
	padding-bottom: 1px;
	border-bottom: 2px solid var(--st-yellow-link);
	font-size: 15px;
	line-height: 18px;
	font-weight: 500;
	color: var(--st-yellow-link);
	text-decoration: none;
}

.stats-top__more a:hover {
	color: var(--st-yellow);
	border-color: var(--st-yellow);
	text-decoration: none;
}

/* ---- Динаміка активності ---- */

.stats-chart {
	min-height: 500px;
	padding: 30px 40px 32px 53px;
	background:
		url('/assets-app/img/statistics/network-bg.svg') center / cover no-repeat,
		linear-gradient(115deg, #f6f6f7 0%, #f2f2f3 55%, #e9e9ea 100%);
}

.stats-chart__title {
	font-size: 26px;
	line-height: 32px;
	font-weight: 700;
	color: var(--st-dark);
	text-align: center;
}

.stats-chart__subtitle {
	margin: 12px 0 25px;
	font-size: 12px;
	line-height: 16px;
	color: var(--st-text);
	text-align: center;
}

.stats-chart__box {
	position: relative;
	height: 268px;
	padding: 18px 12px 10px 6px;
	border-radius: 6px;
	background: #fff;
}

.stats-chart__box canvas {
	width: 100% !important;
	height: 100% !important;
}

.stats-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 18px 0 0 8px;
	padding: 0;
	list-style: none;
}

.stats-chart__legend-item {
	display: flex;
	align-items: center;
	font-size: 11px;
	line-height: 14px;
	font-weight: 500;
	color: var(--st-text);
}

.stats-chart__legend-item::before {
	content: '';
	width: 12px;
	height: 12px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--dot, #1f86f0);
}

.stats-chart__switch {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: -8px 0 18px;
}

.stats-chart__switch-item {
	height: 30px;
	padding: 0 20px;
	border: 0;
	border-radius: 3px;
	background: #fff;
	color: #3d97e3;
	font-family: inherit;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s, color .2s;
}

.stats-chart__switch-item:hover {
	background: var(--st-blue-soft);
}

.stats-chart__switch-item.is-active,
.stats-chart__switch-item.is-active:hover {
	background: var(--st-blue);
	color: #fff;
}

.stats-chart__empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: #8a8a8a;
	pointer-events: none;
}

.stats-chart__empty[hidden] {
	display: none;
}

/* ---- Про статистику ---- */

.stats-about {
	position: relative;
	margin-top: 22px;
	padding: 30px 90px 28px;
	background: var(--st-blue-soft);
	text-align: center;
}

.stats-about__title {
	margin-bottom: 7px;
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--st-blue-text);
}

.stats-about__text {
	max-width: 780px;
	margin: 0 auto;
	font-size: 11px;
	line-height: 14px;
	color: var(--st-text);
}

.stats-about__icon {
	position: absolute;
	top: 34px;
	right: 38px;
	width: 32px;
	height: 32px;
}

/* ---- Поділитися ---- */

.stats-share {
	max-width: 780px;
	margin: 16px auto 0;
	padding-top: 14px;
	border-top: 1px solid #cfe4f8;
}

.stats-share__text {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	color: var(--st-text);
}

.stats-share__text a {
	color: var(--st-blue-text);
	text-decoration: underline;
}

.stats-share__row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.stats-share__label {
	margin-right: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--st-blue-text);
}

.stats-share__item {
	position: relative;
	display: inline-block;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--brand, var(--st-blue));
	cursor: pointer;
	transition: transform .2s, opacity .2s;
}

.stats-share__item::before {
	content: '';
	position: absolute;
	inset: 8px;
	background: #fff;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.stats-share__item:hover {
	opacity: .9;
	transform: translateY(-2px);
}

.stats-share__item--telegram {
	--brand: #26a5e4;
	--icon: url('https://cdn.jsdelivr.net/npm/simple-icons@v12/icons/telegram.svg');
}

.stats-share__item--viber {
	--brand: #7360f2;
	--icon: url('https://cdn.jsdelivr.net/npm/simple-icons@v12/icons/viber.svg');
}

.stats-share__item--facebook {
	--brand: #1877f2;
	--icon: url('https://cdn.jsdelivr.net/npm/simple-icons@v12/icons/facebook.svg');
}

.stats-share__item--whatsapp {
	--brand: #25d366;
	--icon: url('https://cdn.jsdelivr.net/npm/simple-icons@v12/icons/whatsapp.svg');
}

.stats-share__item--linkedin {
	--brand: #0a66c2;
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.5h4v11H3zM9.5 9.5h3.8v1.6h.05c.53-1 1.83-2 3.77-2 4.03 0 4.78 2.6 4.78 6v5.4h-4v-4.8c0-1.15-.02-2.62-1.6-2.62-1.6 0-1.85 1.25-1.85 2.54v4.88h-4z'/%3E%3C/svg%3E");
}

.stats-share__item--copy {
	--brand: #8a9bb0;
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3.2-3.2a4.5 4.5 0 0 0-6.4-6.4L12 5.6'/%3E%3Cpath d='M14 10a4.5 4.5 0 0 0-6.4 0l-3.2 3.2a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2'/%3E%3C/svg%3E");
}

.stats-share__copied {
	position: absolute;
	top: 100%;
	left: 50%;
	margin-top: 6px;
	transform: translateX(-50%);
	font-size: 11px;
	color: #2e9e57;
	white-space: nowrap;
}

.stats-share__copied[hidden] {
	display: none;
}

/* ---- Хочете отримати більше клієнтів ---- */

.stats-cta {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 248px;
	margin-top: 22px;
	padding: 30px 78px;
	background:
		url('/assets-app/img/statistics/network-bg.svg') center / cover no-repeat,
		#f0f0f0;
}

.stats-cta__image {
	flex: 0 0 178px;
	width: 178px;
	height: auto;
}

.stats-cta__body {
	flex: 1 1 auto;
	padding: 0 20px;
	text-align: center;
}

.stats-cta__title {
	font-size: 24px;
	line-height: 30px;
	font-weight: 700;
	color: var(--st-dark);
}

.stats-cta__text {
	margin: 14px 0 22px;
	font-size: 14px;
	line-height: 17px;
	color: #444;
}

.stats-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 285px;
	max-width: 100%;
	height: 41px;
	border-radius: 3px;
	background: #219ae7;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background .2s;
}

.stats-cta__button:hover {
	background: #1286d2;
	color: #fff;
	text-decoration: none;
}

.stats-cta__note {
	flex: 0 0 120px;
	position: relative;
	padding-bottom: 12px;
	font-family: 'Marck Script', cursive;
	font-size: 18px;
	line-height: 21px;
	color: var(--st-blue-text);
	transform: rotate(-2deg);
}

.stats-cta__note::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 96px;
	height: 2px;
	border-radius: 2px;
	background: var(--st-yellow);
	transform: rotate(-2deg);
}

/* ---- Адаптив ---- */

@media (max-width: 1100px) {
	.stats-top__bar {
		flex-basis: 35%;
	}

	.stats-cta {
		padding: 30px 40px;
	}
}

@media (max-width: 991px) {
	.stats-page {
		padding-top: 60px;
	}

	.stats-summary {
		flex-wrap: wrap;
		padding: 0;
	}

	.stats-summary__item {
		flex: 1 1 33.333%;
		padding: 18px 10px;
	}

	.stats-summary__item + .stats-summary__item {
		border-left: 0;
	}

	.stats-top {
		flex-direction: column;
	}

	.stats-cta {
		flex-direction: column;
		gap: 24px;
		text-align: center;
	}

	.stats-cta__image {
		flex-basis: auto;
	}

	.stats-cta__note {
		flex-basis: auto;
	}

	.stats-cta__note::after {
		left: 50%;
		margin-left: -48px;
	}
}

@media (max-width: 767px) {
	.stats-page {
		padding: 40px 0 48px;
	}

	.stats-page__title {
		margin-bottom: 24px;
		font-size: 30px;
		line-height: 36px;
	}

	.stats-section__title {
		font-size: 24px;
		line-height: 30px;
	}

	.stats-summary__item {
		flex-basis: 50%;
	}

	.stats-top__card {
		padding: 16px 12px;
	}

	.stats-top__bar {
		flex-basis: 30%;
	}

	.stats-chart {
		min-height: 0;
		padding: 24px 12px;
	}

	.stats-chart__box {
		height: 240px;
	}

	.stats-about {
		padding: 24px 16px 70px;
	}

	.stats-about__icon {
		top: auto;
		bottom: 22px;
		right: 50%;
		margin-right: -16px;
	}

	.stats-cta {
		padding: 28px 16px;
	}

	.stats-cta__title {
		font-size: 20px;
		line-height: 26px;
	}

	.stats-cta__text br {
		display: none;
	}
}