/* =========================================
   Shortcode [hsdd_search_filter]
   ========================================= */

.hsdd-saf-wrap {
    display: block;
    /* position+z-index espliciti: crea un proprio stacking context così
       la tendina dell'autocomplete (vedi .hsdd-saf__lookup-list) vince
       sempre sul blocco risultati/loop accanto, indipendentemente
       dall'ordine nel DOM o da z-index impostati altrove. */
    position: relative;
    z-index: 100;
}
.hsdd-saf-wrap--right {
    text-align: right;
}
.hsdd-saf-wrap--right .hsdd-saf {
    margin-left: auto;
    margin-right: 0;
}

.hsdd-saf {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    margin: 0 0 24px;
}

.hsdd-saf__field {
    position: relative;
    /* flex-basis: 0 (non "auto"): un figlio con width:100% non stabilisce
       una dimensione intrinseca utile per "auto", facendo collassare il
       campo a favore del select. Con basis 0 cresce correttamente dallo
       spazio disponibile. */
    flex: 1 1 0;
    min-width: 200px;
    max-width: 560px;
}

.hsdd-saf__icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: #9a9a9a;
    pointer-events: none;
    transition: color .2s ease-in-out;
}

/* Input in stile Material: solo outline, nessun riempimento colorato.
   !important per sovrascrivere gli stili globali di input applicati dal
   tema (Enfold normalizza bordi/ombre di tutti gli input di default). */
.hsdd-saf__input {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 30px 0 16px !important;
    margin: 0 !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 14px !important;
    color: #9a9a9a !important;
    transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out, color .2s ease-in-out;
}
.hsdd-saf__input::placeholder {
    color: #999 !important;
}
.hsdd-saf__input:hover {
    border-color: #b5b5b5 !important;
}
.hsdd-saf__input:focus {
    outline: none !important;
    border-color: #1e9450 !important;
    box-shadow: 0 0 0 4px rgba(30, 148, 80, .15) !important;
    color: #222 !important;
}
.hsdd-saf:focus-within .hsdd-saf__icon {
    color: #1e9450;
}
.hsdd-saf__input::-webkit-search-cancel-button {
    cursor: pointer;
}

/* Select filtro (anno o altra tassonomia): stesso stile Material del
   campo di ricerca, ma stretto — larghezza solo quanto basta al testo. */
.hsdd-saf__filter {
    box-sizing: border-box !important;
    flex: 0 0 auto;
    width: auto !important;
    max-width: 160px;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 13px !important;
    color: #999 !important;
    cursor: pointer;
    transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out, color .2s ease-in-out;
}
.hsdd-saf__filter.has-value {
    color: #333 !important;
}
.hsdd-saf__filter:hover {
    border-color: #b5b5b5 !important;
}
.hsdd-saf__filter:focus {
    outline: none !important;
    border-color: #1e9450 !important;
    box-shadow: 0 0 0 4px rgba(30, 148, 80, .15) !important;
}

/* Gruppo pulsanti toggle (alternativa animata al <select> tassonomia):
   le voci restano affiancate in linea con gli altri filtri; il <select>
   sottostante resta nel DOM (per invariare la logica di filtro) ma nascosto
   visivamente. */
.hsdd-saf__filter--hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* ── Contenitore unico dei gruppi filtro: un'unica "barra" con bordo e
   divisori verticali edge-to-edge fra i gruppi (categoria/tag/organizzatore/
   luogo), invece di tanti box separati. Altezza allineata al campo ricerca. */
.hsdd-saf__filters {
    box-sizing: border-box;
    display: inline-flex;
    align-items: stretch;
    height: 48px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    background: #fff;
    /* niente overflow:hidden: troncherebbe la tendina dell'autocomplete
       organizzatore/luogo, posizionata assolutamente dentro un figlio. */
}
.hsdd-saf__filters > * {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 100%;
    padding: 0 12px;
    border-right: 1px solid #e1e1e1;
}
.hsdd-saf__filters > *:last-child {
    border-right: none;
}
@media (max-width: 767px) {
    .hsdd-saf__filters {
        flex: 1 1 100% !important;
        width: 100% !important;
        height: auto;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .hsdd-saf__filters > * {
        flex: 1 1 100%;
        height: 48px;
        border-right: none;
        border-bottom: 1px solid #e1e1e1;
    }
    .hsdd-saf__filters > *:last-child {
        border-bottom: none;
    }
}

.hsdd-saf__toggle-group {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    overflow-x: auto;
}

.hsdd-saf__toggle-btn {
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 32px;
    margin: 0;
    padding: 0 12px;
    border: none;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    color: #999;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s ease-in-out, color .2s ease-in-out, transform .15s ease-in-out;
}
.hsdd-saf__toggle-btn:hover {
    background: #f2f2f2;
    color: #333;
}
.hsdd-saf__toggle-btn:active {
    transform: scale(.96);
}
.hsdd-saf__toggle-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(30, 148, 80, .15);
}
.hsdd-saf__toggle-btn.is-active {
    background: var( --saf-color, #1e9450 );
    color: #fff;
}
.hsdd-saf__toggle-btn.is-active:hover {
    background: var( --saf-color, #1e9450 );
}

/* Mobile/tablet: la toolbar (campo + filtri) si impila invece di rimanere
   affiancata. !important per vincere l'inline-flex/width di base e
   qualunque stile di Enfold applicato allo stesso breakpoint. */
@media (max-width: 767px) {
    .hsdd-saf {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    .hsdd-saf-wrap--right .hsdd-saf {
        margin-left: 0 !important;
    }
    .hsdd-saf__field {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .hsdd-saf__filter {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* ── Campo di ricerca espandibile (search_style="expand") ──
   Stato iniziale: solo l'icona, quadrato quanto l'altezza del campo.
   Al click/focus si espande alla dimensione che occuperebbe normalmente
   nel layout (flex: 1 1 0, come il campo "full"). */
.hsdd-saf__field--expandable {
    flex: 0 0 48px !important;
    width: 48px !important;
    max-width: 48px !important;
    min-width: 48px !important;
    /* niente overflow:hidden: a riposo tagliava via il bordo destro
       dell'input per arrotondamento sub-pixel — il testo dell'input non
       necessita comunque di essere clippato dal contenitore, lo fa già
       nativamente l'elemento stesso. */
    transition: flex-basis .25s ease-in-out, width .25s ease-in-out, max-width .25s ease-in-out, min-width .25s ease-in-out;
}
.hsdd-saf__field--expandable .hsdd-saf__icon {
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}
.hsdd-saf__field--expandable .hsdd-saf__input {
    cursor: pointer;
}
.hsdd-saf__field--expandable.is-expanded {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: 560px !important;
    min-width: 200px !important;
}
.hsdd-saf__field--expandable.is-expanded .hsdd-saf__icon {
    right: 16px;
    left: auto;
    transform: translateY(-50%);
    cursor: default;
}
.hsdd-saf__field--expandable.is-expanded .hsdd-saf__input {
    cursor: text;
}
@media (max-width: 767px) {
    .hsdd-saf__field--expandable.is-expanded {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* ── Tagcloud a checkbox (es. tag, stile pillola) ── */
.hsdd-saf__tagcloud {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    overflow-x: auto;
}
.hsdd-saf__tag-pill {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 16px;
    background: transparent;
    font-size: 13px;
    color: #999;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.hsdd-saf__tag-pill:hover {
    background: #f2f2f2;
    color: #333;
}
.hsdd-saf__tag-pill input {
    /* Checkbox nativa nascosta visivamente ma accessibile (focus/tab). */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.hsdd-saf__tag-pill input:focus-visible ~ span {
    outline: 2px solid #1e9450;
    outline-offset: 2px;
}
/* Colore esplicito anche sullo <span> (non solo sul label) per non
   dipendere dall'ereditarietà di "color" in nessun contesto/tema. */
.hsdd-saf__tag-pill.is-active,
.hsdd-saf__tag-pill:has(input:checked) {
    border-color: var( --saf-color, #1e9450 );
    background: var( --saf-color, #1e9450 );
}
.hsdd-saf__tag-pill.is-active,
.hsdd-saf__tag-pill.is-active span,
.hsdd-saf__tag-pill:has(input:checked),
.hsdd-saf__tag-pill:has(input:checked) span {
    color: #fff;
}

/* ── Autocomplete organizzatore/luogo ── */
.hsdd-saf__lookup {
    position: relative;
    flex: 0 0 auto;
    width: 180px;
    max-width: 100%;
    height: 100%;
}
.hsdd-saf__lookup-input {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    color: #333 !important;
}
@media (max-width: 767px) {
    .hsdd-saf__lookup { width: 100%; }
}
.hsdd-saf__lookup-list {
    /* position:fixed impostato via JS (vedi positionLookupList in
       search-and-filters.js): la tendina e il blocco risultati possono
       trovarsi in due colonne/contenitori diversi del page builder (due
       stacking context indipendenti), quindi position:absolute + z-index
       locale non basta a garantire che vinca sempre — fixed la porta a
       livello root della pagina. */
    position: fixed;
    z-index: 9999;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    max-height: 240px;
    overflow-y: auto;
}
.hsdd-saf__lookup-list li {
    display: block;
    line-height: 1.26em;
    padding: 8px;
    border-bottom: 1px solid #e1e1e1;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}
.hsdd-saf__lookup-list li:last-child {
    border-bottom: none;
}
.hsdd-saf__lookup-list li:hover {
    background: #f2f2f2;
}
/* Overlay + preloader sull'area risultati, non nel campo di ricerca:
   creati/posizionati via JS dentro il blocco hsdd_loop targettizzato. */
.hsdd-saf__results-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .86);
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    transition: opacity .2s ease-in-out;
}
.hsdd-saf__results-overlay.is-visible {
    opacity: 1;
}

/* L'SVG viene usato come mask-image (silhouette): il colore visibile
   arriva dal gradiente animato dietro, non dal fill originale dell'SVG. */
.hsdd-saf__results-spinner {
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-image: linear-gradient(45deg, #1e9450, #e74c3c, #e9b645, #1e9450);
    background-size: 300% 300%;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity .2s ease-in-out;
    animation: hsdd-saf-gradient-shift 3s ease-in-out infinite;
}
.hsdd-saf__results-spinner.is-visible {
    opacity: 1;
}
/* Variante "bars-fade": barre verticali, ruotate 90° per renderle orizzontali. */
.hsdd-saf__results-spinner--bars {
    transform: translateX(-50%) rotate(90deg);
}
@keyframes hsdd-saf-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .hsdd-saf__results-spinner {
        animation: none;
    }
}

.hsdd-saf__no-results {
    padding: 24px;
    text-align: center;
    opacity: .6;
    font-size: 14px;
}

/* ── Variante "fade" (results_transition="fade"): fade-out rapido degli
   item attuali, fade-in rapido dei nuovi — nessun overlay/spinner. ── */
.hsdd-saf-fade-out {
    transition: opacity .15s ease-in-out !important;
    opacity: 0 !important;
}
.hsdd-saf-fade-in {
    opacity: 0;
    transition: opacity .2s ease-in-out;
}
.hsdd-saf-fade-in.is-visible {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .hsdd-saf-fade-out,
    .hsdd-saf-fade-in {
        transition: none !important;
    }
}

/* ── Animazione ingresso card (fade + slide dall'alto), a cascata ── */
.hsdd-loop__item {
    animation: gal-card-fade-slide-in .75s ease-out both;
}
.hsdd-loop__item:nth-child(1)  { animation-delay: 0ms; }
.hsdd-loop__item:nth-child(2)  { animation-delay: 50ms; }
.hsdd-loop__item:nth-child(3)  { animation-delay: 100ms; }
.hsdd-loop__item:nth-child(4)  { animation-delay: 150ms; }
.hsdd-loop__item:nth-child(5)  { animation-delay: 200ms; }
.hsdd-loop__item:nth-child(6)  { animation-delay: 250ms; }
.hsdd-loop__item:nth-child(7)  { animation-delay: 300ms; }
.hsdd-loop__item:nth-child(8)  { animation-delay: 350ms; }
.hsdd-loop__item:nth-child(9)  { animation-delay: 400ms; }
.hsdd-loop__item:nth-child(10) { animation-delay: 450ms; }
.hsdd-loop__item:nth-child(11) { animation-delay: 500ms; }
.hsdd-loop__item:nth-child(12) { animation-delay: 550ms; }

@keyframes gal-card-fade-slide-in {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hsdd-loop__item {
        animation: none;
    }
}