/* ==================== SHORTS WATCH PAGE ==================== */

/* ==================== PAGE RESET ==================== */
.shorts-watch-page { background:#000; overflow:hidden; }
.shorts-watch-page footer,
.shorts-watch-page .footer,
.shorts-watch-page #footer { display:none !important; }
.shorts-watch-page .cart-btn { display:none !important; }

/* Hide sidebar-header on shorts-watch page (both mobile & desktop) */
.shorts-watch-page #sidebar-header { display:none !important; }

/* ==================== BACK BUTTON (unified mobile & desktop) ==================== */
.shorts-watch-back-btn {
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:16px; left:16px; z-index:200;
    width:40px; height:40px;
    border-radius:3px;
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:none;
    text-decoration:none;
    transition:background 0.2s, opacity 0.5s ease;
    cursor:pointer;
}
.shorts-watch-back-btn:hover { background:rgba(255,255,255,0.15); }
.shorts-watch-back-btn svg { width:20px; height:20px; }

@media (max-width:768px) {
    .shorts-watch-back-btn {
        width:30px; height:30px;
        top:14px; left:14px;
    }
    .shorts-watch-back-btn svg { width:16px; height:16px; }
}

/* ==================== AUTO HIDE ==================== */
.hideable {
    transition:opacity 0.5s ease !important;
}
.controls-hidden .hideable {
    opacity:0 !important;
    pointer-events:none !important;
}

/* ==================== CONTAINER ==================== */
.shorts-watch-container {
    position:fixed; top:0; left:0; right:0; bottom:0;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; z-index:1;
}

.shorts-watch-viewport {
    position:relative;
    width:100%; height:100%;
    overflow:hidden; z-index:10;
}

/* ==================== SLIDE ==================== */
.watch-slide {
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    transform:translateY(100%);
    transition:transform 0.45s cubic-bezier(0.22,1,0.36,1);
    will-change:transform;
}
.watch-slide.active { transform:translateY(0); }
.watch-slide.above { transform:translateY(-100%); }

/* ==================== VIDEO ==================== */
.watch-video-wrap {
    position:absolute; top:0; left:0; right:0; bottom:0;
    overflow:hidden; background:#000;
}
.watch-video {
    width:100%; height:100%; object-fit:cover;
}
.watch-tap-area {
    position:absolute; top:0; left:0; right:0; bottom:0; z-index:5; cursor:pointer;
}
.watch-play-indicator {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    opacity:0; transition:opacity 0.2s; z-index:6; pointer-events:none;
}
.watch-play-indicator.show { opacity:1; }

.watch-gradient-overlay {
    position:absolute; bottom:0; left:0; right:0;
    height:40%;
    background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 40%, transparent 100%);
    z-index:7; pointer-events:none;
}

/* ==================== PROGRESS ==================== */
.watch-progress {
    position:absolute; bottom:0; left:0; right:0; height:3px;
    background:rgba(255,255,255,0.15); z-index:20;
    transition:opacity 0.5s ease;
}
.watch-progress-fill {
    height:100%; width:0%; background:var(--fenogram-yellow,#FFFF8A);
    transition:width 0.1s linear;
}

/* ==================== EPISODE INFO (Mobile - Bottom Left) ==================== */
.watch-episode-info {
    position:absolute; bottom:18px; left:14px; right:78px;
    z-index:50; color:#fff;
    pointer-events:none;
    transition:opacity 0.5s ease;
}
.watch-show-title {
    font-size:0.95rem; font-weight:700; margin:0 0 3px 0;
    text-shadow:0 1px 6px rgba(0,0,0,0.8);
    line-height:1.2;
}
.watch-episode-label {
    font-size:0.78rem; font-weight:400; margin:0;
    color:rgba(255,255,255,0.7);
    text-shadow:0 1px 4px rgba(0,0,0,0.6);
}

/* ==================== SIDE ACTIONS (Mobile - Right) ==================== */
.watch-actions {
    position:absolute; right:10px; bottom:18px;
    display:flex; flex-direction:column; align-items:center;
    gap:16px; z-index:50;
    pointer-events:auto;
    transition:opacity 0.5s ease;
}
.watch-action-btn {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; color:#fff; cursor:pointer;
    transition:opacity 0.2s;
    pointer-events:auto;
    -webkit-tap-highlight-color:transparent;
}
.watch-action-btn:active { opacity:0.7; }
.watch-action-btn svg { width:28px; height:28px; pointer-events:none; }
.watch-action-label {
    font-size:0.58rem; font-weight:500; color:rgba(255,255,255,0.75);
    letter-spacing:0.2px; pointer-events:none;
}
.watch-like-btn.liked svg { fill:#ff4757; stroke:#ff4757; }

/* ==================== DESKTOP STYLES ==================== */
.shorts-watch-desktop-bg { display:none; }
.shorts-watch-desktop-info { display:none; }
.shorts-watch-desktop-actions { display:none; }
.shorts-watch-nav { display:none; }

@media (min-width:769px) {
    /* Blurred background */
    .shorts-watch-desktop-bg {
        display:block;
        position:fixed; top:0; left:0; right:0; bottom:0;
        z-index:1; overflow:hidden;
    }
    .shorts-watch-bg-poster {
        width:100%; height:100%; object-fit:cover;
        filter:blur(40px) brightness(0.4) saturate(1.3);
        transform:scale(1.2);
    }
    .shorts-watch-bg-gradient-top {
        position:absolute; top:0; left:0; right:0; height:30%;
        background:linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, transparent 100%);
        z-index:2;
    }
    .shorts-watch-bg-gradient-bottom {
        position:absolute; bottom:0; left:0; right:0; height:30%;
        background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
        z-index:2;
    }
    .shorts-watch-bg-overlay {
        position:absolute; top:0; left:0; right:0; bottom:0;
        background:rgba(0,0,0,0.25); z-index:3;
    }

    /* Container */
    .shorts-watch-container { padding:40px 0; }

    /* Desktop viewport: 9:16 */
    .shorts-watch-viewport {
        width:auto; height:calc(100vh - 80px);
        aspect-ratio:9/16;
        max-height:calc(100vh - 80px);
        border-radius:20px;
        overflow:hidden;
        box-shadow:0 20px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
    }
    .watch-video-wrap { border-radius:20px; }
    .watch-video { border-radius:20px; object-fit:cover; }

    /* Hide mobile info/actions on desktop */
    .watch-episode-info { display:none; }
    .watch-actions { display:none; }

    /* Desktop Left: Title Logo + Episode Info */
    .shorts-watch-desktop-info {
        display:flex; flex-direction:column; justify-content:center;
        position:fixed; left:60px; top:50%; transform:translateY(-50%);
        z-index:20; max-width:300px; color:#fff;
        transition:opacity 0.5s ease;
    }
    .desktop-watch-title-logo {
        margin-bottom:12px;
    }
    .desktop-watch-title-logo img {
        max-width:220px; max-height:90px;
        width:auto; height:auto;
        object-fit:contain;
        filter:drop-shadow(0 2px 10px rgba(0,0,0,0.5));
    }
    .desktop-watch-show-title {
        font-size:1.6rem; font-weight:800; margin:0 0 8px 0;
        line-height:1.1; letter-spacing:-0.3px;
    }
    .desktop-watch-episode-label {
        font-size:0.95rem; font-weight:400; margin:0;
        color:rgba(255,255,255,0.6);
    }

    /* Desktop Right: Actions */
    .shorts-watch-desktop-actions {
        display:flex; flex-direction:column; align-items:center;
        gap:20px;
        position:fixed; right:60px; top:50%; transform:translateY(-50%);
        z-index:20;
        transition:opacity 0.5s ease;
    }
    .desktop-watch-action-btn {
        display:flex; flex-direction:column; align-items:center; gap:5px;
        background:none; border:none; color:#fff; cursor:pointer;
        transition:opacity 0.2s, color 0.2s;
        padding:8px;
    }
    .desktop-watch-action-btn svg { width:28px; height:28px; }
    .desktop-watch-action-btn:hover { opacity:0.7; }
    .desktop-watch-action-btn span {
        font-size:0.68rem; font-weight:500; color:rgba(255,255,255,0.65);
        transition:color 0.2s;
    }
    .desktop-watch-action-btn:hover span { color:#fff; }
    .desktop-watch-action-btn.liked svg { fill:#ff4757; stroke:#ff4757; }

    /* Desktop Nav Arrows */
    .shorts-watch-nav {
        display:flex;
        position:fixed; z-index:20;
        width:44px; height:44px; border-radius:50%;
        background:rgba(255,255,255,0.06); backdrop-filter:blur(8px);
        border:1px solid rgba(255,255,255,0.08);
        align-items:center; justify-content:center;
        cursor:pointer; transition:background 0.2s, opacity 0.5s ease;
    }
    .shorts-watch-nav:hover { background:rgba(255,255,255,0.15); }
    .shorts-watch-nav-up { left:50%; margin-left:calc(((100vh - 80px) * 9 / 16) / 2 + 20px); top:calc(50% - 46px); }
    .shorts-watch-nav-down { left:50%; margin-left:calc(((100vh - 80px) * 9 / 16) / 2 + 20px); top:calc(50% + 10px); }
    .shorts-watch-nav.disabled { opacity:0.2; pointer-events:none; }
}

@media (min-width:1200px) {
    .shorts-watch-desktop-info { left:80px; max-width:320px; }
    .shorts-watch-desktop-actions { right:80px; }
}
@media (min-width:1600px) {
    .shorts-watch-desktop-info { left:120px; max-width:380px; }
    .shorts-watch-desktop-actions { right:120px; }
}

/* ==================== MOBILE SMALL ==================== */
@media (max-width:480px) {
    .watch-mobile-header { padding:8px 12px; }
    .watch-back-btn { width:36px; height:36px; }
    .watch-episode-info { bottom:16px; left:12px; right:68px; }
    .watch-actions { right:8px; bottom:16px; gap:12px; }
    .watch-action-btn svg { width:26px; height:26px; }
    .watch-action-label { font-size:0.52rem; }
}

/* ==================== EPISODES MODAL ==================== */
.watch-episodes-modal-overlay {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.5); backdrop-filter:blur(12px);
    z-index:2000; display:none; opacity:0;
    transition:opacity 0.3s ease;
}
.watch-episodes-modal-overlay.show { display:block; opacity:1; }
.watch-episodes-modal-container {
    position:fixed; left:50%; top:50%;
    transform:translate(-50%,-50%) translateY(-20px);
    background:rgba(0,0,0,0.35); backdrop-filter:blur(20px);
    border-radius:3px;
    border:1px solid rgba(128,128,128,0.5);
    border-left:5px solid var(--fenogram-yellow,#FFFF8A);
    padding:35px;
    width:90%; max-width:1200px; max-height:85vh;
    overflow-y:auto; opacity:0; z-index:2001;
}
.watch-episodes-modal-overlay.show .watch-episodes-modal-container {
    animation:watchEpisodesSlideDown 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes watchEpisodesSlideDown {
    to { transform:translate(-50%,-50%) translateY(0); opacity:1; }
}
.watch-episodes-modal-content { position:relative; }
.watch-episodes-close-btn {
    position:fixed; top:30px; right:30px;
    width:50px; height:50px;
    background:none; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.2s; z-index:2002; color:white;
}
.watch-episodes-close-btn:hover { opacity:0.7; transform:rotate(90deg); }
.watch-episodes-modal-header { text-align:center; margin-bottom:30px; }
.watch-episodes-modal-title { font-size:2rem; font-weight:900; color:white; margin:0 0 8px 0; }
.watch-episodes-modal-subtitle { font-size:1rem; font-weight:300; color:rgba(255,255,255,0.6); margin:0; }
.watch-episodes-season-tabs {
    display:flex; gap:12px; margin-bottom:30px;
    padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.1);
    flex-wrap:wrap;
}
.watch-episodes-season-tab {
    padding:10px 20px;
    background:rgba(255,255,255,0.05); border:none;
    border-left:3px solid transparent; border-radius:4px;
    color:white; font-size:0.9rem; font-weight:600;
    cursor:pointer; transition:all 0.2s ease;
    font-family:'Poppins',sans-serif;
}
.watch-episodes-season-tab:hover { background:rgba(255,255,255,0.1); }
.watch-episodes-season-tab.active {
    background:rgba(255,255,138,0.1);
    border-left-color:var(--fenogram-yellow,#FFFF8A);
}
.watch-episodes-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.watch-episodes-grid .episode-card {
    background:rgba(30,30,30,0.8);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:5px; overflow:hidden; cursor:pointer;
    transition:all 0.2s ease; text-decoration:none;
    color:white; display:block;
}
.watch-episodes-grid .episode-card:hover { border-color:rgba(255,255,138,0.4); }
.episode-thumbnail {
    position:relative; width:100%; padding-top:177.78%;
    background:#1a1a1a; overflow:hidden;
}
.episode-thumbnail video {
    position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
}
.episode-play-icon {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:50px; height:35px; background:rgba(0,0,0,0.7);
    border-radius:6px; display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(8px);
}
.episode-play-icon img { width:16px; height:16px; }
.episode-info { padding:12px; }
.episode-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.episode-header h4 { font-size:0.9rem; font-weight:600; margin:0; color:white; }
.episode-header span { font-size:0.85rem; color:rgba(255,255,255,0.5); }
.episode-title { font-size:0.85rem; color:rgba(255,255,255,0.7); margin:0; }

@media (max-width:768px) {
    .watch-episodes-modal-container { padding:30px 20px; width:95%; }
    .watch-episodes-modal-title { font-size:1.5rem; }
    .watch-episodes-season-tabs { gap:8px; justify-content:center; }
    .watch-episodes-season-tab { padding:8px 16px; font-size:0.85rem; }
    .watch-episodes-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .episode-info { padding:6px; }
    .episode-header h4 { font-size:0.7rem; }
    .episode-header span { font-size:0.65rem; }
    .episode-title { font-size:0.65rem; line-height:1.3; }
    .episode-play-icon { width:35px; height:24px; }
    .episode-play-icon img { width:12px; height:12px; }
    .watch-episodes-close-btn { top:15px; right:15px; width:40px; height:40px; }
    .watch-episodes-close-btn svg { width:20px; height:20px; }
}

/* ==================== PANELS (Speed, Subtitle, Dubbing) ==================== */
.watch-speed-panel,
.watch-sub-panel,
.watch-dub-panel {
    position:fixed; bottom:0; left:50%; transform:translateX(-50%) translateY(100%);
    z-index:1500;
    background:rgba(0,0,0,0.6); backdrop-filter:blur(20px);
    border:1px solid rgba(128,128,128,0.4);
    border-bottom:none;
    border-radius:16px 16px 0 0;
    padding:24px 30px 30px;
    min-width:280px;
    opacity:0;
    transition:transform 0.35s cubic-bezier(0.22,1,0.36,1), opacity 0.35s ease;
}
.watch-speed-panel.show,
.watch-sub-panel.show,
.watch-dub-panel.show {
    transform:translateX(-50%) translateY(0);
    opacity:1;
}
.watch-speed-panel-content h4,
.watch-sub-panel-content h4,
.watch-dub-panel-content h4 {
    color:rgba(255,255,255,0.5); font-size:0.75rem; font-weight:600;
    text-transform:uppercase; letter-spacing:1px;
    margin:0 0 16px 0;
}
.watch-speed-option,
.watch-sub-option,
.watch-dub-option {
    display:block; width:100%;
    padding:12px 16px; margin-bottom:4px;
    background:none; border:none; border-left:3px solid transparent;
    color:rgba(255,255,255,0.7); font-size:0.9rem; font-weight:500;
    cursor:pointer; text-align:left; border-radius:4px;
    transition:all 0.15s; font-family:'Poppins',sans-serif;
}
.watch-speed-option:hover,
.watch-sub-option:hover,
.watch-dub-option:hover {
    background:rgba(255,255,255,0.06); color:#fff;
}
.watch-speed-option.active,
.watch-sub-option.active,
.watch-dub-option.active {
    background:rgba(255,255,138,0.1);
    border-left-color:var(--fenogram-yellow,#FFFF8A);
    color:#fff; font-weight:600;
}

@media (max-width:768px) {
    .watch-speed-panel,
    .watch-sub-panel,
    .watch-dub-panel {
        min-width:auto; width:100%; left:0; transform:translateX(0) translateY(100%);
        border-radius:16px 16px 0 0;
    }
    .watch-speed-panel.show,
    .watch-sub-panel.show,
    .watch-dub-panel.show {
        transform:translateX(0) translateY(0);
    }
}