/* MapLibre control + popup chrome, shared by every MapLibre page.

   Extracted from route_detail.css so main.html and route_type_detail.html get
   the same buttons, zoom, fullscreen, geolocate and attribution styling as the
   route maps instead of MapLibre's unstyled defaults. Container and canvas
   rules live in web_theme.css and already cover every map wrapper.
   ------------------------------------------------------------------------ */

/* ── MapLibre popup: same card look as the Leaflet popups ───────────── */

.poi-gl-popup .maplibregl-popup-content {
    padding: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid #E9F2EE;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    width: 224px;
    font-family: var(--font-primary);
}

.poi-gl-popup .maplibregl-popup-close-button {
    z-index: 2;
    font-size: 18px;
    width: 24px;
    height: 24px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ── MapLibre controls styled like the site's Leaflet controls ─────── */

.maplibregl-ctrl-group {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.maplibregl-ctrl-group button {
    width: 38px !important;
    height: 38px !important;
    background-color: #fff !important;
    border: 2px solid #E9F2EE !important;
    box-sizing: border-box;
}

.maplibregl-ctrl-group button:hover {
    background-color: #f5f5f5 !important;
    border-color: rgba(0, 0, 0, 0.4) !important;
}

.maplibregl-ctrl-group button + button {
    border-top: none !important;
    margin-top: -2px;
}

/* Zoom: pill stack with the widget's icons */
.maplibregl-ctrl-zoom-in {
    border-radius: 20px 20px 0 0 !important;
}

.maplibregl-ctrl-zoom-out {
    border-radius: 0 0 20px 20px !important;
}

.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
    background-image: url("/static/widget_app/images/zoomin.d613d87422fb.svg") !important;
    background-size: 18px 18px !important;
    background-repeat: no-repeat;
    background-position: center;
}

.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
    background-image: url("/static/widget_app/images/zoomout.02ab1b3f4f68.svg") !important;
    background-size: 18px 18px !important;
    background-repeat: no-repeat;
    background-position: center;
}

/* Fullscreen: round button with the widget's icon */
.maplibregl-ctrl-fullscreen,
.maplibregl-ctrl-shrink {
    border-radius: 50% !important;
}

.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
    background-image: url("/static/widget_app/images/fullscreen_0.744d2f3e250e.svg") !important;
    background-size: 24px 24px !important;
    background-repeat: no-repeat;
    background-position: center;
}

.maplibregl-ctrl-shrink .maplibregl-ctrl-icon {
    background-image: url("/static/widget_app/images/fullscreen_1.fa29781e5fcb.svg") !important;
    background-size: 24px 24px !important;
    background-repeat: no-repeat;
    background-position: center;
}

/* Geolocate: round button with the widget's location icon */
.maplibregl-ctrl-geolocate {
    border-radius: 50% !important;
}

.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
    background-image: url("/static/widget_app/images/location.350f79caeaaa.svg") !important;
    background-size: 18px 18px !important;
    background-repeat: no-repeat;
    background-position: center;
}

/* ── Attribution: collapsed info button like the Leaflet custom control ── */

.maplibregl-ctrl-attrib.maplibregl-compact {
    background: none !important;
    border: none;
    min-height: 28px;
    min-width: 28px;
    padding: 0;
    margin: 0 10px 10px 0;
}

/* The ruter.dk logo sits in the same bottom-right corner at z-index 1000, so
   the expanded attribution has to clear it or the credits open underneath the
   logo. 1100 matches what the Leaflet control already used for this. Stays well
   below the map-lock button (1500) and sidebar (1600), which must keep winning,
   and below the site header (2000), which a map child must never reach. */
.maplibregl-ctrl-bottom-right {
    z-index: 1100;
}

.maplibregl-ctrl-attrib.maplibregl-compact-show {
    position: relative;
    z-index: 1100;
    background: #fff !important;
    border: 1px solid #E9F2EE;
    border-radius: 20px;
    height: 28px;
    padding: 0 32px 0 12px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
    line-height: 26px;
    white-space: nowrap;
}

.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button {
    width: 28px;
    height: 28px;
    background-image: url("/static/widget_app/images/info.a46ae24b79da.svg");
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    border: 1px solid #E9F2EE;
    border-radius: 50%;
}

.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button:hover {
    background-color: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.4);
}

.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner {
    font-size: 0.75rem;
    color: #666;
}