/* ==================================================================
   Page styles: Products listing / Search results
   Loaded only on pages/products.php and pages/search.php
   ================================================================== */

.filter-bar {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
    margin-top: -4.5rem;
    position: relative;
    z-index: 2;
}

.filter-bar .form-control,
.filter-bar .form-select {
    background: var(--color-bg);
    border-color: var(--color-border);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.filter-chip.is-active,
.filter-chip:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.results-count {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.pagination .page-link {
    border-radius: var(--radius-btn);
    margin-inline: 0.2rem;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-weight: 600;
}

.pagination .page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.empty-state {
    text-align: center;
    padding: 5rem 1rem;
}

.empty-state .icon-box {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.5rem;
}