@charset "UTF-8";
/* ==========================================================================
   css/navbar.css — Shared site navbar component (single source of truth)

   Source of truth: HomePage.html + css/style_homepage.css (navbar section).
   Every page that renders the standard navbar (see includes/navbar.template.html)
   loads this file AFTER its own page stylesheet so that all pages share exactly the
   same size, font, spacing, shadow, radius, icons and mobile behaviour as Home.

   Do not add page-specific overrides here. Do not use inline styles in the markup.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Anuphan:wght@100..700&display=swap");

/* --- Bar ------------------------------------------------------------------ */
.navbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 40px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  font-family: "Anuphan", sans-serif;
}

.navbar .nav-left a {
  display: block;
  line-height: 0;
}

.navbar .logo {
  height: 50px;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.navbar .logo:hover {
  transform: scale(1.05);
}

/* --- Center group: create trip + links pill ------------------------------- */
.navbar .nav-center-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.navbar .btn-create-trip {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 15px 25px;
  border-radius: 30px;
  text-decoration: none;
  color: #000;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.navbar .btn-create-trip:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-color: #fff;
}

.navbar .nav-links-container {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 40px;
  padding: 5px 10px;
  transition: all 0.3s ease;
}
.navbar .nav-links-container:hover,
.navbar .nav-links-container.active {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.navbar .nav-links-container ul {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.navbar .nav-links-container li {
  display: flex;
}
.navbar .nav-links-container a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 30px;
  color: #000;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}
.navbar .nav-links-container a:hover,
.navbar .nav-links-container a.active {
  background: rgba(0, 0, 0, 0.15);
  font-weight: 700;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* --- Right side: AR, Luna, account, hamburger ------------------------------ */
.navbar .nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.navbar .icon-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.navbar .icon-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  /* The source PNGs are white; Home renders them black on the glass circle. */
  filter: brightness(0);
  transition: transform 0.4s ease;
}
.navbar .icon-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.navbar .icon-btn:hover img {
  transform: rotate(10deg);
}
.navbar .icon-btn.active {
  background: rgba(255, 255, 255, 0.95);
}
.navbar .icon-btn:focus-visible,
.navbar .nav-links-container a:focus-visible,
.navbar .btn-create-trip:focus-visible,
.navbar .hamburger-menu:focus-visible {
  outline: 2px solid #f2b900;
  outline-offset: 2px;
}

/* --- AR button: black circle, yellow "AR" (same on every page) -------------
   Dedicated class; covers every link state so browser default link colours
   (blue / purple visited / underline) can never leak in.                      */
.navbar .nav-right .icon-btn.nav-ar-btn,
.navbar .nav-right .icon-btn.nav-ar-btn:link,
.navbar .nav-right .icon-btn.nav-ar-btn:visited {
  background: #080808;
  color: #f2b900;
  border: 1px solid #1f1f1f;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.navbar .nav-right .icon-btn.nav-ar-btn .nav-ar-btn__text {
  color: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s ease;
}
.navbar .nav-right .icon-btn.nav-ar-btn:hover,
.navbar .nav-right .icon-btn.nav-ar-btn:active {
  background: #1a1a1a;
  color: #ffd700;
  text-decoration: none;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 6px 16px rgba(242, 185, 0, 0.35);
}
.navbar .nav-right .icon-btn.nav-ar-btn:focus-visible {
  outline: 2px solid #f2b900;
  outline-offset: 2px;
  text-decoration: none;
}
/* aria-current="page" on the AR link is semantic only: the button keeps its normal look. */

/* --- Hamburger (mobile navigation only) ----------------------------------- */
.navbar .hamburger-menu {
  display: none;
}

/* --- Mobile menu overlay (navigation links only; account menu is separate) -- */
.mobile-menu-overlay {
  display: none;
}

@media (max-width: 900px) {
  .navbar {
    padding: 15px 20px;
    flex-wrap: wrap;
  }
  .navbar .nav-center-group {
    display: none;
  }
  .navbar .hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10005;
    position: relative;
    margin-left: 15px;
  }
  .navbar .hamburger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background: #000;
    border-radius: 4px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: left center;
    pointer-events: none;
  }
  .navbar .hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(2px, -2px);
  }
  .navbar .hamburger-menu.active span:nth-child(2) {
    opacity: 0;
    width: 0;
  }
  .navbar .hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(2px, 2px);
  }
  .navbar.dark-theme .hamburger-menu span {
    background: #fff;
  }

  .mobile-menu-overlay {
    position: fixed;
    top: -100vh;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 10010;
    transition: top 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    font-family: "Anuphan", sans-serif;
  }
  .mobile-menu-overlay.active {
    top: 0;
    pointer-events: all;
  }
  .mobile-menu-overlay .mobile-menu-content {
    padding: 20px;
    position: relative;
    width: 100%;
    max-width: 400px;
    text-align: center;
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.5s ease 0.3s;
  }
  .mobile-menu-overlay .mobile-menu-content .close-menu {
    position: fixed;
    top: 25px;
    right: 25px;
    font-size: 2.5rem;
    cursor: pointer;
    color: #333;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    border: none;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .mobile-menu-overlay .mobile-menu-content .close-menu:hover {
    background: #fff;
    color: #f0bb1f;
    transform: scale(1.1) rotate(90deg);
  }
  .mobile-menu-overlay .mobile-menu-content .btn-create-trip-mobile {
    background: #000;
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-block;
    margin-bottom: 40px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .mobile-menu-overlay .mobile-menu-content .btn-create-trip-mobile:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
  }
  .mobile-menu-overlay .mobile-menu-content ul {
    list-style: none;
    padding: 0;
  }
  .mobile-menu-overlay .mobile-menu-content ul li {
    margin-bottom: 30px;
  }
  .mobile-menu-overlay .mobile-menu-content ul li a {
    color: #333;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 600;
    display: block;
    letter-spacing: 1px;
    transition: color 0.3s ease, transform 0.3s ease;
  }
  .mobile-menu-overlay .mobile-menu-content ul li a:hover,
  .mobile-menu-overlay .mobile-menu-content ul li a.active {
    color: #f0bb1f;
    transform: scale(1.05);
  }
  .mobile-menu-overlay.active .mobile-menu-content {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Narrow phones: keep logo + AR + Luna + account + hamburger on ONE row
   (at 390px the Home layout wrapped the icons onto a second row). */
@media (max-width: 420px) {
  .navbar {
    padding: 12px 16px;
  }
  .navbar .logo {
    height: 42px;
  }
  .navbar .nav-right {
    gap: 8px;
  }
  .navbar .icon-btn {
    width: 40px;
    height: 40px;
  }
  .navbar .icon-btn img {
    width: 20px;
    height: 20px;
  }
  .navbar .hamburger-menu {
    margin-left: 6px;
    width: 28px;
  }
}

@media (min-width: 901px) {
  .navbar .hamburger-menu,
  .mobile-menu-overlay {
    display: none;
  }
}

/* --- Account menu (under the person icon). Separate from the mobile hamburger. --- */
.user-dropdown-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 240px;
  max-width: calc(100vw - 24px);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 3px;
  z-index: 10001;
  font-family: "Anuphan", sans-serif;
  box-sizing: border-box;
  transform-origin: top right;
}
.user-dropdown-menu.active {
  display: flex;
  animation: userDropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes userDropdownFadeIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
}
.user-dropdown-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.user-dropdown-header.admin .user-dropdown-avatar {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.user-dropdown-info { overflow: hidden; line-height: 1.3; }
.user-dropdown-name {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-dropdown-role {
  font-size: 11px;
  font-weight: 500;
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  margin-top: 3px;
}
.user-dropdown-role.admin-role { background: #eef2ff; color: #4f46e5; font-weight: 600; }
.user-dropdown-role.user-role { background: #f1f5f9; color: #475569; }
.user-dropdown-desc { font-size: 12px; color: #64748b; margin-top: 2px; }
.user-dropdown-status { font-size: 13px; color: #64748b; padding: 10px; text-align: center; }
.user-dropdown-status.error { color: #b91c1c; }
.user-dropdown-divider { height: 1px; background: #f1f5f9; margin: 4px 0; }
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  min-height: 40px;
  border-radius: 10px;
  text-decoration: none;
  color: #334155;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  box-sizing: border-box;
}
.user-dropdown-item svg { flex-shrink: 0; }
.user-dropdown-item:hover { background-color: #f8fafc; color: #0f172a; }
.user-dropdown-item:focus-visible { outline: 2px solid #f2b900; outline-offset: -2px; }
.user-dropdown-item.admin-entry { color: #4f46e5; background-color: #eef2ff; font-weight: 600; }
.user-dropdown-item.admin-entry:hover { background-color: #e0e7ff; color: #4338ca; }
.user-dropdown-item.primary-entry { background-color: #2563eb; color: #ffffff; font-weight: 600; justify-content: center; margin-top: 2px; }
.user-dropdown-item.primary-entry:hover { background-color: #1d4ed8; color: #ffffff; }
.user-dropdown-item.secondary-entry { justify-content: center; border: 1px solid #e2e8f0; margin-top: 2px; }
.user-dropdown-item.secondary-entry:hover { background-color: #f8fafc; }
.user-dropdown-item.logout-entry { color: #ef4444; }
.user-dropdown-item.logout-entry:hover { background-color: #fef2f2; color: #dc2626; }