/* CSS Document */

#theBody.woningzoeker.menu-centered #mainsection{
	margin: 80px 0 0 0;
}

#theBody.woningzoeker #extraMenu{
	display: none;
}

#btnRegister .chevron{
	display: none;
}

:root {
  --bg: #ffffff;
  --card-bg: #ffffff;
  --accent: #93A28D;
  --accent-soft: rgba(64, 84, 49, 0.08);
  --text: #000000;
  --muted: #93A28D;
  --available: #405431;
  --option: #E28350;   /* nieuw: onder optie */
  --taken: #c62828;
  --border-soft: #d8cfc7;
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.08);
}
* {
  box-sizing: border-box;
}

#theBody.woningzoeker .page-block-name h1{margin: 0px; padding: 0px;}


#woningsearch{
	display: none;
}
#header{
	position: absolute;
}

    .app {
      /*min-height: 	100vh;*/
      display: flex;
      flex-direction: column;
		width: 100%;
    }
.app .st0{
	stroke:#ffffff!important;
}
    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.85rem 5vw;
      border-bottom: 1px solid var(--border-soft);
      background: #ffffffee;
      backdrop-filter: blur(8px);
      position: sticky;
      top: 0;
      z-index: 20;
    }

    .brand {
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.8rem;
      color: var(--muted);
      display: flex;
      align-content: center;
      align-items: center;
      gap: 15px;
    }
    .brand object{
      width: 100%;
      height: auto;
      max-height: 45px;
      border-radius: 0;
      position: relative;
      z-index: 1;
    }

    .titel {
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.8rem;
      color: var(--muted);
      display: flex;
      align-content: center;
      align-items: center;
      gap: 15px;
    }

    .breadcrumbs {
      font-size: 0.8rem;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .breadcrumbs .crumb.current {
      color: var(--accent);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .stage {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 0px;
      gap: 0;
		background: var(--basecolorMedium);
    }

    .svg-stage {
      width: 100%;
      max-width: none;
      margin: 0 auto;
      background: none;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      border-radius: 0;
      overflow: hidden;
		aspect-ratio: 1920/1080;
    }

    object#mainSvg {
      width: 100%;
      height: auto;
      max-height: min(72vh, 780px);
	  max-height: none;
      border-radius: 0;
      background: none;
      position: relative;
      z-index: 1;
    }

    /* Filter bar */

    .filter-bar {
      width: 100%;
      max-width: 1440px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
      font-size: 1em;
	  padding: 30px 15px 15px;	
		flex-wrap: wrap;
    }


    @media (min-width: 768px) {
    .filter-bar {
	  padding: 30px 30px 15px 30px;	
		gap: 15px;
    }
    }
    .filter-bar-left {
      display: flex; width: 100%;
      align-items: center;
      gap: 0.5rem;
    }

    .view-select-wrapper {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted); flex-wrap: wrap; width: 100%;
    }

    .view-select {
      border-radius: 0;
      border: 1px solid var(--border-soft);
      background: #ffffff;
      padding: 0.35rem 0.75rem;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
      background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%;
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      padding-right: 1.5rem;
    }

    .filter-bar-right {
      display: flex;
      gap: 0.5rem;
    }

    .filter-btn {
      border-radius: 0;
      border: 1px solid var(--border-soft);
      background: #ffffff;
      padding: 0.35rem 0.75rem;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      font-size: 0.7rem;
      transition: background 0.15s ease, color 0.15s ease, border 0.15s ease,
        transform 0.1s ease;
    }

    .filter-btn:hover {
      border-color: var(--accent);
      color: #000000;
      transform: translateY(-1px);
    }

    .filter-btn.is-active {
      background: var(--accent);
      border-color: var(--accent);
      color: #ffffff;
    }

    /* -------- Popup overlay -------- */

    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      z-index: 58000000;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .overlay.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .unit-popup {
      max-width: 800px;
      width: 100%;
      max-height: 90vh;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 15px;
      background: var(--card-bg);
      border-radius: 0;
      padding: 1.5rem 1.75rem;
      box-shadow: var(--shadow-soft);
      position: relative;
      overflow: scroll;
      border: 1px solid var(--border-soft);
    }

    @media (max-width: 900px) {
      .unit-popup {
        grid-template-columns: minmax(0, 1fr);
        max-height: 100vh;
      }
    }

    .unit-popup-left,
    .unit-popup-right {
      position: relative;
      z-index: 1;
    }
    .unit-popup-left{
      padding-left: 15px;
	  align-items: center;
	align-content: center;
	display: flex;
	flex-wrap: wrap;
	}
    .unit-popup-right {
      padding: 0px;
    }
    .unit-title {
      margin: 0.75rem 0 0.4rem;
      font-size: 1.8rem;
      font-weight: normal;
		    
		color: var(--textcolorSecondair);
		width: 100%;
		display: flex!important;
			
    }

    .unit-subtitle {
      margin: 0;
      font-size: 0.9rem;
      color: var(--muted);
		display: none;
		width: 100%;
    }

    .unit-grid {
      margin-top: 1.25rem;
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 0.9rem 1.25rem;
      font-size: 0.86rem;
		width: 100%;
    }

    .unit-grid-label {
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 0.7rem;
      color: var(--muted);
      margin-bottom: 0.2rem;
    }

    .unit-grid-value {
      font-weight: 500;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 0.25rem 0.7rem;
      border-radius: 0;
      border: 1px solid transparent;
      background: #f7f7f7;
      margin-bottom: 0.5rem;
    }

    .status-pill span.dot {
      width: 6px;
      height: 6px;
      border-radius: 0;
    }

    .status-available {
      color: var(--available);
      border-color: rgba(27, 155, 75, 0.4);
      background: rgba(27, 155, 75, 0.06);
    }

    .status-available span.dot {
      background: var(--available);
    }

    .status-taken {
      color: var(--taken);
      border-color: rgba(198, 40, 40, 0.4);
      background: rgba(198, 40, 40, 0.06);
    }

    .status-taken span.dot {
      background: var(--taken);
    }

    .status-option {
      color: var(--option);
      border-color: rgba(255, 152, 0, 0.4);
      background: rgba(255, 152, 0, 0.06);
    }

    .status-option span.dot {
      background: var(--option);
    }


    /* Preview small in right column */

    .unit-preview {
      border-radius: 0px;
      border: 1px solid var(--border-soft);
      padding: 0.35rem;
      background: #fafafa;
      margin-bottom: 0.75rem;
        padding: 15px;
    }

    .unit-preview img {
      width: 100%;
      height: auto;
      object-fit: contain; object-position: center center;
      display: block;
      border-radius: 0;
    }

    .unit-previewtext {
      margin-top: 0.5rem;
      font-size: 0.75rem;
      color: var(--textcolor);
      max-height: 5.5rem;
      overflow: hidden;
    }

    .unit-previewtext p{
		margin: 0px; padding: 0px;
    }

    .unit-previewtext h3 {
      margin: 0.25rem 0;
      font-size: 0.86rem;
      font-weight: 500;
      color: #000;
    }

    .unit-previewtext .projectName {
      display: none; /* fallback als de span tóch zou meekomen */
    }

    /* Floorplan inside left column */

    .floorplan-header {
      margin-top: 1.5rem;
      margin-bottom: 0.5rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
        display: none;
    }

    .floorplan-badge {
      font-size: 0.72rem;
      padding: 0.15rem 0 0.15rem 0.6rem;
      border-radius: 0;
      border: 0px solid var(--border-soft);
      background: none;
      color: var(--muted);
    }

    .floorplan-wrapper {
      border-radius: 0;
      padding: 0px;
      position: relative;
      overflow: hidden;
      max-height: 55vh;
		display: none!important;
    }

    object#floorplanSvg {
      width: 100%;
      height: auto;
      max-height: 50vh;
      display: block;
      border-radius: 0;
    }

    /* CTA column */

    .cta-stack {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-top: 0rem; padding-top: 0px; width: 100%; max-width: 360px;
    }

    .cta-btn {
      border-radius: 888px;
      padding: 0.65rem 0.9rem;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      border: 1px solid var(--accent);
      background: #ffffff;
      cursor: pointer;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      transition: background 0.15s ease, color 0.15s ease, border 0.15s ease,
        transform 0.1s ease;
      text-decoration: none!important;
      color: var(--basecolorMedium);
    }

#btnFloorplan,
#btnFavControl,
#btnLigging,
#btnInfo{
	border: 0px; padding: 0px; width: auto; background: none;
}

    .cta-btn span.label {
      flex: 1;
    }

    .cta-btn span.chevron {
      font-size: 0.9rem;
      color: var(--muted);
    }

    .cta-btn.primary {
      background: var(--specialcolor);
      border-color: var(--specialcolor);
      color: #ffffff;
    }

    .cta-btn.primary span.chevron {
      color: #fff;
    }

    .cta-btn.subtle {
      background: #fafafa;
    }

    .cta-btn:hover {
      /*transform: translateY(-1px);*/
      /*box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);*/
      color: var(--specialcolor);
      border: 1px solid var(--specialcolor);
    }
    .cta-btn.primary:hover{
      background: var(--textcolor);
      border-color: var(--textcolor);
      color: #ffffff;
    }

    .close-btn {
      position: absolute;
      top: 30px;
      right: 10px;
      z-index: 2;
      background: #ffffff;
      border-radius: 0;
      border: 0px solid var(--border-soft);
      color: var(--specialcolor);
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1.1rem;
      line-height: 1;
	  border: 0px solid var(--border-soft);
	  outline: none!important;
      /*transition: background 0.15s ease, transform 0.15s ease,
        box-shadow 0.15s ease;*/
    }

    .close-btn:hover {
      /*background: #f2f2f2;
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);*/
    }

    .overlay-click-catcher {
      position: fixed;
      inset: 0;
      z-index: 0;
    }

    .unit-tooltip {
      position: fixed;
      z-index: 58000001; /* hoger dan overlay-bg, lager dan popup zelf */
      pointer-events: none;
      background: var(--basecolorMedium);
      color: var(--bg);
      border-radius: 0px;
      border: 0px solid var(--border-soft);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
      padding: 0.75rem 0.9rem;
      font-size: 0.75rem;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.12s ease, transform 0.12s ease;
    }

    .unit-tooltip.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .unit-tooltip .tooltip-title {
      font-weight: 600;
      font-size: 1.3em; line-height: 1.4em;
      color: var(--specialcolor);
    }

    .unit-tooltip .tooltip-title span {
      font-size: 0.9rem;
      color: var(--bg);
    }

    .unit-tooltip .tooltip-row {
      line-height: 1.3;
      color: var(--textcolor);
      font-size: 1em;
    }
    .unit-tooltip .tooltip-row span {
		opacity: 0.8;
    }
    .unit-tooltip .tooltip-row p {
      color: var(--muted);
      font-size: 0.8rem;
    }

    .unit-tooltip .tooltip-status {
      margin-top: 0.2rem;
    }

    /* Kleur status tekst in tooltip */
    .unit-tooltip .tooltip-status--available {
      background: var(--available); padding: 4px 0px; text-align: center;
      color: var(--bg);
    }

    .unit-tooltip .tooltip-status--option {
      background: var(--option); padding: 4px 0px; text-align: center;
      color: var(--bg);
    }

    .unit-tooltip .tooltip-status--taken {
      background: var(--taken); padding: 4px 0px; text-align: center;
      color: var(--bg);
    }

	/* ---------- Legend panel ---------- */

	.legend-panel {
	  width: 100%;
	}

	.legend-panel-inner {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 15px;
	  align-items: flex-start; flex-wrap: wrap;
	}



	#viewLegend .legend-types{
	  display:flex; width: 100%; flex-wrap: wrap;
	  gap: 12px;
	}
	#viewLegend .legend-type-card{
	  width:200px; 
	  text-align:left;
	}

	.legend-types-block {
	  display: flex; justify-content: flex-start; padding: 0px 0px; padding-bottom: 0px;
		flex-wrap: wrap; width: 100%;
		gap: 0.35rem
	}

	.legend-building-block {
	  display: flex; justify-content: flex-start; padding: 0px 0px; padding-bottom: 0px;
		flex-wrap: wrap; width: 100%;
		gap: 0.35rem
	}

	.legend-status-block {
	   display: flex; justify-content: flex-start; padding: 15px 15px 15px 15px; 
		flex-wrap: wrap; display: none;
	}

    @media (min-width: 768px) {
	.legend-panel-inner {
	  gap: 30px;
	}
	
	.legend-types-block {
	  flex: 2 1 260px; padding: 0px 0px; 
	}
	
	.legend-building-block {
	  flex: 2 1 260px; padding: 0px 0px; 
	}

	.legend-status-block {
	  flex: 1 1 220px; padding: 0px 30px 15px 30px; 
	}
	}

	.legend-heading {
	  margin: 0 0 0.5rem;
	  font-size: 0.8rem;
	  text-transform: uppercase;
	  letter-spacing: 0.12em;
		min-width: 100%; text-align: left;
	}

    @media (min-width: 960px) {
		
	.legend-status-block {
		justify-content: flex-end;
	}
		
	.legend-status-block .legend-heading{
		text-align: right;
	}
	}

    @media (min-width: 960px) {
		.cta-stack{
			flex-direction: column; gap: 15px; margin-top: 15px;
		}
		.cta-btn{
			width: 100%;
		}
	}
	/* grid met kaarten per type */
	.legend-types {
	  gap: 0.65rem; width: 100%;
	  display: flex; 
	  gap: 0.65rem; flex-wrap: wrap;
	}

	.legend-type-card {
	  width: 165px;
	  text-align: left;
	  border: 1px solid var(--border-soft);
	  border-radius: 0;
	  background: #fafafa;
	  padding: 0.6rem 0.7rem;
	  cursor: pointer;
	  display: flex;
	  flex-direction: column;
	  gap: 0.35rem;
	  font-size: 0.78rem;
	  transition: background 0.15s ease, border-color 0.15s ease,
		transform 0.1s ease, box-shadow 0.15s ease;
		color: var(--textcolor);
	}
    @media (min-width: 768px) {
		
		.legend-type-card{
			width: 185px;
		}
	}

	.legend-type-card:hover {
	  border-color: var(--accent);
	  background: #ffffff;
	  transform: translateY(-1px);
	  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
	}

	.legend-type-card.is-active {
	  border-color: var(--highlightcolor);
	  background: var(--highlightcolor);
		color:var(--basecolor);
	}

	.legend-type-header {
	  display: flex;
	  /*justify-content: space-between;*/
	  align-items: baseline;
	  gap: 0.35rem; flex-wrap: nowrap;
	}

	.legend-type-name {
		white-space: nowrap;
	}

	.legend-type-total {
	  font-size: 0.7rem; white-space: nowrap; opacity: 0.6;
	  /*color: var(--muted);*/
	}

	.legend-type-status-row {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 0.25rem 0.4rem;
		
		display: none;
	}

	.legend-pill {
	  display: inline-flex;
	  align-items: center;
	  gap: 0.2rem;
	  padding: 0.1rem 0.45rem;
	  border-radius: 0px;
	  border: 1px solid transparent;
	  font-size: 0.7rem;
	  background: #ffffff;
	}

	.legend-pill .dot {
	  width: 7px;
	  height: 7px;
	  border-radius: 0px;
	}

	/* kleuren in legend */
	.legend-pill.status-available {
	  border-color: rgba(27, 155, 75, 0.25);
	  color: var(--available);
	}

	.legend-pill.status-available .dot {
	  background: var(--available);
	}

	.legend-pill.status-option {
	  border-color: rgba(243, 156, 18, 0.25);
	  color: var(--option);
	}

	.legend-pill.status-option .dot {
	  background: var(--option);
	}

	.legend-pill.status-sold {
	  border-color: rgba(198, 40, 40, 0.25);
	  color: var(--taken);
	}

	.legend-pill.status-sold .dot {
	  background: var(--taken);
	}

	.status-toggle-bar {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 0.4rem;
	  margin-top: 0.35rem;
	}

	.status-toggle {
	  display: inline-flex;
	  align-items: center;
	  gap: 0.3rem;
	  padding: 0.3rem 0.65rem;
	  border-radius: 0px;
	  border: 1px solid var(--border-soft);
	  background: #fafafa;
	  font-size: 0.72rem;
	  text-transform: uppercase;
	  letter-spacing: 0.08em;
	  color: var(--muted);
	  cursor: pointer;
	  transition: background 0.15s ease, border-color 0.15s ease,
		color 0.15s ease, transform 0.1s ease;
		outline: none!important;
	}

	.status-toggle .dot {
	  width: 7px;
	  height: 7px;
	  border-radius: 0px;
		display: none;
	}

	/* basis kleuren */
	.status-toggle.status-available .dot {
	  background: var(--available);
	}

	.status-toggle.status-option .dot {
	  background: var(--option);
	}

	.status-toggle.status-sold .dot {
	  background: var(--taken);
	}

	/* active state */
	.status-toggle.is-active.status-available {
	  border-color: rgba(27, 155, 75, 0.5);
	  background: rgba(27, 155, 75, 0.06);
	  color: var(--available);
	}

	.status-toggle.is-active.status-option {
	  border-color: rgba(243, 156, 18, 0.5);
	  background: rgba(243, 156, 18, 0.06);
	  color: var(--option);
	}

	.status-toggle.is-active.status-sold {
	  border-color: rgba(198, 40, 40, 0.5);
	  background: rgba(198, 40, 40, 0.06);
	  color: var(--taken);
	}

	.status-toggle:hover {
	  transform: translateY(-1px);
	}


.preview-download-btn {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 0px;
  border: 1px solid var(--border-soft);
  background: #ffffff;
  cursor: pointer;
  text-decoration: none !important;
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease, border 0.15s ease,
    transform 0.1s ease, box-shadow 0.15s ease;
}

.preview-download-btn::after {
  content: "↓";
  font-size: 0.85rem;
  margin-left: 0.4rem;
  color: var(--muted);
}

.preview-download-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  border-color: var(--accent);
}


#aanbod---woningen{
}
#aanbod---woningen .page-block-caption{
	justify-content: center;
}

.bwnr_row{
	background: none!important;
}
#woningenList{
	max-width: 1440px;
}


.bwnr-spec.beschikbaar{
	padding: 5px 0px 5px 0px; margin-top: 5px;
}

.bwnr-spec.onder_optie{
	background: var(--option); color:  var(--bg);
	padding: 5px 5px 5px 5px; margin-top: 5px; width: auto;
}
.bwnr-spec.verkocht{
	background: var(--taken); color:  var(--bg);
	padding: 5px 5px 5px 5px; margin-top: 5px; width: auto;
}

.bwnr_row .bwnr-spec .btn-primary:hover::before{
	color: var(--specialcolor);
}


.bwnr-spec.beschikbaar,
.bwnr-spec.onder_optie,
.bwnr-spec.verkocht{
	display: none;
}


.bwnr_row .bwnr-spec:nth-of-type(3){
	width: 250px; display: none;
}
.bwnr_row .bwnr-spec:nth-of-type(4){
	width: 250px; padding-left: 0px; text-align: left;
}

@media (min-width: 640px) {
.bwnr_row .bwnr-spec:nth-of-type(3){
	width: 165px;
}
}
@media (min-width: 1280px) {
.bwnr_row .bwnr-spec:nth-of-type(3){
	width: 195px;
}
}


.app .top-bar{
	display: none;
}
.legend-mobile-select {
  display: none;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border-soft, #d9d9d9);
  background: #fff;
  font: inherit;
  color: var(--textcolor);
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
	font-size: 14px;	
    display: block;
    margin-bottom: 12px;
}

.legend-type-card.is-empty {
  opacity: 0.45;
  cursor: not-allowed;
}

.legend-type-card.is-empty .legend-type-name,
.legend-type-card.is-empty .legend-type-total {
  opacity: 0.8;
}

#viewLegend,
#typeLegend,
#buildingLegend {
	display: none;
}


@media (min-width: 1280px) {
	.filter-bar{
		padding: 15px 30px 15px 30px;
	}
	
  #viewSelectMobile {
    display: none;
  }
  #viewLegend {
    display: flex;
  }
}

@media (min-width: 991px) {
	.legend-panel-inner{
		gap: 15px;
	}
	.app{
		flex-direction: row; align-content: stretch; max-width: 1700px;
		align-content: flex-end; align-items: flex-end;
		flex-wrap: wrap;
	}
	.stage{
		width: 100%;
		display: grid;
		grid-template-columns: 260px 1fr; gap: 0px;
	}
	.stage .filter-bar{
		width: 260px;
	}
	#viewLegend .legend-types{
		flex-direction: column-reverse;
	}
	.stage #svgStage{
		width: 100%;
	}
	
	.legend-panel{
	}
	#unitOverlay{
		width: 100%; background: rgba(207,199,194, 0.1); align-content: center; padding: 0px 15px;
		opacity: 1!important; visibility: visible!important; margin: 0px 0px;
	}
	#unitOverlay::before{
		width: 70%; align-content: center; position: absolute; left: 50%; top: 50%;
		content: "selecteer jouw woning in de woningzoeker om de info te bekijken";
		display: block; text-align: center; font-size: 24px; transform: translate(-50%,-50%);
		color: var(--basecolorMedium);
		
		display: none;
	}
	
	.unit-popup{
		opacity: 0; background: none;
	}
	.overlay.as-panel .unit-popup .unit-preview{
		background: none!important;
	}
}
	
	

/* preview image + zoom button */
.preview-image-wrap{
  position: relative;
}

.preview-zoom-btn{
  position: absolute;
  bottom: 0px;
  top: auto;
  right: 0px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.92);
  border: 0px solid var(--border-soft);
	outline: none!important;
  border-radius: 0;
  cursor: pointer;
  z-index: 2; display: none!important;
}

.preview-zoom-btn:hover{
  background: #fff;
}

.preview-zoom-btn:disabled{
  opacity: .35;
  cursor: default;
}

/* Lightbox */
.img-lightbox{
  position: fixed;
  inset: 0;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  z-index: 59000000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.img-lightbox.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.img-lightbox img{
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  display: block;
}

.img-lightbox-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  font-size: 26px;
}




.scrolltop{
	display: none;
}



/* =========================
   INLINE PANEL MODE
   (unitOverlay is NO longer a modal)
   ========================= */

.overlay.as-panel {
  position: relative;
  inset: auto;
  background: transparent;
  padding: 0;
  z-index: 1;

  /* it must take space in the layout */
  display: block;
  width: 100%;
  margin: 0 auto;

  /* we animate height with GSAP */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* hide the full-screen click-catcher (it blocks clicks if visible) */
.overlay.as-panel .overlay-click-catcher {
  display: none !important;
}

/* make the “popup” look like a normal block under the SVG */
.overlay.as-panel .unit-popup {
  max-width: 1280px;
  width: 100%;
  max-height: none;     /* let page scroll instead */
  overflow: visible;    /* no internal scroll unless you want it */
      box-shadow: none;
      position: relative;
      border: 0px solid var(--border-soft);
	padding: 30px 0px;
}

.overlay.as-panel .unit-popup .unit-preview{
	border: 0px solid var(--border-soft);
    background: var(--bg); padding-bottom: 0px; margin-bottom: 0px;
}


.overlay.as-panel .unit-popup .cta-stack{
	padding: 15px 0px;
}


.unit-popup-bottom{
  grid-column: 1 / -1; /* over beide kolommen */
  margin-top: 0.75rem;
}

.unit-popup-bottom.is-hidden{
  display:none;
}

.unit-gallery{
  display:grid;
  grid-template-columns: repeat(auto-fill, 60px);
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0px 0px; 
}

.unit-gallery img{
  width:100%; 
  aspect-ratio: 1/1; height: auto;
  object-fit:cover;
  display:block;
  border:0px solid var(--border-soft);
}


@media (min-width: 900px) {
	#unitOverlay{
		display: flex; justify-content: center;
	}
	.overlay.as-panel .unit-popup {
		padding: 50px 15px 50px 0px;
		grid-template-columns: 400px 1fr; gap:30px;
	}
    .unit-popup-right {
      paddingt: 0px; height: 100%; max-height: 100%;
    }
    .unit-preview ,
	.preview-image-wrap{
        padding: 0px; position: absolute; left: 0px; height: calc(100% - 30px); width: 100%; top: 15px;
    }
	.preview-image-wrap{
		height: 100%; top: 0px;
    }
	.unit-preview img{
		height: 100%;
	}
	.unit-gallery{
		padding: 0px 15px;
	}
}




.page-block.gallery.thumbs .page-block-module .link-image img {
    height: 100%;
    width: 100%;
    object-fit: contain!important;
    object-position: center center!important;
    aspect-ratio: auto!important;
}


.imglb-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 99999999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.imglb-overlay.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.imglb{
  position: relative;
  width: min(1100px, 100%);
  max-height: 90vh;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 12px;
}

.imglb-img{
  width: 100%;
  height: min(72vh, 720px);
  object-fit: contain;
  display: block;
  cursor: zoom-out;
}

.imglb-close{
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: transparent;
  color: #000;
  font-size: 22px;
  cursor: pointer;
  z-index: 2;
}

.imglb-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(255,255,255,0.85);
  cursor: pointer;
  padding: 6px 10px;
  font-size: 22px;
  line-height: 1;
  z-index: 2;
}
.imglb-prev{ left: 8px; }
.imglb-next{ right: 8px; }

.imglb-thumbs{
  display: flex;
  gap: 8px;
  overflow: auto;
  padding-top: 10px;
}

.imglb-thumb{
  border: 1px solid #ddd;
  padding: 0;
  background: #fff;
  cursor: pointer;
}

.imglb-thumb img{
  width: 64px;
  height: 64px;
  object-fit: cover;
  display: block;
}

.imglb-thumb.is-active{
  border-color: var(--accent);
}

.unit-gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gallery-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--specialcolor);
  background: transparent;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
	outline: none!important;
}

.gallery-bullet:hover {
  transform: scale(1.1);
}

.gallery-bullet.is-active {
  background: var(--specialcolor);
}

.gallery-bullet:disabled {
  opacity: 0.35;
  cursor: default;
}


/*.st0,
.st1{
	fill: var(--specialcolor)!important;
	stroke: var(--textcolor)!important;
    stroke-miterlimit: 20!important;
}*/





#btnMoreInfo{
	display: none!important;
}


/* =========================================================
   FAVORITES HEADER
========================================================= */
#favscontainer{
    position: absolute;
    top: 10px;
    right: 110px;
    z-index: 110;
}

.favorites-header {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.favorites-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: inherit;
  transition: opacity 0.2s ease;
    outline: none!important;
}

.favorites-toggle:hover {
  opacity: 0.8;
}

.favorites-toggle:focus-visible {
  outline: 2px solid rgba(97, 113, 42, 0.35);
  outline-offset: 4px;
}

.favorites-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.favorites-toggle-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  transition: transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
}

.favorites-toggle-label {
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.favorites-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #61712A;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.favorites-header.is-open .favorites-toggle-icon svg {
  transform: scale(1.05);
}

.favorites-header.is-open .favorites-toggle-icon svg,
.favorites-toggle[data-has-favorites="1"] .favorites-toggle-icon svg {
  fill: rgba(97, 113, 42, 0.16);
  stroke: #61712A;
}

/* =========================================================
   FAVORITES PANEL
========================================================= */

.favorites-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 360px;
  max-width: min(360px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid rgba(109, 96, 89, 0.14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 2000;
}

.favorites-header.is-open .favorites-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.favorites-panel-inner {
  padding: 18px;
}

.favorites-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.favorites-panel-head h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.favorites-panel-count {
  font-size: 12px;
  color: rgba(109, 96, 89, 0.7);
  white-space: nowrap;
}

.favorites-panel-body {
  max-height: 360px;
  overflow: auto;
}

.favorites-empty {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(109, 96, 89, 0.72);
  padding: 8px 0;
}

.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.favorite-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(109, 96, 89, 0.12);
  background: #fff;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.favorite-item:hover {
  border-color: rgba(97, 113, 42, 0.28);
}

.favorite-item.is-active {
  background: rgba(97, 113, 42, 0.06);
  border-color: rgba(97, 113, 42, 0.28);
}

.favorite-item-main {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: inherit;
}

.favorite-item-main:hover .favorite-item-title {
  color: #61712A;
}

.favorite-item-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.favorite-item-meta {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(109, 96, 89, 0.72);
}

.favorite-item-remove {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: 28px;
  height: 28px;
  line-height: 1;
  font-size: 22px;
  color: rgba(109, 96, 89, 0.6);
  transition: color 0.2s ease, transform 0.2s ease;
}

.favorite-item-remove:hover {
  color: #c62828;
  transform: scale(1.05);
}

.favorites-panel-foot {
  margin-top: 14px;
}

.favorites-cta {
  width: 100%;
}

.favorites-cta[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* =========================================================
   POPUP FAVORITE BUTTON
========================================================= */

#btnFavControl[data-fav-active="1"] {
  /*color: #61712A;*/
}

#btnFavControl[data-fav-active="1"] .label::before {
  content: "♥ ";
}

/* =========================================================
   ACTIVE UNIT IN LIST
========================================================= */

.rc-woning-row.active-unit,
.rc-woning-row .rc-woning-row-responsive.active-unit {
  background: rgba(97, 113, 42, 0.08);
}

.rc-woning-row.active-unit {
  outline: 1px solid rgba(97, 113, 42, 0.24);
  outline-offset: -1px;
}

.rc-woning-row.active-unit .rc-addr-line1,
.rc-woning-row .rc-woning-row-responsive.active-unit .rc-addr-line1 {
  color: #61712A;
}

/* =========================================================
   REACTION MODAL
========================================================= */

html.has-reaction-modal,
body.has-reaction-modal {
  overflow: hidden;
}

.reaction-modal {
  position: fixed;
  inset: 0;
  z-index: 3000000001;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.reaction-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.reaction-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
}

.reaction-modal-dialog {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  margin: 20px auto;
  background: #fff;
  border: 1px solid rgba(109, 96, 89, 0.12);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18);
  z-index: 1;
}

.reaction-modal-close {
  appearance: none;
  border: 0;
  background: transparent;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  color: rgba(109, 96, 89, 0.72);
  transition: color 0.2s ease, transform 0.2s ease;
}

.reaction-modal-close:hover {
  color: #000;
  transform: scale(1.04);
}

.reaction-modal .form-wrap {
  padding: 34px 28px 28px;
}

.reaction-modal .form-wrap h2 {
  margin: 0 0 8px; display: flex!important;
}

.reaction-modal-subtitle {
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(109, 96, 89, 0.72);
}

/* =========================================================
   FORM LAYOUT
========================================================= */

#reactionForm.is-success .form-input-row{
    display: none;
}


.form-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px 18px;
}

.form-grid label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.3;
}

.form-grid input,
.form-grid textarea {
  width: 100%;
  appearance: none;
  border: 1px solid rgba(109, 96, 89, 0.2);
  background: #fff;
  padding: 12px 14px;
  font: inherit;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-grid input:focus,
.form-grid textarea:focus {
  outline: none;
  border-color: rgba(97, 113, 42, 0.5);
  box-shadow: 0 0 0 3px rgba(97, 113, 42, 0.1);
}

.form-grid textarea {
  min-height: 130px;
  resize: vertical;
}

.form-row-full {
  grid-column: 1 / -1;
}

.submit-btn {
  appearance: none;
  border: 0;
  background: #61712A;
  color: #fff;
  padding: 14px 18px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.submit-btn:hover {
  opacity: 0.92;
}

.submit-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.form-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(109, 96, 89, 0.68);
}

/* =========================================================
   SELECTED HOUSES IN MODAL
========================================================= */

.reaction-selected-houses {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reaction-house-item {
  padding: 12px 14px;
  border: 1px solid rgba(109, 96, 89, 0.12);
  background: rgba(97, 113, 42, 0.04);
}

.reaction-house-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.reaction-house-meta {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(109, 96, 89, 0.72);
}

/* =========================================================
   FORM STATUS
========================================================= */

.form-status {
  margin-top: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid transparent;
}

.form-status.is-success {
  background: rgba(27, 155, 75, 0.08);
  border-color: rgba(27, 155, 75, 0.18);
  color: #1b9b4b;
}

.form-status.is-error {
  background: rgba(198, 40, 40, 0.08);
  border-color: rgba(198, 40, 40, 0.18);
  color: #c62828;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {
    #favscontainer{
        left: 15px; right: auto;
    }
  .favorites-toggle-label {
    display: none;
  }
    
    

  .favorites-panel {
    left: -8px; right: auto;
    width: min(300px, calc(100vw - 20px));
  }

  .reaction-modal-dialog {
    width: calc(100vw - 20px);
    margin: 10px auto;
    max-height: calc(100vh - 20px);
  }

  .reaction-modal .form-wrap {
    padding: 26px 18px 18px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}






#woningfilter {
  max-width: 1280px;
  margin: 0 auto;
  padding: 15px 15px 15px; width: 100%;
}

.woningfilter-summary {
  display: flex; width: 100%;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  background: #fff;
}

.woningfilter-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.woningfilter-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.woningfilter-value {
  font-size: 14px;
  color: var(--textcolor);
}

@media (max-width: 767px) {
  .woningfilter-summary {
    flex-direction: column;
    gap: 10px;
  }
}




















/*list*/


.rc-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:26px 16px;
}

h1{margin:0 0 18px;font-size:28px;}
h2{margin:30px 0 8px;font-size:22px;display:none!important;}
h3{margin:0 0 10px;font-size:18px; }

h4{margin:14px 0 8px;font-size:14px;letter-spacing:.02em;text-transform:uppercase;color:#444;}

.rc-root{
  background:#fff;
  border:0;
  border-radius:0;
  padding:0;
  margin:0 0 16px;
  box-shadow:none;
}

.rc-root-stats{
  font-size:13px;
  color:#333;
  margin:0 0 14px;
  display:none!important;
}

.rc-subtype{
  border-top:0;
  padding:30px;
  margin:15px 0 30px;
}

.rc-subtype:nth-of-type(2n + 1){
  background:#f5f5f5;
}

.rc-subtype:first-of-type{
  border-top:0;
  padding-top:0;
}

.rc-subtype-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;
  align-items:start;
  margin:0 0 12px;
}

.rc-subtype-grid--single{
  grid-template-columns:1fr;
}

.rc-subtype-col--media{
  min-height:120px;
}

.rc-stats{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:6px 14px;
  font-size:13px;
  color:#222;
  margin:0 0 14px;
}

.rc-stats .rc-k{
  color:#444;
  font-weight:600;
}

.rc-stats .rc-v{
  color:#111;
}

.rc-stats--compact{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.rc-stat-chip{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  font-size:12px;
}

.rc-stat-chip .rc-k{color:#666;font-weight:600;}
.rc-stat-chip .rc-v{color:#111;}

@media (max-width:780px){
  .rc-stats{grid-template-columns:140px 1fr;}
  .rc-subtype-grid{grid-template-columns:1fr;}
}

.rc-carousel{
  position:relative;
}

.rc-carousel-images{
  background:#ddd;
}

.rc-carousel-image{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}

.rc-carousel-bullets{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.rc-carousel-bullet{
  width:10px;
  height:10px;
  border-radius:999px;
  border:0;
  padding:0;
  background:rgba(0,0,0,.2);
  cursor:pointer;
}

.rc-carousel-bullet.rc-is-active{
  background:#111;
}

.rc-offer-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:12px 0 8px;
}

.rc-offer-count{
  font-size:13px;
  color:#444;
}

.rc-btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  border-radius:0;
  padding:8px 12px;
  font-size:13px;
  cursor:pointer;
  line-height:1;
}

.rc-btn:hover{background:#fafafa;}
.rc-btn:active{transform:translateY(1px);}

.rc-view-switch{
  display:flex;
  gap:8px;
  align-items:center;
}

.rc-view-btn.rc-is-active{
  background:#111;
  color:#fff;
  border-color:#111;
}

.rc-offer-panel{
  overflow:visible;
  opacity:1;
  height:auto;
}

.rc-offer-panel[hidden]{
  display:none!important;
}

.rc-offer-inner{
  padding-top:6px;
}

.rc-offer-group{
  margin-bottom:18px;
}

.rc-offer-subheader{
  margin:0 0 10px;
  padding:8px 12px;
  background:#ececec;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.rc-offer-view--list{display:block;}
.rc-offer-view--grid{display:block;}

body.rc-view-list .rc-offer-view--grid{display:none;}
body.rc-view-grid .rc-offer-view--list{display:none;}

.rc-table{
  border:1px solid rgba(0,0,0,.08);
  border-radius:0;
  overflow-x:auto;
  overflow-y:hidden;
  background:#fff;
  width:100%;
}

.rc-row{
  display:grid;
  grid-template-columns:var(--rc-list-columns);
  gap:0;
  align-items:stretch;
  width:100%;
  min-width:0;
  background:#fff;
  box-sizing:border-box;
}

.rc-row--head{
  background:#fafafa;
  font-weight:600;
  font-size:12px;
  color:#444;
}

.rc-cell{
  min-width:0;
  padding:10px 10px;
  border-top:1px solid rgba(0,0,0,.06);
  font-size:13px;
  box-sizing:border-box;
  overflow-wrap:break-word;
  word-break:break-word;
}

.rc-row--head .rc-cell{
  border-top:0;
}

.rc-woning-row-responsive{
  display:none;
}

.rc-cell img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:0;
  display:block;
  background:#ddd;
}

.rc-cell a,
.rc-aanbod-open{
  color:inherit;
}

.rc-cell--link{
  text-align:right;
  white-space:nowrap;
}

.rc-cell--status,
.rc-cell--tag,
.rc-cell--rooms,
.rc-cell--levelcount,
.rc-cell--floorpos,
.rc-cell--parking,
.rc-cell--livingarea,
.rc-cell--outdoorarea{
  white-space:nowrap;
}

.rc-addr-line1{
  font-weight:600;
}

.rc-addr-line2{
  color:#666;
  font-size:12px;
  margin-top:2px;
}

.rc-price{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:baseline;
}

.rc-price-type{font-weight:600;}
.rc-price-amount{
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
font-size: 13px;
font-weight: 600;
}
.rc-price-cond{color:#777; font-size: 0.8em;}

.rc-preview-trigger{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:20px;
  border:0px solid rgba(0,0,0,.14);
  background:#fff;
  cursor:pointer;
  padding:0;
  line-height:1;
}

.rc-preview-trigger:hover{
  background:#fff;
}

.rc-preview-trigger__icon{
  font-size:14px;
  display:block;
  line-height:1;
}

.rc-row-preview-popover{
  position:fixed;
  left:0;
  top:0;
  z-index:9999;
  display:none;
  padding:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.14);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.rc-row-preview-popover.rc-is-visible{
  display:block;
}

.rc-row-preview-popover img{
  display:block;
  width:auto;
  height:auto;
  max-width:var(--rc-row-preview-max-width, 600px);
  max-height:var(--rc-row-preview-max-height, 600px);
  background:#f0f0f0;
}

@media (min-width:1200px){
  .rc-woning-row{
    align-items:center;
  }
}

@media (max-width:1199px){
  .rc-table{
    overflow:visible;
  }

  .rc-row--head{
    display:none;
  }

  .rc-woning-row{
    display:block;
    border-top:1px solid rgba(0,0,0,.06);
  }

  .rc-table > .rc-woning-row:nth-of-type(2){
    border-top:0;
  }

  .rc-woning-row > .rc-cell{
    display:none;
  }

  .rc-woning-row-responsive{
    display:grid;
    gap:5px 14px;
    padding:14px 14px 15px;
    align-items:center;
  }

  .rc-wrr-cell{
    min-width:0;
  }

  .rc-wrr-cell--image{
    align-self:start;
  }

  .rc-wrr-cell--image img{
    width:52px;
    height:52px;
    aspect-ratio:1/1;
    object-fit:cover;
    display:block;
    background:#ddd;
  }

  .rc-wrr-cell--address .rc-addr-line1{
    font-size:14px;
    line-height:1.35;
  }

  .rc-wrr-cell--price,
  .rc-wrr-cell--livingarea{
    display:flex;
    flex-direction:row;
    align-items:baseline;
    gap:10px;
    min-width:0;
  }

  .rc-wrr-cell--price .rc-price{
    display:flex;
    flex-wrap:nowrap;
    align-items:baseline;
    gap:4px 8px;
    min-width:0;
  }

  .rc-wrr-inline-label{
    color:#666;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    flex:0 0 100px;
    width:100px;
    max-width:80px;
  }

  .rc-wrr-inline-value{
    color:#111;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    min-width:0;
  }

  .rc-wrr-cell--livingarea{
    font-weight:600;
    white-space:nowrap;
  }

  .rc-wrr-cell--meta{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:10px 18px;
  }

  .rc-wrr-meta-item{
    display:flex;
    align-items:baseline;
    gap:10px;
    min-width:0;
  }

  .rc-wrr-meta-label{
    color:#666;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    flex:0 0 100px;
    width:100px;
    max-width:80px;
  }

  .rc-wrr-meta-value{
    color:#111;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    min-width:0;
  }

  .rc-wrr-cell--actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-width:0;
  }

}

  .rc-wrr-status{
    min-width:0;
    font-size:13px;
    font-weight:600; padding: 3px 0px;
  }
	
  .rc-aanbod-open{
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    white-space:nowrap;
	text-decoration: none; font-size: 13px; padding: 3px 8px; border: 1px solid #999;
    margin-top: -4px;
    margin-bottom: -4px;
  }

@media (min-width:960px) and (max-width:1199px){
  .rc-woning-row-responsive.rc-has-image{
    grid-template-columns:52px minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "image address address"
      "image price living"
      "image meta actions";
  }

  .rc-woning-row-responsive.rc-no-image{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "address address"
      "price living"
      "meta actions";
  }

  .rc-wrr-cell--image{grid-area:image;}
  .rc-wrr-cell--address{grid-area:address;}
  .rc-wrr-cell--price{grid-area:price;}
  .rc-wrr-cell--livingarea{grid-area:living;}
  .rc-wrr-cell--meta{grid-area:meta;}
  .rc-wrr-cell--actions{grid-area:actions; justify-content:flex-end;}

  .rc-wrr-meta-item{
    flex:0 0 auto;
    width:auto;
  }
}

@media (min-width:600px) and (max-width:959px){
  .rc-woning-row-responsive.rc-has-image{
    grid-template-columns:52px minmax(0,1fr);
    grid-template-areas:
      "image address"
      "image price"
      "image living"
      "image meta"
      "image actions";
  }

  .rc-woning-row-responsive.rc-no-image{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "address"
      "price"
      "living"
      "meta"
      "actions";
  }

  .rc-wrr-cell--image{grid-area:image;}
  .rc-wrr-cell--address{grid-area:address;}
  .rc-wrr-cell--price{grid-area:price;}
  .rc-wrr-cell--livingarea{grid-area:living;}
  .rc-wrr-cell--meta{grid-area:meta;}
  .rc-wrr-cell--actions{grid-area:actions;}

  .rc-wrr-meta-item{
    flex:0 0 calc(50% - 9px);
    width:calc(50% - 9px);
  }
}

@media (max-width:599px){
  .rc-woning-row-responsive{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "address"
      "price"
      "living"
      "meta"
      "actions";
  }

  .rc-wrr-cell--image{
    display:none;
  }

  .rc-wrr-cell--address{grid-area:address;}
  .rc-wrr-cell--price{grid-area:price;}
  .rc-wrr-cell--livingarea{grid-area:living;}
  .rc-wrr-cell--meta{grid-area:meta;}
  .rc-wrr-cell--actions{grid-area:actions;}

  .rc-wrr-meta-item{
    flex:0 0 calc(50% - 9px);
    width:calc(50% - 9px);
  }
}


.rc-offer-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

@media (max-width:1050px){
  .rc-offer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:780px){
  .rc-offer-grid{
    grid-template-columns:1fr;
  }
}

.rc-offer-card{
  display:block;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:0;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}

.rc-offer-card img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  background:#ddd;
}

.rc-card-body{
  padding:12px;
}

.rc-card-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  align-items:flex-start;
}

.rc-card-row + .rc-card-row{
  margin-top:8px;
}

.rc-card-title{
  font-weight:700;
  font-size:14px;
}

.rc-card-sub{
  font-size:12px;
  color:#666;
  margin-top:2px;
}

.rc-card-price .rc-price{
  gap:8px;
}

.rc-card-item{
  display:flex;
  gap:6px;
  align-items:baseline;
  font-size:12px;
  color:#333;
}

.rc-card-item .rc-k{color:#666;}
.rc-card-item .rc-v{font-weight:600;color:#111;}

.rc-badge{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  padding:4px 8px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:0;
  color:#444;
  background:#fff;
}
.rc-carousel {
  position: relative;
  width: 100%;
  height: auto; 
}

.rc-carousel-images {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto; overflow: hidden;
}

.rc-carousel img.placeholder {
  width: 100%; opacity: 0;
  height: 100%; 
  pointer-events: none;
  object-fit: cover;
}
.rc-carousel-images .rc-img {
	object-position: center top;
  will-change: transform;
  position: absolute;
  top: 0;
  left: 0;	
  height: 100%; width: 100%; 	
}

.rc-carousel-images .rc-img {
  will-change: clip-path, transform;
}

.rc-carousel-images .rc-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rc-carousel-images {
  opacity: 1;
}

.rc-slide-title-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none; padding: 15px;
   padding: 10px 0px 20px 0px;
}

.rc-slide-title-container .rc-title {
  position: relative;
  text-align: right;
  filter: url(#blur-matrix) blur(0.25px);
  -webkit-filter: url(#blur-matrix) blur(0.25px);
  z-index: 2; color: var(--textcolor);
	font-size: 0.8em; margin: 0px;
}

.rc-slide-title-container .rc-title .rc-word {
  filter: blur(75px);
  -webkit-filter: blur(75px);
  will-change: filter, opacity;
  opacity: 0;
}

.rc-slider-controls {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  z-index: 10;
	
	display: none;
}

.rc-control-btn {
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0.075rem dashed rgba(255, 255, 255, 0.75);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease-in-out;
}

.rc-control-btn:hover {
  background-color: #fff;
}

.rc-control-btn svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: #000;
  transition: fill 200ms ease-in-out;
}

.rc-control-btn:hover svg {
  fill: #000;
}


@media (max-width: 900px) {
 

  .rc-slide-title-container {
    padding: 10px 10px 65px 10px;
  }

  .rc-slider-controls {
    top: 65%;
    width: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
    gap: 1rem;
  }

  .rc-control-btn {
    padding: 1rem;
  }

  .rc-control-btn svg {
    width: 1rem;
    height: 1rem;
  }
}

.rc-carousel-bullets { position: relative; left: 0%;top:0px; margin: 15px 0px 30px;  display: flex; gap: 10px; justify-content: flex-start;}
.rc-carousel-bullets .rc-bullet { width: 10px; height: 10px; border-radius: 5px; border: 1px solid currentColor; background: var(--textcolor); opacity: .5; padding: 0px; outline:none!important;}
.rc-carousel-bullets .rc-bullet.rc-is-active { opacity: 1; }


/* PROJECT RELATED CSS */

/**/


.rc-wrap{
  width: 100%;
  max-width:1310px;
  margin:0 auto;
  padding:0px 15px;
	color: var(--textcolor);
}
.rc-wrap h1{
	display: none;
}

.rc-offer-controls{
	display: none;
}
.rc-offer-inner h4{
	display: none;
}
.rc-subtype{
	padding: 0px; background: none!important;
}
.rc-subtype-grid--single{
	margin: 0px;
}
.rc-subtype-grid--single h3{
	color: var(--specialcolor); text-transform: none; margin: 0px; padding: 0px;
	font-size: 1.4em;
}
.rc-subtype-grid--single h3 span{
	opacity: 0.6; font-size: 12px; width: 70px; display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--specialcolor);  display: none;
}
.rc-offer-subheader{
	margin: 0px; background: var(--basecolor); color: var(--textcolor); padding-left: 0px; text-transform: none;
}
.rc-offer-subheader span{
	font-weight: normal; font-size: 12px;
	opacity: 0.6; width: 70px; display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--specialcolor);
}
.rc-row--head{
	background: var(--textcolorLight); 
}

.rc-offer-controls{
	margin-top: 0px;
}

.rc-stats{
	display: none;
}


.rc-offer-panel {
	margin-top: 0px;
}
.rc-cell.col-image{
	background: #ffffff; border: 0px;
}
.rc-cell img{
	width: 100%; height: 	100%; object-fit: contain; object-position: center center;
    aspect-ratio: 10 / 14;
}

.rc-offer-card img{
	width: 100%; height: 400px; object-fit: contain; object-position: center center;
    aspect-ratio: 10 / 14;
}

.rc-price-type{
	display: none;
}

.rc-cell--head.rc-cell--image{
	opacity: 0;
}


.rc-row.rc-woning-row.rc-row-beschikbaar .rc-cell--status,
.st-beschikbaar{
	color: green;
}
.rc-row.rc-woning-row.rc-row-verkocht .rc-cell--status,
.rc-row.rc-woning-row.rc-row-optie .rc-cell--status,
.st-verkocht,
.st-optie{
	color: red;
}
.rc-row.rc-woning-row.rc-row-optie .rc-cell--status,
.st-optie{
	color: orange;
}


.rc-woning-row.active-unit,
.rc-woning-row .rc-woning-row-responsive.active-unit {
  background: rgba(97, 113, 42, 0.08);
}

.rc-woning-row.active-unit {
  outline: 1px solid rgba(97, 113, 42, 0.28);
}

.rc-woning-row.active-unit .rc-addr-line1,
.rc-woning-row .rc-woning-row-responsive.active-unit .rc-addr-line1 {
  color: #61712A;
}


@media (min-width: 991px) {
	.rc-wrap{
	  padding:0px 30px;
	}
}

@media (min-width: 1200px) {
	.rc-price-amount{
		font-weight: normal;
	}
}