.elementor-692 .elementor-element.elementor-element-40e409c{--display:flex;}.elementor-692 .elementor-element.elementor-element-6747a5a{background-color:var( --e-global-color-secondary );}#elementor-popup-modal-692 .dialog-widget-content{background-color:var( --e-global-color-secondary );box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}#elementor-popup-modal-692{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-692 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-692 .dialog-close-button{display:flex;}@media(max-width:767px){.elementor-692 .elementor-element.elementor-element-40e409c{--width:100%;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}#elementor-popup-modal-692 .dialog-widget-content{border-radius:10px 10px 10px 10px;}#elementor-popup-modal-692 .dialog-message{padding:10px 10px 10px 10px;}}/* Start custom CSS for shortcode, class: .elementor-element-6747a5a *//* 1. Forza il widget a occupare tutto lo spazio */
.searchandfilter {
    width: 100% !important;
}

/* 2. Allineamento orizzontale su tutta la riga */
.searchandfilter ul {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap; /* Evita che vadano a capo */
    justify-content: space-between; /* Distribuisce lo spazio tra gli elementi */
    align-items: flex-end;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* 3. Fai in modo che ogni colonna (li) si allarghi */
.searchandfilter ul li {
    flex: 1; /* Ogni campo prende una parte uguale della colonna */
    margin-right: 15px; /* Spazio tra i campi */
}

/* L'ultimo elemento (il tasto Filtra) non deve avere margine a destra */
.searchandfilter ul li:last-child {
    text-align: center;/* Il bottone non si allarga, mantiene la sua dimensione */
}

/* 4. Rendi i campi input e select larghi quanto la loro colonna */
.searchandfilter select, 
.searchandfilter input[type="text"] {
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px;
    border: none;
    border-radius: 4px;
}

/* 5. Stile dei titoli (Etichette) */
.searchandfilter h4 {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    white-space: nowrap; /* Evita che il titolo vada su due righe */
}

/* 6. Bottone Filtra */
.searchandfilter input[type="submit"] {
    background-color: #003549;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif !important;
}

/* Si attiva solo su schermi più piccoli di 768px (Tablet e Mobile) */
@media (max-width: 767px) {
    
    .searchandfilter ul {
        display: flex !important;
        flex-direction: column !important; /* Mette gli elementi uno sotto l'altro */
        align-items: flex-start !important; /* Allinea tutto a sinistra */
        width: 100% !important;
    }

    .searchandfilter li {
        width: 100% !important; /* Ogni campo occupa tutta la larghezza disponibile */
        margin-right: 0 !important; /* Rimuove il margine laterale del desktop */
        margin-bottom: 20px !important; /* Spazio tra un campo e l'altro */
    }

    .searchandfilter li:last-child {
        margin-bottom: 0 !important;
    }

    /* Rende le tendine e il campo ricerca larghi al 100% */
    .searchandfilter select, 
    .searchandfilter input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Allinea il tasto FILTRA a sinistra */
    .searchandfilter input[type="submit"] {
        width: auto !important; /* Il tasto non deve per forza essere largo quanto tutto lo schermo */
        min-width: 150px;
        text-align: left;
    }
}/* End custom CSS */