.wsprow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding-bottom:10px;
  border: solid 1px #f2f4ff;
}
.wspcol{
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

/* DESKTOP: verticaal centreren */
@media (min-width: 769px) {
  .wsprow {
    align-items: center !important;
  }

  .wspbox1 {
    display: flex;
    align-items: center;
  }
}


.wspbox1, .wspbox2 {
  border-radius: 5px;
  padding: 20px;
  min-height:190px;
}
.wspbox2{
  flex-grow: 3;
}
.wspplaats{
  font-style:italic;
}

/* MOBIEL: logo boven tekst + kleiner */
@media (max-width: 768px) {

  .wspcard-link > article.wsprow {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
  }

  .wspcard-link > article.wsprow .wspcol {
    width: 100% !important;
  }

  /* LOGO-CONTAINER: meer top-padding, minder bottom */
  .wspcard-link > article.wsprow .wspbox1 {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;

    padding-top: 30px !important;     /* GROTER boven */
    padding-bottom: 0px !important;   /* NOG kleiner onder */

    padding-left: 20px !important;
    padding-right: 10px !important;

    min-height: auto !important;
    margin-bottom: 0.3rem !important; /* iets compacter */
  }

  .wspcard-link > article.wsprow .wspbox2 {
    flex: 0 0 auto !important;
    min-height: auto !important;
  }

  .wspcard-link > article.wsprow .wspbox1 img {
    max-width: 120px !important;
    height: auto;
  }
}

/* Filteropties sidebar */

.wsp-filterbox	form ul{
	margin-left:2px;
}
.wsp-filterbox	form ul li {
	list-style:none;
}

/* Laad meer knop */

#morebtn{
  margin-top:20px;
}
/* Teller laadmeer verbergen */
#bkbbcount{
visibility:hidden;
}


.spinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
  
  & .path {
    stroke: hsla(0, 0%, 0%, 0.31); 
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }
  
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

.bedrijven-filters_input {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  height: 2em;
  padding: 0;
  font-size: inherit;
  background: none!important;
  align-items: center;
  justify-content: flex-end;
}

.bedrijven-filters_input i {
  margin-top: -3px;
}



/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
 .owl-aangepast .owl-dots,.owl-aangepast .owl-nav {
  text-align: center;
  -webkit-tap-highlight-color: transparent
}

.owl-aangepast .owl-nav {
  margin-top: 10px
}

.owl-aangepast .owl-nav [class*=owl-] {
  color: #FFF;
  font-size: 14px;
  margin: 5px;
  padding: 4px 7px;
  background: #D6D6D6;
  display: inline-block;
  cursor: pointer;
  border-radius: 3px
}

.owl-aangepast .owl-nav [class*=owl-]:hover {
  background: #869791;
  color: #FFF;
  text-decoration: none
}

.owl-aangepast .owl-nav .disabled {
  opacity: .5;
  cursor: default
}

.owl-aangepast .owl-nav.disabled+.owl-dots {
  margin-top: 10px
}

.owl-aangepast .owl-dots .owl-dot {
  display: inline-block;
  zoom:1}

.owl-aangepast .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 5px 7px;
  background: #D6D6D6;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity .2s ease;
  border-radius: 30px
}

.owl-aangepast .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span {
  background: #869791
}

.owl-carousel.owl-aangepast .owl-nav button.owl-next, 
.owl-carousel.owl-aangepast .owl-nav button.owl-prev, 
.owl-carousel.owl-aangepast button.owl-dot {
  color: inherit;
  background: 0px 0px;
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
  font: inherit;
  padding: 0px !important;
}

.owl-carousel.owl-aangepast .owl-nav button:before,
.owl-carousel.owl-aangepast .owl-prev:after,
.owl-carousel.owl-aangepast .owl-next:after {
  content: none;
}

.owl-carousel.owl-aangepast .owl-nav button {
  position: relative;
}

.owl-carousel.owl-aangepast .owl-stage-outer {
  margin-bottom: 30px;
}

.owl-carousel.owl-aangepast .owl-dots {
  padding-top: 0;
}

.owl-carousel.owl-aangepast .owl-item {
  padding: 20px;
}

.owl-carousel.owl-aangepast .owl-item .item {
  min-height: 525px;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px;
  border-radius: 10px;
  
  -webkit-box-shadow: 0 0.03rem 0.06rem rgba(0, 0, 0, 0.1), 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.03rem 0.06rem rgba(0, 0, 0, 0.1), 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1);
  transition: all 300ms;
}

.owl-carousel.owl-aangepast .owl-item .item:hover {
  -webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1), 0 0.33rem 1rem rgba(0, 0, 0, 0.15);
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1), 0 0.33rem 1rem rgba(0, 0, 0, 0.15);
}

.owl-carousel.owl-aangepast .owl-item .item h4 {
  text-align: left;
  font-weight: bold;
}

.owl-carousel.owl-aangepast .owl-item .item .text-left {text-align: left;}

.owl-carousel.owl-aangepast .owl-item .item .marker {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
  margin-top: 10px;
  margin-bottom: 10px;
}

.owl-carousel.owl-aangepast .owl-item .item .w-btn {margin-top:auto;}

.img-container {
  height: 80px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.img-container img {
  height: 100%;
  object-fit: contain; 
}

/*=== verberg owl dots in de carousel ===*/
.owl-aangepast .owl-dots { display: none !important; }
.owl-aangepast .owl-nav button:focus-visible { outline:2px solid #000; outline-offset:2px; }

/*=== KOLOMMEN OMDRAAIEN VISUEEL ===*/
/* zet de row in flex en gebruik order om visueel te wisselen */
.bkbb-layout {
  display: flex;
  gap: 2rem;
}

/* neutraliseer WPBakery floats/breedtes */
.bkbb-layout > .wpb_column { float: none !important; width: auto !important; }

/* resultaten links, filters rechts */
.bkbb-results { order: 1; flex: 2 1 0; min-width: 0; }
.bkbb-filters { order: 2; flex: 1 1 0; }

/* mobiel stapelen; volgorde naar wens */
@media (max-width: 768px){
  .bkbb-layout { flex-direction: column; }
  .bkbb-results, .bkbb-filters { order: initial; }
}

/**
 * FOCUS WERKGEVERSKAART*/
/* Volledige card klikbaar + focus-stijl */
.wspcard-link { display:block; text-decoration:none; color:inherit; }
.wspcard-link .wsprow { transition: box-shadow .2s, transform .2s; }
.wspcard-link:hover .wsprow { box-shadow:0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.wspcard-link:focus-visible .wsprow { outline:3px solid #4B08A1; outline-offset:4px; border-radius:10px; }

/* Hyphenation fix op titels (Reflow/WCAG) */
.wspcard-link h3 { white-space: normal !important; overflow-wrap:anywhere; word-break:normal; hyphens:auto; }

/* Separate directory cards without changing carousel layout. */
#bedrijven > .wspcard-link + .wspcard-link { margin-block-start: 12px; }