/* IconCat Filter v2.2 — front-end styles */
body { animation: icf-pagein 0.2s ease; }
@keyframes icf-pagein { from{opacity:0} to{opacity:1} }

/* ── Filter bar ── */
.wf-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tf-gap, 8px);
    justify-content: center;
    padding: 8px 0 28px;
}

/* Sidebar layout: stack vertically, left-aligned */
.wf-filter-bar.icf-sidebar {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
}

/* ── Button ── */
.wf-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    transition: transform 0.18s ease;
    text-decoration: none;
}
.wf-btn:hover { transform: translateY(-2px); }

/* Horizontal/Sidebar layout: icon beside label */
.wf-filter-bar.icf-horizontal .wf-btn,
.wf-filter-bar.icf-sidebar .wf-btn {
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

/* Sidebar: no translate, full width feel */
.wf-filter-bar.icf-sidebar .wf-btn {
    transform: none !important;
    width: 100%;
    padding: 8px 12px;
    justify-content: flex-start;
}
.wf-filter-bar.icf-sidebar .wf-btn:hover {
    transform: none !important;
}

/* ── Icon circle ── */
.wf-btn-icon {
    width: var(--tf-icon-size, 54px);
    height: var(--tf-icon-size, 54px);
    min-width: var(--tf-icon-size, 54px);
    border-radius: var(--tf-radius, 50%);
    border: var(--tf-border-w, 1.5px) solid var(--tf-border, #d0d0d0);
    background: var(--tf-bg, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--tf-icon, #999);    /* Controls SVG currentColor */
}
.wf-btn-icon svg, .wf-btn-icon img {
    width: var(--tf-svg-size, 22px);
    height: var(--tf-svg-size, 22px);
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}

/* ── Label ── */
.wf-btn-label {
    font-size: var(--tf-label-size, 0.68rem);
    font-weight: var(--tf-label-weight, 700);
    letter-spacing: var(--tf-label-spacing, 0.1em);
    text-transform: uppercase;
    color: var(--tf-label, #888);
    transition: color 0.2s;
    white-space: nowrap;
}

/* ── Hover ── */
.wf-btn:hover .wf-btn-icon {
    border-color: var(--tf-hover, var(--tf-active, #1a6b53));
    background: var(--tf-hover-bg, rgba(26,107,83,0.07));
    color: var(--tf-hover, var(--tf-active, #1a6b53));
}
.wf-btn:hover .wf-btn-label { color: var(--tf-hover, var(--tf-active, #1a6b53)); }

/* ── Active: fill (default) ── */
.wf-btn.wf-active[data-active-style="fill"] .wf-btn-icon,
.wf-btn.wf-active:not([data-active-style]) .wf-btn-icon {
    border-color: var(--tf-active, #1a6b53);
    background:   var(--tf-active, #1a6b53);
    color: #fff;
}
.wf-btn.wf-active[data-active-style="fill"] .wf-btn-label,
.wf-btn.wf-active:not([data-active-style]) .wf-btn-label { color: var(--tf-active, #1a6b53); }

/* ── Active: border ── */
.wf-btn.wf-active[data-active-style="border"] .wf-btn-icon {
    border-color: var(--tf-active, #1a6b53);
    border-width: calc(var(--tf-border-w, 1.5px) * 2);
    background: var(--tf-active-bg, rgba(26,107,83,0.1));
    color: var(--tf-active, #1a6b53);
}
.wf-btn.wf-active[data-active-style="border"] .wf-btn-label { color: var(--tf-active, #1a6b53); }

/* ── Active: underline ── */
.wf-btn.wf-active[data-active-style="underline"] .wf-btn-icon {
    border-color: var(--tf-active, #1a6b53);
    background: var(--tf-active-bg, rgba(26,107,83,0.1));
    color: var(--tf-active, #1a6b53);
}
.wf-btn.wf-active[data-active-style="underline"] .wf-btn-label { color: var(--tf-active, #1a6b53); }
.wf-btn.wf-active[data-active-style="underline"]::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    translate: -50% 0;
    width: 24px;
    height: 2.5px;
    background: var(--tf-active, #1a6b53);
    border-radius: 99px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SLIDER / CAROUSEL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Outer wrapper — holds arrows + bar */
.icf-slider-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0 28px;
    position: relative;
}

/* Bar overrides when in slider mode */
.wf-filter-bar.icf-slider-mode {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE / Edge */
    padding: 8px 0;
    flex: 1;
    min-width: 0;
    scroll-behavior: smooth;
}
.wf-filter-bar.icf-slider-mode::-webkit-scrollbar {
    display: none;                   /* Chrome / Safari / Opera */
}
.wf-filter-bar.icf-slider-mode .wf-btn {
    flex: 0 0 calc(100% / var(--icf-slides, 5));
    min-width: calc(100% / var(--icf-slides, 5));
    box-sizing: border-box;
}
.wf-filter-bar.icf-slider-mode .wf-btn-label {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

/* Arrow buttons */
.icf-slider-arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #d0d0d0;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s, background 0.2s, opacity 0.25s;
    color: #888;
    padding: 0;
    font-size: 0;
    z-index: 2;
}
.icf-slider-arrow svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}
.icf-slider-arrow:hover {
    border-color: var(--tf-active, #1a6b53);
    color: var(--tf-active, #1a6b53);
    background: rgba(26,107,83,0.07);
}
.icf-slider-arrow.icf-arrow-hidden {
    opacity: 0.25;
    pointer-events: none;
}

/* ── Responsive: cap slides on small screens ── */
@media (max-width: 600px) {
    .wf-filter-bar.icf-slider-mode .wf-btn {
        flex: 0 0 calc(100% / 3);
    }
    .icf-slider-arrow {
        width: 30px;
        height: 30px;
    }
    .icf-slider-arrow svg {
        width: 15px;
        height: 15px;
    }
}