:root {
  --profile-color: #F5F5F5;
}

  * { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif; }
  body {
    background: #f9f9f9; 
    color: #333; 
    user-select: none; /* Standard property */
    -webkit-user-select: none; /* For WebKit browsers (Chrome, Safari) */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */
  }
  .allow-select {
    user-select: text; /* Standard property */
    -webkit-user-select: text; /* For WebKit browsers (Chrome, Safari) */
    -moz-user-select: text; /* For Firefox */
    -ms-user-select: text; /* For older versions of Internet Explorer */
  }

  /* Navbar */
  .hide {
    display: none;
  }

  .navbar {
    position: sticky; top: 0; z-index: 1000; max-height: 60px; height:60px; transition: all 0.3s ease;
  }
  nav {
    transition: all 0.3s ease;
    align-items: center;
    justify-content: space-between; 
    display: flex; height: 100%;
    padding: 0rem 1rem; background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    position: sticky; top: 0; z-index: 1000;
  }

  main {
    padding: 15px;
  }


  .is_anonymous {}
  .not_anonymous { display: none; }
  .is_signedIn {}
  .not_signedIn { display: none; }







  ._global_nav-left { display: flex; align-items: center; gap: 1rem; transition: all 0.3s ease; }
  ._global_logo { font-weight: bold; color: #ff8c00; font-size: 1.4rem; padding: 5px; }
  nav ul { display: flex; list-style: none;  transition: all 0.3s ease;  align-items: center; }
  nav ul li { border-radius: 10px; padding: 8px; padding-left: 0.8rem; padding-right: 0.8rem; transition: all 0.3s ease; }
  nav ul li:hover { background:#F6F6F6 }
  nav ul li a { text-wrap-mode: nowrap; text-decoration: none; color: #333; font-weight: 500; }

  /* Hamburger */
  .hamburger { display: flex; flex-direction: column; cursor: pointer; gap: 5px; padding: 10px; transition: all 0.3s ease; border-radius: 10px; }
  .hamburger:hover { background: #f5f5f5; }
  .hamburger span { width: 22px; height: 3px; background: #333; border-radius: 2px; }

  /* Sidebar */
  .sidebar {
    position: fixed; top: 0; left: -250px; width: 250px; height: 100vh;
    background: #fff; box-shadow: 2px 0 6px rgba(0,0,0,0.1);
    padding: 2rem 1rem; transition: left 0.3s ease; z-index: 1100;
  }
  .sidebar.open { left: 0; }
  .sidebar ul { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
  .sidebar ul li a { text-decoration: none; color: #333; font-weight: 500; }

  /* Overlay */
  .overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease; z-index: 1050;
  }
  .overlay.show { opacity: 1; visibility: visible; }

  /* Search button */
  .search-wrapper {
    position: relative; display: flex; align-items: center; transition: all 0.3s ease; justify-self: right; justify-content: end;
  }
  .search-input {
    width: 0; opacity: 0;
    padding: 0.5rem; border: 1px solid #ccc; border-radius: 20px;
    outline: none; transition: width 0.3s ease, opacity 0.3s ease;
    font-size: 1rem;
  }
  .search-wrapper.active .search-input {
    width: 100%; opacity: 1; margin-right: 0.5rem;
  }
  .search-btn {
    background: none; border: none; cursor: pointer; font-size: 1.2rem;
    color: #333;
  }

  /* Hero */
  .hero {
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    color: #fff; text-align: center; padding: 6rem 2rem;
  }
  .hero h1 { font-size: 3rem; margin-bottom: 1rem; }
  .hero h1 span { color: #ff8c00; }
  .hero p { font-size: 1.1rem; margin-bottom: 2rem; }

/* Right side container */
.nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
}


/* Profile button */
.profile-btn {
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dropdown menu */
.profile-menu {
  position: absolute;
  top: 60px;
  right: 15px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  display: none;
  z-index: 1000;
  min-width: 260px;
}

.profile-menu.show {
  padding: 12px;
  display: block;
}



    .profile-header {
      display: flex;
      padding: 12px;
      border-radius: 8px;
      background: var(--profile-color);;
      align-items: center;
      margin-bottom: 16px;
    }

    .profile-avatar {
      background: #FFF;
      color: white;
      font-size: 28px;
      font-weight: bold;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }

    .profile-info {
      flex-grow: 1;
    }

    .profile-info h2 {
      margin: 0;
      font-size: 16px;
    }

    .profile-info p {
      margin: 2px 0;
      font-size: 13px;
      color: #aaa;
    }

    .profile-wallet {
      background: var(--profile-color);;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 12px;
    }

    .profile-wallet h3 {
      margin: 0;
      font-size: 14px;
      color: #000;
    }

    .profile-money {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
      color: #777;
    }

    .profile-money span {
      font-size: 18px;
      // font-weight: bold;
    }







.profile-menu ul {
  display: inline;
  list-style: none;
  padding: 10px 15px;
  margin: 0;
  padding: 0;
}

.profile-menu ul li a {
  display: block;
  text-decoration: none;
  color: #333;
}

.profile-menu ul li a:hover {
  background: #f5f5f5;
}

  @media(max-width:840px) {
    nav.search-active ul { display: none; } 
  }

  /* Responsive */
  @media(max-width:768px){
    .search-wrapper {flex: 1;}
    nav ul { display: none; }
    .hero h1 { font-size: 2rem; }


  /* When search is active → hide other nav elements */
  nav.search-active ._global_nav-left,
  nav.search-active .profile-btn {
    display: none;
    width: 0px;
  }

  nav.search-active .nav-right {
    width:100%;
  }

  nav.search-active .search-wrapper {
    flex: 1;
    justify-content: center;
  }

  nav.search-active .search-wrapper.active .search-input {
    width: 100%;
    opacity: 1;
  }





  }