.side-panel {
    display: block;
    transition: transform 0.3s ease-in-out;
    top: 120px;
    right: 20px;
    width: 300px;
    max-width:600px;
    height: calc(100% - 200px);
    background: #11100e;
    z-index: 1000;
    border-radius: 9px 9px 0px 0px;
    position: absolute;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #3f3d38;
    scroll-behavior: smooth;
}


.sort {
    position: fixed;
    width: 300px;
    max-width: 600px;
    height: 60px;
    flex-direction: column;
    right: 20px;
    bottom: 20px;
    border: 1px solid #3f3d38;
    border-radius:0px 0px 9px 9px;
    background-color: #11100e;
    z-index:1000;
    display: block;
}


.sort-bar {
    display: block;
    width: 300px;
    max-width: 600px;
    z-index:1000;
}


/* Make the side panel and content zone scrollable */
.side-panel, .contentZone {
    overflow-y: auto; /* Enable vertical scrolling */
}

/* Hide the scrollbar while allowing scrolling */
.side-panel::-webkit-scrollbar,
.contentZone::-webkit-scrollbar {
    width: none; /* Hide scrollbar width */
    background: transparent; /* Optional: Make the background fully transparent */
}

/* Firefox scrollbar hiding */
.side-panel, .contentZone {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer */
    scroll-behavior: smooth;
}

.sort-bar.show {
    display: block; /* Show the panel */
    transform: translateX(0); /* Slide in from the right */
}


/* Show the panel with a transform effect when the 'show' class is added */
sort-bar.show {
    display: block;
    transform: translateX(0);  /* Adjust according to how you want to animate */
}


/* Optionally hide buttons using 'hidden' class */
.hidden {
    display: none;
}
/* ✅ Show the side panel smoothly
.side-panel-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease-in-out;
} */