/* ------------ Topbar + global nav ------------ */

.topbar {
  height: var(--topbar-height);
  min-height: var(--topbar-height);  /* NEW: override Bulma navbar min-height */
  display: flex;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1.5rem;
  background: #060711;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7); /* NEW: match sidebar-header */

  /* Sticky + WebKit fallback */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
}

@media (max-width: 768px) {
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
}

/* Remove Bulma's white navbar background inside our topbar */
.topbar .navbar-menu {
  background: transparent;
  box-shadow: none;
}

.neon-topbar {
  box-shadow:
    /* same downward shadow as .sidebar-header */
    0 8px 16px rgba(0, 0, 0, 0.7),
    0 0 12px rgba(0, 234, 255, 0.25),
    0 0 24px rgba(255, 0, 204, 0.08);
}

.topbar .navbar-item {
  color: var(--text-main);
}

.neon-topbar-item {
  border-radius: 999px;
  padding-inline: 0.9rem;
  margin-inline: 0.2rem;
  transition: 0.2s;
}

.neon-topbar-item:hover {
  background: radial-gradient(circle at top, rgba(0, 234, 255, 0.25), transparent);
  /* box-shadow: 0 0 8px rgba(0, 234, 255, 0.35); */
}

/* ---------------------------------------
   SIDEBAR TOGGLE (burger + arrow)
   --------------------------------------- */

#sidebar-toggle {
  color: var(--text-main);
  background: transparent !important;
  padding: 0.4rem;
  margin-left: 0;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* Icon sizing / hover */

#sidebar-toggle i,
#sidebar-toggle {
  font-size: 1.6rem;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* Adjust arrow position only (not burger) */
#sidebar-toggle .ri-arrow-left-s-line {
  display: inline-block;
  transform: translate(0rem, 1px); /* right 0.4rem, down 1px */
}

/* Small nudge for burger to visually center */
#sidebar-toggle .ri-menu-line {
  margin-left: 0rem;
}

/* Hover for both arrow and burger */
#sidebar-toggle:hover {
  color: var(--neon-blue) !important;
  text-shadow:
    0 0 6px rgba(0, 234, 255, 0.5),
    0 0 14px rgba(0, 234, 255, 0.4);
}

/* No background on any state */
#sidebar-toggle:hover,
#sidebar-toggle:active,
#sidebar-toggle:focus {
  background: transparent !important;
}

/* Burger: slightly lighter hover */
body:not(.sidebar-opened) #sidebar-toggle:hover i {
  color: var(--neon-blue);
  text-shadow: 0 0 6px rgba(0, 234, 255, 0.4);
}

/* ------------ Flag / marketplace dropdown ------------ */

.neon-select select {
  background-color: #0b0f22;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  padding-right: 2rem;
  font-family: "Segoe UI Emoji", "Twemoji Mozilla", "Apple Color Emoji",
               "Noto Color Emoji", sans-serif !important;
}

.neon-select select:focus {
  border-color: #00eaff;
  box-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
}

.navbar-item .select select {
  min-width: 115px; /* Keeps flags readable */
}

/* Match right padding to left spacing */
.navbar-item.marketplace-item {
  padding-right: 1.75rem;
}

/* MARKETPLACE (FLAG DROPDOWN) — NEON, DARK, COMPACT */

.navbar-end .marketplace-item {
  padding-right: 2.4rem; /* tweak to taste */
}

/* Neon pill-style button */
#marketplace-button.neon-select {
  background-color: #090b1b;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-main);
  min-width: 150px;
  height: 36px;
  padding-inline: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.9rem;
  box-shadow:
    0 0 0 1px rgba(0, 234, 255, 0.35),
    0 0 16px rgba(0, 234, 255, 0.35);
}

#marketplace-button.neon-select:focus,
#marketplace-dropdown.is-active #marketplace-button.neon-select {
  border-color: var(--neon-blue);
  box-shadow:
    0 0 0 1px rgba(0, 234, 255, 0.9),
    0 0 24px rgba(0, 234, 255, 0.9);
}

#marketplace-button .dropdown-arrow i {
  opacity: 0.8;
}

/* Dropdown menu */

#marketplace-dropdown .dropdown-menu {
  right: 0;
  min-width: 185px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity 0.16s ease-out,
    transform 0.16s ease-out;
}

#marketplace-dropdown.is-active .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#marketplace-dropdown .dropdown-content {
  background-color: #050510;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);

  /* symmetric horizontal gap on both sides */
  padding: 0.3rem 0.45rem;
}

#marketplace-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;

  /* equal left/right padding inside the pill */
  padding: 0.55rem 0.85rem;

  /* no external margin – gap comes from container padding */
  margin: 0;
  border-radius: 0.6rem;

  color: var(--text-main);
  font-size: 0.95rem;
  background: transparent;
  transition: background 0.12s ease-out;
}

#marketplace-dropdown .dropdown-item .fi {
  border-radius: 4px;
  width: 20px;
  height: 14px;
}

#marketplace-dropdown .dropdown-item:hover {
  /* same hover colour as neon-menu-item */
  background: rgba(0, 234, 255, 0.12);
}

/* -----------------------------
   Topbar layout – mobile tweaks
   ----------------------------- */
@media screen and (max-width: 768px) {
  /* Make the right side of the topbar a single horizontal row */
  .topbar .navbar-menu {
    display: flex !important;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
  }

  .topbar .navbar-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .topbar .navbar-end .navbar-item {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Gap between "Share" and the marketplace pill */
  #topbar-share {
    margin-right: 0.5rem;
  }

  /* Remove big right padding on mobile so the pill isn't pushed in */
  .navbar-end .marketplace-item {
    padding-right: 0;
  }

  /* Compact marketplace pill on phones */
  #marketplace-button.neon-select {
    min-width: 130px;
    max-width: 55vw;
    padding-inline: 0.7rem;
    height: 34px;
    font-size: 0.78rem;
    gap: 0.4rem;
  }

  #marketplace-button .fi {
    margin-right: 0.3rem;
    width: 18px;
    height: 12px;
  }

  #marketplace-button .dropdown-arrow {
    margin-left: 0.3rem;
  }

  #marketplace-dropdown .dropdown-menu {
    min-width: 160px;
  }
}