/* General Styles */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: Arial, sans-serif;
  background: black;
}

#container {
  position: relative;
  height: 100%;
  width: 100%;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 0.5s ease;
}

.background-1 {
  background-image: url('https://btl.accessjo.net/assets/background1.jpg');
}

.background-2 {
  background-image: url('https://btl.accessjo.net/assets/background2.jpg');
  opacity: 0;
}

.background.active {
  opacity: 1;
}

/* Flash Effect */
.flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

/* Slider Section */
.center-xy {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Slider Bar */
.slider-bar {
  width: 468px; /* 30% increase from 360px */
  height: 78px; /* 30% increase from 60px */
  background: url('https://btl.accessjo.net/assets/bar.png') no-repeat center;
  background-size: contain;
  border-radius: 39px; /* 30% increase from 30px */
  position: relative;
  overflow: hidden; /* Ensure thumb stays within the bar */
}

/* Glossy Reflection Effect */
.slider-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: glossy-animation 2s infinite;
}

@keyframes glossy-animation {
  0% {
      left: -100%;
  }
  100% {
      left: 100%;
  }
}

/* Slider Thumb */
.slider-thumb {
  width: 130px; /* 30% increase from 100px */
  height: 65px; /* 30% increase from 50px */
  background: url('https://btl.accessjo.net/assets/circle.png') no-repeat center;
  background-size: contain;
  position: absolute;
  top: 6.5px; /* Adjusted for vertical centering inside the bar */
  right: 6.5px; /* Adjusted to keep the thumb fully inside the bar */
  cursor: grab;
  transition: transform 0.2s ease-in-out;
}

.slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}

/* Hide Element */
.hidden {
  display: none;
}

/* Back Button */
#back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 10px 20px;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 3;
}

#back-button:hover {
  background-color: rgba(255, 255, 255, 0.7);
  color: black;
}