/**
Theme Name: Dac Pro
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Theme Child Dac Pro con Astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dac-pro
Template: astra
*/

/* ==========================================
   DISEÑO DEL WIDGET: CARRUSEL VERTICAL (REELS)
   ========================================== */

/* Contenedor relativo para posicionar flechas */
.carrusel-vertical-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Área deslizable */
.carrusel-vertical-container {
    --items-to-show: 4;
    --video-gap: 15px;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: var(--video-gap) !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory;
    padding: 10px 0 !important;
    
    /* Ocultar scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.carrusel-vertical-container::-webkit-scrollbar {
    display: none;
}

/* Dimensiones y proporciones del Video */
.carrusel-vertical-container .video-item-reel {
    flex: 0 0 calc((100% - (var(--video-gap) * (var(--items-to-show) - 1))) / var(--items-to-show)) !important;
    width: calc((100% - (var(--video-gap) * (var(--items-to-show) - 1))) / var(--items-to-show)) !important;
    min-width: calc((100% - (var(--video-gap) * (var(--items-to-show) - 1))) / var(--items-to-show)) !important;
    max-width: calc((100% - (var(--video-gap) * (var(--items-to-show) - 1))) / var(--items-to-show)) !important;
    
    aspect-ratio: 9/16 !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    scroll-snap-align: start !important;
    background-color: #000 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Ocultar controles de video y mostrar en hover */
.carrusel-vertical-container .video-item-reel::-webkit-media-controls {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.carrusel-vertical-container .video-item-reel:hover::-webkit-media-controls {
    opacity: 1;
}

/* Estilos de las flechas: Círculo perfecto forzado (42px x 42px) */
.carrusel-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    /* Forzamos dimensiones idénticas y reseteamos el padding del tema */
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    
    background-color: rgba(0, 0, 0, 0.75) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.carrusel-arrow:hover {
    background-color: rgba(0, 0, 0, 0.95) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.carrusel-arrow-prev { left: -15px !important; }
.carrusel-arrow-next { right: -15px !important; }

/* Formato exacto del icono Font Awesome centrado */
.carrusel-arrow i {
    font-size: 16px !important;
    color: #ffffff !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}


/* ==========================================
   WIDGET: SLIDE DE LOGOS INFINITO (MARQUEE)
   ========================================== */

.logo-marquee-container {
    width: 100%;
    overflow: hidden !important;
    position: relative;
    user-select: none;
    pointer-events: none !important;
    box-sizing: border-box;
}

.logo-marquee-track {
    display: flex !important;
    width: max-content !important;
    animation: logoMarquee 25s linear infinite !important;
    will-change: transform;
}

.logo-marquee-group {
    display: flex !important;
    align-items: center !important;
    gap: 50px;
    padding-right: 50px;
    flex-shrink: 0 !important;
}

.logo-marquee-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    height: 50px;
}

.logo-marquee-item img {
    height: 50px;
    max-height: 50px;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
}

@keyframes logoMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}