/**
 * Container Slider Styles - Reko Raalte
 * Responsive slides-per-view with arrow navigation.
 * Slide widths are set dynamically by JS via inline flex/max-width.
 */

/* Main wrapper with arrows on the sides */
.reko-slider-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 27px 0;
}

/* Viewport clips overflow */
.reko-slider-viewport {
  overflow: hidden;
  width: 80%;
}

/* Track holds all slides in a row */
.reko-slider-track {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.35s ease;
  will-change: transform;
}

/*
 * Each slide's width is controlled by JS:
 *   flex: 0 0 X%  &  max-width: X%
 * where X = 100 / slidesPerView.
 *
 * We only set shared layout here — NO fixed min/max-width.
 */
.reko-slide {
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0;
}

/* Override Divi's hardcoded column widths so flex-basis takes effect */
.reko-slider-track .reko-slide.et_pb_column {
  width: auto !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Force all container images to equal aspect ratio */
.reko-slide .et_pb_image {
  aspect-ratio: 5 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reko-slide .et_pb_image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Center the "Zand bestellen" card vertically and horizontally */
.reko-slide .dsm_card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  text-align: center;
}

.reko-slide .dsm_card_wrapper {
  margin: 0 auto;
}

/* Arrow buttons */
.reko-arrow {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.reko-arrow img {
  width: 24px;
  height: 24px;
  display: block;
}

.reko-arrow:active {
  opacity: 0.6;
}

/* Hide original Divi row flex when slider is active */
.SliderContainers.reko-slider-initialized .containersSpeceficaties,
.KwaliteitInElkeSchakel.reko-slider-initialized .Services {
  display: none !important;
}

/* Single slide: narrower viewport so arrows have room */
@media (max-width: 767px) {
  .reko-slider-viewport {
    width: 80%;
  }
}

/* Smaller table text and buttons on small screens */
@media (max-width: 475px) {
  .reko-slide .afval-table {
    font-size: 13px;
  }

  .reko-slide .afval-table .col-price {
    font-size: 13px;
  }

  .reko-slide .afval-table .btn-bestel {
    font-size: 14px;
    padding: 8px 14px 6px;
  }

  .afval-table .col-type {
    width: 40%;
    padding-left: 15px !important;
    font-size: 14px;
  }

  .reko-slider-wrapper {
    gap: 0px !important;
  }

  .reko-arrow {
    width: 30px;
  }
}

@media (max-width: 768px) {
  .reko-slider-wrapper {
    padding: 20px 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 981px) {
  .reko-slide .afval-table {
    font-size: 14px;
  }

  .reko-slide .afval-table .col-price {
    font-size: 14px;
  }

  .reko-slide .afval-table .btn-bestel {
    font-size: 15px;
    padding: 9px 16px 7px;
  }

  .afval-table .col-type {
    width: 40%;
    padding-left: 9px !important;
    font-size: 15px;
  }

}

@media (min-width: 768px) and (max-width: 1370px) {
  .reko-slider-track {
    gap: 15px;
  }
}

@media (max-width: 1370px) {
  .KwaliteitInElkeSchakel.reko-slider-initialized .reko-slider-viewport .reko-slide .et_pb_module .et_pb_module_inner div.et_pb_module {
    margin: 0 auto !important;
  }

  .KwaliteitInElkeSchakel.reko-slider-initialized .reko-slider-viewport .reko-slide div.et_pb_module {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 0px;
  }

  .reko-slider-initialized .reko-slider-viewport .et_pb_column.reko-slide {
    margin-bottom: 0px !important;
  }
}