/**
 * Sticky Widget CSS
 * Apply class 'sticky-widget' to any element to make it sticky on scroll
 * Works responsively and maintains original styling
 * Supports multiple sticky elements that stack below each other
 */

.sticky-widget {
    transition: all 0.3s ease;
    box-sizing: border-box;
    will-change: transform, position;
}

.sticky-widget.is-sticky {
    position: fixed !important;
    z-index: 1000;
    /* top position is set dynamically by JavaScript */
    /* transition: all 0.3s ease; */
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); */
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    animation: stickySlideIn 1s ease-out;
}

/* Stacking support for multiple sticky elements */
.sticky-widget.is-sticky[data-sticky-index="1"] { z-index: 1001; }
.sticky-widget.is-sticky[data-sticky-index="2"] { z-index: 1002; }
.sticky-widget.is-sticky[data-sticky-index="3"] { z-index: 1003; }
.sticky-widget.is-sticky[data-sticky-index="4"] { z-index: 1004; }
.sticky-widget.is-sticky[data-sticky-index="5"] { z-index: 1005; }
.sticky-widget.is-sticky[data-sticky-index="6"] { z-index: 1006; }
.sticky-widget.is-sticky[data-sticky-index="7"] { z-index: 1007; }
.sticky-widget.is-sticky[data-sticky-index="8"] { z-index: 1008; }
.sticky-widget.is-sticky[data-sticky-index="9"] { z-index: 1009; }
.sticky-widget.is-sticky[data-sticky-index="10"] { z-index: 1010; }

/* Ensure sticky elements don't interfere with normal flow */
.sticky-widget.is-sticky + * {
    margin-top: 10;
}

/* Mobile responsiveness - disable sticky on small screens */
@media (max-width: 768px) {
    .sticky-widget.is-sticky {
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
        animation: none !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    /* .sticky-widget.is-sticky {
        background: #2a2a2a;
        border-color: #404040;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    } */
}

/* RTL support */
[dir="rtl"] .sticky-widget.is-sticky {
    right: 20px;
    left: auto;
}

/* Smooth slide-in animation */
@keyframes stickySlideIn {
    from {
        opacity: 0.8;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}