/* ==========================================================================
   VANDENBOORN AUTOMOTIVE - correcties. Laadt als laatste stylesheet.
   1. Geen bruin hover-effect op het hamburgermenu, nergens.
   2. Login-icoon wit.
   3. Geen bruine letters, nergens.
   4. Uitlijning registratieformulier.
   5. Aanbodpagina op #F4F1EA.
   6. Letters in de advertenties zwart #000000.
   ========================================================================== */

/* ==========================================================================
   1. HAMBURGER - geen achtergrond, geen bruin, in geen enkele staat
   ========================================================================== */
.cl-hamburger,
.cl-hamburger:link,
.cl-hamburger:visited,
.cl-hamburger:hover,
.cl-hamburger:focus,
.cl-hamburger:focus-within,
.cl-hamburger:focus-visible,
.cl-hamburger:active,
.cl-hamburger.is-active,
.cl-hamburger.is-active:hover{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  color:#FFFFFF !important;
  filter:none !important;
  opacity:1 !important;
}
.cl-hamburger:focus-visible{
  outline:2px solid #FFFFFF !important;
  outline-offset:4px;
}
.cl-hamburger__box{ background:transparent !important; }
.cl-hamburger__inner,
.cl-hamburger__inner::before,
.cl-hamburger__inner::after,
.cl-hamburger:hover .cl-hamburger__inner,
.cl-hamburger:hover .cl-hamburger__inner::before,
.cl-hamburger:hover .cl-hamburger__inner::after{
  background-color:#FFFFFF !important;
}

/* ==========================================================================
   2. LOGIN - tekst en poppetje wit
   ========================================================================== */
.cl-user,
.cl-user:link,
.cl-user:visited,
.cl-user:hover,
.cl-user:focus,
.cl-user:focus-visible,
.cl-user:active,
.cl-user span{
  color:#FFFFFF !important;
}
.cl-user svg,
.cl-user svg *,
.cl-user:hover svg,
.cl-user:hover svg *{
  fill:#FFFFFF !important;
  color:#FFFFFF !important;
  stroke:none !important;
}

/* ==========================================================================
   3. GEEN BRUINE LETTERS
   Op donkere ondergrond wit, op lichte ondergrond zwart.
   ========================================================================== */
.cl-menu .cl-container,
.cl-menu__nav a,
.cl-menu__nav a:hover,
.cl-menu__nav a:focus,
.cl-menu__nav a:focus-visible,
.cl-menu__nav li.is-current > a,
.cl-menu__nav li.current-menu-item > a,
.cl-menu__info a,
.cl-menu__info a:hover,
.cl-menu__info a:focus-visible,
.cl-menu h4,
.cl-footer a:hover,
.cl-footer a:active,
.cl-footer .cl-social a:hover,
.cl-sub-footer .cl-row a:hover,
.cl-cars-slider__info > a:hover .cl-cars-slider__more span,
.cl-quote h1 strong,
.cl-large-info h1 strong{
  color:#FFFFFF !important;
}

/* Lichte vlakken: zwart in plaats van wit. */
.cl-small-info,
.cl-small-info a,
.cl-small-info a:hover,
.cl-small-info strong,
.cl-small-info h1 strong,
.cl-small-info h2 strong{
  color:#000000 !important;
}

/* Onderstreping van de actieve menuregel blijft, maar niet in bruin. */
.cl-menu__nav li.is-current > a,
.cl-menu__nav li.current-menu-item > a{
  border-bottom-color:#FFFFFF !important;
}

/* ==========================================================================
   4. REGISTRATIEFORMULIER - uitlijning
   .vdb-member-field is een grid; bij gelijke rijhoogte rekte het veld zonder
   hint zijn invoerveld uit en schoof het label omlaag. Daardoor stonden
   KvK-nummer en BTW-nummer niet op dezelfde lijn.
   ========================================================================== */
.vdb-member-row{
  align-items:start !important;
}
.vdb-member-field{
  align-content:start !important;
  grid-auto-rows:min-content;
}
.vdb-member-field__label{
  min-height:21px;
  display:flex;
  align-items:center;
  line-height:1.35;
}
.vdb-member-field input,
.vdb-member-field select{
  height:52px !important;
  min-height:52px !important;
  box-sizing:border-box;
}
.vdb-member-field textarea{ box-sizing:border-box; }
.vdb-member-hint{ margin:0; }

/* De verplicht-ster niet in bruin. */
.vdb-member-field__label i,
.vdb-member-check i{ color:#000000 !important; }
.vdb-member-label{ color:#000000 !important; }

/* ==========================================================================
   5 + 6. AANBODPAGINA - grond #F4F1EA, letters in de advertenties zwart
   ========================================================================== */
body.page-id-3956,
body.page-id-3956 .vdb-scope-el,
body.page-id-3956 .vdb-bar,
body.page-id-3956 .vdb-bar__inner,
body.page-id-3956 .vdb-stage,
body.page-id-3956 .vdb-stage__inner,
body.page-id-3956 .vdb-stage__intro,
body.page-id-3956 .vdb-results,
body.page-id-3956 .jet-listing-grid,
body.page-id-3956 .jet-listing-grid__items{
  background:#F4F1EA !important;
  background-color:#F4F1EA !important;
}

body.page-id-3956 .vdb-stage__h1,
body.page-id-3956 .vdb-stage__lead,
body.page-id-3956 .vdb-stage__lead a,
body.page-id-3956 .vdb-meta,
body.page-id-3956 .vdb-meta__count,
body.page-id-3956 .vdb-meta__count b,
body.page-id-3956 .vdb-label,
body.page-id-3956 .jet-active-filter,
body.page-id-3956 .jet-active-filter__remove,
body.page-id-3956 .jet-filters-pagination__item{
  color:#000000 !important;
}

body.page-id-3956 .vdb-bar{ border-bottom:1px solid #DED8CB !important; }

/* Knoppen in de balk: zwarte letters op de creme grond. */
body.page-id-3956 .vdb-filters-toggle,
body.page-id-3956 .vdb-btn--ghost,
body.page-id-3956 .vdb-view button,
body.page-id-3956 .vdb-bar select,
body.page-id-3956 .vdb-bar input{
  color:#000000 !important;
  background:transparent !important;
  border-color:#000000 !important;
}
body.page-id-3956 .vdb-view button[aria-pressed="true"],
body.page-id-3956 .vdb-view button.is-active{
  background:#000000 !important;
  border-color:#000000 !important;
  color:#FFFFFF !important;
}
body.page-id-3956 .vdb-view button svg{ fill:currentColor !important; }
body.page-id-3956 .vdb-bar select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  background-size:20px !important;
}
body.page-id-3956 .vdb-bar ::placeholder{ color:#4A463E !important; opacity:1; }

/* ---------- De advertentie zelf ---------- */
body.page-id-3956 .vdb-vcard{
  background:#FFFFFF !important;
  border:1px solid #DED8CB !important;
}
body.page-id-3956 .vdb-vcard:hover{ border-color:#000000 !important; }

body.page-id-3956 .vdb-vcard,
body.page-id-3956 .vdb-vcard *,
body.page-id-3956 .vdb-vcard__title,
body.page-id-3956 .vdb-vcard__trim,
body.page-id-3956 .vdb-vcard__meta,
body.page-id-3956 .vdb-vcard__meta li,
body.page-id-3956 .vdb-vcard__meta span,
body.page-id-3956 .vdb-vcard__foot,
body.page-id-3956 .vdb-vcard__price,
body.page-id-3956 .vdb-vcard__price .vdb-price-login,
body.page-id-3956 .vdb-vcard__more,
body.page-id-3956 .vdb-vcard__more a,
body.page-id-3956 .vdb-vcard__more a:hover{
  color:#000000 !important;
}
body.page-id-3956 .vdb-vcard__meta svg,
body.page-id-3956 .vdb-vcard__foot svg{ fill:#000000 !important; }
body.page-id-3956 .vdb-vcard__meta{ border-top-color:#DED8CB !important; }
body.page-id-3956 .vdb-vcard__price .vdb-price-login{ border-bottom-color:#000000 !important; }
body.page-id-3956 .vdb-vcard__more a{ border-bottom-color:#000000 !important; }

/* Status op de foto blijft leesbaar. */
body.page-id-3956 .vdb-vcard__status{ color:#FFFFFF !important; }
body.page-id-3956 .vdb-vcard__status.vdb-status--beschikbaar{ background:#000000 !important; }
body.page-id-3956 .vdb-vcard__status.vdb-status--verkocht{ background:#6B6259 !important; }

/* De filterlade blijft donker; daar blijven de letters wit. */
body.page-id-3956 .vdb-drawer,
body.page-id-3956 .vdb-drawer .vdb-drawer__group{ background:#0A0C0B !important; }
body.page-id-3956 .vdb-drawer,
body.page-id-3956 .vdb-drawer *,
body.page-id-3956 .vdb-drawer h3,
body.page-id-3956 .vdb-drawer .vdb-label,
body.page-id-3956 .vdb-drawer .vdb-drawer__group-title{
  color:#FFFFFF !important;
}
body.page-id-3956 .vdb-drawer__close:hover{ background:#262626 !important; }
body.page-id-3956 .vdb-drawer svg{ fill:#FFFFFF !important; }

/* ==========================================================================
   7. Resterende bruine letters elders op de site
   ========================================================================== */
.vdb-field__error{ color:#000000 !important; }
.vdb-car-price__note a{ color:#000000 !important; }

/* ==========================================================================
   8. AANBODPAGINA - ALLE LETTERS ZWART
   aanbod-dark.css zet color:#fff!important op .vdb-stage__h1 .elementor-heading-title
   en op meer binnenliggende elementen. Die selectors zijn specifieker dan een
   regel op de wrapper, dus hier staat een blanket-regel over de hele
   aanbodsectie. Daarna volgen de uitzonderingen die wit moeten blijven; die
   hebben een hogere specificiteit en staan later, dus zij winnen.
   De footer en de header vallen buiten .vdb-scope-el en blijven ongemoeid.
   ========================================================================== */
body.page-id-3956 .vdb-scope-el,
body.page-id-3956 .vdb-scope-el *,
body.page-id-3956 .vdb-scope-el *::before,
body.page-id-3956 .vdb-scope-el *::after{
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}
body.page-id-3956 .vdb-scope-el svg,
body.page-id-3956 .vdb-scope-el svg *{
  fill:#000000 !important;
}

/* ---------- Uitzondering 1: de filterlade blijft zwart met witte letters ---------- */
body.page-id-3956 .vdb-scope-el .vdb-drawer,
body.page-id-3956 .vdb-scope-el .vdb-drawer *,
body.page-id-3956 .vdb-scope-el .vdb-drawer *::before,
body.page-id-3956 .vdb-scope-el .vdb-drawer *::after{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
body.page-id-3956 .vdb-scope-el .vdb-drawer svg,
body.page-id-3956 .vdb-scope-el .vdb-drawer svg *{
  fill:#FFFFFF !important;
}

/* ---------- Uitzondering 2: statuslint op de foto ---------- */
body.page-id-3956 .vdb-scope-el .vdb-vcard__status,
body.page-id-3956 .vdb-scope-el .vdb-vcard__status *{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

/* ---------- Uitzondering 3: de ingedrukte weergaveknop ---------- */
body.page-id-3956 .vdb-scope-el .vdb-view button[aria-pressed="true"],
body.page-id-3956 .vdb-scope-el .vdb-view button[aria-pressed="true"] *,
body.page-id-3956 .vdb-scope-el .vdb-view button.is-active,
body.page-id-3956 .vdb-scope-el .vdb-view button.is-active *{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
body.page-id-3956 .vdb-scope-el .vdb-view button[aria-pressed="true"] svg,
body.page-id-3956 .vdb-scope-el .vdb-view button[aria-pressed="true"] svg *,
body.page-id-3956 .vdb-scope-el .vdb-view button.is-active svg,
body.page-id-3956 .vdb-scope-el .vdb-view button.is-active svg *{
  fill:#FFFFFF !important;
}

/* ---------- Uitzondering 4: knoppen met zwarte vulling ---------- */
body.page-id-3956 .vdb-scope-el .vdb-btn--primary,
body.page-id-3956 .vdb-scope-el .vdb-btn--primary *{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

/* ==========================================================================
   9. HEADER - ALLE LETTERS WIT, OP ELKE PAGINA
   De header staat op zwart. Paginastijlen (aanbod-dark.css, contact.css,
   over-ons.css, member.css, diensten.css) zetten een eigen tekstkleur op body
   en op binnenliggende elementen; die sijpelde door in de bovenbalk en in de
   contactknop. Hieronder een blanket-regel over de hele header, met daarna de
   enige uitzondering: de Aanbod-knop, die een lichte vulling heeft.
   ========================================================================== */
.cl-header,
.cl-header *,
.cl-header *::before,
.cl-header *::after,
.cl-menu,
.cl-menu *,
.cl-menu *::before,
.cl-menu *::after,
.cl-contact-panel,
.cl-contact-panel *,
a.cl-contact-mobile,
a.cl-contact-mobile *{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
.cl-header svg,
.cl-header svg *,
.cl-menu svg,
.cl-menu svg *,
.cl-contact-panel svg,
.cl-contact-panel svg *{
  fill:#FFFFFF !important;
}
.cl-header ::placeholder,
.cl-contact-panel ::placeholder{
  color:#B9B2A6 !important;
  -webkit-text-fill-color:#B9B2A6 !important;
  opacity:1;
}

/* ---------- Enige uitzondering: de Aanbod-knop (creme vulling) ---------- */
.cl-header .cl-btn-tertiary,
.cl-header .cl-btn-tertiary *{
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}
/* Hover zonder bruin: zwarte vulling, witte letters. */
.cl-header .cl-btn-tertiary:hover,
.cl-header .cl-btn-tertiary:focus-visible,
.cl-header .cl-btn-tertiary:hover *,
.cl-header .cl-btn-tertiary:focus-visible *{
  background:#000000 !important;
  border-color:#FFFFFF !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

/* ==========================================================================
   10. HEADER - SLUITEND RASTER
   De bovenbalk en de hoofdbalk gebruikten een flex-raster waarin elke kolom
   zijn eigen opvulling meenam. Daardoor liepen de rechterranden van beide
   regels niet gelijk en stond het logo niet exact in het midden.
   Hieronder staan beide regels als CSS-grid met dezelfde container, dezelfde
   zijopvulling en een middenkolom op auto. Het logo zit dan altijd precies
   in het midden, ongeacht hoe breed de knoppen links en rechts zijn, en de
   rechterranden van beide regels vallen exact samen.
   ========================================================================== */
.cl-header .cl-container{
  width:100% !important;
  max-width:1320px !important;
  margin-inline:auto !important;
  padding-inline:24px !important;
  box-sizing:border-box !important;
}

.cl-sub-header .cl-row,
.cl-main-header .cl-row{
  display:grid !important;
  align-items:center !important;
  margin:0 !important;
  width:100% !important;
  column-gap:16px;
}
.cl-sub-header .cl-row > *,
.cl-main-header .cl-row > *{
  padding:0 !important;
  margin:0 !important;
  min-width:0 !important;
  max-width:none !important;
  width:auto !important;
  flex:none !important;
}

/* ---------- Bovenbalk: tekst links, knoppen rechts ---------- */
.cl-sub-header .cl-row{ grid-template-columns:minmax(0,1fr) auto !important; }
.cl-sub-header__tag{ justify-self:start !important; }
.cl-sub-header__actions{
  justify-self:end !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.cl-sub-header__actions .cl-btn + .cl-btn,
.cl-sub-header__actions nav + nav{ margin-left:0 !important; }

/* ---------- Hoofdbalk: knop links, logo midden, account rechts ---------- */
.cl-main-header .cl-row{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important; }
.cl-main-header .cl-col--left{ justify-self:start !important; }
.cl-main-header .cl-col--logo{ justify-self:center !important; }
.cl-main-header .cl-col--right{
  justify-self:end !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
}

/* De hamburger droeg een eigen linkeropvulling die de rechterrand verschoof. */
.cl-hamburger{
  padding:0 !important;
  margin:0 !important;
  width:1.75rem !important;
  height:1.75rem !important;
  flex:none !important;
}
.cl-hamburger__box{ width:1.75rem !important; height:1.75rem !important; }
.cl-user{ flex:none !important; }
.cl-user svg{ margin-left:.5rem !important; }

/* ---------- Breekpunten, zoals in de bron ---------- */
@media (max-width:991.98px){
  .cl-sub-header .cl-row{ grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width:575.98px){
  .cl-main-header .cl-row{ grid-template-columns:auto minmax(0,1fr) !important; }
  .cl-main-header .cl-col--left{ display:none !important; }
  .cl-main-header .cl-col--logo{ justify-self:start !important; }
  .cl-main-header .cl-col--right{ justify-self:end !important; gap:12px !important; }
  .cl-header .cl-container{ padding-inline:16px !important; }
  .cl-user svg{ margin-left:0 !important; }
}