@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css";
@import "../1inc/animaties.css";

@media (min-width: 768px) {
	.zkbkAccInfoCol	{max-width:320px;width:100%;}
}
a.zkbkOverview:hover{text-decoration:none;}
.zkbkAccInfo.zkbkOverview, .zkbkAccInfoDetail	{overflow:hidden;}
a.zkbkOverview:hover .zkbkAccInfo.zkbkOverview	{border:1px solid var(--groen);}
.zkbkAccInfo.zkbkPreview	{width:350px;height:500px;padding:5px;margin:2px;z-index:2;background:var(--achtergrondkleur)}

.zkbkAccFotoBlok		{width: 100%;aspect-ratio: 320 / 240;overflow: hidden;position: relative;}
.zkbkAccFoto			{width: 100%;height: 100%;object-fit: cover;display: block;}
/*.zkbkAccFoto.zkbkOverview	{width:215px;height:162px;border-radius:2px;}*/
/*.zkbkAccFoto.zkbkPreview	{width:320px;height:240px;}*/

.zkbkAccBalkBlok		{align-items:stretch;font-size:1rem;height:fit-content}
.zkbkAccBalkBlok > div > div , .zkbkAccBalkBlok > div > button{padding: 0.3rem 0.5rem;}
/*.zkbkAccBalkTab			{width:100%;maXrgin-top:2px;border:2px solid var(--achtergrondkleur);}*/
.zkbkAccBalkPrijs		{backXground:var(--achtergrondkleur);font-size:smaller;}
.zkbkAccBalkPrijs > *	{font-weight: bold;}
.zkbkAccBalkLmFlag		{font-size:.7rem;align-content:center;text-align:center;padding:0.5rem;border-radius:0.375rem;background-color:var(--highlightkleur);font-weight:bold;white-space: nowrap;}
.zkbkAccBalkLmFlag i{font-size:1rem;}
/*.zkbkAccBalkXfFlag		{width:34px;font-size:17px;padding:2px;}*/
/*.zkbkAccBalkXfImg		{}*/

/*.zkbkAccBalkVvImg		{height:13px;}*/
.zkbkAccTextBlok		{width:auto;}
.zkbkOverview, .zkbkAccInfoDetail 			{color: var(--tekstkleur);text-decoration: none;}
.zkbkAccTextNaam		{font-weight: bold;margin:0;}
.zkbkAccTextLocatie		{font-weight:normal;font-size:.9rem;    padding: 0 1rem 0 0;}
.zkbkAccTextLocatie span {white-space: nowrap;}
.zkbkAccGebied			{font-size:.75rem;    background-color: var(--uitlichtkleur);width: fit-content;padding: .25rem;border-radius: .5rem;margin-top: .25rem;}
.zkbkAccTextAanbieding	{font-size:.75rem;}
/*.zkbkAccTextLmText		{}*/

.zkbkAccAvailBlok		{width:100%;}
.zkbkAccAvailBlok.zkbkOverview	{display:none;}
.zkbkAccAvailBlok.zkbkPreview	{display:block;}


.zkbkAccInfoDetail{width:100%;}
.zkbkAccDetailcarousel{height:fit-content}
.zkbkAccDetailFoto{max-height:100%;max-width:100%;}
.zkbkDetailLeft{width:100%;}

.zkbkDetailLink{color:var(--tekstkleur);text-decoration:none;}
.zkbkAccDetailSymbolrow{align-items:stretch;font-size:1.6rem;height:fit-content;}
.zkbkAccDetailSymbolrow div, .zkbkAccDetailSymbolrow button{padding:.2rem .5rem;align-content:center;font-size:1.2rem;}
.zkbkAccBalkKaartFlag		{background:var(--achtergrondkleur);border: 1px solid var(--uitlichtkleur);text-align:center;padding:0.5rem;border-radius:0.375rem;}
.zkbkAccBalkRevScore	{white-space:nowrap;font-size:.8rem !important;background-color:var(--achtergrondkleur);border:1px solid var(--uitlichtkleur);padding:0.5rem;border-radius:0.375rem;align-content:center;}
.revSter				{color:var(--highlightkleur);}
.zkbkAccBalkKorting{background:var(--highlightkleur);border-radius: 1px solid var(--highlightkleur);text-align:center;padding:0.5rem;border-radius:0.375rem;}
.zkbkAccBalkHond, .zkbkAccBalkHondNee{background-color:var(--uitlichtkleur);color:var(--tekstkleur);padding:0.5rem;border-radius:0.375rem;}
.zkbkAccBalkHond span, .zkbkAccBalkHondNee span{position:relative;display:inline-block;line-height:1;}
.zkbkAccBalkHondNee span::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;
  background: linear-gradient(to bottom right,transparent 48%,black 49%,black 51%,transparent 52%
  );
}
.zkbkDetailRechtsboven{}
.zkbkDetailVrij{background-color: var(--lichtgroen) !important;border-color: var(--lichtgroen) !important;}
.zkbkDetailVrij:hover{box-shadow:0 0rem 1rem rgba(0, 48, 31, 0.15);border-color:#00301f29 !important;}
.zkbkDetailVrij > div:first-child {flex:1;}
.zkbkDetailVrijtype{width:fit-content;font-weight:bold;padding:.5rem;background-color: var(--uitlichtkleur);}
.zkbkDetailVrijKorting{background-color: var(--highlightkleur)}
.zkbkDetailVrijdata{}
.zkbkDetailVrijprijs > *{font-weight:bold;}
.zkbkDetailVrijprijsExtra{font-size:.8rem;}
.zkbkDetailVrijPijltje{font-size:1.2rem;}
.zkbkDetailVrijMeer{font-size:.9rem;}
.zkbkIntroText{}
.zkbkIntroText p{margin-bottom:.2rem;}
.zkbkDetailVrijSubnaam{font-weight:bold;}
@media (max-width: 767px) {
  .zkbkAccInfoDetail {flex-direction: column !important;
  }
  .zkbkDetailLeft {padding: 0 !important;max-width: 100% !important;
  }
  .zkbkDetailRight {padding: 1rem !important;
  }
}
.zkbkOverviewDetails{position: absolute;right:.5rem;bottom:.5rem;opacity: .75;}
.zkbkAccInfo .zkbkOverviewDetails {
      opacity: 0;
      transition: opacity 0.3s ease;
  }
/* Alleen voor apparaten die hover ondersteunen */
@media (hover: hover) and (pointer: fine) {
  .zkbkAccInfo:hover .zkbkOverviewDetails {
      opacity: .75;
  }
}
@media (max-width: 768px) {
  .zkbkOverviewDetails{display:none;}
}
.overviewDetailOverlay {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background-color: var(--achtergrondkleur);
    opacity: 0.7; /* semi transparant */
    z-index: 1000;
}

.overviewDetailPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001; /* boven de overlay */
    padding: 1.5rem;
    max-height: 90vh;
    overflow: auto;
    min-width:80vw;
}
@media (max-width: 768px) {
  .overviewDetailPopup {width: 100vw;}
}
/* scroll hint */
.scrollHint {
  position: sticky;
  bottom: -1.5rem;            /* binnen padding */
  display: flex;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* zichtbaar */
.scrollHint.is-visible {
  opacity: 1;
}

/* subtiele animatie */
.scrollHint i {
  font-size: 1.5rem;
  animation: scrollHintBounce 1.8s infinite ease-in-out;
}

@keyframes scrollHintBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
/* einde css scrollHint */
#multiAccoFooterTitel, #multiAccoFooter{
	
}
.multiAccRow-wrapper, #msBottomMenu {
  overflow: hidden;          /* niets mag erbuiten */
  position: relative;
}
.vpmultiAccRow-wrapper{overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}
.vpmultiAccRow {
  display: flex;         /* horizontaal naast elkaar */
  gap: 1rem;             /* ruimte tussen items */
}
.multiAccRow, .knoppenScrollbar{
  display: flex;
  transition: transform 0.5s ease;
  align-items:stretch;
}
.acc-item {
  /*flex-shrink: 0;*/
  margin-right: 1rem;
}
@media (min-width: 768px) {
  .acc-item {
    flex: 0 0 320px;
  }
}

@media (max-width: 767px) {
  .acc-item {
    flex: 0 0 85%;    /* iets smaller op mobiel, zodat je kunt scrollen */
  }
}
@media (min-width: 576px) {
    .zkbkOverview{max-width:300px;}

}
@media (min-width: 768px) {
  #zkbkCritContainer {
    position: static;  /* offcanvas positie resetten */
    transform: none;
  }
  .zkbkAccDetailcarousel{max-width:320px;}
  .zkbkDetailLeft{max-width:320px;}
}
.carousel-btn, .scroll-button {position: absolute;top: 50%;transform: translateY(-50%);z-index: 10;border-radius: 50%;width: 40px;height: 40px;}
.carousel-btn.left, .scroll-left { left: 10px; }
.carousel-btn.right, .scroll-right { right: 10px; }
.zkbkAccDetailFoto.img-portrait{object-fit:contain;}
.carousel-item{aspect-ratio:4/3;}




/*kaart*/
  .leaflet-popup-content{max-width:200px;}
  .leaflet-popup-content a {color: var(--tekstkleur);font-size: 1rem; font-weight:bold}
  .leaflet-popup-content a:hover {color: var(--groen);text-decoration: none; } 
  .leaflet-popup-content p {font-size: 0.9rem; }  
  .popup-distance {font-size: 0.8rem !important;} 
  .leaflet-popup-scrolled {border: none !important;}

  /* Chrome, Edge, Safari */
  .leaflet-popup-content.leaflet-popup-scrolled::-webkit-scrollbar-thumb {background-color: var(--groen);}
  .leaflet-popup-content.leaflet-popup-scrolled::-webkit-scrollbar-track {background-color: var(--achtergrondkleur);}
  /* Firefox */
  .leaflet-popup-content.leaflet-popup-scrolled {scrollbar-color: var(--groen) var(--achtergrondkleur);}