/**
 * Mappa del backoffice per collocare un punto. Le misure stanno qui e non inline:
 * cosi restano in un solo posto e le media query possono raggiungerle.
 */
.parkivo-location-picker {
    --parkivo-picker-radius: 0.75rem;
    --parkivo-picker-border: rgb(228 228 231);
    --parkivo-picker-surface: rgb(255 255 255);
    --parkivo-picker-muted: rgb(113 113 122);
}

.dark .parkivo-location-picker {
    --parkivo-picker-border: rgb(63 63 70);
    --parkivo-picker-surface: rgb(24 24 27);
    --parkivo-picker-muted: rgb(161 161 170);
}

.parkivo-location-picker__toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.parkivo-location-picker__search {
    flex: 1 1 auto;
}

.parkivo-location-picker__action {
    flex: 0 0 auto;
    white-space: nowrap;
}

.parkivo-location-picker__results {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--parkivo-picker-border);
    border-radius: var(--parkivo-picker-radius);
    background: var(--parkivo-picker-surface);
}

.parkivo-location-picker__result {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: left;
    cursor: pointer;
}

.parkivo-location-picker__result + .parkivo-location-picker__result {
    border-top: 1px solid var(--parkivo-picker-border);
}

.parkivo-location-picker__result:hover {
    background: rgb(244 244 245);
}

.dark .parkivo-location-picker__result:hover {
    background: rgb(39 39 42);
}

.parkivo-location-picker__empty {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--parkivo-picker-muted);
}

.parkivo-location-picker__stage {
    position: relative;
}

.parkivo-location-picker__map {
    width: 100%;
    height: 24rem;
    overflow: hidden;
    border: 1px solid var(--parkivo-picker-border);
    border-radius: var(--parkivo-picker-radius);
    /* Leaflet disegna i propri riquadri sopra i pannelli di Filament senza questo contesto. */
    z-index: 0;
}

@media (max-width: 40rem) {
    .parkivo-location-picker__map {
        height: 18rem;
    }

    .parkivo-location-picker__toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

.parkivo-location-picker__readout {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 400;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
    font-size: 0.75rem;
    line-height: 1rem;
    font-variant-numeric: tabular-nums;
    color: rgb(39 39 42);
}

/* In alto a destra e non in basso: sotto ci sono i crediti di OpenStreetMap, che vanno letti. */
.parkivo-location-picker__clear {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    z-index: 400;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgb(153 27 27);
    cursor: pointer;
}

.parkivo-location-picker__hint {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--parkivo-picker-muted);
}