/* ═══════════════════════════════════════
   Location Filter — CSS
   Stile: beige/elegante (match screenshot)
   ═══════════════════════════════════════ */

:root {
    --lf-bg:       #f5f0eb;
    --lf-border:   #d9cfc4;
    --lf-text:     #3a3530;
    --lf-muted:    #8a7f75;
    --lf-accent:   #3a3530;
    --lf-radius:   4px;
    --lf-font:     inherit;
}

/* ── Filter bar ── */
.lf-filter-bar {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     flex-end;
    gap:             16px;
    background:      var(--lf-bg);
    padding:         24px 32px;
}

.lf-filter-group {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    flex:           1 1 0;
    min-width:      140px;
}

.lf-filter-group label {
    font-size:      10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--lf-muted);
    font-family:    var(--lf-font);
    font-weight:    500;
}

.lf-filter-bar select,
.lf-filter-bar input[type="number"] {
    appearance:       none;
    -webkit-appearance: none;
    background:       #fff;
    border:           1px solid var(--lf-border);
    border-radius:    var(--lf-radius);
    color:            var(--lf-text);
    font-family:      var(--lf-font);
    font-size:        14px;
    padding:          10px 36px 10px 14px;
    width:            100%;
    cursor:           pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7f75' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 14px center;
    transition:       border-color .2s;
}

.lf-filter-bar input[type="number"] {
    background-image:    none;
    padding-right:       14px;
}

.lf-filter-bar select:focus,
.lf-filter-bar input[type="number"]:focus {
    outline:      none;
    border-color: var(--lf-accent);
}


/* ── Buttons ── */
#lf-filter-btn,
#lf-reset-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    border-radius:  0;
    cursor:         pointer;
    font-family:    var(--lf-font);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding:        11px 22px;
    transition:     background .2s, color .2s;
    white-space:    nowrap;
    flex-shrink:    0;
    background:     transparent;
    border:         1px solid #272726;
    color:          #272726;
}

#lf-filter-btn:hover,
#lf-reset-btn:hover {
    background: #272726;
    color:      #fff;
}

#lf-filter-btn:disabled {
    opacity: .5;
    cursor:  not-allowed;
}

/* ── Results count ── */
.lf-results-count {
    font-size:    13px;
    color:        var(--lf-muted);
    padding:      12px 32px 0;
    font-style:   italic;
}

/* ── Grid ── */
.lf-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
    padding:               32px 0;
    position:              relative;
    transition:            opacity .3s;
}

.lf-grid.lf-loading {
    opacity:        .4;
    pointer-events: none;
}

@media (max-width: 900px) {
    .lf-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .lf-grid {
        grid-template-columns: 1fr;
    }
    .lf-filter-bar {
        padding: 20px 16px;
    }
}

/* ── Card: stilizzata da Elementor loop template 321 ── */
/* Aggiungi qui eventuali override se necessario */

/* ── No results ── */
.lf-no-results {
    grid-column: 1 / -1;
    text-align:  center;
    color:       var(--lf-muted);
    font-style:  italic;
    padding:     48px 0;
}