/* Styles for cuisine bar and buttons */
      .cuisine-bar {
    display: none; /* Hide by default */
}

/* Show only on large screens */
@media (min-width: 768px) {
    .cuisine-bar {
        display: flex; /* Show on large screens */
        align-items: center;
        overflow-x: hidden;
        padding: 10px;
        white-space: nowrap;
        width: 100%;
    }
}
      

        


        .cuisine-button img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 50%;
        }
       .arrow {
    display: none; /* Hide by default */
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

/* Show arrows only on large screens */
@media (min-width: 768px) {
    .arrow {
        display: block; /* Show on large screens */
    }
}
		
		#restaurant-filter-cuisine {
            padding: 0;
            margin: 0;
            display: none; /* Initially hidden */
        }
		
		 .back-button {
            margin-bottom: 20px;
            padding: 10px 20px;
            background-color: black; /* Black background */
            color: white; /* White text color */
            border: none;
            border-radius: 5px; /* Rounded corners */
            cursor: pointer;
            font-weight: bold; /* Bold text */
            font-size: 16px; /* Font size */
        }
        .back-button:hover {
            background-color: #333; /* Darker on hover */
        }
		
	 /* Default styles for the button */
    #hamburger-icon {
        background: none;
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    /* Add left padding for large screens and tablets */
    @media (min-width: 768px) {
        #hamburger-icon span:first-child {
            padding-left: 40px; /* Add left padding to the hamburger icon */
        }
    }	
		
	#cuisine-hamburger-icon {
        background: none;
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    /* Add right margin for large screens and tablets */
    @media (min-width: 768px) {
        #cuisine-hamburger-icon span:last-child {
            margin-right: 40px; /* Add right margin to the hamburger icon */
        }
    }	
		
		
.sidebar {
    position: absolute; /* Use absolute positioning for overlay */
    top: 100%; /* Position it directly below the brown bar */
    left: 20; /* Align with the left of the brown bar */
    background-color: #f8f8f8; /* Sidebar background */
    padding: 15px; /* Padding for the sidebar */
    border-radius: 5px; /* Rounded corners */
    display: none; /* Initially hidden */
    width: 350px; /* Set a fixed width for desktop */
    max-width: 100%; /* Ensure it doesn’t overflow the screen */
    height: 800px; /* Max height for scrolling */
    overflow-y: auto; /* Enable vertical scrolling */
    z-index: 1000; /* Ensure it appears above other content */
	padding-left: 50px;
}

		.sidebar ul {
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.sidebar .category-item {
    margin-bottom: 10px; /* Adjust this value for vertical gap */
}
		
	/* Media query for mobile responsiveness */
@media (max-width: 600px) {
    .sidebar {
        width: 100%; /* Full width on small screens */
        left: 0; /* Align with the left edge */
		 max-height: 300px; /* Adjust max height for mobile */
		
    }
}	
		
		
/* Optional styles for the sidebar items */
.category-item {
    list-style: none;
}


 

   #restaurant-filter-cuisine .row {
        max-width: 100%; /* Adjust based on your layout */
    }

	#cuisine-dropdown {
    /* Existing styles */
    display: none; /* Initially hidden */
    background-color: #f8f8f8; /* Background color */
    padding: 15px; /* Padding for the dropdown */
    border-radius: 5px; /* Rounded corners */
    position: absolute; /* Positioning */
    right: 10px; /* Right alignment */
    z-index: 1000; /* Layering */
}

#cuisine-list {
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.cuisine-item {
    margin-bottom: 10px; /* Adjust this value for vertical spacing */
}	

   .cuisine-button {
            flex: 0 0 auto;
            margin: 0 15px;
            padding: 5px;
            cursor: pointer;
            border: none;
            background: none;
            display: flex;
            flex-direction: column;
            align-items: center;
        }