/* ═══════════════════════════════════════════════════════════
   佰洛生物 — 全站搜索框组件（参考 CST 官网风格）
   极简矩形：白底 / 细边框 / 小圆角 / 右侧放大镜图标 / 输入后出现清空按钮
   用法：<input id="xxx" type="search"> + BiologiaSearch.enhance(input, opts)
   opts: { variant:'hero'|'page', onSubmit(value), onClear(value), clearable, icon }
   ═══════════════════════════════════════════════════════════ */

.bs-search {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #c9d2db;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(6, 67, 104, 0.10);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bs-search:hover { border-color: #9fb0bd; }
.bs-search:focus-within {
  border-color: var(--primary, #0a5c8a);
  box-shadow: 0 0 0 3px rgba(10, 92, 138, 0.12), 0 2px 6px rgba(6, 67, 104, 0.10);
}

/* 输入框本体：清掉各页面自带样式，统一由组件控制 */
.bs-search > input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 11px 4px 11px 14px !important;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text, #1a1a2e);
}
.bs-search > input::placeholder { color: #8a97a3; }
/* 隐藏浏览器自带的清除按钮，统一用组件的 × */
.bs-search > input::-webkit-search-cancel-button,
.bs-search > input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* 放大镜（提交）按钮 */
.bs-search__icon {
  border: 0;
  background: transparent;
  color: #5b6b79;
  width: 42px;
  height: 40px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.bs-search__icon svg { width: 19px; height: 19px; }
.bs-search__icon:hover { color: var(--primary, #0a5c8a); }

/* 清空按钮：有输入时出现 */
.bs-search__clear {
  border: 0;
  background: transparent;
  color: #8a97a3;
  width: 26px;
  height: 26px;
  margin-right: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}
.bs-search__clear svg { width: 14px; height: 14px; }
.bs-search__clear:hover { color: #46545f; background: #eef2f6; }
.bs-search__clear[hidden] { display: none; }

/* 变体：首页顶部搜索条（CST 风格：独立灰底条内，右侧放大镜，无骑跨负边距） */
.bs-search--hero {
  width: 520px;
  max-width: 100%;
  margin: 0;
  background: #fff;
}
.bs-search--hero > input { padding: 13px 4px 13px 16px !important; font-size: 15px; }
.bs-search--hero .bs-search__icon { width: 48px; height: 44px; }
.bs-search--hero .bs-search__icon svg { width: 20px; height: 20px; }

/* 变体：搜索结果页（大号整宽） */
.bs-search--page { width: 100%; }
.bs-search--page > input { padding: 14px 4px 14px 18px !important; font-size: 15.5px; }
.bs-search--page .bs-search__icon { width: 52px; height: 48px; }

/* 降级样式：组件脚本未加载 / 未启用时，输入框仍以相近外观独立显示
   （脚本生效后会置 data-bs-enhanced，此规则自动失效） */
input[type="search"]:not([data-bs-enhanced]) {
  border: 1px solid #c9d2db !important;
  border-radius: 6px !important;
  padding: 11px 14px !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(6, 67, 104, 0.10) !important;
  font-family: inherit !important;
  font-size: 14.5px !important;
  color: var(--text, #1a1a2e) !important;
}
input[type="search"]:not([data-bs-enhanced])::placeholder { color: #8a97a3; }

@media (max-width: 768px) {
  .bs-search--hero { width: 100%; margin-top: 0; }
  .bs-search--hero > input { padding: 11px 4px 11px 13px !important; font-size: 14px; }
  .bs-search--hero .bs-search__icon { width: 44px; height: 40px; }
}