/**
 * Overlay Gate — стили оверлея.
 *
 * Состояние по умолчанию (data-state="waiting") намеренно безопасное:
 * оверлей прозрачен и не перехватывает события мыши, поэтому пока контент
 * не подтверждён, сайтом можно пользоваться как обычно.
 */

.overlay-gate-root {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
}

.overlay-gate-root[data-state="active"] {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
}

/* Состояние ожидания с блокировкой: пока грузится контент, сайт затемнён и
   недоступен для кликов, но самого контента ещё не видно — вместо него спиннер.
   Если сигнал не придёт, скрипт снимет весь оверлей по таймауту. */
.overlay-gate-root[data-state="waiting"][data-block-waiting="1"] {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
}

.overlay-gate-root[data-state="waiting"][data-block-waiting="1"] .overlay-gate-frame-wrap {
	visibility: hidden;
}

.overlay-gate-loader {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 44px;
	height: 44px;
	border: 4px solid rgba(255, 255, 255, 0.25);
	border-top-color: #ffffff;
	border-radius: 50%;
	display: none;
	animation: overlay-gate-spin 0.8s linear infinite;
}

.overlay-gate-root[data-state="waiting"][data-block-waiting="1"] .overlay-gate-loader {
	display: block;
}

.overlay-gate-root[data-state="active"] .overlay-gate-loader {
	display: none;
}

@keyframes overlay-gate-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.overlay-gate-loader {
		animation: none;
	}
}

.overlay-gate-backdrop {
	position: absolute;
	inset: 0;
	background-color: var(--og-backdrop-color, #000);
	opacity: var(--og-backdrop-opacity, 0.6);
}

.overlay-gate-frame-wrap {
	position: relative;
	margin: auto;
	width: var(--og-frame-width, 480px);
	height: var(--og-frame-height, 640px);
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
	border-radius: 10px;
	overflow: hidden;
	background: transparent;
}

.overlay-gate-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
}

/* Раскладка «на весь экран». */
.overlay-gate-root.og-pos-fullscreen .overlay-gate-frame-wrap {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

.overlay-gate-root.og-pos-fullscreen .overlay-gate-backdrop {
	opacity: 0;
}

/* Раскладка «правый нижний угол»: фон не затемняем и не перехватываем клики
   мимо самого окна, иначе виджет заблокирует весь сайт без нужды. */
.overlay-gate-root.og-pos-bottom-right {
	pointer-events: none;
}

.overlay-gate-root.og-pos-bottom-right[data-state="active"] {
	pointer-events: none;
}

.overlay-gate-root.og-pos-bottom-right[data-state="active"] .overlay-gate-frame-wrap {
	pointer-events: auto;
}

.overlay-gate-root.og-pos-bottom-right .overlay-gate-backdrop {
	display: none;
}

.overlay-gate-root.og-pos-bottom-right .overlay-gate-frame-wrap {
	margin: auto 16px 16px auto;
}

@media (max-width: 600px) {
	.overlay-gate-root.og-pos-center .overlay-gate-frame-wrap,
	.overlay-gate-root.og-pos-bottom-right .overlay-gate-frame-wrap {
		max-width: calc(100vw - 16px);
		max-height: calc(100vh - 16px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.overlay-gate-root {
		transition: none;
	}
}