/*
 * Sandev/Auth — блок «Вход по QR-коду» в форме входа.
 *
 * Свой namespace .zhq-scan__*, а не классы скина: блок ставится в login.tpl рядом
 * с .zfh-enter и не должен зависеть от вёрстки Default.
 * Без grid, gap и var() — на телевизорах с Chrome 38/47 их нет.
 */

.zhq-scan {
	margin: 0;
	padding: 12px 16px 16px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.zhq-scan__toggle {
	display: inline-block;
	font-size: 13px;
	text-decoration: none;
	border-bottom: 1px dashed currentColor;
	opacity: .85;
}

.zhq-scan__panel {
	margin-top: 12px;
	text-align: center;
}

.zhq-scan__canvas {
	min-height: 4px;
	margin: 0 auto 10px;
}

.zhq-scan__img {
	display: block;
	width: 180px;
	height: 180px;
	margin: 0 auto;
	background: #fff;
	padding: 6px;
	border-radius: 8px;
}

.zhq-scan__code {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .1em;
	margin: 10px 0 4px;
	min-height: 26px;
}

.zhq-scan__hint {
	font-size: 12px;
	line-height: 1.5;
	opacity: .75;
	margin: 0 0 6px;
}

.zhq-scan__url {
	font-weight: 600;
	white-space: nowrap;
}

.zhq-scan__msg {
	font-size: 12px;
	margin-top: 8px;
	min-height: 16px;
}

.zhq-scan__msg--error { color: #ff6b6b; }
.zhq-scan__msg--ok { color: #4cd964; }

.zhq-scan__retry {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	text-decoration: none;
	border-bottom: 1px dashed currentColor;
}

/* На телевизоре блок — главный элемент формы, а не сноска под ней:
   экран смотрят с 2-3 метров, кегль и QR должны быть крупнее. */
.zhq-scan--tv .zhq-scan__img { width: 240px; height: 240px; }
.zhq-scan--tv .zhq-scan__code { font-size: 30px; }
.zhq-scan--tv .zhq-scan__hint { font-size: 15px; }
.zhq-scan--tv .zhq-scan__msg { font-size: 14px; }
.zhq-scan--tv .zhq-scan__toggle { display: none; }

/* Сообщение под меню профиля после «Выйти со всех устройств». */
.zhq-scan-all__msg {
	padding: 8px 16px 12px;
	font-size: 12px;
	line-height: 1.45;
	opacity: .85;
}

.zhq-scan-all__msg--error { color: #ff6b6b; }

/* ── Блок «Мои устройства» на странице профиля ───────────────────────────── */

.zhq-scan-dev__hint {
	font-size: 13px;
	line-height: 1.5;
	opacity: .75;
	margin-bottom: 16px;
}

.zhq-scan-dev__list { margin-bottom: 14px; }

.zhq-scan-dev__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.zhq-scan-dev__item:last-child { border-bottom: 0; }

.zhq-scan-dev__info { min-width: 0; }

.zhq-scan-dev__name {
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 3px;
}

.zhq-scan-dev__badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.6;
	border-radius: 20px;
	background: rgba(76, 217, 100, .15);
	color: #4cd964;
}

.zhq-scan-dev__meta {
	font-size: 12px;
	line-height: 1.45;
	opacity: .7;
	/* Длинный UA и IP не должны растягивать блок на узком экране. */
	overflow-wrap: break-word;
	word-break: break-word;
}

.zhq-scan-dev__revoke {
	flex: 0 0 auto;
	margin-left: 16px;
	padding: 7px 14px;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 8px;
}

.zhq-scan-dev__empty {
	padding: 14px 0;
	font-size: 13px;
	opacity: .7;
}

.zhq-scan-dev__actions { padding-top: 6px; }

.zhq-scan-dev__all {
	font-size: 13px;
	text-decoration: none;
	border-bottom: 1px dashed currentColor;
}

@media (max-width: 480px) {
	.zhq-scan-dev__item { align-items: flex-start; }
	.zhq-scan-dev__revoke { margin-left: 10px; }
}