.carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.carousel-track {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: auto;
    padding-left: var(--padding-sides, 25%);
    padding-right: var(--padding-sides, 25%);
    gap: var(--image-gap, 13px); /* Manteniamo la variabile, ma Elementor ora controlla il gap */
}

.elementor-widget .carousel-track[style*="gap"] {
    /* Priorità al gap impostato da Elementor */
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-item {
    flex: 0 0 auto;
    /* Larghezza e Margine sono controllati da Elementor */
    width: calc(100% - 2 * var(--padding-sides, 25%)); /* Riferimento alla variabile CSS per coerenza */
    display: flex;
    flex-direction: column; /* Il titolo "above" e il contenitore interno sono in colonna */
    align-items: stretch; /* Permette a carousel-item-inner e al titolo "above" di espandersi */
    box-sizing: border-box; /* Assicurati che padding e border siano inclusi nella larghezza/altezza */
}

/* Garantisce che la larghezza e il margine impostati da Elementor abbiano priorità */
.elementor-widget .carousel-item[style*="width"],
.elementor-widget .carousel-item[style*="margin"] {
     /* Regola vuota per specificità */
}


/* Stili base per il contenitore interno */
.carousel-item-inner {
    display: flex;
    flex-direction: column; /* Il contenuto interno (incluso titolo se "inside") è in colonna */
    width: 100%;
    height: auto; /* L'altezza fissa è gestita da Elementor con height nel selettore inline */
    box-sizing: border-box; /* Assicurati che padding e border siano inclusi nella larghezza/altezza */
}

/* Priorità all'altezza/min-height impostata da Elementor */
.elementor-widget .carousel-item-inner[style*="height"],
.elementor-widget .carousel-item-inner[style*="min-height"],
.elementor-widget .carousel-item-inner[style*="padding"],
.elementor-widget .carousel-item-inner[style*="border"],
.elementor-widget .carousel-item-inner[style*="background"],
.elementor-widget .carousel-item-inner[style*="border-radius"],
.elementor-widget .carousel-item-inner[style*="box-shadow"] {
     /* Regola vuota per specificità per vari stili controllati da Elementor */
}


/* Stili per il titolo (tipografia, colore, margin gestiti da Elementor inline) */
.slide-title {
    /* Stili di default o fallback se non impostati da Elementor */
    width: 100%; /* Assicurati che il titolo occupi tutta la larghezza disponibile */
    box-sizing: border-box; /* Include padding nel calcolo della larghezza */
}

/* Stili specifici per la posizione del titolo */
.slide-title-above {
    /* Quando il titolo è sopra, è un elemento separato prima di carousel-item-inner */
    /* I margini per separarlo sono gestiti dal controllo Margine Titolo in Elementor */
}

.slide-title-inside {
    /* Quando il titolo è dentro, è il primo elemento nel flex container .carousel-item-inner */
    /* Il margine inferiore per separarlo dal contenuto è gestito dal controllo Margine Titolo */
}


/* Rimuoviamo i margini specifici per l'ultimo elemento se usiamo gap */
.carousel-item:last-of-type {
    margin-right: 0 !important;
}

.carousel-item:last-child {
    margin-right: 0 !important;
}


.carousel-bar-wrapper {
    width: calc(100% - 2 * var(--padding-sides, 25%)); /* Riferimento alla variabile CSS per coerenza */
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--space-desc-bar, 12px);
    padding-bottom: 10px;
    overflow: visible;
}

/* Priorità alla larghezza wrapper impostata da Elementor */
.elementor-widget .carousel-bar-wrapper[style*="width"] {
    /* Regola vuota per specificità */
}


.carousel-bar {
    height: var(--bar-height, 6px);
    background: var(--bar-bg, #e0e0e0);
    border-radius: 6px;
    position: relative;
    overflow: visible;
}

.carousel-thumb {
    height: var(--thumb-height, 6px);
    background: var(--thumb-bg, #FFC107);
    width: 20%; /* La larghezza del thumb potrebbe aver bisogno di essere calcolata in base al numero di slide e visibilità */
    border-radius: 20px;
    position: absolute;
    left: 0;
    cursor: grab;
    transition: height 0.2s ease, top 0.2s ease;
    top: 0;
}

.carousel-bar:hover .carousel-thumb,
.carousel-thumb.dragging {
    height: var(--thumb-active-height, 12px);
    top: -3px;
}

/* TABLET */
@media screen and (max-width: 1024px) {
    .carousel-track {
        padding-left: var(--padding-sides-tablet, 15%); /* Questi non sono legati ai controlli Elementor responsive padding_sides */
        padding-right: var(--padding-sides-tablet, 15%);
    }

    .carousel-item {
        width: calc(100% - 2 * var(--padding-sides-tablet, 15%)); /* Questi non sono legati ai controlli Elementor responsive padding_sides */
    }

    .carousel-bar-wrapper {
        width: calc(100% - 2 * var(--padding-sides-tablet, 15%)); /* Questi non sono legati ai controlli Elementor responsive padding_sides */
    }
}

/* MOBILE */
@media screen and (max-width: 768px) {
    .carousel-track {
        padding-left: var(--padding-sides-mobile, 10%); /* Questi non sono legati ai controlli Elementor responsive padding_sides */
        padding-right: var(--padding-sides-mobile, 10%);
    }

    .carousel-item {
        width: calc(100% - 2 * var(--padding-sides-mobile, 10%)); /* Questi non sono legati ai controlli Elementor responsive padding_sides */
    }

    .carousel-bar-wrapper {
        width: calc(100% - 2 * var(--padding-sides-mobile, 10%)); /* Questi non sono legati ai controlli Elementor responsive padding_sides */
    }
}