.dsm-map {
    /* Customisable from the Elementor Style tab */
    --dsm-ctrl-size: 40px;
    --dsm-ctrl-icon: 20px;
    --dsm-ctrl-gap: 6px;
    --dsm-ctrl-radius: 50%;
    --dsm-ctrl-offset: 10px;
    --dsm-ctrl-bg: #ffffff;
    --dsm-ctrl-color: #5f6368;
    --dsm-ctrl-bg-h: #f1f3f4;
    --dsm-ctrl-color-h: #202124;

    position: relative;
    z-index: 0;
    width: 100%;
    max-width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 8px;
    background: #e5e3df;
    box-sizing: border-box;
}

.dsm-map:fullscreen {
    height: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
}

/* ---- Map looks (filters on the tile layer only, pins are not affected).
   Low specificity on purpose: the Elementor "CSS Filters" control overrides it. ---- */
.dsm-tiles-osm .leaflet-tile-pane {
    filter: saturate(.78) brightness(1.04) contrast(.96);
}
.dsm-tiles-light .leaflet-tile-pane {
    filter: grayscale(.85) brightness(1.07) contrast(.92);
}
.dsm-tiles-dark .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.8);
}

/* ---- Protect the pins from theme / Elementor CSS --------------------- */
.dsm-map .leaflet-marker-icon,
.dsm-map .leaflet-marker-shadow {
    transition: none !important;
    animation: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    opacity: 1;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}

.dsm-map.dsm-no-pin-shadow .leaflet-marker-icon {
    filter: none;
}

.dsm-map .leaflet-tile,
.dsm-map .leaflet-container img {
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---- Popup & tooltip -------------------------------------------------- */
.dsm-map .leaflet-popup-content {
    margin: 10px 14px;
    line-height: 1.4;
}

.dsm-map .leaflet-popup-content-wrapper {
    border-radius: 8px;
}

/* Default pin name: red text next to the pin with a white outline (Google Maps look).
   Low specificity on purpose, so the Elementor "Pin name label" controls override it. */
.dsm-map .leaflet-tooltip {
    white-space: nowrap;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #d93025;
    font: 500 14px/1.3 Roboto, Arial, sans-serif;
    text-shadow:
        -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,
        0 0 3px #fff, 0 0 5px #fff;
    pointer-events: none;
}

.dsm-map .leaflet-tooltip:before {
    display: none;
}

/* ---- Google-style controls ------------------------------------------- */
.dsm-map .leaflet-control.dsm-ctrl-wrap {
    margin: var(--dsm-ctrl-offset) !important;
    border: 0;
    background: none;
    box-shadow: none;
}

.dsm-map .dsm-ctrl {
    display: grid;
    gap: var(--dsm-ctrl-gap);
    grid-template-columns: var(--dsm-ctrl-size);
    grid-auto-rows: var(--dsm-ctrl-size);
}

.dsm-map .dsm-ctrl--pan {
    grid-template-columns: repeat(3, var(--dsm-ctrl-size));
    grid-template-areas:
        ". up zin"
        "left . right"
        ". down zout";
}

.dsm-map .dsm-ctrl--pan.dsm-ctrl--extra {
    grid-template-columns: repeat(4, var(--dsm-ctrl-size));
    grid-template-areas:
        ". up zin ."
        "left . right ."
        ". down zout extra";
}

.dsm-map .dsm-ctrl--pan .dsm-btn--up { grid-area: up; }
.dsm-map .dsm-ctrl--pan .dsm-btn--down { grid-area: down; }
.dsm-map .dsm-ctrl--pan .dsm-btn--left { grid-area: left; }
.dsm-map .dsm-ctrl--pan .dsm-btn--right { grid-area: right; }
.dsm-map .dsm-ctrl--pan .dsm-btn--zin { grid-area: zin; }
.dsm-map .dsm-ctrl--pan .dsm-btn--zout { grid-area: zout; }
.dsm-map .dsm-ctrl--pan .dsm-btn--extra { grid-area: extra; }

.dsm-map .dsm-ctrl .dsm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--dsm-ctrl-size);
    height: var(--dsm-ctrl-size);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--dsm-ctrl-radius) !important;
    background: var(--dsm-ctrl-bg) !important;
    color: var(--dsm-ctrl-color) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    font-size: var(--dsm-ctrl-icon);
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: none;
    -webkit-appearance: none;
    appearance: none;
}

.dsm-map .dsm-ctrl .dsm-btn:hover,
.dsm-map .dsm-ctrl .dsm-btn:focus-visible {
    background: var(--dsm-ctrl-bg-h) !important;
    color: var(--dsm-ctrl-color-h) !important;
}

.dsm-map .dsm-ctrl .dsm-btn svg {
    display: block;
    width: 1em;
    height: 1em;
    pointer-events: none;
}