/* ========================================
   Variabelen & Basis
======================================== */
:root{
    --c-text:#0a2342;
    --c-muted:#6b7280;
    --c-border:#e9ecef;
    --c-border-2:#d1d5db;
    --c-bg:#fff;
    --c-brand:#d1631f;
    --c-accent:#0a2342;

    --radius-lg:14px;
    --radius-md:12px;

    --shadow-1:0 2px 6px rgba(0,0,0,.06);
    --shadow-2:0 10px 22px rgba(0,0,0,.10);
    --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);

    --pill-bg:#f7f7f8;
    --pill-bg-active:#0a2342;
    --pill-text:#111827;
    --pill-text-active:#fff;

    /* Badges (status, m²/kamers) */
    --badge-h:26px;
    --badge-pad-x:10px;
    --badge-radius:9px;

    /* Energielabel-pijl */
    --energy-h:24px;
    --energy-tip:12px;
}

html,body{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    color:var(--c-text);
}

.bb-section--aanbod{padding:2rem 0;}
.bb-container{max-width:1200px;margin:0 auto;padding:0 1rem;}
.bb-archive-header{margin-bottom:1.25rem;}
.bb-archive-title{margin:0 0 .25rem;font-size:clamp(1.4rem,2.2vw,2.1rem);}
.bb-archive-meta,.bb-archive-stats p{color:#666;margin:.25rem 0;}


/* ========================================
   Zoeken – Topbar (structuur & velden)
======================================== */

/* neutraliseer thema */
form.bb-search{display:block!important;}
.bb-search--top #entity-search{
    padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
}

/* container */
.bb-search--top #entity-search .filters-bar{
    display:flex!important;flex-wrap:wrap;column-gap:20px;row-gap:16px;align-items:flex-start;
    padding:16px 18px;border:1px solid var(--c-border);border-radius:14px;background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.03);margin-bottom:22px;
}

/* veldblok */
.bb-search--top #entity-search .filters-bar .search-field{
    display:flex;flex-direction:column;min-width:0;flex:1 1 260px;order:0;align-items:stretch;
}

/* volgorde desktop/tablet */
.bb-search--top #entity-search .filters-bar .sf-adres{order:1;flex:1 1 100%;}
.bb-search--top #entity-search .filters-bar .sf-plaats{order:2;flex:1 1 calc(50% - 20px);}
.bb-search--top #entity-search .filters-bar .sf-status{order:3;flex:1 1 calc(50% - 20px);}
.bb-search--top #entity-search .filters-bar .sf-type{order:4;flex:1 1 calc(50% - 20px);}
.bb-search--top #entity-search .filters-bar .sf-prijs{order:5;flex:1 1 calc(50% - 20px);}
.bb-search--top #entity-search .filters-bar .sf-energielabel{order:997;flex:1 1 calc(50% - 20px);}
.bb-search--top #entity-search .filters-bar .sf-sort{order:998;flex:1 1 calc(50% - 20px);}
.bb-search--top #entity-search .filters-bar .sf-submit{order:999;flex:1 1 100%;}

/* labels & inputs */
.bb-search--top #entity-search .filters-bar .search-field h4{
    margin:0 0 .5rem;font-weight:700;font-size:1.06rem;letter-spacing:.02em;text-transform:uppercase;color:#6b7280;
}
.bb-search--top #entity-search .filters-bar input[type="text"],
.bb-search--top #entity-search .filters-bar select{
    width:100%;height:58px;padding:0 18px;border:1px solid #d1d5db;border-radius:12px;
    font-size:1.16rem;line-height:1.35;color:#111827;background:#fff;
}
.bb-search--top #entity-search .filters-bar input::placeholder{color:#9ca3af;opacity:1;font-size:1.08rem;}

/* pills */
.bb-search--top #entity-search .filters-bar .search-items{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.bb-search--top #entity-search .filters-bar .pill{
    display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid #d1d5db;border-radius:999px;
    background:#f7f7f8;color:#111827;font-size:1.12rem;line-height:1.15;cursor:pointer;user-select:none;transition:.15s;
}
.bb-search--top #entity-search .filters-bar .pill .pill__input{
    width:16px;height:16px;margin:0;flex:0 0 16px;position:relative;top:-1px;vertical-align:middle;accent-color:#0a2342;
}
.bb-search--top #entity-search .filters-bar .pill .count,
.bb-search--top #entity-search .filters-bar .pill small,
.bb-search--top #entity-search .filters-bar .pill span[class*="count"]{margin-left:.35rem;font-size:.92em;opacity:.9;}
.bb-search--top #entity-search .filters-bar .pill:has(.pill__input:checked){background:#0a2342;color:#fff;border-color:#0a2342;}
.bb-search--top #entity-search .filters-bar .clear-selected{display:inline-block;margin-top:4px;font-size:.98rem;color:#d1631f;text-decoration:none;}
.bb-search--top #entity-search .filters-bar .clear-selected:hover{text-decoration:underline;}

/* prijs (range) */
.bb-search--top #entity-search .filters-bar .search-items--range{display:flex;align-items:center;gap:12px;width:100%;}
.bb-search--top #entity-search .filters-bar .range-input{position:relative;flex:1 1 260px;}
.bb-search--top #entity-search .filters-bar .range-input .prefix{
    position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none;font-size:1.12rem;
}
.bb-search--top #entity-search .filters-bar .range-input input[type="number"]{
    width:100%;height:58px;padding:0 18px 0 34px;border:1px solid #d1d5db;border-radius:12px;font-size:1.16rem;line-height:1.35;color:#111827;background:#fff;
    -moz-appearance:textfield;
}
.bb-search--top #entity-search .filters-bar .range-input input[type="number"]::placeholder{color:#9ca3af;opacity:1;font-size:1.08rem;}
.bb-search--top #entity-search .filters-bar .range-input input[type="number"]::-webkit-outer-spin-button,
.bb-search--top #entity-search .filters-bar .range-input input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0; }

/* responsive stacking */
@media (max-width:900px){
    .bb-search--top #entity-search .filters-bar .sf-plaats,
    .bb-search--top #entity-search .filters-bar .sf-status,
    .bb-search--top #entity-search .filters-bar .sf-type,
    .bb-search--top #entity-search .filters-bar .sf-prijs,
    .bb-search--top #entity-search .filters-bar .sf-energielabel,
    .bb-search--top #entity-search .filters-bar .sf-sort{ flex:1 1 100%; }
}
@media (max-width:640px){
    .bb-search--top #entity-search .filters-bar .search-items--range{flex-wrap:wrap;}
}

/* submit knoppen */
.bb-search--top #entity-search .filters-bar .sf-submit{display:flex;justify-content:center;align-items:center;text-align:center;}
.bb-search--top #entity-search .filters-bar .sf-submit .sf-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;}
.bb-search--top #entity-search .filters-bar .sf-submit .btn{
    height:48px;padding:0 18px;border-radius:10px;font-weight:800;font-size:1.12rem;line-height:1;cursor:pointer;white-space:nowrap;
}
.bb-search--top #entity-search .filters-bar .sf-submit .btn--primary{background:#d1631f;color:#fff;border:0;box-shadow:0 2px 6px rgba(0,0,0,.08);}
.bb-search--top #entity-search .filters-bar .sf-submit .btn--primary:hover{filter:brightness(1.05);}
.bb-search--top #entity-search .filters-bar .sf-submit .btn--ghost{background:#fff;color:#0a2342;border:1px solid #d1d5db;}
.bb-search--top #entity-search .filters-bar .sf-submit .btn--ghost:hover{background:#f7f7f8;}
@media (max-width:640px){
    .bb-search--top #entity-search .filters-bar .sf-submit .sf-actions{width:100%;flex-direction:column;}
    .bb-search--top #entity-search .filters-bar .sf-submit .btn{width:100%;height:52px;}
}


/* ========================================
   Toggle-knop (Toon/Verberg filters)
======================================== */
.bb-archive-header{margin-bottom:12px;}
.bb-archive-header__inner{display:flex;align-items:center;gap:12px;row-gap:8px;width:100%;flex-wrap:wrap;}
.bb-archive-title{margin:0;}
.bb-archive-header__inner>#toggle-filters{margin-left:auto;}
@media (max-width:640px){ .bb-archive-header__inner>#toggle-filters{margin-left:0;} }

.bb-btn{
    appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
    line-height:1;font-weight:800;font-size:1.08rem;height:38px;padding:0 16px;border-radius:10px;text-decoration:none;user-select:none;
    transition:filter .12s ease,transform .06s ease;vertical-align:middle;
}
.bb-btn--primary{background:#d1631f;color:#fff;}
.bb-btn--primary:hover{filter:brightness(1.05);}
.bb-btn--primary:active{transform:translateY(1px);}

/* Toggle button: hard center text (no matter what's inside) */
#toggle-filters{
    font-size:clamp(.95rem,3.6vw,1.08rem);
    height:2.4em;
    line-height:2.4em;
    padding:0 .9em;
}

#toggle-filters,
#toggle-filters:hover,
#toggle-filters:focus,
#toggle-filters:active,
#toggle-filters:focus-visible{
    background:#d1631f !important;
    color:#fff !important;
    border:0 !important;
    box-shadow:none !important;
    outline:none !important;

    display:inline-block;         /* simpler than flex/grid for 1 line */
    height:38px;
    line-height:38px;             /* <-- vertical centering trick */
    padding:0 16px;               /* only horizontal padding */
    border-radius:10px;
    white-space:nowrap;
    vertical-align:middle;
    appearance:none; -webkit-appearance:none;
}

/* Make sure nested wrappers don’t re-introduce offset */
#toggle-filters > span,
#toggle-filters > strong,
#toggle-filters > em{
    display:inline;
    line-height:inherit !important;
    padding:0 !important;
    margin:0 !important;
}

/* Kill any theme pseudo-elements that can shift the box */
#toggle-filters::before,
#toggle-filters::after{ display:none !important; }

/* verbergen van paneel bij hidden */
#entity-search[hidden]{display:none;}


/* ========================================
   Grid & Kaarten (overzicht)
======================================== */
.woning-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px;}
.search-content.grid .woning-grid{
    display: grid;
    gap: 22px;
}
@media (max-width: 700px){
    .search-content.grid .woning-grid{
        grid-template-columns: 1fr;
    }
}
@media (min-width: 701px) and (max-width: 1024px){
    .search-content.grid .woning-grid{
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}
@media (min-width: 1025px){
    .search-content.grid .woning-grid{
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

.woning-card{
    position:relative;border:1px solid var(--c-border);border-radius:18px;background:#fff;overflow:hidden;
    display:flex;flex-direction:column;box-shadow:var(--shadow-1);transition:transform .15s ease,box-shadow .15s ease;
}
.woning-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);}
.woning-card__link{position:absolute;inset:0;z-index:5;text-indent:-9999px;overflow:hidden;}

/* thumb */
.woning-card__thumb{position:relative;display:block;aspect-ratio:4/3;background:#f4f4f4;overflow:hidden;}
.woning-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;}

/* energielabel (pijl) */
.woning-card__label--energy{
    --_bg:#374151;
    position:absolute;
    top:12px;
    left:12px;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    height:var(--energy-h);
    padding:0 10px 0 8px;
    background:var(--_bg);
    color:#fff;
    font-weight:800;
    font-size:14px;
    line-height:24px;
    text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
    border-radius:0;
    white-space:nowrap;
}
.woning-card__label--energy::after{
    content:"";
    position:absolute;
    top:0;
    right:calc(-1 * var(--energy-tip));
    border-top:calc(var(--energy-h)/2) solid transparent;
    border-bottom:calc(var(--energy-h)/2) solid transparent;
    border-left:var(--energy-tip) solid var(--_bg);
}
.woning-card__label--energy.label-a{--_bg:#2fb34a;}
.woning-card__label--energy.label-b{--_bg:#62b44f;}
.woning-card__label--energy.label-c{--_bg:#9acb47;}
.woning-card__label--energy.label-d{--_bg:#ffd04a; color:#1f2937;}
.woning-card__label--energy.label-e{--_bg:#f79c2d;}
.woning-card__label--energy.label-f{--_bg:#f1662a;}
.woning-card__label--energy.label-g{--_bg:#e53935;}

/* status (links-onder) */
.woning-card__status{
    position:absolute;
    left:12px;
    bottom:12px;
    z-index:10;

    display:inline-grid;
    grid-auto-flow:column;
    place-items:center;
    gap:6px;

    height:var(--badge-h);
    min-height:var(--badge-h);
    padding:0 var(--badge-pad-x);
    border-radius:var(--badge-radius);

    background:#374151;
    color:#fff;
    font-weight:800;
    font-size:1.06rem;

    box-sizing:border-box;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.woning-card__status.status-beschikbaar  { background:#16a34a; } /* Beschikbaar */
.woning-card__status.status-vov          { background:#f59e0b; } /* Verkocht o.v. */
.woning-card__status.status-onderbod     { background:#f97316; } /* Onder bod */
.woning-card__status.status-sold         { background:#dc2626; } /* Verkocht */
.woning-card__status.status-inaanmelding { background:#2563eb; } /* In aanmelding */
.woning-card__status.status-neutral      { background:#6b7280; } /* Default */

/* m² & kamers (rechts-onder) */
.woning-card__meta{
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:10;

    display:inline-grid;
    grid-auto-flow:column;
    place-items:center;
    gap:8px;

    height:var(--badge-h);
    min-height:var(--badge-h);
    padding:0 var(--badge-pad-x);
    border-radius:var(--badge-radius);

    background:rgba(255,255,255,.95);
    color:var(--c-accent);
    font-weight:800;
    font-size:1.06rem;

    box-sizing:border-box;
    box-shadow:0 2px 6px rgba(0,0,0,.12);
    white-space:nowrap;
}
.woning-card__meta-item {
    display:inline-grid;
    grid-auto-flow:column;
    align-items:center;
    line-height: 26px;
    gap:6px;
}
.woning-card__status *,
.woning-card__meta *{
    line-height:26px;
    margin:0;
    padding:0;
    vertical-align:middle;
}
.woning-card__meta svg,
.woning-card__status svg{
    width:16px;
    height:16px;
    display:block;
    flex:0 0 16px;
    position:static !important;
    top:auto !important;
}

/* body */
.woning-card__body{position:relative;padding:1rem 1.1rem 2.6rem;}
.woning-card__title{font-size:1.18rem;font-weight:800;margin:0 0 .35rem;line-height:1.25;color:var(--c-text);}
.woning-card__title a{text-decoration:none;color:inherit;}
.woning-card__subtitle{margin:0 0 .6rem;}
.woning-card__subtitle--place{font-size:1.05rem;font-weight:600;color:#4b5563;}
.woning-card__price{margin:.2rem 0 0;font-size:1.08rem;font-weight:800;color:#111;}

/* CTA pijl */
.woning-card__cta{
    position:absolute;right:14px;bottom:12px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
    border-radius:999px;background:var(--c-accent);color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.12);transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;z-index:12;
}
.woning-card__cta svg{width:18px;height:18px;fill:currentColor;}
.woning-card__cta:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.16);}

/* labels van plugin verbergen als prijs zichtbaar is */
.woning-card__list .rw-label,
.woning-card__list .field-prijs .label,
.woning-card__list .prijs .label{display:none;}


/* ========================================
   Paginering
======================================== */
.bb-pagination{
    margin-top:40px;display:flex;justify-content:center;
}
.bb-pagination .bb-pager{
    display:flex;gap:.6rem;list-style:none;padding:0;margin:0;
}
.bb-pagination .bb-page,
.bb-pagination a.bb-page{
    display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 .9rem;
    border:1px solid #d1d5db;border-radius:10px;background:#fff;color:#0a2342;font-weight:700;text-decoration:none;line-height:1;
}
.bb-pagination a.bb-page:hover{background:#f6f6f6;text-decoration:none;}
.bb-pagination .bb-page.is-current{background:#0a2342;color:#fff;border-color:#0a2342;}
.bb-pagination .bb-page.is-dots{background:transparent;border:0;min-width:auto;padding:0 .25rem;color:#6b7280;}


/* ========================================
   Kleine finetunes
======================================== */
@media (max-width:960px){
    .woning-card__subtitle--place{font-size:1rem;}
}

/* ========================================
   Single – Woning (detailpagina)
======================================== */

/* 0) Thema-ruis: ALLES wit, geen separators of schaduwen */
body.single-realworks_wonen,
.single-realworks_wonen .fl-page,
.single-realworks_wonen .fl-page-content,
.single-realworks_wonen .fl-page-content-wrap,
.single-realworks_wonen .fl-content,
.single-realworks_wonen .fl-content .container,
.single-realworks_wonen .bb-single{
    background:#fff !important;
}
.single-realworks_wonen .fl-page-content,
.single-realworks_wonen .fl-page-content-wrap,
.single-realworks_wonen .fl-content,
.single-realworks_wonen .fl-content .container{
    border:0 !important;
    box-shadow:none !important;
}
.single-realworks_wonen .fl-page-content::before,
.single-realworks_wonen .fl-page-content::after,
.single-realworks_wonen .fl-page-content-wrap::before,
.single-realworks_wonen .fl-page-content-wrap::after{
    display:none !important;
}

/* 1) Kop */
.woning-single__header{margin:24px 0 18px;}
.woning-single__title{
    margin:0 0 6px;
    font-size:clamp(1.6rem,2.3vw,2rem);
    font-weight:800;
}
.woning-single__meta{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;               /* label blijft naast postcode/plaats */
    gap:10px;column-gap:14px;
    font-size:1.1rem;
    color:var(--c-muted);
}
@media (max-width:640px){
    .woning-single__meta{flex-wrap:wrap;}
}
.woning-single__meta-item{display:inline-flex;align-items:center;gap:.35rem}
.woning-single__meta-item strong{font-size:1.22rem;color:var(--c-text);} /* postcode/plaats groter */

/* Energielabel inline (met pijlpuntje, gecentreerd) */
.energy-inline{
    position:relative !important;        /* override van absolute uit kaart-styles */
    top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
    display:inline-flex;
    align-items:center;justify-content:center;
    height:var(--energy-h);line-height:var(--energy-h);
    padding:0 10px 0 8px;
    border-radius:0;                      /* links NIET afgerond */
    background:var(--_bg);
    color:#fff;font-weight:800;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
    margin-left:8px;
    vertical-align:middle;
    white-space:nowrap;
    flex:0 0 auto;
}
.energy-inline::after{
    content:"";
    position:absolute;top:0;right:calc(-1 * var(--energy-tip));
    border-top:calc(var(--energy-h)/2) solid transparent;
    border-bottom:calc(var(--energy-h)/2) solid transparent;
    border-left:var(--energy-tip) solid var(--_bg);
}

/* 2) Gallerij */
.woning-gallery{position:relative;margin:10px 0 26px;}
.woning-gallery__grid{
    display:grid;
    gap:12px;
    grid-template-columns:repeat(12,minmax(0,1fr));
}
.woning-gallery__item{
    position:relative;                /* nodig voor overlay-button */
    border-radius:18px;overflow:hidden;background:#f6f6f6;
}
.woning-gallery__item img{display:block;width:100%;height:auto;cursor:pointer;}

/* desktop/tablet: 2 grote naast elkaar, 3 kleine eronder */
.woning-gallery__item.gi-1{grid-column:1 / span 6;}
.woning-gallery__item.gi-2{grid-column:7 / span 6;}
.woning-gallery__item.gi-3{grid-column:1 / span 4;}
.woning-gallery__item.gi-4{grid-column:5 / span 4;}
.woning-gallery__item.gi-5{grid-column:9 / span 4;}

/* mobile: alleen hoofdfoto, panel eronder */
@media (max-width:640px){
    .woning-gallery__grid{grid-template-columns:1fr;gap:10px;}
    .woning-gallery__item{grid-column:1 / -1 !important;}
    .woning-gallery__item:not(.gi-1){display:none;} /* verberg alle behalve hoofdfoto */
}

/* 3) Price panel (rechtsboven) */
.price-panel{
    position:absolute;z-index:5;right:26px;top:26px;
    background:#fff;border:1px solid var(--c-border);
    border-radius:16px;box-shadow:var(--shadow-2);
    padding:16px 16px 12px;min-width:260px;max-width:320px;
}
.price-panel__price{
    font-weight:800;
    font-size:clamp(2rem,3vw,2.4rem);
    line-height:1.15;color:var(--c-text);margin:8px 0 12px;
}
.price-panel__actions{display:flex;flex-direction:column;gap:10px;}
.price-panel__actions .btn{
    font-size: 1.5rem;
    letter-spacing: .01em;
    width:100%;height:40px;border-radius:10px;font-weight:800;
    display:inline-flex;align-items:center;justify-content:center;
    text-transform:none;line-height:1;
    text-decoration:none !important;
}
.price-panel__actions .btn:hover,
.price-panel__actions .btn:focus{ text-decoration:none !important; }
.price-panel__actions .btn.btn--primary{background:var(--c-brand);color:#fff;border:0;}
.price-panel__actions .btn.btn--ghost{background:#fff;color:var(--c-accent);border:1px solid #d1d5db;}
.price-panel__actions .btn.btn--primary:hover{filter:brightness(1.05);}
.price-panel__actions .btn.btn--ghost:hover{background:#f7f7f8;}

@media (max-width:640px){
    .price-panel{
        position:static;margin:12px 0 0;width:100%;
        max-width:none;min-width:0;box-shadow:var(--shadow-1);
    }
}

/* 4) Statuschip */
.status-chip{
    display:inline-flex;align-items:center;justify-content:center;
    height:26px;padding:0 10px;border-radius:9px;font-weight:800;font-size:1.02rem;
    line-height:1;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15);margin-bottom:6px;
}
.status-chip.status-beschikbaar  { background:#16a34a; } /* Beschikbaar */
.status-chip.status-vov          { background:#f59e0b; } /* Verkocht o.v. */
.status-chip.status-onderbod     { background:#f97316; } /* Onder bod */
.status-chip.status-sold         { background:#dc2626; } /* Verkocht */
.status-chip.status-inaanmelding { background:#2563eb; } /* In aanmelding */
.status-chip.status-neutral      { background:#6b7280; } /* Default */

/* Overlay-knop "Alle foto's" – links onder */
.gallery-more{
    position:absolute; left:12px; bottom:12px;
    display:inline-flex; align-items:center; gap:10px;
    height:44px; padding:0 0 0 14px; border-radius:10px;
    background:var(--c-brand); color:#fff; font-weight:800; font-size:1.06rem; line-height:1;
    text-decoration:none;
    box-shadow:0 8px 18px rgba(0,0,0,.18);
    -webkit-tap-highlight-color:transparent;
    transition:background .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease, opacity .2s ease;
}
.gallery-more__icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; flex:0 0 44px;   /* geen extra ruimte rechts */
    border-left:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.10);
    border-radius:0 10px 10px 0;
    padding:0; margin:0;
}
.gallery-more__icon svg{ width:18px; height:18px; display:block; fill:#fff; opacity:1; }
a.gallery-more:hover,
a.gallery-more:focus{ opacity:1 !important; text-decoration:none; }
.gallery-more:hover,
.gallery-more:focus{
    opacity:1 !important;
    color:#fff !important;
    background:var(--c-brand-hover, #c45a1e);
    text-decoration:none !important;
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(0,0,0,.22);
}
.gallery-more:hover .gallery-more__icon,
.gallery-more:focus .gallery-more__icon{
    background:rgba(255,255,255,.12);
    border-left:1px solid rgba(255,255,255,.35);
}
.gallery-more:hover .gallery-more__icon svg,
.gallery-more:focus .gallery-more__icon svg{
    fill:#fff; opacity:1; filter:none;
}
.gallery-more:focus-visible{
    outline:2px solid rgba(255,255,255,.7);
    outline-offset:2px;
}
.woning-gallery__item.gi-3 .gallery-more{ display:none; }
@media (min-width:641px){
    .woning-gallery__item.gi-1 .gallery-more{ display:none; }
    .woning-gallery__item.gi-3 .gallery-more{ display:inline-flex; }
}
@media (max-width:640px){
    .woning-gallery__item.gi-1 .gallery-more{ display:inline-flex; }
    .woning-gallery__item.gi-3 .gallery-more{ display:none; }
}


/* Specs regel */
.woning-specs {
    margin: 16px 0 24px;
}

/* Mobiel: normale bullets met ruimere inspringing */
.woning-specs__list {
    list-style: disc outside;
    margin: 0;
    padding-inline-start: 2rem;   /* marge links */
    padding-left: 2rem;           /* fallback */
}
.woning-specs__list li {
    margin: .3rem 0;
    line-height: 1.4;
}

/* Desktop/tablet: naast elkaar + dot exact gecentreerd */
@media (min-width: 641px) {
    .woning-specs__list {
        /* totale ruimte tussen twee items (links vd dot + dot + rechts vd dot) */
        --sep-space: 3.5rem;
        --dot-size: .32em;

        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .woning-specs__list li {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        margin: 0;
        gap: .4em;                  /* ruimte tussen <strong> en label */
        line-height: 1.35;
    }

    .woning-specs__list li + li {
        margin-left: var(--sep-space);
        position: relative;
    }
    .woning-specs__list li + li::before {
        content: "";
        position: absolute;
        top: 50%;
        left: calc(var(--sep-space) / -2); /* midden van de totale ruimte */
        transform: translate(-50%, -50%);
        width: var(--dot-size);
        height: var(--dot-size);
        border-radius: 50%;
        background: currentColor;
    }
}

/* ============== Woning-omschrijving (collapsible) ============== */
.woning-description{
    --page-bg: #fff;
    --text: #0E2F52;
    --brand: #DF772F;         /* oranje */
    --brand-hover: #C96526;   /* donkerder oranje */
    --border: rgba(0,0,0,.1);

    margin:24px 0;
    padding:20px 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    color:var(--text);

    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:center; /* toggle knop centreren */
}

/* Ingeklapte content */
.woning-description__content{
    order:1;
    max-height:320px;
    overflow:hidden;
    position:relative;
    transition:max-height .3s ease;
    width:100%;
}
.woning-description__content::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:56px;
    background:linear-gradient(to bottom, rgba(255,255,255,0), var(--page-bg));
    pointer-events:none;
}
.woning-description__toggle[aria-expanded="true"] + .woning-description__content{
    max-height:none;
}
.woning-description__toggle[aria-expanded="true"] + .woning-description__content::after{
    display:none;
}

/* ---------------- Subtiele 'Toon meer/minder' link ---------------- */
.woning-description__toggle{
    order:2;
    appearance:none; -webkit-appearance:none;
    background:none !important;
    border:none !important;
    box-shadow:none !important;

    color:var(--brand) !important;
    font:600 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    cursor:pointer;

    display:inline-flex;
    align-items:center;
    gap:6px;

    text-decoration:none !important; /* nooit underline */
}
.woning-description__toggle:hover,
.woning-description__toggle:focus-visible{
    color:var(--brand-hover) !important;
    text-decoration:none !important; /* zeker geen underline */
}
.woning-description__toggle:active{
    color:var(--brand-hover) !important;
}

/* Chevron icoon */
.woning-description__toggle::after{
    content:"";
    display:inline-block;
    width:8px; height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translateY(-1px) rotate(45deg);
    transition:transform .2s ease;
}
.woning-description__toggle[aria-expanded="true"]::after{
    transform:translateY(2px) rotate(-135deg);
}

/* Label wissel */
.woning-description__toggle .label-less{ display:none; }
.woning-description__toggle[aria-expanded="true"] .label-more{ display:none; }
.woning-description__toggle[aria-expanded="true"] .label-less{ display:inline; }

/* --------- Responsive fine-tune --------- */
@media (max-width:640px){
    .woning-description{ margin:20px 0; padding:14px 0; }
    .woning-description__content{ max-height:200px; }
}

/* ===============================
   Over deze woning – styles
   =============================== */

/* Section container + onderlijn + compacte top spacing */
#specificaties.woning-specs--details{
    margin: 12px 0 24px;           /* dichter onder de lijn erbóven */
    padding: 12px 0 20px;          /* interne lucht */
    border-bottom: 1px solid #E6E8EB;
    display: flex;                 /* nodig om knop onder content te plaatsen */
    flex-direction: column;
}

/* Titel (alleen binnen #specificaties) – iets compacter bij sectie */
#specificaties .woning-specs__title{
    margin: 14px 0 12px;
}

/* Subkoppen (OVERDRACHT/BOUW/etc.) */
.woning-specs__group{
    margin: 26px 0 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .035em;
    color: #4a5a73;
    font-size: 1.2rem;
}
@media (min-width:1000px){
    .woning-specs__group{ font-size: 1.25rem; }
}

/* ====== listing() – werkt voor table én dl ====== */
.woning-specs table,
.woning-specs dl{
    width: 100%;
    border-top: 1px solid #E6E8EB;
    margin: 0;
}

/* --- TABLE variant --- */
.woning-specs table{
    border-collapse: collapse;     /* doorlopende lijnen */
    table-layout: fixed;
}
.woning-specs table th,
.woning-specs table td{
    padding: .7rem 0;
    border-bottom: 1px solid #E6E8EB;
    vertical-align: middle;
}
.woning-specs table th{
    width: 52%;
    text-align: left;
    font-weight: 400;
    color: #222a39;
}
.woning-specs table td{
    width: 48%;
    text-align: left;
    padding-left: 1.25rem;         /* visuele kolomscheiding, lijn blijft doorlopen */
    font-weight: 700;
}

/* --- DL variant --- */
.woning-specs dl{
    display: grid;
    grid-template-columns: 52% 48%;
    gap: 0;                         /* geen gap → lijn breekt niet */
}
.woning-specs dt,
.woning-specs dd{
    padding: .7rem 0;
    border-bottom: 1px solid #E6E8EB;
    margin: 0;
}
.woning-specs dt{
    font-weight: 400;
    color: #222a39;
}
.woning-specs dd{
    font-weight: 700;
    text-align: left;
    padding-left: 1.25rem;          /* scheiding i.p.v. grid-gap */
}

/* Lange waarden mogen afbreken */
.woning-specs table td,
.woning-specs dd{
    word-break: break-word;
}

/* ====== Inklapbare content (Toon meer/minder) ====== */

/* Inhoud (tabelblokken) – VISUEEL boven de knop */
#specificaties .woning-specs__content{
    order: 1;
    max-height: 420px;              /* ingeklapt */
    overflow: hidden;
    position: relative;
    transition: max-height .3s ease;
}
#specificaties .woning-specs__content::after{
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events: none;
}

/* Toggle-knop – VISUEEL onder de content */
.woning-specs__toggle{
    order: 2;
    appearance: none; -webkit-appearance: none;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #DF772F !important;      /* oranje */
    font: 600 15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    cursor: pointer;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin: 16px 0 0;               /* EXTRA ruimte bóven de knop */
    width: 100%;
    text-decoration: none !important;
}
.woning-specs__toggle:hover,
.woning-specs__toggle:focus-visible{
    color: #C96526 !important;
}
.woning-specs__toggle::after{
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-1px) rotate(45deg);
    transition: transform .2s ease;
}
.woning-specs__toggle[aria-expanded="true"]::after{
    transform: translateY(2px) rotate(-135deg);
}
.woning-specs__toggle .label-less{ display: none; }
.woning-specs__toggle[aria-expanded="true"] .label-more{ display: none; }
.woning-specs__toggle[aria-expanded="true"] .label-less{ display: inline; }

/* Uitgeklapt: onbeperkte hoogte + geen gradient */
#specificaties .woning-specs__toggle[aria-expanded="true"] + .woning-specs__content{
    max-height: none;
}
#specificaties .woning-specs__toggle[aria-expanded="true"] + .woning-specs__content::after{
    display: none;
}

/* ====== Mobiel: stapelen ====== */
@media (max-width:640px){
    /* TABLE stapelen */
    .woning-specs table,
    .woning-specs tbody,
    .woning-specs tr,
    .woning-specs th,
    .woning-specs td{ display:block; width:100%!important; }
    .woning-specs table th,
    .woning-specs table td{ border-bottom:0; }
    .woning-specs tr{ padding:.55rem 0; border-bottom:1px solid #E6E8EB; }
    .woning-specs table th{ padding:0; font-weight:400; color:#222a39; }
    .woning-specs table td{ padding:.2rem 0 0; font-weight:700; }

    /* DL stapelen */
    .woning-specs dl{ grid-template-columns:1fr; }
    .woning-specs dt, .woning-specs dd{ border-bottom:0; }
    .woning-specs dt{ padding:.55rem 0 0; }
    .woning-specs dd{ padding:.2rem 0 .55rem; border-bottom:1px solid #E6E8EB; padding-left:0; }

    /* lagere cutoff voor inklap */
    #specificaties .woning-specs__content{ max-height:340px; }
}

/* ===============================
   Video-sectie
   =============================== */
.woning-video{
    margin:18px 0 24px;
    padding:12px 0 35px;
    border-bottom:1px solid #E6E8EB;
}

/* Frame met afgeronde hoeken (géén zwart hier) */
.woning-video__frame{
    position:relative;
    border-radius:12px;
    overflow:hidden;
    background:#fff; /* was #000 → veroorzaakte zwarte hoeken */
    box-shadow:var(--shadow-1, 0 2px 6px rgba(0,0,0,.06));
    /* eventueel: border:1px solid #E6E8EB; */
}

/* Media-element (video/iframe) */
.woning-video__el{
    display:block;
    width:100%;
    aspect-ratio:16/9;   /* houdt verhouding netjes */
    height:auto;
    background:#000;     /* zwart achter de video zelf */
    border:0;
    outline:0;
    vertical-align:top;
    border-radius:inherit; /* spiegel de radius op het child */
}

/* Extra zekerheid voor iframes in sommige thema’s */
.woning-video__frame iframe.woning-video__el{
    display:block;
    width:100%;
    border:0;
}

/* =========================
   Plattegronden (1 / 2 / 4)
========================= */
.woning-floorplans{
    margin:26px 0;
    padding:18px 0 35px;
    border-bottom:1px solid #E6E8EB;
}
.woning-floorplans__title{ margin:0 0 14px; }

/* Grid: mobile 1, tablet 2, desktop 4 */
.woning-floorplans__grid{
    display:grid;
    grid-template-columns: 1fr;                           /* mobile: 1 */
    gap:16px;
}
@media (min-width: 680px){
    .woning-floorplans__grid{
        grid-template-columns: repeat(2, minmax(0,1fr));    /* tablet: 2 */
    }
}
@media (min-width: 1200px){
    .woning-floorplans__grid{
        grid-template-columns: repeat(4, minmax(0,1fr));    /* desktop: 4 */
    }
}

/* Kaart = link/tegel */
.woning-floorplans__item{
    display:block;
    background:#fff;
    border:1px solid #E6E8EB;
    border-radius:14px;
    overflow:hidden;
    text-decoration:none;
    color:#0a2342;
    box-shadow:0 2px 6px rgba(0,0,0,.04);
}

/* Afbeelding full-bleed */
.woning-floorplans__item--img { padding:0; }
.woning-floorplans__img{
    display:block;
    width:100%;
    height:auto;
    margin:0;
    border:0;
}

/* (optioneel) PDF-tegel, als je die ooit weer toont */
.woning-floorplans__item--pdf{
    display:flex;
    align-items:center;
    gap:.65rem;
    padding:18px 16px;
    font-weight:700;
}
.woning-floorplans__pdf-icon{ font-size:1.25rem; line-height:1; }

/* Mobiel fallback (al afgedekt door default) */
@media (max-width: 640px){
    .woning-floorplans__grid{ grid-template-columns: 1fr; }
}

/* =========================
   Brochures — tiles (1/2/3)
========================= */
.woning-brochure{
    margin:26px 0;
    padding:18px 0 35px;
    border-bottom:1px solid #E6E8EB;
}
.woning-brochure__title{ margin:0 0 14px; }

/* Kill alle markers/icoontjes die het thema kan injecteren */
.woning-brochure ul,
.woning-brochure li{ list-style:none !important; margin:0 !important; padding:0 !important; }
.woning-brochure *::marker{ content:"" !important; }
.woning-brochure a::before,
.woning-brochure a::after{ content:none !important; }

/* Grid: 1 / 2 / 3 columns */
.woning-brochure__list{
    display:grid;
    grid-template-columns: 1fr;          /* mobile: 1 */
    gap:14px;
    margin:0;
    padding:0;
}
@media (min-width:680px){
    .woning-brochure__list{ grid-template-columns: repeat(2, minmax(0,1fr)); }  /* tablet: 2 */
}
@media (min-width:1024px){
    .woning-brochure__list{ grid-template-columns: repeat(3, minmax(0,1fr)); }  /* desktop: 3 */
}

/* Tile link */
.woning-brochure__item{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:16px 18px;
    background:#fff;
    border:1px solid #E6E8EB;
    border-radius:12px;
    box-shadow:0 2px 6px rgba(0,0,0,.04);
    text-decoration:none !important;
    color:#0a2342 !important;     /* override themalinks */
    line-height:1.25;
}
.woning-brochure__item:hover{
    background:#f7f7f8;
    border-color:#d7dbe1;
    text-decoration:none !important;
}

/* Icoontje links (optioneel, uit je HTML: <span class="woning-brochure__icon">📄</span>) */
.woning-brochure__icon{
    flex:0 0 28px;
    width:28px; height:28px;
    display:grid; place-items:center;
    border-radius:6px;
    background:#eef2f6;
    font-size:16px;
    line-height:1;
    color:#0a2342;
}

/* Tekst */
.woning-brochure__text{ min-width:0; }
.woning-brochure__text strong{
    display:block;
    font-weight:800;
    word-break:break-word;
}
.woning-brochure__text small{
    display:block;
    margin-top:2px;
    color:#6b7280;
    font-weight:600;
}

/* =========================
   Open huis
========================= */
.woning-openhuis{
    margin:26px 0;
    padding:18px 0 35px;
    border-bottom:1px solid #E6E8EB;
}
.woning-openhuis__title{ margin:0 0 14px; }

.woning-openhuis__body{
    display:grid;
    gap:12px;
}

.woning-openhuis__slot{
    background:#fff;
    border:1px solid #E6E8EB;
    border-radius:12px;
    padding:14px 16px;
    box-shadow:0 2px 6px rgba(0,0,0,.04);
    color:#0a2342;
    line-height:1.45;
}

/* Zorg dat mogelijk meegeleverde <p> uit RW netjes uitlijnen */
.woning-openhuis__slot p{
    margin:.25rem 0;
}

/* =========================
   Lightbox (alleen voor foto's)
   ========================= */
.bb-lightbox{
    position: fixed;
    inset: 0;
    z-index: 2147483647 !important;   /* max 32-bit int, hoger dan meeste widgets */
    display: block;
}
.bb-lightbox[hidden]{ display: none !important; }

/* Donkere achtergrond als losse laag */
.bb-lightbox__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.92);
}

/* Binnenframe centreert content; zelf niet klikbaar */
.bb-lightbox__inner{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    pointer-events: none;           /* kinderen krijgen weer pointer-events */
}

/* De foto zelf */
.bb-lightbox__img{
    display: block;
    max-width: min(92vw, 1400px);
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    background: #000;
    pointer-events: auto;           /* klikbaar (voor evt. future features) */
    user-select: none;
    -webkit-user-drag: none;
}

/* Teller onderin */
.bb-lightbox__counter{
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 800;
    z-index: 10002;
    pointer-events: none;
}

/* Knoppen (vorige/volgende/sluiten) */
.bb-lightbox__btn{
    all: unset;                     /* wis thema-/plugin-styles */
    position: absolute;
    z-index: 10002;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    transition: background .15s ease, transform .06s ease;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: manipulation;
    /* contrast fix: tekst/pijl altijd leesbaar */
    mix-blend-mode: difference;
}
.bb-lightbox__btn:focus{ outline: none; }
.bb-lightbox__btn:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Posities */
.bb-lightbox__prev{ top: 50%; left: 18px;  transform: translateY(-50%); }
.bb-lightbox__next{ top: 50%; right: 18px; transform: translateY(-50%); }
.bb-lightbox__close{ top: 16px; right: 16px; }

/* Hover feedback – géén translateY die -50% overschrijft */
.bb-lightbox__btn:hover{ background: rgba(255,255,255,.22); }
.bb-lightbox__prev:hover,
.bb-lightbox__next:hover{ transform: translateY(-50%) scale(1.02); }
.bb-lightbox__close:hover{ transform: scale(1.02); }

/* Active */
.bb-lightbox__btn:active{ transform: none; }
.bb-lightbox__prev:active,
.bb-lightbox__next:active{ transform: translateY(-50%); }

/* Responsief */
@media (max-width: 640px){
    .bb-lightbox__inner{ padding: 16px; }
    .bb-lightbox__btn{ width: 42px; height: 42px; font-size: 22px; }
}

/* Back-knop boven adres */
.woning-single__back {
    margin-bottom: 10px;
}

/* Ghost button in oranje stijl */
.woning-single__back .bb-btn--ghost {
    background: #fff;
    color: var(--c-brand);           /* oranje tekst */
    border: 1px solid var(--c-border-2);
    height: 38px;
    line-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 1.1rem;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.woning-single__back .bb-btn--ghost:hover,
.woning-single__back .bb-btn--ghost:focus {
    background: #fef9f6;             /* subtiel tintje */
    border-color: #f1c5a3;           /* lichtere oranje rand */
    color: var(--c-brand-hover, #c45a1e); /* donkerder oranje */
    text-decoration: none !important;
}