/* --------------------------------------------------------------------------------------------------------- */
/* Css to Close sidebar when clicking outside it (on mobile/tablet only) ! */
#sidebar-overlay {
display: block;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 995;

opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
visibility: hidden;
}

#sidebar-overlay.active {
opacity: 1;
pointer-events: all;
visibility: visible;
}
/* --------------------------------------------------------------------------------------------------------- */




/* --------------------------------------------------------------------------------------------------------- */
/* Script to Open Close sidebar when clicking on sidebar Open Button it (on mobile/tablet only) */
.sidebar-open-button {
    display: none;
}

@media (max-width: 768px) {
    .sidebar-open-button {
        position: relative;
        display: block;
        width: 100%;
        margin: 1rem auto;
        padding: 0.2rem 1rem;
        font-size: 0.95rem;
        font-weight: 600;
        text-align: center;
        color: black;
        background: linear-gradient(135deg, 
            #fffafa, 
            #a0b0ff, 
            #e6ff74, 
            #51ff62, 
            #ffb3d9, 
            #ff6f61, 
            #c2ff89);
        background-size: 400% 400%;
        animation: diagonalBgShift 6s ease infinite;

        border: 2px solid transparent;
        border-radius: 0.75rem;
        background-origin: border-box;
        background-clip: padding-box, border-box;
        box-shadow: 0 0 8px #6f00ff, 0 0 16px #00ffe7, 0 0 24px #ff00c8;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        z-index: 1;
    }

    .sidebar-open-button:hover {
        transform: scale(1.05);
        box-shadow: 0 0 12px #ff00c8, 0 0 24px #00ccff, 0 0 36px #6f00ff;
    }
}

@keyframes diagonalBgShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* --------------------------------------------------------------------------------------------------------- */