/*
 * ==========================================================
 * CSS (V1.0) - Carrossel de Avaliações Sincronizado
 * Ficheiro: assets/css/testimonial-carousel.css
 * ==========================================================
 */

/* 1. Wrapper Principal (Secção 100vh) */
.ezg-carousel-section {
    position: relative;
    width: 100%;
    /* REMOVIDO: A altura agora é controlada pelo Slider 'section_height' */
    overflow: hidden; /* Esconde os slides que saem para os lados */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. Contentor dos Fundos Sincronizados */
.ezg-carousel-backgrounds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Fica no fundo */
}

.ezg-carousel-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    
    /* A "magia" do fade: começa invisível */
    opacity: 0;
    
    /* Transição suave de fade */
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ezg-carousel-bg-image.active {
    opacity: 1; /* O JS vai adicionar esta classe */
}

/* 3. Overlay */
.ezg-carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Fica por cima do fundo */
    /* A cor/gradiente vem dos controlos do Elementor */
}

/* 4. Wrapper de Conteúdo (Título, Carrossel, Botões) */
.ezg-carousel-content-wrapper {
    position: relative;
    z-index: 2; /* Fica por cima do overlay */
    width: 100%;
    display: flex;
    flex-direction: column; /* Empilha Título, Carrossel, Botões */
    align-items: center; /* Centra tudo horizontalmente */
    
    /* O 'padding-top' agora é controlado pelo novo Slider.
       Nós mantemos apenas o padding inferior. */
    padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;
}

/* 5. Título */
.ezg-carousel-title {
    text-align: center;
    margin-bottom: 30px;
    /* Cor, Tipografia e Largura vêm dos controlos do Elementor */
}

/* 6. O Carrossel (Swiper) */
.ezg-carousel-container.swiper-container {
    width: 100%; /* O contentor ocupa 100% */
    
    /* A "magia" para os slides "metade para fora" */
    overflow: visible !important; 
}

.swiper-wrapper {
    /* Alinha os slides verticalmente (útil se tiverem alturas diferentes) */
    align-items: center; 
}

.swiper-slide {
    /* Os controlos de Largura e Altura do Elementor aplicam-se aqui */
    
    /* Garante que o conteúdo não "vaza" */
    overflow: hidden; 
    
    /* Transição suave para o scale e opacity */
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Os controlos 'card_opacity_inactive' e 'card_scale_inactive' 
   do Elementor vão estilizar os slides inativos. */

/* 7. O Card de Avaliação (Estilos Internos) */
.ezg-testimonial-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra o conteúdo do card */
    text-align: center;
    height: 100%; /* Faz o card preencher a altura do slide */
    box-sizing: border-box; /* Garante que o padding não quebra o layout */
    
    /* Cor de fundo, Sombra, Border, Padding vêm dos controlos */
}

.ezg-star-rating {
    margin-bottom: 20px;
}

.ezg-star {
    /* A cor inativa vem dos controlos */
    margin: 0 2px;
}
.ezg-star.active {
    /* A cor ativa vem dos controlos */
}

.ezg-testimonial-content {
    margin-bottom: 25px;
    /* Cor e Tipografia vêm dos controlos */
}

.ezg-person-info {
    display: flex;
    align-items: center;
    margin-top: auto; /* Empurra a info da pessoa para o fundo do card */
}

.ezg-person-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center center;
    margin-right: 15px;
    flex-shrink: 0;
}

.ezg-person-name {
    /* Cor e Tipografia vêm dos controlos */
}

/* 8. Botões de Navegação */
.ezg-carousel-navigation {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espaço entre os botões */
    margin-top: 30px;
}

.ezg-carousel-nav-button {
    cursor: pointer;
    display: inline-flex; /* Para alinhar o ícone */
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.3s ease;
    /* Cor, Fundo, Padding, Border, etc. vêm dos controlos */
}

.ezg-carousel-nav-button.swiper-button-disabled {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: inline-flex !important; /* Garante que o display é o mesmo */
}