/*
 * Всплывающий баннер (см. APPopupBanner.php). Один и тот же CSS на сайте и в превью админки.
 * Координаты задаются из JS в px макета, умноженных на --s (масштаб: 1px на десктопе,
 * меньше — когда баннер не влезает в экран). --vw/--vh — размер «экрана», в превью их подменяют.
 * Плоские селекторы — по соглашениям проекта (public_html/CLAUDE.md).
 */

.ap-banner {
	--vw: 100vw;
	--vh: 100vh;

	position: fixed;
	z-index: 1060; /* выше шапки (1050), ниже cookie-плашки (10000) */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	overflow: auto;
	opacity: 0;
	transition: opacity .3s;
}

.ap-banner--visible {
	opacity: 1;
}

/* в админке: баннер внутри рамки превью, а не поверх всей страницы */
.ap-banner--preview {
	position: absolute;
	z-index: auto;
	opacity: 1;
	transition: none;
}

.ap-banner-box {
	--s: min(1px, calc((var(--vw) - 20px) / var(--w)), calc((var(--vh) - 20px) / var(--h)));

	position: relative;
	flex: none;
	margin: auto;
	width: calc(var(--w) * var(--s));
	height: calc(var(--h) * var(--s));
	/* смещение --dx (px макета), но не ближе 10px к краю экрана */
	transform: translateX(clamp(
		calc(10px - (var(--vw) - var(--w) * var(--s)) / 2),
		calc(var(--dx) * var(--s)),
		calc((var(--vw) - var(--w) * var(--s)) / 2 - 10px)
	));
}

.ap-banner-link {
	position: absolute;
	inset: 0;
	display: block;
	text-decoration: none;
}

.ap-banner-img {
	display: block;
	width: 100%;
	height: 100%;
}

.ap-banner-text {
	position: absolute;
	white-space: pre-line;
}

.ap-banner-text--nowrap {
	white-space: pre;
}

.ap-banner-close {
	position: absolute;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .25);
	cursor: pointer;
	transition: background-color .2s;
}

.ap-banner-close:hover {
	background: rgba(255, 255, 255, .4);
}

.ap-banner-close::before,
.ap-banner-close::after {
	content: "";
	position: absolute;
	left: 12%;
	top: 50%;
	width: 76%;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 2px;
	background: #fff;
	transform: rotate(45deg);
}

.ap-banner-close::after {
	transform: rotate(-45deg);
}

.ap-banner-close--dark {
	background: rgba(0, 0, 0, .12);
}

.ap-banner-close--dark:hover {
	background: rgba(0, 0, 0, .22);
}

.ap-banner-close--dark::before,
.ap-banner-close--dark::after {
	background: #1b2a3a;
}