/*
Theme Name: Royal Elementor Kit Child
Theme URI: https://royal-elementor-addons.com/royal-elementor-kit-child
Description: Child theme for the Royal Elementor Kit
Author: WP Royal
Author URI: https://royal-elementor-addons.com/
Template: royal-elementor-kit
Version: 1.0.0
*/

/* Configurações do Carrossel */
    :root {
        --ec-gap: 20px;          /* Espaço entre os cards */
        --ec-speed: 0.5s;        /* Velocidade da animação */
        --ec-nav-color: #007bff; /* Cor das setas */
        
        /* Itens por tela */
        --ec-items-desktop: 3;
        --ec-items-tablet: 2;
        --ec-items-mobile: 1;
    }

    /* O Container Pai do Elementor */
    .custom-elementor-carousel {
        overflow: hidden !important; /* Esconde o que vaza */
        position: relative;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        /* Removemos gaps nativos do Elementor para controlar via script se necessário, 
           mas geralmente o gap nativo do Elementor funciona bem se configurado lá. 
           Aqui forçamos o gap da variável para consistência */
        gap: var(--ec-gap) !important;
        transition: transform var(--ec-speed) ease-in-out;
        scroll-behavior: smooth; /* Para garantir suavidade */
    }

    /* Os Cards (Filhos diretos do Container) */
    .custom-elementor-carousel > .e-con, 
    .custom-elementor-carousel > .e-container,
    .custom-elementor-carousel > .elementor-widget-container {
        /* Cálculo da largura baseado na variável */
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        width: calc((100% / var(--ec-items-visible)) - (var(--ec-gap) * (var(--ec-items-visible) - 1) / var(--ec-items-visible))) !important;
    }

    /* Container Wrapper para as Setas (Injetado via JS) */
    .ec-wrapper {
        position: relative;
        width: 100%;
    }

    /* Setas de Navegação */
    .ec-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: #fff;
        border: 1px solid #eee;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ec-nav-color);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        transition: 0.3s;
    }

    .ec-nav-btn:hover {
        background: var(--ec-nav-color);
        color: #fff;
    }

    .ec-prev { left: -20px; } /* Ajuste a posição conforme necessário */
    .ec-next { right: -20px; }

    /* Responsividade */
    :root { --ec-items-visible: var(--ec-items-desktop); }

    @media (max-width: 1024px) {
        :root { --ec-items-visible: var(--ec-items-tablet); }
    }

    @media (max-width: 767px) {
        :root { --ec-items-visible: var(--ec-items-mobile); }
    }