/* 搜索栏样式 */
.search-bar {
  width: 100%; /* 搜索栏宽度占满整个父元素 */
  position: fixed; /* 固定定位，使搜索栏始终位于页面顶部 */
  top: 0; /* 距离页面顶部0像素 */
  left: 0; /* 距离页面左侧0像素 */
  color: #777; /* 搜索栏内文本颜色为浅灰色 */
  background: #fff; /* 搜索栏背景颜色为白色 */
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07); /* 添加轻微的阴影效果，增强立体感 */
  z-index: 3; /* 设置堆叠顺序，确保搜索栏在其他内容之上 */

  .search-box {
    position: relative; /* 相对定位，用于内部元素的绝对定位 */
    height: 60rpx; /* 搜索框高度为60响应式像素 */
    background: #f7f7f7; /* 搜索框背景颜色为浅灰色 */
    z-index: 999; /* 设置较高的堆叠顺序，确保搜索框在其他元素之上 */
    width: 80%; /* 搜索框宽度为父元素宽度的80% */
    margin-left: 70rpx; /* 搜索框左侧外边距为70响应式像素 */
    border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
    margin: 20rpx 0 20rpx 20rpx; /* 上下外边距为20响应式像素，右侧外边距为0，左侧外边距为20响应式像素 */

    .search-img {
      width: 32rpx; /* 搜索图标宽度为32响应式像素 */
      height: 32rpx; /* 搜索图标高度为32响应式像素 */
      position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
      left: 20rpx; /* 搜索图标距离左侧20响应式像素 */
      top: 14rpx; /* 搜索图标距离顶部14响应式像素 */
      display: block; /* 确保图标作为块级元素显示 */
    }
  }

  .search-hint {
    font-size: 28rpx; /* 提示文本字体大小为28响应式像素 */
    position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
    right: 30rpx; /* 提示文本距离右侧30响应式像素 */
    top: 31rpx; /* 提示文本距离顶部31响应式像素 */
    color: #eb2444; /* 提示文本颜色为红色 */
  }
}

/* 搜索输入框样式 */
.sear-input {
  height: 60rpx; /* 输入框高度为60响应式像素 */
  border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
  border: 0; /* 移除默认边框 */
  margin: 0 30rpx 0 64rpx; /* 左右外边距分别为30和64响应式像素 */
  line-height: 48rpx; /* 行高设置为48响应式像素，确保文字垂直居中 */
  vertical-align: top; /* 垂直对齐方式为顶部 */
  background: #f7f7f7; /* 输入框背景颜色为浅灰色 */
  font-size: 28rpx; /* 输入框内的字体大小为28响应式像素 */
}

/* 搜索结果显示区域样式 */
.search-display {
  background: #fff; /* 背景颜色为白色 */
  padding: 20rpx; /* 内边距为20响应式像素 */
  margin-top: 100rpx; /* 顶部外边距为100响应式像素，确保与搜索栏有足够的间距 */

  .title-text {
    padding: 30rpx 0; /* 上下内边距为30响应式像素 */
    font-size: 30rpx; /* 标题文本字体大小为30响应式像素 */
    color: #666; /* 标题文本颜色为深灰色 */
  }
}

/* 热门搜索样式 */
.hot-search {
  .hot-search-tags {
    overflow: hidden; /* 隐藏超出容器的内容 */
    font-size: 26rpx; /* 标签字体大小为26响应式像素 */
    text-align: center; /* 标签文本居中对齐 */
    padding-bottom: 30rpx; /* 底部内边距为30响应式像素 */

    .tags {
      display: block; /* 标签作为块级元素显示 */
      max-width: 100%; /* 标签最大宽度为100% */
      overflow: hidden; /* 隐藏超出标签的内容 */
      float: left; /* 标签左浮动，实现水平排列 */
      border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
      white-space: nowrap; /* 防止文本换行 */
      text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
      background-color: #f2f2f2; /* 标签背景颜色为浅灰色 */
      box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
      margin-right: 20rpx; /* 右侧外边距为20响应式像素 */
      margin-bottom: 20rpx; /* 底部外边距为20响应式像素 */
      padding: 10rpx 30rpx; /* 内边距为10和30响应式像素 */
    }
  }
}

/* 历史搜索样式 */
.history-search {
  .title-text.history-line {
    position: relative; /* 相对定位，用于内部元素的绝对定位 */
    border-top: 2rpx solid #e1e1e1; /* 顶部边框为2响应式像素宽，颜色为浅灰色 */
  }

  .his-search-tags {
    overflow: hidden; /* 隐藏超出容器的内容 */
    font-size: 26rpx; /* 标签字体大小为26响应式像素 */
    text-align: center; /* 标签文本居中对齐 */
    display: inline-block; /* 作为行内块级元素显示 */

    .tags {
      max-width: 300rpx; /* 标签最大宽度为300响应式像素 */
      overflow: hidden; /* 隐藏超出标签的内容 */
      float: left; /* 标签左浮动，实现水平排列 */
      border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
      white-space: nowrap; /* 防止文本换行 */
      text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
      background-color: #f2f2f2; /* 标签背景颜色为浅灰色 */
      box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
      margin-right: 20rpx; /* 右侧外边距为20响应式像素 */
      margin-bottom: 20rpx; /* 底部外边距为20响应式像素 */
      padding: 10rpx 30rpx; /* 内边距为10和30响应式像素 */
    }
  }
}

/* 清除历史记录按钮样式 */
.clear-history {
  image {
    width: 32rpx; /* 图标宽度为32响应式像素 */
    height: 32rpx; /* 图标高度为32响应式像素 */
    position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
    right: 10rpx; /* 图标距离右侧10响应式像素 */
    top: 30rpx; /* 图标距离顶部30响应式像素 */
  }
}

/* 搜索结果为空时的提示样式 */
.search-tit-empty {
  display: block; /* 作为块级元素显示 */
  margin: 0 auto; /* 水平居中 */
  text-align: center; /* 文本居中对齐 */
  width: 100%; /* 宽度为100%，即占满整个父元素 */
  font-size: 24rpx; /* 提示文本字体大小为24响应式像素 */
  color: #aaa; /* 提示文本颜色为浅灰色 */
}
