/**
 * Doen Makelaars — Archive / search page styling
 *
 * Wordt geladen wanneer de [nwpa_search] shortcode of een nwpa CPT-archive
 * actief is (is_property_context). Override de generic .nwpa-* styles met
 * Doen paars/oranje branding en Kurdis Wide Bold + DM Sans typografie.
 *
 * Disable per-site via:
 *   add_filter('nwpa_load_doen_styling', '__return_false');
 *
 * Mirror van detail-doenmakelaars.css — zelfde tokens.
 */

:root {
    --doen-paars: var(--nwpa-brand, #762296);
    --doen-paars-dark: var(--nwpa-brand-dark, #311140);
    --doen-oranje: var(--nwpa-brand-accent, #ED7235);
    --doen-oranje-hover: var(--nwpa-brand-accent-hover, #C95E29);
    --doen-text: var(--nwpa-brand-text, #000000);
    --doen-text-muted: var(--nwpa-brand-text-muted, #666666);
    --doen-grijs: var(--nwpa-brand-surface, #F5F5F5);
    --doen-border: var(--nwpa-brand-border, #E5E5E5);
    --doen-radius: var(--nwpa-brand-radius, 0px);
    --doen-radius-sm: var(--nwpa-brand-radius-sm, 0px);
    --doen-font-body: var(--nwpa-body-font, "DM Sans", sans-serif);
    --doen-font-heading: var(--nwpa-heading-font, "Kurdis ExtraWide Bold", "Kurdis Wide Bold", sans-serif);
}

/* ─── Container — laat breedte aan host-template over ─── */
/* Op Elementor-templates levert de sectie/kolom z'n eigen padding. We strippen
 * alleen de eigen side-padding van .nwpa-search-app zodat de plugin geen
 * dubbele inset toevoegt; max-width blijft zodat erg brede schermen niet
 * uitlopen. Padding van de Elementor-sectie bepaalt nu de uitlijning met de
 * titel/logo — zet die in Elementor gelijk aan de titel-sectie. */
.nwpa-search-app {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ─── KOOP / HUUR tabs — typografie + spacing ─── */
/* Figma h5-token: Kurdis 13/21.45 ls 1.3 uppercase. Spacing tussen tabs = 80px,
 * margin tabs → zoekbalk = 60px (v2.20.1 feedback). */
.nwpa-search-app .nwpa-module-tabs {
    gap: 80px !important;
    margin-bottom: 60px !important;
}

.nwpa-search-app .nwpa-tab {
    font-family: var(--doen-font-heading) !important;
    font-size: 13px !important;
    line-height: 21.45px !important;
    letter-spacing: 1.3px !important;
}

/* ─── KOOP / HUUR tabs — kleuren ─── */
/* Figma: inactive → imperial plum (#311140), hover → oranje, active → oranje + oranje underline. */
.nwpa-search-app .nwpa-tab {
    color: var(--doen-paars-dark) !important;
}

.nwpa-search-app .nwpa-tab:hover {
    color: var(--doen-oranje) !important;
}

.nwpa-search-app .nwpa-tab--active,
.nwpa-search-app .nwpa-tab--active:hover {
    color: var(--doen-oranje) !important;
    border-bottom-color: var(--doen-oranje) !important;
}

/* ─── Spacing zoekbalk → filter-layout = 120px (v2.20.1) ─── */
/* search-header heeft default margin-bottom var(--nwpa-gap); resetten zodat
 * de 120px exact is en niet opgeteld wordt. */
.nwpa-search-app .nwpa-search-header {
    margin-bottom: 0 !important;
}

.nwpa-search-app .nwpa-search-layout {
    margin-top: 120px !important;
}

/* ─── Punt 4: Zoekveld — geen border-radius ─── */
/* Frontend.css forceert 25px met !important — wij overrulen naar 0. */
.nwpa-search-app .nwpa-search-bar {
    border-radius: 0 !important;
}

/* ─── "FILTERS" heading — Figma h4-token: Kurdis 22/29.7 ls 2.2 uppercase
 * Sticht 1 alignment-lijn met de toolbar (v2.20.1): zelfde min-height + zelfde
 * margin-bottom als .nwpa-toolbar zodat "FILTERS" exact gelijk staat met
 * "X resultaten" + "Sorteren op". ─── */
.nwpa-search-app .nwpa-filters__title {
    font-family: var(--doen-font-heading);
    font-size: 22px;
    line-height: 29.7px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    margin: 0 0 24px !important;
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* Toolbar: zelfde verticale dimensies als .nwpa-filters__title voor uitlijning. */
.nwpa-search-app .nwpa-toolbar {
    margin-bottom: 24px !important;
    padding: 0 !important;
    min-height: 40px !important;
    align-items: center !important;
}

/* Quick-filter bar (extra filter-dropdowns boven results) is op Doen-desktop
 * redundant met de sidebar en breekt de FILTERS/toolbar alignment — verbergen
 * vanaf tablet+. Op mobile (<768px) blijft 'm zichtbaar als snelle toegang. */
@media (min-width: 768px) {
    .nwpa-search-app .nwpa-quick-filters {
        display: none !important;
    }
}

/* ─── Punt 6 + 7: Filter group labels (PLAATS, WONINGTYPE, STATUS) ─── */
/* Kurdis ExtraWide Bold; behoudt uppercase + letter-spacing uit frontend.css. */
.nwpa-search-app .nwpa-filter-group > label {
    font-family: var(--doen-font-heading);
    font-weight: 700;
}

/* ─── Punt 8: Filter waarden (Naaldwijk, Beschikbaar, Appartement) ─── */
/* Checkbox-label tekst → DM Sans. */
.nwpa-search-app .nwpa-checkbox-label,
.nwpa-search-app .nwpa-checkbox-label span {
    font-family: var(--doen-font-body) !important;
    font-weight: 500 !important;
}

/* ─── Filter checkboxen — Figma spec (v2.20.1) ─── */
/* Non-selected: 20×20, border 1.5px solid #D1D1D1.
 * Selected: background #762296, dezelfde 20×20 box.
 * Patroon: native <input class="nwpa-cb-input"> + visual <span class="nwpa-cb">
 * met :checked sibling selector. Class-based fallbacks (.nwpa-cb--checked,
 * .nwpa-checkbox-item--active) blijven voor legacy JS-paden. */
.nwpa-search-app .nwpa-cb {
    width: 20px !important;
    height: 20px !important;
    border: 1.5px solid #D1D1D1 !important;
    background: transparent !important;
}

.nwpa-search-app .nwpa-checkbox-item:hover .nwpa-cb,
.nwpa-search-app .nwpa-cb-input:hover + .nwpa-cb,
.nwpa-search-app .nwpa-cb-input:focus-visible + .nwpa-cb {
    border-color: #D1D1D1 !important;
    outline-color: var(--doen-paars) !important;
}

.nwpa-search-app .nwpa-cb-input:checked + .nwpa-cb,
.nwpa-search-app .nwpa-checkbox-item--active .nwpa-cb,
.nwpa-search-app .nwpa-cb--checked {
    background: var(--doen-paars) !important;
    border-color: var(--doen-paars) !important;
}

.nwpa-search-app .nwpa-cb-input:checked + .nwpa-cb::after,
.nwpa-search-app .nwpa-checkbox-item--active .nwpa-cb::after,
.nwpa-search-app .nwpa-cb--checked::after {
    color: #FFFFFF !important;
}

/* ─── Count-bolletje achter checkboxes ─── */
/* Figma spec (v2.24): pill-bolletje terug. Inactief = grijs (#9C9CA32E bg +
 * #9C9CA3 tekst), actief = paars (#76229636 bg + #762296 tekst). DM Sans 700
 * 12px / line-height 22px / capitalize. Maten: 1 cijfer 24×22, 2 cijfers
 * ~31×22, radius 12, padding 0 8. (Maten live geverifieerd: min-width 24 +
 * padding 0 8 + border-box → 24px bij 1 cijfer en ~28–31px bij 2 cijfers.) */
.nwpa-search-app .nwpa-count-badge {
    background: rgba(156, 156, 163, 0.18) !important; /* #9C9CA32E */
    color: #9C9CA3 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0 8px !important;
    min-width: 24px !important;
    height: 22px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--doen-font-body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    text-transform: capitalize !important;
}

.nwpa-search-app .nwpa-cb-input:checked ~ .nwpa-count-badge,
.nwpa-search-app .nwpa-checkbox-item--active .nwpa-count-badge,
.nwpa-search-app .nwpa-count-badge--active {
    background: rgba(118, 34, 150, 0.21) !important; /* #76229636 */
    color: #762296 !important;
}

/* ─── Dunne, slicke scrollbar naast de filters — Doen paars ─── */
/* De sidebar scrollt intern (filters > schermhoogte). Standaard-scrollbar is
 * dik/lelijk; hier smal (6px, uit frontend.css), rounded en subtiel paars.
 * Chrome/Safari via ::-webkit-thumb; Firefox via @supports (scrollbar-color op
 * .nwpa-filters zelf zou in Chrome de 6px-::-webkit-styling uitschakelen). */
.nwpa-search-app .nwpa-filters::-webkit-scrollbar-thumb {
    background: rgba(118, 34, 150, 0.35) !important;
}
.nwpa-search-app .nwpa-filters::-webkit-scrollbar-thumb:hover {
    background: rgba(118, 34, 150, 0.6) !important;
}
@supports not selector(::-webkit-scrollbar) {
    .nwpa-search-app .nwpa-filters {
        scrollbar-color: rgba(118, 34, 150, 0.35) transparent !important;
    }
}

/* ─── Filter actions — verberg FILTER-knop, herstijl WISSEN ─── */
.nwpa-search-app .nwpa-btn--filter-dark {
    display: none !important;
}

.nwpa-search-app .nwpa-filter-actions {
    justify-content: flex-start;
}

.nwpa-search-app .nwpa-btn--filter-reset {
    flex: 0 0 auto !important;
    min-width: 140px;
    background: #FFFFFF !important;
    color: var(--doen-paars) !important;
    border: 1.5px solid var(--doen-paars) !important;
    font-family: var(--doen-font-heading) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.3px !important;
    text-transform: uppercase;
}

.nwpa-search-app .nwpa-btn--filter-reset:hover {
    background: var(--doen-paars) !important;
    color: #FFFFFF !important;
    border-color: var(--doen-paars) !important;
}

/* ─── Cards — geen hover shadow + ruimere spacing + zachte divider ─── */
/* Geldt voor alle plekken met .nwpa-card (filter-app, [nwpa_recent], vergelijkbaar). */
.nwpa-card,
.nwpa-card:hover,
.nwpa-results--list .nwpa-card,
.nwpa-results--list .nwpa-card:hover {
    box-shadow: none !important;
    transform: none !important;
    background: transparent !important;
}

/* Geen paarse hover-tint op de card (v2.20.1 feedback) — alle achtergrond-
 * kleurveranderingen op hover uitschakelen. De image-zoom blijft via aparte
 * regel in frontend.css. */
.nwpa-card-wrap:hover,
.nwpa-card:hover,
.nwpa-card:hover .nwpa-card__image,
.nwpa-card:hover .nwpa-card__overlay {
    background-color: transparent !important;
}

/* Meer ruimte tussen locatie (city/address) en extra info (meta).
   Divider doorlopen van links naar rechts: -20px negatieve margin compenseert
   de overlay-padding. Figma spec (v2.20.1): 0.5px solid rgba(255,255,255,0.4). */
.nwpa-card__overlay-content {
    gap: 10px;
}

.nwpa-card__divider {
    margin: 14px -20px 6px;
    height: 0 !important;
    border-top: 0.5px solid rgba(255, 255, 255, 0.4) !important;
}

/* ─── Card NIEUW-badge typografie ─── */
/* Figma spec (v2.20.1): Kurdis ExtraWide Bold 11px line-height 165%
 * letter-spacing 10% (1.1px) uppercase, kleur wit. */
.nwpa-card__badge {
    font-family: var(--doen-font-heading) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 165% !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
}

/* ─── Card adres (overlay-grid view) ─── */
/* Figma spec (v2.20.1): DM Sans 400 16/162% — niet bold. */
.nwpa-card__address {
    font-family: var(--doen-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 162% !important;
    color: #FFFFFF !important;
}

/* ─── Card plaats / city (overlay-grid view) ─── */
/* Figma spec (v2.20.1): DM Sans 400 12/155% uppercase. */
.nwpa-card__city {
    font-family: var(--doen-font-body) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 155% !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
}

/* ─── Card details (oppervlakte · kamers · prijs) ─── */
/* Figma spec (v2.20.1): niet bold; ~15px horizontale spacing; "KK" uppercase.
 * .nwpa-card__meta is de flex-container; gap regelt afstand tussen items én
 * separators. .nwpa-card__price krijgt text-transform uppercase zodat
 * "k.k." → "K.K." rendert. */
.nwpa-card__meta {
    gap: 15px !important;
}

.nwpa-card__meta .nwpa-card__price,
.nwpa-card__meta .nwpa-card__sep {
    font-family: var(--doen-font-body) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 155% !important;
}

.nwpa-card__meta .nwpa-card__price {
    text-transform: uppercase !important;
}

/* ─── Card arrow — altijd zichtbaar, geen paarse hover ─── */
/* Figma spec (v2.20.1): peiltje altijd zichtbaar naast adres, géén hover-tint
 * op de kaart, alleen subtiele opacity-shift op het peiltje zelf. */
.nwpa-card__arrow {
    opacity: 1 !important;
    background: transparent !important;
    color: #FFFFFF !important;
}

.nwpa-card__arrow:hover {
    opacity: 0.85 !important;
    background: transparent !important;
}

/* ─── "X resultaten" tekst (toolbar) ─── */
/* Figma spec (v2.20.1): DM Sans 400 16/162%. */
.nwpa-search-app .nwpa-result-count {
    font-family: var(--doen-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 162% !important;
    color: var(--doen-text) !important;
}

/* ─── Card-lijst weergave verbergen op desktop ─── */
/* Bewaard op mobiel zodat compacte lijst beschikbaar blijft. */
@media (min-width: 1024px) {
    .nwpa-search-app .nwpa-view-btn[data-view="list"] {
        display: none !important;
    }
}

/* ─── View-toggle iconen (grid/galary + map) → paars i.p.v. oranje ─── */
.nwpa-search-app .nwpa-view-btn {
    color: var(--doen-paars-dark) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.nwpa-search-app .nwpa-view-btn:hover,
.nwpa-search-app .nwpa-view-btn.active {
    color: var(--doen-paars) !important;
}

/* View-btn label tekst ("Lijst", "Kaart") — DM Sans 400 16px 162% (v2.20.1). */
.nwpa-search-app .nwpa-view-btn__label {
    font-family: var(--doen-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 162% !important;
    color: var(--doen-paars-dark) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.nwpa-search-app .nwpa-view-btn:hover .nwpa-view-btn__label,
.nwpa-search-app .nwpa-view-btn.active .nwpa-view-btn__label {
    color: var(--doen-paars) !important;
}

/* Kaart-icoon = outline drawing (Figma). frontend.css zet `fill: currentColor`
 * op alle view-btn svgs — dat vult onze complexe map-outline tot een donkere
 * blob. Voor [data-view="map"] dwingen we fill:none af zodat alleen de
 * stroke (paars via currentColor) zichtbaar is. Grid/list iconen blijven
 * gevuld (kleine vierkantjes/lijntjes — dat is daar correct). */
.nwpa-search-app .nwpa-view-btn[data-view="map"] svg,
.nwpa-search-app .nwpa-view-btn[data-view="map"] svg path {
    fill: none !important;
}

/* ─── Toolbar: "Sorteren op" + dropdown op één lijn ─── */
/* Voorkomt dat een geërfde block-label de select naar een nieuwe regel duwt. */
.nwpa-search-app .nwpa-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.nwpa-search-app .nwpa-sort__label {
    margin: 0 !important;
    white-space: nowrap;
}

/* ─── Filter group titel (PLAATS, LAND, OPPERVLAKTE) — Figma h5-token (v2.20.1):
 * Kurdis ExtraWide Bold 13/165% ls 10% (1.3px) uppercase, color #151515. ─── */
.nwpa-search-app .nwpa-filter-group > label {
    font-family: var(--doen-font-heading) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 165% !important;
    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;
    color: #151515 !important;
}

/* ─── Filter checkbox-list waarden (Nederland, Belgie…) — DM Sans 16/25.92 400 ─── */
.nwpa-search-app .nwpa-cb-label {
    font-family: var(--doen-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 25.92px !important;
    color: var(--doen-text) !important;
}

/* ─── Range-filter "Min"/"Max" labels — DM Sans 12/22 regular, geen uppercase
 * Figma small-text-token: weight 400 capitalize. ─── */
.nwpa-search-app .nwpa-range-label {
    font-family: var(--doen-font-body) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    text-transform: capitalize !important;
}

/* ─── Range-filter inputs — Figma bg #F9F9F9, border #D1D1D1, 12px DM Sans ─── */
.nwpa-search-app .nwpa-range-inputs input {
    font-family: var(--doen-font-body) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    background: #F9F9F9 !important;
    border: 1px solid #D1D1D1 !important;
    color: var(--doen-text) !important;
}

.nwpa-search-app .nwpa-range-inputs input::placeholder {
    color: #A9A9A9 !important;
    text-transform: capitalize;
    opacity: 1;
}

.nwpa-search-app .nwpa-range-sep {
    color: #A9A9A9 !important;
    font-family: var(--doen-font-body);
    font-size: 14px;
}

/* ─── Dual-range slider — Figma track #EBEBEB h 6 radius 12, fill oranje, thumb 20px wit ─── */
.nwpa-search-app .nwpa-dual-range__track {
    background: #EBEBEB !important;
    height: 6px !important;
    border-radius: 12px !important;
}

.nwpa-search-app .nwpa-dual-range__fill {
    background: var(--doen-oranje) !important;
    border-radius: 12px !important;
}

.nwpa-search-app .nwpa-range-thumb::-webkit-slider-thumb {
    width: 20px !important;
    height: 20px !important;
    background: #FFFFFF !important;
    border: 1px solid #D1D1D1 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.nwpa-search-app .nwpa-range-thumb::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    background: #FFFFFF !important;
    border: 1px solid #D1D1D1 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ─── Toolbar "Sorteren op" label — zwart + DM Sans 400 16/162% (matcht result-count) ─── */
.nwpa-search-app .nwpa-sort__label {
    font-family: var(--doen-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 162% !important;
    color: var(--doen-text) !important;
}

/* ─── Card NIEUW-badge fold-corner — Figma terracotta rouge (#D64C3C) ─── */
/* Frontend.css default is #c45a20 (oranje variant); Doen-token zegt #D64C3C.
 * Geldt voor de promotie-badges (NIEUW / Open huis). De status-badges
 * (verkocht, ingetrokken, …) krijgen hun eigen donkere fold-kleur zodat de
 * fold-hoek meekleurt met de badge-achtergrond i.p.v. oranje te blijven —
 * het !important hieronder overschreef anders de per-status kleuren uit
 * frontend.css, waardoor een grijze INGETROKKEN-badge een oranje puntje hield. */
.nwpa-card__badge::after {
    border-color: transparent #D64C3C transparent transparent !important;
}
.nwpa-card__badge--onder_bod::after        { border-color: transparent #a13d08 transparent transparent !important; }
.nwpa-card__badge--onder_optie::after      { border-color: transparent #8a5f03 transparent transparent !important; }
.nwpa-card__badge--onder_voorbehoud::after { border-color: transparent #5621a8 transparent transparent !important; }
.nwpa-card__badge--verkocht::after         { border-color: transparent #991b1b transparent transparent !important; }
.nwpa-card__badge--verhuurd::after         { border-color: transparent #3730a3 transparent transparent !important; }
.nwpa-card__badge--ingetrokken::after      { border-color: transparent #333b47 transparent transparent !important; }

/* ─── [nwpa_recent] — Doen brand styling ─── */
.nwpa-recent__title {
    font-family: var(--doen-font-heading);
    color: var(--doen-text);
}

.nwpa-recent__link {
    font-family: var(--doen-font-heading);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--doen-paars);
    border-color: var(--doen-paars);
    border-radius: 0;
}

.nwpa-recent__link:hover {
    background: var(--doen-oranje);
    color: #FFFFFF;
    border-color: var(--doen-oranje);
}

/* ════════════════════════════════════════════════════════════════════════
   Map popup card — Doen design (v2.22.6)
   Sharp corners, DM Sans + Kurdis Wide Bold, paarse close-X, géén borders.
   Address en prijs in Kurdis ExtraWide Bold (matcht detail-headings),
   city in DM Sans uppercase, specs in DM Sans body.
   ════════════════════════════════════════════════════════════════════════ */

.nwpa-map-card {
    border-radius: 0 !important;
    border: 0 !important;
}

.nwpa-map-card__link {
    color: var(--doen-text) !important;
}

/* Subtieler dan de Kurdis-headings van de detail-pagina: in deze map-popup
 * is de visuele context al druk (kaart eronder), dus we gebruiken DM Sans
 * met semibold-gewichten i.p.v. Kurdis ExtraWide Bold. */
.nwpa-map-card__address {
    font-family: var(--doen-font-body) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--doen-paars-dark) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.nwpa-map-card__city {
    font-family: var(--doen-font-body) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: var(--doen-oranje) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.nwpa-map-card__price {
    font-family: var(--doen-font-body) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--doen-paars-dark) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.nwpa-map-card__specs {
    font-family: var(--doen-font-body) !important;
    color: var(--doen-text-muted) !important;
    gap: 16px !important;
}

.nwpa-map-card__spec {
    font-family: var(--doen-font-body) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--doen-text-muted) !important;
}

.nwpa-map-card__spec svg {
    color: var(--doen-text-muted) !important;
}

.nwpa-map-card__spec--energy {
    color: var(--doen-paars) !important;
    font-weight: 600 !important;
}

/* Close-button — paarse X (Doen-branding), schone vlak, geen rand.
   Triple-!important om Elementor/theme button-defaults te killen. */
.nwpa-map-card__close {
    color: var(--doen-paars) !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: 0 !important;
}

.nwpa-map-card__close:hover {
    background: rgba(118, 34, 150, 0.08) !important;
    color: var(--doen-paars-dark) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.nwpa-map-card__close:focus,
.nwpa-map-card__close:focus-visible {
    background: rgba(118, 34, 150, 0.12) !important;
    box-shadow: 0 0 0 2px rgba(118, 34, 150, 0.25) !important;
    border: 0 !important;
    outline: 0 !important;
}

.nwpa-map-card__close svg path {
    stroke: currentColor !important;
}

/* Card badge ("Verkocht onder voorbehoud" etc.) op map-popup — sharp corners */
.nwpa-map-card__img-wrap .nwpa-card__badge {
    border-radius: 0 !important;
    font-family: var(--doen-font-heading) !important;
}