/* 
 * Carrossel Avançado - assets/carrossel.css
 * CSS Custom Properties (Variáveis) para fácil customização
 * Layout 100% idêntico ao HTML original
 */

.carrossel-avancado-container {
    /* --- Configurações das Setas de Navegação --- */
    --arrow-size: 3.5rem; /* 56px */
    --arrow-bg-color: #FFFFFF;
    --arrow-icon-color: #374151;
    --arrow-border-color: transparent;
    --arrow-border-width: 0px;
    --arrow-icon-size: 2rem; /* 32px */

    /* --- Configurações dos Dots de Navegação --- */
    --dot-size: 0.75rem; /* 12px */
    --dot-bg-color: #9CA3AF;
    --dot-active-bg-color: #4F46E5;
    --dot-spacing: 0.5rem; /* 8px */
}

.carrossel-avancado-container .nav-button {
    width: var(--arrow-size);
    height: var(--arrow-size);
    background-color: var(--arrow-bg-color);
    border-color: var(--arrow-border-color);
    border-width: var(--arrow-border-width);
}

.carrossel-avancado-container .nav-button-icon {
    width: var(--arrow-icon-size);
    height: var(--arrow-icon-size);
    color: var(--arrow-icon-color);
    transition: transform 0.2s ease-in-out;
}

.carrossel-avancado-container .nav-button:hover .nav-button-icon {
    transform: scale(1.2);
}

/* --- Estilos para o Posicionamento das Setas --- */
.carrossel-avancado-container[data-arrow-position="half"] .nav-button.left { 
    left: 0; 
    transform: translate(-50%, -50%); 
}

.carrossel-avancado-container[data-arrow-position="half"] .nav-button.right { 
    right: 0; 
    transform: translate(50%, -50%); 
}

.carrossel-avancado-container[data-arrow-position="inside"] .nav-button.left { 
    left: 1rem; 
    transform: translateY(-50%); 
}

.carrossel-avancado-container[data-arrow-position="inside"] .nav-button.right { 
    right: 1rem; 
    transform: translateY(-50%); 
}

.carrossel-avancado-container[data-arrow-position="outside"] .nav-button.left { 
    left: 0; 
    transform: translate(-120%, -50%); 
}

.carrossel-avancado-container[data-arrow-position="outside"] .nav-button.right { 
    right: 0; 
    transform: translate(120%, -50%); 
}

/* --- Estilos para os Dots --- */
.carrossel-avancado-container .dot {
    width: var(--dot-size);
    height: var(--dot-size);
    background-color: var(--dot-bg-color);
    margin: 0 var(--dot-spacing);
    border-radius: 50%;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
}

.carrossel-avancado-container .dot.active {
    background-color: var(--dot-active-bg-color);
}

/* Estilos para o efeito de fade (transição) */
.carrossel-avancado-container .carousel-wrapper { 
    display: grid; 
}

.carrossel-avancado-container .carousel-item {
    grid-area: 1 / 1 / 2 / 2;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
    visibility: hidden;
}

.carrossel-avancado-container .carousel-item.active { 
    opacity: 1; 
    visibility: visible; 
}