/* Styling for the DOM that feedMap.js builds: Leaflet divIcon markers, their popups, and the
   elevation-profile SVG. Leaflet renders these outside any component's DOM, and the same map is
   drawn on the public On the Road feed and in the organizer's Route Map preview, so these rules
   are global and live next to the script that emits the markup rather than in one page.
   Keep the class names in sync with feedMap.js. */

/* ── Elevation profile ─────────────────────────────────────────────────────── */
.elev-svg {
    display: block;
    width: 100%;
    height: auto;
    cursor: crosshair;
    touch-action: none;
}

/* Photo-thumbnail pins (Leaflet divIcon). Global selectors — Leaflet renders
   these outside the component's scoped DOM, so they are intentionally
   un-scoped here. */
.feed-map-pin {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 3px 8px rgba(20,31,24,.4);
    overflow: hidden;
    background: #e7efe5;
    position: relative;
}

.feed-map-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 2px 2px 4px rgba(20,31,24,.22);
}

.feed-map-pin img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

.feed-map-popup {
    width: 200px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.feed-map-popup-img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.feed-map-popup-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    margin-top: .45rem;
}

.feed-map-popup-author {
    font-weight: 700;
    font-size: .82rem;
    color: #1e2d25;
}

.feed-map-popup-time {
    font-size: .72rem;
    color: #7a897c;
    white-space: nowrap;
}

.feed-map-popup-caption {
    font-size: .8rem;
    color: #41514a;
    margin-top: .3rem;
    line-height: 1.35;
}

.feed-map-popup-open {
    margin-top: .55rem;
    width: 100%;
    background: #2f7c57;
    border: none;
    color: #fff;
    border-radius: 6px;
    padding: .42rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.feed-map-popup-open:hover { background: #266848; }

/* ── Control-point markers ────────────────────────────────────────────── */
.feed-cp-marker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #114A6B;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(20,31,24,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    position: relative;
}

.feed-cp-marker.has-riders { background: #d05b3f; }

.feed-cp-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #2f7c57;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border: 1.5px solid #fff;
}

.feed-cp-popup { width: 180px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

.feed-cp-popup-title {
    font-size: .9rem;
    font-weight: 700;
    color: #114A6B;
}

.feed-cp-popup-name {
    font-size: .82rem;
    color: #41514a;
    margin-top: .15rem;
}

.feed-cp-popup-count {
    font-size: .8rem;
    font-weight: 600;
    color: #2f7c57;
    margin-top: .35rem;
}

.feed-cp-popup-riders {
    font-size: .78rem;
    color: #5b695e;
    margin-top: .2rem;
    line-height: 1.4;
}