/**
 * Icon-based faceted filter styles for target categories
 *
 * Horizontal slider layout with fade effects at edges.
 * Active filter is indicated by underlined label.
 *
 * @author my junior
 * @copyright my junior
 */

/* Hide default ps_facetedsearch on target categories when this module is active */

#facets-icons-wrapper {
    position: relative;
    width: 100%;
    padding: 0 0.3em;
    margin: 0.4em 0;
}

/* Left fade effect */
#facets-icons-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 2;
}

/* Right fade effect */
#facets-icons-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 2;
}

#facets-icons-slider {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    gap: 1rem;
    padding: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

/* On mobile, left-align for scroll behavior */
@media (max-width: 576px) {
    #facets-icons-slider {
        justify-content: flex-start;
    }
}

#facets-icons-slider::-webkit-scrollbar {
    display: none;
    height: 0;
}

.facet-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0.5rem;
    scroll-snap-align: center;
    transition: all 0.2s ease;
    min-width: 4rem;
}

.facet-icon-item:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.facet-icon-img {
    width: 6rem;
    height: 6rem;
    object-fit: contain;
}

/* Category links — greyscale like features, no underline */
a.facet-icon-catlink,
a.facet-icon-catlink:hover,
a.facet-icon-catlink:focus,
a.facet-icon-catlink:active,
a.facet-icon-catlink:visited {
    text-decoration: none !important;
    color: inherit;
}

.facet-icon-label {
    margin-top: 0.25rem;
    text-align: center;
    white-space: nowrap;
    color: #333;
}

.facet-icon-item.active .facet-icon-label {
    font-weight: bold;
    color: #000;
    text-decoration: underline;
}

/* Module renders only for target categories */
.category-id-3 #search_filters,
.category-id-116 #search_filters,
.category-id-3 .block-categories,
.category-id-116 .block-categories,
.category-id-3 #js-active-search-filters,
.category-id-116 #js-active-search-filters {
    display: none;
}

.category-id-3 #search_filters_wrapper,
.category-id-116 #search_filters_wrapper {
    display: none;
}