/**
 * Locus Digital - Interaction Styles
 * Styles for dropdowns, lightbox, and other JS interactions
 */

/* Dropdown Open States */
.w-dropdown-list.w--open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.w-dropdown-toggle.w--open .w-icon-dropdown-toggle {
  transform: rotate(180deg);
}

/* Video Lightbox Overlay */
.locus-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.locus-lightbox-overlay.active {
  opacity: 1;
}

.locus-lightbox-container {
  position: relative;
  width: 90%;
  max-width: 900px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.locus-lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  padding: 5px 10px;
  z-index: 10;
  transition: color 0.2s;
}

.locus-lightbox-close:hover {
  color: #ff6b6b;
}

.locus-lightbox-content {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.locus-lightbox-content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Mobile menu open states */
.w-nav-button.w--open {
  background-color: transparent;
}

.w-nav-menu.w--open {
  display: block !important;
}

.w-nav-overlay.w--open {
  display: block !important;
  height: 100vh;
}

/* Custom Slide-out Menu (newmenuslide) */
.newmenuslide.open {
  display: block !important;
  transform: translateX(0) !important;
  right: 0 !important;
}

.overlay.open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Slide menu dropdown states */
.newmenuslide .w-dropdown-list.w--open {
  display: block !important;
  position: relative !important;
  height: auto !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.newmenuslide .w-dropdown-list.w--open a {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
}

.newmenuslide .w-dropdown-toggle.w--open .w-icon-dropdown-toggle {
  transform: rotate(180deg);
}

/* Slider fixes */
.w-slider-mask {
  position: relative;
  overflow: hidden;
  display: flex !important;
}

.w-slide {
  flex-shrink: 0;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure dropdown lists are properly positioned */
.w-dropdown-list {
  display: none;
  position: absolute;
}

/* Fix for nav dropdowns */
.nav-link-3.dp .w-dropdown-list {
  min-width: 200px;
}
/* ===== TESTIMONIALS SLIDER ===== */
/* Section positioning */
.section.satisfied-clients {
  position: relative;
  overflow: visible !important;
  padding-bottom: 100px !important;
}

/* Container for overlay and slider */
.clients-overflow {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ============================================
   TESTIMONIALS SLIDER - CSS VARIABLES APPROACH
   Single source of truth for responsive behavior
   ============================================ */

/* Root variables - Desktop (3-slide view with faded overlay) */
.satisfiedclients {
  --slide-width: 33.33vw;
  --show-overlay: 1;
  --slides-visible: 3;
  position: relative !important;
  overflow: hidden !important; /* Prevent horizontal page scroll */
}

/* Section container must also clip overflow */
.section.satisfied-clients {
  overflow: hidden !important;
}

/* Tablet/Mobile - Single slide view, no overlay */
@media screen and (max-width: 991px) {
  .satisfiedclients {
    --slide-width: 100%; /* Use % not vw to prevent horizontal scroll */
    --show-overlay: 0;
    --slides-visible: 1;
    overflow: hidden !important;
  }
}

/* Faded overlay - HIDDEN, using direct slide styling instead */
.faded-visible {
  display: none !important;
}

/* Hide overlay completely when --show-overlay is 0 */
@media screen and (max-width: 991px) {
  .faded-visible {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

.faded-block {
  z-index: 3;
  opacity: 0.73;
  filter: blur(5px);
  background-color: #fff;
  width: 33.3333%;
  height: 100%;
  position: relative;
}

.visible-block {
  border-radius: 15px;
  width: 33.3333%;
  height: 100%;
  background: transparent;
}

/* Slider mask - horizontal scrolling container */
.satisfiedclients .mask-2 {
  display: flex !important;
  overflow: visible !important;
  width: 100%;
  max-width: none !important;
}

@media screen and (max-width: 991px) {
  .satisfiedclients .mask-2 {
    overflow: hidden !important;
  }
}

/* Individual slides - use CSS variable for width */
.satisfiedclients .slide {
  flex-shrink: 0;
  width: var(--slide-width, 33.33vw);
}

/* Increase testimonial card size */
.satisfiedclients .slide .clients-block {
  min-height: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.satisfiedclients .slide .clients-item {
  padding: 15px !important;
  width: 100% !important;
}

.satisfiedclients .slide .clients-testimonial {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
}

.satisfiedclients .slide .vide-testi {
  width: 100% !important;
  flex: 1 !important;
}

.satisfiedclients .slide .lightbox-link,
.satisfiedclients .slide .lightbox-link.round {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  position: relative !important;
}

.satisfiedclients .slide .lightbox-link .image-127,
.satisfiedclients .slide .lightbox-link.round .image-127,
.satisfiedclients .slide .vide-testi .image-127 {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  border-radius: 10px !important;
  display: block !important;
  object-fit: cover !important;
}

.satisfiedclients .slide .clients-name {
  font-size: 24px !important;
}

.satisfiedclients .slide .clients-position {
  font-size: 14px !important;
}

/* Slider arrows - fix positioning */
.satisfiedclients .featured__arrow {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 25 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  width: 50px !important;
  height: 50px !important;
  background: #ffffff !important;
  border: 2px solid #64dbdb !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 15px rgba(100, 219, 219, 0.3) !important;
  transition: all 0.3s ease !important;
}

.satisfiedclients .featured__arrow .arrow {
  width: 24px !important;
  height: 24px !important;
  color: #024796 !important;
}

.satisfiedclients .featured__arrow:hover {
  background: #64dbdb !important;
  box-shadow: 0 6px 20px rgba(100, 219, 219, 0.5) !important;
}

.satisfiedclients .featured__arrow:hover .arrow {
  color: #ffffff !important;
}

/* Left arrow - position at left edge */
.satisfiedclients .featured__arrow.left,
.satisfiedclients .featured__arrow.w-slider-arrow-left {
  left: 20px !important;
  right: auto !important;
  margin-right: 0 !important;
}

/* Right arrow - position at right edge */
.satisfiedclients .featured__arrow.w-slider-arrow-right {
  right: 20px !important;
  left: auto !important;
}

.satisfiedclients .featured__arrow .arrow {
  width: 24px;
  height: 24px;
  color: #333;
}

/* Slider navigation dots - position below slider */
.satisfiedclients .slide-nav {
  z-index: 2;
  margin-top: 60px;
  display: block;
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
}

.satisfiedclients .slide-nav .w-slider-dot {
  display: inline-block;
  margin: 0 3px;
  cursor: pointer;
}

/* ============================================
   TESTIMONIALS SLIDER - RESPONSIVE ARROW/DOT POSITIONING
   (Overlay hiding and slide width handled via CSS variables above)
   ============================================ */

/* Tablet breakpoint (max-width: 991px) */
@media screen and (max-width: 991px) {
  /* Arrows inside container on tablet */
  .satisfiedclients .featured__arrow {
    width: 50px !important;
    height: 50px !important;
  }
  
  .satisfiedclients .featured__arrow.left,
  .satisfiedclients .featured__arrow.w-slider-arrow-left {
    left: 10px !important;
  }
  
  .satisfiedclients .featured__arrow.w-slider-arrow-right,
  .satisfiedclients .featured__arrow:not(.left) {
    right: 10px !important;
  }
  
  .section.satisfied-clients {
    padding-bottom: 80px !important;
    overflow: hidden !important;
  }
}

/* Mobile landscape breakpoint (max-width: 767px) */
@media screen and (max-width: 767px) {
  .satisfiedclients .featured__arrow {
    width: 45px !important;
    height: 45px !important;
  }
  
  .satisfiedclients .featured__arrow.left,
  .satisfiedclients .featured__arrow.w-slider-arrow-left {
    left: 5px !important;
  }
  
  .satisfiedclients .featured__arrow.w-slider-arrow-right,
  .satisfiedclients .featured__arrow:not(.left) {
    right: 5px !important;
  }
  
  .satisfiedclients .slide-nav {
    bottom: -50px !important;
  }
  
  .section.satisfied-clients {
    padding-bottom: 70px !important;
  }
}

/* Mobile portrait breakpoint (max-width: 479px) */
@media screen and (max-width: 479px) {
  .satisfiedclients .featured__arrow {
    width: 40px !important;
    height: 40px !important;
  }
  
  .satisfiedclients .featured__arrow.left,
  .satisfiedclients .featured__arrow.w-slider-arrow-left {
    left: 0 !important;
  }
  
  .satisfiedclients .featured__arrow.w-slider-arrow-right,
  .satisfiedclients .featured__arrow:not(.left) {
    right: 0 !important;
  }
  
  .satisfiedclients .slide-nav {
    bottom: -40px !important;
  }
  
  .section.satisfied-clients {
    padding-bottom: 60px !important;
  }
}