/* Layout and page structure */
.demo-page {
  width: 100%;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.model-container {
  width: 100%;
  max-width: 100vw;
  height: 55vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative; /* Add this line! */
}

#info-text {
  position: absolute;
  right: 25%;
  left: 25%;
  bottom: 5%;
  font-family: sans-serif;
  line-height: 140%;
  text-align: center;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.fish-info-slider {
  width: 100%;
  max-width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
}

.card-slider {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */

  /* This padding creates space on the sides so the first and last cards can snap to the center */
  padding-left: calc((100vw - 85vw) / 2);
  padding-right: calc((100vw - 85vw) / 2);

  /* Hide the scrollbar for a cleaner look */
  scrollbar-width: none; /* Firefox */
}

/* Chrome, Safari, Opera */
.card-slider::-webkit-scrollbar {
  display: none;
}

.zoom-slider-wrapper {
  width: 100%;
  max-width: 400px;
  margin: 1rem auto 0.5rem auto;
  display: flex;
  justify-content: center;
}