/* Smart Video Lite — bright playback */
.svideo-gallery.grid { display:grid; gap:16px; }
.svideo-item { position:relative; max-width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000; }
.svideo-item .svideo-el { width:100%; height:100%; display:block; object-fit:cover; background:#000; filter:none!important; opacity:1!important; }
.svideo-item:hover .svideo-el { filter:none!important; opacity:1!important; }
.svideo-gallery-overlay { display:none; }
.svideo-gallery-overlay.active { display:flex; position:absolute; inset:0; align-items:center; justify-content:center; background:rgba(0,0,0,.35); color:#fff; pointer-events:none;}
.svideo-gallery-caption { margin-top:8px; font-size:14px; color:#333; }
:fullscreen .svideo-el, video:fullscreen { filter:none!important; opacity:1!important; background:#000!important; }
.svideo-item video::-webkit-media-controls { background:transparent!important; }
.svideo-item video::-webkit-media-controls-panel { background:transparent!important; }
.svideo-item video::-webkit-media-controls-enclosure { background:transparent!important; box-shadow:none!important; }
/* Playlist */
.svideo-gallery.playlist { display:grid; grid-template-columns:1fr 280px; gap:16px; }
.svideo-gallery.playlist .svideo-playlist-list { overflow-y:auto; max-height:70vh; border-left:1px solid #eee; padding-left:12px; }
.svideo-gallery.playlist .svideo-gallery-item { display:none; }
.svideo-gallery.playlist .svideo-gallery-item.active { display:block; }
.svideo-gallery.playlist .svideo-playlist-item { display:flex; gap:8px; align-items:center; cursor:pointer; padding:6px 4px; border-radius:8px; }
.svideo-gallery.playlist .svideo-playlist-item.active { background:#f5f5f5; }
/* Stories */
.svideo-gallery.stories { display:grid; grid-auto-rows:1fr; gap:16px; scroll-snap-type:y mandatory; max-height:90vh; overflow-y:auto; }
.svideo-gallery.stories .svideo-gallery-item { scroll-snap-align:start; }
.svideo-gallery.stories .svideo-item { aspect-ratio:9/16; }
/* Slider */
.svideo-gallery.slider { position:relative; }
.svideo-gallery.slider .svideo-gallery-item { display:none; }
.svideo-gallery.slider .svideo-gallery-item.active { display:block; }
.svideo-slider-nav { position:absolute; top:50%; transform:translateY(-50%); display:flex; gap:8px; width:100%; justify-content:space-between; pointer-events:none; }
.svideo-slider-nav button { pointer-events:auto; border:none; border-radius:999px; padding:10px 14px; background:rgba(0,0,0,.45); color:#fff; font-weight:600; }
/* === Slider: move nav below the video and center it === */
.svideo-gallery.slider .svideo-slider-nav {
  position: static;            /* was absolute over the video */
  transform: none;
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
  pointer-events: auto;
}
.svideo-gallery.slider .svideo-slider-nav button {
  background: #222;            /* subtle, not overlay */
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 600;
}

/* Optional: small center indicator “1/3” */
.svideo-slider-indicator {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  background: #2a2a2a;
  color: #fff;
}

/* === Mobile: show ONE video, 70–80% width, centered === */
@media (max-width: 767px) {
  .svideo-gallery.slider .svideo-item {
    width: 80vw;          /* 70–80% looks nice; change to 70vw if you like */
    margin: 0 auto;
    border-radius: 14px;
  }

  /* If you don’t want the buttons on mobile, hide them: */
  .svideo-gallery.slider .svideo-slider-nav button {
    display: none;
  }

  /* Keep only the small indicator below, centered */
  .svideo-gallery.slider .svideo-slider-nav {
    gap: 0;
  }
}

/* === Desktop playlist look: make main video larger, thumbs narrow === */
@media (min-width: 992px) {
  .svideo-gallery.playlist {
    grid-template-columns: 1fr 320px; /* main video big, right column for thumbs */
  }
  .svideo-gallery.playlist .svideo-playlist-item {
    padding: 6px 8px;
  }
}