/* ── Blog Search – Styles v3 ── */

#bs-wrap {
  width: 100%;
  max-width: 680px;
  margin: 0 0 2.5rem;
  padding: 0 20px;
  font-family: inherit;
  box-sizing: border-box;
}

/* ── Search box ── */
#bs-box {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 50px;
  padding: 7px 7px 7px 22px;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}

#bs-box:focus-within {
  border-color: #6366f1;
  box-shadow: 0 4px 20px rgba(99,102,241,.18);
}

#bs-icon {
  font-size: 1.1rem;
  opacity: .45;
  margin-right: 10px;
  flex-shrink: 0;
}

#bs-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  background: transparent;
  color: #111827;
  min-width: 0;
}

#bs-input::placeholder { color: #9ca3af; }
#bs-input::-webkit-search-cancel-button { display: none; }

/* ── Submit button ── */
#bs-btn {
  flex-shrink: 0;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 9px 22px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .1s;
  letter-spacing: .02em;
  white-space: nowrap;
}

#bs-btn:hover  { background: #4f46e5; }
#bs-btn:active { transform: scale(.97); }

/* ── Result count line ── */
#bs-meta {
  margin: 10px 22px 0;
  font-size: .88rem;
  color: #6b7280;
}

#bs-meta strong { color: #111827; }