/* Medusa Mapbox ([data-medusa-map]). */

/* Alto por defecto sin especificidad: una clase de Bricks lo pisa */
:where([data-medusa-map]) {
    height: 640px;
}

@media (max-width: 767px) {
    :where([data-medusa-map]) {
        height: 380px;
    }
}

[data-medusa-map] {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #010827; /* el mar, mientras carga */
}

/* Con el dedo, lo vertical es scroll de la página y lo horizontal mueve el mapa (sin zoom de rueda ni
   cooperativeGestures). Pisa el touch-action: none que pone Mapbox con el arrastre activado. */
[data-medusa-map] .mapboxgl-canvas-container,
[data-medusa-map] .mapboxgl-canvas-container .mapboxgl-canvas {
    touch-action: pan-y !important;
}

/* Aviso con el nombre del punto */
.medusa-map-popup .mapboxgl-popup-content {
    padding: 6px 12px;
    border-radius: 8px;
    background: #010827;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.medusa-map-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color: #010827; }
.medusa-map-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip { border-bottom-color: #010827; }
.medusa-map-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: #010827; }
.medusa-map-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: #010827; }

/* Controles (+/−, pantalla completa) a juego con el mapa */
[data-medusa-map] .mapboxgl-ctrl-group {
    border-radius: 8px;
    overflow: hidden;
}