/* === СЛАЙДЕР (миниатюры) === */
.video-slider-wrapper { position: relative; width: 100%; overflow: hidden; margin-bottom: 40px; }
.video-list { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 0; margin: 0; }
.video-list::-webkit-scrollbar { display: none; }
.video-item { flex: 0 0 calc(100% / 5.5); max-width: calc(100% / 5.5); position: relative; }
@media (max-width:1400px) { .video-item { flex:0 0 calc(100% / 4.5); max-width:calc(100% / 4.5); } }
@media (max-width:992px)  { .video-item { flex:0 0 calc(100% / 3.5); max-width:calc(100% / 3.5); } }
@media (max-width:576px)  { .video-item { flex:0 0 calc(100% / 2.5); max-width:calc(100% / 2.5); } }

.video-item .thumb-wrapper { position: relative; border-radius: 8px; overflow: hidden; }
.video-item img           { display: block; width: 100%; height: auto; object-fit: cover; }

.video-item .overlay-header {
  position: absolute; top: 8px; left: 8px;
  display: flex; align-items: center;
  background: rgba(0,0,0,0.4); border-radius: 16px; padding: 2px 6px;
}
.overlay-header .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background-size: cover; background-position: center; margin-right: 6px;
}
.overlay-header .story-name { font-size: .9rem; color: #fff; white-space: nowrap; }

.video-item .play-overlay {
  position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:40px; height:40px; background: rgba(255,255,255,0.8);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.play-overlay svg { width:16px; height:16px; fill:#333; }

.video-item .caption {
  position:absolute; bottom:8px; left:8px; right:8px;
  background: rgba(0,0,0,0.4); color:#fff;
  font-size:.85rem; border-radius:4px; padding:4px 6px;
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* === СТРЕЛКИ МИНИ-СЛАЙДЕРА === */
.slider-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; background: rgba(255,255,255,0.8);
  border:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:28px; color:#333; cursor:pointer; z-index:10;
}
.slider-btn.prev { left:8px; }
.slider-btn.next { right:8px; }
.slider-btn:hover { background: rgba(255,255,255,0.95); }
@media (max-width:576px) { .slider-btn { display:none; } }

/* === МОДАЛЬНОЕ ОКНО === */
.video-modal {
  display:none; position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.8); align-items:center; justify-content:center;
  z-index:10000; overflow:hidden;
}
.video-modal.active { display:flex; }

.video-modal .modal-header {
  position:absolute; top:32px; left:32px;
  display:flex; align-items:center; gap:12px;
  background:rgba(0,0,0,0.4); border-radius:24px; padding:10px 14px;
  z-index:10002;
}
.video-modal .modal-header .avatar {
  width:56px; height:56px; border-radius:50%;
  background-size:cover; background-position:center;
}
.video-modal .modal-header .modal-meta .name {
  font-size:1.25rem; color:#fff; font-weight:600;
}
.video-modal .modal-header .modal-meta .description {
  font-size:.85rem; color:#fff; margin-top:4px;
}
.video-modal .close-btn {
  position:absolute; top:16px; right:16px;
  font-size:32px; color:#fff; cursor:pointer; z-index:10002;
}
.video-modal .modal-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:36px; color:#fff; cursor:pointer; z-index:10002; padding:8px;
}
.modal-arrow.prev { left:24px; }
.modal-arrow.next { right:24px; }
.video-modal .modal-progress {
  position:absolute; top:0; left:0; width:100%; height:3px;
  background:rgba(255,255,255,0.3); border-radius:2px; overflow:hidden; z-index:10003;
}
.video-modal .modal-progress-bar {
  width:0; height:100%; background:#fff;
  transition:width 0.5s ease-in-out; will-change:width;
}

/* === МОБИЛЬНАЯ КАРУСЕЛЬ === */
.modal-slider  { width:100%; height:100%; position:relative; touch-action:pan-y; overflow:hidden; background:#000; }
.modal-track   { display:flex; height:100%; will-change:transform; transition:transform 0.3s ease; }
.modal-slide   { flex:0 0 100%; width:100%; height:100%; position:relative; background:#000; }
.modal-slide video { width:100%; height:100%; object-fit:cover; }
@media (max-width:576px) {
  .video-modal > video      { display:none !important; }
  .video-modal .modal-arrow { display:none; }
}

/* === SWIPE HINT (только на мобилках) === */
@media (max-width:576px) {
  @keyframes hintFade {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes hintSway {
    0%,100% { transform: translate(-50%,-50%) translateX(0); }
    25%     { transform: translate(-50%,-50%) translateX(-15%); }
    75%     { transform: translate(-50%,-50%) translateX(15%); }
  }

  .swipe-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    animation:
      hintFade 3s ease-in-out forwards,
      hintSway 3s ease-in-out forwards;
    z-index: 10005;
  }
  .swipe-hint img {
    display: block;
    width: 80px;
    height: auto;
  }
}