/* Kostanay Weather 1.1.7 — ночная карточка Костаная и строка городов в две линии. Без внешних файлов. */
.kostanay-weather {
	width: 100%;
	box-sizing: border-box;
	color: #17212b;
	font: inherit;
	line-height: 1.3;
}
.kostanay-weather * { box-sizing: border-box; }

/* ---- Карточка Костаная ---- */
.kostanay-weather .kw-card {
	padding: 16px;
	border-radius: 14px;
	background: #14213d;
	color: #e8ecf4;
}
.kostanay-weather .kw-card-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}
.kostanay-weather .kw-card-name { font-size: 18px; font-weight: 700; }
.kostanay-weather .kw-card-label { font-size: 12px; color: #9fb0cf; }
.kostanay-weather .kw-card-body {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 6px 0 2px;
}
.kostanay-weather .kw-card-icon { font-size: 48px; line-height: 1; }
.kostanay-weather .kw-card-temp {
	font-size: 50px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -2px;
	color: #fca311;
}
.kostanay-weather .kw-card-desc { font-size: 15px; }
.kostanay-weather .kw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}
.kostanay-weather .kw-chip {
	padding: 3px 10px;
	border-radius: 20px;
	background: #22325a;
	color: #e8ecf4;
	font-size: 12px;
	white-space: nowrap;
}

/* ---- Строка: города по очереди (название и температура, ниже описание) ---- */
.kostanay-weather .kw-strip {
	position: relative;
	height: 64px;
	margin-top: 8px;
	overflow: hidden;
	border-radius: 10px;
	background: #1c2b4d;
	border: 1px solid #2c3d66;
	color: #e8ecf4;
}
.kostanay-weather .kw-strip-item {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-content: center;
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;
	padding: 0 14px;
	opacity: 0;
	pointer-events: none;
	animation: kw-rotate 64s linear infinite both;
}
.kostanay-weather .kw-strip-icon { grid-row: 1 / 3; font-size: 26px; line-height: 1; text-align: center; }
.kostanay-weather .kw-strip-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 18px;
	font-weight: 700;
}
.kostanay-weather .kw-strip-temp {
	font-size: 18px;
	font-weight: 700;
	white-space: nowrap;
	color: #fca311;
}
.kostanay-weather .kw-strip-desc {
	grid-column: 2 / -1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	color: #9fb0cf;
}

/*
 * Рассчитано ровно на 16 городов в строке: цикл 64 с, на каждый город 4 с (6.25% цикла).
 * Задержки заданы здесь, а не в HTML, чтобы не использовать inline-стили.
 */
.kostanay-weather .kw-strip-item:nth-child(1) { animation-delay: 0s; }
.kostanay-weather .kw-strip-item:nth-child(2) { animation-delay: 4s; }
.kostanay-weather .kw-strip-item:nth-child(3) { animation-delay: 8s; }
.kostanay-weather .kw-strip-item:nth-child(4) { animation-delay: 12s; }
.kostanay-weather .kw-strip-item:nth-child(5) { animation-delay: 16s; }
.kostanay-weather .kw-strip-item:nth-child(6) { animation-delay: 20s; }
.kostanay-weather .kw-strip-item:nth-child(7) { animation-delay: 24s; }
.kostanay-weather .kw-strip-item:nth-child(8) { animation-delay: 28s; }
.kostanay-weather .kw-strip-item:nth-child(9) { animation-delay: 32s; }
.kostanay-weather .kw-strip-item:nth-child(10) { animation-delay: 36s; }
.kostanay-weather .kw-strip-item:nth-child(11) { animation-delay: 40s; }
.kostanay-weather .kw-strip-item:nth-child(12) { animation-delay: 44s; }
.kostanay-weather .kw-strip-item:nth-child(13) { animation-delay: 48s; }
.kostanay-weather .kw-strip-item:nth-child(14) { animation-delay: 52s; }
.kostanay-weather .kw-strip-item:nth-child(15) { animation-delay: 56s; }
.kostanay-weather .kw-strip-item:nth-child(16) { animation-delay: 60s; }

@keyframes kw-rotate {
	0%     { opacity: 0; transform: translateY(8px); }
	0.8%   { opacity: 1; transform: translateY(0); }
	5.45%  { opacity: 1; transform: translateY(0); }
	6.25%  { opacity: 0; transform: translateY(-8px); }
	100%   { opacity: 0; transform: translateY(-8px); }
}

/* Если пользователь отключил анимации — все города в одной прокручиваемой ленте. */
@media (prefers-reduced-motion: reduce) {
	.kostanay-weather .kw-strip {
		display: flex;
		height: auto;
		overflow-x: auto;
	}
	.kostanay-weather .kw-strip-item {
		position: static;
		flex: none;
		min-width: 170px;
		padding: 10px 14px;
		opacity: 1;
		animation: none;
	}
}

.kostanay-weather .kw-footer {
	margin-top: 8px;
	font-size: 10px;
	color: #89939d;
}
.kostanay-weather .kw-footer a { color: inherit; text-decoration: underline; }
.kostanay-weather .kw-stale { display: block; margin-bottom: 3px; color: #9a6415; }
.kostanay-weather .kw-loading { margin: 0; font-size: 13px; color: #647382; }

@media (max-width: 360px) {
	.kostanay-weather .kw-card { padding: 13px; }
	.kostanay-weather .kw-card-icon,
	.kostanay-weather .kw-card-temp { font-size: 44px; }
}