/*
 * Промо-полоса над шапкой (с 1.6.0) — единственная копия стилей (витрина, кабинет, страницы модулей).
 * Разметка: promobar.html (SgHeader::promobar). От sg-header.css не зависит (на страницах модулей
 * витрины шапки нет): токены свои, шрифт — «SG Onest» шапки (SgHeader::head), где он не объявлен —
 * системный. Все селекторы под .sg-promobar — стили сайтов сюда не протекают и наоборот.
 *
 * Тема: только выбор пользователя — [data-theme="dark"] на <html>, иначе светлая (как у остального shell).
 *
 * Видимость и высоту задает класс sg-promobar-on на <html> (SgHeader::promobarHead, до первого
 * кадра): --sg-promobar-h — 40px, <768 — 44px; без класса полосы нет и высота 0.
 * Раскладка: полоса fixed над fixed-шапкой и уезжает вверх с прокруткой — --sg-promobar-top (видимая
 * часть; inline-скрипт <head> пишет ее на саму полосу, шапку и [data-sg-promobar-follow], не на <html>)
 * сдвигает и ее, и шапку; без скрипта обе просто закреплены. Полоса едет transform (только композиция).
 * На странице модуля (sg-promobar--flow) — в потоке перед корнем модуля.
 *
 * Брейкпоинты: ≥1200 — длинный текст; 768–1199 — короткий текст в одну строку; ≤767 —
 * телефон: две строки, короткий CTA, подпись цены — полная (priceNote); <400 — короткая подпись
 * (priceNoteShort); <375 — зачеркнутая цена уходит, если рядом с бейджем нет места; <360 — мельче.
 * Длинный текст из админки не ломает раскладку: обрезается многоточием.
 */

.sg-promobar {
	color-scheme: light;
	/* Цвета — токены DS шапки (sg-header.css): фон — --sg-primary-10 на белом, кнопка — как «Войти»
	   (--sg-primary / --sg-primary-hover), текст и приглушенный — --sg-text / --sg-muted (владелец 11.11.2026) */
	--sg-promobar-bg: #eaf6ed;
	--sg-promobar-text: #212529;
	--sg-promobar-muted: #6c757d;
	--sg-promobar-new: #218838;
	--sg-promobar-cta-bg: #28a745;
	--sg-promobar-cta-hover: #218838;
	--sg-promobar-cta-text: #fff;
	--sg-promobar-close: #6c757d;
	--sg-promobar-close-hover-bg: #f1f1f1;
	--sg-promobar-focus: rgba(40, 167, 69, 0.25);
	--sg-promobar-line: #e9ecef;
	--sg-font: "SG Onest", "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[data-theme="dark"] .sg-promobar {
	color-scheme: dark;
	/* темная пара токенов DS шапки: фон — --sg-burger-bg на #0d1117, текст — --sg-text, кнопка — как «Войти» */
	--sg-promobar-bg: #11281a;
	--sg-promobar-text: #e6edf3;
	--sg-promobar-muted: #8b949e;
	--sg-promobar-new: #3fb950;
	--sg-promobar-cta-bg: #28a745;
	--sg-promobar-cta-hover: #218838;
	--sg-promobar-cta-text: #fff;
	--sg-promobar-close: #9aa4b2;
	--sg-promobar-close-hover-bg: rgba(255, 255, 255, 0.08);
	--sg-promobar-focus: rgba(63, 185, 80, 0.3);
	--sg-promobar-line: #21262d;
}

/* ── Каркас ─────────────────────────────────────────────────────────── */

.sg-promobar,
.sg-promobar *,
.sg-promobar *::before,
.sg-promobar *::after {
	box-sizing: border-box;
}

/* то же правило — в inline <style> SgHeader::promobarHead(): полоса не видна до своих стилей */
.sg-promobar {
	display: none;
}

html.sg-promobar-on .sg-promobar {
	display: block;
}

.sg-promobar {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	/* как у шапки: шапка позже в DOM и ложится поверх (ее меню и выезжающая панель накрывают полосу) */
	z-index: 1030;
	height: var(--sg-promobar-h, 0px);
	margin: 0;
	padding: 0;
	overflow: hidden;
	/* уезжает вверх, пока в кадре: видимая часть --sg-promobar-top, без скрипта — вся высота */
	transform: translate3d(0, calc(var(--sg-promobar-top, var(--sg-promobar-h, 0px)) - var(--sg-promobar-h, 0px)), 0);
	background: var(--sg-promobar-bg);
	/* граница с шапкой — как --sg-border шапки, без изменения высоты */
	box-shadow: inset 0 -1px 0 var(--sg-promobar-line);
	font-family: var(--sg-font);
	font-size: 14px;
	line-height: 20px;
	color: var(--sg-promobar-text);
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

/* страница модуля: в потоке перед корнем модуля, холст вычитает --sg-promobar-h */
.sg-promobar.sg-promobar--flow {
	position: relative;
	z-index: auto;
	transform: none;
}

.sg-promobar .sg-promobar__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 100%;
	/* геометрия — как у .sg-header__inner: от ширины окна, контейнер 1400 */
	width: min(1400px, 100vw);
	margin: 0 0 0 max(0px, calc((100vw - 1400px) / 2));
	/* справа — место под «×» */
	padding: 0 56px 0 24px;
}

.sg-promobar .sg-promobar__body {
	display: flex;
	flex: 0 1 auto;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.sg-promobar .sg-promobar__line {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.sg-promobar .sg-promobar__line--price {
	flex: none;
	gap: 6px;
}

.sg-promobar .sg-promobar__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
}

.sg-promobar .sg-promobar__text--short,
.sg-promobar .sg-promobar__note--short,
.sg-promobar .sg-promobar__cta-text--short {
	display: none;
}

.sg-promobar .sg-promobar__sep {
	flex: none;
	color: var(--sg-promobar-muted);
}

.sg-promobar .sg-promobar__old {
	flex: none;
	color: var(--sg-promobar-muted);
	text-decoration: line-through;
}

.sg-promobar .sg-promobar__new {
	flex: none;
	font-weight: 700;
	color: var(--sg-promobar-new);
}

.sg-promobar .sg-promobar__note {
	flex: none;
	color: var(--sg-promobar-muted);
}

/* подпись для чтения с экрана («Обычная цена»): зачеркивание экранные чтецы не озвучивают */
.sg-promobar .sg-promobar__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sg-promobar .sg-promobar__cta,
.sg-promobar .sg-promobar__cta:hover,
.sg-promobar .sg-promobar__cta:focus {
	text-decoration: none;
}

.sg-promobar .sg-promobar__cta {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	height: 28px;
	padding: 0 14px;
	border-radius: 100px;
	background: var(--sg-promobar-cta-bg);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--sg-promobar-cta-text);
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.sg-promobar .sg-promobar__cta:hover {
	background: var(--sg-promobar-cta-hover);
	color: var(--sg-promobar-cta-text);
}

.sg-promobar .sg-promobar__close {
	position: absolute;
	top: 50%;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: -16px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font: inherit;
	color: var(--sg-promobar-close);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sg-promobar .sg-promobar__close:hover {
	background: var(--sg-promobar-close-hover-bg);
	color: var(--sg-promobar-text);
}

.sg-promobar .sg-promobar__cta:focus-visible,
.sg-promobar .sg-promobar__close:focus-visible {
	/* !important: площадки глушат a:focus-visible глобальным !important (как у шапки) */
	outline: 2px solid var(--sg-promobar-focus) !important;
	outline-offset: 2px !important;
}

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

@media (min-width: 1200px) {
	.sg-promobar .sg-promobar__inner {
		padding-left: 20px;
	}
}

/* <1200: короткий текст, остальное — одной строкой (длинный в 992–1199 обрезался бы на полуслове) */
@media (max-width: 1199.98px) {
	.sg-promobar .sg-promobar__text--long {
		display: none;
	}

	.sg-promobar .sg-promobar__text--short {
		display: block;
	}
}

/* телефон: две строки по одной — «текст + старая цена» и «новая цена · подпись», короткий CTA */
@media (max-width: 767.98px) {
	.sg-promobar .sg-promobar__inner {
		justify-content: space-between;
		gap: 12px;
		padding: 0 52px 0 12px;
	}

	.sg-promobar .sg-promobar__body {
		flex: 1 1 auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		font-size: 13px;
		line-height: 16px;
	}

	.sg-promobar .sg-promobar__line {
		gap: 6px;
		max-width: 100%;
	}

	.sg-promobar .sg-promobar__line--price {
		flex: none;
		min-width: 0;
		overflow: hidden;
	}

	.sg-promobar .sg-promobar__sep,
	.sg-promobar .sg-promobar__note--long,
	.sg-promobar .sg-promobar__cta-text--long {
		display: none;
	}

	.sg-promobar .sg-promobar__note--short {
		display: block;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Телефон: подпись цены как на десктопе («предложение ограничено»), на узких экранах — короткая («акция
	   ограничена»): длинная помещается рядом с кнопкой от 400 px (на 390 не хватает 3 px; решение владельца 11.11.2026) */
	.sg-promobar .sg-promobar__note-compact {
		display: none;
	}

	.sg-promobar .sg-promobar__cta-text--short {
		display: inline;
	}

	.sg-promobar .sg-promobar__cta {
		height: 32px;
		padding: 0 16px;
	}

	/* «×» — 44 по высоте полосы: палец попадает */
	.sg-promobar .sg-promobar__close {
		right: 4px;
		width: 44px;
		height: 44px;
		margin-top: -22px;
	}

	/* кольцо фокуса — внутри кнопки: снаружи его срезал бы overflow:hidden полосы той же высоты */
	.sg-promobar .sg-promobar__close:focus-visible {
		outline-offset: -2px !important;
	}
}

/* <375: плашка «Безлимит на месяц» целиком, старая цена уходит первой. Первая строка переносится, ее
   высота — высота плашки (.sg-promobar__lead ниже: line-height 1.5 + padding 1px сверху и снизу), как и
   без переноса: старая цена, которой не хватило места рядом с плашкой, уходит на вторую, невидимую строку
   (чтец экрана ее читает). Без переноса текст сжимался бы с многоточием («Безлимит на меся», замер 360:
   плашке не хватало 15 px, 320 — 22 px). Место есть — цена на месте; 375+ не меняется (утверждено) */
@media (max-width: 374.98px) {
	.sg-promobar .sg-promobar__line--main {
		flex-wrap: wrap;
		height: calc(1.5em + 2px);
		overflow: hidden;
	}
}

@media (max-width: 359.98px) {
	.sg-promobar .sg-promobar__inner {
		gap: 8px;
		padding-left: 8px;
	}

	.sg-promobar .sg-promobar__body {
		font-size: 12px;
	}

	.sg-promobar .sg-promobar__cta {
		padding: 0 12px;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sg-promobar *,
	.sg-promobar *::before,
	.sg-promobar *::after {
		transition: none !important;
	}
}

@media print {
	html.sg-promobar-on .sg-promobar {
		display: none;
	}
}

/* Начало текста — плашкой основного цвета DS (владелец 11.11.2026: «Безлимит на месяц» заметнее) */
.sg-promobar__lead {
	display: inline-block;
	margin-right: 4px;
	padding: 1px 8px;
	border-radius: 4px;
	background: var(--sg-promobar-cta-bg);
	color: var(--sg-promobar-cta-text);
	font-weight: 600;
	line-height: 1.5;
}

@media (max-width: 399.98px) {
	.sg-promobar .sg-promobar__note-full {
		display: none;
	}

	.sg-promobar .sg-promobar__note-compact {
		display: inline;
	}
}