/* =========================================================
   FacetWP Mobiel — awcf_facetwp_mobiel
   (1) Flyout "Toon resultaten"-knop: sticky onderaan het (fixed) flyout-paneel.
   (2) Filter-inline (opt-in): "Filter"-accordion als pill naast "Sorteer op".
   Accentkleur via var(--awcf-accent) met #885f83 als fallback. De CSS-
   breakpoint hieronder (1024px) hoort bij de standaard-instelling; verander je
   die instelling drastisch, pas dan ook deze media-query aan.
   ========================================================= */

/* =========================================================
   1. Flyout-knop
   ========================================================= */
.facetwp-flyout .awcf-apply-btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 16px;
    border: none;
    border-radius: 0;
    background: var(--awcf-accent, #885f83);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
    -webkit-appearance: none;
    appearance: none;
}

.facetwp-flyout .awcf-apply-btn:hover,
.facetwp-flyout .awcf-apply-btn:focus {
    /* Iets donkerder accent op hover. */
    background: var(--awcf-accent-hover, #6f4b6a);
    color: #ffffff;
}

/* Ruimte onderaan de scrollende inhoud zodat de laatste facet niet achter
   de sticky knop verdwijnt. */
.facetwp-flyout .facetwp-flyout-wrap {
    padding-bottom: 76px !important;
}

/* Alleen ingelogde beheerders zien de WP-adminbalk (46px), waardoor de flyout
   46px onder het scherm valt en de sticky knop wegvalt. Bezoekers hebben de
   adminbalk niet. Hier houden we de flyout binnen het scherm. */
.admin-bar .facetwp-flyout {
    height: calc(100% - 46px) !important;
}

/* =========================================================
   2. Filter-inline (opt-in)
   De JS voegt .awcf-mfi-row (de rij) en .awcf-mfi-filter (de Filter-accordion)
   toe. Alleen actief binnen de mobiele breakpoint.
   ========================================================= */
@media (max-width: 1024px) {

    /* De rij: Filter links, Sorteer op rechts. */
    .awcf-mfi-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 10px;
        row-gap: 10px;
    }

    /* Filter-accordion als pill, links. margin-right:auto duwt de rest rechts. */
    .awcf-mfi-filter {
        flex: 0 0 auto;
        order: 0;
        width: auto !important;
        margin: 0 auto 0 0 !important;
    }

    /* De "Filter"-titel als pill: zelfde font/rand als Sorteer op, pilvorm. */
    .awcf-mfi-filter .e-n-accordion-item-title,
    .awcf-mfi-filter summary {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        width: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 8px 16px !important;
        border: 1px solid #e4e4e4 !important;
        border-radius: 99px !important;
        background: #fff !important;
        color: #000 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        cursor: pointer;
        list-style: none;
    }
    .awcf-mfi-filter summary::-webkit-details-marker {
        display: none;
    }

    /* Open: de Filter-accordion neemt de volle breedte onderaan de rij →
       full-width uitklappen (Sorteer op blijft op de bovenste regel). */
    .awcf-mfi-filter:has(.e-n-accordion-item[open]),
    .awcf-mfi-filter:has(details[open]) {
        flex: 0 0 100% !important;
        order: 99 !important;
        margin-right: 0 !important;
    }
}

/* =========================================================
   Flyout — minder witruimte bovenaan + kleinere categorie-toggle (2026-08-17)
   De off-canvas flyout is inherent mobiel/tablet, dus geen media-query nodig;
   deze selectors raken alleen het flyout-paneel (nooit de desktop-sidebar).
   ========================================================= */

/* Compactere sluit-balk (was 40px met alleen een X rechts). */
.facetwp-flyout .facetwp-flyout-close {
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 10px !important;
    line-height: 1 !important;
}

/* Minder padding boven de eerste facet. */
.facetwp-flyout .facetwp-flyout-content {
    padding-top: 8px !important;
}

/* De echte eerste rij is de verborgen reset-facet; zet daarom de marge boven
   de kop van de eerstvolgende (zichtbare) rij ook op 0. */
.facetwp-flyout .flyout-row.facetwp-hidden:first-child + .flyout-row h3 {
    margin-top: 0 !important;
}

/* Categorie-uitklap-toggle (▼) in de flyout iets kleiner. */
.facetwp-flyout a.facetwp-toggle {
    font-size: 13px;
}

/* =========================================================
   Mobiel: compacter filter-blok + kleinere "Filters"-knop (2026-08-18)
   Op telefoon (<768px) krijgt de filter-balk (het Elementor-blok met
   "Filters" + "Sorteer op") 8px padding rondom i.p.v. 14px, en de
   "Filters"-knop dezelfde 13px als de andere bediening (Zoeken, Sorteer op,
   placeholder). Het Elementor-ID is template-specifiek voor deze categorie-
   template; de facetwp-button-selector is generiek.
   ========================================================= */
@media (max-width: 767px) {
    .elementor-element.elementor-element-9a52c12 {
        padding: 8px !important;
    }

    .elementor-widget-facetwp-button .elementor-button-text {
        font-size: 13px;
    }

    /* Compacter: "Filters"-knop + "Sorteer op" minder hoog (~30px), zodat de
       hele filterbalk lager wordt. Elementor rendert de trigger op 37px zonder
       vindbare CSS-regel → met !important forceren. */
    #AW_Filters.elementor-button,
    #AW_Filters,
    .awcf-filter-trigger.elementor-button,
    .awcf-filter-trigger {
        height: 30px !important;
        min-height: 30px !important;
    }
    .facetwp-type-sort select {
        height: 30px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}