/* ╔═════════════════════════════════════════════════════════════════════════╗ */
/* ║                        CAROUSEL (INFO BOX)                              ║ */
/* ╚═════════════════════════════════════════════════════════════════════════╝ */



.carousel {
  width: 500px;
  max-width: 100%;
  position: relative;
  margin: 2em auto;
  overflow: hidden;
  border-radius: 10px;
}

/* hide the radio buttons */
.carousel input[type="radio"] {
  display: none;
}

/* container for all images */
.carousel-images {
  display: flex;
  width: 100%; /* 5 images = 500% width */
  transition: transform 0.5s ease;
}

/* each image */
.carousel-images img {
  width: 100%;
  flex-shrink: 0;
  object-fit: cover;
}

/* navigation dots container */
.carousel-nav {
  text-align: center;
  margin-top: 10px;
}

/* style the dots */
.carousel-nav label {
  cursor: pointer;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 6px;
  background: transparent;  /* hollow */
  border-color: #000;       /* black outline */
  transform: rotate(45deg);      /* diamond */
  border: 2px solid; /* becomes outline on active */
  border-radius: 0;              /* ensure it's a square before rotation */
  transition: background-color 0.3s, border-color 0.3s;
}

.carousel input[type="radio"]:checked + label {
  background: transparent;  /* hollow */
  border-color: #111;       /* black outline */
}

/* workaround : stop images exploding in size inside and info-box */
.info-box .carousel-images img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain; /* optional depending on effect */
}

/* .info-box .carousel-images .slide {
  margin: 0;
  padding: 0;
} */

.info-box .carousel-images .slide img {
  max-width: 90%;
  max-height: 300px;
  width: auto;
  height: auto;
  margin: auto;
  object-fit: contain;
}

.carousel-images .slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
}

.slide-title {
  font-family: 'Mansalva-Regular', sans-serif;
  font-size: 2rem; /* Try 2rem or 3rem if you want it even larger */
  font-weight: bold;
  text-align: center;
  margin-top: 0.5em;
  color: #333;
}




/* spring */
#carousel-spring-slide1:checked ~ .carousel-images {
  transform: translateX(0%);
}
#carousel-spring-slide2:checked ~ .carousel-images {
  transform: translateX(-100%);
}
#carousel-spring-slide3:checked ~ .carousel-images {
  transform: translateX(-200%);
}
#carousel-spring-slide4:checked ~ .carousel-images {
  transform: translateX(-300%);
}
#carousel-spring-slide5:checked ~ .carousel-images {
  transform: translateX(-400%);
}
#carousel-spring-slide6:checked ~ .carousel-images {
  transform: translateX(-500%);
}
#carousel-spring-slide7:checked ~ .carousel-images {
  transform: translateX(-600%);
}
#carousel-spring-slide8:checked ~ .carousel-images {
  transform: translateX(-700%);
}
#carousel-spring-slide9:checked ~ .carousel-images {
  transform: translateX(-800%);
}
#carousel-spring-slide10:checked ~ .carousel-images {
  transform: translateX(-900%);
}
#carousel-spring-slide11:checked ~ .carousel-images {
  transform: translateX(-1000%);
}
#carousel-spring-slide12:checked ~ .carousel-images {
  transform: translateX(-1100%);
}
#carousel-spring-slide13:checked ~ .carousel-images {
  transform: translateX(-1200%);
}
#carousel-spring-slide14:checked ~ .carousel-images {
  transform: translateX(-1300%);
}
#carousel-spring-slide15:checked ~ .carousel-images {
  transform: translateX(-1400%);
}

/* fill navigation dot for slide in use (Spring) */
#carousel-spring-slide1:checked ~ .carousel-nav label[for="carousel-spring-slide1"],
#carousel-spring-slide2:checked ~ .carousel-nav label[for="carousel-spring-slide2"],
#carousel-spring-slide3:checked ~ .carousel-nav label[for="carousel-spring-slide3"],
#carousel-spring-slide4:checked ~ .carousel-nav label[for="carousel-spring-slide4"],
#carousel-spring-slide5:checked ~ .carousel-nav label[for="carousel-spring-slide5"],
#carousel-spring-slide6:checked ~ .carousel-nav label[for="carousel-spring-slide6"],
#carousel-spring-slide7:checked ~ .carousel-nav label[for="carousel-spring-slide7"],
#carousel-spring-slide8:checked ~ .carousel-nav label[for="carousel-spring-slide8"],
#carousel-spring-slide9:checked ~ .carousel-nav label[for="carousel-spring-slide9"],
#carousel-spring-slide10:checked ~ .carousel-nav label[for="carousel-spring-slide10"],
#carousel-spring-slide11:checked ~ .carousel-nav label[for="carousel-spring-slide11"],
#carousel-spring-slide12:checked ~ .carousel-nav label[for="carousel-spring-slide12"],
#carousel-spring-slide13:checked ~ .carousel-nav label[for="carousel-spring-slide13"],
#carousel-spring-slide14:checked ~ .carousel-nav label[for="carousel-spring-slide14"],
#carousel-spring-slide15:checked ~ .carousel-nav label[for="carousel-spring-slide15"] {
  background: #000;
}



/* summer */
#carousel-summer-slide1:checked ~ .carousel-images {
 transform: translateX(0%);
}
#carousel-summer-slide2:checked ~ .carousel-images {
 transform: translateX(-100%);
}
#carousel-summer-slide3:checked ~ .carousel-images {
 transform: translateX(-200%);
}
#carousel-summer-slide4:checked ~ .carousel-images {
 transform: translateX(-300%);
}
#carousel-summer-slide5:checked ~ .carousel-images {
 transform: translateX(-400%);
}
#carousel-summer-slide6:checked ~ .carousel-images {
 transform: translateX(-500%);
}
#carousel-summer-slide7:checked ~ .carousel-images {
 transform: translateX(-600%);
}
#carousel-summer-slide8:checked ~ .carousel-images {
 transform: translateX(-700%);
}
#carousel-summer-slide9:checked ~ .carousel-images {
 transform: translateX(-800%);
}
#carousel-summer-slide10:checked ~ .carousel-images {
 transform: translateX(-900%);
}
#carousel-summer-slide11:checked ~ .carousel-images {
 transform: translateX(-1000%);
}
#carousel-summer-slide12:checked ~ .carousel-images {
 transform: translateX(-1100%);
}
#carousel-summer-slide13:checked ~ .carousel-images {
 transform: translateX(-1200%);
}
#carousel-summer-slide14:checked ~ .carousel-images {
 transform: translateX(-1300%);
}
#carousel-summer-slide15:checked ~ .carousel-images {
 transform: translateX(-1400%);
}

/* fill navigation dot for slide in use (Summer) */
#carousel-summer-slide1:checked ~ .carousel-nav label[for="carousel-summer-slide1"],
#carousel-summer-slide2:checked ~ .carousel-nav label[for="carousel-summer-slide2"],
#carousel-summer-slide3:checked ~ .carousel-nav label[for="carousel-summer-slide3"],
#carousel-summer-slide4:checked ~ .carousel-nav label[for="carousel-summer-slide4"],
#carousel-summer-slide5:checked ~ .carousel-nav label[for="carousel-summer-slide5"],
#carousel-summer-slide6:checked ~ .carousel-nav label[for="carousel-summer-slide6"],
#carousel-summer-slide7:checked ~ .carousel-nav label[for="carousel-summer-slide7"],
#carousel-summer-slide8:checked ~ .carousel-nav label[for="carousel-summer-slide8"],
#carousel-summer-slide9:checked ~ .carousel-nav label[for="carousel-summer-slide9"],
#carousel-summer-slide10:checked ~ .carousel-nav label[for="carousel-summer-slide10"],
#carousel-summer-slide11:checked ~ .carousel-nav label[for="carousel-summer-slide11"],
#carousel-summer-slide12:checked ~ .carousel-nav label[for="carousel-summer-slide12"],
#carousel-summer-slide13:checked ~ .carousel-nav label[for="carousel-summer-slide13"],
#carousel-summer-slide14:checked ~ .carousel-nav label[for="carousel-summer-slide14"],
#carousel-summer-slide15:checked ~ .carousel-nav label[for="carousel-summer-slide15"] {
  background: #000;
}



/* autumn */
#carousel-autumn-slide1:checked ~ .carousel-images {
  transform: translateX(0%);
}
#carousel-autumn-slide2:checked ~ .carousel-images {
  transform: translateX(-100%);
}
#carousel-autumn-slide3:checked ~ .carousel-images {
  transform: translateX(-200%);
}
#carousel-autumn-slide4:checked ~ .carousel-images {
  transform: translateX(-300%);
}
#carousel-autumn-slide5:checked ~ .carousel-images {
  transform: translateX(-400%);
}
#carousel-autumn-slide6:checked ~ .carousel-images {
  transform: translateX(-500%);
}
#carousel-autumn-slide7:checked ~ .carousel-images {
  transform: translateX(-600%);
}
#carousel-autumn-slide8:checked ~ .carousel-images {
  transform: translateX(-700%);
}
#carousel-autumn-slide9:checked ~ .carousel-images {
  transform: translateX(-800%);
}
#carousel-autumn-slide10:checked ~ .carousel-images {
  transform: translateX(-900%);
}
#carousel-autumn-slide11:checked ~ .carousel-images {
  transform: translateX(-1000%);
}
#carousel-autumn-slide12:checked ~ .carousel-images {
  transform: translateX(-1100%);
}
#carousel-autumn-slide13:checked ~ .carousel-images {
  transform: translateX(-1200%);
}
#carousel-autumn-slide14:checked ~ .carousel-images {
  transform: translateX(-1300%);
}
#carousel-autumn-slide15:checked ~ .carousel-images {
  transform: translateX(-1400%);
}


/* fill navigation dot for slide in use (Autumn) */
#carousel-autumn-slide1:checked ~ .carousel-nav label[for="carousel-autumn-slide1"],
#carousel-autumn-slide2:checked ~ .carousel-nav label[for="carousel-autumn-slide2"],
#carousel-autumn-slide3:checked ~ .carousel-nav label[for="carousel-autumn-slide3"],
#carousel-autumn-slide4:checked ~ .carousel-nav label[for="carousel-autumn-slide4"],
#carousel-autumn-slide5:checked ~ .carousel-nav label[for="carousel-autumn-slide5"],
#carousel-autumn-slide6:checked ~ .carousel-nav label[for="carousel-autumn-slide6"],
#carousel-autumn-slide7:checked ~ .carousel-nav label[for="carousel-autumn-slide7"],
#carousel-autumn-slide8:checked ~ .carousel-nav label[for="carousel-autumn-slide8"],
#carousel-autumn-slide9:checked ~ .carousel-nav label[for="carousel-autumn-slide9"],
#carousel-autumn-slide10:checked ~ .carousel-nav label[for="carousel-autumn-slide10"],
#carousel-autumn-slide11:checked ~ .carousel-nav label[for="carousel-autumn-slide11"],
#carousel-autumn-slide12:checked ~ .carousel-nav label[for="carousel-autumn-slide12"],
#carousel-autumn-slide13:checked ~ .carousel-nav label[for="carousel-autumn-slide13"],
#carousel-autumn-slide14:checked ~ .carousel-nav label[for="carousel-autumn-slide14"],
#carousel-autumn-slide15:checked ~ .carousel-nav label[for="carousel-autumn-slide15"] {
  background: #000;
}



/* winter */
#carousel-winter-slide1:checked ~ .carousel-images {
  transform: translateX(0%);
}
#carousel-winter-slide2:checked ~ .carousel-images {
  transform: translateX(-100%);
}
#carousel-winter-slide3:checked ~ .carousel-images {
  transform: translateX(-200%);
}
#carousel-winter-slide4:checked ~ .carousel-images {
  transform: translateX(-300%);
}
#carousel-winter-slide5:checked ~ .carousel-images {
  transform: translateX(-400%);
}
#carousel-winter-slide6:checked ~ .carousel-images {
  transform: translateX(-500%);
}
#carousel-winter-slide7:checked ~ .carousel-images {
  transform: translateX(-600%);
}
#carousel-winter-slide8:checked ~ .carousel-images {
  transform: translateX(-700%);
}
#carousel-winter-slide9:checked ~ .carousel-images {
  transform: translateX(-800%);
}
#carousel-winter-slide10:checked ~ .carousel-images {
  transform: translateX(-900%);
}
#carousel-winter-slide11:checked ~ .carousel-images {
  transform: translateX(-1000%);
}
#carousel-winter-slide12:checked ~ .carousel-images {
  transform: translateX(-1100%);
}
#carousel-winter-slide13:checked ~ .carousel-images {
  transform: translateX(-1200%);
}
#carousel-winter-slide14:checked ~ .carousel-images {
  transform: translateX(-1300%);
}
#carousel-winter-slide15:checked ~ .carousel-images {
  transform: translateX(-1400%);
}


/* fill navigation dot for slide in use (Winter) */
#carousel-winter-slide1:checked ~ .carousel-nav label[for="carousel-winter-slide1"],
#carousel-winter-slide2:checked ~ .carousel-nav label[for="carousel-winter-slide2"],
#carousel-winter-slide3:checked ~ .carousel-nav label[for="carousel-winter-slide3"],
#carousel-winter-slide4:checked ~ .carousel-nav label[for="carousel-winter-slide4"],
#carousel-winter-slide5:checked ~ .carousel-nav label[for="carousel-winter-slide5"],
#carousel-winter-slide6:checked ~ .carousel-nav label[for="carousel-winter-slide6"],
#carousel-winter-slide7:checked ~ .carousel-nav label[for="carousel-winter-slide7"],
#carousel-winter-slide8:checked ~ .carousel-nav label[for="carousel-winter-slide8"],
#carousel-winter-slide9:checked ~ .carousel-nav label[for="carousel-winter-slide9"],
#carousel-winter-slide10:checked ~ .carousel-nav label[for="carousel-winter-slide10"],
#carousel-winter-slide11:checked ~ .carousel-nav label[for="carousel-winter-slide11"],
#carousel-winter-slide12:checked ~ .carousel-nav label[for="carousel-winter-slide12"],
#carousel-winter-slide13:checked ~ .carousel-nav label[for="carousel-winter-slide13"],
#carousel-winter-slide14:checked ~ .carousel-nav label[for="carousel-winter-slide14"],
#carousel-winter-slide15:checked ~ .carousel-nav label[for="carousel-winter-slide15"] {
  background: #000;
}