/* Sort styling ------------------------------------------ */

/* Sort dropdown */
.sort-dropdown {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 10px 0;
    width: 200px;
    font-family: var(--main-font);
}

.sort-dropdown .picker_close {
    margin-bottom: 10px;
    color: #333;
    font-size: 20px;
    cursor: pointer;
}

.sort-dropdown .sort-options {
    text-align: left;
    margin-top: 10px;
}

.sort-dropdown .dropdown-item:hover {
    color: #007bff;
}

.sort-dropdown.open .sort-options {
    display: block;
}

/* Sort button */
#sort-button {
    margin-left: 1rem;
    border: 1px solid #333;
    color: var(--text-color); /* Match text color */
    font-family: var(--main-font); /* Use main font */
}

#sort-button:hover {
    background-color: var(--sidebar-hover-color);
    color: var(--text-color);
}

/* sorting options */
#sort-options {
    padding: 0.8rem;
}

#sort-options ul {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

#sort-options ul li a {
    color: var(--text-color);
    text-decoration: none; /* Remove underline from links */
    font-family: var(--main-font);
}

#sort-options ul li a:hover {
    background-color: var(--sidebar-hover-color); /* Highlight background on hover */
    color: var(--text-color); /* Adjust text color on hover */
}

/* Filter sidebar and products ------------------------------- */

#filters-button {
    margin-left: 1rem;
    border: 1px solid #333;
    color: var(--text-color); /* Match text color */
    font-family: var(--main-font); /* Use main font */
}

#filters-button:hover {
    background-color: var(--sidebar-hover-color);
    color: var(--text-color);
}

#filter-container {
    color: var(--text-color);
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 1rem;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile devices */
    
    flex-wrap: nowrap; /* Prevent wrapping */
    width: 100%; /* Full width */
    transition: all 0.3s ease; /* Smooth transition for resizing */
}

/* Default filter sidebar styles */
#filter-sidebar {
    color: var(--text-color);
    background-color: #fff; /* Sidebar background */
    font-family: var(--main-font);
    border: 1px solid #ddd;
    
    padding: 1rem;
    border-radius: 0.5rem;
    margin-right: 0.8rem; 
    height: 100%;

    /* flex: 0 0 250px; */
    transition: all 0.3s ease; /* Smooth transition for sliding effect */
    z-index: 1000; /* Ensure it appears above other elements */
    
    /* Initially hidden off-screen */
    transform: translateX(-100%);
    opacity: 0;
    position: absolute;
}

#filter-sidebar.open {
    transform: translateX(0); /* Slide in when open */
    opacity: 1;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    flex-basis: 250px; /* Set the width when open */
    position: relative;
}

#filter-sidebar.closed ~ #filter-content {
    padding-left: 0; /* Remove padding when hidden */
}

#filter-content {
    background-color: transparent !important;
    
    flex: 1;
    padding: 0rem;
    padding-left: 0.5rem;
    border-radius: 0.5rem;
    /* border: 1px solid #ddd; */
    /* box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(145deg, #ffffff, #f3f0f0); */

    transition: margin-left 0.3s ease, width 0.3s ease; /* Smooth transition for resizing */
    margin-left: 0; /* Default margin when the sidebar is closed */
}



/* Mobile specific Full-screen popup mode */
@media (max-width: 768px) {
    #filter-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        z-index: 1050; /* Ensure it appears above other elements */
        transform: translateY(100%); /* Initially hidden off-screen */
        overflow-y: auto; /* Allow scrolling for long content */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transition: transform 0.3s ease; /* Smooth transition for sliding effect */
    }

    #filter-sidebar.open {
        position: fixed;
        transform: translateY(0); /* Slide in when open */
    }

    /* When the sidebar is open, center the "Hide Filters" button */
    body.sidebar-open #filters-button {
        position: fixed;
        top: 20px;
        left: 50%;
        z-index: 1100; /* Ensure it appears above the sidebar */
    }

    /* Remove vertical scrolling when the filter sidebar is open */
    body.no-scroll {
        overflow: hidden; /* Disable scrolling */
    }
    
}