/* =================================
   ROUTE DETAIL PAGE STYLES
   Uses CSS vars from fonts.css
   ================================= */

/* --- Reset for this page --- */
.route-page * {
    -webkit-user-select: text;
    user-select: text;
}

.route-page {
    margin: 0;
    padding: 0;
}

/* --- Header Image (contained, rounded — like old ruter.dk) --- */
.route-header-image-wrap {
    max-width: var(--w-page);
    margin: 0 auto;
    padding: 8px 10px 0;
}

.route-header-image {
    max-height: 240px;
    overflow: hidden;
    border-radius: var(--radius);
    display: flex;
    justify-content: center;
    align-items: center;
}

.route-header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.route-image-copyright {
    text-align: right;
    font-size: var(--font-size-xs);
    color: #888;
    margin: 4px 0 0;
    padding-right: 2px;
}

/* --- Title Section --- */
.route-title-section {
    max-width: var(--w-text);
    margin: 0 auto;
    padding: 24px 24px 8px;
    text-align: left;
}

.route-type-tag {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    margin-bottom: 8px;
    opacity: 0.8;
    transition: opacity 0.15s;
}

.route-type-tag:hover {
    opacity: 1;
    text-decoration: none;
}

.route-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
    line-height: var(--line-height-tight);
    margin: 0 0 8px;
    color: #191919;
}

.route-subheading {
    font-size: var(--font-size-xl);
    font-weight: 200;
    color: #555;
    margin: 0 0 16px;
}

/* --- Stats Bar --- */
.route-stats-bar {
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 0;
}

.route-stats-bar__inner {
    max-width: var(--w-text);
    margin: 0 auto;
    padding: 0 24px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.route-stat {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.route-stat__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: #191919;
    line-height: 1;
}

.route-stat__unit {
    font-size: var(--font-size-sm);
    color: #888;
}

.route-stat__badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.route-stat__badge--signed {
    background: #27ae60;
    color: #fff;
}

.route-stat__badge--unsigned {
    background: #ddd;
    color: #555;
}

/* --- Map Section (green-tinted background like old ruter.dk) --- */
.route-map-section {
    width: 100%;
}

@media (min-width: 848px) {
    .route-map-section {
        background-color: #f1f3ea;
        padding: 36px 36px 24px;
    }
}

/* --- Action Bar --- */
.route-action-bar {
    max-width: var(--w-text);
    margin: 0 auto;
    padding: 20px 2rem 24px;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.route-action-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: 4px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    background: #191919;
    color: #fff;
    transition: background 0.2s;
}

.route-action-bar__btn:hover {
    background: #333;
    color: #fff;
    text-decoration: none;
}

.route-action-bar__btn--secondary {
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
}

.route-action-bar__btn--secondary:hover {
    background: #f5f5f5;
    color: #191919;
}

.route-action-bar__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* --- Description Section --- */
.route-content {
    max-width: var(--w-text);
    margin: 0 auto;
    padding: 2.5rem 2rem;
}

.route-content__description {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: #333;
    white-space: pre-line;
}

/* --- Map Section --- */
.route-map-wrapper {
    position: relative;
    max-width: var(--w-page);
    margin: 0 auto;
    padding: 0 2rem;
}

@media (min-width: 848px) {
    .route-map-wrapper {
        padding: 0;
    }
}

.route-map-container {
    height: 70vh;
    min-height: 400px;
    max-height: 700px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid #e0e0e0;
    position: relative;
}

.route-map-container .leaflet-container {
    height: 100%;
    width: 100%;
}

/* Map sidebar panel */
.route-map-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 340px;
    max-width: 90%;
    height: 100%;
    background: #fff;
    box-shadow: -3px 0 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.route-map-sidebar.open {
    transform: translateX(0);
}

.route-map-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.route-map-sidebar__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    padding: 0.25rem;
    line-height: 1;
}

.route-map-sidebar__close:hover {
    color: #191919;
}

.route-map-sidebar__body {
    padding: 1rem;
    flex: 1;
    overflow-y: auto;
}

.route-map-sidebar__stage-name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 0.5rem;
}

.route-map-sidebar__stage-desc {
    font-size: var(--font-size-sm);
    color: #555;
    line-height: var(--line-height-normal);
    margin-bottom: 1rem;
    white-space: pre-line;
}

.route-map-sidebar__images {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.route-map-sidebar__images img {
    width: 100%;
    border-radius: var(--radius);
    object-fit: cover;
    max-height: 200px;
}

.route-map-sidebar__gpx {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: #191919;
    color: #fff;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: background 0.2s;
}

.route-map-sidebar__gpx:hover {
    background: #333;
    color: #fff;
    text-decoration: none;
}

/* --- Stages Section --- */
.route-stages {
    max-width: var(--w-page);
    margin: 0 auto;
    padding: 0 2rem 3rem;
}

.route-stages__heading {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: 1.5rem;
}

.route-stages__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Stage card */
.stage-card {
    display: flex;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
}

.stage-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.stage-card__color-bar {
    width: 5px;
    flex-shrink: 0;
}

.stage-card__body {
    flex: 1;
    padding: 1rem 1.25rem;
    min-width: 0;
}

.stage-card__number {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

.stage-card__name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 0 0 0.4rem;
    line-height: var(--line-height-tight);
}

.stage-card__description {
    font-size: var(--font-size-sm);
    color: #666;
    line-height: var(--line-height-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.stage-card__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stage-card__gpx {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.6rem;
    background: #f5f5f5;
    color: #333;
    border-radius: var(--radius);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: background 0.15s;
}

.stage-card__gpx:hover {
    background: #e0e0e0;
    color: #191919;
    text-decoration: none;
}

.stage-card__image {
    width: 140px;
    flex-shrink: 0;
    overflow: hidden;
}

.stage-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Footer --- */
.route-footer {
    background: #191919;
    color: #fff;
    text-align: center;
    padding: 2rem;
}

.route-footer a {
    color: #fff;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

.route-footer a:hover {
    text-decoration: underline;
    color: #fff;
}

/* --- Full-page map (route_map.html) --- */
.route-fullmap {
    position: fixed;
    inset: 0;
    z-index: 0;
}

.route-fullmap .leaflet-container {
    height: 100%;
    width: 100%;
}

.route-fullmap .route-map-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

.route-fullmap-back {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1001;
    padding: 0.5rem 0.85rem;
    background: #fff;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: #333;
    text-decoration: none;
}

.route-fullmap-back:hover {
    background: #f4f4f4;
    color: #333;
    text-decoration: none;
}

/* --- Responsive --- */
@media (min-width: 768px) {
    .route-stages__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .route-hero {
        min-height: 240px;
    }

    .route-hero__content {
        padding: 2rem 1.25rem 1.5rem;
    }

    .route-info-bar__inner {
        padding: 0.75rem 1.25rem;
    }

    .route-info-bar__gpx {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .route-content {
        padding: 2rem 1.25rem;
    }

    .route-map-wrapper {
        padding: 0 1rem;
    }

    .route-map-container {
        height: 50vh;
        min-height: 300px;
    }

    .route-map-sidebar {
        width: 280px;
    }

    .route-stages {
        padding: 0 1.25rem 2rem;
    }

    .stage-card__image {
        width: 100px;
    }
}

/* --- Surface Legend --- */
.surface-legend {
    position: absolute;
    bottom: 28px;
    left: 10px;
    z-index: 500;
    background: rgba(255, 255, 255, 0.92);
    border-radius: var(--radius);
    padding: 6px 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.15);
    font-size: var(--font-size-xs);
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: none;
}

.surface-legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.surface-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.surface-legend__dash {
    width: 18px;
    height: 0;
    border-top: 2px dashed;
    flex-shrink: 0;
}

/* ── OSM auto-generated disclaimer ── */
.osm-disclaimer {
    /* Full-bleed band: the amber background spans the viewport, the text
       inside is held to the page column so it lines up with the stats row
       and the description rather than running to the window edges. */
    background: #fff8e1;
    border-top: 1px solid #f6dfa0;
    border-bottom: 1px solid #f6dfa0;
    color: #5d4037;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.osm-disclaimer__inner {
    max-width: var(--w-text);
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-left: 4px solid #f9a825;
}

.osm-disclaimer__icon {
    font-size: 1.1em;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Compact variant for the map top bar */
.osm-disclaimer--compact {
    /* Sits inline in the route-map top bar, not in the page column, so it
       carries its own flex + accent instead of relying on __inner. */
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-left: 3px solid #f9a825;
    padding: 4px 12px;
    font-size: var(--font-size-xs);
    background: rgba(255, 248, 225, 0.95);
}

/* --- Highlights (POI carousel) --- */
.route-content__credit {
    margin-top: 1rem;
    font-size: var(--font-size-sm);
    color: #888;
}

.route-highlights {
    max-width: var(--w-page);
    margin: 0 auto;
    padding: 0 2rem 2.5rem;
}

.route-highlights__heading {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: 1.5rem;
}

/* ── Sidebar additions (stage stats, section heading, address) ──────── */

.sidebar-stage-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 12px 0 4px;
    font-size: var(--font-size-sm);
    color: #444;
}

.sidebar-section-heading {
    margin: 20px 0 10px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #888;
}

.poi-address {
    margin: 12px 0 0;
    font-size: var(--font-size-sm);
    color: #555;
}

/* ── Stage selector band + panels (original ruter.dk structure) ────── */

.stage-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e5e1d8;
}

.stage-selector__center {
    text-align: left;
    min-width: 0;
    margin-right: auto;
    order: -1;
}

.stage-selector__count {
    font-size: var(--font-size-sm);
    color: #557b68;
    margin-bottom: 0.25rem;
}

.stage-selector__title {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stage-selector__btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 22px;
    border: none;
    background: #fff;
    color: #229966;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: background 0.15s;
}

.stage-selector__btn:hover {
    background: #f3f3f3;
}

.stage-panel {
    display: none;
}

.stage-panel.active {
    display: block;
}

.stage-panel__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin-bottom: 1.25rem;
}

.stage-panel__description {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: #333;
    white-space: pre-line;
    max-width: var(--w-text);
}

.stage-panel__highlights {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 1.25rem 0 0.75rem;
    -webkit-overflow-scrolling: touch;
}

.stage-panel__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 1rem;
}

@media (max-width: 600px) {
    .stage-selector__title {
        font-size: var(--font-size-lg);
    }
}

/* ── POI sidebar slideshow (widget-style) ───────────────────────────── */

.poi-slideshow {
    position: relative;
    width: 100%;
    height: 220px;
    background: #f2efe9;
    overflow: hidden;
    flex-shrink: 0;
}

.poi-slideshow__slide {
    display: none;
    position: absolute;
    inset: 0;
}

.poi-slideshow__slide.active {
    display: block;
}

.poi-slideshow__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.poi-slideshow__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 16px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: #229966;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.poi-slideshow__btn--prev { left: 8px; }
.poi-slideshow__btn--next { right: 8px; }

.poi-slideshow__btn:hover {
    background: #fff;
}

.poi-slideshow__counter {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    font-size: 0.7rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 10px;
}

/* Stage panels: content indented like the route description, spacing above */
.route-stages {
    padding-top: 2.5rem;
}

.stage-selector {
    max-width: var(--w-page);
    margin-left: auto;
    margin-right: auto;
}

.stage-panel__stats,
.stage-panel__description,
.stage-panel .route-content__credit,
.stage-panel__highlights,
.stage-panel__actions {
    max-width: var(--w-text);
    margin-left: auto;
    margin-right: auto;
}

/* ── Map markers: category icons + bike host labels (widget styles) ── */

.poi-icon-container,
.poi-circle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.poi-circle {
    border-radius: 50%;
    border: 1px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.poi-icon-marker,
.poi-circle-marker,
.good-bike-host-label {
    background: none;
    border: none;
}

/* The yellow now belongs to the icon alone — the name rides beside it as plain
   map text. web_app only; the widget (static/widget_app/css/map.css) keeps the
   full pill.

   Every host icon is already a filled coloured circle with a white glyph
   (NRUT-*.svg by category, or the yellow cykelvaert_s.svg for hosts with no
   category), so the yellow shows as a RING around that circle rather than as a
   fill behind it. Ring thickness is (--bh-badge - image width) / 2 — one knob,
   below. Mirrored in full_map.css, which keeps its own copy of these rules. */
.bike-host-label-container {
    display: flex;
    align-items: center;
    background: none;
    padding: 0;
    box-shadow: none;
    white-space: nowrap;
    min-height: 24px;
    cursor: pointer;
    transition: transform 0.15s ease;
    width: max-content;
}

.bike-host-label-container:hover {
    transform: scale(1.05);
}

.bike-host-icon {
    --bh-badge: 26px;          /* 26 with an 18px icon = a 4px yellow ring */
    width: var(--bh-badge);
    height: var(--bh-badge);
    background: #FCEC2A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.bike-host-label-container:hover .bike-host-icon {
    background: #FFF474;
}

.bike-host-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* With the pill gone the label sits straight on the basemap, so it has to carry
   its own contrast: a white halo painted behind the glyphs. paint-order keeps
   the stroke under the fill so the letterforms stay sharp instead of being
   eaten from the outside in. */
.bike-host-label-text {
    font-size: 0.72rem;
    font-weight: 600;
    color: #4D588C;
    paint-order: stroke fill;
    -webkit-text-stroke: 3px #fff;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* Stage panel highlights header — same layout as the route highlights section */
.stage-panel__hl-header {
    max-width: var(--w-text);
    margin: 1.75rem auto 0;
}


/* ── 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;
}

.maplibregl-ctrl-attrib.maplibregl-compact-show {
    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;
}

/* ── Marker hover — same feel as the widget map ─────────────────────── */

.poi-icon-marker,
.poi-circle-marker {
    cursor: pointer;
}

.poi-icon-marker .poi-icon-container img,
.poi-circle-marker .poi-circle {
    transition: transform 0.2s ease;
}

.poi-icon-marker:hover .poi-icon-container img,
.poi-circle-marker:hover .poi-circle {
    transform: scale(1.15);
}


/* ruter.dk logo bottom-left on MapLibre route maps */
#map-container .ruterdk-logo {
    left: 10px;
    right: auto;
    bottom: 6px;
}

/* ── POI map button + category filter panel (route maps) ───────────── */

.map-poi-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background-color: #fff !important;
    border: 2px solid #E9F2EE !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.map-poi-btn:hover,
.map-poi-btn.active {
    background-color: #E9F2EE !important;
    border-color: rgba(0, 0, 0, 0.4) !important;
}

.poi-filter-panel {
    position: absolute;
    top: 10px;
    right: 58px;
    bottom: 10px;
    z-index: 900;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: #fff;
    border: 2px solid #E9F2EE;
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    max-width: 260px;
    height: fit-content;
    max-height: calc(100% - 20px);
    overflow-y: auto;
    padding: 10px 12px;
}

.poi-filter-panel.open {
    display: flex;
}

.poi-filter-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.poi-filter-panel__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    white-space: nowrap;
}

.poi-filter-panel__close {
    border: none;
    background: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0 2px;
}

.poi-filter-panel__close:hover { color: #333; }

/* ── POI loading state ───────────────────────────────────────────────────────
   The POIs are fetched when the panel is first opened rather than inlined in
   the page, so there is a wait to account for. Hidden by default and revealed
   by .is-loading on the panel. */
.poi-filter-panel__loading {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
    font-size: 0.78rem;
    color: #888;
}

.poi-filter-panel.is-loading .poi-filter-panel__loading {
    display: flex;
}

/* The chips render from the server before the POIs arrive, so they are visible
   but inert during the fetch — dim them and turn off pointer events rather than
   let a click do nothing. */
.poi-filter-panel.is-loading .poi-cat-toggle {
    opacity: 0.45;
    pointer-events: none;
}

.poi-filter-panel__spinner {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    border: 2px solid #E9F2EE;
    border-top-color: #888;
    border-radius: 50%;
    animation: poi-filter-spin 0.7s linear infinite;
}

@keyframes poi-filter-spin {
    to { transform: rotate(360deg); }
}

/* Respect a reduced-motion preference: keep the indicator, drop the rotation. */
@media (prefers-reduced-motion: reduce) {
    .poi-filter-panel__spinner { animation: none; opacity: 0.6; }
}

.poi-cat-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid #229966;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.15s, background 0.15s;
    text-align: left;
}

.poi-cat-toggle img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.poi-cat-toggle__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poi-cat-toggle__check {
    color: #229966;
    visibility: hidden;
}

.poi-cat-toggle.active {
    opacity: 1;
}

.poi-cat-toggle.active .poi-cat-toggle__check {
    visibility: visible;
}

.poi-cat-toggle:hover {
    background: #f4f7f5;
}

/* ── Collections this route belongs to ──────────────────────────────────────
   Pill links under the route title. Deliberately quieter than .route-type-tag,
   which is the route's single primary taxonomy; collections are secondary. */
.route-collections {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.route-collections__label {
    font-size: var(--font-size-sm);
    color: #888;
}

.route-collection-tag {
    display: inline-block;
    font-size: var(--font-size-sm);
    text-decoration: none;
    color: inherit;
    padding: 4px 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    transition: border-color 0.15s, background-color 0.15s;
}

.route-collection-tag:hover {
    border-color: rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.04);
    text-decoration: none;
}