body {
    background-color: #ffffff; /* Verde scuro */
    color: #007A7A; 
}

.navbar {
    background-color: #007A7A; /* Arancione principale */
    color: white; /* Testo bianco */
}

.navbar .nav-link {
    color: #FFFFFF; /* Testo bianco per i link */
    transition: color 0.3s ease; /* Effetto di transizione */
}

.navbar .nav-link:hover {
    color: #f1c40f; /* Giallo dorato per hover */
}

.navbar-brand {
    color: white; /* Testo del brand bianco */
    font-weight: bold; /* Maggiore evidenza per il brand */
}


.custom-link:hover {
    color: #f1c40f; /* Giallo dorato */
}


/* Rimuove il toggler */
.navbar-menu {
    display: flex;
    align-items: center;
}

/* Navbar generale */
.custom-navbar {
    background-color: #007A7A;  /* Arancione scuro */
    padding: 10px 20px;
    color:#F37D0C;
}

/* Brand della navbar */
.custom-brand {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.5rem;
    text-transform: uppercase;
    text-decoration: none;
}

.custom-brand:hover {
    color: #f1c40f; /* Giallo dorato */
}

/* Link della navbar */
.custom-link {
    color: #FFFFFF;
    margin-right: 15px;
    font-weight: bold; /* Grassetto */
    text-transform: capitalize;
    transition: color 0.3s ease;
}

.custom-link:hover {
    color: #f1c40f; /* Giallo dorato */
}


.container {
    /*background-color: #FFFFFF;*/
    color: #007A7A; /* Testo in bianco */
    border-radius: 8px; /* Per un layout pi� morbido */
    padding: 20px; /* Spaziatura interna */
}

.container label{
	color: #FFFFFF; /* giallo dorato */
    /*font-weight: bold;*/
}

.form-select, .form-control, button.btn-primary {
    /* background-color: #F2F2F2; Verde scuro */
    color: #F37D0C; /* Testo */
    /*border: 1px solid #FFFFFF;  Bordo bianco */
	border: 2px solid #D8C40A; /* Bordo bianco */
}

button.btn-primary {
	background-color: #E0CD00; /* Verde scuro */
    color: #001900; /* Testo */
    border: 2px solid #D8C40A; /* Bordo bianco */
}


.form-select option {
	
	/*background-color: #6D83FF; /* celeste */
	/*background-color: #3F7F62 !important;*/
	background-color: #003300 !important;
	
    color: #FFFFFF; /* Testo bianco*/
}

ul#resultsList {
    background-color: #FFFFFF; /* Verde scuro */
    color: #007A7A; /* Testo */
    border: 2px solid #007A7A; /* Bordo blue */
    border-radius: 8px;
}

ul#resultsList li {
    background-color: #FFFFFF; 
    color: #007A7A; /* Testo */
    border: 2px solid #007A7A; /* Bordo blue */
}

ul#resultsList li:hover {
    background-color: #800000; /* Verde leggermente pi� chiaro */
    color: #007A7A; /* Testo */
    cursor: pointer;
}

footer {
    background-color: #007A7A; /* Verde scuro */
    color: white; /* Testo */
}

.btn-primary {
    background-color: #d35400; /* Arancione scuro */
    border-color: #d35400; /* Per mantenere coerenza */
    color: white; /* Colore del testo */
}

.btn-primary:hover {
    background-color: #e67e22; /* Arancione più chiaro al passaggio del mouse */
    border-color: #e67e22; 
}

.btn-primary:focus, 
.btn-primary:active {
    box-shadow: 0 0 10px 2px rgba(211, 84, 0, 0.75); /* Ombra arancione scura */
    outline: none; /* Rimuove il bordo di focus */
}

.btn-primary:disabled {
    background-color: #bdc3c7; /* Grigio per il pulsante disabilitato */
    border-color: #bdc3c7;
    color: white;
}

/* Pulsanti blu scuro */
.btn-primary, .btn {
    background-color: #007A7A; /* Verde scuro */
    border-color: #FFFFFF;
    color: #ffffff;
    /*font-weight: bold; /* Grassetto */
}

.btn-primary:hover, .btn:hover {
    /*background-color: #6D83FF; /* Verde leggermente più chiaro */
	background-color: #6D83FF;
    border-color: #D8C40A;
    color: #ffffff;
    font-weight: bold; /* Grassetto */
}

/* Label arancione scuro */
.form-label {
    color: #FFFFFF; /* giallo dorato */
    /*font-weight: bold;*/
}

/* Tab attivo */
.nav-tabs .nav-link.active {
    /*background-color:#6D83FF; */
	/*background-color:#3F7F62;*/
	background-color:#E0CD00;
    color: #001900; /* Giallo dorato */
    border: 2px solid #f1c40f;
    border-bottom: none !important; /* Rimuove il bordo inferiore del tab attivo */
    /*font-weight: bold;  Grassetto */
	/*margin-bottom: -40px !important;*/
}

/* Tab non attivi */
.nav-tabs .nav-link {
    background-color: #001900; /* Verde scurissimo */
    color: #ffffff; /* Testo bianco */
    border: 1px solid #E0CD00; /* Bordo arancione scuro */
    /*font-weight: bold; /* Grassetto */
}

.nav-tabs .nav-link:hover {
    background-color: #6D83FF; /* Verde scuro più brillante */
    color: #FFFFFF; /* Giallo dorato */
}

/* Contenitore tab (sfondo verde scuro) */
.tab-content {
    border: 2px solid 007A7A; /* Cornice arancione scuro */
    border-top: none; /* Evita la separazione tra tab e contenitore */
    /*background-color: #000000;  */
    color: #007A7A; /* Testo bianco */
}

/* Testo nei contenuti dei tab */
.tab-pane {
    color: #ffffff; /* Testo bianco */
}

.tab-content
{
    /*border: 0px solid #FFFFFF; /* Bordo blue scuro */
}

/* Stile base */
.form-select, .form-control {
    background-color: #E0CD00; /* Arancione */
    color: #001900; /* Testo bianco */
    border: 2px solid #D8C40A; /* Bordo giallo dorato */
	cursor: pointer;
}

/* Hover solo se NON è disabilitato */
.form-select:not(:disabled):hover, 
.form-control:not(:disabled):hover {
    background-color: #6D83FF; /* celeste */
	/*background-color: #3F7F62; /*  verdino */
    border-color: #D8C40A; /* Giallo dorato */
}

/* Stile generale per i controlli all'interno del contenitore #registrazioneForm */
#registrazioneForm input, #registrazioneForm select {
    background-color: white; /* Sfondo bianco iniziale */
    color: #2c3e50; /* Testo verde scuro (come lo sfondo della pagina) */
    border: 2px solid #D8C40A; /* Bordo giallo dorato */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transizione fluida */
    padding: 0.5rem; /* Spaziatura interna */
    width: 100%; /* Larghezza completa */
    margin-bottom: 1rem; /* Spaziatura inferiore */
}

/* Stile al passaggio del mouse (hover) */
#registrazioneForm input:hover, #registrazioneForm select:hover {
    background-color: white; /* Sfondo trasparente */
    color: #2c3e50; /* Testo verde scuro */
}

/* Stile quando il controllo è focalizzato (focus) */
#registrazioneForm input:focus, #registrazioneForm select:focus {
    background-color: white; /* Sfondo trasparente */
    color: #2c3e50; /* Testo verde scuro */
    border-color: #F37D0C; /* Bordo arancione */
    box-shadow: 0 0 5px rgba(243, 125, 12, 0.5); /* Ombra arancione */
}


/* Stile per i campi invalidi (già presente, controlla che sia lì) */
#registrazioneForm .form-control.is-invalid,
#registrazioneForm .form-select.is-invalid,
#registrazioneForm .form-check-input.is-invalid {
    border-color: #dc3545; /* Bordo rosso scuro di Bootstrap per invalidi */
    /* Assicurati che le proprietà background-image, repeat, position, size siano qui se vuoi l'icona di errore di Bootstrap */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* REGOLA FONDAMENTALE: Stile per il focus quando il campo è invalido */
/* Questo selettore è più specifico e dovrebbe vincere su quasi tutto */
#registrazioneForm .form-control.is-invalid:focus,
#registrazioneForm .form-select.is-invalid:focus,
#registrazioneForm input.is-invalid:focus, /* Aggiunto per coprire anche solo 'input' */
#registrazioneForm select.is-invalid:focus, /* Aggiunto per coprire anche solo 'select' */
#registrazioneForm textarea.is-invalid:focus {
  border-color: #D8C40A !important; /* Forza il tuo colore oro/giallo per il bordo */
  box-shadow: 0 0 0 0.25rem rgba(216, 196, 10, 0.5) !important; /* Forza un'ombra con il tuo colore */
  outline: 0 !important; /* Rimuovi l'outline predefinito o di Bootstrap se interferisce */
}


/* Potresti anche voler un testo di errore sotto il campo */
#registrazioneForm .invalid-feedback {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
    display: block; /* Assicurati che sia visibile */
}







/* Pulsante (Accedi) */
.custom-btn {
    background-color: #F37D0C; /* Sfondo arancione */
    color: white !important;
    padding: 8px 30px 9px 30px;
    border-radius: 50px;
    text-transform: uppercase;
    font-weight: 600; /* Grassetto */
    border: 2px solid #000000; /* Bordo arancione scuro */
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 13px;
    display: inline-flex;
    border: 2px solid #D8C40A;
}

.custom-btn:hover {
    background-color:#7A1E3B; 
    border-color:#D8C40A;
    color: #FFFFFF !important;;
}

#capInput{
    background-color: #FFFFFF;
    border: 1px solid #007A7A; /* Bordo blue scuro */
}

.splash-content p {
    color: white;

}    

.word-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100px; /* Altezza del div per visualizzare il movimento */
    overflow: hidden; /* Nasconde le parole fuori dal contenitore */
    position: relative;
}

.word {
    font-size: 30px;
    font-weight: bold;
    opacity: 0;
    position: absolute;
    /*animation: slide-up 3s ease-in-out infinite;*/
	animation: slide-left-left 3s ease-in-out forwards; /* Animazione modificata */
	width: 100%; /* Per allineare correttamente il testo */
    text-align: center;
}

.word:nth-child(1) {
    animation-delay: 0s;
}

.word:nth-child(2) {
    animation-delay: 3s;
}

.word:nth-child(3) {
    animation-delay: 6s;
}

/* Animazione per far scorrere le parole */
@keyframes slide-left-left {
	0% {
        transform: translateX(-100%); /* Parola parte da sinistra (fuori schermo) */
        opacity: 0;
    }
    50% {
        transform: translateX(0); /* Parola arriva al centro (visibile) */
        opacity: 1;
    }
    100% {
        transform: translateX(-100%); /* Parola esce da sinistra (fuori schermo) */
        opacity: 0;
    }
}


.navbar {
    position: relative;
    z-index: 10;
}

.navbar .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    display: none; /* Nasconde la tendina di default */
    background-color: #007A7A; /* Sfondo blu chiaro */
    color: white; /* Colore del testo */
    border-radius: 5px; /* Angoli arrotondati */
}

.navbar .dropdown:hover .dropdown-menu {
    display: block; /* Rende visibile la tendina quando si passa sopra */
}
/* Cambia il colore di sfondo dei singoli elementi al passaggio del mouse */
.navbar .dropdown-menu .dropdown-item {
    color: white; /* Colore del testo */
    padding: 10px 20px; /* Padding per rendere più grandi gli item */
    font-weight: bold;
}

/* Colore di sfondo quando si passa sopra un elemento */
.navbar .dropdown-menu .dropdown-item:hover {
    background-color: #007A7A; /* Sfondo più scuro al passaggio del mouse */
    color: #F37D0C; /* Testo bianco */
    font-weight: bold;
}

.custom-dropdown-menu
{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    display: none; /* Nasconde la tendina di default */
    background-color: #007A7A; /* Sfondo blu chiaro */
    color: white; /* Colore del testo */
    border-radius: 5px; /* Angoli arrotondati */

}

.custom-dropdown-menu .dropdown-item {
    color: white; /* Colore del testo */
    padding: 10px 20px; /* Padding per rendere più grandi gli item */
    font-weight: bold;
}

/* Colore di sfondo quando si passa sopra un elemento */
.custom-dropdown-menu .dropdown-item:hover {
    background-color: #007A7A; /* Sfondo più scuro al passaggio del mouse */
    color: #F37D0C; /* Testo bianco */
    font-weight: bold;
}

/* Stile generale dell'accordion */
.accordion-item {
    background-color: #003333;
    border: 2px solid gold; /* Bordi dorati */
    border-radius: 10px;
    overflow: hidden; /* Evita glitch di bordo */
    margin-bottom: 8px;

}

/* Stile di default per l'accordion-header e accordion-button */
.accordion-header,
.accordion-button {
	padding: 10px 15px; /* Aggiungi padding direttamente all'header */
    background-color: #003333; /* Verdone di default */
    color: white; /* Testo bianco */
    transition: background-color 0.3s ease; /* Animazione morbida */
	margin: 0; /* Compensa il padding destro */
    cursor: pointer;
}



/* Stile per l'accordion-header quando l'elemento è selezionato */
.accordion-header .accordion-button:not(.collapsed) {
    background-color: #3F7F62; /* Colore di sfondo */
    color: white; /* Colore del testo */
}

/* Stile per il pulsante "Mappa" */
.accordion-header .btn {
    background-color: #E0CD00; /* Arancione */
    color: #001900; /* Testo bianco */
    transition: background-color 0.3s ease; /* Animazione fluida */
    border: 1px solid #001900; /* Bordi dorati */
}

/* Cambia il colore del pulsante "Mappa" al passaggio del mouse */
.accordion-header .btn:hover {
    background-color: #6D83FF !important; /* Celeste */
	color:white;
	font-weight: normal;
}

/* Impedisci al pulsante "Mappa" di ereditare lo sfondo dell'header */
.accordion-header:has(.accordion-button:not(.collapsed)) .btn {
    background-color: #E0CD00; /* Mantieni il colore arancione */
}

/* Cambia colore quando l'elemento è selezionato o in hover */
.accordion-header:hover,
.accordion-header:hover .accordion-button,
.accordion-button:not(.collapsed),
.accordion-button:not(.collapsed):hover {
    background-color: #3F7F62; /* Verde scuro */
    color: white; /* Testo bianco */
}

/* Mantiene il colore dell'icona anche al passaggio del mouse */
/*
.accordion-button:not(.collapsed)::after,
.accordion-header:hover .accordion-button::after {
    filter: brightness(0) invert(1); 
}
*/


/*
/* Rimuove il bordo dell'icona quando l'accordion è aperto 
.accordion-button:not(.collapsed)::after {
    background-color: transparent;
}
*/

/* Rimuove l'effetto di focus predefinito */
.accordion-button:focus {
    box-shadow: none;
}

/* Stile per l'accordion-header quando è selezionato */
.accordion-header:has(.accordion-button:not(.collapsed)) {
    background-color: #3F7F62; /* Colore di sfondo per l'intero header */
}

/* Stile per l'accordion-collapse quando è aperto */
/* CONTENUTO COLLAPSE */
.accordion-collapse {
    border-top: 1px solid rgba(255, 215, 0, 0.3); /* Linea divisoria dorata */
}
.accordion-collapse.show {
    background-color: #003333;
    color: white;
    padding: 15px;
}

/* Pulsante "Mappa" */
.btn-mappa {
    border: 1px solid gold;
    padding: 5px 10px;
    font-weight: bold;
    transition: 0.3s ease;
	
}

/* Rimuove la separazione tra gli elementi dell'accordion */
.accordion-item {
    margin: 0; /* Rimuove lo spazio tra gli elementi */
    border: 2px solid gold; /* Bordi dorati */
    border-top: none; /* Nessun bordo superiore per unione continua */
    border-radius: 0; /* Evita angoli arrotondati */
	padding-right:0px;
}

/* Mantiene il bordo arrotondato solo per il primo e l'ultimo elemento */
.accordion-item:first-of-type {
    border-top: 2px solid gold;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.accordion-item:last-of-type {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Cambia il colore dell'icona dell'accordion (freccia) */
.accordion-button::after {
    filter: brightness(0) saturate(100%) invert(87%) sepia(76%) saturate(746%) hue-rotate(347deg) brightness(96%) contrast(94%);
}

/* Cambia il colore dell'icona quando l'elemento è espanso */
.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1); /* Icona bianca */
}

/* Rimuove il bordo dell'icona */
.accordion-button {
    box-shadow: none;
}


/* La classe magica per il primo elemento visibile */
.first-visible-item {
    border-top: 2px solid gold !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

/* Arrotonda anche il bottone per non "tagliare" gli angoli */
.first-visible-item .accordion-button {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}


/* Stile del pop-up personalizzato */
#customMapPopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* Assicura che sia sopra tutto */
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Quando il pop-up è visibile */
#customMapPopup.visible {
    visibility: visible;
    opacity: 1;
}

/* Sfondo semi-trasparente */
.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* Contenuto del pop-up */
.popup-content {
    position: relative;
	color:#000000;
	/*
	background: #003333;
    border-radius: 16px;
	
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    */
	padding: 20px;
    width: 90%;
    max-width: 600px;
    z-index: 10000; /* Sopra l'overlay */
	background: linear-gradient(145deg, rgba(0, 45, 0, 0.95), rgba(0, 20, 0, 0.98));
    /*border: 1px solid rgba(224, 205, 0, 0.3);*/
	border:2px solid #D8C40A;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
		
}

.popup-content h3{
	color:white;
}

/* Pulsante di chiusura */
.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #F37D0C;
	border-radius: 50px;
    color: white;
    border:2px solid #D8C40A;
    font-size: 20px;
    cursor: pointer;
}



/* Contenitore della mappa */
.map-container {
    width: 100%;
    height: 400px;
    border-radius: 12px;
	border:2px solid #D8C40A;
}


/* AGGIUNGI QUESTE REGOLE IN FONDO AL TUO FILE CSS */

/* Reset dello stile strong nell'accordion (se necessario) */

/* Aggiungi alla fine del tuo file */
#resultsAccordion {
  --base-size: calc(14px + 0.3vw);
  font-size: var(--base-size);
}

#resultsAccordion .accordion-header .accordion-button .church-name-text {
	font-size: calc(var(--base-size) * 1.25);
	text-transform: uppercase;   /* Rende il testo tutto in maiuscolo */
	white-space: nowrap;         /* Impedisce al testo di andare a capo */
	overflow: hidden;            /* Nasconde il testo che supera il contenitore */
	text-overflow: ellipsis;     /* Aggiunge i puntini di sospensione (...) */
	max-width: 500px;
	/* Cruciale: Lo span deve essere un blocco flessibile per la troncatura */
    display: block; /* O inline-block se si desidera un comportamento differente del layout interno */
	

}

#resultsAccordion .accordion-body {
  font-size: var(--base-size) !important; 
  line-height: calc(var(--base-size) * 1.6);
}

#resultsAccordion .accordion-body p {
    font-size: var(--base-size) !important; 
}

#resultsAccordion .btn-mappa {
  font-size: calc(var(--base-size) * 0.9);
}

/* Limiti minimo/massimo */
@media (max-width: 320px) {
  #resultsAccordion { --base-size: 14px; }
}
@media (min-width: 1600px) {
  #resultsAccordion { --base-size: 18px; }
}

/* Stili per l'accordion-body personalizzato */
#resultsAccordion .accordion-body.p-0 {
    padding: 0 !important;
}





.chiesa-image-container {
    height: 100%;
    min-height: 100px; /* Altezza minima garantita */
    position: relative;
    border-left: 2px solid gold;
    border-bottom: 2px solid gold;
    border-bottom-right-radius: inherit;
    background-color: #f8f9fa; /* Sfondo alternativo */
    display: flex;
    align-items: center;
    justify-content: center;
}

.chiesa-image-container img {
    width: 100%;
    height: 100%;
    max-height: 150px;
    object-fit: cover;
    display: block;
}

.chiesa-image-container:before {
    content: "Nessuna foto disponibile";
    position: absolute;
    color: #6c757d;
    font-size: 0.8rem;
    text-align: center;
    padding: 0 10px;
    z-index: 1;
}

.chiesa-image-container:has(img[src*="placeholder.jpg"]):before,
.chiesa-image-container:not(:has(img)):before {
    display: block;
}

.chiesa-image-container:has(img:not([src*="placeholder.jpg"])):before {
    display: none;
}
/* Mantieni il bordo dorato solo in basso a destra */
.accordion-item:has(.accordion-body.p-0) {
    overflow: hidden;
}

/* Adattamento per mobile */
@media (max-width: 768px) {
 .chiesa-image-container img {
        max-height: 100px;
    }
    
 .accordion-body .text-nowrap {
        white-space: normal !important;
    }
}

/* SOLUZIONE DEFINITIVA - SELEZTORI AD ALTA PRIORITÀ */
body #risultatiEventi.no-border-container,
body main .main #risultatiEventi,
body .section_eventi #risultatiEventi {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}

/* Linea divisoria rinforzata */
body .section_eventi .gold-divider-strong {
    height: 3px;
    background: #D4AF37;
    border: none;
    margin: 25px 0;
    display: block;
    opacity: 0.9;
    box-shadow: 0 1px 3px rgba(212, 175, 55, 0.4);
}

/* Reset completo per eventuali stili ereditati */
body #risultatiEventi * {
    box-shadow: none !important;
    border-color: transparent !important;
}

/* custom-styles.css */

/* Regole CSS specifiche per i carousel della pagina di ricerca */

/* Forza la visualizzazione e la posizione della slide ATTIVA nei carousel della pagina di ricerca */
#leftSearchCarousel .carousel-item.active,
#rightSearchCarousel .carousel-item.active {
    opacity: 1 !important;           /* Pienamente opaco */
    transform: translateX(0%) !important; /* Posizionalo correttamente (Bootstrap usa transform per lo scorrimento) */
    margin-right: 0 !important;      /* Rimuovi il margine negativo se presente */
	z-index: 2 !important;           /* Assicurati che sia sopra le altre */
}

/* Nasconde completamente le slide NON ATTIVE nei carousel della pagina di ricerca */
#leftSearchCarousel .carousel-item:not(.active),
#rightSearchCarousel .carousel-item:not(.active) {
    display: none !important;        /* Nascondi completamente le slide non attive */
    /* Potresti anche considerare di lasciare:
    opacity: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    (se Bootstrap le posiziona così per le animazioni, ma display:none è più drastico per il test)
    */
}

/* Rimuovi tutte le transizioni per questi specifici carousel durante questo test */
#leftSearchCarousel .carousel-item,
#rightSearchCarousel .carousel-item {
     position: absolute !important; /* Questo è il comportamento standard di Bootstrap per stacking */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; /* Riempi larghezza del .carousel-inner */
    height: 100% !important; /* Riempi altezza del .carousel-inner (che ora ha altezza fissa) */
    transform: translateX(100%); /* Sposta fuori vista gli elementi non attivi */
    transition: transform 0.6s ease-in-out !important; /* 0.6s è una buona velocità per la transizione stessa */
    /* display: block !important;  Assicurati che siano sempre 'block' */
    opacity: 0 !important; /* Nascondi gli elementi non attivi per questo test */
}

/* Assicurati che .carousel-inner non abbia problemi di overflow o dimensioni */
#leftSearchCarousel .carousel-inner,
#rightSearchCarousel .carousel-inner {
    overflow: hidden !important; /* Fondamentale per nascondere le slide fuori dal box */
    width: 100% !important;     /* Assicurati che occupi la larghezza completa */
	height: 151px !important;
	 /* Imposta l'altezza uguale all'altezza della tua immagine, o un valore leggermente maggiore */
    /* Oppure, se vuoi che si adatti dinamicamente all'immagine più grande e non forzare: */
    /* min-height: 151px !important; */
    /* Questo è essenziale se gli elementi interni sono 'position: absolute' */
    position: relative !important; /* Riconfermiamo che il genitore sia posizionato */
}

/* Assicuriamoci che l'immagine occupi lo spazio disponibile senza problemi */
#leftSearchCarousel .carousel-item img,
#rightSearchCarousel .carousel-item img {
     display: block !important;      /* L'immagine è un blocco */
    width: 100% !important;         /* Prende tutta la larghezza del carousel-item */
    height: 100% !important;        /* Prende tutta l'altezza del carousel-item */
    object-fit: cover !important;   /* Mantieni l'aspect ratio coprendo lo spazio */
    position: static !important;    /* Forziamo 'static' per farla fluire normalmente nel suo genitore */
    inset: auto !important;         /* Rimuoviamo l'effetto di 'inset' esterno */
    z-index: auto !important;       /* Rimuoviamo z-index esterno */	
}

/* ************ AGGIUNGI QUESTI STILI PER I CONTROLLI ************ */
/* Assicurati che i controlli (frecce) siano visibili e posizionati correttamente */
#leftSearchCarousel .carousel-control-prev,
#leftSearchCarousel .carousel-control-next,
#rightSearchCarousel .carousel-control-prev,
#rightSearchCarousel .carousel-control-next {
    opacity: 0.5 !important; /* Rendi visibili le frecce (Bootstrap di default le mostra al hover) */
    width: 15% !important; /* Assicurati che l'area cliccabile sia sufficiente */
    /* Se necessario, puoi aggiungere background-color, border, ecc. per renderle più evidenti durante il debug */
	 /* Assicurati che siano posizionati correttamente ai lati */
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important; /* Fino in fondo */
    display: flex !important; /* Assicurati che siano flex per centrare l'icona */
    align-items: center !important; /* Centra verticalmente l'icona */
    justify-content: center !important; /* Centra orizzontalmente l'icona */
    color: white !important; /* Assicurati che il colore dell'icona (se testuale) sia visibile */
	z-index: 10 !important; /* Aumenta questo valore per test. Bootstrap spesso usa 1 o 2. */
}

#leftSearchCarousel .carousel-control-prev-icon,
#leftSearchCarousel .carousel-control-next-icon,
#rightSearchCarousel .carousel-control-prev-icon,
#rightSearchCarousel .carousel-control-next-icon {
    /* Bootstrap usa un background-image per le icone, qui puoi forzare il colore se sono invisibili */
    background-color: rgba(0,0,0,0.7) !important; /* Esempio: sfondo scuro per l'icona */
    border-radius: 50% !important;
    padding: 10px !important;
	width: 30px !important; /* Forza la larghezza dell'icona stessa */
    height: 30px !important; /* Forza l'altezza dell'icona stessa */
    background-size: 100% 100% !important; /* Assicurati che l'immagine di sfondo copra bene */

}
/* ******************************************************************* */

/* 🔹 Forza password - colori personalizzati */
.strength-weak {
  background-color: #dc3545 !important; /* rosso */
}

.strength-medium {
  background-color: #ffc107 !important; /* giallo */
}

.strength-strong {
  background-color: #28a745 !important; /* verde */
}

#password-strength-text {
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

#password-strength-bar {
  height: 6px;
  margin-top: 4px;
  background-color: #e9ecef; /* grigio chiaro di sfondo */
  border-radius: 4px;
  overflow: hidden;
}

#password-strength-fill {
  height: 100%;
  width: 0%;
  background-color: #dc3545; /* default rosso */
  transition: width 0.4s ease, background-color 0.4s ease;
}

/* 🔹 Di base nascosto */
#password-hint {
  display: none;
  font-size: 0.9rem;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.07);
  border-left: 3px solid currentColor;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  margin-top: 0.5rem;
  word-wrap: break-word;
  transition: all 0.3s ease;
}

/* 🔹 Solo quando attivo */
#password-hint.active {
  display: block;
}

/* ✅ In modalità desktop, allinea con la password */
@media (min-width: 768px) {
  #password-hint.active {
    margin-top: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
  }
}

/* ✅ Colori dinamici (il JS imposta color, ma diamo default leggibile) */
#password-hint strong {
  font-weight: 600;
}


/* =======================================================
   FLASH MESSAGES — Tema Oro Unificato
   ======================================================= */

.flash-messages-container {
  max-width: 700px;
  margin: 1.5rem auto;
  text-align: center;
  z-index: 1050;
  background-color: transparent;
  padding: 0;
}

/* --- Ogni messaggio (alert) --- */
.flash-messages-container .alert {
  display: block;
  border-radius: 10px;
  padding: 0.8rem 3.2rem 0.8rem 0.8rem;
  font-weight: 600;
  font-size: 1rem;
  position: relative;
  text-align: center;
  border: 2px solid #D8C40A; /* 🔹 Bordo oro */
  background-color: #D8C40A; /* 🔹 Sfondo oro uniforme */
  color: #002200; /* 🔹 Testo verde scuro */
  margin-bottom: 8px; /* 🔹 Spazio tra messaggi */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* --- Rimuove margine ultimo messaggio --- */
.flash-messages-container .alert:last-child {
  margin-bottom: 0;
}

/* --- Pulsante di chiusura rettangolare --- */
.flash-messages-container .btn-close {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 1;
  background-color: #B39700; /* 🔹 Oro scuro per contrasto */
  color: #002200;
  border: 2px solid #8C7A00; /* 🔹 Oro più scuro */
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
  transition: all 0.25s ease;
}

/* --- Hover effetto blu dorato --- */
.flash-messages-container .btn-close:hover {
  background-color: #6D83FF; /* 🔹 Blu acceso */
  color: #FFFFFF;
  border-color: #D8C40A;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* --- Animazione comparsa --- */
.flash-messages-container .alert.fade.show {
  animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}