/* 
 * Custom Elementor Slider Styling
 * Path: /wp-content/plugins/logo-mask-reveal/assets/css/custom-slider-style.css
 * Adds luxury boutique styling to Elementor sliders
 */

/* Main slider container */
.luxury-slider-container .swiper-container,
.luxury-slider-container .swiper {
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Make slides visible outside container */
.luxury-slider-container .swiper-wrapper {
  overflow: visible !important;
}

/* Basic slide styling - make sure NO slides have overlay by default */
.luxury-slider-container .swiper-slide {
  transition: all 400ms ease !important;
  overflow: visible !important;
  transform: scale(1) !important;
}

/* Remove any possible overlay from all slides first */
.luxury-slider-container .swiper-slide::after {
  display: none !important;
  content: none !important;
}

/* Previous and next slides styling */
.luxury-slider-container .swiper-slide-prev,
.luxury-slider-container .swiper-slide-next {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
}

/* White overlay ONLY on previous slide */
.luxury-slider-container .swiper-slide-prev::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(255, 255, 255, 0.6) !important;
  z-index: 2 !important;
  display: block !important;
}

/* White overlay ONLY on next slide */
.luxury-slider-container .swiper-slide-next::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(255, 255, 255, 0.6) !important;
  z-index: 2 !important;
  display: block !important;
}

/* Current slide should be clearly visible with NO overlay */
.luxury-slider-container .swiper-slide-active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
}

/* Explicitly ensure no overlay on active slide */
.luxury-slider-container .swiper-slide-active::after {
  display: none !important;
  content: none !important;
  background-color: transparent !important;
}

/* Ensure duplicate slides don't get overlays unless they are prev/next */
.luxury-slider-container .swiper-slide-duplicate:not(.swiper-slide-prev):not(.swiper-slide-next)::after {
  display: none !important;
  content: none !important;
  background-color: transparent !important;
}

/* Navigation arrows styling - plain white with absolutely no background */
.luxury-slider-container .elementor-swiper-button {
  width: 27px !important;
  height: 48px !important;
  min-width: 27px !important;
  max-width: 27px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  background-color: transparent !important;
  background: none !important;
  color: #fff !important;
  border-radius: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100 !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Ensure no background or shape on any pseudo-elements */
.luxury-slider-container .elementor-swiper-button::before,
.luxury-slider-container .elementor-swiper-button::after {
  background-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Hide the default icons */
.luxury-slider-container .elementor-swiper-button i {
  display: none !important;
}

/* Add custom arrow icons */
.luxury-slider-container .elementor-swiper-button::before {
  content: '' !important;
  display: block !important;
  width: 27px !important;
  height: 48px !important;
  min-width: 27px !important;
  max-width: 27px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-sizing: border-box !important;
}

/* Left arrow custom icon - using relative path */
.luxury-slider-container .elementor-swiper-button-prev::before {
  background-image: url('../images/left-arrow.svg') !important;
}

/* Right arrow custom icon - using relative path */
.luxury-slider-container .elementor-swiper-button-next::before {
  background-image: url('../images/right-arrow.svg') !important;
}

/* Arrow hover state */
.luxury-slider-container .elementor-swiper-button:hover {
  background-color: transparent !important; /* Keep transparent on hover */
  background: none !important;
  box-shadow: none !important; /* No shadow on hover */
  opacity: 0.8 !important; /* Just slightly reduce opacity on hover */
}

/* Position the arrows exactly at the outer edges of the active slide */
.luxury-slider-container .elementor-swiper-button-prev {
  left: calc(50% - 43%) !important; /* Edge of the active slide */
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.luxury-slider-container .elementor-swiper-button-next {
  right: calc(50% - 43%) !important; /* Edge of the active slide */
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Pagination bullets styling */
.luxury-slider-container .swiper-pagination {
  bottom: 20px !important;
  z-index: 10 !important;
  width: auto !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-color: rgba(28, 28, 28, 0.7) !important;
  border-radius: 20px !important;
  padding: 9px 9px !important;
  gap: 5px !important;
}

.luxury-slider-container .swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  background: rgba(180, 180, 180, 0.9) !important;
  opacity: 1 !important;
  margin: 0 3px !important;
  transition: background-color 0.3s ease !important;
}

.luxury-slider-container .swiper-pagination-bullet-active {
  background: #ffffff !important;
  width: 8px !important;
  height: 8px !important;
}

/* Ensure true infinite loop with proper slide visibility */
.luxury-slider-container .swiper-slide-duplicate {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .luxury-slider-container .elementor-swiper-button {
    width: 27px !important;
    height: 48px !important;
  }
  
  .luxury-slider-container .elementor-swiper-button-prev {
    left: calc(50% - 45.5%) !important;
  }
  
  .luxury-slider-container .elementor-swiper-button-next {
    right: calc(50% - 45.5%) !important;
  }
  
  .luxury-slider-container .swiper-pagination {
    bottom: 10px !important;
    padding: 4px 10px !important;
  }
  
  .luxury-slider-container .swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
  }
  
  .luxury-slider-container .swiper-pagination-bullet-active {
    width: 6px !important;
    height: 6px !important;
  }
}

/* Main slider container - maintain aspect ratio */
.luxury-slider-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Create a responsive container with proper aspect ratio */
.luxury-slider-container .elementor-image-carousel-wrapper,
.luxury-slider-container .swiper-container,
.luxury-slider-container .swiper {
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 60.93% !important; /* Maintains 1500:914 ratio (914/1500 = 0.6093) */
  position: relative !important;
  overflow: visible !important;
}

/* Make slides fill the container correctly */
.luxury-slider-container .swiper-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

/* Make each slide maintain aspect ratio */
.luxury-slider-container .swiper-slide {
  height: 0 !important;
  padding-bottom: 60.93% !important; /* Same aspect ratio */
  overflow: hidden !important;
  position: relative !important;
}

/* Make images fill their containers properly */
.luxury-slider-container .swiper-slide img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Cover the area without distorting */
  object-position: center !important; /* Center the image */
}

/* Responsive adjustments for very small screens */
@media (max-width: 480px) {
  .luxury-slider-container .elementor-image-carousel-wrapper,
  .luxury-slider-container .swiper-container,
  .luxury-slider-container .swiper,
  .luxury-slider-container .swiper-slide {
    padding-bottom: 65% !important; /* Slightly taller on mobile for better viewing */
  }
}

/* Mobile-only slider - simple version without fancy effects */
@media (max-width: 767px) {
  /* Override all luxury styling for mobile-only slider */
  .mobile-only-slider .elementor-widget-image-carousel,
  .mobile-only-slider .elementor-widget-image-carousel * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  
  /* Direct container fix - ensure transparency */
  .mobile-only-slider,
  .mobile-only-slider.e-con-full,
  .mobile-only-slider.elementor-element,
  div.mobile-only-slider {
    background-color: transparent !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
  }
  
  /* Fix the shortcode container inside mobile slider */
  .mobile-only-slider .elementor-widget-shortcode,
  .mobile-only-slider .elementor-widget-container,
  .mobile-only-slider .elementor-shortcode {
    background-color: transparent !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
    width: 100% !important;
  }
  
  /* Set basic container styles */
  .mobile-only-slider .elementor-widget-image-carousel {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  /* Simple wrapper styling */
  .mobile-only-slider .elementor-image-carousel-wrapper,
  .mobile-only-slider .swiper-container,
  .mobile-only-slider .swiper {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* 16:9 aspect ratio by default */
    position: relative !important;
    overflow: hidden !important; /* Hide overflow to prevent slides from showing outside bounds */
    background-color: #ffffff !important; /* Ensure white background */
  }
  
  /* Swiper wrapper fixes */
  .mobile-only-slider .swiper-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 300ms ease !important;
    background-color: #ffffff !important;
  }
  
  /* Slide styling */
  .mobile-only-slider .swiper-slide {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: #ffffff !important;
  }
  
  /* Fix for any fullwidth issues */
  .mobile-only-slider.e-con-full {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Fix for mask inside shortcode */
  .mobile-only-slider .elementor-shortcode .lmr-mask-container,
  .mobile-only-slider .lmr-mask-container {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  /* Fix for Elementor shortcode containing slider */
  .mobile-only-slider .elementor-shortcode [class*="logo_reveal_slider"],
  .mobile-only-slider .elementor-shortcode .lmr-container,
  .mobile-only-slider .elementor-shortcode .lmr-isolation,
  .mobile-only-slider .elementor-shortcode .lmr-combined-container {
    background-color: transparent !important;
    position: static !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
    overflow: visible !important;
  }
  
  /* Image styling */
  .mobile-only-slider .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  /* Navigation buttons */
  .mobile-only-slider .elementor-swiper-button {
    width: 40px !important;
    height: 40px !important;
    color: white !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  
  /* Position buttons inside the slider bounds */
  .mobile-only-slider .elementor-swiper-button-prev {
    left: 10px !important;
  }
  
  .mobile-only-slider .elementor-swiper-button-next {
    right: 10px !important;
  }
  
  /* Simple pagination style */
  .mobile-only-slider .swiper-pagination {
    bottom: 10px !important;
    z-index: 99 !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  .mobile-only-slider .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    margin: 0 3px !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1 !important;
    border-radius: 50% !important;
  }
  
  .mobile-only-slider .swiper-pagination-bullet-active {
    background-color: white !important;
    width: 8px !important;
    height: 8px !important;
  }
}