.ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 320px !important;
    font-size: 60% !important;
    padding: 18px 0 14px 0;
}
:root[data-theme="dark"] .ol-popup,
:root[data-theme="dark"] .ol-popup .ol-popup-content,
:root[data-theme="dark"] #popup-content {
    color: var(--memo-color-dark-blue) !important;
}

.ol-popup .ol-popup-content {
    padding: 0 20px 0 20px;
}

.ol-popup::after, .ol-popup::before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.ol-popup::after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}
.ol-popup::before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}
.ol-popup-closer {
    text-decoration: none;
    color: #9d9d9d;
    position: absolute;
    top: 3px;
    right: 8px;
    margin: 0 0 2px 2px;
}
.ol-popup small {
    white-space: nowrap;
}

.geolocate_button {
    bottom: 35px !important;
    left: 0.5em !important;
}

/* One slot above the geolocate button (monument draft "Luogo" step only). */
.center_pin_button {
    bottom: 75px !important;
    left: 0.5em !important;
}

.map_memo_button {
    top: 15px !important;
    right: 0.5em !important;
    width: 48px !important;
}

/* La colonna destra dei controlli, dall'alto: schermo intero (top 8, alto 36 — 54 sul
   touch, dove OL ingrandisce i bottoni), poi la ricerca, poi la bussola «Nord verso
   l'alto» (una sola, quella dei default: compare solo a mappa ruotata). I passi sono
   altezza del bottone più 4-8px d'aria: con i valori di prima la ricerca toccava lo
   schermo intero, e sul touch la bussola cadeva DENTRO la ricerca (115 contro una
   ricerca che finisce a 120). Misure verificate su screenshot desktop e cellulare. */
.ol-rotate {
    top: 52px !important;
}
.has_map_search .ol-rotate {
    top: 92px !important;
}
.ol-touch .ol-rotate {
    top: 68px !important;
}
/* ATTENZIONE ai composti: OL mette la classe ol-touch sul VIEWPORT, che sta dentro il
   target dove stanno has_map_search e is_widget_map. «.ol-touch.has_map_search» non
   matcha mai (classi su elementi diversi): l'annidamento giusto è target → viewport. */
.has_map_search .ol-touch .ol-rotate {
    top: 126px !important;
}
/* Nel widget l'angolo in alto a destra è del logo MEMO (top 15, alto ~50): la bussola
   gli sta sotto. Dopo le regole touch, così vince anche sui widget guardati col dito. */
.is_widget_map .ol-rotate {
    top: 75px !important;
}

.map_search_button {
    top: 52px !important;
    right: 0.5em !important;
}
.ol-touch .map_search_button {
    top: 68px !important;
}

.map_search_box {
    position: absolute;
    top: 0;
    right: calc(100% + 6px);
    /* due terzi del raddoppio provato (680px): i toponimi lunghi ci stanno per intero
       senza attraversare mezza mappa; sugli schermi piccoli comanda il max-width */
    width: 450px;
    max-width: calc(100vw - 80px);
    background-color: white;
    padding: 10px;
    border-radius: 4px;
    outline: 1px solid var(--ol-subtle-background-color);
    font-size: 70%;
    text-align: left;
    /* The box stays white in both themes: pin the text color so the dark themes
       (public data-theme, backoffice .dark) don't turn it light-on-white. */
    color: var(--memo-color-dark-blue, #243a62);
}

.map_search_row {
    display: flex;
    gap: 6px;
}

.map_search_box input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 8px;
    font-size: inherit;
    color: inherit;
    background-color: white;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

/* Reset OL's fixed 1.375em square so the button fits its "cerca" label. */
.map_search_box .map_search_submit {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 4px 10px;
    font-size: inherit;
}

.map_search_results {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    max-height: 40vh;
    overflow-y: auto;
}

.map_search_results:empty {
    margin: 0;
}

.map_search_empty {
    padding: 4px 8px;
    color: gray;
    font-style: italic;
}

/* Extra specificity plus explicit resets: OL's .ol-control button rules (fixed
   1.375em square, bold, tight line-height) and .ol-control-transparent button
   (white bg + outline) would otherwise squash the list entries. */
.map_search_box .map_search_result {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 4px 8px;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 4px;
    outline: none;
    color: inherit;
    font-size: inherit;
    font-weight: normal;
    line-height: 1.4;
    cursor: pointer;
}

.map_search_box .map_search_result:hover,
.map_search_box .map_search_result:focus {
    background-color: var(--ol-subtle-background-color, #f0f0f0);
}

.map_search_result small {
    display: block;
    color: gray;
}

#popup-content {
    text-align: center;
}
.mapboxgl-popup-content {
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    min-width: 280px;
    font-size: 150%;
}
:root[data-theme="dark"] .mapboxgl-popup-content {
    color: var(--memo-color-dark-blue) !important;
}
.mapbox-map-wrapper {
    position: relative;
}

/* Mappa 3D come la 2D: lo zoom con la rotellina resta gated dal Ctrl/Cmd
   (cooperativeGestures di Mapbox), ma senza l'overlay «Usa Ctrl + scroll» che
   compariva a ogni scroll — lo scroll semplice scorre la pagina in silenzio.
   Nascondiamo solo l'alert dello scroll; la guida ai gesti touch resta nel testo
   sopra la mappa. */
.mapboxgl-scroll-zoom-blocker {
    display: none !important;
}

/* Bottone «cambio mappa» sovrapposto in alto a sinistra della mappa 3D, sotto i
   controlli di navigazione Mapbox. Fuori dal flusso (absolute), così non lascia spazio
   fra la mappa e il profilo altimetrico e resta a posto qualunque sia l'altezza del canvas. */
.mapbox-custom-control {
    position: absolute;
    top: 110px;
    left: 0.35em;
    z-index: 1;
}

.mapbox-custom-control button {
    border-radius: 8px;
    border: 0;
    font-size: 75%;
    background-color: white;
}

.ol-control-transparent {
    background: none !important;
}
.ol-control-transparent button {
    border-radius: 4px;
    background-color: white;
    outline: 1px solid var(--ol-subtle-background-color);
}
.ol-control-transparent button:hover {
    outline: 1px solid var(--ol-subtle-foreground-color);
}
.ol-box {
    background-color: white;
    padding: 10px;
    border-radius: 4px;
    outline: 1px solid var(--ol-subtle-background-color);
    font-size: 60%;
    position: relative;
    left: 60px;
    top: -130px;
}
/* Il pannello del cambio mappa si dimensionava sul contenuto e stava in 202 px: da quando ci sono
   le ortofoto storiche le voci portano anche regione e annata, e andavano a capo. Mezza volta più
   largo. Il max-width serve agli schermi piccoli: il pannello parte a 60 px dal bordo sinistro
   (vedi .ol-box qui sopra), quindi senza limite uscirebbe dalla mappa. */
#layer_selector_box {
    min-width: 303px;
    max-width: calc(100vw - 80px);
}

.ol-box:hover {
    outline: 1px solid var(--ol-subtle-foreground-color);
    transition: all 0.25s ease;
}

.layerswitch_button {
    top: 105px !important;
    left: 0.5em !important;
}
.ol-touch .layerswitch_button {
    top: 155px !important;
}

.default_view_button {
    bottom: 35px !important;
    right: 0.5em !important;
}

#mapbox-map-canvas, #map-canvas {
    height: 90vh;
    width: 100% !important;
        position: relative;
}

.canvas-with-elevation {
    height: 75vh !important;
}

#pathway_elevation {
    height: 25vh !important;
}
/* Sul touch il profilo si percorre col trascinamento orizzontale (pointer event in
   osm_objects.js): pan-y lascia al browser lo swipe verticale, che resta lo scroll
   della pagina. */
#pathway_elevation svg {
    touch-action: pan-y;
}
#pathway_elevation_container {
    height: 25vh !important;
}

#pathway_surface_legend .surface_legend_item {
    margin-right: 0.7rem;
    white-space: nowrap;
}

#pathway_surface_legend .surface_legend_swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    margin-right: 0.3rem;
    vertical-align: -0.08rem;
}

/* Legenda del bottone POI: cerchietti negli stessi colori per categoria dei marker
   su grafico e mappa (i valori corrispondono a poiRgb in osm_objects.js) */
.poi_swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.85);
    margin-right: 0.25rem;
    vertical-align: -0.08rem;
}
#pathway_poi_toggle .poi_swatch {
    margin-left: 0.5rem;
}
.poi_swatch_water {
    background-color: rgb(48, 129, 208);
}
.poi_swatch_shelter {
    background-color: rgb(10, 105, 20);
}
.poi_swatch_emergency {
    background-color: rgb(225, 75, 65);
}

#pathway_poi_toggle {
    margin-bottom: 0.5rem;
}

/* Marker POI sulla mappa 3D (mapbox.js): cerchio pieno nel colore per categoria con
   anello bianco per staccare dall'ortofoto, come i cerchietti .poi_swatch della legenda. */
.mapbox-poi-marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

/* Pin di scorrimento sulla mappa 3D, sincronizzato con l'hover sul profilo altimetrico
   (mapbox.js in ascolto dell'evento pathway-hover): l'equivalente del pin_walk azzurro
   che la mappa 2D muove sotto il cursore. */
.mapbox-hover-marker {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(96, 165, 250, 0.9);
    border: 2px solid #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* «Copia il link a questa visuale»: linguetta attaccata al bordo inferiore destro della
   mappa (o dell'altimetria, dove c'è) — niente margini, angoli arrotondati solo sotto,
   bordo superiore assente perché il bordo è la mappa stessa. Sobrio come il testo
   d'aiuto sopra la mappa, stesso grigio. */
.map_share_link_row {
    margin: 0;
    text-align: right;
    line-height: 1;
}
.map_share_link {
    border: 1px solid var(--color-gray, #cccccc);
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: none;
    color: var(--color-gray, #6c757d);
    font-size: 60%;
    padding: 1px 8px;
}
.map_share_link:hover {
    border-color: var(--memo-color-dark-blue, #243a62);
    color: var(--memo-color-dark-blue, #243a62);
}
:root[data-theme="dark"] .map_share_link:hover {
    border-color: var(--color-gray, #cccccc);
    color: inherit;
}

div.elevation_tooltip {
  position: absolute;
  text-align: center;
  padding: 1em;
  font: 60% sans-serif;
  background: lightsteelblue;
  border: 0;
  border-radius: 8px;
  pointer-events: none;
}

.grid .tick {
    stroke: lightgrey;
    opacity: 0.1;
}
.grid path {
    stroke-width: 0;
}

.layer > * {
    vertical-align: top;
    font-size: 85% !important;
}
.panel > ul {
    margin: 0.5em;
}
.layer > input {
    margin: 0.55em 0.5em 0 0;
}