.cb-map-wrap{
	max-width:1100px;
	margin:45px auto;
	padding:70px 12px;
	text-align: center;
}
.cb-map-card{
	border-radius:16px;
	overflow:hidden;
	background:#fff;
	box-shadow: 0 8px 22px rgba(0,0,0,.06);
	margin-top: 15px;
	width: 98%;
	border: 1px solid deepskyblue;
}

.cb-map-toolbar{
	display:flex;
	gap:10px;
	align-items:center;
	justify-content:space-between;
	padding:12px 12px 0 12px;
	flex-wrap:wrap;
	background: honeydew;
}
.cb-map-toolbar .left{
	display:flex; gap:10px; align-items:center; flex-wrap:wrap;
	opacity:.9;
}
.cb-map-toolbar .right{
	display:flex; gap:8px; align-items:center;
}
.cb-btn{
	border:1px solid rgba(0,0,0,.12);
	background:#fff;
	border-radius:10px;
	padding:8px 12px;
	cursor:pointer;
	user-select:none;
}
.cb-btn:active{ transform: translateY(1px); }


/* ===== svgMap dark-blue theme ===== */

/* меняет фон при наведении курсора */
.svgMap-country.svgMap-active,
.svgMap-country.svgMap-selected{
	fill: #FFDEAD;
}

/* если svgMap использует классы на путях без .svgMap-country (на всякий) */
.gradient {
  background: linear-gradient(
    90deg,
    #0f0f0f,   /* почти чёрный */
    #1e293b,   /* тёмно-синий */
    #22c55e,   /* зелёный */
    #eab308,   /* жёлтый */
    #dc2626,   /* красный */
    #0f0f0f    /* опять почти чёрный — закрывает «петлю» */
  );
  background-size: 300% 100%;         /* фон шире текста */
  background-position: 0% 50%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  animation: gradient-flow 12s linear infinite alternate;
  font-size: clamp(8px, 6vw, 38px);
  font-weight: 700;
  letter-spacing: .03em;
  margin: 0;
	font-size: 26px;
}

@keyframes gradient-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.gradient::after{
  content: "";
  display: block;
  width: 80%;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(60,120,255,0),
    rgba(60,120,255,.55),
    rgba(60,120,255,0)
  );
}

/* tooltip можно тоже чуть “дороже” */
.svgMap-tooltip{
	border-radius: 16px !important;
	box-shadow: 0 10px 26px rgba(0,0,0,.12) !important;
	border: 1px solid rgba(0,0,0,.10) !important;
}


.cb-wrap{
	max-width:1100px;
	margin:30px auto;
	padding:70px 12px;
}
.cb-headline{
	display:flex;
	gap:14px;
	align-items:center;
	flex-wrap:wrap;
	justify-content:space-between;
}
.cb-headline-left{
	display:flex;
	gap:14px;
	align-items:center;
	flex-wrap:wrap;
}
.cb-flag{
	height:26px;
	border-radius:6px;
	box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.cb-card{
	background:#fff;
	border-radius:18px;
	padding:14px;
	box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.cb-top-single{
	margin-top:14px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:14px;
	border-radius:16px;
	background:#fff;
	border:1px solid rgba(0,0,0,.08);
	box-shadow: 0 8px 22px rgba(0,0,0,.05);
}
.cb-top-single .title{ font-weight:800; }
.cb-top-single .sub{ opacity:.7; font-size:13px; }

.cb-chart-wrap{
	position:relative;
	margin-top:12px;
	height:360px;
}
#ecoChart{
	width:100% !important;
	height:100% !important;
	display:block;
	position:relative;
	z-index:1;
}

.cb-overlay{
	position:absolute;
	inset:0;
	z-index:5;
	pointer-events:none;
}

.barCtl{
	position:absolute;
	transform: translate(-50%, -110%);
	display:flex;
	flex-direction:column;
	gap:8px;

	padding:10px;
	border-radius:14px;
	background: rgba(255,255,255,.97);
	border:1px solid rgba(0,0,0,.12);
	box-shadow: 0 10px 22px rgba(0,0,0,.10);

	pointer-events:auto;
	user-select:none;
	white-space: normal;     /* ✅ разрешаем перенос */
	text-align: center;      /* ✅ весь текст по центру */
	width: 125px;
}

.barTop{
	display:flex;
	align-items:center;
	justify-content:center;  /* ✅ центрируем */
	gap:10px;
}
.barMetric{
	width:100%;
	text-align:center;       /* ✅ центр */
	line-height:1.15;
}

.barHint{
	text-align:center;
	white-space: normal;     /* ✅ перенос подсказки */
	overflow-wrap: anywhere; /* ✅ перенос даже длинных слов */
	font-size: 0.7rem;
}

.barBtns{
	display:grid;
	grid-template-columns: 42px 1fr 42px; /* ✅ + | value | - */
	align-items:center;
	gap:10px;
	width:100%;
}

.barBtns button{
	width:34px;
	height:34px;
	border-radius:12px;
	border:1px solid rgba(0,0,0,.12);
	background:#fff;
	cursor:pointer;
	font-size:18px;
	line-height:1;
	flex:0 0 auto;
}
.barBtns button:active{ transform: translateY(1px); }

.barBtns .val{
	min-width:28px;
	text-align:center;
	font-weight:900;
	font-size:18px;
	opacity:.95;
	flex:0 0 auto;
}

.cb-comments-title{ font-weight:700; margin-bottom:10px; }
.cb-comment-row{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	align-items:center;
}
.cb-input{
	flex:1;
	min-width:220px;
	padding:10px 12px;
	border-radius:12px;
	border:1px solid rgba(0,0,0,.12);
	outline:none;
	box-sizing:border-box;
	background:#fff;
}
.cb-input:focus{
	border-color: rgba(30, 144, 255, .55);
	box-shadow: 0 0 0 3px rgba(30, 144, 255, .18);
}
.cb-btn{
	border:1px solid rgba(0,0,0,.12);
	background:#fff;
	border-radius:10px;
	padding:8px 12px;
	cursor:pointer;
	user-select:none;
}
.cb-btn:active{ transform: translateY(1px); }

.cb-list{
	margin-top:12px;
	display:flex;
	flex-direction:column;
	gap:10px;
}

.barBtns button{
  justify-self: center;   /* центр в своей колонке grid */
}

.barBtns .val{
  justify-self: center;   /* центр в средней колонке grid */
  display: flex;          /* центрируем текст ещё и flex-ом */
  align-items: center;
  justify-content: center;
  line-height: 1;
}


/* мобилка: показываем 1 карточку, делаем её шире и читаемее */
@media (max-width: 768px){
	.barCtl{
		min-width: 0;
		width: min(72vw, 360px);
		max-width: 92vw;
		padding: 12px;
		border-radius: 16px;
	}
	.barBtns{
		justify-content: center;
	}
	.barBtns button{
		width: 42px;
		height: 42px;
		border-radius: 14px;
		font-size: 20px;
	}
	.barBtns .val{
		font-size: 20px;
		min-width: 36px;
	}
	.cb-headline{margin-bottom: 5%;}
}

@media (max-width: 520px){
	h1{font-size: 1.6rem;}
	.cb-wrap{ padding-top: 58px; }
	.barCtl{ min-width: 150px; }
	.cb-headline{margin-bottom: 12%;}
}

@media (max-width: 280px){
	h1{font-size: 1.6rem;}
	.cb-wrap{ padding-top: 58px; }
	.barCtl{ min-width: 150px; }
	.cb-headline{margin-bottom: 30%;}
}