/* ========================================
   Pretpot Scroll Reveal Blur Widget Styles
   ======================================== */

/* Remove default Elementor container padding and spacing */
.elementor-widget-pretpot-scroll-reveal-blur {
	margin: 0 !important;
	padding: 0 !important;
}

.elementor-widget-pretpot-scroll-reveal-blur > .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
}

/* Main Container - Full Width */
.pretpot-scroll-reveal-blur {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Media Wrapper - Always behind content */
.pretpot-blur-media-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

/* Media Container - Centered and Behind */
.pretpot-blur-media {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	transition: filter 0.1s ease-out, transform 0.3s ease-out;
	will-change: filter, transform;
	z-index: 1;
}

.pretpot-blur-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: filter 0.1s ease-out;
	will-change: filter;
	transform-origin: center center;
}

/* Play Icon Overlay */
.pretpot-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	opacity: 0.9;
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 3;
	pointer-events: auto;
}

.pretpot-play-icon:hover {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.1);
}

.pretpot-play-icon svg {
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Content - Always on Top and Centered */
.pretpot-blur-content {
	position: relative;
	z-index: 10;
	width: 100%;
	pointer-events: auto;
	margin: 0 auto;
}

.pretpot-blur-title {
	margin: 0;
	font-weight: 700;
	line-height: 1.2;
	position: relative;
	z-index: 10;
	width: 100%;
	word-wrap: break-word;
}

.pretpot-blur-subtext {
	margin: 0;
	line-height: 1.6;
	position: relative;
	z-index: 10;
	width: 100%;
	word-wrap: break-word;
}

.pretpot-blur-button-wrap {
	display: flex;
	width: 100%;
	position: relative;
	z-index: 10;
}

.pretpot-blur-button {
	display: inline-block;
	padding: 15px 40px;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	z-index: 10;
}

.pretpot-blur-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Video controls hidden when preview mode */
.pretpot-blur-media video::-webkit-media-controls {
	display: none !important;
}

.pretpot-blur-media video::-webkit-media-controls-enclosure {
	display: none !important;
}

.pretpot-blur-media video {
	pointer-events: none;
}

/* Zoom animation class */
.pretpot-media-zooming {
	transition-property: transform !important;
	transition-timing-function: ease-out !important;
}

/* Performance optimizations */
.pretpot-scroll-reveal-blur,
.pretpot-blur-media,
.pretpot-blur-bg {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000px;
	perspective: 1000px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.pretpot-blur-title {
		font-size: clamp(1.5rem, 5vw, 3rem);
	}
	
	.pretpot-blur-subtext {
		font-size: clamp(0.9rem, 3vw, 1.2rem);
	}
	
	.pretpot-blur-button {
		padding: 12px 30px;
		font-size: 14px;
	}
}

/* Override Elementor column padding for this widget only */
body .elementor-column > .elementor-widget-wrap > .elementor-widget-pretpot-scroll-reveal-blur,
body .elementor-column > .elementor-element-populated > .elementor-widget-wrap > .elementor-widget-pretpot-scroll-reveal-blur {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Ensure no horizontal scroll */
.pretpot-scroll-reveal-blur {
	overflow-x: hidden;
}

/* Editor mode support */
.elementor-editor-active .pretpot-blur-media-wrapper {
	position: absolute;
}

/* Ensure no horizontal scroll */
body .pretpot-scroll-reveal-blur {
	overflow-x: hidden;
}

/* CRITICAL: Override ALL Elementor spacing at highest specificity */
body .elementor-widget-pretpot-scroll-reveal-blur,
body .elementor-widget-pretpot-scroll-reveal-blur .elementor-widget-container,
body .elementor-widget-pretpot-scroll-reveal-blur .pretpot-scroll-reveal-blur {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Force full viewport width on the widget itself */
body .elementor-widget-pretpot-scroll-reveal-blur {
	width: 100vw !important;
	max-width: 100vw !important;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
}

/* Reset inner container to normal flow */
body .elementor-widget-pretpot-scroll-reveal-blur .elementor-widget-container {
	width: 100% !important;
	max-width: 100% !important;
	position: relative;
	left: auto;
	right: auto;
}