/* Core coverflow CSS with variable-driven theming */
.coverflow {
  --slide-w: 320px;
  --slide-h: 520px;
  --slide-radius: 22px;
  --thumb-border-w: 2px;
  --perspective: 1600px;
  --gap: 160px;
  --depth: 120;
  --rotateY: 24;
  --scaleDown: 0.1;
  --translateY: 0;
  --slides-per-view: 1;
  --inactive-opacity: 0.55;
  --inactive-grayscale: 1;
  --inactive-blur: 0px;
  --active-stroke: 2px;
  --active-stroke-color: #8fe3ff;
  --active-glow-color: #00ffff;
  --active-glow-strength: 36px;
  --play-size: 78px;
  --play-bg: rgba(0, 0, 0, 0.55);
  --play-icon: #fff;
  --play-ring: rgba(255, 255, 255, 0.55);
  --play-ring-w: 2px;
  --arrow-size: 44px;
  --arrow-bg: rgba(0, 0, 0, 0.45);
  --arrow-fg: #e5e7eb;
  --dot-size: 9px;
  --dot-color: #6b7280;
  --dot-active: #ffd54a;
  --move-ms: 500ms;
  --fade-ms: 220ms;
}
.coverflow {
  position: relative;
  width: 100%;
  max-width: var(--box-max-width, 100%);
  margin-inline: auto;
}
.coverflow .cf-viewport {
  position: relative;
  height: calc(var(--slide-h) + 30px);
  perspective: var(--perspective);
  overflow: hidden;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.coverflow .cf-track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--move-ms) cubic-bezier(0.22, 0.61, 0.36, 1);
}
.coverflow .cf-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--slide-w);
  height: var(--slide-h);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  border-radius: var(--slide-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border: var(--thumb-border-w) solid rgba(255, 255, 255, 0.08);
  background: #0a1020;
  transition: transform 0.4s, opacity 0.4s, filter var(--move-ms);
  display: grid;
  place-items: center;
  font-size: 3rem;
  font-weight: bold;
}
.coverflow .cf-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  display: block;
}
.coverflow .cf-slide.is-inactive {
  opacity: var(--inactive-opacity);
  filter: grayscale(var(--inactive-grayscale)) blur(var(--inactive-blur));
}
.coverflow .cf-slide.is-active {
  outline: var(--active-stroke) solid var(--active-stroke-color);
  box-shadow: 0 0 0 var(--active-stroke) var(--active-stroke-color),
    0 0 var(--active-glow-strength) var(--active-glow-color);
}
.coverflow .cf-slide.is-out {
  opacity: 0;
  pointer-events: none;
}
.coverflow .cf-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity var(--fade-ms) ease;
}
.coverflow .cf-play .btn {
  position: relative;
  width: var(--play-size);
  height: var(--play-size);
  border-radius: 999px;
  background: var(--play-bg);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35),
    0 0 0 var(--play-ring-w) var(--play-ring) inset;
}
.coverflow .cf-play .triangle {
  width: 0;
  height: 0;
  border-top: calc(var(--play-size) * 0.15) solid transparent;
  border-bottom: calc(var(--play-size) * 0.15) solid transparent;
  border-left: calc(var(--play-size) * 0.23) solid var(--play-icon);
  margin-left: calc(var(--play-size) * 0.05);
}
.coverflow .cf-slide.is-playing .cf-play {
  opacity: 0;
  pointer-events: none;
}
.coverflow video.cf-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: none;
  border: 0;
}
.coverflow .cf-arrows {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  padding-top: 12px;
}
.coverflow .cf-arrow {
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-radius: 999px;
  background: var(--arrow-bg);
  color: var(--arrow-fg);
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  border: none;
  padding: 0;
}
.coverflow .cf-arrow svg {
  width: 60%;
  height: 60%;
}
.coverflow .cf-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding-top: 16px;
}
.coverflow .cf-dot {
  width: var(--dot-size);
  height: var(--dot-size);
  background: var(--dot-color);
  border-radius: 999px;
  opacity: 0.8;
  cursor: pointer;
  border: none;
  padding: 0;
}
.coverflow .cf-dot.is-active {
  background: var(--dot-active);
  opacity: 1;
}

/* Elementor editor adjustments */
.elementor-editor-active .elementor-widget-container,
.elementor-editor-active .coverflow,
.elementor-editor-active .coverflow .cf-viewport {
  overflow: visible;
}