/* ===== Swiper Components ===== */

/* Base Swiper Styles */
.swiper {
  width: 100%;
  min-width: 320px;
  height: 100%;
  background-color: var(--cream);
  color: #212121; 
  margin-top: 0rem;
  padding: 0;
  border-radius: 20px;
}

.swiper-slide {
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* Active swiper slide - z-index for layering, cream outline, and pointer events enabled */
.swiper-slide.swiper-slide-active {
  /* z-index: 100; */
  /* outline: 0.50px solid var(--cream); */
  /* pointer-events: all !important; */
}

.swiper-slide img, 
.swiper-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover !important;
  max-width: 100%;
  max-height: 100%;
}

/* Cases Swiper */
.swiper-cases {
  width: 100% !important;
  height: 100% !important;
}

.cases-swiper-wrapper {
  height: 100%;
  width: 100%;
}

.cases-swiper-slide {
  height: 100%;
  width: 100%;
  border-radius: 20px;
  border: 0.50px solid #bcb8ae50 !important;
}



/* Story Controls */
.story-control {
  padding: 32px 16px 0px 16px;
  z-index: 1000;
  top: 0;
  left: 0;
}

.hoverInt {
  z-index: 100;
}

.container-cta {
  position: absolute;
  bottom: 0px;
  padding: 16px;
  margin: auto;
  z-index: 200;
  display: flex;
  visibility: hidden;
  justify-content: center;
  align-items: center;
}

.container-cta a { 
  border-radius: 20px;
  transition: background-color 0.3s, color 0.3s;
}

/* Control Buttons */
.mute-toggle .material-symbols-rounded,
.close-stories .material-symbols-rounded {
  font-size: 32px;
  color: white;

}

.mute-toggle:hover, 
.close-stories:hover {
  pointer-events: pointer;
  transition: all 0.3s ease;
  cursor: pointer;
  opacity: 0.50;
}



.pause-toggle .material-symbols-rounded {
  color: white !important;
  font-size: 72px;
  opacity: 0.75; 

}

.pause-toggle:hover {
  pointer-events: pointer;
  transition: all 0.3s ease;
  cursor: pointer;
  opacity: 0.50;
}

/* Pagination */
.swiper-pagination-bullet {
  opacity: 1;
  background: var(--swipexr-pagination-bullet-inactive-color, #00000020);
  border-radius: 12rem;
}

.swiper-pagination-bullet-active,
.swiper-pagination-bullet-viewed {
  opacity: 1;
  background: rgb(255, 255, 255);
  border-radius: 12rem;
}

.swiper-pagination-bullet-active::before,
.swiper-pagination-bullet-viewed::before {
  content: '';
  background: rgb(255, 255, 255);
  display: block;
  position: relative; 
  top: 0;
  left: 0; 
  height: 100%; 
  width: 100%;
  border-radius: 12px;
}

.swiper-pagination-bullet-active::before {
  width: var(--progress, 0%);
}

/* Responsive Styles */
@media (max-width: 440px) {
  .swiper {
    width: 100%;
    height: 100svh !important;
    min-height: -webkit-fill-available;
    margin: 0;
    padding: 0 !important;
    border-radius: 0px !important;
  }
  
  .story-control {
    width: 100%;
  }

  .container-cta {
    visibility: visible;
  }

}

@media (min-width: 1920px) {
  .wrapped-container-case {
    height: 100% !important;  
    padding: 3rem 10rem;
    gap: 2rem;
  }
  .stories {
    height: 100%;
  
  }
}