.switcher {
  position: absolute;
  bottom: 20px; /* Adjust this value to control vertical positioning */
  left: 50%;
  transform: translateX(-50%); /* Centers it horizontally */
  width: 80%; /* Keep it responsive */
  max-width: 500px; /* Prevent it from getting too wide */
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  /* padding: 1rem; */
  z-index: 50; /* Ensures it's above other content */
}

/* -------------------------------- 

Main Components 

-------------------------------- */
/* Ensure the product viewer takes full width and height */
.cd-product-viewer-wrapper {
  width: 100%;
  height: auto;  /* Maintain aspect ratio */
  max-height: 90vh; /* Prevent excessive height */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-product-viewer-wrapper > div {
  display: inline-block;
}
.cd-product-viewer-wrapper .product-viewer {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
.cd-product-viewer-wrapper img {
  /* this is the image visible before the image sprite is loaded */
  display: block;
  position: relative;
  z-index: 1;
}
/* Make sure the sprite scales correctly */
.cd-product-viewer-wrapper .product-sprite {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 5000%; /* Keep this as it depends on frame count */
  background: url(../img/img-sprite-white.png) no-repeat top left;
  background-size: cover; /* Preserve scaling */
  opacity: 0;
  transition: opacity 0.3s;
}
.cd-product-viewer-wrapper.loaded .product-sprite {
  /* image sprite has been loaded */
  opacity: 1;
  cursor: ew-resize;
}

.cd-product-viewer-handle {
  position: absolute;
  top:10px;
  right:30px;
  z-index: 2;
  width: 100px;
  /* max-width: 300px; */
  border-radius: 50em;
  margin: 1em auto 3em;
  height: 4px;
  background: #4d4d4d;
}
.cd-product-viewer-handle .fill {
  /* this is used to create the loading fill effect */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: #b54240;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
}
.switch-view.active-view {
  background-color: #D32F2F; /* Red Background */
  color: white; /* White Text */
  border-color: #D32F2F; /* Match Border to Red */
}

.switch-view.active-view p {
  color: white !important; /* Ensure text inside turns white */
}

.switch-view.active-view img {
  filter: brightness(0) invert(1); /* Make icons white */
}

.info {
  overflow: scroll;
}
.flexiinformation {
  height:150px;
  overflow-y: scroll;
  cursor:ns-resize;
}
.flexiinformation :-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

.flexiinformation ::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.flexiinformation p {
  font-size: 12px;;
}
.no-csstransitions .cd-product-viewer-handle .fill {
  display: none;
}
.loaded .cd-product-viewer-handle .fill {
  /* image sprite has been loaded */
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.2s 0.3s;
  transition: transform 0.3s, opacity 0.2s 0.3s;
}
.cd-product-viewer-handle .handle {
  position: absolute;
  z-index: 2;
  display: inline-block;
  height: 28px;
  width: 28px;
  left: 0;
  top: -12px;
  background: #b54240 url(../img/cd-arrows.svg) no-repeat center center;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(181, 66, 64, 0.3), 0 0 20px rgba(0, 0, 0, 0.2);
  /* replace text with image */
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  color: transparent;
  -webkit-transform: translateX(-50%) scale(0);
  -moz-transform: translateX(-50%) scale(0);
  -ms-transform: translateX(-50%) scale(0);
  -o-transform: translateX(-50%) scale(0);
  transform: translateX(-50%) scale(0);
  -webkit-transition: box-shadow 0.2s;
  -moz-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s;
}
.cd-product-viewer-handle .handle:active {
  box-shadow: 0 0 0 0 rgba(181, 66, 64, 0), 0 0 20px rgba(0, 0, 0, 0.2);
}
.loaded .cd-product-viewer-handle .handle {
  /* image sprite has been loaded */
  -webkit-transform: translateX(-50%) scale(1);
  -moz-transform: translateX(-50%) scale(1);
  -ms-transform: translateX(-50%) scale(1);
  -o-transform: translateX(-50%) scale(1);
  transform: translateX(-50%) scale(1);
  -webkit-animation: cd-bounce 0.3s 0.3s;
  -moz-animation: cd-bounce 0.3s 0.3s;
  animation: cd-bounce 0.3s 0.3s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
  cursor: ew-resize;
}

#viewNotification {
  z-index: 1000; /* Keeps it above other elements */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  transform: translate(-50%, -20px); /* Start slightly above */
}

#viewNotification.show {
  opacity: 1;
  transform: translate(-50%, 0); /* Slide down smoothly */
}

#viewNotification.hide {
  opacity: 0;
  transform: translate(-50%, -20px); /* Slide up smoothly */
}

#dragIndicator {
  position: absolute;
  z-index: 1000; /* Keep it above everything */
  transform: translate(-50%, -50%);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  width: 100px; /* Set explicit width */
    height: auto;
}

/* When active, move right and fade out */
#dragIndicator.show {
  opacity: 1;
  transform: translate(-50%, -50%) translateX(200px);
}

@-webkit-keyframes cd-bounce {
  0% {
    -webkit-transform: translateX(-50%) scale(0);
  }
  60% {
    -webkit-transform: translateX(-50%) scale(1.1);
  }
  100% {
    -webkit-transform: translateX(-50%) scale(1);
  }
}
@-moz-keyframes cd-bounce {
  0% {
    -moz-transform: translateX(-50%) scale(0);
  }
  60% {
    -moz-transform: translateX(-50%) scale(1.1);
  }
  100% {
    -moz-transform: translateX(-50%) scale(1);
  }
}
@keyframes cd-bounce {
  0% {
    -webkit-transform: translateX(-50%) scale(0);
    -moz-transform: translateX(-50%) scale(0);
    -ms-transform: translateX(-50%) scale(0);
    -o-transform: translateX(-50%) scale(0);
    transform: translateX(-50%) scale(0);
  }
  60% {
    -webkit-transform: translateX(-50%) scale(1.1);
    -moz-transform: translateX(-50%) scale(1.1);
    -ms-transform: translateX(-50%) scale(1.1);
    -o-transform: translateX(-50%) scale(1.1);
    transform: translateX(-50%) scale(1.1);
  }
  100% {
    -webkit-transform: translateX(-50%) scale(1);
    -moz-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    -o-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }
}