/* Cascade-safe responsive styles for Image Careousal widget (v1.3.0) */
.icc-image-careousal {
  /* BASE vars (Elementor responsive controls can set these) */
  --card-w: 740px;
  --card-h: 460px;
  --bevel: 22px;
  --peek-1: 115px;
  --peek-2: 115px;

  /* EFFECTIVE vars (calculated by JS). If JS hasn't written them, fall back to base vars above. */
  --icc-card-w: var(--card-w);
  --icc-card-h: var(--card-h);
  --icc-bevel: var(--bevel);
  --icc-peek-1: var(--peek-1);
  --icc-peek-2: var(--peek-2);

  --shadow: 0 18px 46px rgba(0,0,0,.35);
  --icc-active-tag: none;
  --icc-slice-tag: none;
  max-width: 100%;
}

.icc-image-careousal * { box-sizing: border-box; }

.icc-image-careousal .carousel{
  position:relative;
  width: calc(var(--icc-card-w) + var(--icc-peek-1) + var(--icc-peek-2) - (2 * var(--icc-bevel)));
  max-width:100%;
  height: var(--icc-card-h);
  will-change: width, height;
}

.icc-image-careousal .slide{
  position:absolute; 
  top: 0;
  left: 0;
  width: var(--icc-card-w); 
  height:100%;
  overflow:hidden;
  transform-origin: left center;
  transition: transform .45s ease, opacity .35s ease, z-index .2s linear;
  box-shadow: var(--shadow);
  background:#111;
  border-radius:0;
}
.icc-image-careousal .slide img{
  position:absolute; 
  inset:0;
  width:100%; 
  height:100%; 
  object-fit:cover;
  filter:none; 
  transition: transform .3s ease; 
  pointer-events:none;
}
.icc-image-careousal .slide:hover img{ transform:scale(1.03); }

/* corner tag */
.icc-image-careousal .tag {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  top: 20px;
  right: 16px;
  width: 42px;
  height: 42px;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-image: var(--icc-slice-tag);
}
.icc-image-careousal figure.slide.pos-0 .tag {
  background-image: var(--icc-active-tag);
}

/* ACTIVE (beveled shape) */
.icc-image-careousal .slide.pos-0{
  transform: translateX(0); 
  z-index:40;
  clip-path: polygon(
    0 0,
    calc(100% - var(--icc-bevel)) 0,
    100% calc(var(--icc-bevel) * .55),
    100% calc(100% - calc(var(--icc-bevel) * .55)),
    calc(100% - var(--icc-bevel)) 100%,
    0 100%
  );
}

/* FIRST slice (immediate right slice) */
.icc-image-careousal .slide.pos-1{
  transform: translateX(calc(var(--icc-card-w) - var(--icc-bevel)));
  z-index:30;
  width: var(--icc-peek-1);
  clip-path: polygon(
    var(--icc-bevel) 0,
    calc(100% - var(--icc-bevel)) 0,
    100% calc(var(--icc-bevel) * .55),
    100% calc(100% - calc(var(--icc-bevel) * .55)),
    calc(100% - var(--icc-bevel)) 100%,
    var(--icc-bevel) 100%,
    0 calc(100% - calc(var(--icc-bevel) * .0)),
    0 calc(var(--icc-bevel) * 0)
  );
}

/* SECOND slice (further right slice) */
.icc-image-careousal .slide.pos-2{
  transform: translateX(calc(var(--icc-card-w) + var(--icc-peek-1) - (2 * var(--icc-bevel))));
  z-index:20;
  width: var(--icc-peek-2);
  clip-path: polygon(
    var(--icc-bevel) 0,
    calc(100% - var(--icc-bevel)) 0,
    100% calc(var(--icc-bevel) * .55),
    100% calc(100% - calc(var(--icc-bevel) * .55)),
    calc(100% - var(--icc-bevel)) 100%,
    var(--icc-bevel) 100%,
    0 calc(100% - calc(var(--icc-bevel) * .0)),
    0 calc(var(--icc-bevel) * 0)
  );
}

/* hide the rest so only three images show (active + slices) */
.icc-image-careousal .slide.off{ 
  opacity: 0; 
  pointer-events: none;
  z-index: 0;
}

/* When space only allows 1 slice */
.icc-image-careousal .carousel.one-slice .slide.pos-2{
  opacity: 0; pointer-events:none; z-index:0;
}

/* When space only allows 0 slice */
.icc-image-careousal .carousel.no-slice .slide.pos-1,
.icc-image-careousal .carousel.no-slice .slide.pos-2{
  opacity: 0; pointer-events:none; z-index:0;
}

.icc-image-careousal .nav{
  position:absolute; 
  inset:auto 0 -54px 0;
  display:flex; 
  justify-content:center; 
  gap:14px;
}
.icc-image-careousal .btn{
  border:0; 
  padding:10px 16px; 
  border-radius:999px;
  background:#111; 
  color:#fff; 
  font-weight:600; 
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.icc-image-careousal .btn:hover{ transform:translateY(-1px); }
.icc-image-careousal .btn:active{ transform:translateY(1px); }

@media (max-width: 1024px){
  .icc-image-careousal .tag{ width: 38px; height: 38px; top: 16px; right: 12px; }
  .icc-image-careousal .nav{ inset:auto 0 -46px 0; }
}
@media (max-width: 768px){
  /* Move controls below to avoid overlap */
  .icc-image-careousal .nav{ position: static; margin-top: 10px; inset:auto; }
}
@media (prefers-reduced-motion: reduce){
  .icc-image-careousal .slide, 
  .icc-image-careousal .slide img{ transition:none!important; }
}


/* Drag affordance */
.icc-image-careousal .carousel {
  touch-action: pan-y; /* Allow vertical scroll by default; JS will lock when swiping horizontally */
  transition: transform .25s ease;
}
.icc-image-careousal .carousel.icc-grab { cursor: grab; }
.icc-image-careousal .carousel.icc-grabbing { cursor: grabbing; }



/* --- Mobile dots pagination --- */
.icc-image-careousal .dots{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:12px;
}
.icc-image-careousal .dot{
  width:10px; height:10px;
  border-radius:999px;
  border:0;
  background:#cfcfcf;
  padding:0;
  display:block;
  transition: transform .2s ease, background .2s ease;
}
.icc-image-careousal .dot[aria-selected="true"],
.icc-image-careousal .dot.active{
  background:#111;
  transform: scale(1.22);
}
.icc-image-careousal .dot:focus-visible{
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* Only on mobile: show dots, hide arrows */
@media (max-width: 768px){
  .icc-image-careousal .dots{ display:flex; }
  .icc-image-careousal .nav{ display:none !important; }
}