/*
* Custom Styles for EventosHQ Embeds (This entire block should be in your clan.css or WordPress Custom CSS)
*/

/* --- Estilos para el contenedor PRINCIPAL del EMBED generado (el que va en WordPress) --- */
/* Este envoltorio asegura que el contenido generado tenga un fondo y un ancho base */
.eventoshq-embed-wrapper {
    background-color: white !important; /* Fondo blanco para el contenido del embed */
    color: black !important; /* Texto negro por defecto dentro del embed */
    font-family: Arial, sans-serif !important;
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    max-width: 800px !important; /* Limita el ancho del embed en WordPress */
    margin: 20px auto !important; /* Centra el embed en la página de WordPress */
    text-align: left !important; /* Asegura que el contenido dentro se alinee a la izquierda */
    box-sizing: border-box !important; /* Incluye padding en el cálculo del ancho */
}


/* Contenedor para botones horizontales con envoltura */
.buttons-container-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
}

/* Estilos de los botones generados (base) */
.generated-button {
    display: inline-block !important;
    padding: 8px 15px !important;
    margin: 5px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: bold !important;
    cursor: pointer !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid transparent !important;
    background-color: #ffbf3f !important;
    color: black !important;
    border-color: #e0ac2c !important;
}

.generated-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3) !important;
    background-color: #e0ac2c !important;
    border-color: #c79524 !important;
}

/* Colores específicos para Torrent (ahora hereda de generated-button y solo cambia color) */
.button-torrent {
    background-color: rgb(40, 167, 69) !important; /* Color verde específico */
    border-color: rgb(33, 136, 56) !important; /* Borde un poco más oscuro para el hover */
    color: white !important; /* Texto blanco */
}
.button-torrent:hover {
    background-color: rgb(33, 136, 56) !important; /* Un verde ligeramente más oscuro al pasar el ratón */
    border-color: rgb(26, 108, 44) !important;
}

/* Estilos de títulos de sección generados */
.generated-title {
    color: black !important;
    font-size: 1.5em !important;
    margin-bottom: 10px !important;
    border-bottom: 2px solid #eee !important;
    padding-bottom: 5px !important;
    display: flex !important;
    align-items: center !important;
}

/* Estilo para los iconos de host junto a los títulos */
.host-icon {
    height: 24px !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    border-radius: 3px !important;
    object-fit: contain !important;
}

/* Estilos para la sección de selección de logos de canal */
.logo-display-area {
    margin-bottom: 15px !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.logo-display-area img {
    height: 60px !important;
    vertical-align: middle !important;
    border-radius: 4px !important;
    object-fit: contain !important;
}

/* Estilos para la sección de "Links vacios" */
.unavailable-link-container {
    text-align: center !important;
    padding: 20px !important;
    border: 2px dashed #FF5722 !important;
    border-radius: 10px !important;
    background-color: #FFF3E0 !important;
    margin-bottom: 20px !important;
}
.unavailable-link-title {
    color: #D84315 !important;
    font-size: 2em !important;
    font-weight: bold !important;
    margin-bottom: 15px !important;
}
.unavailable-button {
    display: inline-block !important;
    padding: 10px 20px !important;
    margin: 8px !important;
    background-color: #FF9800 !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
    text-decoration: none !important;
    cursor: not-allowed !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
.unavailable-category-title {
    color: #795548 !important;
    font-size: 1.2em !important;
    margin-top: 15px !important;
    margin-bottom: 5px !important;
}

/* New uBlock ad section styles */
.ublock-ad-section {
    margin-top: 30px !important;
    width: 100% !important;
    text-align: left !important;
}

.ublock-ad-section .ublock-hr {
    border: none !important;
    border-top: 2px solid #ccc !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.ublock-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 15px !important;
    border-radius: 8px !important;
    width: fit-content !important;
    margin: 0 !important;
}
@media (max-width: 600px) {
    .ublock-content {
        flex-direction: column !important;
        width: 100% !important;
    }
}

.ublock-logo {
    /* Adjusted height to make it smaller */
    height: 40px !important; /* Changed from 60px to 40px */
    object-fit: contain !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
}

/* Re-defined uBlock button styles for WordPress compatibility */
.ublock-button {
    display: inline-block !important;
    padding: 10px 20px !important; /* Maintain original padding */
    height: auto !important; /* Allow height to be determined by content + padding */
    min-height: 48px !important; /* Set a more generous minimum height if still squished */
    line-height: 1.2 !important; /* Explicit line height */
    background-color: #E53935 !important;
    color: white !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    font-size: 1.1em !important;
    white-space: nowrap !important;
    flex-grow: 1 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.ublock-button:hover {
    background-color: #C62828 !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
}

/* --- Estilos para la sección de VIDEO del EMBED generado --- */
.generated-video-embed {
    margin-top: 20px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    background-color: #2e2e2e !important;
    padding: 15px !important;
    border-radius: 8px !important;
    color: #f0f0f0 !important;
    overflow-x: auto !important;
    text-align: left !important;
    width: fit-content !important;
    margin: 0 !important;
}
.generated-video-embed iframe {
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
}

/* Estilos para el título "Ver online" y el separador */
.video-section-separator {
    margin-top: 30px !important;
    text-align: left !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.video-section-separator hr {
    border: none !important;
    border-top: 2px solid #ccc !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.ver-online-title {
    display: block !important;
    text-align: left !important;
    background-color: #FFBF3F !important;
    color: #121212 !important;
    padding: 8px 15px !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    font-size: 1.3em !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
    cursor: default !important;
    width: fit-content !important;
    margin-bottom: 15px !important;
}