/* 自定义搜索框样式 - custom-search.css */

/* 搜索容器：控制宽度和居中 */
.search-container {
  width: 100%;
  max-width: 600px; /* 最大宽度，防止太宽 */
  margin: 20px auto; /* 上下间距，左右居中 */
}

/* 表单布局：Flexbox 让输入框和按钮并排 */
.search-form {
  display: flex;
  gap: 10px; /* 输入框和按钮之间的间距 */
  position: relative;
}

/* 输入框样式 */
.search-input {
  flex: 1; /* 自动占满剩余空间 */
  padding: 12px 20px;
  font-size: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 50px; /* 圆角 */
  outline: none;
  transition: all 0.3s ease;
  background-color: #f9f9f9;
  color: #333;
}

/* 输入框聚焦效果 */
.search-input:focus {
  border-color: #4a90e2; /* 聚焦时变蓝，可改为你主题色 */
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
}

/* 按钮样式 */
.search-btn {
  padding: 0 25px;
  background-color: #4a90e2; /* 按钮背景色 */
  color: white;
  border: none;
  border-radius: 50px; /* 圆角 */
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px; /* 图标和文字间距 */
}

/* 按钮悬停效果 */
.search-btn:hover {
  background-color: #357abd;
  transform: translateY(-2px); /* 微微上浮 */
  box-shadow: 0 4px 8px rgba(74, 144, 226, 0.3);
}

/* 手机端适配 */
@media (max-width: 480px) {
  .search-form {
    gap: 8px;
  }
  .search-input {
    padding: 10px 15px;
    font-size: 14px;
  }
  .search-btn span {
    display: none; /* 手机屏幕太小则隐藏文字，只留图标 */
  }
  .search-btn {
    padding: 0 15px;
  }
}