/*
 * === Filters overrides ===
 * Losse stylesheet die de basis-filterstyling uit frontend.css overschrijft.
 * Wordt ná frontend.css ingeladen, de custom CSS uit de admin ("Filter opmaak
 * aanpassen") wordt hier weer ná ingeladen en wint dus nog steeds.
 *
 * Huisstijlkleur: #008E90
 *
 * Aanpasbaar via de variabelen in :root hieronder.
 */

:root {
    /* Huisstijl */
    --vw-brand: #008E90;
    --vw-brand-hover: #007577;

    /* Filters card */
    --vw-filters-width: 360px;
    --vw-filters-bg: #fff;
    --vw-filters-border: #E6E6E6;
    --vw-filters-radius: 16px;
    --vw-filters-padding: 24px;
    --vw-filters-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);

    /* Typografie */
    --vw-text: #1A1A1A;
    --vw-muted: #666666;
    --vw-heading: #1A1A1A;

    /* Groepen: geen scheidingslijnen, alleen ruimte */
    --vw-group-border: transparent;
    --vw-group-gap: 32px;

    /* Inklapbare groep: titel links, plus/min rechts */
    --vw-filter-heading-padding: 10px 0;
    --vw-filter-heading-line: #E6E6E6;
    --vw-filter-toggle-size: 20px;
    --vw-filter-toggle-thickness: 1.5px;
    --vw-filter-toggle-color: var(--vw-heading);

    /* Inputs */
    --vw-input-bg: #FAFAFA;
    --vw-input-border: #D4D4D4;
    --vw-input-radius: 10px;
    --vw-input-padding: 15px 16px;
    --vw-input-focus-border: var(--vw-brand);
    --vw-input-focus-shadow: 0 0 0 3px rgba(0, 142, 144, 0.18);

    /* Knoppen */
    --vw-btn-bg: var(--vw-brand);
    --vw-btn-bg-hover: var(--vw-brand-hover);
    --vw-btn-radius: 10px;
    --vw-btn-padding: 13px 22px;
    --vw-btn-text: #fff;

    /* Mobiel paneel (Gedrag → Mobiel → Schermvullend) */
    --vw-filters-panel-width: 100%;
    --vw-filters-panel-padding: 20px;
    --vw-filters-panel-backdrop: rgba(0, 0, 0, 0.45);
    --vw-panel-line: #E6E6E6;
    /* Hoger dan een sticky menu van het thema; verlaag als het paneel ergens
       overheen moet blijven staan. */
    --vw-filters-panel-z: 99999;

    /* Reset knop */
    --vw-reset-bg: #fff;
    --vw-reset-border: #D4D4D4;
    --vw-reset-text: var(--vw-brand);
    --vw-reset-border-hover: var(--vw-brand);
    --vw-reset-text-hover: var(--vw-brand-hover);
}

/* ---------------------------------------------------------------- Card */

.vacancy-website-filters {
    color: var(--vw-text);
    line-height: 1.4;
}

/* ------------------------------------------------- Titel als teal pill */

.vacancy-website-filters h3 {
    display: inline-block;
    margin: 0 0 24px;
    padding: 10px 18px;
    background: var(--vw-brand);
    color: #fff;
    border-radius: 8px;
    font-size: 0; /* verbergt de originele tekst, blijft leesbaar voor screenreaders */
    font-weight: 500;
}

.vacancy-website-filters h3::after {
    content: "Filteren";
    font-size: calc(18px * var(--vw-font-scale, 1));
    line-height: 1.2;
}

/* -------------------------------------------------------- Groepen */

.vw-filter-group {
    margin-top: var(--vw-group-gap);
    padding-top: 0;
    border-top: 0;
}

.vw-filter-group > strong {
    font-size: calc(19px * var(--vw-font-scale, 1));
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vw-heading);
    margin: 0 0 14px;
}

/* Zoek- en locatievelden staan direct onder de pill, zonder kopje */
.vw-filter-group--search,
.vw-filter-group--location {
    margin-top: 12px;
}

.vw-filter-group--search > strong,
.vw-filter-group--location > strong {
    display: none;
}

/* -------------------------------------------------------- Inputs */

.vw-filter-item input[type="text"],
.vw-filter-item input[type="number"] {
    border: 1px solid var(--vw-input-border);
    border-radius: var(--vw-input-radius);
    padding: var(--vw-input-padding);
    background: var(--vw-input-bg);
    font-size: calc(16px * var(--vw-font-scale, 1));
    line-height: 1.3;
    color: var(--vw-text);
}

.vw-filter-item input[type="text"]::placeholder,
.vw-filter-item input[type="number"]::placeholder {
    color: var(--vw-muted);
    opacity: 1;
}

.vw-filter-item input[type="text"]:focus,
.vw-filter-item input[type="number"]:focus {
    border-color: var(--vw-input-focus-border);
    box-shadow: var(--vw-input-focus-shadow);
}

/* Spinners van nummervelden weg */
.vw-filter-item input[type="number"] {
    -moz-appearance: textfield;
}

.vw-filter-item input[type="number"]::-webkit-outer-spin-button,
.vw-filter-item input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ------------------------------------------- Locatie: postcode + km in één veld */

.vw-filter-group--location {
    display: flex;
    align-items: stretch;
    background: var(--vw-input-bg);
    border: 1px solid var(--vw-input-border);
    border-radius: var(--vw-input-radius);
    overflow: hidden;
}

.vw-filter-group--location .vw-filter-item {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 0; /* verbergt de labelteksten "Postcode" / "Afstand (km)" */
}

.vw-filter-group--location .vw-filter-item:nth-of-type(1) {
    flex: 1 1 auto;
    min-width: 0;
}

.vw-filter-group--location .vw-filter-item:nth-of-type(2) {
    flex: 0 0 auto;
}

.vw-filter-group--location .vw-filter-item:nth-of-type(2) input[type="number"] {
    width: 62px;
    text-align: right;
    padding-right: 4px;
}

/* "km" achter het afstandsveld */
.vw-filter-group--location .vw-filter-item:nth-of-type(2)::after {
    content: "km";
    padding: 0 16px 0 4px;
    font-size: calc(16px * var(--vw-font-scale, 1));
    color: var(--vw-text);
}

.vw-filter-group--location .vw-filter-item input[type="text"],
.vw-filter-group--location .vw-filter-item input[type="number"] {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.vw-filter-group--location .vw-filter-item input:focus {
    box-shadow: none;
}

.vw-filter-group--location:focus-within {
    border-color: var(--vw-input-focus-border);
    box-shadow: var(--vw-input-focus-shadow);
}

/* ------------------------------------------------- Salaris: min / max naast elkaar */

/*
 * Alleen in de min/max-modus. Staat het salarisfilter op vinkjes, dan is het een
 * normale checkboxlijst (.is-checkbox-list) en moeten deze regels niet gelden.
 */
.vw-filter-group--salary.is-min-max {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.vw-filter-group--salary.is-min-max > strong {
    grid-column: 1 / -1;
}

.vw-filter-group--salary.is-min-max .vw-filter-item {
    margin: 0;
    font-size: calc(14px * var(--vw-font-scale, 1));
    color: var(--vw-muted);
}

.vw-filter-group--salary.is-min-max .vw-filter-item br {
    display: block;
    content: "";
    margin-bottom: 6px;
}

/* ----------------------------------------------- Checkbox-lijsten */

.vw-filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 7px 0;
    font-size: calc(16px * var(--vw-font-scale, 1));
    color: var(--vw-text);
    cursor: pointer;
}

.vw-filter-item input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid #4D4D4D;
    border-radius: 4px;
    cursor: pointer;
}

.vw-filter-item input[type="checkbox"]:checked {
    background: var(--vw-brand);
    border-color: var(--vw-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.vw-filter-item input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--vw-input-focus-shadow);
}

/* Tekstvelden mogen geen flex-item-gedrag van hierboven overnemen */
.vw-filter-group--search .vw-filter-item,
.vw-filter-group--location .vw-filter-item,
.vw-filter-group--salary.is-min-max .vw-filter-item {
    cursor: default;
}

.vw-filter-group--search .vw-filter-item,
.vw-filter-group--salary.is-min-max .vw-filter-item {
    display: block;
    padding: 0;
}

/* -------------------------------------------------------- Knoppen */

.vw-filter-actions {
    gap: 12px;
    margin-top: 28px;
}

.vw-filter-actions button {
    font-size: calc(16px * var(--vw-font-scale, 1));
    font-weight: 500;
}

.vw-filter-actions .vw-reset {
    font-weight: 500;
}

/* ------------------------------------------- Inklapbare filtergroepen */

/*
 * Groepen die in de admin op "ingeklapt starten" staan krijgen een knop als
 * kop. De <strong> daarbinnen wordt hetzelfde opgemaakt als een normale
 * groepskop, zodat een ingeklapte groep er niet anders uitziet.
 */
/*
 * De kop is een <button>, en veel thema's stijlen álle buttons met een selector
 * van één klasse-gewicht ([type="button"], button). Zo'n regel staat later in de
 * cascade en wint dan van .vw-filter-group-heading alleen — met als gevolg een
 * kop die eruitziet als een themaknop en, doordat display:inline-block wint, een
 * plus/min-teken van 0 bij 0 pixels. Vandaar de extra klasse ervoor, en het
 * expliciet terugzetten van wat zo'n knoppen-reset meebrengt.
 */
.vacancy-website-filters .vw-filter-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: var(--vw-filter-heading-padding);
    border: 0;
    border-bottom: 1px solid var(--vw-filter-heading-line);
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: normal;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
}

.vacancy-website-filters .vw-filter-group-heading:hover,
.vacancy-website-filters .vw-filter-group-heading:focus {
    background: none;
}

/* De hele regel is klikbaar, dus laat dat ook zien. De variabele kleurt de
   streepjes van het plus/min-teken mee. */
.vacancy-website-filters .vw-filter-group-heading:hover {
    --vw-filter-toggle-color: var(--vw-brand);
}

.vacancy-website-filters .vw-filter-group-heading:hover > strong {
    color: var(--vw-brand);
}

.vacancy-website-filters .vw-filter-group-heading:focus-visible {
    outline: 2px solid var(--vw-brand);
    outline-offset: 3px;
}

.vacancy-website-filters .vw-filter-group-heading > strong {
    display: block;
    font-size: calc(19px * var(--vw-font-scale, 1));
    font-weight: 500;
    color: var(--vw-heading);
    margin: 0;
}

/*
 * Plus/min in plaats van een pijltje: dicht is een plus, open een min. De twee
 * streepjes zijn pseudo-elementen, dus het teken schaalt mee met
 * --vw-filter-toggle-size en heeft geen afbeelding nodig.
 *
 * De mask-regels zetten expliciet het oude pijltje uit: stond er nog een
 * gecachte stylesheet met dat masker, dan zou het er dwars door de streepjes
 * heen staan.
 */
.vacancy-website-filters .vw-filter-group-chevron {
    position: relative;
    flex: 0 0 auto;
    width: var(--vw-filter-toggle-size);
    height: var(--vw-filter-toggle-size);
    background-color: transparent;
    -webkit-mask-image: none;
    mask-image: none;
}

.vacancy-website-filters .vw-filter-group-chevron::before,
.vacancy-website-filters .vw-filter-group-chevron::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: var(--vw-filter-toggle-thickness);
    margin-top: calc(var(--vw-filter-toggle-thickness) / -2);
    border-radius: var(--vw-filter-toggle-thickness);
    background: var(--vw-filter-toggle-color);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Het staande streepje maakt de plus; bij een open groep draait het weg. */
.vacancy-website-filters .vw-filter-group-chevron::after {
    transform: rotate(90deg);
}

.vacancy-website-filters .vw-filter-group:not(.is-collapsed) .vw-filter-group-chevron::after {
    transform: rotate(0deg);
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    /* Even specifiek als de regel hierboven, anders wint die alsnog. */
    .vacancy-website-filters .vw-filter-group-chevron::before,
    .vacancy-website-filters .vw-filter-group-chevron::after {
        transition: none;
    }
}

.vw-filter-group.is-collapsible .vw-filter-group-body {
    margin-top: 14px;
}

.vw-filter-group.is-collapsed .vw-filter-group-body {
    display: none;
}

/* ----------------------------------------- Aantal vacatures per optie */

.vw-filter-item-label {
    flex: 1 1 auto;
    min-width: 0;
}

.vw-filter-count {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--vw-muted);
    font-size: calc(15px * var(--vw-font-scale, 1));
    font-variant-numeric: tabular-nums;
}

/* Opties zonder resultaten binnen de huidige selectie. */
.vw-filter-item.is-empty {
    opacity: 0.45;
}

/* ------------------------------------------------------ Filters wissen */

.vw-filter-clear {
    color: var(--vw-brand);
    font-size: calc(16px * var(--vw-font-scale, 1));
    text-decoration: underline;
}

/* -------------------------------------------------------- Mobiel */

/* Knop en paneelkop bestaan alleen op mobiel; desktop toont het filter open. */
.vw-filters-toggle,
.vw-filters-panel-head {
    display: none;
}

/*
 * Boven de mobiele breedte blijft de knop weg, ook als de "toon" regels uit de
 * media query hieronder ergens anders opduiken — in eigen CSS of in een oudere
 * stylesheet uit de cache. Die regels hebben twee klassen en winnen daardoor van
 * .vw-filters-toggle alleen; deze hebben er evenveel en staan later.
 */
@media (min-width: 901px) {
    .vacancy-website-filters--collapsible .vw-filters-toggle,
    .vacancy-website-filters--panel .vw-filters-panel-head {
        display: none;
    }

    /* Om dezelfde reden: het filter zelf staat op desktop altijd open, en nooit
       als los paneel over de pagina. */
    .vacancy-website-filters--collapsible .vw-filters-form,
    .vacancy-website-filters--panel .vw-filters-form {
        display: block;
        position: static;
        visibility: visible;
        transform: none;
        overflow: visible;
        margin: 0;
        padding: 0;
        max-width: none;
        background: none;
    }

    .vacancy-website-filters--panel.is-open::after {
        content: none;
    }
}

@media (max-width: 900px) {
    .vacancy-website-filters {
        width: 100%;
        flex: 0 0 auto;
    }

    .vacancy-website-filters--collapsible .vw-filters-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: var(--vw-btn-padding);
        border: 0;
        border-radius: var(--vw-btn-radius);
        background: var(--vw-btn-bg);
        color: var(--vw-btn-text);
        font-size: calc(16px * var(--vw-font-scale, 1));
        font-weight: 500;
        cursor: pointer;
    }

    .vacancy-website-filters--collapsible .vw-filters-toggle:hover,
    .vacancy-website-filters--collapsible .vw-filters-toggle:focus {
        background: var(--vw-btn-bg-hover);
        color: var(--vw-btn-text);
    }

    .vw-filters-toggle-icon {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        background-color: currentColor;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M10 17h4'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M10 17h4'/%3E%3C/svg%3E");
    }

    .vw-filters-toggle-count {
        margin-left: auto;
        min-width: 24px;
        padding: 2px 7px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
        font-size: calc(14px * var(--vw-font-scale, 1));
        text-align: center;
    }

    .vacancy-website-filters--collapsible .vw-filters-form {
        display: none;
    }

    .vacancy-website-filters--collapsible.is-open .vw-filters-form {
        display: block;
        margin-top: 18px;
    }

    /* De knop zegt al "Filters", de kop erboven is dan dubbelop. */
    .vacancy-website-filters--collapsible .vw-filters-form > h3 {
        display: none;
    }

    /* ------------------------------------- Schermvullend paneel (uitschuiven)
     *
     * Instelling Filters → Gedrag → Mobiel → "Schermvullend". Het filter is dan
     * geen uitklap in de pagina maar een paneel dat vanaf de zijkant over het
     * scherm schuift. De kaartopmaak van de zijbalk gaat eraf: op mobiel staat
     * er dan alleen nog de knop.
     */
    .vacancy-website-filters--panel {
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }

    /* Verduistering achter het paneel. Een pseudo-element, dus zonder extra
       markup; een klik erop komt bij de <aside> terecht en sluit het paneel. */
    .vacancy-website-filters--panel.is-open::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: calc(var(--vw-filters-panel-z) - 1);
        background: var(--vw-filters-panel-backdrop);
    }

    /* Niet elk thema zet box-sizing globaal; zonder dit telt de padding bij de
       breedte op en is het paneel breder dan het scherm. */
    .vacancy-website-filters--panel .vw-filters-form,
    .vacancy-website-filters--panel .vw-filters-panel-head,
    .vacancy-website-filters--panel .vw-filter-actions {
        box-sizing: border-box;
    }

    .vacancy-website-filters--panel .vw-filters-form {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: var(--vw-filters-panel-z);
        width: var(--vw-filters-panel-width);
        max-width: 100%;
        margin: 0;
        padding: 0 var(--vw-filters-panel-padding) var(--vw-filters-panel-padding);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: var(--vw-filters-bg);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);

        /*
         * Dicht: uit beeld geschoven én onbereikbaar voor tab en screenreader.
         * De visibility schakelt pas ná het uitschuiven, zodat de animatie te
         * zien is; bij openen (de regel hieronder) juist meteen, want een veld
         * met visibility:hidden kan geen focus krijgen.
         */
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.28s ease, visibility 0s linear 0.28s;
    }

    .vacancy-website-filters--panel.is-open .vw-filters-form {
        margin: 0;
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.28s ease, visibility 0s linear 0s;
    }

    @media (prefers-reduced-motion: reduce) {
        .vacancy-website-filters--panel .vw-filters-form {
            transition: none;
        }
    }

    /* Titelbalk blijft staan tijdens scrollen; de negatieve marges laten hem
       van rand tot rand lopen binnen de padding van het paneel. */
    .vacancy-website-filters--panel .vw-filters-panel-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 calc(var(--vw-filters-panel-padding) * -1) 4px;
        padding: 14px var(--vw-filters-panel-padding);
        background: var(--vw-filters-bg);
        border-bottom: 1px solid var(--vw-panel-line);
    }

    .vw-filters-panel-title {
        font-size: calc(19px * var(--vw-font-scale, 1));
        font-weight: 500;
        color: var(--vw-heading);
    }

    .vw-filters-close {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-right: -8px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: none;
        color: var(--vw-heading);
        cursor: pointer;
    }

    .vw-filters-close:hover,
    .vw-filters-close:focus {
        background: rgba(0, 0, 0, 0.06);
    }

    .vw-filters-close-icon {
        width: 20px;
        height: 20px;
        background-color: currentColor;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12'/%3E%3Cpath d='M18 6L6 18'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12'/%3E%3Cpath d='M18 6L6 18'/%3E%3C/svg%3E");
    }

    /* Toepassen/Reset blijven onderaan in beeld, ook bij een lange filterlijst. */
    .vacancy-website-filters--panel .vw-filter-actions {
        position: sticky;
        bottom: 0;
        margin: 24px calc(var(--vw-filters-panel-padding) * -1) 0;
        padding: 14px var(--vw-filters-panel-padding);
        background: var(--vw-filters-bg);
        border-top: 1px solid var(--vw-panel-line);
    }

    .vacancy-website-filters--panel .vw-filter-actions button {
        flex: 1 1 auto;
    }
}