/*
 Theme Name:   KingTube Child
 Template:     kingtube
 Version:      8.0.0
*/

/* --- MODO OSCURO GLOBAL --- */
body, html { background-color: #121212 !important; color: #e0e0e0; }
.site-header, .top-bar, .main-navigation ul ul, #site-navigation ul ul { background: #1e1e1e !important; border-color: #333 !important; color: #fff; }
.thumb-block .entry-header { color: #ccc; }
.thumb-block .post-thumbnail { background-color: #000; }
input, textarea, select { background-color: #2c2c2c !important; border: 1px solid #444 !important; color: #fff !important; }
.site-footer { background: #0d0d0d !important; border-top: 1px solid #333 !important; color: #aaa; }
.breadcrumbs-area { background: #1a1a1a !important; border-bottom: 1px solid #333 !important; color: #aaa; }

/* --- 1. BARRA DE ACCIÓN --- */
.custom-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    margin-top: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

.action-left {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

/* Botones Azul */
.btn-item {
    padding: 8px 15px;
    background: #006070;
    color: #fff !important;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    transition: background 0.2s;
    line-height: 1.2;
    height: 36px;
    vertical-align: middle;
}

.btn-item:hover { background: #004d5a; color: #fff !important; }
.btn-item i { margin-right: 6px; }

/* Botón Activo / Votado (Rosa) */
.btn-item.active, .btn-like-custom.voted {
    background: #e91e63;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(233, 30, 99, 0.4);
}

/* Stats (Derecha) */
.action-right {
    display: flex;
    gap: 15px;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
}
.stat-item i { color: #888; margin-right: 5px; }

/* --- 2. BARRA DE COMPARTIR COLORIDA --- */
.custom-share-grid {
    display: flex;
    width: 100%;
    margin: 0 0 20px 0;
    border-radius: 3px;
    overflow: hidden;
}

.share-btn {
    flex: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 5px;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 14px;
    transition: opacity 0.2s;
    border-right: 1px solid rgba(0,0,0,0.1);
}
.share-btn:last-child { border-right: none; }
.share-btn:hover { opacity: 0.9; color: #fff !important; }
.share-btn i { margin-right: 8px; font-size: 18px; }

/* Colores */
.share-twitter { background-color: #1da1f2; }
.share-whatsapp { background-color: #25d366; }
.share-reddit { background-color: #ff4500; }
.share-telegram { background-color: #0088cc; }

/* Tags */
.video-tags a {
    background: #fff;
    color: #333;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline-block;
}

/* VERSION MÓVIL */
@media only screen and (max-width: 600px) {
    
    /* 1. OPCIONES DE VIDEO: Ocultar texto largo y poner "Op X" */
    .btn-opt {
        font-size: 0 !important; /* Oculta "Opción 1" */
        padding: 0 12px !important;
        width: auto;
    }
    
    /* Reinyectar texto corto */
    #btn-opt-0::after { content: "Op 1"; font-size: 13px; }
    #btn-opt-1::after { content: "Op 2"; font-size: 13px; }
    #btn-opt-2::after { content: "Op 3"; font-size: 13px; }
    #btn-opt-3::after { content: "Op 4"; font-size: 13px; }

    /* 2. BOTÓN DESCARGAR: Solo icono */
    .btn-download {
        font-size: 0 !important; /* Oculta "Descargar" */
        padding: 0 12px !important;
    }
    .btn-download i {
        font-size: 16px !important;
        margin-right: 0 !important;
    }

    /* 3. BOTÓN LIKE: Solo icono */
    .btn-like-custom .txt-like {
        display: none !important; /* Oculta "Genial" */
    }
    .btn-like-custom {
        padding: 0 12px !important;
    }
    .btn-like-custom i {
        margin-right: 0 !important;
        font-size: 16px !important;
    }

    /* Ajustes generales */
    .custom-action-bar {
        justify-content: center; 
        gap: 8px;
    }
    .action-left {
        justify-content: center;
        width: 100%;
    }
    .action-right {
        width: 100%;
        justify-content: center;
        border-top: 1px solid #333;
        padding-top: 8px;
    }
}