/*
  OrbitMap top-layer dropdown V3.
  Uses browser top layer through popover where supported.
  Purpose: escape navbar/page/container clipping.
  Does not touch hamburger.
*/

/* Remove visual effects from previous OrbitMap attempts */
.kx-orbitmap-dd-panel,
#kx-orbitmap-body-dropdown-v1,
#kx-orbitmap-body-escape-v2,
#kx-simple-orbitmap-panel-v1 {
  display: none !important;
}

.kx-orbitmap-dd-trigger::after,
.kx-orbitmap-body-trigger-v1::after,
.kx-orbitmap-body-escape-trigger-v2::after,
.kx-simple-orbitmap-trigger-v1::after {
  content: "" !important;
  display: none !important;
}

/* One canonical chevron only */
.kx-orbitmap-toplayer-trigger-v3::after {
  content: "⌄";
  display: inline-block;
  margin-left: 6px;
  font-size: .8em;
  opacity: .82;
  transform: translateY(-1px);
}

/* Top-layer popover panel */
#kx-orbitmap-toplayer-v3 {
  position: fixed !important;
  inset: auto !important;
  width: auto !important;
  min-width: 270px;
  max-width: min(380px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,198,90,.18), transparent 36%),
    rgba(2,6,23,.992);
  color: #fff7ed;
  box-shadow: 0 34px 110px rgba(0,0,0,.65), 0 0 0 1px rgba(255,198,90,.16);
  backdrop-filter: blur(18px);
  z-index: 2147483647 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}

/* Popover top-layer open state */
#kx-orbitmap-toplayer-v3:popover-open,
#kx-orbitmap-toplayer-v3.kx-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

#kx-orbitmap-toplayer-v3 a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #fff7ed !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

#kx-orbitmap-toplayer-v3 a:hover,
#kx-orbitmap-toplayer-v3 a:focus {
  background: rgba(255,198,90,.14);
  color: #ffc65a !important;
}

#kx-orbitmap-toplayer-v3 a::after {
  content: "›";
  color: #ffc65a;
  font-size: 18px;
}

/* Keep desktop-only for now. Mobile hamburger remains untouched. */
@media (max-width: 920px) {
  #kx-orbitmap-toplayer-v3 {
    display: none !important;
  }
}