/*
Theme Name: BestViralX Ultimate Premium
Author: LeloGMr
Version: 5.0
*/
body { background: #060606; color: #eee; font-family: 'Inter', sans-serif; margin: 0; padding: 0; }

/* Header */
header { 
    background: #111; padding: 10px 3%; border-bottom: 2px solid #ffcc00; 
    display: flex; justify-content: space-between; align-items: center; 
    position: sticky; top: 0; z-index: 1000; flex-wrap: wrap;
}
.logo-text { color: #ffcc00; font-weight: 900; font-size: 24px; text-decoration: none; text-transform: uppercase; }
.btn-nav { padding: 6px 12px; border-radius: 4px; text-decoration: none; font-weight: bold; font-size: 11px; margin-left: 5px; }
.btn-premium { background: #ffcc00; color: #000; }
.btn-hot { background: #ff0000; color: #fff; }

/* Layout */
.main-wrapper { display: flex; max-width: 100%; margin: auto; }

/* Sidebar/Categorías */
.sidebar-categories { width: 200px; background: #0f0f0f; padding: 20px; border-right: 1px solid #222; min-height: 100vh; }
.sidebar-categories h3 { color: #ffcc00; font-size: 14px; text-transform: uppercase; }
.sidebar-categories ul { list-style: none; padding: 0; }
.sidebar-categories a { color: #bbb; text-decoration: none; font-size: 14px; display: block; padding: 8px 0; }

/* Grid de Videos RESPONSIVO */
.content-area { flex: 1; padding: 15px; }
.video-grid { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); }

/* AJUSTE PARA MÓVIL (3 COLUMNAS Y SIDEBAR ARRIBA) */
@media (max-width: 600px) {
    .main-wrapper { flex-direction: column; }
    .sidebar-categories { 
        width: 100%; min-height: auto; border-right: none; border-bottom: 1px solid #222; padding: 10px;
    }
    .sidebar-categories ul { display: flex; overflow-x: auto; gap: 15px; white-space: nowrap; }
    .video-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 5px; }
    .v-title { font-size: 9px; height: 25px; padding: 4px; }
    header { justify-content: center; flex-direction: column; gap: 10px; }
}

.video-card { background: #111; border: 1px solid #222; border-radius: 5px; text-decoration: none; overflow: hidden; transition: 0.3s; }
.video-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.v-title { padding: 8px; color: #fff; font-size: 12px; text-align: center; height: 35px; overflow: hidden; }

.pagination { text-align: center; padding: 30px 0; grid-column: 1 / -1; width: 100%; }
.pagination .page-numbers { background: #222; color: #fff; padding: 8px 12px; margin: 2px; text-decoration: none; border-radius: 4px; display: inline-block; }
.pagination .current { background: #ffcc00; color: #000; }