/* ============================================================
   VIPER PLAY — New Features CSS
   Skeleton Loading | Poster Fallback | Favorites | Playback |
   Auto-Next Overlay | Continue Watching | Detail Page
   ============================================================ */

/* ------ LAZY LOADING ------ */
img[loading="lazy"] { opacity:0; transition:opacity .35s ease; }
img[loading="lazy"].vp-loaded, img.vp-loaded { opacity:1; }

/* ------ SKELETON SHIMMER ------ */
.vp-skeleton {
    position:relative;
    overflow:hidden;
    background:#1a1a1a;
    border-radius:6px;
}
.vp-skeleton::after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.04) 50%,transparent 100%);
    animation:vp-shimmer 1.5s infinite;
}
@keyframes vp-shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

.vp-skeleton-card { height:390px; margin-bottom:15px; }
.vp-skeleton-text { height:16px; width:70%; margin:8px 0; border-radius:4px; }
.vp-skeleton-text-sm { height:12px; width:50%; border-radius:4px; }
.vp-skeleton-hero { height:420px; }

/* ------ POSTER FALLBACK ------ */
.vp-poster-wrap { position:relative; overflow:hidden; background:#1a1a1a; border-radius:4px; }
.vp-poster-wrap img { width:100%; height:390px; object-fit:cover; display:block; }
.vp-poster-fallback {
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);
    color:rgba(255,255,255,0.6);
    padding:20px; text-align:center;
}
.vp-poster-fallback i { font-size:48px; margin-bottom:12px; opacity:0.4; }
.vp-poster-fallback span { font-size:13px; line-height:1.3; word-break:break-word; }

/* ------ FAVORITE BUTTON ------ */
.vp-fav-btn {
    background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.15);
    color:#fff; border-radius:50%; width:36px; height:36px;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .2s; font-size:16px;
    padding:0; line-height:1; position:relative; z-index:5;
}
.vp-fav-btn:hover { background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.3); }
.vp-fav-btn.is-fav { color:#e50914; border-color:rgba(229,9,20,0.4); }
.vp-fav-btn.is-fav .fa-heart-o::before { content:'\f004'; } /* filled heart */

.vp-fav-big {
    width:44px; height:44px; font-size:20px;
    background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.2);
}

/* Favorite overlay on cards */
.vp-card-fav {
    position:absolute; top:8px; right:8px; z-index:10;
}

/* ------ CONTINUE WATCHING SECTION ------ */
.vp-cw-section { margin-bottom:30px; }
.vp-cw-section h2 { font-size:20px; margin-bottom:16px; }
.vp-cw-scroll {
    display:flex; gap:15px; overflow-x:auto; overflow-y:hidden;
    padding-bottom:10px; scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
}
.vp-cw-scroll::-webkit-scrollbar { height:4px; }
.vp-cw-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:2px; }
.vp-cw-card {
    flex:0 0 220px; position:relative; cursor:pointer;
    border-radius:8px; overflow:hidden; background:#1a1a1a;
    transition:transform .2s, box-shadow .2s;
}
.vp-cw-card:hover { transform:scale(1.04); box-shadow:0 6px 24px rgba(0,0,0,0.5); }
.vp-cw-card img { width:220px; height:130px; object-fit:cover; display:block; }
.vp-cw-info { padding:10px 12px; }
.vp-cw-title { font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vp-cw-meta { font-size:11px; color:rgba(255,255,255,0.5); margin-top:3px; }
.vp-cw-bar { height:3px; background:rgba(255,255,255,0.1); border-radius:2px; margin-top:6px; overflow:hidden; }
.vp-cw-bar-fill { height:100%; background:#e50914; border-radius:2px; transition:width .3s; }
.vp-cw-play-icon {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-70%);
    width:44px; height:44px; border-radius:50%;
    background:rgba(0,0,0,0.65); display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .2s; color:#fff; font-size:18px;
}
.vp-cw-card:hover .vp-cw-play-icon { opacity:1; }

/* ------ AUTO-NEXT OVERLAY ------ */
.vp-autonext {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;
    background:rgba(20,20,20,0.92); border:1px solid rgba(255,255,255,0.12);
    border-radius:12px; padding:16px 20px; min-width:280px; max-width:360px;
    color:#fff; box-shadow:0 8px 32px rgba(0,0,0,0.6);
    animation:vp-slidein .3s ease-out;
    backdrop-filter:blur(8px);
}
@keyframes vp-slidein { from{opacity:0;transform:translate(-50%,-44%)} to{opacity:1;transform:translate(-50%,-50%)} }

.vp-autonext-title { font-size:12px; text-transform:uppercase; letter-spacing:0.5px; opacity:0.6; margin-bottom:6px; }
.vp-autonext-ep { font-size:15px; font-weight:600; margin-bottom:12px; line-height:1.3; }
.vp-autonext-bar { height:3px; background:rgba(255,255,255,0.15); border-radius:2px; margin-bottom:14px; overflow:hidden; }
.vp-autonext-bar-fill { height:100%; background:#e50914; border-radius:2px; transition:width 1s linear; }
.vp-autonext-btns { display:flex; gap:10px; }
.vp-autonext-btns .btn-an-play {
    flex:1; background:#e50914; color:#fff; border:none; border-radius:8px;
    padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer;
    transition:background .2s;
}
.vp-autonext-btns .btn-an-play:hover { background:#c40812; }
.vp-autonext-btns .btn-an-cancel {
    background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.15);
    border-radius:8px; padding:9px 16px; font-size:13px; cursor:pointer;
    transition:background .2s;
}
.vp-autonext-btns .btn-an-cancel:hover { background:rgba(255,255,255,0.18); }

/* Serie completed message */
.vp-autonext-completed { text-align:center; }
.vp-autonext-completed i { font-size:32px; color:#4caf50; margin-bottom:10px; display:block; }

/* ------ MOVIE DETAIL PAGE (v3 — Info Left + Player Right) ------ */

/* Main two-column layout */
.vp-movie-layout {
    display:flex; gap:0; padding:24px 0 0;
    min-height:480px;
}
.vp-movie-col-info {
    flex:0 0 42%; max-width:42%; padding:0 30px 0 0;
    display:flex; flex-direction:column; justify-content:center;
}
.vp-movie-col-player {
    flex:1; min-width:0; position:relative;
    display:flex; align-items:center;
}

/* Title */
.vp-movie-title {
    font-size:34px; font-weight:700; color:#fff; line-height:1.1;
    margin:0 0 14px; letter-spacing:-0.3px;
}

/* Meta line: stars + rating + year + duration + genre */
.vp-movie-meta {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    font-size:13px; color:rgba(255,255,255,0.55); margin-bottom:18px;
}
.vp-movie-meta span { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.vp-movie-meta .vp-stars { color:#f5c518; font-size:13px; letter-spacing:-1px; }
.vp-movie-meta .vp-rating-num { color:#f5c518; font-weight:700; font-size:14px; }
.vp-movie-meta .vp-separator { color:rgba(255,255,255,0.2); }

/* Info rows: Elenco, Diretor */
.vp-movie-info-row {
    font-size:13px; color:rgba(255,255,255,0.55); margin-bottom:6px; line-height:1.5;
}
.vp-movie-info-row strong { color:rgba(255,255,255,0.4); font-weight:400; }

/* Plot */
.vp-movie-plot {
    font-size:15px; line-height:1.7; color:rgba(255,255,255,0.82);
    margin:18px 0 22px;
}

/* Cast avatars */
.vp-movie-cast-label {
    font-size:12px; color:rgba(255,255,255,0.35); margin-bottom:10px;
}
.vp-cast-avatars { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.vp-cast-avatar {
    display:flex; flex-direction:column; align-items:center; gap:6px; width:64px;
}
.vp-cast-circle {
    width:52px; height:52px; border-radius:50%;
    background:linear-gradient(135deg,rgba(229,9,20,0.3),rgba(255,255,255,0.08));
    border:2px solid rgba(255,255,255,0.1);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:700; color:rgba(255,255,255,0.8);
    text-transform:uppercase; letter-spacing:0.5px;
    transition:border-color .2s, transform .2s;
}
.vp-cast-avatar:hover .vp-cast-circle { border-color:rgba(229,9,20,0.5); transform:scale(1.08); }
.vp-cast-name {
    font-size:10px; color:rgba(255,255,255,0.5); text-align:center;
    line-height:1.2; max-width:64px; overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

/* Action buttons row */
.vp-movie-actions {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;
}
.vp-btn-play {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 24px; border-radius:6px; font-size:14px; font-weight:600;
    background:#fff; color:#000; border:none; cursor:pointer;
    transition:all .2s; text-decoration:none;
}
.vp-btn-play:hover { background:#e0e0e0; color:#000; text-decoration:none; }
.vp-btn-play i { font-size:14px; }
.vp-btn-trailer {
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 20px; border-radius:6px; font-size:13px; font-weight:600;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
    color:#fff; cursor:pointer; transition:all .2s; text-decoration:none;
}
.vp-btn-trailer:hover { background:rgba(255,255,255,0.15); color:#fff; text-decoration:none; }
.vp-btn-trailer i { color:#e50914; }
.vp-movie-actions .vp-act-btn {
    width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.04); color:#fff; font-size:16px;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .2s;
}
.vp-movie-actions .vp-act-btn:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3); }

/* Player container inside right column */
.vp-movie-player-box {
    width:100%; border-radius:10px;
    background:#000; position:relative;
    box-shadow:0 8px 40px rgba(0,0,0,0.5);
}
.vp-movie-player-box .embed-responsive {
    border-radius:10px 10px 0 0; margin:0;
}

/* Ensure Clappr/VideoJS fill the embed-responsive container */
/* Bootstrap embed-responsive only positions iframe/video/embed/object — NOT divs */
.embed-responsive > #livevideo,
.embed-responsive > #divPlyr {
    position:absolute; top:0; left:0; width:100%; height:100%;
}
.embed-responsive [data-player],
.embed-responsive [data-player] .container[data-container] { width:100% !important; height:100% !important; margin:0 !important; }
.embed-responsive [data-player] video,
.embed-responsive video { object-fit:fill; }

/* Player tabs below player */
.vp-player-tabs {
    display:inline-flex; background:rgba(255,255,255,0.04); border-radius:6px;
    border:1px solid rgba(255,255,255,0.08); overflow:hidden; margin-top:12px;
}
.vp-player-tab {
    padding:6px 12px; font-size:11px; color:rgba(255,255,255,0.45); text-decoration:none;
    transition:all .2s; border-right:1px solid rgba(255,255,255,0.06); cursor:pointer;
    display:inline-flex; align-items:center; gap:3px; white-space:nowrap;
}
.vp-player-tab:last-child { border-right:none; }
.vp-player-tab:hover { color:#fff; background:rgba(255,255,255,0.08); text-decoration:none; }
.vp-player-tab.active { color:#fff; background:#e50914; font-weight:600; }

/* Fullscreen link under player */
.vp-player-controls {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    margin-top:10px; flex-wrap:wrap;
}
.vp-player-fs-link {
    font-size:12px; color:rgba(255,255,255,0.4); cursor:pointer;
    display:inline-flex; align-items:center; gap:4px; transition:color .2s;
}
.vp-player-fs-link:hover { color:#fff; }

/* Suggestions section */
.vp-suggestions {
    padding:30px 0 0;
    border-top:1px solid rgba(255,255,255,0.06);
}
.vp-suggestions-title {
    font-size:20px; font-weight:600; color:#fff; margin-bottom:20px;
    display:flex; align-items:center; gap:10px;
}
.vp-suggestions-title i { color:#e50914; font-size:18px; }

/* Back button */
.vp-btn-back {
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 20px; border-radius:6px; font-size:13px; font-weight:600;
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
    color:rgba(255,255,255,0.6); cursor:pointer; transition:all .2s; text-decoration:none;
}
.vp-btn-back:hover { background:rgba(255,255,255,0.1); color:#fff; text-decoration:none; }

/* Responsive: stack on mobile */
@media (max-width:991px) {
    .vp-movie-layout { flex-direction:column-reverse; gap:24px; min-height:auto; }
    .vp-movie-col-info { flex:none; max-width:100%; padding:0; }
    .vp-movie-col-player { flex:none; width:100%; }
    .vp-movie-title { font-size:26px; }
    .vp-cast-avatars { gap:10px; }
    .vp-cast-avatar { width:56px; }
    .vp-cast-circle { width:44px; height:44px; font-size:14px; }
}
@media (max-width:768px) {
    .vp-movie-title { font-size:22px; }
    .vp-movie-plot { font-size:14px; }
    .vp-movie-actions { gap:8px; }
    .vp-player-tabs { flex-wrap:wrap; }
}

/* Hide old detail hero */
.vp-detail-hero { display:none !important; }

/* ------ CARD HOVER ENHANCEMENT ------ */
.post.post-medium { transition:transform .2s, box-shadow .2s; border-radius:6px; overflow:hidden; }
.post.post-medium:hover { transform:scale(1.03); box-shadow:0 6px 20px rgba(0,0,0,0.4); z-index:5; position:relative; }
.thumbr { position:relative; }

/* ------ RESPONSIVE ------ */
@media (max-width:768px) {
    .vp-autonext { top:50%; left:50%; transform:translate(-50%,-50%); min-width:240px; max-width:92vw; }
    .vp-cw-card { flex:0 0 180px; }
    .vp-cw-card img { width:180px; height:100px; }
}


/* Auto-next visível em tela cheia */
:fullscreen .vp-autonext,
:-webkit-full-screen .vp-autonext,
:-moz-full-screen .vp-autonext,
:-ms-fullscreen .vp-autonext {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    z-index: 2147483647;
}

/* =============================================
   EPISODE NAVIGATOR (SPA-style episode switch)
   ============================================= */

/* Overlay prev/next buttons inside video */
.vp-ep-nav {
    position:absolute; top:0; left:0; right:0; bottom:0;
    pointer-events:none; z-index:40;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 8px;
}
.vp-ep-btn {
    pointer-events:auto;
    background:rgba(0,0,0,0.55); border:none; color:#fff;
    width:46px; height:46px; border-radius:50%;
    font-size:17px; cursor:pointer;
    opacity:0; transition:opacity .25s, background .2s;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(4px);
}
.video-embed-box:hover .vp-ep-btn { opacity:0.85; }
.vp-ep-btn:hover { opacity:1 !important; background:rgba(229,9,20,0.85); }
:fullscreen .vp-ep-btn,
:-webkit-full-screen .vp-ep-btn { opacity:0; }
:fullscreen .vp-ep-nav:hover .vp-ep-btn,
:-webkit-full-screen .vp-ep-nav:hover .vp-ep-btn { opacity:0.85; }

/* Episode info bar below player */
.vp-ep-bar {
    display:flex; align-items:center; gap:10px;
    padding:10px 0 6px; flex-wrap:wrap;
}
.vp-ep-bar-btn {
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
    color:#fff; padding:5px 14px; border-radius:4px; cursor:pointer;
    font-size:13px; transition:background .2s;
}
.vp-ep-bar-btn:hover:not(:disabled) { background:rgba(229,9,20,0.7); border-color:rgba(229,9,20,0.7); }
.vp-ep-bar-btn:disabled { opacity:0.25; cursor:not-allowed; }
.vp-ep-bar-btn i { margin-right:4px; }
.vp-ep-label {
    flex:1; font-size:15px; font-weight:600; color:#fff;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    min-width:0;
}
.vp-ep-label small { font-weight:400; opacity:0.6; font-size:12px; margin-left:6px; }

/* Smooth source switch: brief fade */
.vp-ep-switching { opacity:0.5; transition:opacity .3s; }
.vp-ep-switching.vp-ep-ready { opacity:1; }

/* Keyboard shortcut hints */
.vp-ep-keys {
    font-size:11px; color:rgba(255,255,255,0.35); padding:2px 0;
}
.vp-ep-keys kbd {
    background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
    border-radius:3px; padding:1px 5px; font-family:inherit; font-size:11px;
}

@media(max-width:767px){
    .vp-ep-btn { width:38px; height:38px; font-size:14px; }
    .vp-ep-bar { gap:6px; }
    .vp-ep-label { font-size:13px; }
}

/* Currently playing episode highlight */
.vp-ep-playing { background:rgba(229,9,20,0.08); border-left:3px solid #e50914; }
.vp-ep-playing .title { color:#e50914 !important; }