/* =========================
   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(0.8) !important;
    -webkit-backdrop-filter: brightness(0.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, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.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, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.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 0.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, 0.85) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 10px rgba(0, 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, 0.75) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.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; /* Adjust based on your header height */
}

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

/* End visual utilities */