/* nikoo-slider v1.3.0 - responsive + PSI/LCP friendly */
/*
  Key changes:
  - Default height is responsive (clamp) to behave well on very large/small viewports.
  - Viewport height is capped by vh so it never becomes absurdly tall.
*/
.nikoo-slider{ --nikoo-h:clamp(260px, 32vw, 520px); position:relative; width:100%; }
.nikoo-slider__viewport{
  /* Elementor can override --nikoo-h per breakpoint; this clamp makes it safe everywhere */
  height:clamp(220px, var(--nikoo-h), 70vh);
  position:relative;
  overflow:hidden;
  background:transparent;
  outline:none;
  touch-action: pan-y;
}
.nikoo-slider__track{
  height:100%;
  display:flex;
  /* let the track naturally expand to fit slides (prevents blank areas on loop jumps) */
  transform:translate3d(0,0,0);
  will-change:transform;
  transition:transform 450ms ease;
}
.nikoo-slider__slide{ flex:0 0 100%; height:100%; position:relative; }
.nikoo-slider__media{ width:100%; height:100%; }
.nikoo-slider__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.nikoo-slider__link{ display:block; width:100%; height:100%; position:relative; z-index:1; }

.nikoo-slider__navBtn{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  backdrop-filter:saturate(120%) blur(6px);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
  box-shadow:0 6px 24px rgba(0,0,0,.18);
  z-index:2147483647;
  pointer-events:auto;
  user-select:none;
  touch-action:manipulation;
}
.nikoo-slider__prev{ left:12px; }
.nikoo-slider__next{ right:12px; }
.nikoo-slider__navBtn svg{ display:block; }

.nikoo-slider--empty{ padding:12px; border:1px dashed #ddd; border-radius:12px; }

.nikoo-slider.is-dragging .nikoo-slider__track{ transition:none !important; cursor:grabbing; }

/* --------------------------------------------------------------------------
   Mobile responsiveness (v1.2)
   Fixes: incorrect height + slider shifting to the right on small screens.
   Notes:
   - Keeps existing Elementor responsive controls working.
   - Provides a safe default aspect-ratio for mobile if user didn't set a
     dedicated mobile height in Elementor.
-------------------------------------------------------------------------- */
@media (max-width: 767px){
  /* make sure the widget never overflows or floats into a corner */
  .nikoo-slider{
    width:100%;
    max-width:100%;
    margin:0 auto;
    float:none !important;
    box-sizing:border-box;
  }

  /* Mobile variant: allow Elementor responsive height/CLS controls to work */
  .nikoo-slider--mobile .nikoo-slider__viewport{
    height: clamp(200px, var(--nikoo-h), 60vh);  /* controlled via Elementor responsive 'height' control */
  }

  /* Ensure the internal layout follows the viewport box */
  .nikoo-slider--mobile .nikoo-slider__track{ height:100%; }
  .nikoo-slider--mobile .nikoo-slider__slide{ height:100%; }
  .nikoo-slider--mobile .nikoo-slider__media{ height:100%; }
  .nikoo-slider--mobile .nikoo-slider__media img{ height:100%; }

  /* Arrow buttons size/placement for mobile */
  .nikoo-slider__navBtn{ width:42px; height:42px; }
  .nikoo-slider__prev{ left:8px; }
  .nikoo-slider__next{ right:8px; }
}