#fm-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  background: rgba(0, 0, 0, 0.15);
  align-items: flex-start;
  justify-content: center;
  padding-top: 76px;
}

#fm-search-overlay.fm-open {
  display: flex;
}

/*
 * Theming reuses theme.css's --fm-* custom properties rather than a second,
 * parallel light/dark color system — this widget is always loaded alongside
 * theme.css, so its variables (and their existing dark-mode activation via
 * `@media (prefers-color-scheme: dark)` + the `.light`/`.dark` manual-toggle
 * classes on <html>) are already in scope. A couple of colors below (the
 * `mark` highlight, the error red) are widget-specific accents with no
 * matching theme variable, so they get their own light/dark pair guarded
 * the same way theme.css guards its own variables.
 */
#fm-search-panel {
  width: 100%;
  max-width: 620px;
  margin: 0 16px;
  background: var(--fm-bg);
  color: var(--fm-text);
  border: 1px solid var(--fm-border);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  /* 4px inset so the input row sits as its own box INSIDE the panel body —
     ported exactly from the admin app's search modal (p-1 outer padding
     around its own rounded-xl bordered input box, GlobalSearchModal.tsx). */
  padding: 4px;
}

/* Matches GlobalSearchModal.tsx's inner box exactly: rounded-xl (12px) =
   panel's 16px radius minus this 4px inset, so the two nest concentrically;
   border + a background distinct from the panel's own (var(--fm-bg-soft),
   this file's analog to the admin app's --bg-base vs --bg-surface). */
#fm-search-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--fm-border);
  border-radius: 12px;
  background: var(--fm-bg-soft);
}

#fm-search-icon {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--fm-text-soft);
}

#fm-search-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  padding: 0;
  font-size: 14px;
  background: transparent;
  color: inherit;
}

#fm-search-results {
  max-height: 50vh;
  overflow-y: auto;
  padding: 8px;
}

/* Empty on open (and whenever the query is cleared) — this element is
   always present in the DOM (built once in buildOverlay()), unlike the
   admin app's version which simply doesn't render its results container
   until there's a query. Collapsing padding to 0 when empty is what stops
   that always-present 8px box from showing as dead space below the input. */
#fm-search-results:empty {
  padding: 0;
}

.fm-search-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.fm-search-result:hover,
.fm-search-result.fm-active {
  background: rgba(234, 88, 12, 0.1);
}

.fm-search-result-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--fm-text-soft);
}

.fm-search-result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fm-search-result-title {
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}

.fm-search-result-title mark,
.fm-search-result-breadcrumb mark {
  /* Reset the site-wide `mark { padding, border-radius, font-weight }`
     (theme.css, used for in-content "risk"/"ok" callouts) — left unset here
     it pads/rounds the matched substring like a pill, visually shoving the
     next letter away (e.g. "Coupons" reads as "Coupon" + gap + "s"), unlike
     Mintlify's plain color-only match highlight. */
  background: transparent;
  color: #EA580C;
  padding: 0;
  border-radius: 0;
  font-weight: inherit;
}

.fm-search-result-breadcrumb {
  font-size: 12px;
  color: var(--fm-text-soft);
}

.fm-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  text-align: center;
  font-size: 13px;
  color: var(--fm-text-soft);
}

.fm-search-empty-icon {
  width: 22px;
  height: 22px;
  color: var(--fm-text-soft);
}

.fm-search-error {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: #dc2626;
}

/* Hidden until a query is typed (toggled via .fm-visible) — only the input
   shows on open, matching the admin app's search modal. */
#fm-search-footer {
  display: none;
  justify-content: flex-end;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--fm-border);
  font-size: 11px;
  color: var(--fm-text-soft);
}

#fm-search-footer.fm-visible {
  display: flex;
}

.fm-search-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fm-search-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--fm-border);
  font-family: inherit;
  font-size: 10px;
  font-style: normal;
}

@media (prefers-color-scheme: dark) {
  html:not(.light) .fm-search-result-title mark,
  html:not(.light) .fm-search-result-breadcrumb mark { color: #F97316; }
  html:not(.light) .fm-search-error { color: #f87171; }
}

html.dark .fm-search-result-title mark,
html.dark .fm-search-result-breadcrumb mark { color: #F97316; }
html.dark .fm-search-error { color: #f87171; }