/* =========================================================
   STREAMTUBE PREMIUM V30 - GLASSMORPHISM & NATIVE APP UI
   ========================================================= */
:root {
    --bg-main: #050505;       /* Deep OLED Black */
    --bg-card: #121212;       /* Slightly lighter for cards */
    --bg-glass: rgba(18, 18, 18, 0.75); /* Glassmorphism */
    --primary: #ef4444;       /* Premium Red */
    --primary-hover: #dc2626;
    --accent-blue: #3b82f6;
    --accent-purple: #a855f7;
    --text-main: #ffffff;
    --text-muted: #94a3b8;
    --border: #1f2937;
}

/* Base Reset & Smooth Scroll */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { background: var(--bg-main); color: var(--text-main); overflow-x: hidden; padding-bottom: 70px; /* Space for bottom nav */ }
a { text-decoration: none; color: inherit; }

/* Hide Scrollbars Globally for App Feel */
::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; }

/* --- 1. GLASSMORPHISM TOP HEADER --- */
.app-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: var(--bg-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1000; }
.logo { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; display: flex; align-items: center; gap: 5px; }
.logo span { color: var(--primary); }
.header-icons i { font-size: 20px; color: var(--text-main); margin-left: 15px; cursor: pointer; transition: 0.2s; }
.header-icons i:hover { color: var(--primary); }

/* --- 2. HORIZONTAL SCROLLING ROWS (NETFLIX STYLE) --- */
.row-header { padding: 25px 20px 10px 20px; display: flex; justify-content: space-between; align-items: center; }
.row-title { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.view-all { font-size: 12px; font-weight: bold; color: var(--accent-blue); text-transform: uppercase; }

/* The Magic Scroll Container */
.swipe-row {
    display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 15px; padding: 0 20px 20px 20px; width: 100%;
}

/* Video Cards */
.card-video { flex: 0 0 auto; width: 260px; scroll-snap-align: start; background: var(--bg-card); border-radius: 12px; overflow: hidden; position: relative; border: 1px solid var(--border); transition: transform 0.3s ease; }
.card-video:hover { transform: translateY(-5px); border-color: var(--accent-blue); }
.card-video img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.vid-info { padding: 12px; }
.vid-title { font-size: 14px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.vid-meta { font-size: 11px; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; }
.badge-duration { position: absolute; top: 115px; right: 8px; background: rgba(0,0,0,0.8); color: #fff; padding: 3px 6px; font-size: 10px; font-weight: bold; border-radius: 4px; z-index: 10; }

/* Shorts/Reels Cards */
.card-short { flex: 0 0 auto; width: 140px; aspect-ratio: 9/16; scroll-snap-align: start; border-radius: 12px; position: relative; overflow: hidden; border: 1px solid var(--border); }
.card-short img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: 0.3s; }
.card-short:hover img { opacity: 1; transform: scale(1.05); }
.short-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; }

/* --- 3. BOTTOM NAVIGATION (NATIVE APP FEEL) --- */
.bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--bg-glass); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-top: 1px solid var(--border); display: flex; justify-content: space-around; padding: 10px 0 15px 0; z-index: 9999; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-muted); font-size: 10px; font-weight: 600; transition: 0.2s; }
.nav-item i { font-size: 20px; }
.nav-item.active { color: var(--text-main); }
.nav-item.active i { color: var(--primary); }

/* --- 4. TIKTOK STYLE REELS ENGINE (FULL SCREEN) --- */
.reels-container { height: calc(100vh - 65px); /* Leaves space for bottom nav */ overflow-y: scroll; scroll-snap-type: y mandatory; background: #000; }
.reel-wrapper { width: 100%; height: 100%; scroll-snap-align: start; position: relative; display: flex; justify-content: center; align-items: center; background: #000; overflow: hidden;}
.reel-video { width: 100%; height: 100%; object-fit: cover; }

/* Right Side Action Buttons (Like, Comment, Share) */
.reel-sidebar { position: absolute; bottom: 80px; right: 15px; display: flex; flex-direction: column; gap: 20px; z-index: 20; align-items: center; }
.action-btn { background: transparent; border: none; color: white; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; text-shadow: 0 2px 10px rgba(0,0,0,0.5); transition: 0.2s; }
.action-btn i { font-size: 30px; }
.action-btn span { font-size: 12px; font-weight: 700; }
.action-btn:active { transform: scale(0.9); }

/* Bottom Left Info */
.reel-bottom-info { position: absolute; bottom: 20px; left: 15px; width: 70%; z-index: 20; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }
.reel-user { font-size: 16px; font-weight: bold; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.reel-desc { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Reel Top Bar */
.reel-top-bar { position: absolute; top: 15px; left: 15px; right: 15px; display: flex; justify-content: space-between; z-index: 20; }