/* Top Slider Horizontal Carousel Styles */
#slider-wrap {
  position: relative;
  padding: 0;
  margin-bottom: 2rem;
}

.top-slider-container {
  position: relative;
  padding: 0;
  margin-bottom: 0; /* Remove margin since parent wrapper handles it */
}

/* Slider wrapper needs relative positioning for overlays */
.slider-wrapper {
  position: relative;
}

/* Fixed overlay container covering the entire slider */
.slider-fixed-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* Left side overlay covering the left 12.5% of the slider */
.overlay-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

/* Right side overlay covering the right 12.5% of the slider */
.overlay-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 12.5%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

/* Navigation arrows positioned between center and side images */
#slider-wrap .slider-wrapper .slick-prev,
#slider-wrap .slider-wrapper .slick-next {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  color: #333;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#slider-wrap .slider-wrapper .slick-prev:hover,
#slider-wrap .slider-wrapper .slick-next:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -50%) scale(1.1);
}

/* Hover effect for next button */
#slider-wrap .slider-wrapper .slick-next:hover {
  transform: translate(50%, -50%) scale(1.1);
}

#slider-wrap .slider-wrapper .slick-prev:before,
#slider-wrap .slider-wrapper .slick-next:before {
  display: none !important;
}

#slider-wrap .slider-wrapper .slick-prev i,
#slider-wrap .slider-wrapper .slick-next i {
  font-size: 24px;
  color: #333;
}

/* Position arrows between center and side images */
#slider-wrap .slider-wrapper .slick-prev {
  left: 12.5%; /* Position between left side image and center image */
  transform: translate(-50%, -50%); /* Center the button on the boundary */
}

#slider-wrap .slider-wrapper .slick-next {
  right: 12.5%; /* Position between center image and right side image */
  transform: translate(50%, -50%); /* Center the button on the boundary */
}

/* Slider item base styles */
#slider-wrap .slider-item {
  padding: 0 8px;
  position: relative;
}

#slider-wrap .slider-item a {
  display: block;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

#slider-wrap .slider-item a img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

/* Center slide can have hover effect */
#slider-wrap .slick-center .slider-item a:hover img {
  transform: scale(1.02);
}

#slider-wrap .slick-dots {
  display: none !important;
}

/* Show dots on mobile when using mobile-dots class */
#slider-wrap .slick-dots.mobile-dots {
  display: none !important; /* Hidden by default */
}

/* Mobile dots styling */
.mobile-dots {
  display: none !important; /* Hidden by default */
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0; /* Remove margin since we're using absolute positioning */
  position: absolute;
  bottom: -40px; /* Increased spacing from slider */
  left: 0;
  right: 0;
  gap: 12px;
}

.mobile-dots li {
  margin: 0;
}

.mobile-dots li button {
  width: 44px; /* Touch target size for accessibility */
  height: 44px;
  border: none;
  background: transparent; /* Remove button background */
  cursor: pointer;
  font-size: 0;
  padding: 0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-dots li button:before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  display: block;
  transition: all 0.3s ease;
}

.mobile-dots li.slick-active button:before {
  background-color: #333;
  transform: scale(1.2);
}

/* Mobile responsive */
@media (max-width: 767px) {
  #slider-wrap {
    margin-bottom: 1rem;
  }
  
  /* Hide overlay and arrows on mobile since we're using fade */
  .slider-fixed-overlay {
    display: none;
  }
  
  #slider-wrap .slider-wrapper .slick-prev,
  #slider-wrap .slider-wrapper .slick-next {
    display: none !important;
  }
  
  #slider-wrap .slider-item {
    padding: 0;
  }
  
  #slider-wrap .slider-item a img {
    border-radius: 4px;
  }
  
  /* Show dots navigation on mobile */
  #slider-wrap .slick-dots.mobile-dots {
    display: flex !important;
  }
  
  .mobile-dots {
    display: flex !important;
  }
}

/* Tablet responsive */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Position arrows between center and side images for tablet */
  #slider-wrap .slider-wrapper .slick-prev {
    left: 10%; /* Adjust for tablet centerPadding of 10% */
    transform: translate(-50%, -50%);
  }
  
  #slider-wrap .slider-wrapper .slick-next {
    right: 10%;
    transform: translate(50%, -50%);
  }
  
  /* Tablet overlay adjustments - considering centerPadding of 10% */
  .overlay-left,
  .overlay-right {
    width: 10%;
  }
  
  /* Hide dots on tablet */
  .mobile-dots {
    display: none !important;
  }
}

/* Desktop responsive */
@media (min-width: 1024px) {
  /* Hide dots on desktop */
  .mobile-dots {
    display: none !important;
  }
}

/* Basic styles for existing content */
.mb-4 {
  margin-bottom: 1.5rem !important;
}

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.w-100 {
  width: 100% !important;
}

@media (min-width: 768px) {
  .d-lg-none {
    display: none !important;
  }
  
  .d-lg-block {
    display: block !important;
  }
}

@media (max-width: 767px) {
  .d-lg-none {
    display: block !important;
  }
  
  .d-lg-block {
    display: none !important;
  }
}

/* Slick carousel overrides */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-initialized .slick-slide {
  display: block;
}