/* Remove white panel and make flipbook responsive */
@import url('site-theme.css');

body {
  margin: 0;
  padding: 0;
  background-color: #000; /* Set background to black for better contrast */
  color: #fff; /* Ensure text is visible */
  font-family: Arial, sans-serif;
}

#flipbook {
  display: none; /* Initially hidden until loaded */
  margin: auto;
  background: none; /* Remove any background color */
  margin-top: 20px; /* Add gap between book and buttons */
  cursor: pointer; /* Change cursor to indicate interactivity */
}

#controls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* Ensure controls wrap on smaller screens */
  gap: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background for controls */
}

#controls input, #controls button {
  font-size: 14px;
  padding: 5px;
}

#pageInfo {
  text-align: center;
  margin: 10px 0;
}

@media (max-width: 768px) {
  #flipbook {
    width: 100%;
    height: auto;
  }

  #controls {
    flex-direction: row; /* Ensure buttons stay in a row */
    flex-wrap: wrap; /* Allow wrapping if needed */
    justify-content: space-evenly; /* Distribute buttons evenly */
    gap: 5px; /* Reduce gap for better spacing */
  }

  #controls input, #controls button {
    flex: 1 1 auto; /* Allow buttons to resize proportionally */
    max-width: 120px; /* Set a maximum width for buttons */
  }
}

#loading-gif {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* Ensure it appears above other elements */
  display: none; /* Initially hidden */
}

.input-container {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  background-color: #fff;
}

.input-container input {
  border: none;
  padding: 5px;
  flex: 1;
}

.input-container button {
  border: none;
  background-color: #76c7c0;
  color: #fff;
  padding: 5px;
}

#bookmarkDropdown ul {
  background-color: #000; /* Set dropdown background color to black */
  color: #fff; /* Ensure text is visible */
  padding: 5px;
  border-radius: 5px;
  list-style: none;
  margin: 0;
}

#bookmarkDropdown ul li {
  padding: 5px;
  cursor: pointer;
}

#bookmarkDropdown ul li:hover {
  background-color: #444; /* Add hover effect for better visibility */
}

#flipbook-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes blink {
  0%, 100% {
    background-color: green;
  }
  50% {
    background-color: rgba(0, 128, 0, 0.5); /* Slightly transparent green */
  }
}

.animated-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 18px;
  cursor: pointer;
  animation: blink 1s infinite; /* Add blinking animation */
  z-index: 10; /* Ensure buttons appear above the flipbook */
}

.animated-button:hover {
  transform: scale(1.1); /* Animation only triggers on hover */
}

#prevButton {
  left: 10px; /* Adjust positioning to ensure visibility */
  z-index: 1000000;
}

#nextButton {
  right: 10px; /* Adjust positioning to ensure visibility */
  z-index: 1000000;
}


@media (max-width: 768px) {
    #flipbook-container {
      position: relative;
      width: 100%;
      height: 70vh; /* Adjust height for mobile */
    }

    #prevButton, #nextButton {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1000;
      font-size: 1.5em; /* Adjust button size for mobile */
    }

    #prevButton {
      left: 10px; /* Adjust position for mobile */
    }

    #nextButton {
      right: 10px; /* Adjust position for mobile */
    }
  }