/*
 * Productcategorie v2 (Elementor-concept) – opmaak van FacetWP-facets, actieve filters,
 * paginering en de FacetWP Flyout. Gescoped op .pc-shop en .facetwp-flyout zodat de
 * bestaande Breakdance-pagina's (o.a. /assortiment/) niet geraakt worden.
 */
.pc-shop,
.facetwp-flyout {
    --pc-ink: #241A15;
    --pc-ink-soft: #5F5148;
    --pc-line: #E8DDCE;
    --pc-accent: #FF8F09;
    --pc-accent-deep: #B5541C;
    --pc-accent-tint: #FDECDD;
    font-family: "Public Sans", sans-serif;

    & .facetwp-facet {
        margin-bottom: 0;
    }

    /* checkboxes */
    & .facetwp-checkbox {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 6px 0;
        background: none !important;
        font-size: 14px;
        color: var(--pc-ink);
        cursor: pointer;

        &::before {
            content: "";
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            border-radius: 5px;
            border: 1.5px solid var(--pc-line);
            background: #fff;
            transition: background-color .15s ease, border-color .15s ease;
        }

        &:hover::before {
            border-color: var(--pc-accent);
        }

        &.checked::before {
            background: var(--pc-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23FFF8EF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
            border-color: var(--pc-ink);
        }

        &.disabled {
            opacity: .45;
        }

        & .facetwp-display-value {
            flex-grow: 1;
            padding: 0;
        }

        & .facetwp-counter {
            margin-left: auto;
            font-size: 12px;
            font-weight: 600;
            color: var(--pc-ink-soft);
            background: #F3ECE1;
            border-radius: 999px;
            padding: 2px 8px;
        }
    }

    & .facetwp-toggle.facetwp-hidden {
        display: none;
    }

    & .facetwp-toggle {
        display: inline-block;
        margin-top: 6px;
        font-size: 13px;
        font-weight: 700;
        color: var(--pc-accent-deep);
        cursor: pointer;
    }

    /* zoeken */
    & .facetwp-type-search {
        & .facetwp-input-wrap {
            display: block;
            width: 100%;
        }

        & .facetwp-search {
            box-sizing: border-box;
            width: 100%;
            min-width: 0;
            border: 1px solid var(--pc-line);
            border-radius: 999px;
            padding: 11px 40px 11px 16px;
            font-size: 14px;
            background: #fff;
            color: var(--pc-ink);

            &:focus {
                outline: none;
                border-color: var(--pc-accent);
            }
        }
    }

    /* prijsslider */
    & .facetwp-type-slider {
        padding: 6px 4px 0;

        & .noUi-target {
            height: 4px;
            border: 0;
            box-shadow: none;
            background: var(--pc-line);
        }

        & .noUi-connect {
            background: var(--pc-ink);
        }

        & .noUi-handle {
            width: 18px !important;
            height: 18px !important;
            right: -9px !important;
            top: -7px !important;
            border-radius: 999px;
            border: 2px solid var(--pc-ink);
            box-shadow: none;
            cursor: grab;

            &::before,
            &::after {
                display: none;
            }
        }

        & .facetwp-slider-label {
            display: block;
            margin-top: 12px;
            font-size: 13px;
            font-weight: 600;
            color: var(--pc-ink-soft);
        }

        & .facetwp-slider-reset {
            margin-top: 8px;
            border: 0;
            background: none;
            padding: 0;
            font-size: 12.5px;
            font-weight: 700;
            color: var(--pc-accent-deep);
            cursor: pointer;
        }
    }

    /* reset-link */
    & .facetwp-type-reset .facetwp-reset {
        border: 0;
        background: none;
        padding: 0;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--pc-accent-deep);
        cursor: pointer;
    }
}

.pc-shop {
    /* aantal resultaten */
    & .facetwp-type-pager .facetwp-pager-label,
    & .facetwp-facet-pc_aantal {
        font-size: 14.5px;
        color: var(--pc-ink-soft);
    }

    /* sorteren */
    & .facetwp-type-sort select,
    & .facetwp-sort-select {
        box-sizing: border-box;
        max-width: 100%;
        appearance: none;
        border: 1px solid var(--pc-line);
        border-radius: 999px;
        padding: 10px 38px 10px 16px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--pc-ink);
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23241A15' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center / 14px no-repeat;
        cursor: pointer;
    }

    /* actieve filters als chips */
    & .facetwp-selections {
        & ul {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        & ul::before {
            content: "Actieve filters:";
            align-self: center;
            font-size: 13px;
            font-weight: 600;
            color: var(--pc-ink-soft);
        }

        & li {
            display: contents;
        }

        & .facetwp-selection-label {
            display: none;
        }

        & .facetwp-selection-value {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border-radius: 999px;
            padding: 7px 12px 7px 14px;
            margin: 0;
            background: var(--pc-accent-tint) !important;
            color: var(--pc-accent-deep);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;

            &::after {
                content: "×";
                font-size: 15px;
                line-height: 1;
            }
        }
    }

    /* paginering */
    & .facetwp-pager {
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;

        & .facetwp-page {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 38px;
            height: 38px;
            margin: 0;
            padding: 0 6px;
            border-radius: 10px;
            border: 1px solid var(--pc-line);
            background: #fff;
            font-size: 13.5px;
            font-weight: 700;
            color: var(--pc-ink-soft);

            &.active {
                background: var(--pc-ink);
                border-color: var(--pc-ink);
                color: #FFFFFF !important;
            }

            &.dots {
                border-color: transparent;
                background: none;
            }
        }
    }

    & .facetwp-template.is-loading,
    & .facetwp-load {
        opacity: .5;
    }
}

/* Flyout (mobiel) */
.facetwp-flyout {
    max-width: 92vw;
    width: 380px;
    background: #FBF8F4;
    z-index: 100000;

    & .facetwp-flyout-close {
        font-size: 22px;
        font-family: "Public Sans", sans-serif;
        color: var(--pc-ink);
    }

    & .facetwp-flyout-content {
        padding: 24px 20px 40px;
    }

    & .flyout-row {
        background: #fff;
        border: 1px solid var(--pc-line);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 12px;

        & h3 {
            margin: 0 0 8px;
            font-family: "Public Sans", sans-serif;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--pc-ink);
        }
    }
}

.facetwp-flyout-fog {
    background: rgba(28, 19, 16, .55);
    z-index: 99999;
}

/* Kruimelpad op de categoriekop */
.pc-breadcrumb a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;

    &:hover {
        color: #B5541C;
    }
}

/* Aantal resultaten: getal vet en donker */
.pc-shop .facetwp-facet-pc_aantal strong {
    color: #241A15;
    font-weight: 700;
}

/* ---- Mobiel filterpaneel (FacetWP Flyout) volgens mobiel ontwerp ---- */
.facetwp-flyout.facetwp-flyout {
    width: 100%;
    max-width: 100%;
    height: auto;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 0;

    & .pc-flyout-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px 14px;
        border-bottom: 1px solid var(--pc-line);
        flex-shrink: 0;
    }

    & .pc-flyout-title {
        font-size: 16px;
        font-weight: 800;
        color: var(--pc-ink);
    }

    & .facetwp-flyout-close {
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: #F3ECE1;
        color: var(--pc-ink);
        font-size: 20px;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
    }

    & .facetwp-flyout-wrap {
        position: relative;
        flex: 1 1 0;
        min-height: 0;
        height: auto !important;
        overflow-y: auto;
    }

    & .facetwp-flyout-content {
        padding: 0 20px 20px;
    }

    & .flyout-row {
        background: none;
        border: 0;
        border-bottom: 1px solid var(--pc-line);
        border-radius: 0;
        padding: 18px 0;
        margin: 0;

        & h3 {
            font-size: 12.5px;
            font-weight: 800;
            letter-spacing: .04em;
            margin: 0 0 12px;
        }

        & .facetwp-checkbox {
            padding: 9px 0;
        }
    }

    & .pc-flyout-foot {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px 22px;
        border-top: 1px solid var(--pc-line);
        background: #fff;
        flex-shrink: 0;
    }

    & .pc-flyout-reset {
        border: 0;
        background: none;
        padding: 0;
        white-space: nowrap;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--pc-accent-deep);
        cursor: pointer;
    }

    & .pc-flyout-apply {
        flex: 1;
        border: 0;
        border-radius: 999px;
        padding: 13px 20px;
        background: var(--pc-accent);
        color: #201007;
        font-size: 15px;
        font-weight: 600;
        box-shadow: 0 10px 24px -10px rgba(180, 80, 20, .55);
        cursor: pointer;
    }
}

/* ---- Toolbar mobiel: sorteren even breed als de Filters-knop ---- */
@media (max-width: 767px) {
    .pc-shop .facetwp-facet-pc_sorteren,
    .pc-shop .facetwp-facet-pc_sorteren select {
        width: 100%;
    }
}