/******************************************************
 * 文件 ui/assets/css/components/search_bar.css
 * Search Bar Component (Amazon Style)
 * 企业级组件样式（可复用、可扩展、可维护）
 ******************************************************/

/* 外层容器 */
.ui-search-bar {
    position: relative;              /* 给建议面板用的定位上下文 */
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    max-width: 680px;                /* ← 搜索框整体最大宽度，最初是680px */
    height: 42px;

    background: #fff;
    border-radius: 8px;
    overflow: hidden;

    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* 表单布局：强制一行排布 */
.ui-search-form {
    display: flex !important;        /* 防止被全局 form 样式覆盖成 block */
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    height: 100%;
    margin: 0;
}

/* 分类下拉（左侧） */
.ui-search-category {
    flex: 0 0 auto;
    background: #f3f3f3;
    border-right: 1px solid #ddd;

    display: flex;
    align-items: center;
    padding: 0 10px;
    white-space: nowrap;
}

.ui-search-category select {
    border: none;
    background: transparent;
    font-size: 14px;
    color: #111;
    cursor: pointer;
    outline: none;

    /* 防止被全局样式设置成 display:block;width:100% */
    display: inline-block;
    width: auto;
}

/* 输入框（中间） */
.ui-search-input {
    flex: 1 1 auto;
    border: none;
    outline: none;

    padding: 0 14px;
    font-size: 15px;
    color: #111;

    /* 保证跟左右在同一行 */
    display: block;
    min-width: 0; /* 防止撑爆 flex 容器 */
}

.ui-search-input::placeholder {
    color: #777;
}

/* 搜索按钮（右侧 Amazon 黄色） */
.ui-search-btn {
    flex: 0 0 64px;           /* 可以顺便加宽一点，更像亚马逊 */
    width: 64px;
    border: none;
    background: #febd69;      /* Amazon Yellow */
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: flex-end; /* ← 关键：图标靠右对齐 */
    padding-right: 10px;       /* ← 关键：给图标和右边缘一点呼吸空间 */

    transition: background 0.15s ease;
}

.ui-search-btn:hover {
    background: #f3a847; /* Amazon Hover Yellow */
}

.ui-search-btn .icon {
    stroke: #333;
    /* 确保图标本身不是 100% 宽度 */
    width: 24px;       /* 搜索图标大小调整*/
    height: 24px;      /* 搜索图标大小调整*/
    flex: 0 0 auto;
}

/******************************************************
 * Focus 效果（Amazon 风格）
 ******************************************************/
.ui-search-bar:focus-within {
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.35);
    transition: box-shadow 0.15s ease;
}

/******************************************************
 * 搜索建议面板（Amazon 风格）
 ******************************************************/
.ui-search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-width: 680px;

    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);

    padding: 8px 0;
    z-index: 9999;

    display: none; /* JS 控制显示 */
}

/* 单条建议 */
.ui-search-suggestion-item {
    padding: 10px 16px;
    font-size: 14px;
    color: #111;
    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 8px;

    transition: background 0.12s ease;
}

.ui-search-suggestion-item:hover {
    background: #f3f4f6;
}

/* 建议中的关键词高亮 */
.ui-search-suggestion-highlight {
    color: #2563eb;
    font-weight: 500;
}

/******************************************************
 * Mobile 适配（Amazon 风格）
 ******************************************************/
@media (max-width: 768px) {
    .ui-search-bar {
        max-width: 100%;
        height: 40px;
        border-radius: 6px;
    }

    .ui-search-category {
        padding: 0 8px;
    }

    .ui-search-input {
        font-size: 14px;
    }

    .ui-search-btn {
        width: 44px;
    }

    .ui-search-suggestions {
        max-width: 100%;
    }
}