.radar-map-card {
    overflow: hidden;
}

.radar-map {
    height: min(72vh, 560px);
    min-height: 340px;
    width: 100%;
    /* Stesso tono della basemap: se resta un gap di 1px non si vede bianco */
    background: #e8ecef;
}

/*
 * Linee verticali bianche = gap sub-pixel tra tile (Chrome + DPI Windows + transform3d).
 * Con any3d disabilitato in JS, queste regole chiudono eventuali residui.
 */
.radar-map .leaflet-container {
    background: #e8ecef;
}

.radar-map .leaflet-tile-pane,
.radar-map .leaflet-overlay-pane,
.radar-map .leaflet-tile-container {
    -webkit-transform: translateZ(0);
}

.radar-map .leaflet-tile,
.radar-map .radar-webp-tile {
    outline: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Copre gap da 1px tra tile adiacenti */
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
}

.radar-map .leaflet-tile-container img {
    width: 256px !important;
    height: 256px !important;
    max-width: none !important;
}

.radar-webp-layer,
.radar-webp-tile {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.radar-webp-tile--blend {
    mix-blend-mode: screen;
    opacity: 0.95;
}

.radar-slider {
    cursor: pointer;
}

.radar-slider:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.radar-legend-bar {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(
        to right,
        rgba(0, 250, 250, 0.15) 0%,
        rgb(0, 250, 250) 18%,
        rgb(0, 250, 0) 35%,
        rgb(250, 250, 0) 52%,
        rgb(250, 100, 0) 70%,
        rgb(250, 0, 0) 88%,
        rgb(180, 0, 120) 100%
    );
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.radar-info-list dt {
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 0.1rem;
}

.radar-info-list dd {
    margin-bottom: 0.65rem;
}

.radar-info-list dd:last-child {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .radar-map {
        height: min(55vh, 420px);
    }
}