/* Place Map Modal — full-bleed Leaflet map inside a Bootstrap modal. */

.place-map-canvas {
    width: 100%;
    height: 70vh;
    min-height: 420px;
    background: #1e293b;
}

@media (max-width: 575px) {
    .place-map-canvas {
        height: 75vh;
        min-height: 360px;
    }
}

/* Popup styling — small photo on top, then name + city/state link */
.place-map-popup {
    min-width: 180px;
    max-width: 220px;
}
.place-map-popup .pmp-photo {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 6px;
    display: block;
}
.place-map-popup .pmp-name {
    font-weight: 600;
    color: #1f1f1f;
    font-size: 0.95rem;
    line-height: 1.25;
    margin-bottom: 2px;
}
.place-map-popup .pmp-sub {
    color: #6c757d;
    font-size: 0.8rem;
    margin-bottom: 6px;
}
.place-map-popup .pmp-link {
    color: #0d6efd;
    font-size: 0.82rem;
    text-decoration: none;
}
.place-map-popup .pmp-link:hover { text-decoration: underline; }

/* Permanent (or hover) name label above each marker */
.pmp-marker-label {
    background: rgba(33, 37, 41, 0.85);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 6px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.pmp-marker-label::before {
    border-top-color: rgba(33, 37, 41, 0.85);
}
[data-bs-theme="dark"] .pmp-marker-label {
    background: rgba(248, 249, 250, 0.92);
    color: #212529;
}
[data-bs-theme="dark"] .pmp-marker-label::before {
    border-top-color: rgba(248, 249, 250, 0.92);
}