.sslider-video-gallery {
  width: 100%;
  overflow-x: unset;
  overflow-y: unset;
  scrollbar-width: none;
  text-align: left;
  padding: 20px 0 40px;
  mask-image: unset;
}
.sslider-video-gallery::-webkit-scrollbar {
  display: none;
}

/* --- Video coverflow stage --- */
.svg-stage {
  --svg-w: min(64vw, 280px);
  position: relative;
  width: 100%;
  height: calc(var(--svg-w) * 16 / 9 + 60px);
  overflow-x: clip;
  overflow-y: visible;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.sslider-video-gallery.is-visible .svg-stage {
  opacity: 1;
  transform: none;
}
.svg-track {
  position: absolute;
  inset: -40px 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.svg-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--svg-w);
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  background: #0e1f33;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 50px -22px rgba(8, 20, 31, 0.5);
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease, opacity 0.6s ease,
    scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s ease;
  will-change: transform, filter;
}
.svg-card.is-active {
  border-color: rgba(255, 255, 255, 0.85);
}
.svg-card.is-active:hover {
  scale: 1.04;
}
.svg-card:not(.is-active) .svg-card__play {
  opacity: 0;
  scale: 0.6;
}

.svg-arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(14, 31, 51, 0.72);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.25s ease, color 0.25s ease, scale 0.25s ease;
}
.svg-arrow:hover {
  background: #ffb800;
  color: #0e1f33;
  scale: 1.08;
}
.svg-arrow--prev {
  left: calc(50% - var(--svg-w) * 0.57 - 19px);
}
.svg-arrow--next {
  left: calc(50% + var(--svg-w) * 0.57 - 19px);
}

.svg-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.svg-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(14, 31, 51, 0.25);
  cursor: pointer;
  transition: width 0.35s ease, background 0.35s ease;
}
.svg-dot.is-active {
  width: 24px;
  background: #ffb800;
}

.svg-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svg-card__thumb--blank {
  background: linear-gradient(135deg, #1a2a3a, #0e1f33);
}

.svg-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 184, 0, 0.92);
  color: #0e1f33;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.25s ease, background 0.25s ease, opacity 0.35s ease, scale 0.35s ease;
}
.svg-card__play::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 184, 0, 0.55);
  animation: svgPulse 2.6s ease-out infinite;
}
.svg-card:hover .svg-card__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: #ffb800;
}
.svg-card:hover .svg-card__play::before {
  animation-play-state: paused;
  opacity: 0;
}
.svg-card__play svg {
  margin-left: 3px; /* optical centering for the play triangle */
}

@keyframes svgPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Live first-frame preview for uploaded files with no chosen thumbnail. */
.svg-card__preview {
  background: #0e1f33;
}

@media (prefers-reduced-motion: reduce) {
  .svg-card,
  .svg-stage {
    transition: opacity 0.4s ease;
  }
  .svg-card__play::before {
    animation: none;
    display: none;
  }
}

/* --- Player overlay --- */
.svg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 20, 31, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  padding: 5vh 4vw;
}
.svg-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.svg-lightbox__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 88vh;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.svg-lightbox__inner video {
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
}
.svg-lightbox__inner iframe {
  display: block;
  width: min(90vw, 1040px);
  height: min(50.6vw, 585px); /* 16:9 for platform embeds */
  border: 0;
}
.svg-lightbox__inner iframe.is-vertical {
  width: min(90vw, calc(88vh * 9 / 16));
  height: min(88vh, calc(90vw * 16 / 9));
}
.svg-lightbox__close {
  position: absolute;
  top: -50px;
  right: 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.svg-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 600px) {
  .svg-lightbox__close {
    top: 8px;
    right: 8px;
  }
}

/* --- Theme-proof arrow + dot reset (themes/Elementor style every <button> globally) --- */
.sslider-video-gallery .svg-arrow,
.sslider-video-gallery .svg-arrow:hover,
.sslider-video-gallery .svg-arrow:focus,
.sslider-video-gallery .svg-arrow:active {
  width: 38px !important;
  height: 38px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -19px 0 0 !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 1 !important;
  font-size: 0 !important;
  text-transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sslider-video-gallery .svg-arrow {
  background: rgba(14, 31, 51, 0.72) !important;
  color: #fff !important;
}
.sslider-video-gallery .svg-arrow:hover,
.sslider-video-gallery .svg-arrow:focus-visible {
  background: #ffb800 !important;
  color: #0e1f33 !important;
}
.sslider-video-gallery .svg-arrow svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
}

.sslider-video-gallery .svg-dot,
.sslider-video-gallery .svg-dot:hover,
.sslider-video-gallery .svg-dot:focus,
.sslider-video-gallery .svg-dot:active {
  width: 7px !important;
  height: 7px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background: rgba(14, 31, 51, 0.25) !important;
}
.sslider-video-gallery .svg-dot:hover {
  background: rgba(14, 31, 51, 0.45) !important;
}
.sslider-video-gallery .svg-dot.is-active,
.sslider-video-gallery .svg-dot.is-active:hover {
  width: 24px !important;
  background: #ffb800 !important;
}
.sslider-video-gallery .svg-card__play svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
}