/**
 * aanbod-huisstijl.css
 *
 * De volledige Euverman & Nuyts-huisstijl voor de aanbod-pagina's (archief +
 * single woning), overgenomen van de oude euvermannuyts.nl-site en doorgetrokken
 * in het nieuwe thema.
 *
 * Dit bestand laadt als LAATSTE op de aanbod-pagina's, ná de Wielands/Realworks-
 * plugin-CSS en de gecompileerde Bootstrap (dist-app-reference.css). Daardoor
 * wint deze laag altijd: geen paars (#9365c1) of donkerblauw (#114459) van de
 * plugin meer — alles in onze stijl (rood #E3292B / #DE231F, grijstinten).
 *
 * @package euverman-nuyts
 */

/* ====================================================================
 * 1. Wielands/Bootstrap-merkkleur neutraliseren (paars -> Euverman-rood).
 *    Vangnet voor elk onderdeel dat --bs-primary nog via var() gebruikt.
 * ==================================================================== */
:root {
	--bs-primary: #E3292B !important;
}

/* ====================================================================
 * 2. Correcties die het OUDE thema niet nodig had, maar het NIEUWE thema
 *    wel: de nieuwe thema-chrome (vaste header/ticker/footer, Tailwind-
 *    reset) en de Bootstrap-reset doorkruisen deze gedeelde onderdelen op
 *    de aanbod-pagina's.
 * ==================================================================== */

/* Gedeelde ticker: merkrood houden (Bootstrap .bg-primary kleurt 'm anders) +
 * tekst halfvet, en de juiste top-offset onder de WP-adminbalk (ook op aanbod). */
.eu-ticker {
	background-color: hsl(var(--primary)) !important;
	font-weight: 600;
}
.admin-bar .eu-ticker {
	top: 104px;
}

/* Gedeelde footer: openingstijden-tabel randloos (Bootstrap zet celranden). */
.eu-footer table {
	width: auto !important;
	margin: 0 !important;
	border: 0 !important;
}
.eu-footer th,
.eu-footer td {
	border: 0 !important;
	background: transparent !important;
}

/* Zwevende knoppen: ronde, merkrode icoonknoppen (Bootstrap maakt ze ovaal/oranje
 * en de gecompileerde theme.css mist w-12/w-5). */
.eu-floating .eu-floating-toggle {
	width: 3rem;
	height: 3rem;
	padding: 0;
	border-radius: 9999px;
	background: hsl(var(--primary));
}
.eu-floating .eu-floating-toggle:hover {
	background: hsl(351 85% 36%);
}
.eu-floating .eu-floating-toggle svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Kaart-afbeelding: geen donkerblauwe (Wielands) achtergrond achter de foto. */
.grid-house-item__image {
	background-color: transparent !important;
}

/* Banner-kop "ONS WONINGAANBOD" links uitlijnen (theme.css centreert .section-title). */
.offer-list-banner-main-sec .section-title,
.offer-list-banner-main-sec .section-title h1 {
	text-align: left !important;
}

/* Hele aanbodpagina binnen de site-container: zoekbalk, resultaten en single-
 * content uitlijnen met de header/footer (max-width van de site). De banner-
 * achtergrond blijft full-bleed; alleen de inhoud wordt ingekaderd. */
.post-type-archive-rw_makelaar_houses .wrap,
.post-type-archive-rw_makelaar_houses .container,
.post-type-archive-rw_makelaar_houses .container--large,
.single-rw_makelaar_houses .wrap {
	max-width: 1340px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 18px;
	padding-right: 18px;
	box-sizing: border-box;
}

/* Uitgeklapte filters volledig in Euverman-stijl: checkboxes/radios in merkrood
 * i.p.v. browser-blauw (de labels/koppen zijn al donker). */
.rw-search-more-filters input[type="checkbox"],
.rw-search-more-filters input[type="radio"] {
	accent-color: #E3292B;
	width: 16px;
	height: 16px;
	cursor: pointer;
}
.rw-search-field__checkbox label,
.rw-search-field__radio label {
	cursor: pointer;
}

/* De Wielands-plugin (search-form.css) laadt soms ná deze laag; daarom forceren we
 * de kleuren met !important. Geen Wielands-blauw/paars meer in de zoekbalk/filters. */
.rw-search-form {
	background: #fff !important;
}
.rw-search-more-filters {
	background: #efefef !important;
}
.rw-search-field__submit.btn,
.rw-search-field__submit.btn:hover {
	background-color: #DE231F !important;
	border-color: #DE231F !important;
	color: #fff !important;
}
.rw-btn-more-filter,
.rw-btn-more-filter:focus {
	color: #DE231F !important;
	background-color: #fae0df !important;
	border-color: #fae0df !important;
}
.rw-btn-more-filter:hover {
	color: #DE231F !important;
	background-color: #f7cecc !important;
	border-color: #f2b0ad !important;
}
.rw-btn-more-filter::before {
	background-color: #DE231F !important;
}

/* Woningkaart: subtiele grijze rand, rood op hover (geen donkerblauw/paars meer). */
.grid-house-item {
	border-color: #ece9e4 !important;
}
.grid-house-item:hover,
.grid-house-item:focus-within,
.grid-houses__col:hover .grid-house-item {
	border-color: #E3292B !important;
}

/* NB: de zoek-autocomplete ("AJAX-voorvertoning") wordt verzorgd door
 * inc/live-search.php (.ajax-item-dropdown); de plugin-eigen .suggestions-list
 * wordt daar verborgen. */

/* ====================================================================
 * 3. 1-op-1 de CSS van de oude euvermannuyts.nl-site.
 * ==================================================================== */

#loaderajax{
	display:none;
}


.news-list-main-sec{
	padding-top:80px!important;
}

/* aanbod pagina */

.suggestions-box {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    width: 90%;
    display: none;
    z-index: 1000;
}

.suggestions-box div {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.suggestions-box div:last-child {
    border-bottom: none;
}

.suggestions-box div:hover {
    background: #f5f5f5;
}

/* seach */

.houses-offer-bottom-sec .form-group input, .houses-offer-bottom-sec .form-group select{
	min-width:200px;
}






.houses-offer {
    width: 100%;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
}

.houses-offer__form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
}

.houses-offer__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    width: 100%;
}

.houses-offer__group {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.houses-offer__group label {
    margin-right: 8px;
    font-size: 18px;
    color: #333;
}

.houses-offer__input,
.houses-offer__select {
    width: 100%;
    padding: 8px;
    border: none;
    background: transparent;
    font-size: 14px;
}

.houses-offer__select {
    appearance: none;
    cursor: pointer;
}

.houses-offer__group--search {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
	background: #d32f2f!important;
}

.houses-offer__search {
	width:100%!important;
	height:100%!important;
    background: #d32f2f!important;
    color: white;
    padding: 0px 0px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.houses-offer__search:hover {
    background: #b71c1c;
}

/* 🔹 Responsiveness */
@media (max-width: 768px) {
    .houses-offer__row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
.houses-offer-main-sec{
	margin-top:0px!important;
}
	.news-list-row{
		padding-top:0px;
	}
}


.news-item[data-open-house-start]:not([data-open-house-start=""]) .label {
  background-color: #0056b3;
  color: #fff;
}

.news-item .label {
    padding: 8px 12px!important;
}



.offer-detail-banner-sec .grid.span2{
  position: relative;
}
.offer-detail-banner-sec .grid.span2 .btn-group{
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: flex;
  gap: 12px;
  z-index: 2;
}


.offer-detail-banner-sec .button.btn-secondary{
	display:flex;
	gap:8px;
	font-size:17px;
	align-items:center;
	padding:10px 20px;
}
.offer-detail-banner-sec  .btn-group{
	flex-wrap:wrap;
}

.offer-detail-banner-sec{
	padding-top:50px!important;
}



.slide-in-offer-section.section-row h4{
	display:flex;
	flex-direction:column;
	gap:32px;
	justify-content:flex-start!important;

}
.slide-in-offer-section.section-row a{
	width:fit-content!important;
}










/* houses grid */


/* De container die om alle items heen staat */
#overzicht-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Mobiel: 1 kolom */
    gap: 20px; /* Ruimte tussen de items */
    padding: 20px 0;
}

/* Tablet: 2 kolommen */
@media (min-width: 768px) {
    #overzicht-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 4 kolommen */
@media (min-width: 1024px) {
    #overzicht-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}



/* zoekbalk */
.offer-list-banner-img{
	width:100%;
	height:100%;
}
.offer-list-banner-row .content-block{
	padding:0px;
}
.offer-list-banner-row {
    display: flex;
    padding:150px 0px 120px 0px;
}
.search-houses{
	margin-top:-37px;
}
.rw-search-form {
    margin-bottom: 20px;
    background: var(--rw-background-box);
    border-radius: var(--rw-border-radius);
    position: relative;
    z-index: 30;
    display: flex;
    gap: 15px;
    font-size: var(--rw-font-size);
    color: var(--rw-body-color);
}
.rw-search-more-filters{
	    margin-top: 58px;
}
.new-house-items .news-item-details{
	padding:0px;
}

/* grote filters responsive */



/* Standaard (Desktop > 1024px) */
.rw-search-more-filters {
    margin-top: 58px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(100px, 150px));
    padding: 20px 15px;
    background: #efefef;
    border-bottom-right-radius: var(--rw-border-radius);
    border-bottom-left-radius: var(--rw-border-radius);
    border-top: 1px solid var(--rw-border-color);
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Onder 1024px: Meer marge toevoegen */
@media (max-width: 1024px) {
    .rw-search-more-filters {
        margin-top: 294px;
    }
}

/* Onder 940px: Naar 3 kolommen */
@media (max-width: 940px) {
    .rw-search-more-filters {
        grid-template-columns: repeat(3, 1fr)!important;
    }
	.offer-list-banner-row {
    display: flex;
    padding: 100px 0px 80px 0px;
}
}

/* Onder 500px: Naar 2 kolommen en knop volledige breedte */
@media (max-width: 760px) {
    .rw-search-more-filters {
        grid-template-columns: repeat(1, 1fr)!important;
			gap:8px;
    }
	.offer-list-banner-row {
    display: flex;
    padding: 70px 0px 60px 0px;
}
	.rw-search-field__label{
		font-size:15px;
	}
	.rw-search-field__checkbox label, .rw-search-field__radio label{
		font-size:15px;
	}

    /* De zoekknop container over de volle breedte */
    .rw-search-field--submit {
        grid-column: span 2!important; /* Neemt beide kolommen in beslag */
    }

    .rw-search-field__submit {
        width: 100%; /* Knop zelf vult de hele container */
    }
}







/* styling loop items */

.new-house-items .grid-house-item__image img{
	aspect-ratio:10/7;
	object-fit:cover;
}
.new-house-items .grid-house-item__title{
	font-size: 20px;
	margin-bottom:8px;
}
.new-house-items .grid-house-item_content{
	padding:20px;
}
.new-house-items .grid-house-item_content ul{
	margin-bottom:16px;
}
.new-house-items .grid-house-item_content ul li{
	font-size:13px;
	font-family: Montserrat, Arial, Helvetica, sans-serif;
	font-weight:600;
}
.new-house-items .clr-red{
	font-size:15px;
}
.new-house-items .zipcode-tekst{
	font-size:15px;
	margin-bottom:16px;
}
.new-house-items p{
	font-size:14px!important;
	line-height:1.5em;
	color:#121617!important;
}

/* pagination */

/* Container styling */
.rw-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 40px 0;
    font-family: 'Montserrat', Arial, sans-serif;
}

/* Algemene stijl voor alle knoppen en links */
.rw-pagination a,
.rw-pagination span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: #121617; /* Donkerblauw/zwart uit screenshot */
    background-color: #ffffff;
    /* Randjes iets donkerder gemaakt voor meer definitie */
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

/* Hover effect voor links */
.rw-pagination a:hover {
    background-color: #f0f0f0;
    border-color: #bcbcbc;
    color: #E3292B; /* Euverman Rood */
}

/* De actieve pagina (Current) */
.rw-pagination .rw-pagination__page-current {
    background-color: #E3292B; /* Het rood uit de screenshot */
    color: #ffffff;
    border-color: #E3292B; /* Rand moet hier ook rood zijn */
}

/* Vorige / Volgende knoppen */
.rw-pagination__page-prev,
.rw-pagination__page-next {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.8px;
    padding: 0 18px; /* Iets meer breedte voor de woorden */
}




/* balk woningaanbod*/

.rw-search-form {
    margin-bottom: 20px;
    background: #fff;
    border-radius: var(--rw-border-radius);
    position: relative;
    z-index: 30;
    display: flex;
	flex-wrap:wrap;
    gap: 15px;
    font-size: var(--rw-font-size);
    color: var(--rw-body-color);
}
.rw-search-field__submit.btn {
    background-color: #DE231F!important;
    border-color: #DE231F;
    color: var(--rw-button-color);
}


.rw-btn-more-filter, .rw-btn-more-filter:focus {
    display: inline-flex; /* Zorgt dat icoon en tekst netjes uitlijnen */
    align-items: center;
    gap: 8px; /* Ruimte tussen icoon en tekst */
    color: #DE231F;
    text-decoration: none;
    background-color: #fae0df;
    background-image: none;
    border-radius: var(--rw-button-border-radius);
    border: 1px solid #fae0df;
    padding: var(--rw-button-padding);
    transition: all 0.2s ease-in-out;
}

/* Het filter icoontje */
.rw-btn-more-filter::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #DE231F; /* Kleur van het icoon */
    /* Modern filter-icoon (trechter) via een mask */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.rw-btn-more-filter:hover {
    background-color: #f7cecc;
    border-color: #f2b0ad;
    color: #DE231F;
    box-shadow: 0 2px 4px rgba(222, 35, 31, 0.1);
    text-decoration: none;
}

/* Optioneel: draai het icoontje een klein beetje op hover voor extra effect */
.rw-btn-more-filter:hover::before {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.rw-search-more-filters {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(100px, 250px));
    padding: 20px 15px;
    background: #efefef;
    border-bottom-right-radius: var(--rw-border-radius);
    border-bottom-left-radius: var(--rw-border-radius);
    border-top: 1px solid var(--rw-border-color);
}
.rw-search-more-filters .rw-search-field::after{
	    background: linear-gradient(0deg, #efefef 0%, rgba(220, 234, 239, 0) 100%)!important;
}


/* rode button weg */
.rw-search-form-collapse-trigger .btn{
	display:none;
}

/* bekijk op kaart weg */
.rw-search-toolbar__type{
	display:none;
}

/* achtergrondkleur */

.post-type-archive-rw_makelaar_houses{
	background:#f3f2f0;
}
.news-list-row {
    padding-top: 0px;
    padding-bottom: 80px;
    margin-bottom: -70px;
}


/* zoekfilter labels */
.rw-search-filters-active {
    margin-top: 10px;
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
}

.rw-search-filters-active__btn {
    /* SVG Rood Kruisje direct in de CSS */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E3292B'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center right 10px;
    background-color: #efefef !important;
    border-radius: var(--rw-button-border-radius);
    border: 1px solid #efefef;
    padding: 6px 30px 6px 12px; /* Iets meer rechter padding voor het kruisje */
    color: var(--rw-buttons-filters-color);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
}

.rw-search-filters-active__btn:hover {
    border-color: #E3292B;
    background-color: #ffffff !important;
    color: #E3292B; /* Tekst kleurt mee op hover voor Euverman stijl */
}




/* Container moet relatief zijn */
.grid-house-item__image {
    position: relative;
    overflow: hidden;
}

/* Basis stijl voor alle status labels */
.grid-house-item__status {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 12px;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Specifieke kleur: Verkocht (Euverman Rood) */
.status--verkocht {
    background-color: #E3292B !important;
    border: 1px solid #E3292B;
}

/* Specifieke kleur: Verkocht onder voorbehoud (Oranje) */
.status--verkocht_onder_voorbehoud {
    background-color: #f39c12 !important;
    border: 1px solid #f39c12;
}

/* Mocht je later 'In Optie' toevoegen (Blauw) */
.status--in_optie {
    background-color: #3498db !important;
}


/* video */

.tab-content .content-row-bottom .graphic-content.overlay {
    min-height: 0px!important;
	max-width:100%!important;
}


.offer-detail-content-sec {
    position: relative;
    padding: 40px 0 40px;
    overflow: hidden;
}












/* kenmerken*/


/* --- Kenmerken Tabel Stijling --- */

/* Titelbalk Styling */
.section__title-bar h4 {
    color: #161617 !important; /* De gevraagde donkere kleur */
    font-size: 24px;           /* Iets groter */
    font-weight: 700;
}

/* Grid Container */
.house-properties-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; /* Meer ruimte tussen de kolommen */
}

/* Elk blok */
.prop-group {
    width: 100%;
    margin-bottom: 20px;
}

/* Desktop: 2 kolommen */
@media (min-width: 1224px) {
    .prop-group {
        width: calc(50% - 20px);
    }
}

/* De tussenkopjes (Algemeen, Energie, etc) - Rood behouden voor huisstijl accent?
   Of ook #161617? Ik heb ze rood gelaten voor contrast,
   maar je kunt de color hieronder aanpassen naar #161617 als je dat liever hebt. */
.prop-group-title {
    color: #E3292B;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    border-bottom: 2px solid #E3292B;
    display: inline-block;
    padding-bottom: 5px;
}

/* De tabel algemeen */
.prop-table-wrapper table,
.prop-table-wrapper ul {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16px; /* GROTERE TEKST */
    color: #161617;  /* GEVRAAGDE KLEUR */
}

/* Rij styling */
.prop-table-wrapper tr,
.prop-table-wrapper li {
    border-bottom: 1px solid #e0e0e0; /* Iets donkerder lijntje voor duidelijkheid */
    display: flex;
    justify-content: space-between;
    padding: 12px 15px; /* MEER RUIMTE (was 8px) */
    align-items: center;
}

/* Zebra streep effect */
.prop-table-wrapper tr:nth-child(odd),
.prop-table-wrapper li:nth-child(odd) {
    background-color: #f7f7f7; /* Iets zachter grijs */
}

/* Het label (links) - Dikgedrukt */
.prop-table-wrapper td:first-child,
.prop-table-wrapper li span:first-child {
    font-weight: 700; /* Dikker voor duidelijkheid */
    color: #161617;
    width: 45%;
}

/* De waarde (rechts) */
.prop-table-wrapper td:last-child,
.prop-table-wrapper li span:last-child {
    color: #161617;
    width: 55%;
    text-align: right;
    line-height: 1.4;
}

/* Mobiel */
@media (max-width: 480px) {
    .prop-table-wrapper td:first-child, .prop-table-wrapper li span:first-child,
    .prop-table-wrapper td:last-child, .prop-table-wrapper li span:last-child {
        width: 50%;
        font-size: 15px;
    }
}


#brochure img{
	margin-top:20px
}
#brochure .button.btn-grey{
    background-color: #E3292B!important;
    color: #fff!important
}
.tab-content .content-row-bottom .btn-grey i{
	color: #fff!important
}



/* --- Correctie voor Kenmerken Tabel --- */

/* 1. Labels styling (links) */
.rw-object-list-label,
.rw-property__label {
    font-weight: 700;
    color: #161617; /* Zelfde kleur als de rest */
    min-width: 160px; /* Zorgt dat labels even breed zijn */
    display: inline-block;
}

/* 2. Waardes styling (rechts) */
.rw-object-list-value,
.rw-property__value {
    text-align: right;
    color: #161617;
    flex: 1; /* Neemt de resterende ruimte in */
}

/* 3. Rij styling voor de lijstjes van de plugin */
.rw-object-features-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 15px;
    background-color: #fff; /* Wit */
}

/* Zebra streepjes (om en om grijs) */
.rw-object-features-list li:nth-child(odd) {
    background-color: #f7f7f7;
}

/* 4. Onze eigen 'Afmetingen' rij (DL/DT/DD) stylen zoals de UL/LI hierboven */
dl.custom-row-afmetingen {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none; /* Geen rand onder de laatste */
    padding: 12px 15px;
    margin: 0;
    background-color: #fff; /* Even tellen: als de lijst hierboven oneven eindigt, moet deze grijs (#f7f7f7) zijn */
}

/* Als je wilt dat Afmetingen ook meedoet in de zebra, moet je even tellen of de lijst erboven oneven is.
   Voor nu maken we hem wit, of grijs als dat beter past. */

dl.custom-row-afmetingen dt {
    font-weight: 700;
    color: #161617;
    min-width: 160px;
}

dl.custom-row-afmetingen dd {
    margin: 0;
    text-align: right;
    flex: 1;
    color: #161617;
}

/* Responsive Fix voor mobiel */
@media (max-width: 600px) {
    .rw-object-list-label,
    .rw-property__label,
    dl.custom-row-afmetingen dt {
        min-width: 120px; /* Iets minder breed op mobiel */
        font-size: 14px;
    }

    .rw-object-list-value,
    .rw-property__value,
    dl.custom-row-afmetingen dd {
        font-size: 14px;
    }
}




/* Zorg dat de afbeelding-container relative is zodat we kunnen positioneren */
.grid-house-item__image {
    position: relative;
    overflow: hidden; /* Zorgt dat de balk netjes binnen de afgeronde hoeken blijft */
}

/* De rode balk */
.open-huis-band {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 40px; /* Ongeveer de hoogte die je vroeg */
    background-color: #E3292B; /* De specifieke rode kleur */
    color: #ffffff;

    display: flex;
    flex-wrap: wrap; /* Past op mobiel onder elkaar als het moet */
    align-items: center;
    justify-content: center;
    gap: 8px; /* Ruimte tussen de onderdelen */

    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.2;
    z-index: 10;
    text-align: center;
}

/* Dikgedrukte titel */
.open-huis-band .oh-titel {
    font-weight: 700;
    text-transform: uppercase;
}

/* De datum en tijd iets lichter/normaal */
.open-huis-band .oh-datum,
.open-huis-band .oh-tijd {
    font-weight: 500;
}

/* Als er toevallig ook een status-label (Verkocht) is, moet die erboven */
.grid-house-item__status {
    z-index: 20;
}


/* ====================================================================
 * 4. "Bekijk ook deze woningen" — sectie onderaan de single-woningpagina.
 * ==================================================================== */
.related-houses {
    padding: 30px 0 70px;
}
.related-houses .section-title {
    margin-bottom: 28px;
}
.related-houses .section-title h2 {
    font-size: 28px;
    font-weight: 700;
    color: #161617;
}
.related-houses .section-title .clr-red {
    color: #E3292B;
}
.related-houses .grid-houses {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}
@media (min-width: 768px) {
    .related-houses .grid-houses {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .related-houses .grid-houses {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ====================================================================
 * 5. Toggle "Toon alleen open huizen" boven de resultaten (/aanbod).
 * ==================================================================== */
.eu-openhuis-filter {
    display: flex;
    justify-content: flex-end;
    margin: 14px 0 0;
}
.eu-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #161617;
    -webkit-user-select: none;
    user-select: none;
}
.eu-switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.eu-switch__slider {
    position: relative;
    flex: none;
    width: 46px;
    height: 26px;
    background: #cfccc8;
    border-radius: 999px;
    transition: background 0.2s ease;
}
.eu-switch__slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}
.eu-switch__input:checked + .eu-switch__slider {
    background: #E3292B;
}
.eu-switch__input:checked + .eu-switch__slider::before {
    transform: translateX(20px);
}
.eu-switch__input:focus-visible + .eu-switch__slider {
    box-shadow: 0 0 0 3px rgba(227, 41, 43, 0.3);
}