/* 搜索框外层容器 */
.search-form {
    position: relative;
    display: flex;
    align-items: center;
}

/* 搜索容器 - 相对定位 */
.search-container {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 220px; /* 固定宽度，或者根据需求设置 */
}

/* 搜索输入框 */
.search-input {
    width: 100%; /* 占满容器宽度 */
    position: relative;
    z-index: 1002; /* 比建议框高 */
}

/* 下拉建议框 - 绝对定位，不占用文档流 */
.search-suggestions {
    position: absolute;
    top: calc(100% + 2px); /* 在输入框下方，加一点间距 */
    left: 0;
    right: 0;
    z-index: 9999; /* 比输入框低，但比页面内容高 */
    
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    max-height: 530px;
    width: 300px;
    max-width: 350px;
    overflow-y: auto;
    

}


/* 显示状态 */
.search-suggestions.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

/* 隐藏状态 */
.search-suggestions.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    visibility: hidden;
}

/* 建议列表 */
.suggestions-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 建议项 */
.suggestions-list .list-group-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer !important;
    transition: background-color 0.15s ease;
    display: block;
    text-decoration: none;
    color: #333;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    position: relative;
}

.suggestions-list .list-group-item:last-child {
    border-bottom: none;
}

/* 悬停效果 */
.suggestions-list .list-group-item:hover {
    background-color: #f8f9fa !important;
    cursor: pointer !important;
}

.suggestions-list .list-group-item.active {
    background-color: #e7f1ff !important;
    cursor: pointer !important;
}

/* 确保所有子元素都有手型光标 */
.suggestions-list .list-group-item * {
    cursor: pointer !important;
}

/* 高亮文字 */
.keyword-highlight {
    color: #007bff;
    font-weight: 600;
}

/* 徽章样式 */
.suggestion-badge {
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 10px;
    margin-left: 8px;
    cursor: pointer !important;
}

/* 布局 */
.suggestion-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.suggestion-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* 搜索按钮 */
.search-form .btn {
    position: relative;
    z-index: 1002; /* 和输入框同一层级 */
    margin-left: 8px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .search-container {
        width: 100%;
    }
    
    .search-form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-form .btn {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
    }
    
    .search-suggestions {
        position: fixed; /* 在小屏幕上使用固定定位 */
        top: auto;
        left: 16px;
        right: 16px;
        max-height: 60vh;
    }
}