/**
 * WS Popup — оформление окна.
 *
 * Плагин ставится в чужие темы, поэтому здесь ничего не берётся из переменных
 * темы: только свои значения и то, что задано в настройках (переменные
 * --ws-pp-* приходят в атрибуте style). Логические свойства (inset-inline,
 * start/end) держат вёрстку правильной и в иврите, и в русском.
 *
 * Устройство: контейнер .ws-pp (вид, угол, затемнение) и окно .ws-pp__box.
 * Если у телефона свой набор, окон два: --d (компьютер) и --m (телефон), а
 * контейнер получает .ws-pp--has-m и .ws-pp--m-<вид>. Все классы выводит PHP
 * в HTML (не скрипт) — оптимизатор LiteSpeed (UCSS) их видит и правила не
 * вырежет. Телефон — до 767 px, как в popup.js.
 */

.ws-pp[hidden] { display: none !important; }
.ws-pp, .ws-pp *, .ws-pp *::before, .ws-pp *::after { box-sizing: border-box; }

/* Появление — анимацией, которая стартует сама, когда скрипт снимает hidden.
   Не классом от скрипта: UCSS вырезает правила для классов, которых нет в
   HTML, и окно осталось бы прозрачным. */
@keyframes ws-pp-fade { from { opacity: 0; } }
@keyframes ws-pp-rise { from { opacity: 0; transform: translateY(12px); } }

/* Окно посередине: слой на весь экран, окно по центру. */
.ws-pp--center {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

/* Карточка в углу: страница под ней остаётся доступной. Ширину задаёт сама
   карточка, окно внутри — во всю её ширину (иначе проценты считались бы дважды). */
.ws-pp--corner {
	position: fixed;
	bottom: 20px;
	inset-inline-start: 20px;
	z-index: 100000;
	width: calc(100% - 40px);
	max-width: var(--ws-pp-cw, 480px);
}
.ws-pp--corner.ws-pp--side-left { inset-inline: auto; left: 20px; right: auto; }
.ws-pp--corner.ws-pp--side-right { inset-inline: auto; right: 20px; left: auto; }
.ws-pp--corner .ws-pp__box { max-width: none; }

.ws-pp__overlay {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / var(--ws-pp-dim, .5));
	animation: ws-pp-fade .25s ease;
}
.ws-pp--corner .ws-pp__overlay { display: none; }

.ws-pp__box {
	position: relative;
	width: 100%;
	max-width: var(--ws-pp-w, 480px);
	height: var(--ws-pp-h, auto);
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow: auto;
	padding: 28px 24px 22px;
	border-radius: var(--ws-pp-radius, 8px);
	background: var(--ws-pp-bg, #fff);
	color: var(--ws-pp-color, #1d2327);
	box-shadow: 0 12px 40px rgb(0 0 0 / .25);
	font-size: 16px;
	line-height: 1.55;
	text-align: center;
	animation: ws-pp-rise .25s ease;
}
.ws-pp__box:focus { outline: none; }

/* Окно телефона на компьютере не видно никогда. */
.ws-pp .ws-pp__box--m { display: none !important; }

/* Высота задана: содержимое посередине по вертикали, лишнее прокручивается. */
.ws-pp__box.is-fixed {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ws-pp__box.is-fixed > * { flex: 0 0 auto; }

/* Фото фона: цвет фона (с прозрачностью) лежит ПОВЕРХ фото как тонировка. */
.ws-pp__box.has-img {
	background-color: transparent;
	background-image: linear-gradient(var(--ws-pp-bg, transparent), var(--ws-pp-bg, transparent)), var(--ws-pp-img);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Крестик — по умолчанию белый кружок с тёмным крестом и тенью: виден на любом
   фоне и фото (прозрачный крестик цвета текста терялся на тёмном фото — Бурса,
   22.10.2026). Фон, крест и форма — из настроек окна (--ws-pp-x-*).
   Свойства заданы явно: тема вешает на button свои фон, рамку, размеры. */
.ws-pp .ws-pp__x {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	min-width: 0;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--ws-pp-x-r, 50%);
	background: var(--ws-pp-x-bg, rgb(255 255 255 / .9));
	box-shadow: var(--ws-pp-x-sh, 0 1px 6px rgb(0 0 0 / .35));
	color: var(--ws-pp-x-color, #1d2327);
	line-height: 1;
	opacity: 1;
	cursor: pointer;
}
.ws-pp .ws-pp__x svg { display: block; width: 20px; height: 20px; }

.ws-pp .ws-pp__x:hover { filter: brightness(1.08); }
.ws-pp .ws-pp__x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Заголовок: сбрасываем то, что тема навешивает на h2. */
.ws-pp .ws-pp__title {
	margin: 0 28px 10px;
	padding: 0;
	border: 0;
	color: inherit;
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.ws-pp__text > :first-child { margin-top: 0; }
.ws-pp__text > :last-child { margin-bottom: 0; }
.ws-pp__text p { margin: 0 0 .7em; }
.ws-pp__text a { color: inherit; text-decoration: underline; }
.ws-pp__text img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: 4px; }
.ws-pp__text .alignleft { float: none; }
.ws-pp__text .alignright { float: none; }

.ws-pp__actions { margin-top: 18px; }

.ws-pp .ws-pp__btn {
	display: inline-block;
	min-width: 10em;
	margin: 0;
	padding: .7em 1.6em;
	border: 0;
	border-radius: 4px;
	background: var(--ws-pp-btn-bg, #1d2327);
	color: var(--ws-pp-btn-color, #fff);
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.ws-pp .ws-pp__btn:hover { filter: brightness(1.12); color: var(--ws-pp-btn-color, #fff); }
.ws-pp .ws-pp__btn:focus-visible { outline: 2px solid var(--ws-pp-btn-bg, #1d2327); outline-offset: 2px; }

/* Узкие экраны: отступы и кнопка во всю ширину. Стоит ВЫШЕ блока 767 px:
   при равной силе правил вид телефона (--m-center / --m-corner) должен
   перебивать угол компьютера. */
@media (max-width: 600px) {
	.ws-pp__box { padding: 26px 18px 18px; font-size: 15px; }
	.ws-pp--corner { bottom: 10px; inset-inline-start: 10px; width: calc(100% - 20px); }
	.ws-pp--corner.ws-pp--side-left { left: 10px; }
	.ws-pp--corner.ws-pp--side-right { right: 10px; }
	.ws-pp .ws-pp__btn { display: block; width: 100%; }
}

@media (max-width: 767px) {
	/* Без своих настроек телефона ширина в процентах — во весь экран. */
	.ws-pp--wpct .ws-pp__box { max-width: none; }
	.ws-pp--wpct.ws-pp--corner { max-width: none; }

	/* Свой набор телефона: видно окно телефона, окно компьютера — нет. */
	.ws-pp--has-m .ws-pp__box--d { display: none !important; }
	.ws-pp--has-m .ws-pp__box--m { display: block !important; }
	.ws-pp--has-m .ws-pp__box--m.is-fixed { display: flex !important; }
	.ws-pp--has-m .ws-pp__overlay { background: rgb(0 0 0 / var(--ws-pp-mdim, .5)); }

	/* Вид на телефоне — посередине. */
	.ws-pp.ws-pp--m-center {
		inset: 0;
		width: auto;
		max-width: none;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16px;
	}
	.ws-pp.ws-pp--m-center .ws-pp__overlay { display: block; }
	.ws-pp.ws-pp--m-center .ws-pp__box { max-width: var(--ws-pp-w, 480px); }

	/* Вид на телефоне — в углу. */
	.ws-pp.ws-pp--m-corner {
		inset: auto;
		bottom: 10px;
		inset-inline-start: 10px;
		width: calc(100% - 20px);
		max-width: var(--ws-pp-mcw, 100%);
		display: block;
		padding: 0;
	}
	.ws-pp.ws-pp--m-corner.ws-pp--mside-left { inset-inline: auto; left: 10px; right: auto; }
	.ws-pp.ws-pp--m-corner.ws-pp--mside-right { inset-inline: auto; right: 10px; left: auto; }
	.ws-pp.ws-pp--m-corner .ws-pp__overlay { display: none; }
	.ws-pp.ws-pp--m-corner .ws-pp__box { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ws-pp__box, .ws-pp__overlay { animation: none; }
}

@media print {
	.ws-pp { display: none !important; }
}