/* ================================================================
   Woo Parts Finder — 前端样式
   ================================================================ */

/* ── 通用变量 ── */
:root {
    --wpf-primary:    #cc0000;
    --wpf-primary-h:  #aa0000;
    --wpf-dark:       #1a1a1a;
    --wpf-gray:       #e8e8e8;
    --wpf-radius:     4px;
    --wpf-font:       inherit;
    --wpf-transition: 0.18s ease;
}

.wpf-wrap { font-family: var(--wpf-font); }

/* ================================================================
   横向工具栏
   ================================================================ */
.wpf-horizontal .wpf-toolbar {
    display:          flex;
    flex-wrap:        wrap;
    align-items:      center;
    gap:              8px;
    padding:          16px 0;
    background:       #f3f3f3;
    border-radius:    var(--wpf-radius);
    padding-inline:   16px;
}

/* 下拉选择器 */
.wpf-select-wrap { position: relative; }

.wpf-select {
    appearance:       none;
    -webkit-appearance: none;
    padding:          10px 36px 10px 14px;
    border:           1px solid #ccc;
    border-radius:    var(--wpf-radius);
    background:       #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    font-size:        14px;
    cursor:           pointer;
    min-width:        140px;
    transition:       border-color var(--wpf-transition);
}
.wpf-select:focus { outline: none; border-color: var(--wpf-primary); }
.wpf-select:disabled { opacity: .5; cursor: not-allowed; }

/* 按钮 */
.wpf-btn {
    padding:          10px 20px;
    border:           none;
    border-radius:    var(--wpf-radius);
    font-size:        14px;
    font-weight:      600;
    cursor:           pointer;
    transition:       background var(--wpf-transition), transform 0.1s;
}
.wpf-btn:active { transform: scale(.97); }

.wpf-btn-find {
    background: var(--wpf-primary);
    color:      #fff;
}
.wpf-btn-find:hover { background: var(--wpf-primary-h); }

.wpf-btn-clear {
    background: var(--wpf-dark);
    color:      #fff;
}
.wpf-btn-clear:hover { background: #333; }

/* ================================================================
   侧边栏手风琴
   ================================================================ */
.wpf-sidebar .wpf-accordion {
    border: 1px solid #ddd;
    border-radius: var(--wpf-radius);
    overflow: hidden;
}

.wpf-accordion-item { border-bottom: 1px solid #e0e0e0; }
.wpf-accordion-item:last-child { border-bottom: none; }

.wpf-accordion-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         14px 18px;
    cursor:          pointer;
    background:      #fff;
    transition:      background var(--wpf-transition);
    user-select:     none;
}
.wpf-accordion-header:hover { background: #fafafa; }

.wpf-accordion-title {
    font-weight: 700;
    font-size:   14px;
    letter-spacing: 0.5px;
}

.wpf-accordion-icon {
    font-size:   18px;
    color:       #555;
    transition:  transform var(--wpf-transition);
}
.wpf-accordion-item.is-open .wpf-accordion-icon { transform: rotate(0deg); }

.wpf-accordion-body {
    padding:    10px 18px 14px;
    background: #fff;
}

/* Radio 选项 */
.wpf-radio-label {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     5px 0;
    cursor:      pointer;
    font-size:   14px;
}
.wpf-radio-label input[type="radio"] {
    accent-color: var(--wpf-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* 侧边栏按钮区 */
.wpf-sidebar .wpf-sidebar-actions {
    display:    flex;
    gap:        8px;
    margin-top: 16px;
}
.wpf-sidebar .wpf-sidebar-actions .wpf-btn { flex: 1; text-align: center; }

/* ================================================================
   结果区域
   ================================================================ */
.wpf-result-wrap { margin-top: 24px; }

.wpf-loading {
    text-align:  center;
    padding:     32px;
    color:       #888;
    font-size:   15px;
}

.wpf-no-products {
    text-align:  center;
    padding:     40px;
    color:       #888;
    font-size:   15px;
}

/* 分页 */
.wpf-pagination {
    margin-top: 20px;
    text-align: center;
}
.wpf-pagination a,
.wpf-pagination span {
    display:       inline-block;
    padding:       6px 12px;
    margin:        2px;
    border:        1px solid #ddd;
    border-radius: var(--wpf-radius);
    font-size:     13px;
    text-decoration: none;
    color:         var(--wpf-dark);
}
.wpf-pagination .current {
    background: var(--wpf-primary);
    color:      #fff;
    border-color: var(--wpf-primary);
}

/* ================================================================
   响应式
   ================================================================ */
@media (max-width: 768px) {
    .wpf-horizontal .wpf-toolbar {
        flex-direction: column;
        align-items:    stretch;
    }
    .wpf-select { width: 100%; }
    .wpf-btn    { width: 100%; }
}