/**
 * Custom button styles for FreeFlix
 * Improves button appearance and touchability
 */

/* Improved button styling for navigation and controls */
.navigation-button {
  width: 40px; /* thinner than default */
  height: 170px !important; /* consistent height for all buttons */
  font-size: 1.8rem; /* smaller arrow */
  color: #8d16c9; /* purple arrow color */
  background-color: rgba(0,0,0,0.3); /* lighter background */
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, background-color 0.3s;
  z-index: 10 !important; /* ensure buttons are above all content */
  /* Prevent any unwanted movement or scaling when hovering/clicking */
  transform-origin: center center;
}

.navigation-button:hover,
.navigation-button:active,
.navigation-button:focus {
  opacity: 1 !important;
  background-color: rgba(0,0,0,0.5);
  /* Keep the button in place */
  transform: translateY(-50%);
  top: 50%;
}

/* Special height for Netflix/portrait containers if needed */
.netflix-previous, .netflix-next {
  height: 340px !important;
}

/* Fixed styling for all sections - overriding any specific styles */
.movie-container:hover .navigation-button {
  opacity: 0.8;
}

.previous {
  left: 0;
  border-radius: 0 5px 5px 0;
}

.next {
  right: 0;
  border-radius: 5px 0 0 5px;
}

/* Fix for anime, movies and tvshows sections */
/* Ensure consistent styling and visibility */
.movie-section .navigation-button,
.tv-section .navigation-button,
.anime-section .navigation-button {
  height: 170px !important;
  opacity: 0; /* Start hidden */
  z-index: 10 !important;
}

.movie-section .movie-container:hover .navigation-button,
.tv-section .movie-container:hover .navigation-button,
.anime-section .movie-container:hover .navigation-button {
  opacity: 0.8 !important;
}

/* Banner navigation buttons */
.banner-nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0.7;
  transition: opacity 0.3s, background-color 0.3s;
  /* Ensure stable positioning */
  transform-origin: center center;
}

#banner-prev {
  left: 20px;
}

#banner-next {
  right: 20px;
}

.banner-nav-button:hover,
.banner-nav-button:active,
.banner-nav-button:focus {
  opacity: 1;
  background-color: rgba(141, 22, 201, 0.9);
  /* Keep the button in place */
  transform: translateY(-50%);
}

/* Back to Top button */
#back-to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(141, 22, 201, 0.8);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, background-color 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

#back-to-top-btn:hover {
  background-color: rgba(141, 22, 201, 1);
}

/* Media queries for responsive design */
@media (max-width: 768px) {
  .navigation-button {
    width: 35px;
    height: 150px !important;
    font-size: 1.5rem;
    opacity: 0.7; /* Make more visible on mobile */
    z-index: 15 !important; /* Ensure buttons are above content */
  }

  /* Fix for smaller movie containers on mobile - ensure buttons are positioned correctly */
  .movie-container {
    padding-left: 0;
    padding-right: 0;
    position: relative;
  }

  /* Fix for Netflix Originals portrait containers in mobile */
  .netflix-previous, .netflix-next {
    height: 260px !important;
    width: 32px;
    top: 50%;
    z-index: 15;
  }

  .netflix-previous {
    left: 0;
  }

  .netflix-next {
    right: 0;
  }
}

@media (max-width: 480px) {
  #back-to-top-btn {
    width: 36px;
    height: 36px;
    bottom: 15px;
    right: 15px;
  }

  .navigation-button {
    width: 30px;
    height: 130px !important;
    font-size: 1.2rem;
    opacity: 0.8;
    z-index: 15;
  }

  /* Ensure Netflix Originals navigation buttons are visible and properly sized */
  .netflix-previous, .netflix-next {
    height: 260px !important;
    width: 30px;
    opacity: 0.8;
  }

  /* Set position for navigation buttons to ensure they're visible */
  .netflix-previous {
    left: 0;
  }

  .netflix-next {
    right: 0;
  }

  /* Fix for all movie sections to ensure navigation buttons are visible */
  .movie-section .navigation-button.previous {
    left: 0;
  }

  .movie-section .navigation-button.next {
    right: 0;
  }
}

/* Fix for containers overflow issues */
.movies-box {
  min-height: 190px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Ensure containers have proper sizing */
.movie-container {
  position: relative;
  overflow: visible; /* Allow navigation buttons to be visible */
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

/* Ensure navigation buttons are visible on tablets/mobile with touch */
@media (hover: none) {
  .navigation-button {
    opacity: 0.7;
  }

  /* Make Netflix Originals buttons more visible on touch devices */
  .netflix-previous, .netflix-next {
    opacity: 0.8;
  }

  /* Ensure movie containers have proper structure on touch devices */
  .movie-container {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0;
  }

  /* Position the navigation buttons correctly on the sides */
  .navigation-button.previous {
    left: 0;
    margin-right: 0;
  }

  .navigation-button.next {
    right: 0;
    margin-left: 0;
  }
}