/* Override accessibility.css min-width/min-height for ALL FancyBox interactive elements */
.fancybox-close,
.fancybox-nav,
.fancybox-nav span,
.fancybox-prev,
.fancybox-next,
.fancybox-wrap a,
.fancybox-wrap button {
  min-width: auto !important;
  min-height: auto !important;
}

/* FancyBox Gallery Navigation Improvements */

/* Override global focus styling for fancybox navigation */
.fancybox-nav:focus {
  outline: none !important;
}

.fancybox-nav span:focus {
  outline: none !important;
}

/* Improve navigation arrow visibility with proper container sizing */
.fancybox-nav {
  width: 36px !important; /* Match actual icon width for cleaner edges */
  height: 100%;
  background: rgba(0, 0, 0, 0.1) !important; /* Subtle background for better visibility */
  transition: background-color 0.3s ease;
  padding: 0 60px !important; /* Add padding to keep container outside image bounds */
}

.fancybox-nav:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Position arrows outside the main image area - fixed positioning */
.fancybox-prev {
  left: -44px !important; /* Move further outside to prevent overlap */
}

.fancybox-next {
  right: -44px !important; /* Move further outside to prevent overlap */
}

/* Style the arrow icons with correct dimensions and transparent background */
.fancybox-nav span {
  visibility: visible !important; /* Always show arrows */
  background-image: url('../img/fancybox_sprite.png') !important;
  width: 36px !important; /* Correct sprite width */
  height: 34px !important; /* Correct sprite height */
  margin-top: -17px !important; /* Adjusted for 34px height */
  border-radius: 50% !important;
  background-color: transparent !important; /* Transparent background for cleaner look */
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; Stronger shadow for visibility */
  transition: all 0.3s ease !important;
  position: absolute;
  left: 50% !important; /* Center horizontally */
  margin-left: -18px !important; /* Offset by half width (36px/2) */
}

.fancybox-prev span {
  background-position: 0 -36px !important; /* Correct sprite position */
}

.fancybox-next span {
  background-position: 0 -72px !important; /* Correct sprite position */
}

.fancybox-nav:hover span {
  background-color: rgba(255, 255, 255, 0.2) !important; /* Subtle highlight on hover */
  transform: scale(1.1) !important;
}

/* Custom focus indicator for keyboard navigation */
.fancybox-nav:focus span {
  /* box-shadow: 0 0 0 3px rgba(232, 202, 111, 0.8) !important; Yellow focus ring around the arrow button */
  background-color: rgba(255, 255, 255, 0.3) !important; /* Slight background on focus for visibility */
}

/* Ensure arrows are always visible on mobile */
@media (max-width: 768px) {
  .fancybox-prev {
    left: 10px !important; /* On mobile, keep arrows inside but well-positioned */
  }
  
  .fancybox-next {
    right: 10px !important;
  }
  
  .fancybox-nav {
    width: 36px !important; /* Match icon dimensions */
  }
  
  .fancybox-nav span {
    width: 36px !important; /* Keep original sprite dimensions */
    height: 34px !important; /* Keep original sprite dimensions */
    margin-top: -17px !important; /* Adjusted for 34px height */
    left: 0 !important; /* No offset needed in exact-size container */
    right: 0 !important; /* No offset needed in exact-size container */
  }
}

/* Loading indicator improvements */
.fancybox-loading div {
  background: url('../img/fancybox_loading.gif') center center no-repeat !important;
}

/* Close button improvements with correct sprite positioning and transparent background */
.fancybox-close {
  background-image: url('../img/fancybox_sprite.png') !important;
  background-position: 0 0 !important; /* Close icon is first in sprite */
  width: 36px !important; /* Correct sprite width */
  height: 36px !important; /* Correct sprite height */
  background-color: transparent !important; /* Transparent background for cleaner look */
  border-radius: 50% !important;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; Stronger shadow for visibility */
  transition: all 0.3s ease !important;
}

.fancybox-close:hover {
  background-color: rgba(255, 255, 255, 0.2) !important; /* Subtle highlight on hover */
  transform: scale(1.1) !important;
}

.fancybox-close:focus {
  outline: none !important;
  /* box-shadow: 0 0 0 3px rgba(232, 202, 111, 0.8) !important; */
  background-color: rgba(255, 255, 255, 0.3) !important; /* Slight background on focus for visibility */
}

/* High specificity overrides to ensure consistent behavior */
.fancybox-wrap .fancybox-outer .fancybox-nav {
  width: 36px !important;
  padding: 0 30px !important; /* Ensure padding is applied with high specificity */
}

.fancybox-wrap .fancybox-outer .fancybox-prev {
  left: -60px !important;
}

.fancybox-wrap .fancybox-outer .fancybox-next {
  right: -60px !important;
}

.fancybox-wrap .fancybox-outer .fancybox-nav span {
  width: 36px !important;
  height: 34px !important;
  margin-top: -17px !important;
  background-color: transparent !important;
  visibility: visible !important;
  position: absolute;
  left: 50% !important;
  margin-left: -18px !important;
}

.fancybox-wrap .fancybox-outer .fancybox-prev span {
  background-position: 0 -36px !important;
}

.fancybox-wrap .fancybox-outer .fancybox-next span {
  background-position: 0 -72px !important;
}

.fancybox-wrap .fancybox-close {
  background-position: 0 0 !important;
  background-color: transparent !important;
  width: 36px !important;
  height: 36px !important;
  min-width: auto !important;
  min-height: auto !important;
}

/* Debugging styles - remove after testing */
/*
.fancybox-nav span,
.fancybox-close {
  border: 2px solid red !important;
  background-color: yellow !important;
}
*/