/**
 * Vacature-overzicht: [rbd_vacature_filters] + [rbd_vacature_list]
 * Pas de variabelen hieronder aan om de stijl te wijzigen.
 * Kleuren en fonts komen uit Divi (--gcid-*, --et_global_heading_font), met een vaste waarde als terugval.
 */
:root {
    /* Algemeen */
    --rbd-vac-font: var(--et_global_heading_font, 'DIN Regular'), Helvetica, Arial, sans-serif;
    --rbd-vac-body-font: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
    --rbd-vac-primary: var(--gcid-primary-color, #002458);       /* Navy: titels, iconen, knoppen */
    --rbd-vac-primary-hover: #001a40;
    --rbd-vac-heading: var(--gcid-heading-color, #002458);
    --rbd-vac-text: var(--gcid-body-color, rgba(0, 36, 88, 0.8));
    --rbd-vac-red: var(--gcid-secondary-color, #ff0000);          /* Pijl-knopjes */
    --rbd-vac-white: var(--gcid-n0rejr3tw1, #ffffff);
    --rbd-vac-transition: 0.2s ease;

    /* Filters in de zijkolom (lichte achtergrond) */
    --rbd-vac-sidebar-title-color: var(--rbd-vac-heading);
    --rbd-vac-sidebar-title-size: 23px;
    --rbd-vac-sidebar-title-weight: 500;
    --rbd-vac-sidebar-option-color: var(--rbd-vac-text);
    --rbd-vac-sidebar-option-active: var(--rbd-vac-primary);
    --rbd-vac-sidebar-option-size: 15px;
    --rbd-vac-sidebar-option-weight-active: 400;
    --rbd-vac-sidebar-option-stroke: 0.35px;  /* Extra vet: er is alleen een DIN Regular-bestand. 0 = uit */
    --rbd-vac-sidebar-option-gap: 4px;
    --rbd-vac-sidebar-group-gap: 40px;

    /* Filters op donkere achtergrond (sollicitatieformulier, koffie-modal, FAQ, job alert) */
    --rbd-vac-filter-color: var(--rbd-vac-white);
    --rbd-vac-filter-title-size: 22px;
    --rbd-vac-filter-title-weight: 700;
    --rbd-vac-filter-label-size: 17px;
    --rbd-vac-filter-group-gap: 31px;
    --rbd-vac-filter-option-gap: 6px;

    /* Checkbox */
    --rbd-vac-check-size: 22px;
    --rbd-vac-check-bg: #ffffff;
    --rbd-vac-check-border: var(--rbd-vac-primary);
    --rbd-vac-check-radius: 2px;
    --rbd-vac-check-mark: var(--rbd-vac-primary);
    --rbd-vac-check-focus: rgba(0, 36, 88, 0.25);

    /* Dropdown */
    --rbd-vac-select-bg: #ffffff;
    --rbd-vac-select-color: var(--rbd-vac-primary);
    --rbd-vac-select-size: 16px;
    --rbd-vac-select-height: 50px;
    --rbd-vac-select-radius: 0;

    /* Kaarten */
    --rbd-vac-card-bg: #d5e0ea;
    --rbd-vac-card-radius: 0;
    --rbd-vac-card-padding: 28px 30px 26px;
    --rbd-vac-card-gap: 18px;
    --rbd-vac-card-shadow: none;
    --rbd-vac-card-hover-opacity: 1;
    --rbd-vac-card-min-height: 270px;
    --rbd-vac-image-width: 31%;
    --rbd-vac-eyebrow-size: 18px;
    --rbd-vac-eyebrow-weight: 500;
    --rbd-vac-title-size: 26px;
    --rbd-vac-title-weight: 600;
    --rbd-vac-text-size: 20px;
    --rbd-vac-text-line-height: 1.6;
    --rbd-vac-more-label-size: 19px;
    --rbd-vac-arrow-size: 36px;
    --rbd-vac-arrow-color: var(--rbd-vac-red);

    /* Kenmerken op de kaart (plaats, dienstverband, ervaring, salaris) */
    --rbd-vac-meta-color: var(--rbd-vac-text);
    --rbd-vac-meta-icon-color: var(--rbd-vac-primary);
    --rbd-vac-meta-size: 16px;
    --rbd-vac-meta-gap: 8px 22px;

    /* Badges als "pil" (koffie-modal, job alert, formulier) */
    --rbd-vac-badge-bg: #e6edf3;
    --rbd-vac-badge-color: var(--rbd-vac-primary);
    --rbd-vac-badge-size: 13px;
    --rbd-vac-badge-weight: 600;
    --rbd-vac-badge-radius: 999px;
    --rbd-vac-badge-padding: 7px 12px;

    /* Geen vacatures gevonden */
    --rbd-vac-empty-bg: var(--rbd-vac-card-bg);
    --rbd-vac-empty-icon-bg: #ffffff;
    --rbd-vac-empty-padding: 56px 32px;

    /* Knop */
    --rbd-vac-button-bg: var(--rbd-vac-primary);
    --rbd-vac-button-bg-hover: var(--rbd-vac-primary-hover);
    --rbd-vac-button-color: #ffffff;
    --rbd-vac-button-radius: 0;

    /* Meer vacatures tonen */
    --rbd-vac-more-bg: var(--rbd-vac-primary);
    --rbd-vac-more-bg-hover: var(--rbd-vac-primary-hover);
    --rbd-vac-more-color: #ffffff;
    --rbd-vac-more-spacing: 20px;

    /* Mobiel: zwevende filterknop (zelfde stijl als het zwevende venster, job-cta.css) */
    --rbd-vac-toggle-bg: #e40000d6;
    --rbd-vac-toggle-color: #ffffff;
    --rbd-vac-toggle-size: 15px;
    --rbd-vac-toggle-padding: 0 14px 0 16px;
    --rbd-vac-toggle-height: 44px;
    --rbd-vac-toggle-bottom: 16px;           /* Boven de CTA-balk: wordt in job-cta.css overschreven */
    --rbd-vac-toggle-shadow: none;
    --rbd-vac-toggle-count-bg: #ffffff;
    --rbd-vac-toggle-count-color: var(--rbd-vac-red);

    /* Mobiel: filterpaneel (popup vanaf onderen) */
    --rbd-vac-panel-bg: #ffffff;
    --rbd-vac-panel-radius: 0;
    --rbd-vac-panel-padding: 20px;
    --rbd-vac-panel-max-height: 85vh;
    --rbd-vac-panel-divider: rgba(0, 36, 88, 0.12);
    --rbd-vac-backdrop: rgba(0, 20, 50, 0.6);
    --rbd-vac-z-index: 100000;            /* Boven de Divi-header */

    /* Kennismaken-modal (zie coffee.css) */
    --rbd-vac-modal-bg: #ffffff;

    /* FAQ: [rbd_faq_homepage] + [rbd_faq_detailpage] (zie apply-faq.css) */
    --rbd-vac-faq-heading-color: var(--rbd-vac-heading);           /* Op lichte achtergrond (detailpagina) */
    --rbd-vac-faq-heading-color-dark: var(--rbd-vac-white);        /* Op donkere achtergrond (homepage) */
    --rbd-vac-faq-question-size: clamp(1rem, 0.7955rem + 0.9091vw, 1.5rem);
    --rbd-vac-faq-question-weight: 700;
    --rbd-vac-faq-question-padding: 20px 24px;
    --rbd-vac-faq-answer-padding: 0 24px 22px;
    --rbd-vac-faq-chip-size: 18px;
    --rbd-vac-faq-chip-weight: 600;
    --rbd-vac-faq-chip-padding: 10px 18px;

    /* Sollicitatieformulier [rbd_apply_form] (zie apply-form.css) */
    --rbd-vac-input-bg: var(--rbd-vac-select-bg);
    --rbd-vac-input-color: var(--rbd-vac-select-color);
    --rbd-vac-input-size: var(--rbd-vac-select-size);
    --rbd-vac-input-height: var(--rbd-vac-select-height);
    --rbd-vac-input-radius: var(--rbd-vac-select-radius);
    --rbd-vac-input-padding: 31px 20px;
    --rbd-vac-textarea-height: 200px;
    --rbd-vac-form-gap: 10px;
    --rbd-vac-form-small-size: 13px;
    --rbd-vac-accent: var(--rbd-vac-red);    /* Verzendknop */
    --rbd-vac-accent-hover: #d60000;
    --rbd-vac-accent-color: #ffffff;
    --rbd-vac-submit-radius: 0;
    --rbd-vac-error: #ffb3b3;                /* Foutmelding op donkere achtergrond */
    --rbd-vac-error-border: #e5484d;
    --rbd-vac-success: #1a7f37;
}

.rbd-vac-filters,
.rbd-vac-list,
.rbd-vac-mobile {
    font-family: var(--rbd-vac-font);
}

.rbd-vac-icon {
    display: block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
}

.rbd-vac-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Filters (zijkolom) ---------- */

.rbd-vac-filters {
    display: flex;
    flex-direction: column;
    gap: var(--rbd-vac-sidebar-group-gap);
}

.rbd-vac-filters__group {
    display: flex;
    flex-direction: column;
    gap: var(--rbd-vac-sidebar-option-gap);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.rbd-vac-filters__title {
    display: block;
    float: none;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    color: var(--rbd-vac-sidebar-title-color);
    font-family: var(--rbd-vac-font);
    font-size: var(--rbd-vac-sidebar-title-size);
    font-weight: var(--rbd-vac-sidebar-title-weight);
    line-height: 1.2;
}

/* Tekstlijst (één keuze): actieve optie vet */
.rbd-vac-option {
    position: relative;
    display: block;
    width: fit-content;
    color: var(--rbd-vac-sidebar-option-color);
    font-size: var(--rbd-vac-sidebar-option-size);
    line-height: 1.6;
    cursor: pointer;
    user-select: none;
    transition: color var(--rbd-vac-transition);
}

.rbd-vac-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.rbd-vac-option:hover {
    color: var(--rbd-vac-sidebar-option-active);
}

.rbd-vac-option input:checked + .rbd-vac-option__label {
    color: var(--rbd-vac-sidebar-option-active);
    font-weight: var(--rbd-vac-sidebar-option-weight-active);
    -webkit-text-stroke: var(--rbd-vac-sidebar-option-stroke) currentColor;
}

.rbd-vac-option input:focus-visible + .rbd-vac-option__label {
    outline: 2px solid var(--rbd-vac-primary);
    outline-offset: 2px;
}

/* Checkbox */
.rbd-vac-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--rbd-vac-sidebar-option-color);
    font-size: var(--rbd-vac-sidebar-option-size);
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
}

.rbd-vac-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.rbd-vac-check__box {
    position: relative;
    flex-shrink: 0;
    width: var(--rbd-vac-check-size);
    height: var(--rbd-vac-check-size);
    background: var(--rbd-vac-check-bg);
    border: 1px solid var(--rbd-vac-check-border);
    border-radius: var(--rbd-vac-check-radius);
    transition: box-shadow var(--rbd-vac-transition);
}

.rbd-vac-check__box::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    width: 30%;
    height: 55%;
    border: solid var(--rbd-vac-check-mark);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transition: transform var(--rbd-vac-transition);
}

.rbd-vac-check input:checked + .rbd-vac-check__box::after {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.rbd-vac-check input:focus-visible + .rbd-vac-check__box,
.rbd-vac-check:hover .rbd-vac-check__box {
    box-shadow: 0 0 0 3px var(--rbd-vac-check-focus);
}

/* Dropdown */
.rbd-vac-select {
    position: relative;
    color: var(--rbd-vac-select-color);
}

.rbd-vac-select select {
    width: 100%;
    height: var(--rbd-vac-select-height);
    padding: 0 40px 0 12px;
    color: var(--rbd-vac-select-color);
    background: var(--rbd-vac-select-bg);
    border: 1px solid var(--rbd-vac-panel-divider);
    border-radius: var(--rbd-vac-select-radius);
    font-family: var(--rbd-vac-font);
    font-size: var(--rbd-vac-select-size);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.rbd-vac-select select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rbd-vac-check-focus);
}

.rbd-vac-select .rbd-vac-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    font-size: 14px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* ---------- Lijst ---------- */

.rbd-vac-list {
    display: flex;
    flex-direction: column;
    gap: var(--rbd-vac-card-gap);
}

.rbd-vac-card[hidden],
.rbd-vac-empty[hidden] {
    display: none !important;
}

.rbd-vac-card {
    overflow: hidden;
    background: var(--rbd-vac-card-bg);
    border-radius: var(--rbd-vac-card-radius);
    box-shadow: var(--rbd-vac-card-shadow);
    animation: rbd-vac-fade-in 0.25s ease;
}

.rbd-vac-card__link {
    display: flex;
    align-items: stretch;
    min-height: var(--rbd-vac-card-min-height);
    color: var(--rbd-vac-text);
    text-decoration: none;
}

.rbd-vac-card__link:focus-visible {
    outline: 2px solid var(--rbd-vac-primary);
    outline-offset: -2px;
}

.rbd-vac-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: var(--rbd-vac-card-padding);
}

.rbd-vac-card__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--rbd-vac-heading);
    font-size: var(--rbd-vac-eyebrow-size);
    font-weight: var(--rbd-vac-eyebrow-weight);
    line-height: 1.3;
}

.rbd-vac-card__title {
    margin: 0 0 14px;
    padding: 0;
    color: var(--rbd-vac-heading);
    font-family: var(--rbd-vac-font);
    font-size: var(--rbd-vac-title-size);
    font-weight: var(--rbd-vac-title-weight);
    line-height: 1.2;
}

/* Kenmerken: icoon + tekst, zonder achtergrond */
.rbd-vac-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rbd-vac-meta-gap);
    margin: 0;
    padding: 0 !important;
    list-style: none;
}

.rbd-vac-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    color: var(--rbd-vac-meta-color);
    font-family: var(--rbd-vac-font);
    font-size: var(--rbd-vac-meta-size);
    line-height: 1.3;
    white-space: nowrap;
    list-style: none;
}

.rbd-vac-badge .rbd-vac-icon {
    color: var(--rbd-vac-meta-icon-color);
    font-size: 1.15em;
}

.rbd-vac-card__text {
    margin: 22px 0 0;
    padding: 0;
    color: var(--rbd-vac-text);
    font-size: var(--rbd-vac-text-size);
    line-height: var(--rbd-vac-text-line-height);
    font-weight: 300!important;
    font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300;
}

/* "Read more" + rood pijl-knopje rechtsonder */
.rbd-vac-card__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 24px;
    color: var(--rbd-vac-heading);
    font-size: var(--rbd-vac-more-label-size);
    font-weight: 500;
    line-height: 1.2;
}

.rbd-vac-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--rbd-vac-arrow-size);
    height: var(--rbd-vac-arrow-size);
    color: var(--rbd-vac-arrow-color);
    border: 2px solid currentColor;
    border-radius: 2px;
    font-size: calc(var(--rbd-vac-arrow-size) * 0.6);
    transition: color var(--rbd-vac-transition), background var(--rbd-vac-transition), border-color var(--rbd-vac-transition);
}

.rbd-vac-card:hover .rbd-vac-card__arrow,
.rbd-vac-card:focus-within .rbd-vac-card__arrow {
    color: #ffffff;
    background: var(--rbd-vac-arrow-color);
    border-color: var(--rbd-vac-arrow-color);
}

.rbd-vac-card__media {
    position: relative;
    flex: 0 0 var(--rbd-vac-image-width);
    overflow: hidden;
}

.rbd-vac-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.rbd-vac-card:hover .rbd-vac-card__image {
    transform: scale(1.04);
}

/* Placeholder (logo): helemaal zichtbaar, met marge rondom */
.rbd-vac-card.is-placeholder .rbd-vac-card__image {
    --rbd-vac-placeholder-margin: 20%;

    /* Een <img> rekt niet mee met inset, dus breedte/hoogte expliciet */
    inset: var(--rbd-vac-placeholder-margin);
    width: calc(100% - 2 * var(--rbd-vac-placeholder-margin));
    height: calc(100% - 2 * var(--rbd-vac-placeholder-margin)) !important;
    object-fit: contain;
}

/* ---------- Geen vacatures gevonden ---------- */

.rbd-vac-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--rbd-vac-empty-padding);
    color: var(--rbd-vac-text);
    text-align: center;
    background: var(--rbd-vac-empty-bg);
    border-radius: var(--rbd-vac-card-radius);
    animation: rbd-vac-fade-in 0.25s ease;
}

.rbd-vac-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    color: var(--rbd-vac-primary);
    background: var(--rbd-vac-empty-icon-bg);
    border-radius: 50%;
    font-size: 28px;
}

.rbd-vac-empty__title {
    margin: 0;
    padding: 0;
    color: var(--rbd-vac-heading);
    font-family: var(--rbd-vac-font);
    font-size: var(--rbd-vac-title-size);
    font-weight: var(--rbd-vac-title-weight);
    line-height: 1.25;
}

.rbd-vac-empty__text {
    max-width: 420px;
    margin: 10px 0 0;
    padding: 0;
    font-size: var(--rbd-vac-text-size);
    line-height: var(--rbd-vac-text-line-height);
}

.rbd-vac-button {
    display: inline-block;
    margin-top: 24px;
    padding: 13px 26px;
    color: var(--rbd-vac-button-color) !important;
    background: var(--rbd-vac-button-bg);
    border: 0;
    border-radius: var(--rbd-vac-button-radius);
    font-family: var(--rbd-vac-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--rbd-vac-transition);
}

.rbd-vac-button:hover,
.rbd-vac-button:focus-visible {
    background: var(--rbd-vac-button-bg-hover);
}

/* Meer vacatures tonen */
.rbd-vac-more[hidden] {
    display: none !important;
}

.rbd-vac-more {
    display: flex;
    justify-content: center;
    padding-top: var(--rbd-vac-more-spacing);
}

.rbd-vac-list .rbd-vac-more__button {
    margin-top: 0;
    color: var(--rbd-vac-more-color) !important;
    background: var(--rbd-vac-more-bg);
}

.rbd-vac-list .rbd-vac-more__button:hover,
.rbd-vac-list .rbd-vac-more__button:focus-visible {
    background: var(--rbd-vac-more-bg-hover);
}

.rbd-vac-more__count {
    margin-left: 4px;
    opacity: 0.7;
}

.rbd-vac-filters .rbd-vac-button {
    align-self: flex-start;
    margin-top: 0;
}

@keyframes rbd-vac-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .rbd-vac-card,
    .rbd-vac-empty,
    .rbd-vac-card__image {
        animation: none;
        transition: none;
    }
}

/* ---------- Mobiel paneel (uit wp_footer, alleen actief onder de breakpoint) ---------- */

.rbd-vac-mobile {
    display: none;
}

.rbd-vac-filter-toggle__count[hidden] {
    display: none !important;
}

/* ---------- Tablet + mobiel (Divi zet kolommen hier onder elkaar) ---------- */

@media (max-width: 980px) {
    /* Zijkolom verbergen, het formulier staat dan in het paneel */
    html.rbd-vac-js .rbd-vac-filters-wrap {
        display: none;
    }

    html.rbd-vac-js .rbd-vac-mobile {
        display: block;
    }

    /* Ruimte zodat de zwevende knop de laatste kaart niet afdekt */
    html.rbd-vac-js .rbd-vac-list {
        padding-bottom: 72px;
    }

    html.rbd-vac-locked,
    html.rbd-vac-locked body {
        overflow: hidden;
    }

    /* Zwevende knop: tab tegen de rechterrand, icoon in een wit kader (zoals de pijlen in de CTA) */
    .rbd-vac-filter-toggle {
        position: fixed;
        right: 0;
        bottom: calc(var(--rbd-vac-toggle-bottom) + env(safe-area-inset-bottom, 0px));
        z-index: var(--rbd-vac-z-index);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        height: var(--rbd-vac-toggle-height);
        margin: 0;
        padding: var(--rbd-vac-toggle-padding);
        color: var(--rbd-vac-toggle-color);
        background: var(--rbd-vac-toggle-bg);
        border: 0;
        border-bottom: 1px solid #ffffff63;
        border-radius: 0;
        box-shadow: var(--rbd-vac-toggle-shadow);
        backdrop-filter: blur(1px);
        font-family: var(--rbd-vac-font);
        font-size: var(--rbd-vac-toggle-size);
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity var(--rbd-vac-transition), transform var(--rbd-vac-transition), visibility var(--rbd-vac-transition);
    }

    .rbd-vac-mobile.is-in-view:not(.is-open) .rbd-vac-filter-toggle {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .rbd-vac-filter-toggle .rbd-vac-icon {
        order: 3;
        box-sizing: border-box;
        width: 20px;
        height: 20px;
        padding: 3px;
        border: 1.5px solid currentColor;
        border-radius: 2px;
    }

    .rbd-vac-filter-toggle__count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        color: var(--rbd-vac-toggle-count-color);
        background: var(--rbd-vac-toggle-count-bg);
        border-radius: 2px;
        font-size: 12px;
        font-weight: 700;
    }

    /* Achtergrond */
    .rbd-vac-backdrop {
        position: fixed;
        inset: 0;
        z-index: var(--rbd-vac-z-index);
        background: var(--rbd-vac-backdrop);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .rbd-vac-mobile.is-open .rbd-vac-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* Paneel */
    .rbd-vac-panel {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: calc(var(--rbd-vac-z-index) + 1);
        display: flex;
        flex-direction: column;
        max-height: var(--rbd-vac-panel-max-height);
        background: var(--rbd-vac-panel-bg);
        border-radius: var(--rbd-vac-panel-radius) var(--rbd-vac-panel-radius) 0 0;
        box-shadow: 0 -10px 40px rgba(0, 36, 88, 0.25);
        visibility: hidden;
        transform: translateY(100%);
        transition: transform 0.3s ease, visibility 0.3s ease;
    }

    .rbd-vac-mobile.is-open .rbd-vac-panel {
        visibility: visible;
        transform: translateY(0);
    }

    .rbd-vac-panel__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        padding: 16px var(--rbd-vac-panel-padding);
        border-bottom: 1px solid var(--rbd-vac-panel-divider);
    }

    .rbd-vac-panel__title {
        color: var(--rbd-vac-heading);
        font-size: var(--rbd-vac-sidebar-title-size);
        font-weight: 700;
        line-height: 1.2;
    }

    .rbd-vac-panel__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0 -8px 0 0;
        padding: 0;
        color: var(--rbd-vac-primary);
        background: transparent;
        border: 0;
        border-radius: 50%;
        font-size: 22px;
        cursor: pointer;
    }

    .rbd-vac-panel__close:focus-visible {
        outline: 2px solid var(--rbd-vac-primary);
    }

    .rbd-vac-panel__body {
        flex: 1;
        min-height: 0;
        padding: var(--rbd-vac-panel-padding);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .rbd-vac-panel__body .rbd-vac-filters {
        --rbd-vac-sidebar-group-gap: 28px;
    }

    .rbd-vac-panel__body .rbd-vac-option {
        --rbd-vac-sidebar-option-size: 16px;
        padding: 4px 0;
    }

    .rbd-vac-panel__footer {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-shrink: 0;
        padding: 14px var(--rbd-vac-panel-padding) calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--rbd-vac-panel-divider);
    }

    .rbd-vac-panel__reset {
        padding: 12px 4px;
        color: var(--rbd-vac-primary);
        background: transparent;
        border: 0;
        font-family: var(--rbd-vac-font);
        font-size: 15px;
        text-decoration: underline;
        cursor: pointer;
    }

    .rbd-vac-panel__footer .rbd-vac-panel__submit {
        flex: 1;
        margin: 0;
        padding: 14px 20px;
        text-align: center;
    }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
    .rbd-vac-filter-toggle,
    .rbd-vac-backdrop,
    .rbd-vac-panel {
        transition: none;
    }
}

/* ---------- Mobiel: afbeelding boven de tekst ---------- */

@media (max-width: 600px) {
    :root {
        --rbd-vac-title-size: 20px;
        --rbd-vac-card-padding: 20px 20px 18px;
        --rbd-vac-card-min-height: 0;
    }

    .rbd-vac-card__link {
        flex-direction: column-reverse;
    }

    .rbd-vac-card__media {
        flex-basis: auto;
        aspect-ratio: 16 / 9;
    }

    .rbd-vac-card__text {
        margin-top: 16px;
    }

    .rbd-vac-card__more {
        padding-top: 18px;
    }

    .rbd-vac-empty {
        --rbd-vac-empty-padding: 40px 20px;
    }
}

/* ---------- Menu: aantal open vacatures achter "Careers" ---------- */

.rbd-menu-badge {
    --rbd-menu-badge-bg: #335079;
    --rbd-menu-badge-color: #ffffff;
    --rbd-menu-badge-size: 22px;
    --rbd-menu-badge-font-size: 14px;
    font-weight: 800!important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--rbd-menu-badge-size);
    height: var(--rbd-menu-badge-size);
    margin-left: 6px;
    padding: 0 6px;
    color: var(--rbd-menu-badge-color);
    background: var(--rbd-menu-badge-bg);
    border-radius: 4px;
    font-family: var(--rbd-vac-font);
    font-size: var(--rbd-menu-badge-font-size) !important;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    vertical-align: middle;
    position: relative;
    top: -1px;
}


li.current-menu-item > a > span.rbd-menu-badge{
    background: #667C9B!important;
}