/* ============================
   BMXC Search Trigger + Overlay
   Fully scoped: bmxc-search-*
   ============================ */

:root{
  --bmxc-accent:#07a1f2;
  --bmxc-header:#343a40;

  --bmxc-bg:#f9f9f9;
  --bmxc-panel:#ffffff;
  --bmxc-text:#121212;
  --bmxc-muted:#5a5a5a;
  --bmxc-line: rgba(0,0,0,.08);
  --bmxc-shadow: 0 10px 30px rgba(0,0,0,.10);

  /* header input/pill */
  --bmxc-hInputBg: rgba(255,255,255,.10);
  --bmxc-hInputBgHover: rgba(255,255,255,.14);
  --bmxc-hBorder: rgba(255,255,255,.20);
  --bmxc-hText: rgba(255,255,255,.92);
  --bmxc-hMuted: rgba(255,255,255,.62);

  --bmxc-hPillBg: rgba(255,255,255,.12);
  --bmxc-hPillHover: rgba(255,255,255,.18);
}

/* Optional: if you want a full-width dark strip behind the searchbar */
.bmxc-searchbar-wrap{
  background: var(--bmxc-header);
}

/* ---- Searchbar (inline in header/nav) ---- */
.bmxc-searchbar{
  display:flex;
  align-items:stretch;
  gap:10px;

  /* FULL WIDTH of the content container */
  width: 100%;
  max-width: 100%;
}

.bmxc-searchbar__input{
  flex: 1 1 auto;
  height: 44px;
  width: 100%;
  border-radius: 12px;

  border: 1px solid transparent;
  background: var(--bmxc-hInputBg);
  padding: 0 12px;
  outline: none;

  color: var(--bmxc-hText);
}

.bmxc-searchbar__input::placeholder{
  color: var(--bmxc-hMuted);
}

.bmxc-searchbar__input:hover{
  background: var(--bmxc-hInputBgHover);
}

.bmxc-searchbar__input:focus{
  border-color: rgba(7,161,242,.75);
  box-shadow: 0 0 0 3px rgba(7,161,242,.20);
}

.bmxc-searchbar__pill{
  flex: 0 0 auto;
  height: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0 14px;
  border-radius: 12px;

  background: var(--bmxc-hPillBg);
  color: var(--bmxc-hText);
  text-decoration:none;
  white-space:nowrap;
  user-select:none;
}

.bmxc-searchbar__pill:hover{
  background: var(--bmxc-hPillHover);
  text-decoration:none;
  color: var(--bmxc-hText);
}

/* ---- Overlay wrapper ---- */
.bmxc-search-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  display: none;
  z-index: 9999;
}

.bmxc-search-overlay.isOpen{ display:block; }

.bmxc-search-overlay__panel{
  position: absolute;
  left: 50%;
  top: 7vh;
  transform: translateX(-50%);
  width: min(980px, calc(100% - 24px));
  max-height: 86vh;
  background: var(--bmxc-panel);
  border-radius: 16px;
  box-shadow: var(--bmxc-shadow);
  overflow: hidden;
  border: 1px solid var(--bmxc-line);
}

/* Header row inside overlay */
.bmxc-search-overlay__head{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 12px;
  border-bottom: 1px solid var(--bmxc-line);
  background: #fff;
}

.bmxc-search-overlay__input{
  flex: 1 1 auto;
  height: 44px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(0,0,0,.03);
  padding: 0 12px;
  outline: none;
}

.bmxc-search-overlay__input:focus{
  border-color: rgba(7,161,242,.55);
  box-shadow: 0 0 0 3px rgba(7,161,242,.12);
}

.bmxc-search-overlay__close{
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 0;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.72);
  cursor:pointer;
}

.bmxc-search-overlay__close:hover{
  background: rgba(0,0,0,.09);
  color: rgba(0,0,0,.82);
}

/* Results area */
.bmxc-search-overlay__body{
  padding: 12px;
  overflow: auto;
  max-height: calc(86vh - 70px);
  background: var(--bmxc-bg);
}

.bmxc-search-overlay__meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color: var(--bmxc-muted);
  font-size: 13px;
  padding: 0 2px 10px;
}

.bmxc-search-overlay__empty{
  padding: 18px;
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.7);
  color: var(--bmxc-muted);
}