/**
 * Candid Elements - Glass Effects Stylesheet
 *
 * Layer architecture (bottom to top):
 * 1. Elementor background (z-index: 0)
 * 2. Elementor background overlay (z-index: 1) - for colors/gradients
 * 3. Glass effect layer (z-index: 2) - pure backdrop-filter, no color
 * 4. Content and borders (z-index: 3)
 */

/* Base glass wrapper */
.cde-glass-wrapper {
    position: relative;
}

/* Clip the glass overlay to respect border-radius - only on frontend and editor preview */
body:not(.elementor-editor-active) .cde-glass-wrapper,
.elementor-editor-active .elementor-element.cde-glass-wrapper {
    overflow: hidden;
}

/* Glass effect layer - sits on top of background overlay */
/* This is a pure glass effect with NO color - just blur and saturation */
.cde-glass-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;

    /* Pure glass effect - backdrop filter only, no background color */
    backdrop-filter:
        blur(var(--cde-glass-blur, 15px))
        saturate(var(--cde-glass-saturate, 180%));
    -webkit-backdrop-filter:
        blur(var(--cde-glass-blur, 15px))
        saturate(var(--cde-glass-saturate, 180%));

    /* Match element's border settings */
    border-radius: inherit;

    /* Performance optimizations */
    will-change: backdrop-filter;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* For widgets with custom wrappers, make glass effect match their border-radius */
.cde-glass-wrapper.elementor-widget-candid_info_box::after,
.cde-glass-wrapper.elementor-widget-candid_bento_card::after,
.cde-glass-wrapper.elementor-widget-candid_list::after {
    border-radius: var(--cde-glass-border-radius, inherit);
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
    .cde-glass-wrapper::after {
        /* Disable backdrop filter */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        /* Add a subtle white overlay as fallback visual */
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* Ensure content is above the glass effect layer (z-index: 2) */
.cde-glass-wrapper > *:not(.elementor-background-overlay) {
    position: relative;
    z-index: 3;
}

/* Specific selectors for Elementor's common content containers */
.cde-glass-wrapper > .e-con-inner,
.cde-glass-wrapper > .elementor-container,
.cde-glass-wrapper > .elementor-widget-container,
.cde-glass-wrapper > .elementor-column-wrap,
.cde-glass-wrapper.e-con > .e-con-inner {
    position: relative;
    z-index: 3;
}

/* For widgets with custom wrappers (like Candid Info Box), ensure content is above glass */
.cde-glass-wrapper .cde-info-box,
.cde-glass-wrapper .cde-bento-card,
.cde-glass-wrapper .cde-gallery-wrapper {
    position: relative;
    z-index: 3;
}

/* Ensure Elementor's background overlay is below glass effect but above background */
.cde-glass-wrapper .elementor-background-overlay {
    z-index: 1;
}

/* Accessibility: respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .cde-glass-wrapper::after {
        /* Disable blur effect for users who prefer reduced motion */
        backdrop-filter: saturate(var(--cde-glass-saturate, 180%));
        -webkit-backdrop-filter: saturate(var(--cde-glass-saturate, 180%));
    }
}