/**
 * 产品搜索框样式
 *
 * 功能：
 * - 为产品中心页面添加搜索框样式
 * - 引用 root.css 自定义属性保持配色统一
 * - 响应式设计，支持移动端和桌面端
 * - 优雅的交互动画和过渡效果
 *
 * @author ToupTek Astro Dev Team
 * @version 2.0
 * @since 2025-01-22
 */

/* ============================================
   搜索框容器样式
   ============================================ */

.product-search-container {
    margin-top: 30px;
    margin-bottom: 20px;
}

/* 搜索输入框包装器 - 包含图标、输入框、清空按钮 */
.product-search-input-wrapper {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

/* 搜索图标 - 使用主题色 */
.product-search-input-wrapper .search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--thm-base, #2d76c0);
    font-size: 18px;
    pointer-events: none;
    z-index: 2;
    transition: color 0.3s ease;
}

/* 搜索输入框 */
.product-search-input {
    width: 100%;
    height: 54px;
    padding: 14px 54px 14px 52px;
    /* 搜索页输入框显式补齐规范字体回退，防止变量缺失时又退回旧英文字体。 */
    font-family: var(--thm-font, "PingFang SC", "PingFangSC", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--thm-p, #0b2336);
    background-color: var(--color-white, #ffffff);
    border: 2px solid var(--thm-f6, #F1F8FF);
    border-radius: 27px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 搜索框聚焦状态 - 使用主题蓝色和阴影效果 */
.product-search-input:focus {
    border-color: var(--thm-base, #2d76c0);
    box-shadow: 0 4px 20px rgba(45, 118, 192, 0.15);
}

/* 搜索框聚焦时图标颜色变化 */
.product-search-input:focus ~ .search-icon {
    color: var(--thm-color, #3A97FF);
}

/* 搜索框占位符样式 */
.product-search-input::placeholder {
    color: var(--thm-gray, #8e8e8e);
    font-weight: 300;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* 搜索框聚焦时占位符淡出 */
.product-search-input:focus::placeholder {
    opacity: 0.5;
}

/* 清空按钮 - 默认隐藏 */
.product-search-input-wrapper .search-clear-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%) scale(0.8);
    width: 34px;
    height: 34px;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: var(--thm-f6, #F1F8FF);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    opacity: 0;
}

/* 清空按钮显示状态 - 有输入内容时显示 */
.product-search-input-wrapper .search-clear-btn.show {
    display: flex;
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* 清空按钮悬停效果 - 使用主题背景色 */
.product-search-input-wrapper .search-clear-btn:hover {
    background-color: var(--thm-base, #2d76c0);
    transform: translateY(-50%) scale(1.1);
}

.product-search-input-wrapper .search-clear-btn:hover i {
    color: var(--color-white, #ffffff);
}

.product-search-input-wrapper .search-clear-btn i {
    color: var(--thm-gray, #8e8e8e);
    font-size: 14px;
    transition: color 0.25s ease;
}

/* 清空按钮按下效果 */
.product-search-input-wrapper .search-clear-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* ============================================
   搜索结果信息样式
   ============================================ */

/* 结果计数容器 */
.search-results-info {
    margin-top: 16px;
    text-align: center;
    padding: 0 10px;
}

/* 结果计数文字 */
.search-results-info > span {
    font-family: var(--thm-font2, "PingFang SC", "PingFangSC", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    display: inline;
    font-size: 14px;
    color: var(--thm-gray, #8e8e8e);
    font-weight: 400;
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}

/* 搜索状态高亮 - 使用主题色 */
.search-results-info .highlight {
    color: var(--thm-base, #2d76c0);
    font-weight: 600;
    padding: 0;
    background: transparent;
    border-radius: 0;
    display: inline;
    margin: 0 2px;
}

/* ============================================
   搜索过渡动画
   ============================================ */

/* 产品卡片过渡效果 - 与 Isotope 配合 */
.atf-portfolio-grid .grid-item {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   空状态提示
   ============================================ */

/* 空状态容器 */
.product-search-empty {
    display: none;
    text-align: center;
    padding: 80px 30px;
    background: linear-gradient(135deg, var(--thm-f6, #F1F8FF) 0%, var(--color-white, #ffffff) 100%);
    border-radius: 16px;
    margin-top: 30px;
}

/* 空状态显示 */
.product-search-empty.show {
    display: block;
    animation: fadeInUp 0.5s ease;
}

/* 空状态图标 */
.product-search-empty .empty-icon {
    font-size: 56px;
    background: var(--thm-line_90, linear-gradient(90deg, rgba(31, 114, 195, 0.96), rgba(0, 165, 224, 0.96)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    display: inline-block;
}

/* 空状态标题 */
.product-search-empty .empty-title {
    font-family: var(--thm-font, "PingFang SC", "PingFangSC", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--thm-p, #0b2336);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

/* 空状态描述 */
.product-search-empty .empty-description {
    font-family: var(--thm-font2, "PingFang SC", "PingFangSC", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: 15px;
    color: var(--thm-gray, #8e8e8e);
    line-height: 1.6;
}

/* 空状态淡入动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   响应式设计 - 移动端适配
   ============================================ */

/* 平板设备 (≤ 991px) */
@media (max-width: 991px) {
    /* 搜索框容器间距调整 */
    .product-search-container {
        margin-top: 24px;
        margin-bottom: 16px;
    }

    /* 搜索框宽度适配 */
    .product-search-input-wrapper {
        max-width: 100%;
    }

    /* 搜索框高度和内边距调整 */
    .product-search-input {
        height: 50px;
        padding: 12px 50px 12px 48px;
        font-size: 15px;
    }

    /* 搜索图标调整 */
    .product-search-input-wrapper .search-icon {
        left: 16px;
        font-size: 16px;
    }

    /* 清空按钮调整 */
    .product-search-input-wrapper .search-clear-btn {
        width: 32px;
        height: 32px;
        right: 12px;
    }

    /* 结果计数调整 */
    .search-results-info {
        margin-top: 14px;
    }

    .search-results-info > span {
        font-size: 14px;
    }

    /* 空状态调整 */
    .product-search-empty {
        padding: 60px 20px;
        margin-top: 24px;
    }

    .product-search-empty .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
    }

    .product-search-empty .empty-title {
        font-size: 18px;
    }
}

/* 手机设备 (≤ 575px) */
@media (max-width: 575px) {
    /* 搜索框容器间距调整 */
    .product-search-container {
        margin-top: 20px;
        margin-bottom: 12px;
    }

    /* 手机端不再给包装器额外加内边距，避免搜索图标区域和输入框边界错位。 */
    .product-search-input-wrapper {
        margin: 0 auto;
        padding: 0;
    }

    /* 搜索框高度进一步减小 */
    .product-search-input {
        height: 48px;
        padding: 11px 48px 11px 46px;
        font-size: 14px;
        border-radius: 24px;
    }

    /* 搜索图标位置调整 */
    .product-search-input-wrapper .search-icon {
        left: 18px;
        font-size: 16px;
        width: 20px;
        text-align: center;
    }

    /* 清空按钮调整 */
    .product-search-input-wrapper .search-clear-btn {
        width: 30px;
        height: 30px;
        right: 9px;
    }

    .product-search-input-wrapper .search-clear-btn i {
        font-size: 13px;
    }

    /* 结果计数文字大小 */
    .search-results-info {
        margin-top: 12px;
    }

    .search-results-info > span {
        font-size: 13px;
    }

    /* 空状态间距减小 */
    .product-search-empty {
        padding: 50px 20px;
        margin-top: 20px;
        border-radius: 12px;
    }

    /* 空状态图标大小 */
    .product-search-empty .empty-icon {
        font-size: 42px;
        margin-bottom: 14px;
    }

    /* 空状态标题大小 */
    .product-search-empty .empty-title {
        font-size: 17px;
        margin-bottom: 8px;
    }

    /* 空状态描述大小 */
    .product-search-empty .empty-description {
        font-size: 14px;
    }
}

/* ============================================
   加载状态样式
   ============================================ */

/* 搜索框加载状态 - 显示加载动画 */
.product-search-input-wrapper.loading .search-icon {
    animation: search-spin 1s linear infinite;
}

/* 加载动画 */
@keyframes search-spin {
    from {
        transform: translateY(-50%) rotate(0deg);
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* ============================================
   暗色模式适配（可选）
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* 当系统处于暗色模式时，可以添加暗色主题适配 */
    /* 当前保留为默认亮色主题，如需暗色模式可在此添加 */
}

/* ============================================
   打印样式
   ============================================ */

@media print {
    /* 打印时隐藏搜索框 */
    .product-search-container {
        display: none !important;
    }
}

/* ============================================
   辅助功能增强
   ============================================ */

/* 焦点可见性增强 - 键盘导航支持 */
.product-search-input:focus-visible {
    /*outline: 2px solid var(--thm-base, #2d76c0);*/
    outline-offset: 2px;
}

/* 清空按钮焦点状态 */
.product-search-input-wrapper .search-clear-btn:focus-visible {
    outline: 2px solid var(--thm-base, #2d76c0);
    outline-offset: 2px;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .product-search-input {
        border-width: 3px;
    }

    .search-results-info .highlight {
        text-decoration: underline;
    }
}

/* 减少动画模式 - 用户偏好设置 */
@media (prefers-reduced-motion: reduce) {
    .product-search-input,
    .product-search-input-wrapper .search-icon,
    .product-search-input-wrapper .search-clear-btn,
    .search-results-info span,
    .atf-portfolio-grid .grid-item {
        transition: none;
    }

    .product-search-input-wrapper.loading .search-icon {
        animation: none;
    }
}

/* ============================================================
   V2 Product Search Overrides
   说明：
   - 搜索框与空状态卡片在多个列表页中复用，这里统一到 V2。
   ============================================================ */

.product-search-input-wrapper .search-icon {
    color: var(--v2-primary-500);
}

.product-search-input {
    border: 1px solid var(--v2-bg-divider);
    border-radius: var(--v2-radius-pill);
    background-color: var(--v2-bg-primary);
    color: var(--v2-text-body);
    box-shadow: var(--v2-shadow-card);
}

.product-search-input:focus {
    border-color: var(--v2-primary-500);
    box-shadow: 0 0 0 4px rgba(var(--v2-primary-500-rgb), 0.12);
}

.product-search-input::placeholder,
.search-results-info > span,
.product-search-empty .empty-description {
    color: var(--v2-text-secondary);
}

.product-search-input-wrapper .search-clear-btn {
    background-color: var(--v2-bg-content);
}

.product-search-input-wrapper .search-clear-btn:hover {
    background-color: var(--v2-primary-500);
}

.search-results-info .highlight {
    color: var(--v2-primary-500);
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: inline;
}

.product-search-empty {
    background: linear-gradient(180deg, var(--v2-bg-functional) 0%, var(--v2-bg-primary) 100%);
    border-radius: var(--v2-radius-lg);
    border: 1px solid var(--v2-bg-divider);
}

/* ============================================================
   V2 Product Search Final Alignment
   说明：
   - 搜索页还需把清空按钮、结果信息条和空状态操作按钮统一到 V2。
   ============================================================ */

.product-search-input-wrapper .search-clear-btn {
    border: 1px solid var(--v2-bg-divider);
    color: var(--v2-text-secondary);
    border-radius: var(--v2-radius-pill);
}

.product-search-input-wrapper .search-clear-btn:hover {
    color: var(--v2-text-inverse);
    border-color: var(--v2-primary-500);
}

.search-results-info,
.product-search-empty,
.product-search-empty .empty-icon {
    color: var(--v2-text-body);
}

.product-search-empty .btn,
.product-search-empty .btn-primary {
    background: var(--v2-primary-500);
    border-color: var(--v2-primary-500);
    color: var(--v2-text-inverse);
}

.product-search-empty .btn:hover,
.product-search-empty .btn-primary:hover {
    background: var(--v2-primary-400);
    border-color: var(--v2-primary-400);
}

/* ============================================================
   Products Mobile Search Compact Spacing
   说明：
   - 产品列表移动端搜索区原本在搜索框、结果统计和筛选条之间叠加多处桌面间距；
   - 这里只压缩产品搜索组件自身的上下留白和统计行高度，不影响搜索逻辑与桌面端视觉；
   - 颜色、圆角和阴影继续沿用 root.css 的 V2 token。
   ============================================================ */
@media (max-width: 767px) {
    .product-search-container {
        margin-top: var(--v2-spacing-lg, 24px) !important;
        margin-bottom: var(--v2-spacing-sm, 12px) !important;
    }

    .product-search-input-wrapper {
        max-width: 100%;
    }

    .product-search-input {
        height: 48px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: clamp(14px, 3.8vw, 16px);
    }

    .search-results-info {
        min-height: auto;
        margin-top: var(--v2-spacing-xs, 8px) !important;
        padding: 0;
        line-height: 1.2;
    }

    .search-results-info > span {
        display: inline;
        font-size: clamp(14px, 3.8vw, 16px);
        line-height: 1.35;
    }

    .search-results-info .highlight {
        margin: 0 2px;
        padding: 0;
        line-height: 1.35;
        border-radius: 0;
        background: transparent;
        display: inline;
    }
}

@media (max-width: 575px) {
    .product-search-container {
        margin-top: var(--v2-spacing-md, 16px) !important;
        margin-bottom: var(--v2-spacing-xs, 8px) !important;
    }

    .product-search-input {
        height: 46px;
        padding-left: 46px;
        padding-right: 46px;
    }
}

/* Product search visual alignment */
.product-search-input,
.product-search-input-wrapper .search-clear-btn,
.product-search-empty,
.product-search-empty .empty-icon,
.product-search-empty .btn,
.product-search-empty .btn-primary {
    border-radius: 8px;
}

.product-search-input,
.product-search-empty .empty-description {
    font-size: 16px;
    line-height: 24px;
}