/* Search popup dropdown - standalone styles for all pages */
.search-popup{
  position:absolute;
  top:100%;
  left:0;
  margin-top:8px;
  width:auto;
  min-width:420px;
  max-width:520px;
  background:var(--card-2, #0e1530);
  border:1px solid var(--border, #202a55);
  border-radius:14px;
  padding:8px;
  box-shadow:0 14px 32px rgba(0,0,0,.35);
  z-index:9999;
  max-height:calc(100vh - 80px);
  overflow-y:auto;
  overflow-x:hidden;
}

.search-popup[hidden]{
  display:none;
}

.search-popup__empty{
  padding:16px;
  text-align:center;
  color:var(--muted, #9fb0d0);
  font:600 13px/1.4 Poppins, sans-serif;
}

.search-popup__item{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  text-decoration:none !important;
  color:#e8eeff !important;
  transition:background .18s ease, border-color .18s ease;
  border:1px solid transparent;
  white-space:nowrap;
}

.search-popup__item:hover{
  background:rgba(110,231,231,.08);
  border-color:var(--border, #202a55);
  text-decoration:none !important;
}

.search-popup__item:focus{
  outline:2px solid var(--accent, #6ee7e7);
  outline-offset:2px;
  text-decoration:none !important;
}

.search-popup__item:visited{
  color:#e8eeff !important;
  text-decoration:none !important;
}

.search-popup__icon{
  width:16px;
  height:16px;
  border-radius:4px;
  border:1px solid var(--border, #202a55);
  background-image:linear-gradient(160deg, #0f1430 0%, #0b1020 100%);
  background-size:cover;
  background-position:center;
  flex:0 0 16px !important;
  display:grid;
  place-items:center;
}

.search-popup__icon--has-image{
  background-image:none;
  background-color:transparent;
}

.search-popup__icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:4px;
  display:block;
}

.search-popup__icon svg{
  width:12px;
  height:12px;
  fill:#cdd6ff;
  opacity:.9;
}

.search-popup__name{
  font:600 14px/1.3 Poppins, sans-serif;
  color:#e8eeff !important;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Mobile responsive */
@media (max-width: 480px){
  .search-popup{
    min-width: 280px;
    max-width: calc(100vw - 32px);
    left: -16px;
  }
}