/* ==================== SHORTS PAGE - V2 ==================== */

/* ==================== PAGE RESET ==================== */
.shorts-page { background:#000; overflow:hidden; }
.shorts-page #sidebar-header { 
    position:fixed; top:0; left:0; right:0; z-index:200;
    background:linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}
/* Hide footer on shorts page */
.shorts-page footer,
.shorts-page .footer,
.shorts-page #footer { display:none !important; }

/* Hide cart button on mobile for shorts page (already in header) */
@media (max-width: 768px) {
    .shorts-page .cart-btn { display:none !important; }
}

/* Show cart button on desktop for shorts page */
@media (min-width: 769px) {
    .shorts-page .cart-btn { display:flex !important; }
}

/* Shorts page: show normal sidebar header on mobile */
@media (max-width: 768px) {
    .shorts-page #sidebar-header {
        background:linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
    }
    
    .shorts-page #sidebar-header .nav-icons {
        display:flex !important;
        margin-left:auto;
        gap:14px;
    }
    .shorts-page #sidebar-header .nav-icon {
        display:flex !important;
        cursor:pointer;
        pointer-events:auto;
        z-index:300;
    }
}

/* ==================== CONTAINER ==================== */
.shorts-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-viewport {
    position:relative;
    width:100%; height:100%;
    overflow:hidden; z-index:10;
}

/* ==================== SLIDE ==================== */
.short-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;
}
.short-slide.active { transform:translateY(0); }
.short-slide.above { transform:translateY(-100%); }

/* ==================== VIDEO ==================== */
.short-video-wrap {
    position:absolute; top:0; left:0; right:0; bottom:0;
    overflow:hidden; background:#000;
}
.short-video {
    width:100%; height:100%; object-fit:cover;
}

.short-tap-area {
    position:absolute; top:0; height:100%; width:50%; z-index:5; cursor:pointer;
}
.short-tap-left { left:0; }
.short-tap-right { right:0; }

.short-play-indicator {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    opacity:0; transition:opacity 0.2s; z-index:6; pointer-events:none;
}
.short-play-indicator.show { opacity:1; }

/* Bottom gradient overlay */
.short-gradient-overlay {
    position:absolute; bottom:0; left:0; right:0;
    height:55%;
    background:linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,0.15) 55%, transparent 100%);
    z-index:7; pointer-events:none;
    transition:all 0.5s ease;
}
.short-slide.desc-expanded .short-gradient-overlay {
    height:80%;
    background:linear-gradient(to top, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.9) 35%, rgba(0,0,0,0.5) 65%, transparent 100%);
}

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

/* ==================== TITLE LOGO (project name image) ==================== */
.short-title-logo {
    margin-bottom:6px;
}
.short-title-logo img {
    max-width:200px; max-height:80px;
    width:auto; height:auto;
    object-fit:contain;
    filter:drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

/* ==================== BOTTOM INFO (Mobile) ==================== */
.short-info {
    position:absolute; bottom:18px; left:14px; right:78px;
    z-index:50; color:#fff;
    transition:bottom 0.4s cubic-bezier(0.22,1,0.36,1);
    pointer-events:auto;
}

.short-title {
    font-size:0.85rem; font-weight:600; margin-bottom:6px;
    text-shadow:0 1px 4px rgba(0,0,0,0.7);
    line-height:1.2;
    display:none; /* Hidden when title logo is present */
}

/* Genre tags - prominent with blur background */
.short-tags {
    display:flex; flex-wrap:wrap; gap:5px; margin-bottom:7px;
}
.short-tag {
    padding:5px 13px;
    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.25);
    border-radius:4px;
    font-size:0.76rem; font-weight:500;
    color:rgba(255,255,255,0.95);
    line-height:1.3;
}

/* Description */
.short-desc {
    font-size:0.8rem; font-weight:300; color:rgba(255,255,255,0.8);
    line-height:1.5;
    transition:all 0.3s ease;
    position:relative;
}
.short-desc-text { display:inline; }
.short-desc-text.truncated { }
.short-more {
    color:#fff; cursor:pointer; font-weight:700; display:inline;
    pointer-events:auto;
    padding:2px 4px;
    -webkit-tap-highlight-color:transparent;
}

/* ==================== DEVAMINI IZLE BUTTON (Mobile - small, below desc) ==================== */
.short-watch-full {
    margin-top:8px;
    opacity:0; max-height:0; overflow:hidden;
    transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
    pointer-events:none;
}
.short-watch-full.visible {
    opacity:1; max-height:50px;
    pointer-events:all;
}
.short-watch-full-btn {
    display:flex; align-items:center; justify-content:center; gap:6px;
    width:100%;
    padding:7px 16px;
    background:rgba(255,255,138,0.1);
    backdrop-filter:blur(12px);
    border:none; border-left:3px solid var(--fenogram-yellow,#FFFF8A);
    border-radius:3px;
    color:#f5f5f5; font-size:0.8rem; font-weight:600;
    text-decoration:none;
    font-family:'Poppins',sans-serif;
    transition:background 0.2s;
    white-space:nowrap;
}
.short-watch-full-btn:hover { background:rgba(255,255,138,0.18); }

/* ==================== SIDE ACTIONS (Mobile - fixed bottom-right, BIGGER) ==================== */
.short-actions {
    position:absolute; right:10px; bottom:18px;
    display:flex; flex-direction:column; align-items:center;
    gap:18px; z-index:50;
    pointer-events:auto;
}
.short-action-btn {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    background:none; border:none; color:#fff; cursor:pointer;
    transition:opacity 0.2s;
    pointer-events:auto;
    -webkit-tap-highlight-color:transparent;
}
.short-action-btn:active { opacity:0.7; }
.short-action-btn svg { width:32px; height:32px; pointer-events:none; }
.short-action-label {
    font-size:0.65rem; font-weight:600; color:rgba(255,255,255,0.85);
    letter-spacing:0.3px; pointer-events:none;
}
.short-like-btn.liked svg { fill:#ff4757; stroke:#ff4757; }
.short-save-btn.saved svg { fill:var(--fenogram-yellow,#FFFF8A); stroke:var(--fenogram-yellow,#FFFF8A); }

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

@media (min-width:769px) {
    /* Show sidebar header on desktop for shorts page */
    .shorts-page #sidebar-header { 
        display:flex !important;
        position:fixed; top:0; left:0; right:0; z-index:200;
        background:linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    }
    .shorts-desktop-back { display:none !important; }

    /* Blurred background */
    .shorts-desktop-bg {
        display:block;
        position:fixed; top:0; left:0; right:0; bottom:0;
        z-index:1; overflow:hidden;
    }
    .shorts-bg-poster {
        width:100%; height:100%; object-fit:cover;
        filter:blur(40px) brightness(0.4) saturate(1.3);
        transform:scale(1.2);
    }
    .shorts-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-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-bg-overlay {
        position:absolute; top:0; left:0; right:0; bottom:0;
        background:rgba(0,0,0,0.25); z-index:3;
    }

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

    /* Desktop viewport: 9:16 aspect ratio */
    .shorts-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);
    }

    .short-video-wrap { border-radius:20px; }
    .short-video { border-radius:20px; object-fit:cover; }

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

    /* Desktop Left Info */
    .shorts-desktop-info {
        display:flex; flex-direction:column;
        position:fixed; left:60px; top:50%; transform:translateY(-50%);
        z-index:20; max-width:320px; color:#fff;
    }
    .desktop-title-logo { margin-bottom:12px; }
    .desktop-title-logo img {
        max-width:220px; max-height:90px; object-fit:contain;
        filter:drop-shadow(0 2px 10px rgba(0,0,0,0.5));
    }
    .desktop-short-title {
        font-size:1.8rem; font-weight:900; margin-bottom:12px;
        line-height:1.1; letter-spacing:-0.5px;
    }
    .desktop-short-tags {
        display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;
    }
    .desktop-short-desc {
        font-size:0.9rem; font-weight:300; color:rgba(255,255,255,0.75);
        line-height:1.7; margin-bottom:24px;
    }
    .desktop-watch-full-btn {
        display:inline-flex; align-items:center; gap:10px;
        height:46px; padding:0 24px;
        background:rgba(255,255,138,0.08);
        border:none; border-left:4px solid var(--fenogram-yellow,#FFFF8A);
        border-radius:3px;
        color:#f5f5f5; font-size:0.9rem; font-weight:600;
        text-decoration:none; font-family:'Poppins',sans-serif;
        transition:background 0.2s; width:fit-content;
    }
    .desktop-watch-full-btn:hover { background:rgba(255,255,138,0.15); }

    /* Desktop Right Actions - BIGGER, hover without movement */
    .shorts-desktop-actions {
        display:flex; flex-direction:column; align-items:center;
        gap:22px;
        position:fixed; right:60px; top:50%; transform:translateY(-50%);
        z-index:20;
    }
    .desktop-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:10px;
    }
    .desktop-action-btn svg { width:32px; height:32px; }
    .desktop-action-btn:hover {
        opacity:0.7;
    }
    .desktop-action-btn span {
        font-size:0.72rem; font-weight:500; color:rgba(255,255,255,0.7);
        transition:color 0.2s;
    }
    .desktop-action-btn:hover span { color:#fff; }
    .desktop-action-btn.liked svg { fill:#ff4757; stroke:#ff4757; }
    .desktop-action-btn.saved svg { fill:var(--fenogram-yellow,#FFFF8A); stroke:var(--fenogram-yellow,#FFFF8A); }

    /* Desktop Nav Arrows */
    .shorts-nav {
        display:flex;
        position:fixed; z-index:20;
        width:48px; height:48px; 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;
    }
    .shorts-nav:hover { background:rgba(255,255,255,0.15); }
    .shorts-nav-up { left:50%; margin-left:calc(((100vh - 80px) * 9 / 16) / 2 + 20px); top:calc(50% - 50px); }
    .shorts-nav-down { left:50%; margin-left:calc(((100vh - 80px) * 9 / 16) / 2 + 20px); top:calc(50% + 10px); }
    .shorts-nav.disabled { opacity:0.2; pointer-events:none; }
}

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

/* ==================== MOBILE SMALL ==================== */
@media (max-width:480px) {
    .short-info { bottom:16px; left:12px; right:72px; }
    .short-title-logo img { max-width:170px; max-height:65px; }
    .short-actions { right:8px; bottom:16px; gap:14px; }
    .short-action-btn svg { width:32px; height:32px; }
    .short-action-label { font-size:0.58rem; }
}

/* ==================== EPISODES MODAL ==================== */
.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;
}
.episodes-modal-overlay.show { display:block; opacity:1; }
.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;
}
.episodes-modal-overlay.show .episodes-modal-container {
    animation:episodesSlideDown 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes episodesSlideDown {
    to { transform:translate(-50%,-50%) translateY(0); opacity:1; }
}
.episodes-modal-content { position:relative; }
.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;
}
.episodes-close-btn:hover { opacity:0.7; transform:rotate(90deg); }
.episodes-modal-header { text-align:center; margin-bottom:30px; }
.episodes-modal-title { font-size:2rem; font-weight:900; color:white; margin:0 0 8px 0; }
.episodes-modal-subtitle { font-size:1rem; font-weight:300; color:rgba(255,255,255,0.6); margin:0; }
.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;
}
.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;
}
.episodes-season-tab:hover { background:rgba(255,255,255,0.1); }
.episodes-season-tab.active {
    background:rgba(255,255,138,0.1);
    border-left-color:var(--fenogram-yellow,#FFFF8A);
}
.episodes-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.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;
}
.episodes-grid .episode-card:hover { border-color:rgba(255,255,138,0.4); }
.episode-thumbnail {
    position:relative; width:100%; padding-top:177.78%; /* 9:16 aspect ratio */
    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) {
    .episodes-modal-container { padding:30px 20px; width:95%; }
    .episodes-modal-title { font-size:1.5rem; }
    .episodes-season-tabs { gap:8px; justify-content:center; }
    .episodes-season-tab { padding:8px 16px; font-size:0.85rem; }
    .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; }
    .episodes-close-btn { top:15px; right:15px; width:40px; height:40px; }
    .episodes-close-btn svg { width:20px; height:20px; }
}