/*
 * Vacature-overzicht + filters — bewust dezelfde klassenamen en CSS-regels
 * als de oude otys-jobs-apply.css, zodat de look van /vacatures/ identiek
 * blijft nadat die plugin wordt uitgeschakeld. Regels 1-op-1 overgenomen
 * op 6 augustus 2026 uit otys-jobs-apply/assets/css/otys-jobs-apply.css.
 */
:root {
    --owp-main-color: #0062FF;
    --owp-default-text-color: #000;
    --owp-secondary-text-color: #666666;
    --owp-secondary-bg-color: #e9e9e9;
}

.owp-labels {
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;
    overflow: hidden;
}
.owp-label {
    /* Het lime/navy kleurenschema stond hiervoor los in Aanpassen > Extra
       CSS (WordPress Customizer) — een verouderde, kapotte regel (ontbrekende
       puntkomma na border-color at zorgde dat padding-left werd genegeerd,
       vandaar de scheve pill). Hier overgezet naar de plugin, met dezelfde
       kleuren maar correct en met de padding-fix. */
    background-color: rgba(208, 254, 29, .11); /* was #D0FE1D1C */
    border: 1px solid var(--atv-lime, #a3e635);
    color: var(--atv-navy, #0e2a47);
    flex-grow: 0;
    flex-shrink: 0;
    margin: 5px;
    /* Echt gecentreerd via flex i.p.v. alleen op line-height te vertrouwen
       (dat centreert enkel verticaal en gaf op mobiel een scheve indruk:
       tekst leek links dichter tegen de rand te staan dan rechts). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px; /* zelfde hoogte als voorheen via line-height:30px */
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 100px;
    padding: 0 10px;
}


/*
 * !important op de linkstijl: dit kaartje leeft in de theme's .entry-content
 * / .page-content, die eigen (onderstreepte, blauwe) linkstijlen op alle
 * tekst binnen een <a> zet met hogere specificiteit. Zonder !important wint
 * die theme-regel en oogt de hele kaart als kale onderstreepte link-tekst.
 */
.vacancies-list a.vacancy-content,
.vacancies-list a.vacancy-content:visited,
.vacancies-list a.vacancy-content * {
    text-decoration: none !important;
}
.vacancy-content {
    display: block;
    padding: 25px;
    background: #fff;
    text-decoration: none;
    color: initial;
    border: 1px solid #D1D1D1;
    border-radius: 15px;
    transition: border-color .15s ease-in-out;
}

/* -------------------------------------------------------------------
 * Eén platte grid voor de hele kaart (foto, titel, plaats+uren, tekst,
 * pills zijn stuk voor stuk directe grid-items — geen geneste wrappers
 * meer). Dat is bewust: alleen zo kan de volgorde per breakpoint écht
 * verschillen (plaats+uren tussen titel en tekst op mobiel, maar een
 * losstaande kolom rechts op desktop) zonder gedoe met JS of dubbele
 * markup. De twee media queries hieronder zetten dezelfde grid-items
 * simpelweg in een andere kaart via grid-template-areas.
 * ---------------------------------------------------------------- */
.vacancy-grid { display: grid; column-gap: 20px; row-gap: 10px; }
.vacancy-photo { grid-area: photo; align-self: start; border-radius: 10px; overflow: hidden; }
.vacancy-photo img { width: 100%; height: auto; display: block; }
.vacancies-list .vacancy .vacancy-title {
    grid-area: title;
    transition: color .2s ease-in-out;
    margin: 0;
    color: #000 !important;
    font-size: 18px;
    line-height: 1.3;
}
/* Alleen hover-effect voor apparaten met een échte muis — anders blijft op
   een touchscreen elke kaart die je duim passeert tijdens het scrollen
   "hangen" in de hover-status (geen mouseleave-event op touch). */
@media (hover: hover) and (pointer: fine) {
    .vacancy-content:hover { border-color: var(--atv-lime, #a3e635); }
    .vacancies-list .vacancy:hover .vacancy-title { color: var(--owp-main-color) !important; }
}
.vacancy-text {
    grid-area: text;
    color: var(--owp-secondary-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.vacancy-footer { grid-area: pills; }

.vacancy-meta-col {
    grid-area: meta;
    list-style: none;
    /* min-width:0 is hier het echte werk: een 1fr-grid-kolom valt zonder dit
       terug op de minimale breedte van zijn inhoud (min-width:auto), dus een
       lange plaatsnaam duwt de kolom breder dan zijn aandeel. */
    min-width: 0;
    margin: 0;
    /* list-style:none haalt alleen het bolletje weg, niet de browser-
       standaard linkerpadding die daarvoor gereserveerd is (~40px) — zonder
       deze regel stond de lijst daardoor los van de tekst/pills eronder. */
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.vacancy-meta-col li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--atv-navy, #0e2a47);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}
.vacancy-meta-col svg { flex: 0 0 auto; color: var(--atv-lime, #a3e635); }

/* Desktop/tablet-breed: foto | tekst-kolom | plaats+uren, 25% voor de
   laatste kolom (dus 75% voor foto+tekst samen). Plaats+uren spant de
   drie rijen en krijgt zo een verticale scheidingslijn over de volle
   kaarthoogte; de pills staan in dezelfde kolom als de titel/tekst, dus
   NIET onder de foto uitgelijnd. */
@media (min-width: 1025px) {
    .vacancy-grid {
        grid-template-columns: auto 1fr 25%;
        grid-template-areas:
            "photo title meta"
            "photo text  meta"
            "photo pills meta";
    }
    .vacancy-photo { width: 70px; }
    .vacancy-meta-col { padding-left: 20px; border-left: 1px solid #e1e5ee; }
}
/* Tablet-breedte (bv. iPad) al mee laten stapelen: bij 767.98px zou de
   rechterkolom hier nog te smal voor een plaatsnaam zijn geweest. */
@media (max-width: 1024px) {
    /* Foto + titel alleen bovenin naast elkaar (kleine kaartkop); plaats+uren,
       de omschrijving en de pills spannen daaronder elk de volle breedte —
       niet meer naast de foto gedrukt zoals eerst. */
    .vacancy-grid {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "photo title"
            "meta  meta"
            "text  text"
            "pills pills";
    }
    .vacancy-photo { width: 56px; }
    .vacancy-meta-col {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 6px 24px;
        margin-top: 4px;
    }
    /* Pills iets compacter, zodat Sector/Branche/Functiegroep op smal
       scherm eerder op één regel passen. */
    .owp-label { font-size: 11.5px; min-height: 22px; line-height: 1.2; padding: 0 6px; margin: 3px; }
}
.vacancies-list { margin: 0; padding: 0; list-style: none; }
.vacancies-list .vacancy:not(:last-child) { margin: 0 0 30px 0; }
@media (max-width: 767.98px) {
    /* Lucht onder de laatste kaart: die stond strak tegen de sectie-padding. */
    .vacancies-list .vacancy:last-child { margin-bottom: 24px; }
}

#vacancies-top { display: flex; flex-wrap: wrap; align-items: baseline; margin-bottom: 20px; }
.vacancies-title { flex-grow: 1; flex-shrink: 0; }
.vacancies-matchcriteria { padding-right: 30px; }
.matchcriteria-filters { margin: 0 0 24px 0; }
.matchcriteria-filters h4 {
    margin: 0 0 10px 0; font-size: 14px; font-weight: 700;
    text-transform: none; letter-spacing: normal; color: var(--atv-navy, #0e2a47);
}
.matchcriteria-filters ul { padding: 0; margin: 0; list-style: none; }
.matchcriteria-filters ul li label input[type="checkbox"] {
    position: absolute; opacity: 0; width: 1px; height: 1px;
}
.matchcriteria-filters ul li label span.option-count {
    font-size: 12px; font-weight: 500; color: #98a2b3;
}

/* ---------- Desktop: klassieke lijst met checkbox, subtiel gestyled in
   dezelfde taal als de paginering (ronde randjes, lime bij hover). ---------- */
.matchcriteria-filters ul li label {
    text-decoration: none;
    color: var(--atv-navy, #0e2a47);
    display: flex;
    align-items: center;
    min-height: 38px;
    border-radius: 8px;
    padding: 0 8px;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 500;
    transition: .15s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
    .matchcriteria-filters ul li label:hover { background: #f8fbee; }
}
.matchcriteria-filters ul li label span.option-name { flex-grow: 1; flex-shrink: 1; }
.matchcriteria-filters ul li label span.option-check {
    width: 18px; height: 18px; border-radius: 5px;
    border: 1.5px solid #c7cedb; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-grow: 0; flex-shrink: 0;
    margin: 0 10px 0 0; position: relative; transition: .15s ease-in-out;
}
.matchcriteria-filters ul li.active label span.option-check,
.matchcriteria-filters ul li.option-checked label span.option-check {
    background: var(--atv-lime, #a3e635); border-color: var(--atv-lime, #a3e635);
}
.matchcriteria-filters ul li.active label span.option-check svg,
.matchcriteria-filters ul li.option-checked label span.option-check svg { opacity: 1; }
.matchcriteria-filters ul li label span.option-check svg {
    color: var(--atv-navy, #0e2a47); opacity: 0; transition: opacity .1s ease-in-out;
}

/* ---------- Mobiel: pill-knoppen, zelfde stijl als de paginering. ---------- */
@media (max-width: 767.98px) {
    .matchcriteria-filters ul { display: flex; flex-wrap: wrap; gap: 8px; }
    .matchcriteria-filters ul li label {
        display: inline-flex; gap: 6px; height: 40px; border-radius: 10px;
        padding: 0 14px; background: #f2f4f8; border: 1.5px solid #e6e9f0;
        font-size: 14px; font-weight: 600; color: var(--atv-navy, #0e2a47);
    }
    .matchcriteria-filters ul li.active label,
    .matchcriteria-filters ul li.option-checked label {
        background: var(--atv-lime, #a3e635); border-color: var(--atv-lime, #a3e635); color: var(--atv-navy, #0e2a47);
    }
    .matchcriteria-filters ul li.active label span.option-count,
    .matchcriteria-filters ul li.option-checked label span.option-count { color: rgba(14,42,71,.65); }
    .matchcriteria-filters ul li label span.option-check { display: none; }
}
/* Los van de breedte-media-query: :hover blijft op touchscreens na een tik
   "hangen" (er is geen muis die weggaat), waardoor een net-uitgevinkt chipje
   toch nog lime oogde. Daarom hover alleen voor apparaten met een échte muis. */
@media (hover: hover) and (pointer: fine) {
    .matchcriteria-filters ul li label:hover { border-color: var(--atv-lime, #a3e635); background: #eef4dc; }
}

.vacancies-selected-filters { list-style: none; padding: 0; margin: 10px -10px; display: flow-root; }
.vacancies-selected-filter { margin: 10px; float: left; }
.vacancies-selected-filter-link {
    color: #000; text-decoration: none; line-height: 0; display: flex;
    align-items: center; height: 34px; border-radius: 5px; padding: 0 10px;
    background: #e9e9e9;
}
@media (hover: hover) and (pointer: fine) {
    .vacancies-selected-filter-link:hover { opacity: .8; }
}

.atv-vacancies-wrap,
.atv-vacancies-wrap * { font-family: 'Lexend', 'Poppins', system-ui, sans-serif !important; }

.atv-vacancies-wrap { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.atv-vacancies-wrap .vacancies-matchcriteria-holder { flex: 0 0 280px; }
.atv-vacancies-wrap .vacancies-list-col { flex: 1 1 auto; min-width: 0; }
@media (max-width: 767.98px) {
    .atv-vacancies-wrap { flex-direction: column; }
    .atv-vacancies-wrap .vacancies-matchcriteria-holder { flex: 1 1 auto; width: 100%; }
}

/* ---------- Donkere filter-sidebar ---------- */
.atv-filters {
    background: var(--atv-navy, #0e2a47);
    border-radius: 16px;
    padding: 22px;
}
@media (max-width: 767.98px) {
    /* Op mobiel staat wat eronder komt (chips óf eerste vacaturekaart)
       anders strak tegen het navy vlak aan. */
    .atv-filters { margin-bottom: 16px; }
}
/* Alleen op desktop: daar zit het filterblok in de donkere .atv-filters
   sidebar. Op mobiel is het paneel juist wit (fullscreen), dus deze witte
   tekstkleuren zouden daar onleesbaar-op-wit worden — vandaar de media query. */
@media (min-width: 768px) {
    /* !important op de tekstkleuren: Elementor's eigen widget-/reset-CSS kan
       hier (net als bij .atv-btn elders in dit bestand) anders alsnog de
       navy tekstkleur terugzetten op de navy sidebar-achtergrond, met een
       onleesbare combinatie tot gevolg (gebeurde na de Elementor-update naar
       4.x, 18 aug 2026). */
    .matchcriteria-filters h4 { color: #fff !important; }
    .matchcriteria-filters ul li label { color: #fff !important; }
    .matchcriteria-filters ul li label:hover { background: rgba(255,255,255,.08) !important; }
    .matchcriteria-filters ul li label span.option-check { border-color: rgba(255,255,255,.35) !important; background: transparent !important; }
    .matchcriteria-filters ul li label span.option-count { color: rgba(255,255,255,.55) !important; }
    .atv-filter-clear { color: rgba(255,255,255,.7) !important; }
    .atv-filter-clear:hover { color: #fff !important; }
}

/* ---------- Zoekbalk + filter-toggle ---------- */
.atv-search-row { display: flex; gap: 10px; position: relative; }
.atv-search-input-wrap {
    position: relative; flex: 1 1 auto; display: flex; align-items: center;
}
.atv-search-input-wrap svg {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px;
    color: var(--atv-navy, #0e2a47); opacity: .55; pointer-events: none;
}
.atv-search-input {
    /* !important op radius/padding: Elementor-kit/thema zet eigen input-styling
       met voorrang, waardoor de pill-vorm anders niet doorkomt. */
    width: 100%; height: 48px; border-radius: 999px !important; border: 1.5px solid transparent;
    padding: 0 44px 0 18px !important; font-size: 16px; font-weight: 500; color: var(--atv-navy, #0e2a47);
    background: #fff; transition: border-color .15s ease-in-out; box-sizing: border-box;
}
.atv-search-input:focus { outline: none; border-color: var(--atv-lime, #a3e635); }
/* In het mobiele filterpaneel: lucht tussen zoekveld en eerste filtergroep. */
#atv-search-panel-slot .atv-search-input-wrap { margin-bottom: 18px; }
.atv-search-input::placeholder { color: #98a2b3; }

/* ---------- Zoeksuggesties ---------- */
.atv-search-suggest {
    display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 50;
    background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(9,20,33,.28);
    padding: 6px; max-height: 320px; overflow-y: auto;
    width: 100%;
}
/* Desktop: het zoekveld staat in de smalle donkere sidebar — de dropdown
   groeit mee met het breedste resultaat (max-content) zodat titel + locatie
   nooit afgekapt worden, met een plafond zodat hij niet buiten beeld valt.
   Breekt bewust uit over de vacaturelijst heen. */
@media (min-width: 768px) {
    .atv-search-suggest {
        width: max-content; min-width: 100%;
        max-width: min(calc(100vw - 48px), 640px);
        right: auto;
    }
}
@media (max-width: 767.98px) {
    .atv-search-suggest { right: 0; }
}
.atv-search-suggest.is-open { display: block; }
.atv-search-suggest .atv-search-suggest__item {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: 100%; text-align: left; background: none !important; border: 0 !important; cursor: pointer;
    padding: 10px 12px; border-radius: 8px; font-size: 14px; margin: 0;
}
@media (min-width: 768px) {
    /* Nodig voor max-content: zonder nowrap wrapt de titel en blijft de
       dropdown op min-width hangen. Boven het plafond netjes afkappen. */
    .atv-search-suggest .atv-search-suggest__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (hover: hover) and (pointer: fine) {
    .atv-search-suggest .atv-search-suggest__item:hover { background: #f8fbee !important; }
}
.atv-search-suggest .atv-search-suggest__title { color: var(--atv-navy, #0e2a47) !important; font-weight: 600; }
.atv-search-suggest .atv-search-suggest__loc { color: #98a2b3 !important; font-size: 12.5px; white-space: nowrap; }

.atv-filter-toggle {
    /* !important nodig: het thema's reset.css zet "button{display:inline-block}"
       met voorrang (cascade layer), gewone specificiteit verliest daarvan. */
    display: none !important; /* alleen zichtbaar op mobiel, zie media query */
    align-items: center !important; gap: 8px; height: 48px !important; padding: 0 18px !important;
    /* Lime i.p.v. navy: de omringende .atv-filters-balk is nu zelf navy,
       dus de knop moet contrasteren i.p.v. erin oplossen. */
    background: var(--atv-lime, #a3e635) !important; color: var(--atv-navy, #0e2a47) !important;
    border: 0 !important; border-radius: 12px !important;
    font-size: 15px !important; font-weight: 700 !important; cursor: pointer; white-space: nowrap; position: relative;
    box-sizing: border-box;
}
.atv-filter-badge {
    background: var(--atv-navy, #0e2a47); color: #fff;
    font-size: 11px; font-weight: 700; border-radius: 999px;
    min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 4px;
}

/* ---------- Filterpaneel: static sidebar op desktop ---------- */
.atv-filter-panel { margin-top: 22px; }
.atv-filter-panel__head, .atv-filter-panel__footer { display: none; } /* desktop: geen fullscreen-chrome nodig */
.atv-filter-panel__footer .atv-filter-clear {
    display: inline-block; margin-top: 14px; font-size: 14px; color: var(--owp-secondary-text-color);
    text-decoration: underline; cursor: pointer;
}

/* ---------- Mobiel: zoekbalk + knop, paneel wordt fullscreen overlay ---------- */
@media (max-width: 767.98px) {
    /* Zoekveld boven de filter-knop i.p.v. ernaast: zo krijgt de
       suggestiedropdown bijna de volle breedte i.p.v. de helft. */
    .atv-search-row { flex-direction: column; align-items: stretch; }
    .atv-filter-toggle { display: inline-flex !important; justify-content: center; width: 100%; }

    .atv-filter-panel {
        position: fixed; inset: 0; z-index: 9999; background: #fff;
        display: flex; flex-direction: column;
        transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.9,.3,1.1);
        margin-top: 0;
    }
    .atv-filter-panel.is-open { transform: translateY(0); }

    .atv-filter-panel__head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 18px 20px; border-bottom: 1px solid #eef1f6; flex: 0 0 auto;
        font-size: 17px; font-weight: 700; color: var(--atv-navy, #0e2a47);
    }
    .atv-filter-close {
        display: flex !important; align-items: center !important; justify-content: center !important;
        width: 36px !important; height: 36px !important; padding: 0 !important; margin: 0 !important;
        border-radius: 10px !important; border: 0 !important;
        background: var(--atv-navy, #0e2a47) !important; color: #fff !important; cursor: pointer;
        flex: 0 0 auto; line-height: 0; box-sizing: border-box;
    }
    .atv-filter-close svg { display: block; }
    .atv-filter-panel__body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; }
    .atv-filter-panel__footer {
        display: flex; flex-direction: column; gap: 10px; align-items: center;
        padding: 16px 20px 22px; border-top: 1px solid #eef1f6; flex: 0 0 auto;
    }
    .atv-btn--block-mobile { width: 100%; }
}
body.atv-noscroll { overflow: hidden; }

/* ---------- Paginering ---------- */
.atv-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px; margin: 40px 0;
}
@media (max-width: 767.98px) {
    /* Alles op één regel: alleen pijlen op de nav-knoppen, compactere maten. */
    .atv-pagination { flex-wrap: nowrap; gap: 6px; }
    .atv-page-btn__txt { display: none; }
    .atv-page-btn { min-width: 38px; height: 38px; padding: 0 10px; }
}
.atv-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px;
    font-size: 14px; font-weight: 600; color: var(--atv-navy, #0e2a47);
    background: #fff; border: 1.5px solid #e1e5ee; text-decoration: none;
    transition: .15s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
    .atv-page-btn:hover { border-color: var(--atv-lime, #a3e635); background: #f8fbee; }
}
.atv-page-btn.is-active { background: var(--atv-navy, #0e2a47); border-color: var(--atv-navy, #0e2a47); color: #fff; }
.atv-page-btn.is-disabled { opacity: .4; pointer-events: none; }
.atv-page-btn--nav { padding: 0 16px; }
.atv-page-dots { color: #98a2b3; padding: 0 4px; }

.atv-no-results { padding: 20px 0; color: var(--owp-secondary-text-color); font-size: 15px; }

/* Aantal gevonden vacatures, boven de lijst (update mee met filters/zoeken) */
.atv-result-count { margin: 0 0 18px; font-size: 15px; color: var(--owp-secondary-text-color, #667085); }
.atv-result-count strong { color: var(--atv-navy, #0e2a47); font-weight: 700; }
@media (max-width: 767.98px) {
    .atv-result-count { font-size: 14px; margin-bottom: 14px; }
}

/* ---------- Actieve filters boven de lijst ---------- */
.atv-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
/* NB: de lucht tussen navy filterbalk en wat eronder komt (chips of eerste
   kaart) zit op mobiel als margin-bottom op .atv-filters zelf — dan is de
   afstand in beide gevallen gelijk. */
.atv-active-filter {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1.5px solid var(--atv-navy, #0e2a47); color: var(--atv-navy, #0e2a47) !important;
    font-size: 13.5px; font-weight: 600; padding: 7px 8px 7px 14px; border-radius: 999px;
    text-decoration: none !important;
}
.atv-active-filter__x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; background: var(--atv-navy, #0e2a47); color: #fff;
    flex: 0 0 auto;
}
@media (hover: hover) and (pointer: fine) {
    .atv-active-filter:hover { background: var(--atv-navy, #0e2a47); color: #fff !important; }
    .atv-active-filter:hover .atv-active-filter__x { background: #fff; color: var(--atv-navy, #0e2a47); }
}
.atv-active-filters__clear {
    font-size: 13.5px; font-weight: 500; color: #98a2b3 !important; text-decoration: underline !important;
    margin-left: 4px;
}

/* Zelfde knopstijl als de detailpagina (lime/navy), hier los gedefinieerd
   zodat de overzichtspagina er niet van afhankelijk is welk template
   verder nog geladen is. */
.atv-vacancies-wrap .atv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    /* Navy tekst op lime: wit haalde het WCAG-contrast niet (Lighthouse a11y). */
    background: #a3e635 !important; color: var(--atv-navy, #0e2a47) !important; border: 0 !important; cursor: pointer;
    font-size: 15px !important; font-weight: 700 !important; padding: 13px 24px !important; border-radius: 12px !important;
    text-decoration: none !important; line-height: 1.15 !important;
    box-shadow: 0 10px 24px rgba(163,230,53,.34);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
@media (hover: hover) and (pointer: fine) {
    .atv-vacancies-wrap .atv-btn:hover { background: #b4ef52 !important; transform: translateY(-2px); }
}

/* Honeypot-veld van het sollicitatieformulier: buiten beeld i.p.v.
   display:none — simpele bots slaan display:none-velden namelijk over,
   terwijl ze een "gewoon" (maar onzichtbaar gepositioneerd) veld wel invullen. */
.atv-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}