/* Site Popup Pro — front-end stylesheet */

.spp-scroll-lock { overflow: hidden !important; }

.spp-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
	background: rgba(0, 0, 0, .55);
}
.spp-overlay.spp-visible {
	opacity: 1;
	pointer-events: auto;
}

/* corner / bar positions get a transparent overlay so the page stays clickable */
.spp-overlay.spp-pos-top-left,
.spp-overlay.spp-pos-top-right,
.spp-overlay.spp-pos-bottom-left,
.spp-overlay.spp-pos-bottom-right,
.spp-overlay.spp-pos-top-bar,
.spp-overlay.spp-pos-bottom-bar {
	background: transparent;
	pointer-events: none;
}
.spp-overlay.spp-pos-top-left .spp-box,
.spp-overlay.spp-pos-top-right .spp-box,
.spp-overlay.spp-pos-bottom-left .spp-box,
.spp-overlay.spp-pos-bottom-right .spp-box,
.spp-overlay.spp-pos-top-bar .spp-box,
.spp-overlay.spp-pos-bottom-bar .spp-box {
	pointer-events: auto;
}

.spp-box {
	position: relative;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
	max-width: 92vw;
	max-height: 88vh;
	overflow: auto;
	width: var(--spp-width, 480px);
	padding: 28px 24px;
	box-sizing: border-box;
}

/* ---- positions ---- */
.spp-pos-center { align-items: center; justify-content: center; }

.spp-pos-top-bar { align-items: flex-start; justify-content: stretch; }
.spp-pos-top-bar .spp-box { width: 100%; max-width: 100%; border-radius: 0; }

.spp-pos-bottom-bar { align-items: flex-end; justify-content: stretch; }
.spp-pos-bottom-bar .spp-box { width: 100%; max-width: 100%; border-radius: 0; }

.spp-pos-fullscreen { align-items: stretch; justify-content: stretch; }
.spp-pos-fullscreen .spp-box { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }

.spp-pos-top-left { align-items: flex-start; justify-content: flex-start; padding: var(--spp-offset, 20px); }
.spp-pos-top-right { align-items: flex-start; justify-content: flex-end; padding: var(--spp-offset, 20px); }
.spp-pos-bottom-left { align-items: flex-end; justify-content: flex-start; padding: var(--spp-offset, 20px); }
.spp-pos-bottom-right { align-items: flex-end; justify-content: flex-end; padding: var(--spp-offset, 20px); }

.spp-pos-slide_bottom { align-items: flex-end; justify-content: center; }
.spp-pos-slide_bottom .spp-box { border-radius: 14px 14px 0 0; margin-bottom: 0; }

/* ---- animations ---- */
.spp-anim-fade .spp-box { opacity: 0; transition: opacity .3s ease; }
.spp-anim-fade.spp-visible .spp-box { opacity: 1; }

.spp-anim-zoom .spp-box { opacity: 0; transform: scale(.85); transition: all .3s ease; }
.spp-anim-zoom.spp-visible .spp-box { opacity: 1; transform: scale(1); }

.spp-anim-slide .spp-box { opacity: 0; transform: translateY(30px); transition: all .3s ease; }
.spp-anim-slide.spp-visible .spp-box { opacity: 1; transform: translateY(0); }

.spp-anim-bounce .spp-box { opacity: 0; transform: scale(.6); transition: all .4s cubic-bezier(.34, 1.56, .64, 1); }
.spp-anim-bounce.spp-visible .spp-box { opacity: 1; transform: scale(1); }

.spp-anim-none .spp-box { transition: none; }

/* ---- inner elements ---- */
.spp-close {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	width: 32px;
	height: 32px;
	border: none;
	background: rgba(0, 0, 0, .06);
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.spp-close:hover { background: rgba(0, 0, 0, .12); }

.spp-content { display: flex; flex-direction: column; gap: 14px; }
.spp-image { width: 100%; border-radius: 8px; object-fit: cover; }
.spp-text { font-size: 15px; line-height: 1.9; }

.spp-cta {
	display: inline-block;
	text-align: center;
	padding: 12px 20px;
	border-radius: 8px;
	background: #2563eb;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	border: none;
	cursor: pointer;
}
.spp-cta:hover { opacity: .9; }

.spp-countdown {
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 1px;
}

.spp-video { position: relative; width: 100%; aspect-ratio: 16/9; }
.spp-video iframe, .spp-video video { width: 100%; height: 100%; border-radius: 8px; }

.spp-form { display: flex; flex-direction: column; gap: 10px; }
.spp-form input {
	padding: 11px 14px;
	border: 1px solid #d7d7d7;
	border-radius: 8px;
	font-size: 14px;
}
.spp-form-message { font-size: 14px; text-align: center; }

@media (max-width: 480px) {
	.spp-box { padding: 20px 16px; }
}