/* ============================================================
   m24__stadia_map.css
   Standalone stylesheet for the Stadia / Leaflet (OpenStreetMap) maps.
   Kept separate from m24map.css because that file is overwritten on
   deploy. Load this AFTER m24map.css.

   Everything here is scoped to .map[data-map-provider="stadia"], so it
   only affects Stadia maps and never the (legacy) Google maps.
   ============================================================ */


/* ============================================================
   Base dependencies
   These rules live in the shared m24map.css. They are re-declared here,
   scoped to Stadia, so the Stadia map still works if that shared file is
   replaced on deploy and no longer contains them.
   ============================================================ */

/* Hide the server-rendered marker source list (static markers) + options.
   Without this the raw <li> markers render as visible HTML on the page. */
.map[data-map-provider="stadia"] .map__data,
.map[data-map-provider="stadia"] .map__options {
    display: none;
}

/* Positioning context for the canvas, sidebar and nav overlays. */
.map[data-map-provider="stadia"] .map__grid {
    position: relative;
}

.map[data-map-provider="stadia"] .map__nav {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Aspect-ratio canvas box: portrait on mobile, 16:9 on desktop.
   This is what gives the Leaflet map its height. Excluded in fullscreen,
   where the canvas fills the screen instead. */
.map[data-map-provider="stadia"]:not(.map--fullscreen) .map__canvas {
    width: 100%;
    padding-bottom: 125%;
}

@media (min-width: 768px) {
    .map[data-map-provider="stadia"]:not(.map--fullscreen) .map__canvas {
        padding-bottom: 56.25%;
    }
}

/* Popup image (DM/KP cards): fills the thumbnail column. */
.map[data-map-provider="stadia"] .map__sidebar .module__media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The popup uses only the close button; hide the expand button. */
.map[data-map-provider="stadia"] .map__sidebar .button--expand {
    display: none;
}

/* Fullscreen. */
.map[data-map-provider="stadia"].map--fullscreen {
    position: fixed;
    z-index: 5000;
    inset: 0;
    width: 100%;
    max-width: 100% !important;
    padding: 0;
    margin: 0;
}

.map[data-map-provider="stadia"].map--fullscreen .map__canvas {
    position: absolute;
    z-index: auto;
    inset: 0;
    padding: 0;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .08);
}

.map[data-map-provider="stadia"].map--fullscreen .map__grid {
    position: absolute;
    inset: 0;
}


/* ============================================================
   Stadia / Leaflet: base stacking
   ============================================================ */

.map[data-map-provider="stadia"] .map__canvas {
    position: relative;
    overflow: hidden;
}

.map[data-map-provider="stadia"] .canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    isolation: isolate;
}

.map[data-map-provider="stadia"] .leaflet-container {
    width: 100%;
    height: 100%;
    z-index: 1;
}

.map[data-map-provider="stadia"] .leaflet-top,
.map[data-map-provider="stadia"] .leaflet-bottom {
    z-index: 900;
}

.map[data-map-provider="stadia"] .leaflet-control-layers {
    display: none !important;
}

.map[data-map-provider="stadia"] .leaflet-top.leaflet-right {
    z-index: 700;
}


/* ============================================================
   Stadia / Leaflet: custom attribution
   ============================================================ */

.map[data-map-provider="stadia"] .m24-stadia-attribution {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 950;
    max-width: calc(100% - 1rem);
    padding: 2px 6px;
    background: rgba(255, 255, 255, .88);
    color: #333;
    font-size: 11px;
    line-height: 1.35;
    text-align: right;
    pointer-events: auto;
}

.map[data-map-provider="stadia"] .m24-stadia-attribution a {
    color: #0677b8;
    text-decoration: none;
}

.map[data-map-provider="stadia"] .m24-stadia-attribution a:hover {
    text-decoration: underline;
}


/* ============================================================
   Stadia / Leaflet: touch activation cover

   On a touch device a swipe that was meant to scroll the page gets taken by
   Leaflet, which pans the map instead and traps the reader inside it. This cover
   sits over the canvas and absorbs that first touch -- a plain div does not block
   page scrolling, only Leaflet's preventDefault does, so the page scrolls as
   expected while the map stays still.

   z-index 1000 puts it above the canvas (1), the zoom controls (900) and the
   attribution (950), so nothing on the map reacts before activation, but below
   .map__nav (1200) and .map__sidebar (1300) so fullscreen still works.

   Hidden until the script adds .map--needs-activation on a coarse pointer: if the
   script never runs, the cover never appears and the map behaves as before rather
   than being sealed behind a button nothing can dismiss.
   ============================================================ */

.map[data-map-provider="stadia"] .map__activate {
    display: none;
}

.map[data-map-provider="stadia"].map--needs-activation .map__activate {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1rem;
    background: rgba(28, 38, 43, 0.18);
    /* Deliberately no pointer-events:none -- taking the touch is the whole job. */
}

/* Once active the cover shrinks to a strip that lets touches through, so only
   the button stays clickable: it now turns the cover back on. */
.map[data-map-provider="stadia"].map--activated .map__activate {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    padding-top: 1rem;
    pointer-events: none;
}

.map[data-map-provider="stadia"].map--activated .map__activate .button {
    pointer-events: auto;
}

.map[data-map-provider="stadia"] .map__activate .button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border: 0;
    border-radius: 2rem;
    background: #c62828;
    color: #fff;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    cursor: pointer;
}

.map[data-map-provider="stadia"] .map__activate .button:hover,
.map[data-map-provider="stadia"] .map__activate .button:focus-visible {
    background: #a91f1f;
}

/* The cover is a click target the size of the map, so the ring belongs on the
   button rather than the container. */
.map[data-map-provider="stadia"] .map__activate .button:focus-visible {
    outline: 2px solid #0677b8;
    outline-offset: 2px;
}

/* Active, the button only offers a way back out, so it drops the red and
   matches the satellite toggle instead of competing with the markers. */
.map[data-map-provider="stadia"].map--activated .map__activate .button {
    background: rgba(255, 255, 255, 0.92);
    color: #1c262b;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

.map[data-map-provider="stadia"].map--activated .map__activate .button:hover,
.map[data-map-provider="stadia"].map--activated .map__activate .button:focus-visible {
    background: #fff;
}

/* Fullscreen leaves no page to scroll past, so neither the cover nor the button
   has a job there and the map takes touches directly. Placed last so it beats
   the .map--needs-activation and .map--activated rules of equal weight. */
.map[data-map-provider="stadia"].map--fullscreen .map__activate {
    display: none;
}


/* ============================================================
   Stadia / Leaflet: cluster icons on satellite imagery

   MarkerCluster.Default ships dark grey clusters (rgba(44,44,44,.6) over
   rgba(44,44,57,.6)), which sink into aerial photography. On satellite they go
   red instead, the same red as the activation button.

   The inner circle, which carries the count, is opaque: the vendor default is
   translucent, so its contrast against the white text depends on whatever is
   underneath. Opaque #c62828 holds 5.6:1 with white at any zoom, over any
   terrain. The outer ring keeps the transparency and the soft edge.

   No !important needed: these selectors outrank the vendored single-class ones.
   .map--satellite is kept in sync by syncStyleStateClass() in m24__stadia_map.js,
   at init and on every toggle.
   ============================================================ */

.map[data-map-provider="stadia"].map--satellite .marker-cluster-small,
.map[data-map-provider="stadia"].map--satellite .marker-cluster-medium,
.map[data-map-provider="stadia"].map--satellite .marker-cluster-large {
    background-color: rgba(198, 40, 40, 0.4);
}

.map[data-map-provider="stadia"].map--satellite .marker-cluster-small div,
.map[data-map-provider="stadia"].map--satellite .marker-cluster-medium div,
.map[data-map-provider="stadia"].map--satellite .marker-cluster-large div {
    background-color: #c62828;
    color: #fff;
}


/* ============================================================
   Stadia / Leaflet: map-type toggle (road map <-> satellite)

   Bottom left: the zoom controls own the top left, the fullscreen button the top
   right, and the attribution the bottom right. Hidden until the script adds
   .map--has-style-toggle, which it does once it has seen satellite tiles in the
   config -- a button that switches to tiles that were never configured would just
   blank the map.
   ============================================================ */

.map[data-map-provider="stadia"] .map__nav .nav-mapstyle {
    display: none;
}

.map[data-map-provider="stadia"].map--has-style-toggle .map__nav .nav-mapstyle {
    display: block;
    position: absolute;
    bottom: .5rem;
    left: .5rem;
}

.map[data-map-provider="stadia"] .map__nav .nav-mapstyle .button {
    padding: .35rem .7rem;
    border: 0;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.92);
    color: #1c262b;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    cursor: pointer;
}

.map[data-map-provider="stadia"] .map__nav .nav-mapstyle .button:hover {
    background: #fff;
}

/* Pressed is the state, not a hover effect: it says satellite is showing. */
.map[data-map-provider="stadia"] .map__nav .nav-mapstyle .button[aria-pressed="true"] {
    background: rgba(28, 38, 43, 0.9);
    color: #fff;
}

.map[data-map-provider="stadia"] .map__nav .nav-mapstyle .button:focus-visible {
    outline: 2px solid #0677b8;
    outline-offset: 2px;
}


/* ============================================================
   Stadia / Leaflet: fullscreen button
   ============================================================ */

.map[data-map-provider="stadia"] .map__nav {
    z-index: 1200;
}

.map[data-map-provider="stadia"] .map__nav .button,
.map[data-map-provider="stadia"] .map__nav [data-action] {
    pointer-events: all;
}

.map[data-map-provider="stadia"] .map__nav .nav-fullscreen {
    position: absolute;
    top: .5rem;
    right: .5rem;
    pointer-events: auto;
}

.map[data-map-provider="stadia"] .map__nav .button--fullscreen {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.map[data-map-provider="stadia"] .map__nav .button--fullscreen:hover {
    background: rgba(0, 0, 0, .7);
}

.map[data-map-provider="stadia"] .map__nav .button--fullscreen .button__icon {
    background: transparent;
    color: inherit;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}


/* ============================================================
   Stadia / Leaflet: popup card
   Full-width bar anchored to the bottom of the map, with a horizontal
   layout (image thumbnail on the left, text on the right). Same layout
   on desktop and phones.
   ============================================================ */

.map[data-map-provider="stadia"] .map__sidebar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
    width: auto;
    max-width: none;
    height: auto;
    max-height: 60%;
    z-index: 1300;
    display: block;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.map[data-map-provider="stadia"] .map__sidebar[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.map[data-map-provider="stadia"] .map__sidebar .module--map,
.map[data-map-provider="stadia"] .map__sidebar .module--map-popup {
    position: relative;
    background: #fff;
    color: #111;
    border-radius: .5rem .5rem 0 0;
    overflow: hidden;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, .18);
    pointer-events: auto;
}

.map[data-map-provider="stadia"] .map__sidebar .module--map .module__grid {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: auto;
    max-height: min(45vh, 220px);
    overflow: hidden;
    background: #fff;
    color: #111;
}

/* Left column: image thumbnail (hidden on no-image cards). */
.map[data-map-provider="stadia"] .map__sidebar .module__media {
    flex: 0 0 auto;
    width: 150px;
    align-self: stretch;
    overflow: hidden;
}

/* Right column: text content. */
.map[data-map-provider="stadia"] .map__sidebar .module__content {
    /*flex: 1 1 auto;*/
    min-width: 0;
    padding: .9rem 3rem .9rem 1.1rem;
    font-size: .95rem;
    line-height: 1.45;
    overflow-y: auto;
}

.map[data-map-provider="stadia"] .map__sidebar .module__head h2 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 700;
}

.map[data-map-provider="stadia"] .map__sidebar .module__body {
    margin-top: .35rem;
    color: #222;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.map[data-map-provider="stadia"] .map__sidebar address {
    margin: 0;
    font-style: normal;
}

.map[data-map-provider="stadia"] .map__sidebar .module__foot {
    margin-top: .6rem;
}

.map[data-map-provider="stadia"] .map__sidebar .module__body .button--directions {
    display: none;
}


/* ============================================================
   Stadia / Leaflet: slimmer popup at regular (non-fullscreen) size
   Shorter bar: fewer description lines, tighter cap and padding.
   The fullscreen card keeps the roomier defaults.
   ============================================================ */

.map[data-map-provider="stadia"]:not(.map--fullscreen) .map__sidebar .module--map .module__grid {
    max-height: min(40vh,200px);
}

.map[data-map-provider="stadia"]:not(.map--fullscreen) .map__sidebar .module__content {
    padding-top: .7rem;
    padding-bottom: .7rem;
}

.map[data-map-provider="stadia"]:not(.map--fullscreen) .map__sidebar .module__body {
    -webkit-line-clamp: 2;
}

.map[data-map-provider="stadia"]:not(.map--fullscreen) .map__sidebar .module__foot {
    margin-top: .45rem;
}


/* ============================================================
   Stadia / Leaflet: popup buttons
   ============================================================ */

.map[data-map-provider="stadia"] .map__sidebar .module__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: .55rem .9rem;
    border: 1px solid #111;
    border-radius: .125rem;
    background: #fff;
    color: #111;
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.2;
}

.map[data-map-provider="stadia"] .map__sidebar .module__button:hover,
.map[data-map-provider="stadia"] .map__sidebar .module__button:focus {
    background: #f3f3f3;
}

.map[data-map-provider="stadia"] .map__sidebar .module__button .button__icon {
    display: none;
}

.map[data-map-provider="stadia"] .map__sidebar .module__nav {
    position: absolute;
    top: .7rem;
    right: .7rem;
    left: auto;
    bottom: auto;
    z-index: 20;
    pointer-events: auto;
}

.map[data-map-provider="stadia"] .map__sidebar .button--collapse {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #f5f5f5;
    color: #111;
    cursor: pointer;
    pointer-events: auto;
}

.map[data-map-provider="stadia"] .map__sidebar .button--collapse:hover,
.map[data-map-provider="stadia"] .map__sidebar .button--collapse:focus {
    background: #e8e8e8;
}

.map[data-map-provider="stadia"] .map__sidebar .button--collapse .button__icon {
    position: relative;
    display: block;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    color: inherit;
    border-radius: 0;
    box-shadow: none;
    font-size: 0;
    line-height: 1;
    font-style: normal;
    pointer-events: none;
}

.map[data-map-provider="stadia"] .map__sidebar .button--collapse .button__label {
    display: none;
}

.map[data-map-provider="stadia"] .map__sidebar .button--collapse .i-nav-down:before,
.map[data-map-provider="stadia"] .map__sidebar .button--collapse .i-nav-down:after,
.map[data-map-provider="stadia"] .map__sidebar .button--collapse .i-nav-close:before,
.map[data-map-provider="stadia"] .map__sidebar .button--collapse .i-nav-close:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .75rem;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    transform-origin: center;
}

.map[data-map-provider="stadia"] .map__sidebar .button--collapse .i-nav-down:before,
.map[data-map-provider="stadia"] .map__sidebar .button--collapse .i-nav-close:before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.map[data-map-provider="stadia"] .map__sidebar .button--collapse .i-nav-down:after,
.map[data-map-provider="stadia"] .map__sidebar .button--collapse .i-nav-close:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


/* ============================================================
   Stadia / Leaflet: popup tweaks for phones
   (the full-width bottom bar is now the default on all sizes)
   ============================================================ */

@media screen and (max-width: 767px) {
    .map[data-map-provider="stadia"] .map__sidebar {
        max-height: 55%;
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

    .map[data-map-provider="stadia"] .map__sidebar .module__media {
        width: 104px;
    }

    .map[data-map-provider="stadia"] .map__sidebar .module__content {
        padding: .85rem 2.75rem .85rem .9rem;
    }

    .map[data-map-provider="stadia"] .map__sidebar .module--map,
    .map[data-map-provider="stadia"] .map__sidebar .module--map-popup {
        border-radius: .5rem;
    }

    .map[data-map-provider="stadia"] .m24-stadia-attribution {
        max-width: 100%;
        font-size: 10px;
    }
}


/* ============================================================
   Stadia / Leaflet: popup in fullscreen
   In fullscreen the map is very wide, so a full-width bar looks empty.
   Constrain it to a floating card in the bottom-left instead. Only on
   larger screens; on phones the full-width bar is kept.
   ============================================================ */

@media (min-width: 768px) {
    .map[data-map-provider="stadia"]:not(.map--fullscreen) .map__sidebar {
        left: 50%;
        right: auto;
        bottom: 1rem;
        transform: translateX(-50%);
        width: 80%;
        max-width: 800px;
    }

    .map[data-map-provider="stadia"].map--fullscreen .map__sidebar {
        left: 50%;
        right: auto;
        bottom: 1rem;
        transform: translateX(-50%);
        width: min(800px, calc(100% - 2rem));
        max-width: 800px;
        max-height: calc(100% - 2rem);
    }

    .map[data-map-provider="stadia"].map--fullscreen .map__sidebar .module--map,
    .map[data-map-provider="stadia"].map--fullscreen .map__sidebar .module--map-popup {
        border-radius: .5rem;
        box-shadow: 0 10px 32px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .12);
    }

    .map[data-map-provider="stadia"]:not(.map--fullscreen) .map__sidebar .module--map,
    .map[data-map-provider="stadia"]:not(.map--fullscreen) .map__sidebar .module--map-popup {
        border-radius: .5rem;
        box-shadow: 0 -6px 28px rgba(0, 0, 0, .18);
    }
}

/* ============================================================
   Stadia / Leaflet: popup fixes
   - keep "Les mer" button text legible on skinned cards (e.g. skin-dm,
     whose white link colour otherwise makes the button text invisible)
   - hide the media area when a marker has no image
   ============================================================ */

.map[data-map-provider="stadia"] .map__sidebar .module__button,
.map[data-map-provider="stadia"] .map__sidebar .module__button:link,
.map[data-map-provider="stadia"] .map__sidebar .module__button:visited,
.map[data-map-provider="stadia"] .map__sidebar .module__button:hover,
.map[data-map-provider="stadia"] .map__sidebar .module__button:focus {
    color: #111 !important;
}

.map[data-map-provider="stadia"] .map__sidebar .module--no-media .module__media {
    display: none;
}


/* ============================================================
   Stadia / Leaflet: "Vis vei" (directions) button in dynamic popup
   The eKultur token template puts .button--directions inside the head,
   where the base rule (.module--map .button--directions{position:absolute;
   top:0;right:.5em}) pinned it to the top corner, overlapping the close
   button. Render it as an inline link instead.
   ============================================================ */

.map[data-map-provider="stadia"] .map__sidebar .module__head .button--directions {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    padding: 0;
    background: none;
    box-shadow: none;
    color: #0677b8 !important;
    text-decoration: none;
    text-align: left;
}

.map[data-map-provider="stadia"] .map__sidebar .module__head .button--directions:hover,
.map[data-map-provider="stadia"] .map__sidebar .module__head .button--directions:focus {
    text-decoration: underline;
}

.map[data-map-provider="stadia"] .map__sidebar .module__head .button--directions .button__icon {
    background: none;
    color: inherit;
    border-radius: 0;
    padding: 0;
    width: auto;
    height: auto;
    box-shadow: none;
    font-size: 1em;
}

.map[data-map-provider="stadia"] .map__sidebar .module__head .button--directions .button__label {
    display: inline;
    font-weight: normal;
}


/* ============================================================
   Stadia / Leaflet: constrain DM/KP (eKultur) map size
   .ekultur .map{max-width:none} (top of this file) lets the Leaflet map
   fill the full page width, which made these maps much larger than the
   Google originals. Cap them to the content-column width and centre them.
   Adjust max-width to taste.
   ============================================================ */

.ekultur .map[data-map-provider="stadia"] {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   Stadia / Leaflet: marker labels styling
   Labels positioned below markers with good contrast.
   ============================================================ */

.map[data-map-provider="stadia"] .leaflet-marker-label {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #111 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    white-space: nowrap !important;
    /* No max-width: createMarker() already truncates at LABEL_MAX_LENGTH, so the
       box should size to the text it was given. A px cap fought that limit and
       clipped the label before it was ever reached -- and a cap wide enough for
       30 characters of one string is too narrow for the next, because the font
       is proportional. */
    max-width: none !important;
    /* Lets the :hover rule below fire. Leaflet gives .leaflet-tooltip
       pointer-events:none and only lifts it for .leaflet-interactive, which
       interactive:true in m24__stadia_map.js asks for; setting it here too keeps
       the hover working regardless of that option. */
    pointer-events: auto !important;
}

/* Raise the label being read above the ones it overlaps. The z-index alone is
   invisible on a map whose labels don't collide, so the shadow and opaque
   background give the hover something to show for itself. */
.map[data-map-provider="stadia"] .leaflet-marker-label:hover {
    z-index: 1000 !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.map[data-map-provider="stadia"] .leaflet-marker-label::before {
    /*border-top-color: rgba(255, 255, 255, 0.95) !important;*/
}


/* ============================================================
   Stadia / Leaflet: selected marker styling
   Visual feedback when a marker is selected (clicked).
   ============================================================ */

.map[data-map-provider="stadia"] .leaflet-marker-selected {
    filter: drop-shadow(0 0 10px rgba(6, 119, 184, 0.8)) brightness(1.15) !important;
}