/* ============================================
   Lift.css - 书籍搜索界面样式表
   ============================================ */

/* 搜索框区域样式 (主要容器) */
.search-area {
    margin: 30px auto;
    max-width: 600px;
    text-align: center;
}

/* 搜索框组合 (包含输入框与按钮) */
.search-box {
    display: flex;
    gap: 10px; /* 使用flex间隙属性代替margin控制间距 */
    margin-bottom: 20px;
}

/* 搜索输入框样式 */
.search-input {
    flex: 1; /* 占据剩余可用空间 */
    padding: 12px 20px;
    border: 2px solid #8b7355; /* 主色边框 */
    border-radius: 50px; /* 胶囊圆角 */
    font-size: 16px;
    background-color: #f9f6f0; /* 米白背景 */
    color: #3d2c1e; /* 深褐文字 */
    outline: none; /* 移除默认外轮廓 */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡效果 */
}

/* 输入框获得焦点时的状态 */
.search-input:focus {
    border-color: #6b5a42; /* 边框颜色加深 */
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.2); /* 发光效果 */
}

/* 搜索按钮样式 */
.search-button {
    padding: 12px 30px;
    background-color: #8b7355; /* 主色背景 */
    color: white;
    border: none;
    border-radius: 50px; /* 胶囊圆角，与输入框匹配 */
    font-size: 16px;
    cursor: pointer; /* 鼠标悬停变为手指 */
    transition: background-color 0.3s ease, transform 0.2s ease; /* 背景色与位移过渡 */
}

/* 鼠标悬停在按钮上的状态 */
.search-button:hover {
    background-color: #6b5a42; /* 背景色加深 */
    transform: translateY(-2px); /* 轻微上浮效果 */
}

/* 按钮被点击（激活）时的状态 */
.search-button:active {
    transform: translateY(0); /* 恢复原位 */
}

/* 结果容器样式 (用于包裹所有书籍列表和搜索结果) */
.results-container {
    max-width: 800px;
    margin: 0 auto 50px;
    padding: 0 20px;
}

/* ============= 完整列表样式 (初始加载时显示的样式) ============= */

/* 完整列表容器 - 添加整体边框 */
.full-list {
    border: 2px solid #d4c9b8; /* 添加整体边框 */
    border-radius: 10px; /* 圆角边框 */
    overflow: hidden; /* 确保内部圆角不溢出 */
    background-color: #fff; /* 白色背景 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
}

/* 完整列表中每本书的条目样式 - 修复：使用原来的嵌套选择器 */
.full-list .book-item {
    padding: 15px;
    border-bottom: 1px dashed #d4c9b8; /* 浅棕色虚线分隔线 */
    color: #3d2c1e;
    font-size: 16px;
    line-height: 1.6; /* 良好的行高提升阅读体验 */
    transition: background-color 0.2s ease; /* 背景色变化过渡效果 */
}

/* 移除最后一个项目的底部分隔线 */
.full-list .book-item:last-child {
    border-bottom: none;
}

/* 鼠标悬停在完整列表条目上的状态 */
.full-list .book-item:hover {
    background-color: rgba(139, 115, 85, 0.05); /* 非常轻微的主色半透明背景 */
}

/* ============= 搜索结果列表样式 (执行搜索后显示的样式) ============= */

/* 搜索结果容器 */
.search-results {
    /* 搜索结果容器样式 */
}

/* 搜索结果中每个匹配项的样式 */
.search-results .result-item {
    padding: 18px 20px;
    margin-bottom: 15px;
    background-color: #f9f6f0; /* 与输入框背景色一致 */
    border-radius: 10px; /* 圆角矩形 */
    border-left: 4px solid #8b7355; /* 左侧主色强调边 */
    color: #3d2c1e;
    font-size: 16px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); /* 轻微阴影增加层次感 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 位移和阴影过渡效果 */
}

/* 鼠标悬停在搜索结果条目上的状态 */
.search-results .result-item:hover {
    transform: translateY(-3px); /* 更明显的上浮效果 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* 加深阴影 */
}

/* ============= 通用辅助样式 ============= */

/* 高亮搜索关键词的样式 */
.highlight {
    color: #d9534f; /* 使用对比鲜明的红色高亮关键词 */
    font-weight: bold; /* 加粗强调 */
    background-color: rgba(217, 83, 79, 0.1); /* 非常浅的红色半透明背景 */
    padding: 0 2px;
    border-radius: 3px;
}

/* 状态提示信息样式 (用于显示搜索状态、加载状态等) */
.status-message {
    text-align: center;
    padding: 40px 20px;
    color: #8b7355;
    font-size: 18px;
}

/* 加载状态样式 */
.loading {
    text-align: center;
    padding: 40px;
    color: #8b7355;
    font-style: italic; /* 斜体表示加载中状态 */
}

/* 清除搜索按钮样式 */
.clear-search {
    display: inline-block; /* 行内块级元素，保持按钮特性 */
    margin-top: 15px;
    padding: 8px 20px;
    background-color: transparent; /* 透明背景 */
    color: #8b7355; /* 主色文字 */
    border: 1px solid #8b7355; /* 主色边框 */
    border-radius: 50px; /* 胶囊圆角，与主要按钮保持一致 */
    font-size: 14px; /* 比主要按钮稍小的字号 */
    cursor: pointer;
    transition: all 0.3s ease; /* 所有属性变化都有过渡效果 */
}

/* 鼠标悬停在清除搜索按钮上的状态 */
.clear-search:hover {
    background-color: #8b7355; /* 填充主色背景 */
    color: white; /* 文字变为白色 */
}

/* ============= 响应式调整 (移动端适配) ============= */

/* 当屏幕宽度小于等于768像素时（平板和手机设备） */
@media (max-width: 768px) {
    /* 在小屏幕上将搜索框改为垂直排列 */
    .search-box {
        flex-direction: column; /* 列方向排列 */
    }

    /* 使搜索按钮占据整行宽度 */
    .search-button {
        width: 100%; /* 宽度100% */
    }

    /* 调整结果容器的内边距 */
    .results-container {
        padding: 0 15px; /* 稍小的内边距 */
    }
}

/* 提示消息样式 */
.toast {
    position: fixed;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.toast.show {
    opacity: 1;
}

/* 为错误提示添加特殊样式 */
.toast.error {
    background: rgba(217, 83, 79, 0.9);
}

/* 为成功提示添加特殊样式 */
.toast.success {
    background: rgba(139, 115, 85, 0.9);
}