/* End visual utilities */

/* =========================
   MG LEADBUILDER 2025 – VISUAL UTILITIES
   Advanced CSS effects that Elementor doesn't provide
   ========================= */

/* =========================
   BLEND MODES
   Mix elements with backgrounds in creative ways
   ========================= */
body.mg-design-system .mg-blend-multiply {
	mix-blend-mode: multiply !important;
}

body.mg-design-system .mg-blend-screen {
	mix-blend-mode: screen !important;
}

body.mg-design-system .mg-blend-overlay {
	mix-blend-mode: overlay !important;
}

body.mg-design-system .mg-blend-darken {
	mix-blend-mode: darken !important;
}

body.mg-design-system .mg-blend-lighten {
	mix-blend-mode: lighten !important;
}

body.mg-design-system .mg-blend-color-dodge {
	mix-blend-mode: color-dodge !important;
}

body.mg-design-system .mg-blend-color-burn {
	mix-blend-mode: color-burn !important;
}

body.mg-design-system .mg-blend-soft-light {
	mix-blend-mode: soft-light !important;
}

body.mg-design-system .mg-blend-difference {
	mix-blend-mode: difference !important;
}

/* =========================
   CLIP PATH
   Create custom shapes and angled edges
   ========================= */

/* Diagonal cuts */
body.mg-design-system .mg-clip-diagonal-tl {
	clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%) !important;
}

body.mg-design-system .mg-clip-diagonal-tr {
	clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%) !important;
}

body.mg-design-system .mg-clip-diagonal-bl {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%) !important;
}

body.mg-design-system .mg-clip-diagonal-br {
	clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%) !important;
}

/* Angled sections */
body.mg-design-system .mg-clip-angle-top {
	clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%) !important;
}

body.mg-design-system .mg-clip-angle-bottom {
	clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%) !important;
}

body.mg-design-system .mg-clip-angle-both {
	clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%) !important;
}

/* Corner notches */
body.mg-design-system .mg-clip-notch-tl {
	clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 5%) !important;
}

body.mg-design-system .mg-clip-notch-tr {
	clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 0 100%) !important;
}

body.mg-design-system .mg-clip-notch-bl {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%, 0 95%) !important;
}

body.mg-design-system .mg-clip-notch-br {
	clip-path: polygon(0 0, 100% 0, 100% 95%, 95% 100%, 0 100%) !important;
}

/* Chevron/Arrow shapes */
body.mg-design-system .mg-clip-chevron-right {
	clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%) !important;
}

body.mg-design-system .mg-clip-chevron-left {
	clip-path: polygon(15% 0, 100% 0, 100% 100%, 15% 100%, 0 50%) !important;
}

/* Pentagon */
body.mg-design-system .mg-clip-pentagon {
	clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%) !important;
}

/* Hexagon */
body.mg-design-system .mg-clip-hexagon {
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%) !important;
}

/* Circle */
body.mg-design-system .mg-clip-circle {
	clip-path: circle(50% at 50% 50%) !important;
}

/* =========================
   BACKDROP FILTERS
   Frosted glass and blur effects
   ========================= */

/* Frosted glass effect */
body.mg-design-system .mg-backdrop-blur {
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
}

body.mg-design-system .mg-backdrop-blur-light {
	backdrop-filter: blur(5px) !important;
	-webkit-backdrop-filter: blur(5px) !important;
}

body.mg-design-system .mg-backdrop-blur-heavy {
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
}

/* Brightness adjustments */
body.mg-design-system .mg-backdrop-brighten {
	backdrop-filter: brightness(1.2) !important;
	-webkit-backdrop-filter: brightness(1.2) !important;
}

body.mg-design-system .mg-backdrop-darken {
	backdrop-filter: brightness(.8) !important;
	-webkit-backdrop-filter: brightness(.8) !important;
}

/* Combined effects for glass morphism */
body.mg-design-system .mg-backdrop-glass {
	backdrop-filter: blur(10px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(10px) saturate(180%) !important;
	background-color: rgba(255, 255, 255, .1) !important;
	border: 1px solid rgba(255, 255, 255, .2) !important;
}

body.mg-design-system .mg-backdrop-glass-dark {
	backdrop-filter: blur(10px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(10px) saturate(180%) !important;
	background-color: rgba(0, 0, 0, .2) !important;
	border: 1px solid rgba(255, 255, 255, .1) !important;
}

/* Contrast */
body.mg-design-system .mg-backdrop-contrast {
	backdrop-filter: contrast(1.5) !important;
	-webkit-backdrop-filter: contrast(1.5) !important;
}

/* Grayscale */
body.mg-design-system .mg-backdrop-grayscale {
	backdrop-filter: grayscale(100%) !important;
	-webkit-backdrop-filter: grayscale(100%) !important;
}

/* Sepia */
body.mg-design-system .mg-backdrop-sepia {
	backdrop-filter: sepia(100%) !important;
	-webkit-backdrop-filter: sepia(100%) !important;
}

/* =========================
   Z-INDEX MANAGEMENT
   Consistent layering system
   ========================= */
body.mg-design-system .mg-z-back {
	z-index: -1 !important;
	position: relative !important;
}

body.mg-design-system .mg-z-base {
	z-index: 0 !important;
	position: relative !important;
}

body.mg-design-system .mg-z-content {
	z-index: 10 !important;
	position: relative !important;
}

body.mg-design-system .mg-z-dropdown {
	z-index: 100 !important;
	position: relative !important;
}

body.mg-design-system .mg-z-sticky {
	z-index: 200 !important;
	position: relative !important;
}

body.mg-design-system .mg-z-overlay {
	z-index: 500 !important;
	position: relative !important;
}

body.mg-design-system .mg-z-modal {
	z-index: 1000 !important;
	position: relative !important;
}

body.mg-design-system .mg-z-toast {
	z-index: 2000 !important;
	position: relative !important;
}

/* =========================
   TRANSPARENT SCROLLING HEADER
   Header that starts transparent and becomes blurred/glossy on scroll
   ========================= */

/* Initial transparent state */
body.mg-design-system .mg-header-transparent {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 200 !important;
	background-color: transparent !important;
	transition: all .3s ease !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-bottom: 1px solid transparent !important;
}

/* Scrolled state - applied via JavaScript */
body.mg-design-system .mg-header-transparent.mg-header-scrolled {
	backdrop-filter: blur(12px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
	background-color: rgba(255, 255, 255, .85) !important;
	border-bottom: 1px solid rgba(0, 0, 0, .1) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .05) !important;
}

/* Dark variant for dark backgrounds */
body.mg-design-system .mg-header-transparent.mg-header-dark.mg-header-scrolled {
	background-color: rgba(0, 0, 0, .75) !important;
	border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
}

/* Ensure content doesn't hide behind fixed header - add this class to body or first section */
body.mg-design-system .mg-has-transparent-header, body.mg-design-system .mg-header-spacer {
	padding-top: 80px !important;
}

@media (max-width: 768px) {
	body.mg-design-system .mg-has-transparent-header, body.mg-design-system .mg-header-spacer {
		padding-top: 60px !important;
	}
}