/* --- Navbar Container --- */
.navbar {
  display: flex;
  /* Items ko horizontal arrange karein */
  /* justify-content: space-between; /* OLD: Logo aur links ko edges par dhakel raha tha */
  justify-content: flex-start;
  /* NEW: Items ko left se start karein */
  align-items: center;
  /* Items ko vertically center karein */
  background-color: #fff;
  /* White background */
  padding: 15px 30px;
  /* Example padding - aap adjust kar sakte hain */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Halka shadow */
  width: 100%;
  position: relative;
  /* z-index ke liye zaruri */
  z-index: 1000;
  /* Ensure navbar is above other content */
  box-sizing: border-box;
  /* Ensure padding is included in the element's total width */
}

/* --- Navbar Brand (Logo + Text) --- */
.navbar-brand {
  display: flex;
  /* Logo aur text ko horizontal align karein */
  align-items: center;
  /* Vertically align karein */
  /* Optional: Prevent brand from shrinking */
  flex-shrink: 0;
}

.navbar-brand .brand-link {
  text-decoration: none;
  /* Underline hatayein */
  display: flex;
  align-items: center;
}

.navbar-brand .logo {
  height: 30px;
  /* Example height */
  margin-right: 8px;
  /* Logo aur text ke beech space */
}

.navbar-brand .brand-text {
  font-size: 1.5em;
  /* Font size */
  font-weight: bold;
  color: #e20074;
  /* Foodpanda pink color (approx) */
}

.brand-link img {
  height: 34px;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* --- Navbar Links List (Desktop) --- */
.navbar-links {
  list-style: none;
  /* Bullet points hatayein */
  margin: 0;
  padding: 0;
  display: flex;
  /* Desktop par links horizontal show karein */
  align-items: center;
  margin-left: auto;
  /* NEW: Yeh links ko right side mein dhakel dega, left mein saara available space le lega */
  /* Optional: Allow links container to wrap if necessary (generally not desired for desktop) */
  /* flex-wrap: wrap; */
}

.navbar-links li {
  /* Margin ko adjust kar sakte hain */
  margin-left: 20px;
  /* Ya aapki preference ke mutabik */
  /* Optional: Prevent individual link items from shrinking too much */
  flex-shrink: 0;
}

.navbar-links li:first-child {
  margin-left: 0;
  /* Pehle link ke left mein space na ho */
}

/* Individual Navbar Links ki styling */
.navbar-links a {
  text-decoration: none;
  /* Underline hatayein */
  color: #333;
  /* Links ka color (dark grey) */
  font-size: 1em;
  font-weight: normal;
  transition: color 0.3s ease;
  /* Hover par color change ka smooth transition */
  padding: 18px;
}

.navbar-links a:hover {
  color: #e20074;
  /* Hover par pink color */
}

/* --- Hamburger Icon --- */
.hamburger-icon {
  font-size: 28px;
  /* Hamburger icon ka size */
  cursor: pointer;
  color: #333;
  /* Icon ka color */
  display: none;
  /* By default desktop par hide rakhein */
  z-index: 1100;
  /* Navbar ke upar rahe */
}

/* --- Mobile Menu Styling --- */
.mobile-menu {
  position: fixed;
  /* Screen ke relative fixed rahe */
  top: 0;
  left: -300px;
  /* Shuru mein screen ke bahar (left mein) rakhein */
  width: 300px;
  /* Mobile menu ki चौड़ाई (width) - aap adjust kar sakte hain */
  height: 100%;
  /* Screen ki poori height le */
  background-color: #fff;
  /* White background */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  /* Right side mein shadow */
  transition: left 0.3s ease;
  /* Slide-in hone ka smooth transition */
  z-index: 1050;
  /* Content ke upar, overlay ke neeche rahe */
  overflow-y: auto;
  /* Agar content zyada ho to scrollbar dikhaye */
  padding-top: 15px;
  /* Top se thodi padding */
  box-sizing: border-box;
  /* Include padding in width/height */
}

/* JavaScript se jab 'open' class add hogi to menu screen par aa jayega */
.mobile-menu.open {
  left: 0;
  /* Screen par slide in karein */
}

/* --- Mobile Menu Header --- */
.mobile-menu-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  /* Bottom border */
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  /* Items ko vertically stack karein */
  align-items: flex-start;
  /* Items ko left align karein */
  position: relative;
  /* Close button positioning ke liye */
}

/* Close button ki styling */
.mobile-menu-header .close-icon {
  position: absolute;
  top: 15px;
  /* Adjust position */
  right: 15px;
  /* Adjust position */
  font-size: 28px;
  /* Size */
  cursor: pointer;
  color: #888;
  /* Color */
  line-height: 1;
  /* Vertical alignment */
}

/* User info styling (icon + text) */
.mobile-menu-header .user-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

/* User icon styling */
.mobile-menu-header .user-icon {
  font-size: 28px;
  margin-right: 12px;
  color: #e20074;
  /* Pink color */
}

/* Greeting text styling */
.mobile-menu-header .greeting {
  font-size: 1.1em;
  color: #333;
  font-weight: bold;
}

/* Login button styling */
.mobile-menu-header .login-button {
  background-color: rgb(255, 32, 43);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px;
  /* Foodpanda pink */
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease;
  width: 100%;
  /* Full width */
  text-align: center;
}

.mobile-menu-header .login-button:hover {
  background-color: #c00060;
  /* Hover par darker pink */
}

/* --- Mobile Menu Links --- */
.mobile-menu-links {
  list-style: none;
  margin: 0;
  padding: 0 0 20px 0;
  /* Bottom padding */
}

.mobile-menu-links li {
  border-bottom: 1px solid #eee;
  /* Main links ke beech border */
}

.mobile-menu-links li:last-child {
  border-bottom: none;
  /* Last link ke neeche border nahi */
}

.mobile-menu-links li a {
  display: flex;
  /* Icon aur text ko align karein */
  align-items: center;
  /* Vertically align karein */
  padding: 14px 20px;
  /* Padding */
  text-decoration: none;
  color: #333;
  /* Text color */
  font-size: 1em;
  transition: background-color 0.2s ease;
}

.mobile-menu-links li a:hover {
  background-color: #f8f8f8;
  /* Hover par light background */
}

/* Icons ke liye styling */
.mobile-menu-links .icon {
  font-size: 1.3em;
  /* Icon size */
  margin-right: 15px;
  /* Icon aur text ke beech space */
  color: rgb(255, 32, 43);
;
  /* Pink color (adjust if needed) */
  width: 25px;
  /* Icons ko align karne ke liye fixed width */
  text-align: center;
  /* If using icon fonts, adjust line-height/vertical-align */
}

/* --- Submenu Styling --- */
/* Sirf un links ko target karein jo directly li.has-submenu ke andar hain */
.mobile-menu-links .has-submenu > a {
  justify-content: space-between;
  /* Text/icon aur arrow ke beech space dein */
}

/* Dropdown arrow ki styling */
.mobile-menu-links .has-submenu .dropdown-arrow {
  font-size: 0.8em;
  transition: transform 0.3s ease;
  /* Rotate hone ka smooth transition */
}

/* Jab parent li mein 'open' class ho to arrow ko rotate karein */
.mobile-menu-links .has-submenu.open > a .dropdown-arrow {
  transform: rotate(180deg);
  /* 180 degree rotate karein */
}

/* Submenu list ki styling */
.mobile-menu-links .submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  /* Submenu ke liye thoda alag background */
  /* Shuru mein hide rakhein aur smooth transition ke liye max-height use karein */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  /* Expand/collapse hone ka smooth transition */
}

/* Jab parent li mein 'open' class ho to submenu ko dikhayein */
.mobile-menu-links .has-submenu.open .submenu {
  max-height: 500px;
  /* Ek value jo content se badi ho transition ke liye */
}

/* Submenu items ke liye styling */
.mobile-menu-links .submenu li {
  border-bottom: none;
  /* Submenu items ke neeche border nahi */
}

.mobile-menu-links .submenu li a {
  padding: 12px 20px 12px 55px;
  /* Submenu links ko indent karein */
  font-size: 0.95em;
  /* Thoda chhota font size */
  color: #555;
  /* Thoda lighter color */
}

.mobile-menu-links .submenu li a:hover {
  background-color: #eee;
  /* Hover par light grey background */
}

/* --- Overlay Styling --- */
.mobile-menu-overlay {
  position: fixed;
  /* Poore viewport ko cover kare */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* Semi-transparent black color */
  z-index: 1020;
  /* Menu ke neeche, content ke upar rahe */
  display: none;
  /* Shuru mein hide rakhein */
  transition: opacity 0.3s ease;
  /* Fade-in/out ka smooth transition */
  opacity: 0;
  /* Shuru mein transparent */
}

/* JavaScript se jab 'visible' class add hogi to overlay dikh jayega aur fade in hoga */
.mobile-menu-overlay.visible {
  display: block;
  /* Dikha dein */
  opacity: 1;
  /* Fully visible karein */
}

/* style.css */

/* --- Navbar Container --- */
.navbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
  padding: 20px 9%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
  position: fixed;
  /* Navbar ko screen par fixed kar dein */
  top: 0;
  /* Screen ke top se shuru karein */
  left: 0;
  /* Screen ke left se shuru karein */
  z-index: 1000;
  box-sizing: border-box;
  transition: top 0.3s ease;
  /* 'top' property mein smooth animation add karein */
}

/* CSS class to hide the navbar */
.navbar-hidden {
  /* Navbar ki height ke barabar usko upar ki taraf move kar dein */
  /* Aapko yeh value adjust karni pad sakti hai agar aapki navbar height alag hai */
  top: -70px;
  /* Example: Assuming navbar height is around 70px */
}

/* Add padding to the main content area to prevent it from being hidden under the fixed navbar */
.page-content {
  padding: 20px;
  background-color: #f8f8f8;
  min-height: 150vh;
  transition: margin-left 0.3s ease;
  /* Yahan padding-top dein, jo navbar ki height se thoda zyada ho */
  padding-top: 80px;
  /* Example: Adjust based on your navbar's actual height */
}

/* --- Media Query for Mobile Devices --- */
/* Jab screen width 768px ya usse kam ho */
@media (max-width: 768px) {
  .navbar-links {
    display: none;
    /* Desktop links ko mobile par hide karein */
    margin-left: 0;
    /* Ensure margin-left: auto from desktop doesn't affect mobile */
  }

  .hamburger-icon {
    display: block;
    /* Hamburger icon ko mobile par dikhayein */
    margin-left: auto;
    /* NEW: Hamburger icon ko right side mein dhakel dega */
    font-size: 28px;
    /* Ensure consistent icon size */
    cursor: pointer;
    color: #333;
    z-index: 1100;
  }

  /* Optional: Mobile par navbar padding adjust karein */
  .navbar {
    padding: 14px 20px;
    /* Navbar par justify-content: flex-start; hi rahega */

  }

  /* Optional: Mobile par brand text size adjust karein */
  .navbar-brand .brand-text {
    font-size: 1.4em;
  }

  /* Ensure the brand doesn't take up unnecessary space */
  .navbar-brand {
    flex-shrink: 0;
  }
}