@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

*{box-sizing:border-box}
:root{
  --green:#009600;
  --button:#00d92b;
  --ink:#070907;
  --result-top:#ffffff;
  --result-bottom:#d5e6b5;
  --line:#e4e9e1;
}
html,body{margin:0;min-height:100%;font-family:'Manrope',Arial,sans-serif;color:var(--ink);font-weight:400}
body.lookup-page{
  min-height:100vh;
  background:#fff;
  overflow-x:hidden;
  position:relative;
}
.site-shell{
  position:relative;
  z-index:2;
  width:1056px;
  max-width:calc(100% - 40px);
  margin:0 auto;
  padding:0 0 205px;
}

/* Header met exact aangeleverd logo */
.brand-header{
  height:116px;
  display:flex;
  align-items:center;
  padding-left:18px;
}
.brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
.brand-logo{
  display:block;
  width:230px;
  height:auto;
  max-height:88px;
  object-fit:contain;
  object-position:left center;
}

.search-card{
  background:var(--green);
  color:#fff;
  border-radius:8px;
  padding:29px 25px 24px;
  box-shadow:0 3px 9px rgba(0,0,0,.42);
  margin:0;
}
.search-card h1{
  margin:0 0 21px;
  font-size:32px;
  line-height:1.05;
  font-weight:800;
}
.search-card p{
  margin:0;
  font-size:13px;
  line-height:1.58;
  font-weight:500;
  max-width:940px;
}
.divider{
  height:1px;
  background:rgba(255,255,255,.95);
  margin:23px 0 16px;
}
.search-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:18px;
  align-items:end;
}
.search-grid label{
  display:grid;
  gap:7px;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
}
.search-grid input{
  width:100%;
  height:51px;
  border:0;
  border-radius:7px;
  background:#fff;
  padding:0 13px;
  font:500 15px 'Manrope',Arial,sans-serif;
  outline:none;
}
.search-grid input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.26)}
.search-button{
  height:44px;
  border:0;
  border-radius:7px;
  background:var(--button);
  color:#fff;
  font-family:'Manrope',Arial,sans-serif;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.search-button:disabled{opacity:.65;cursor:wait}
.search-error{
  margin-top:12px;
  padding:10px 12px;
  border-radius:5px;
  background:#fff;
  color:#a51d18;
  font-size:13px;
}

/* Result card proportions */
.property-card{
  margin-top:14px;
  padding:23px 34px 32px;
  background:linear-gradient(180deg,var(--result-top) 0%,#f5f8f0 32%,var(--result-bottom) 100%);
  border-radius:0 0 8px 8px;
  box-shadow:0 15px 30px rgba(0,0,0,.13);
}
.property-main{
  display:grid;
  grid-template-columns:0.92fr 1.28fr;
  gap:43px;
}
.property-info{
  padding:2px 0 0 3px;
  font-family:'Manrope',Arial,sans-serif;
  font-size:12px;
  line-height:1.52;
  font-weight:500;
}
.info-block{margin-bottom:25px}
.info-block strong,.label-block strong{display:block;margin-bottom:3px}
.technical{margin-bottom:24px}
.energy-arrow{
  position:relative;
  width:245px;
  max-width:82%;
  height:43px;
  margin:9px 0 9px;
  display:flex;
  align-items:center;
  padding-left:15px;
  color:#fff;
  font-size:30px;
  font-weight:700;
  background:#a2c335;
}
.energy-arrow:after{
  content:"";
  position:absolute;
  right:-22px;top:0;
  border-top:21.5px solid transparent;
  border-bottom:21.5px solid transparent;
  border-left:22px solid #a2c335;
}
.label-a{background:#14883a}.label-a:after{border-left-color:#14883a}
.label-b{background:#63a72f}.label-b:after{border-left-color:#63a72f}
.label-c{background:#a2c335}.label-c:after{border-left-color:#a2c335}
.label-d{background:#f2d32c}.label-d:after{border-left-color:#f2d32c}
.label-e{background:#efaa24}.label-e:after{border-left-color:#efaa24}
.label-f{background:#ec7220}.label-f:after{border-left-color:#ec7220}
.label-g{background:#d92924}.label-g:after{border-left-color:#d92924}
.label-unknown{background:#8d9990}.label-unknown:after{border-left-color:#8d9990}

.map-wrap{
  position:relative;
  height:330px;
  border-radius:10px;
  overflow:hidden;
  background:#ececec;
}
#map{position:absolute;inset:0;z-index:1}
.map-inset{
  position:absolute;
  inset:0;
  z-index:500;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 8px 16px rgba(0,0,0,.22);
}
.leaflet-control-attribution{font-size:9px!important}

/* Expanded information */
.extended{
  margin-top:31px;
  border-radius:10px;
  background:#fff;
  box-shadow:0 3px 9px rgba(0,0,0,.08);
  overflow:hidden;
}
.extended summary{
  list-style:none;
  position:relative;
  cursor:pointer;
  padding:15px 16px;
  color:#078b22;
  font-size:13px;
  font-weight:700;
}
.extended summary::-webkit-details-marker{display:none}
.chevron{
  position:absolute;right:14px;top:9px;
  width:31px;height:31px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#f8fbf8;
  box-shadow:0 2px 7px rgba(0,0,0,.14);
  font-size:19px;
}
.extended[open] .chevron{transform:rotate(180deg)}
.extended-content.structured{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
  padding:11px;
  background:#f4f8ef;
}
.detail-card{
  overflow:hidden;
  background:#fff;
  border:1px solid #d9e3d5;
  border-radius:8px;
}
.detail-card-wide{grid-column:2}
.detail-card h3{
  margin:0;
  padding:9px 11px;
  display:flex;
  align-items:center;
  gap:7px;
  border-bottom:1px solid #e6ece2;
  color:#075d1d;
  font-size:13px;
}
.detail-icon{
  display:inline-grid;
  place-items:center;
  width:22px;height:22px;
  flex:0 0 22px;
  border-radius:50%;
  color:#079026;
  background:#e8f5e6;
  font-size:11px;
}
.detail-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  padding:8px 11px;
  border-bottom:1px solid #edf1eb;
  font-size:12.4px;
}
.detail-row:last-child{border-bottom:0}
.detail-row span{color:#4d554b}
.detail-row strong{
  max-width:180px;
  text-align:right;
  overflow-wrap:anywhere;
}
.detail-empty{padding:11px;color:#687066;font-size:12px}

/* Exact aangeleverde skyline-achtergrond */
.city-bg{
  position:fixed;
  z-index:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:300px;
  background-image:url('/assets/bg.png?v=3.4.0');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% auto;
  pointer-events:none;
}

@media(max-width:760px){
  .site-shell{padding-top:8px;padding-bottom:145px}
  .brand-header{height:96px;padding-left:6px}
  .brand-logo{width:190px;max-height:74px}
  .search-grid{grid-template-columns:1fr 1fr}
  .search-button{grid-column:1/-1}
  .property-main{grid-template-columns:1fr}
  .map-wrap{height:255px}
  .property-card{padding:17px}
  .extended-content.structured{grid-template-columns:1fr}
  .detail-card-wide{grid-column:auto}
}
@media(max-width:480px){
  .site-shell{max-width:calc(100% - 18px)}
  .brand-header{height:82px}
  .search-grid{grid-template-columns:1fr}
  .search-button{grid-column:auto}
  .search-card{padding:18px 16px 16px}
  .search-card h1{font-size:24px}
  .energy-arrow{width:220px}
}

.energy-map-marker{
  position:relative;
  width:23px;
  height:23px;
  background:#0e5f34;
  border:3px solid #fff;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:0 2px 6px rgba(0,0,0,.32);
}
.energy-map-marker:after{
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;
  left:5.5px;
  top:5.5px;
}

.property-info strong,
.detail-card h3,
.extended summary{
  font-family:'Manrope',Arial,sans-serif;
  font-weight:800;
}
.info-block strong,.label-block strong{
  font-size:12.5px;
}
.detail-row{
  font-family:'Manrope',Arial,sans-serif;
}
.leaflet-container{
  font-family:Arial,Helvetica,sans-serif;
}


/* v3.7 — typografie exact consistenter */
body,
input,
button,
textarea,
select,
summary,
.property-card,
.extended,
.detail-card{
  font-family:'Manrope',Arial,sans-serif;
}

.search-card h1{
  font-size:30px;
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.55px;
}

.search-card p{
  font-size:14px;
  line-height:1.55;
  font-weight:500;
}

.search-grid label{
  font-size:13px;
  line-height:1.25;
  font-weight:800;
}

.search-grid input{
  font-family:'Manrope',Arial,sans-serif;
  font-size:14px;
  line-height:1;
  font-weight:500;
}

.search-button{
  font-family:'Manrope',Arial,sans-serif;
  font-size:13px;
  line-height:1;
  font-weight:800;
}

/* Resultaatgedeelte: in v3.6 waren deze teksten te klein */
.property-info{
  font-family:'Manrope',Arial,sans-serif;
  font-size:14px;
  line-height:1.52;
  font-weight:500;
}

.property-info .info-block,
.property-info .label-block{
  font-size:14px;
}

.property-info strong,
.info-block strong,
.label-block strong{
  font-family:'Manrope',Arial,sans-serif;
  font-size:14px;
  line-height:1.35;
  font-weight:800;
}

#validUntil{
  font-size:13.5px;
  line-height:1.4;
}

.extended summary{
  font-family:'Manrope',Arial,sans-serif;
  font-size:13.5px;
  line-height:1.25;
  font-weight:800;
}

.detail-card h3{
  font-family:'Manrope',Arial,sans-serif;
  font-size:13.5px;
  line-height:1.3;
  font-weight:800;
}

.detail-row{
  font-family:'Manrope',Arial,sans-serif;
  font-size:13px;
  line-height:1.4;
}

.detail-row strong{
  font-size:13px;
  font-weight:700;
}

/* Kaart zoals origineel: OSM-details/huisnummers behouden, maar volledig grijs */
.leaflet-tile-pane{
  filter:grayscale(100%) saturate(0%) contrast(92%) brightness(105%);
}

.leaflet-marker-pane,
.leaflet-control-container{
  filter:none;
}

.leaflet-control-zoom a{
  font-family:Arial,Helvetica,sans-serif;
  font-size:18px;
}

.leaflet-control-attribution{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:9px!important;
}


/* v3.8 — afhankelijke adresvelden */
.field-wrap{
  position:relative;
  min-width:0;
}
.combo-control{
  position:relative;
  display:block;
}
.combo-control input{
  padding-right:38px;
}
.combo-toggle{
  position:absolute;
  right:5px;
  top:5px;
  width:32px;
  height:34px;
  border:0;
  border-left:1px solid #e0e5df;
  border-radius:0 5px 5px 0;
  background:#fff;
  cursor:pointer;
}
.combo-toggle:before{
  content:"";
  position:absolute;
  left:11px;
  top:11px;
  width:7px;
  height:7px;
  border-right:2px solid #168d2e;
  border-bottom:2px solid #168d2e;
  transform:rotate(45deg);
}
.combo-toggle:disabled{
  cursor:not-allowed;
  opacity:.38;
  background:#f1f3f1;
}
.search-grid input:disabled{
  background:#e7ebe7;
  color:#8b938b;
  cursor:not-allowed;
}
.search-button:disabled{
  background:#6bcf7d;
  opacity:.58;
  cursor:not-allowed;
}
.field-status{
  min-height:14px;
  margin-top:2px;
  display:block;
  font-size:10px;
  line-height:1.25;
  font-weight:600;
  color:rgba(255,255,255,.88);
}
.field-status.is-success{color:#d8ffdf}
.field-status.is-error{color:#ffe2df}
.field-status.is-loading{color:#fff6bf}

@media(max-width:760px){
  .field-status{min-height:12px}
}


/* v3.8.3 — vaste veldhoogtes: statusmeldingen mogen niets verschuiven */
.search-grid{
  align-items:start !important;
}

.field-wrap{
  position:relative;
  display:grid !important;
  grid-template-rows:16px 44px 16px;
  row-gap:7px;
  min-width:0;
}

.field-wrap > .combo-control{
  grid-row:2;
}

.field-wrap > input:not([type="hidden"]){
  grid-row:2;
}

.field-status{
  grid-row:3;
  min-height:16px !important;
  height:16px;
  margin:0 !important;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:9px !important;
  line-height:16px !important;
}

.combo-control{
  height:44px;
}

.combo-control input,
.search-grid > .field-wrap > input:not([type="hidden"]){
  height:44px !important;
}

.combo-toggle{
  top:5px;
  height:34px;
}

.search-action{
  display:grid;
  grid-template-rows:16px 44px 16px;
  row-gap:7px;
  min-width:0;
}

.action-label{
  grid-row:1;
  display:block;
  height:16px;
}

.search-action .search-button{
  grid-row:2;
  width:100%;
  height:44px !important;
  margin:0 !important;
  padding:0 12px;
  align-self:stretch;
}

.action-status{
  grid-row:3;
  display:block;
  height:16px;
}

.search-error{
  margin-top:8px !important;
}

/* Geen label is een geldig zoekresultaat, geen error-state */
.no-label-message{
  margin-top:9px;
  font-size:13px;
  line-height:1.4;
  color:#3b473d;
  font-weight:600;
}


/* v3.9 — kaart is aanklikbaar voor woninggegevens */
#map{
  cursor:crosshair;
}

.map-popup-loading,
.map-popup-address,
.map-popup-error{
  font-family:'Manrope',Arial,sans-serif;
  font-size:12px;
  line-height:1.4;
  min-width:120px;
}

.map-popup-error{
  color:#b42318;
}

.leaflet-popup-content-wrapper{
  border-radius:7px;
}

.leaflet-popup-content{
  margin:10px 12px;
}


/* v4.0 — kaart scrollzoom + vergrote kaartmodus */
.map-wrap{
  position:relative;
  transition:height .18s ease;
}

.map-expand-button{
  position:absolute;
  z-index:700;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:5px;
  background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.22);
  cursor:pointer;
  display:grid;
  place-items:center;
  padding:0;
}

.map-expand-button:hover{
  background:#f6f7f6;
}

.expand-icon{
  position:relative;
  width:15px;
  height:15px;
  display:block;
}

.expand-icon:before,
.expand-icon:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(#146633,#146633) left top/6px 2px no-repeat,
    linear-gradient(#146633,#146633) left top/2px 6px no-repeat,
    linear-gradient(#146633,#146633) right top/6px 2px no-repeat,
    linear-gradient(#146633,#146633) right top/2px 6px no-repeat,
    linear-gradient(#146633,#146633) left bottom/6px 2px no-repeat,
    linear-gradient(#146633,#146633) left bottom/2px 6px no-repeat,
    linear-gradient(#146633,#146633) right bottom/6px 2px no-repeat,
    linear-gradient(#146633,#146633) right bottom/2px 6px no-repeat;
}

.map-expand-button.is-active .expand-icon{
  transform:scale(.78);
}

.property-main.map-expanded{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

.property-main.map-expanded .map-wrap{
  grid-row:1;
  width:100%;
  height:520px;
}

.property-main.map-expanded .property-info{
  grid-row:2;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:24px;
  align-items:start;
  padding:4px 4px 0;
}

.property-main.map-expanded .property-info .info-block,
.property-main.map-expanded .property-info .label-block{
  margin:0;
  min-width:0;
}

.property-main.map-expanded .energy-arrow{
  width:230px;
  max-width:80%;
}

.property-main.map-expanded .address-info{
  grid-column:1;
}

.property-main.map-expanded .technical-info{
  grid-column:2;
}

.property-main.map-expanded .current-label-info{
  grid-column:3;
}

/* Muisscroll mag de Leaflet-kaart gebruiken */
.leaflet-container{
  overscroll-behavior:contain;
}

@media(max-width:760px){
  .property-main.map-expanded .map-wrap{
    height:390px;
  }

  .property-main.map-expanded .property-info{
    grid-template-columns:1fr;
    gap:18px;
  }

  .property-main.map-expanded .address-info,
  .property-main.map-expanded .technical-info,
  .property-main.map-expanded .current-label-info{
    grid-column:1;
  }
}


/* v4.1 — dynamische resultaatupdates zonder paginareload */
.property-card{
  position:relative;
}

.property-card.is-updating{
  pointer-events:none;
}

.property-card.is-updating:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:900;
  border-radius:inherit;
  background:rgba(255,255,255,.38);
  cursor:progress;
}

.property-card.is-updating .property-main,
.property-card.is-updating .extended{
  opacity:.78;
}

.search-button{
  box-sizing:border-box;
}

/* Voorkom browserscroll bij form-focus na zoekactie */
#lookupForm{
  scroll-margin-top:0;
}


/* v4.2 — toevoeging is uitsluitend een keuzelijst */
.addition-control{
  height:44px;
}

.addition-control select{
  width:100%;
  height:44px;
  border:0;
  border-radius:7px;
  background:#fff;
  color:#111;
  padding:0 36px 0 12px;
  font-family:'Manrope',Arial,sans-serif;
  font-size:14px;
  font-weight:500;
  outline:none;
  cursor:pointer;
}

.addition-control select:disabled{
  background:#e7ebe7;
  color:#8b938b;
  cursor:not-allowed;
}

.addition-control select:focus{
  box-shadow:0 0 0 3px rgba(255,255,255,.26);
}


/* v4.2.1 — toevoegingsveld exact uitlijnen met overige invoervelden */
.field-wrap{
  grid-template-rows:16px 44px 16px !important;
  row-gap:7px !important;
}

.addition-control{
  grid-row:2;
  display:block;
  width:100%;
  height:44px !important;
  margin:0;
  padding:0;
}

.addition-control select{
  display:block;
  width:100%;
  height:44px !important;
  min-height:44px;
  margin:0;
  padding:0 36px 0 12px;
  border:0;
  border-radius:7px;
  box-sizing:border-box;
  line-height:44px;
  vertical-align:top;
}

.search-action{
  grid-template-rows:16px 44px 16px !important;
  row-gap:7px !important;
}

.search-action .search-button{
  height:44px !important;
  min-height:44px;
  margin:0 !important;
  box-sizing:border-box;
}


/* v4.2.2 — toevoegingpijl exact zoals huisnummer */
.addition-control{
  position:relative;
}

.addition-control select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:42px !important;
  background-image:none !important;
}

/* rechter scheidingsvlak zoals bij huisnummer */
.addition-control:before{
  content:"";
  position:absolute;
  z-index:2;
  top:5px;
  right:5px;
  width:32px;
  height:34px;
  border-left:1px solid #e0e5df;
  border-radius:0 5px 5px 0;
  background:#fff;
  pointer-events:none;
}

/* groene chevron */
.addition-control:after{
  content:"";
  position:absolute;
  z-index:3;
  right:17px;
  top:16px;
  width:7px;
  height:7px;
  border-right:2px solid #168d2e;
  border-bottom:2px solid #168d2e;
  transform:rotate(45deg);
  pointer-events:none;
}

.addition-control:has(select:disabled):before{
  background:#f1f3f1;
  opacity:.65;
}

.addition-control:has(select:disabled):after{
  opacity:.38;
}


/* v4.2.3 — locked Toevoeging dezelfde kleur als locked Huisnummer */
.addition-control select:disabled{
  background:#e7ebe7 !important;
  color:#8b938b !important;
  opacity:1 !important;
}

.addition-control:has(select:disabled):before{
  background:#e7ebe7 !important;
  opacity:1 !important;
}

.addition-control:has(select:disabled):after{
  border-right-color:#8fbd98 !important;
  border-bottom-color:#8fbd98 !important;
  opacity:1 !important;
}


/* v4.2.5 — geen tekstregels onder invoervelden */
.field-wrap{
  grid-template-rows:16px 44px !important;
  row-gap:7px !important;
}

.search-action{
  grid-template-rows:16px 44px !important;
  row-gap:7px !important;
}

.field-status,
.action-status{
  display:none !important;
}

/* Foutstatus uitsluitend via rode rand/achtergrond */
.search-grid input.is-invalid,
.search-grid select.is-invalid{
  background:#fff4f4 !important;
  box-shadow:inset 0 0 0 2px #d92d20 !important;
  color:#1a1a1a !important;
}

.field-wrap .combo-control:has(input.is-invalid){
  border-radius:7px;
  box-shadow:0 0 0 2px #d92d20;
}

.field-wrap .combo-control:has(input.is-invalid) input{
  box-shadow:none !important;
}

.search-grid input.is-invalid:focus,
.search-grid select.is-invalid:focus{
  box-shadow:inset 0 0 0 2px #d92d20, 0 0 0 2px rgba(217,45,32,.15) !important;
}


/* v4.2.9 - achtergrond resultaatkaart volgt energielabel */
.result-card,
#resultCard,
.result-panel,
#resultPanel {
  transition: background .22s ease;
}

.label-bg-aplus,
.label-bg-a,
.label-bg-b {
  background: linear-gradient(180deg, #ffffff 0%, #f4faf5 22%, #d9eddf 62%, #a9d6b8 100%) !important;
}

.label-bg-c {
  background: linear-gradient(180deg, #ffffff 0%, #f8faf1 22%, #e8f0d1 62%, #c8dda0 100%) !important;
}

.label-bg-d {
  background: linear-gradient(180deg, #ffffff 0%, #fbf8ef 22%, #efe3bf 62%, #dfca8c 100%) !important;
}

.label-bg-e,
.label-bg-f,
.label-bg-g {
  background: linear-gradient(180deg, #ffffff 0%, #fcf8f0 22%, #f2dfbd 62%, #e8c58c 100%) !important;
}

.label-bg-none {
  background: linear-gradient(180deg, #ffffff 0%, #f8faf4 22%, #e9f1d8 62%, #cfdfa8 100%) !important;
}


/* v4.3.0 — exacte energielabelkleuren A t/m G */
.energy-arrow.label-a,
.energy-arrow.label-aplus{
  background:#22B14C !important;
}
.energy-arrow.label-a:after,
.energy-arrow.label-aplus:after{
  border-left-color:#22B14C !important;
}

.energy-arrow.label-b{
  background:#8FF334 !important;
  color:#111 !important;
}
.energy-arrow.label-b:after{
  border-left-color:#8FF334 !important;
}

.energy-arrow.label-c{
  background:#BDFD2C !important;
  color:#111 !important;
}
.energy-arrow.label-c:after{
  border-left-color:#BDFD2C !important;
}

.energy-arrow.label-d{
  background:#FFF300 !important;
  color:#111 !important;
}
.energy-arrow.label-d:after{
  border-left-color:#FFF300 !important;
}

.energy-arrow.label-e{
  background:#FF9B34 !important;
  color:#111 !important;
}
.energy-arrow.label-e:after{
  border-left-color:#FF9B34 !important;
}

.energy-arrow.label-f{
  background:#FF7E26 !important;
  color:#111 !important;
}
.energy-arrow.label-f:after{
  border-left-color:#FF7E26 !important;
}

.energy-arrow.label-g{
  background:#ED1C24 !important;
}
.energy-arrow.label-g:after{
  border-left-color:#ED1C24 !important;
}

/* Resultaatachtergronden afgeleid van exact dezelfde basiskleuren */
.label-bg-aplus,
.label-bg-a{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f5fbf7 24%,
      #dff3e5 58%,
      rgba(34,177,76,.34) 100%
    ) !important;
}

.label-bg-b{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f9fff4 24%,
      #ebfbdc 58%,
      rgba(143,243,52,.34) 100%
    ) !important;
}

.label-bg-c{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfff4 24%,
      #f0fad7 58%,
      rgba(189,253,44,.34) 100%
    ) !important;
}

.label-bg-d{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fffef5 24%,
      #fff9d5 58%,
      rgba(255,243,0,.30) 100%
    ) !important;
}

.label-bg-e{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fffaf5 24%,
      #fbe8d2 58%,
      rgba(255,155,52,.34) 100%
    ) !important;
}

.label-bg-f{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fff8f4 24%,
      #f9dfcf 58%,
      rgba(255,126,38,.34) 100%
    ) !important;
}

.label-bg-g{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fff6f6 24%,
      #f7dada 58%,
      rgba(237,28,36,.28) 100%
    ) !important;
}


/* v4.3.1 — labelkleuren volgens laatste referentie */
.energy-arrow.label-a,
.energy-arrow.label-aplus{
  background:#00913C !important;
  color:#fff !important;
}
.energy-arrow.label-a:after,
.energy-arrow.label-aplus:after{
  border-left-color:#00913C !important;
}

.energy-arrow.label-b{
  background:#55AA32 !important;
  color:#fff !important;
}
.energy-arrow.label-b:after{
  border-left-color:#55AA32 !important;
}

.energy-arrow.label-c{
  background:#C8D200 !important;
  color:#fff !important;
}
.energy-arrow.label-c:after{
  border-left-color:#C8D200 !important;
}

.energy-arrow.label-d{
  background:#FFEB0F !important;
  color:#fff !important;
}
.energy-arrow.label-d:after{
  border-left-color:#FFEB0F !important;
}

.energy-arrow.label-e{
  background:#FAB90A !important;
  color:#fff !important;
}
.energy-arrow.label-e:after{
  border-left-color:#FAB90A !important;
}

.energy-arrow.label-f{
  background:#EE7F33 !important;
  color:#fff !important;
}
.energy-arrow.label-f:after{
  border-left-color:#EE7F33 !important;
}

.energy-arrow.label-g{
  background:#E10A1E !important;
  color:#fff !important;
}
.energy-arrow.label-g:after{
  border-left-color:#E10A1E !important;
}

/* Achtergronden afgeleid van dezelfde referentiekleuren */
.label-bg-aplus,
.label-bg-a{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f4faf6 24%,
      #d9eee2 58%,
      rgba(0,145,60,.34) 100%
    ) !important;
}

.label-bg-b{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f6fbf3 24%,
      #e3f0dc 58%,
      rgba(85,170,50,.34) 100%
    ) !important;
}

.label-bg-c{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcf2 24%,
      #eff0d2 58%,
      rgba(200,210,0,.34) 100%
    ) !important;
}

.label-bg-d{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fffdf2 24%,
      #fff7c9 58%,
      rgba(255,235,15,.30) 100%
    ) !important;
}

.label-bg-e{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fffaf0 24%,
      #f9ebc7 58%,
      rgba(250,185,10,.33) 100%
    ) !important;
}

.label-bg-f{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fff8f4 24%,
      #f4dfd2 58%,
      rgba(238,127,51,.34) 100%
    ) !important;
}

.label-bg-g{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fff5f5 24%,
      #f4d7da 58%,
      rgba(225,10,30,.27) 100%
    ) !important;
}


/* v4.3.2 — labelachtergrond direct op resultaatkaart */
#propertyResult.label-bg-aplus,
#propertyResult.label-bg-a,
.property-card.label-bg-aplus,
.property-card.label-bg-a{
  background:linear-gradient(180deg,#ffffff 0%,#f4faf6 24%,#d9eee2 58%,rgba(0,145,60,.34) 100%) !important;
}

#propertyResult.label-bg-b,
.property-card.label-bg-b{
  background:linear-gradient(180deg,#ffffff 0%,#f6fbf3 24%,#e3f0dc 58%,rgba(85,170,50,.34) 100%) !important;
}

#propertyResult.label-bg-c,
.property-card.label-bg-c{
  background:linear-gradient(180deg,#ffffff 0%,#fbfcf2 24%,#eff0d2 58%,rgba(200,210,0,.34) 100%) !important;
}

#propertyResult.label-bg-d,
.property-card.label-bg-d{
  background:linear-gradient(180deg,#ffffff 0%,#fffdf2 24%,#fff7c9 58%,rgba(255,235,15,.30) 100%) !important;
}

#propertyResult.label-bg-e,
.property-card.label-bg-e{
  background:linear-gradient(180deg,#ffffff 0%,#fffaf0 24%,#f9ebc7 58%,rgba(250,185,10,.33) 100%) !important;
}

#propertyResult.label-bg-f,
.property-card.label-bg-f{
  background:linear-gradient(180deg,#ffffff 0%,#fff8f4 24%,#f4dfd2 58%,rgba(238,127,51,.34) 100%) !important;
}

#propertyResult.label-bg-g,
.property-card.label-bg-g{
  background:linear-gradient(180deg,#ffffff 0%,#fff5f5 24%,#f4d7da 58%,rgba(225,10,30,.27) 100%) !important;
}

#propertyResult.label-bg-none,
.property-card.label-bg-none{
  background:linear-gradient(180deg,#ffffff 0%,#f8faf4 24%,#e9f1d8 58%,#cfdfa8 100%) !important;
}


/* v4.3.3 — volledig dekkende labelachtergronden, GEEN transparantie */
#propertyResult.label-bg-aplus,
#propertyResult.label-bg-a,
.property-card.label-bg-aplus,
.property-card.label-bg-a{
  background:linear-gradient(180deg,#ffffff 0%,#f2f8f4 20%,#d6eadf 55%,#a8d2b9 100%) !important;
}

#propertyResult.label-bg-b,
.property-card.label-bg-b{
  background:linear-gradient(180deg,#ffffff 0%,#f4f9f1 20%,#deecd8 55%,#b9d9ac 100%) !important;
}

#propertyResult.label-bg-c,
.property-card.label-bg-c{
  background:linear-gradient(180deg,#ffffff 0%,#fafbf0 20%,#eeeece 55%,#dfe29a 100%) !important;
}

#propertyResult.label-bg-d,
.property-card.label-bg-d{
  background:linear-gradient(180deg,#ffffff 0%,#fffdf0 20%,#fff7c5 55%,#fff18c 100%) !important;
}

#propertyResult.label-bg-e,
.property-card.label-bg-e{
  background:linear-gradient(180deg,#ffffff 0%,#fff9ed 20%,#f8e8c1 55%,#efd098 100%) !important;
}

#propertyResult.label-bg-f,
.property-card.label-bg-f{
  background:linear-gradient(180deg,#ffffff 0%,#fff6f0 20%,#f3ddcf 55%,#e7bda3 100%) !important;
}

#propertyResult.label-bg-g,
.property-card.label-bg-g{
  background:linear-gradient(180deg,#ffffff 0%,#fff3f3 20%,#f3d4d7 55%,#e5a7ad 100%) !important;
}

#propertyResult.label-bg-none,
.property-card.label-bg-none{
  background:linear-gradient(180deg,#ffffff 0%,#f8faf4 20%,#e9f1d8 55%,#cfdfa8 100%) !important;
}


/* v4.3.8 — uitsluitend visuele wijziging:
   geen energielabel = grijze, volledig dekkende achtergrond.
   Geen JavaScript of adreslogica aangepast. */
#propertyResult.label-bg-none,
.property-card.label-bg-none{
  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #f4f4f4 20%,
    #e2e2e2 55%,
    #c8c8c8 100%
  ) !important;
}


/* v4.4.3 — knop Uitgebreide informatie: pijltje exact centreren */
.details-toggle,
.info-toggle,
.extended-toggle,
details.result-details > summary {
  position: relative;
}

/* Bestaande ronde knop rechts: inhoud exact centreren */
.details-toggle .toggle-icon,
.info-toggle .toggle-icon,
.extended-toggle .toggle-icon,
details.result-details > summary .toggle-icon,
details.result-details > summary::after {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Indien het pijltje via pseudo-element wordt gemaakt */
.details-toggle .toggle-icon::before,
.info-toggle .toggle-icon::before,
.extended-toggle .toggle-icon::before {
  margin: 0 !important;
  position: static !important;
  transform-origin: center center !important;
}

/* Exacte selectors uit huidige bron */
.detail-icon {
  box-sizing:border-box;
}
.detail-icon svg {
  display:block;
  margin:auto;
}
.map-expand-button {
  box-sizing:border-box;
}
.map-expand-button svg {
  display:block;
  margin:auto;
}
.expand-icon {
  box-sizing:border-box;
}
.expand-icon svg {
  display:block;
  margin:auto;
}
.detail-card {
  box-sizing:border-box;
}
.detail-card svg {
  display:block;
  margin:auto;
}
.chevron {
  box-sizing:border-box;
}
.chevron svg {
  display:block;
  margin:auto;
}


/* v4.4.4 — exacte uitlijning ronde chevron bij Uitgebreide informatie */
.extended summary .chevron{
  position:absolute !important;
  right:14px !important;
  top:50% !important;
  transform:translateY(-50%) !important;

  width:31px !important;
  height:31px !important;
  box-sizing:border-box !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
  font-size:0 !important;

  border:1px solid #dbe9dc !important;
  border-radius:50% !important;
  background:#fff !important;
  color:#0b8f29 !important;
  box-shadow:0 2px 6px rgba(0,0,0,.08) !important;
}

/* Pijltje volledig zelf tekenen zodat browser-fonts geen invloed hebben */
.extended summary .chevron::before{
  content:"" !important;
  display:block !important;
  position:static !important;

  width:7px !important;
  height:7px !important;
  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-right:2px solid #0b8f29 !important;
  border-bottom:2px solid #0b8f29 !important;

  transform:translateY(-2px) rotate(45deg) !important;
  transform-origin:center center !important;
}

/* Open toestand: pijltje omhoog, eveneens exact gecentreerd */
.extended[open] summary .chevron{
  transform:translateY(-50%) !important;
}

.extended[open] summary .chevron::before{
  transform:translateY(2px) rotate(225deg) !important;
}

/* Eventuele oude pseudo-elementen uitschakelen */
.extended summary .chevron::after{
  content:none !important;
  display:none !important;
}


/* v4.5.1 — ECHTE FIX: gelijke regelafstand Adresgegevens / Technische gegevens */

/*
   Zowel adres als technische gegevens gebruiken nu exact dezelfde
   rijhoogte en line-height. Dit geldt vooral in de vergrote kaartmodus.
*/
.property-main.map-expanded .address-info,
.property-main.map-expanded .technical-info{
  font-size:14px !important;
  line-height:1.35 !important;
}

/* De zichtbare adresregels */
.property-main.map-expanded .address-info > #addressLine,
.property-main.map-expanded .address-info > #cityLine{
  height:27px !important;
  min-height:27px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  line-height:1.35 !important;
}

/* De drie technische regels */
.property-main.map-expanded .technical-info > div{
  height:27px !important;
  min-height:27px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  line-height:1.35 !important;
}

/* Koppen van beide blokken exact hetzelfde ritme */
.property-main.map-expanded .address-info > strong,
.property-main.map-expanded .technical-info > strong{
  display:flex !important;
  align-items:center !important;
  min-height:27px !important;
  margin:0 0 8px !important;
  padding:0 !important;
  line-height:1.35 !important;
}


/* v4.5.2 — provincie als derde adresregel, met exact dezelfde regelafstand */
.property-main.map-expanded .address-info > #provinceLine{
  height:27px !important;
  min-height:27px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  line-height:1.35 !important;
}


/* v4.5.3 — provincie is een echte derde adresregel */
.property-main.map-expanded .address-info > #provinceLine{
  height:27px !important;
  min-height:27px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  line-height:1.35 !important;
  color:inherit !important;
}


/* v4.5.4 — Huidig label gebruikt hetzelfde verticale ritme als de andere kolommen */
.property-main.map-expanded .current-label-info{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}

/* Kop exact gelijk aan Adresgegevens / Technische gegevens */
.property-main.map-expanded .current-label-info > strong{
  display:flex !important;
  align-items:center !important;
  min-height:27px !important;
  margin:0 0 8px !important;
  padding:0 !important;
  line-height:1.35 !important;
}

/* Labelregel op dezelfde hoogte als de eerste gegevensregel */
.property-main.map-expanded .current-label-info .energy-arrow{
  min-height:27px !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  align-self:flex-start;
}

/* Geldigheid/melding krijgt hetzelfde 27px regelritme */
.property-main.map-expanded .current-label-info #validUntil{
  min-height:27px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  line-height:1.35 !important;
}

/* Eventuele extra labelmelding sluit zonder willekeurige marge aan */
.property-main.map-expanded .current-label-info .label-note,
.property-main.map-expanded .current-label-info .no-label-message{
  min-height:27px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  line-height:1.35 !important;
}



/* v4.5.6 — correctie kaarttegels
   BELANGRIJK: Leaflet tiles blijven exact 256x256.
   Geen negatieve margins of geforceerde 257px tegels meer. */
.leaflet-container img.leaflet-tile{
  width:256px !important;
  height:256px !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

.leaflet-tile-pane,
.leaflet-tile-container{
  border:0 !important;
  outline:0 !important;
}

#map.leaflet-container{
  overflow:hidden;
}