.docs-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 1rem 1rem;
  background: rgba(15, 15, 15, 0.5);
}

.docs-search-overlay.docs-search-open {
  display: flex;
}

.docs-search-panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 70vh;
  overflow: auto;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  padding: 0.5rem 1rem 1rem;
}

@media (prefers-color-scheme: dark) {
  .docs-search-panel {
    /* Pagefind UI themes itself via these custom properties rather than
       reading prefers-color-scheme, so it needs its own dark overrides. */
    --pagefind-ui-text: #f5f5f5;
    --pagefind-ui-background: #1c1c1e;
    --pagefind-ui-border: #333333;
    --pagefind-ui-tag: #333333;
    background: #1c1c1e;
    color: #f5f5f5;
  }
}

.docs-search-panel .pagefind-ui__search-input {
  border-radius: 999px;
}

.docs-search-panel .pagefind-ui__result-link {
  color: #e11d48;
}

.docs-search-panel .pagefind-ui__result-link:hover {
  color: #be123c;
}