/**
 * RELIVE - Sezione "Dove siamo": ricerca del centro piu' vicino
 * File: assets/css/DOVE_cerca.css
 *
 * Stili della casella di ricerca sopra la mappa (#dove-cerca):
 *  - .dove-cerca-riga: casella a pillola + pulsante "Usa la mia posizione"
 *    (in colonna sotto i 640px);
 *  - .dove-cerca-lista: tendina dei suggerimenti con intestazioni di gruppo
 *    colorate (Comuni e CAP = azzurro, Centri RELIVE = verde), voce attiva
 *    da tastiera/mouse, parole cercate in <mark>;
 *  - .dove-risultati: riquadro con le schede dei centri trovati (numero,
 *    nome, tipologia, distanza, indirizzo, contatti, "Scheda completa") ed
 *    effetto flash giallo (.dove-flash, yellow fade) all'arrivo;
 *  - segnaposto dei risultati (.dove-pin.is-vicino) e punto di partenza
 *    "sei qui" (.dove-qui) sulla mappa.
 * Colori dalle variabili di main.css (--color-primary / --color-secondary).
 */

.dove-cerca {
    --dc-azzurro: var(--color-primary, #02A8DD);
    --dc-verde: var(--color-secondary, #27998C);
    max-width: 860px;
    margin: 0 auto 2.75rem;
    scroll-margin-top: 110px;
}

.dove-cerca-label {
    display: block;
    margin: 0 0 .6rem;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dc-verde);
}

.dove-cerca-riga {
    display: flex;
    gap: .75rem;
    align-items: stretch;
}

.dove-cerca-campo {
    position: relative;
    flex: 1;
    min-width: 0;
}

.dove-cerca-icona {
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dc-verde);
    pointer-events: none;
}

.dove-cerca-input {
    width: 100%;
    height: 3.4rem;
    padding: 0 3rem 0 3rem;
    border: 2px solid var(--dc-verde);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 1rem;
    color: var(--color-dark, #2C3E50);
    box-shadow: 0 8px 22px rgba(39, 153, 140, .12);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.dove-cerca-input:focus {
    outline: none;
    border-color: var(--dc-azzurro);
    box-shadow: 0 0 0 4px rgba(2, 168, 221, .18), 0 8px 22px rgba(39, 153, 140, .12);
}
.dove-cerca.is-caricamento .dove-cerca-icona { color: var(--dc-azzurro); animation: dc-pulsa .8s ease-in-out infinite alternate; }
@keyframes dc-pulsa { to { opacity: .35; } }

.dove-cerca-x {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-gray, #6C757D);
    cursor: pointer;
}
.dove-cerca-x:hover,
.dove-cerca-x:focus-visible { background: rgba(39, 153, 140, .12); color: var(--dc-verde); }
.dove-cerca-x[hidden] { display: none; }

.dove-cerca-geo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1.3rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--dc-azzurro), var(--dc-verde));
    color: #fff;
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(2, 168, 221, .25);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.dove-cerca-geo:hover,
.dove-cerca-geo:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(2, 168, 221, .32); }
.dove-cerca-geo:disabled { opacity: .7; cursor: progress; transform: none; }
.dove-cerca-geo.is-caricamento i { animation: dc-gira 1s linear infinite; }
@keyframes dc-gira { to { transform: rotate(360deg); } }

.dove-cerca-nota {
    margin: .5rem 0 0;
    text-align: center;
    font-size: .8rem;
    color: var(--color-gray, #6C757D);
}

/* ---- Tendina --------------------------------------------------------- */
.dove-cerca-lista {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + .4rem);
    max-height: 360px;
    overflow-y: auto;
    margin: 0;
    padding: .4rem 0;
    list-style: none;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(44, 62, 80, .18);
}
.dove-cerca-lista[hidden] { display: none; }

.dove-cerca-gruppo {
    margin: .3rem .6rem .2rem;
    padding: .3rem .75rem;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}
.dove-cerca-gruppo--comuni { background: var(--dc-azzurro); }
.dove-cerca-gruppo--centri { background: var(--dc-verde); }

.dove-cerca-voce {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    column-gap: .4rem;
    padding: .5rem 1.1rem;
    cursor: pointer;
}
.dove-cerca-voce-icona { grid-row: span 2; align-self: center; text-align: center; }
.dove-cerca-voce--comune .dove-cerca-voce-icona { color: var(--dc-azzurro); }
.dove-cerca-voce--centro .dove-cerca-voce-icona { color: var(--dc-verde); }
.dove-cerca-voce-testo { color: var(--color-dark, #2C3E50); font-weight: 500; }
.dove-cerca-voce-sub { font-size: .78rem; color: var(--color-gray, #6C757D); }
.dove-cerca-voce mark { background: transparent; color: inherit; font-weight: 700; }
.dove-cerca-voce.is-attiva { background: rgba(2, 168, 221, .1); }

.dove-cerca-vuoto { padding: .8rem 1.2rem; color: var(--color-gray, #6C757D); font-size: .9rem; }

/* ---- Risultati -------------------------------------------------------- */
.dove-risultati {
    margin-top: 1.4rem;
    padding: 1.3rem;
    border-radius: 22px;
    background: rgba(39, 153, 140, .07);
}
.dove-risultati[hidden] { display: none; }
.dove-risultati-attesa { margin: 0; text-align: center; color: var(--color-gray, #6C757D); }

.dove-risultati-titolo {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dc-verde);
    text-align: center;
}

.dove-risultati-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.dove-ris-card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(44, 62, 80, .08);
    border-top: 4px solid var(--dc-azzurro);
    transition: transform .2s ease, box-shadow .2s ease;
}
.dove-ris-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(44, 62, 80, .14); }

.dove-ris-testa { display: flex; align-items: flex-start; gap: .6rem; }
.dove-ris-num {
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--dc-azzurro);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    display: grid;
    place-items: center;
}
.dove-ris-nomi { flex: 1; min-width: 0; }
.dove-ris-nome { margin: 0; font-size: .98rem; line-height: 1.3; color: var(--color-dark, #2C3E50); }
.dove-ris-tipo { font-size: .75rem; color: var(--dc-verde); font-weight: 600; }
.dove-ris-km {
    flex: none;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: rgba(2, 168, 221, .12);
    color: var(--dc-azzurro);
    font-weight: 700;
    font-size: .82rem;
}

.dove-ris-indirizzo { margin: 0; display: flex; gap: .45rem; font-size: .85rem; color: var(--color-gray, #6C757D); }
.dove-ris-indirizzo i { color: var(--dc-verde); margin-top: .2rem; }

.dove-ris-contatti { display: flex; flex-direction: column; gap: .25rem; }
.dove-ris-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: var(--color-dark, #2C3E50);
    text-decoration: none;
    word-break: break-all;
}
.dove-ris-link i { color: var(--dc-azzurro); width: 1rem; text-align: center; }
.dove-ris-link:hover,
.dove-ris-link:focus-visible { color: var(--dc-azzurro); text-decoration: underline; }

.dove-ris-scheda {
    margin-top: auto;
    align-self: flex-start;
    padding: .45rem 1rem;
    border-radius: 999px;
    border: 2px solid var(--dc-verde);
    color: var(--dc-verde);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.dove-ris-scheda:hover,
.dove-ris-scheda:focus-visible { background: var(--dc-verde); color: #fff; }

/* yellow fade all'arrivo dei risultati */
.dove-risultati.dove-flash { animation: dc-flash 1.6s ease-out; }
@keyframes dc-flash {
    0%   { background-color: rgba(255, 235, 59, .75); }
    100% { background-color: rgba(39, 153, 140, .07); }
}

/* ---- Mappa: risultati e punto di partenza ----------------------------- */
#dove-siamo .dove-pin.is-vicino { color: var(--dc-azzurro, #02A8DD); }
#dove-siamo .dove-pin.is-vicino use { transform: scale(1.3); }

.dove-qui { pointer-events: none; }
.dove-qui-punto { fill: #E53935; stroke: #fff; stroke-width: 4; }
.dove-qui-onda {
    fill: rgba(229, 57, 53, .25);
    stroke: none;
    transform-box: fill-box;
    transform-origin: center;
    animation: dc-qui 1.8s ease-out infinite;
}
@keyframes dc-qui {
    0%   { transform: scale(.6); opacity: .9; }
    100% { transform: scale(2.6); opacity: 0; }
}

@media (max-width: 640px) {
    .dove-cerca-riga { flex-direction: column; }
    .dove-cerca-geo { justify-content: center; height: 3rem; }
    .dove-cerca-label { font-size: 1.15rem; }
    .dove-risultati { padding: 1rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dove-risultati.dove-flash, .dove-qui-onda, .dove-cerca-geo.is-caricamento i,
    .dove-cerca.is-caricamento .dove-cerca-icona { animation: none; }
    .dove-ris-card, .dove-cerca-geo { transition: none; }
}