.blog-index__search {
  display: flex;
  align-items: stretch;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  margin-top: 24px;
  overflow: hidden;
  background: #ffffff;
}

.blog-index__search-field {
  flex: 1;
  padding: 14px 18px 16px;
  display: grid;
  gap: 10px;
}

.blog-index__search-label {
  font-size: 11px;
  color: #6b6b6b;
  font-family: "Circe", "Tahoma", "Arial", sans-serif;
}

.blog-index__search-input {
  border: none;
  outline: none;
  font-size: 18px;
  font-family: "Circe", "Tahoma", "Arial", sans-serif;
  color: #0f0f0f;
  background: transparent;
}

.blog-index__search-input::placeholder {
  color: #8a8a8a;
}

.blog-index__search-btn {
  border: none;
  background: #f2f6ff;
  color: #2b5cff;
  font-size: 12px;
  font-weight: 600;
  padding: 0 26px;
  min-width: 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

.blog-index__search-btn.is-loading {
  opacity: 0.75;
  cursor: default;
}

.blog-index__search-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(43, 92, 255, 0.25);
  border-top-color: #2b5cff;
  animation: blog-search-spin 0.8s linear infinite;
}

@keyframes blog-search-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}