/*!
 * Custom Sticky Container for Elementor - Base Styles
 * Version: 2.0.1
 */

/* ==========================================================================
   Initial Hide State - Prevent FOUC (Flash of Unstyled Content)
   ========================================================================== */

/* Hide elements with show-on-scroll enabled by default - High specificity */
.elementor .csc-sticky-container[data-csc-show-on-scroll="yes"],
.csc-sticky-container[data-csc-show-on-scroll="yes"],
body .csc-sticky-container[data-csc-show-on-scroll="yes"],
html body .csc-sticky-container[data-csc-show-on-scroll="yes"] {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Override any theme/plugin animations until ready */
.elementor .csc-sticky-container[data-csc-show-on-scroll="yes"]:not(.csc-is-sticky),
.csc-sticky-container[data-csc-show-on-scroll="yes"]:not(.csc-is-sticky) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

/* Force show when sticky - Ultra high specificity */
.csc-sticky-container.csc-is-sticky.csc-is-showing,
body .csc-sticky-container.csc-is-sticky.csc-is-showing,
html body .csc-sticky-container.csc-is-sticky.csc-is-showing,
.elementor .csc-sticky-container.csc-is-sticky.csc-is-showing {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   Base Sticky Container Styles
   ========================================================================== */

.csc-sticky-container {
    /* Base container styles - no transitions by default to prevent conflicts */
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   Sticky State
   ========================================================================== */

.csc-sticky-container.csc-is-sticky {
    position: fixed !important;
    left: 0;
    right: 0;
    width: 100% !important;
    box-sizing: border-box;
    /* Z-index will be set via JavaScript/inline styles */
}

/* Ensure full width when sticky and full-width is enabled */
.csc-sticky-container.csc-is-sticky.csc-full-width {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

/* ==========================================================================
   Hidden States - Different methods for hiding elements
   ========================================================================== */

/* Visibility method (recommended - preserves layout) */
.csc-sticky-container.csc-hidden-visibility {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Display method (removes from layout) */
.csc-sticky-container.csc-hidden-display {
    display: none !important;
}

/* Opacity method (preserves layout, allows interactions) */
.csc-sticky-container.csc-hidden-opacity {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Animation States
   ========================================================================== */

/* Animation container - only add transitions when animating */
.csc-sticky-container.csc-animating {
    transition: transform var(--csc-animation-duration, 0.3s) ease-out,
                opacity var(--csc-animation-duration, 0.3s) ease-out,
                visibility 0s linear var(--csc-animation-duration, 0.3s);
}

/* Remove transitions when not animating to prevent unwanted effects */
.csc-sticky-container:not(.csc-animating) {
    transition: none !important;
}

/* ==========================================================================
   Responsive Helpers
   ========================================================================== */

/* Hide on mobile when not enabled */
@media (max-width: 767px) {
    .csc-sticky-container:not([data-csc-devices*='"mobile":"yes"']) {
        position: static !important;
        /* Reset all sticky styles */
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        z-index: auto !important;
    }
    
    .csc-sticky-container:not([data-csc-devices*='"mobile":"yes"']).csc-is-sticky {
        position: static !important;
    }
}

/* Hide on tablet when not enabled */
@media (min-width: 768px) and (max-width: 1024px) {
    .csc-sticky-container:not([data-csc-devices*='"tablet":"yes"']) {
        position: static !important;
        /* Reset all sticky styles */
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        z-index: auto !important;
    }
    
    .csc-sticky-container:not([data-csc-devices*='"tablet":"yes"']).csc-is-sticky {
        position: static !important;
    }
}

/* Hide on desktop when not enabled */
@media (min-width: 1025px) {
    .csc-sticky-container:not([data-csc-devices*='"desktop":"yes"']) {
        position: static !important;
        /* Reset all sticky styles */
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        z-index: auto !important;
    }
    
    .csc-sticky-container:not([data-csc-devices*='"desktop":"yes"']).csc-is-sticky {
        position: static !important;
    }
}

/* ==========================================================================
   Debug Mode
   ========================================================================== */

.csc-sticky-container[data-csc-debug="yes"] {
    outline: 2px dashed #ff6b6b !important;
    outline-offset: -2px !important;
}