#searchButton {
    display: none; /* Initially hidden */
    padding: 5px;
    margin-left: 10px;
    background-color: yellow;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 5; /* Default margin */
}






        /* 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 */
	max-height: 150px; /* Adjust based on your item height */
    overflow-y: auto; /* Enable vertical scrolling */	
}

#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;
        }

/* Orange search bar
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
margin: 0;
}
.search-container {
display: flex;
align-items: center;
background-color: orange;
padding: 10px;
border-radius: 25px;
}
.dropdown {
appearance: none;
border: none;
background-color: white;
border-radius: 25px;
padding: 10px;
margin: 0 5px;
width: 150px;
transition: all 0.3s ease;
cursor: pointer;
}
.dropdown:focus {
outline: none;
box-shadow: 0 0 5px orange;
}

*/



   .red-bar {
            background-color: red;
            padding: 10px;
            display: flex;
            flex-direction: row; /* Row layout for both large and mobile screens */
            justify-content: space-between; /* Space out items */
            align-items: center; /* Center items vertically */
            flex-wrap: wrap; /* Allow wrapping on smaller screens */
        }

         #location {
    display: none; /* Initially hidden */
}
 
        .custom-dropdown {
            position: relative;
            display: inline-block;
        }
         .custom-dropdown,
        #location,
        #search {
            
           flex: 1; /* Allow each box to grow equally */
           max-width: 200px; /* Minimum width for input boxes */
           height: 46px; /* Set a fixed height */
		   border-radius: 8px; /* Rounded edges for the search input */
		   padding: 2px;
    
        }

 
.custom-dropdown,
#location {
    color: black; /* Text color for dropdown and location input */
	 font-weight: bold; /* Make placeholder text bold */
}
#search::placeholder {
    color: black; /* Set placeholder text color to black */
    font-weight: bold; /* Make placeholder text bold */
}


        .dropdown-toggle {
            padding: 10px;
            border: 1px solid #ccc;
            cursor: pointer;
            background-color: white;
			border-radius: 8px; /* Rounded edges for the dropdown toggle */
    border: 1px solid #ccc; /* Optional border for visibility */
        }

        .dropdown-menu {
            display: none;
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
            z-index: 1000;
            top: 50px;
            width: 100%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			border-radius: 8px; /* Rounded edges for the dropdown toggle */
    border: 1px solid #ccc; /* Optional border for visibility */
        }

        .dropdown-menu div {
            padding: 10px;
            cursor: pointer;
        }

        .dropdown-menu div:hover {
            background-color: #f1f1f1;
        }

   /* Hide the search input by default on mobile */
        #search {
            display: block; /* Visible on large screens */
        }




     /* Media query for mobile devices */
        @media (max-width: 768px) {
            .red-bar {
                flex-wrap: wrap; /* Keep items in a single row on mobile */
               /* gap: 10%; /* 10% gap between boxes */
            }

            #search {
                display: none; /* Hide search input on mobile */
            }
			
						
            .custom-dropdown,
              #location {
                flex: 1; /* Each takes 50% of the width */
                /*max-width: calc(50% - 1px); /* Adjust width to fit within screen */
               height:45px; /* Set a fixed height */
            }

            .custom-dropdown {
                margin-right: 5%; /* Add margin to create gap */
				height: 50px; /* Set a fixed height */
            }
			
			  
			 #searchButton {
             display: none; /* Hide the search button on mobile devices */
			
        }