/* MyZinky custom styles — supplements Bootstrap 5 */

body { background: #f8f9fa; }

/* Video card */
.video-card { transition: transform .15s ease, box-shadow .15s ease; }
.video-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.video-card .card-img-top { object-fit: cover; height: 140px; background: #1a1a2e; }
.video-thumb-placeholder { height: 140px; background: #1a1a2e; display: flex; align-items: center; justify-content: center; }
.video-thumb-placeholder i { font-size: 2.5rem; color: #444; }

/* Video player page */
#player-wrapper video { width: 100%; max-height: 70vh; background: #000; border-radius: 4px; }

/* Thumbnail strip */
#thumb-strip { display: flex; gap: 4px; overflow-x: auto; padding: 6px 0; scroll-snap-type: x mandatory; }
#thumb-strip img { height: 56px; width: 80px; object-fit: cover; border-radius: 3px; cursor: pointer; flex-shrink: 0; scroll-snap-align: start; opacity: .75; transition: opacity .15s, outline .15s; }
#thumb-strip img:hover { opacity: 1; outline: 2px solid #0d6efd; }

/* Scene list */
#scene-list { max-height: calc(100vh - 220px); overflow-y: auto; }
.scene-item { border-left: 3px solid transparent; transition: border-color .15s; }
.scene-item:hover { border-left-color: #0d6efd; }
.scene-item .scene-time { font-size: .75rem; font-weight: 600; color: #0d6efd; cursor: pointer; }
.scene-item .scene-time:hover { text-decoration: underline; }

/* Duration badge */
.badge-duration { font-size: .7rem; font-weight: 500; }

/* Navbar active */
.nav-link.active { color: #fff !important; }