/* Route replay (route-replay.js): travelling marker, its label and the photo of the
   current destination over the map. Shared by the planner map and the full route map. */

/* Route-replay marker: solid green disc, white glyph. The badge is a child so Leaflet's
   own .leaflet-div-icon white box and border can be cleared without fighting it. */
.leaflet-div-icon.rp-icon { background: none; border: 0; }
.rp-badge {
    width: 34px; height: 34px; border-radius: 50%;
    background: #4d7a1f; color: #fff;
    border: 2px solid rgba(255,255,255,.95);
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center;
}
.rp-badge svg { display: block; fill: currentColor; }
.rp-tip { background: #263238; color: #fff; border: 0; border-radius: 6px;
          padding: 2px 8px; font-weight: 600; font-size: .74rem;
          box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.rp-tip::before { border-top-color: #263238; }

/* ── Route-play photo panel — current destination photo over the map ── */
.rp-photo-panel { position: absolute; left: 12px; bottom: 22px; width: 230px; z-index: 900;
                  background: #fff; border-radius: 8px; overflow: hidden;
                  box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.rp-photo-panel .rp-photo-img { height: 150px; background-size: cover; background-position: center; background-color: #e9ecef; }
.rp-photo-panel .rp-photo-none { display: flex; align-items: center; justify-content: center; color: #adb5bd; font-size: 2rem; }
.rp-photo-panel .rp-photo-cap { padding: 8px 12px; }
.rp-photo-panel .rp-photo-city { font-weight: 700; line-height: 1.15; }
.rp-photo-panel .rp-photo-country { font-size: .82rem; color: #6b7280; }