/**
 * Vektor Bonus Unlock — стили модального окна.
 * @package Detect
 */

.vektor-bonus-unlock-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.vektor-bonus-unlock-overlay.vektor-bonus-unlock-overlay--visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.vektor-bonus-unlock-modal {
	position: relative;
	z-index: 1;
	max-height: 90vh;
	overflow-y: auto;
}

.vektor-bonus-unlock-modal--bounce-in {
	animation: vektor-bonus-unlock-bounce-in 0.4s ease-out;
}

@keyframes vektor-bonus-unlock-bounce-in {
	0% {
		opacity: 0;
		transform: scale(0.9) translateY(20px);
	}
	70% {
		transform: scale(1.02) translateY(-4px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes glow {
	0%,
	100% {
		box-shadow: 0 0 20px rgba(234, 179, 8, 0.5);
	}
	50% {
		box-shadow: 0 0 40px rgba(234, 179, 8, 0.8), 0 0 60px rgba(234, 179, 8, 0.4);
	}
}

.animate-glow {
	animation: glow 2s ease-in-out infinite;
}

/* Confetti */
.vektor-bonus-unlock-confetti-wrap {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	border-radius: 1rem;
	z-index: 0;
}

.vektor-bonus-unlock-confetti {
	position: absolute;
	animation: vektor-bonus-unlock-confetti 1.5s ease-out forwards;
}

@keyframes vektor-bonus-unlock-confetti {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(-150px) rotate(720deg);
		opacity: 0;
	}
}

.vektor-bonus-unlock__cta:hover {
	opacity: 0.95;
}

.vektor-bonus-unlock__course-link {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Иконка трофея через CSS content — иначе WP заменяет emoji на <img>. */
.vektor-bonus-unlock__trophy-emoji::before {
	content: var(--trophy-emoji, '\1f3c6');
}

/* editor elementor */
/* Улучшаем видимость и поведение в редакторе Elementor */
body.elementor-editor-active .vektor-bonus-unlock-overlay {
    position: relative !important;
    min-height: 600px;
    margin: 40px auto;
    max-width: 90%;
    background: rgba(0,0,0,0.03); /* лёгкий фон, чтобы видеть границы */
}

body.elementor-editor-active .vektor-bonus-unlock-overlay__backdrop {
    opacity: 0.5 !important;
    backdrop-filter: blur(3px) !important;
}

body.elementor-editor-active .vektor-bonus-unlock-modal {
    transform: none !important;
    animation: none !important; /* убираем bounce, если мешает */
}