/*
 * Промо-ролик «Что нового» (inc/promo-video.php, assets/js/guru-promo.js): кнопка справа внизу и окно
 * с видео. Тема — только выбор пользователя: html[data-theme="dark"], иначе светлая (guru-theme.js).
 *
 * Слои: уведомление cookies — 1020 (слева внизу; на телефоне во всю ширину), кнопка — 1022, панель
 * поддержки — 1025 (справа внизу: пока она открыта, кнопки нет), тост оплаты — 1027 (по центру внизу,
 * на телефоне во всю ширину), шапка — 1030. Плашка cookies или тост под кнопкой — кнопка встает над
 * ними (--guru-promo-lift ставит скрипт). Окно — <dialog> в верхнем слое, z-index ему не нужен.
 */

.guru-promo,
.guru-promo-dlg {
	--gp-primary: #28a745;
	--gp-primary-hover: #218838;
	--gp-primary-10: rgba(40, 167, 69, 0.1);
	--gp-surface: #fff;
	--gp-border: #e9ecef;
	--gp-text: #212529;
	--gp-muted: #6c757d;
	--gp-btn-shadow: 0 10px 28px rgba(40, 167, 69, 0.32), 0 2px 6px rgba(23, 43, 77, 0.12);
	--gp-panel-shadow: 0 24px 64px rgba(23, 43, 77, 0.24), 0 4px 16px rgba(23, 43, 77, 0.1);
	--gp-close-hover: #f1f3f5;
}

html[data-theme="dark"] .guru-promo,
html[data-theme="dark"] .guru-promo-dlg {
	--gp-primary-10: rgba(63, 185, 80, 0.14);
	--gp-surface: #161b22;
	--gp-border: #30363d;
	--gp-text: #e6edf3;
	--gp-muted: #8b949e;
	--gp-btn-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
	--gp-panel-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
	--gp-close-hover: rgba(255, 255, 255, 0.08);
}

/* ── Кнопка ──────────────────────────────────────────────────────── */

.guru-promo {
	position: fixed;
	right: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--guru-promo-lift, 0px));
	z-index: 1022;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	height: 52px;
	margin: 0;
	padding: 0 22px 0 8px;
	border: 0;
	border-radius: 999px;
	background: var(--gp-primary);
	box-shadow: var(--gp-btn-shadow);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.guru-promo[hidden] {
	display: none;
}

.guru-promo:hover {
	background: var(--gp-primary-hover);
	transform: translateY(-1px);
}

.guru-promo:focus-visible {
	outline: 2px solid var(--gp-primary);
	outline-offset: 3px;
}

.guru-promo__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
}

.guru-promo__icon svg {
	display: block;
	width: 13px;
	height: 13px;
	margin-left: 2px; /* треугольник визуально по центру круга */
}

.guru-promo__more {
	font-weight: 500;
	opacity: 0.9;
}

/* После просмотра — круглый значок ▶; подпись остается именем кнопки для чтения с экрана */
.guru-promo.is-compact {
	justify-content: center;
	width: 52px;
	padding: 0;
}

.guru-promo.is-compact .guru-promo__icon {
	background: none;
}

.guru-promo.is-compact .guru-promo__icon svg {
	width: 16px;
	height: 16px;
}

.guru-promo.is-compact .guru-promo__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Панель поддержки (справа внизу на десктопе, лист на телефоне) — кнопка не мешает и не ловит Tab */
html:has(.sg-support[open]) .guru-promo {
	visibility: hidden;
}

/* Телефон: короче подпись, отступы как у уведомления cookies; над ним — на высоту уведомления */
@media (max-width: 767.98px) {
	.guru-promo {
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--guru-promo-lift, 0px));
		gap: 8px;
		height: 48px;
		padding: 0 18px 0 6px;
		font-size: 14px;
	}

	.guru-promo__icon {
		width: 36px;
		height: 36px;
	}

	.guru-promo__more {
		display: none;
	}

	.guru-promo.is-compact {
		width: 48px;
	}
}

/* ── Окно с видео ────────────────────────────────────────────────── */

.guru-promo-dlg {
	box-sizing: border-box;
	/* 16:9 видео, шапка окна (~76 px) и строка перехода (~60 px) помещаются в высоту экрана, но окно не уже 360 px: на очень
	   низком экране (масштаб 400%) карточка прокручивается. Строка с vh — для браузеров без dvh (без нее
	   они отбросили бы ширину целиком) */
	width: min(960px, calc(100vw - 32px), max(360px, calc((100vh - 180px) * 16 / 9 + 30px)));
	width: min(960px, calc(100vw - 32px), max(360px, calc((100dvh - 180px) * 16 / 9 + 30px)));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	color: var(--gp-text);
	font-family: inherit;
}

.guru-promo-dlg::backdrop {
	background: rgba(10, 14, 20, 0.72);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.guru-promo-dlg__card {
	box-sizing: border-box;
	/* окно не выше экрана при любом масштабе и шрифте: лишнее прокручивается внутри карточки (своя
	   тень у карточки остается — overflow ее не обрезает) */
	max-height: calc(100vh - 16px);
	max-height: calc(100dvh - 16px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px;
	border: 1px solid var(--gp-border);
	border-radius: 16px;
	background: var(--gp-surface);
	box-shadow: var(--gp-panel-shadow);
}

.guru-promo-dlg__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 0 0 12px 4px;
}

.guru-promo-dlg__chip {
	/* в узкой шапке не заходит под крестик — обрезается */
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--gp-primary-10);
	color: var(--gp-primary);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

html[data-theme="dark"] .guru-promo-dlg__chip {
	color: #3fb950;
}

.guru-promo-dlg__title {
	margin: 0;
	color: var(--gp-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.guru-promo-dlg__sub {
	margin: 2px 0 0;
	color: var(--gp-muted);
	font-size: 13px;
	line-height: 1.35;
}

.guru-promo-dlg__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--gp-border);
	border-radius: 10px;
	background: transparent;
	color: var(--gp-text);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.guru-promo-dlg__close:hover {
	background: var(--gp-close-hover);
}

.guru-promo-dlg__close:focus-visible {
	outline: 2px solid var(--gp-primary);
	outline-offset: 2px;
}

.guru-promo-dlg__close:focus:not(:focus-visible) {
	outline: none;
}

.guru-promo-dlg__frame {
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	background: #000;
}

.guru-promo-dlg__frame video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

/* Строка перехода под видео: текст слева, кнопка «Перейти» справа; на узком экране — кнопка под текстом */
.guru-promo-dlg__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding: 14px 4px 2px 6px;
}

.guru-promo-dlg__cta-text {
	flex: 1 1 260px;
	margin: 0;
	color: var(--gp-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
}

.guru-promo-dlg__go {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 10px;
	background: var(--gp-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.guru-promo-dlg__go:hover,
.guru-promo-dlg__go:focus-visible {
	background: var(--gp-primary-hover);
	color: #fff;
	text-decoration: none;
}

.guru-promo-dlg__go:focus-visible {
	outline: 2px solid var(--gp-primary);
	outline-offset: 2px;
}

/* Телефон: метка над заголовком, крестик справа от нее — заголовок во всю ширину */
@media (max-width: 559.98px) {
	.guru-promo-dlg {
		/* шапка окна здесь в две строки (~130 px), строка перехода — до двух (~90 px); не уже 280 px */
		width: min(calc(100vw - 24px), max(280px, calc((100vh - 280px) * 16 / 9 + 26px)));
		width: min(calc(100vw - 24px), max(280px, calc((100dvh - 280px) * 16 / 9 + 26px)));
	}

	.guru-promo-dlg__card {
		padding: 12px;
	}

	/* строка перехода в две строки: текст и кнопка «Перейти» — по центру */
	.guru-promo-dlg__cta {
		justify-content: center;
		padding: 14px 4px 4px;
		text-align: center;
	}

	.guru-promo-dlg__cta-text {
		flex-basis: 100%;
	}

	.guru-promo-dlg__head {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "chip close" "titles titles";
		row-gap: 8px;
		padding-left: 2px;
	}

	.guru-promo-dlg__chip {
		grid-area: chip;
		justify-self: start;
	}

	.guru-promo-dlg__titles {
		grid-area: titles;
	}

	.guru-promo-dlg__close {
		grid-area: close;
	}
}

@media (prefers-reduced-motion: reduce) {
	.guru-promo,
	.guru-promo-dlg__close,
	.guru-promo-dlg__go {
		transition: none;
	}

	.guru-promo:hover {
		transform: none;
	}
}

@media print {
	.guru-promo {
		display: none;
	}
}