/* ============================================================
   Meetup spot map — Leaflet-injected content (MS-5.2 / MS-5.6)
   ============================================================
   Global stylesheet (catalogue-map.css precedent): Leaflet injects pins,
   popups and clusters outside any Blazor component scope, so scoped CSS can
   never reach them. Loaded from App.razor.

   MS-5.6 "civic cartographic warmth": the tier ladder reads as deepening
   ink — slate (new) through teal (community/frequent) to gilded gold
   (highly rated). Good-to-better as ink density; red is structurally banned
   from every pin and badge. */

:root {
    /* Tier token families: ink (pin fill), soft (chip background), text (chip text) */
    --msm-tier-new: #5B6B73;
    --msm-tier-new-soft: #F2F5F6;
    --msm-tier-new-text: #46555D;
    --msm-tier-community: #2E8F9C;
    --msm-tier-community-soft: #E7F4F6;
    --msm-tier-community-text: #256F7A;
    --msm-tier-frequent: #1F6470;
    --msm-tier-frequent-soft: #DCEEF1;
    --msm-tier-frequent-text: #1A535D;
    --msm-tier-highly: #D99A2B;
    --msm-tier-highly-soft: #FBF1DC;
    --msm-tier-highly-text: #8A6116;
    --msm-tier-highly-glyph: #3D2E0A; /* dark ink on gold — never white-on-gold */
    --msm-ink: #243B43;
    --msm-ring: #14323A;
}

/* ---------- Pins (40x48 waypoint: circular head + tapered point) ---------- */

.msm-pin-anchor {
    background: transparent;
    border: none;
}

.msm-pin {
    position: relative;
    width: 40px;
    height: 48px;
    font-family: 'Montserrat', sans-serif;
    animation: msm-pin-settle 0.2s ease-out both;
}

.msm-pin__head {
    position: absolute;
    top: 0;
    left: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 2px 6px rgba(20, 50, 58, 0.35);
    color: #ffffff;
}

/* The tapered point under the head */
.msm-pin::after {
    content: '';
    position: absolute;
    top: 28px;
    left: 14px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border-radius: 0 0 3px 0;
}

/* Grounding shadow at the tip */
.msm-pin::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    width: 16px;
    height: 5px;
    border-radius: 50%;
    background: rgba(20, 50, 58, 0.25);
}

.msm-pin__glyph {
    width: 18px;
    height: 18px;
    display: flex;
}

.msm-pin__glyph svg {
    width: 100%;
    height: 100%;
}

/* Tier ink fills (head + point) */
.msm-pin--NewSpot .msm-pin__head { background: var(--msm-tier-new); }
.msm-pin--NewSpot::after { background: var(--msm-tier-new); }
.msm-pin--CommunityUsed .msm-pin__head { background: var(--msm-tier-community); }
.msm-pin--CommunityUsed::after { background: var(--msm-tier-community); }
.msm-pin--FrequentlyUsed .msm-pin__head { background: var(--msm-tier-frequent); }
.msm-pin--FrequentlyUsed::after { background: var(--msm-tier-frequent); }
.msm-pin--HighlyRated .msm-pin__head { background: var(--msm-tier-highly); color: var(--msm-tier-highly-glyph); }
.msm-pin--HighlyRated::after { background: var(--msm-tier-highly); }

/* Rating-count chip — the postal-stamp overlap on the head's lower edge */
.msm-pin__count {
    position: absolute;
    top: 20px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ffffff;
    color: var(--msm-tier-community-text);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(20, 50, 58, 0.3);
}

.msm-pin--HighlyRated .msm-pin__count { color: var(--msm-tier-highly-text); }

/* Verified tick */
.msm-pin__verified {
    position: absolute;
    top: -3px;
    right: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    color: #256F7A;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(20, 50, 58, 0.3);
}

.msm-pin__verified svg {
    width: 9px;
    height: 9px;
}

/* Selection: scale + ink-navy ring with a white gap */
.msm-pin--selected {
    transform: scale(1.12);
    transform-origin: 20px 44px;
}

.msm-pin--selected .msm-pin__head {
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.85),
        0 0 0 2px #ffffff,
        0 0 0 5px rgba(20, 50, 58, 0.4),
        0 3px 8px rgba(20, 50, 58, 0.45);
}

/* Keyboard focus on the marker wrapper (Leaflet keyboard:true) */
.leaflet-marker-icon:focus-visible {
    outline: 3px solid #256F7A;
    outline-offset: 2px;
    border-radius: 8px;
}

@keyframes msm-pin-settle {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.msm-pin--selected {
    animation: none;
}

/* ---------- Popup card ---------- */

.msm-popup .leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(20, 50, 58, 0.18);
    font-family: 'Montserrat', sans-serif;
}

.msm-popup .leaflet-popup-content {
    margin: 14px 16px;
}

.msm-popup__name {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--msm-ink);
}

.msm-popup__tier {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

.msm-popup__tier--NewSpot { background: var(--msm-tier-new-soft); color: var(--msm-tier-new-text); }
.msm-popup__tier--CommunityUsed { background: var(--msm-tier-community-soft); color: var(--msm-tier-community-text); }
.msm-popup__tier--FrequentlyUsed { background: var(--msm-tier-frequent-soft); color: var(--msm-tier-frequent-text); }
.msm-popup__tier--HighlyRated { background: var(--msm-tier-highly-soft); color: var(--msm-tier-highly-text); }

.msm-popup__facts {
    font-size: 12px;
    color: #5E6E75;
    margin-bottom: 4px;
}

.msm-popup__verified {
    font-size: 12px;
    color: #256F7A;
    font-weight: 600;
    margin-bottom: 4px;
}

.msm-popup-select {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    border: none;
    border-radius: 8px;
    background: #35a0ae;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
}

.msm-popup-select:hover {
    background: #2E8F9C;
}

.msm-popup-select:focus-visible {
    outline: 3px solid #256F7A;
    outline-offset: 2px;
}

/* ---------- Cluster ---------- */

.msm-cluster {
    background: transparent;
    border: none;
}

.msm-cluster__inner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #35a0ae;
    box-shadow: 0 2px 8px rgba(20, 50, 58, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
}

.msm-cluster__count {
    font-size: 14px;
    font-weight: 700;
    color: #256F7A;
}

/* The label is for assistive tech — the 44px circle carries the count only */
.msm-cluster__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- User location ---------- */

.msm-user-location-anchor {
    background: transparent;
    border: none;
}

.msm-user-location {
    position: relative;
    width: 24px;
    height: 24px;
}

.msm-user-location__dot {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #35a0ae;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(20, 50, 58, 0.4);
}

.msm-user-location__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(53, 160, 174, 0.35);
    animation: msm-pulse 2s ease-out infinite;
}

@keyframes msm-pulse {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .msm-pin {
        animation: none;
    }

    .msm-user-location__pulse {
        animation: none;
        opacity: 0.35;
        transform: scale(1);
    }
}

/* === Dark-mode popup (D4 - Global CSS Dark Sweep) ============================================
   Same decision as catalogue-map: under [data-theme="dark"] the popup CARD flips to the dark
   chrome while the pins / clusters / user-dot stay over the light map tiles. Done by redefining the
   popup-only --msm-* vars SCOPED to .msm-popup - the pins read the :root base --msm-tier-* tokens
   (untouched), so only the popup recolours. Light mode is byte-unchanged. ======================== */
[data-theme="dark"] .msm-popup .leaflet-popup-content-wrapper { background: var(--rently-card-bg); }
[data-theme="dark"] .msm-popup .leaflet-popup-tip { background: var(--rently-card-bg) !important; }
[data-theme="dark"] .msm-popup .leaflet-popup-close-button { color: var(--rently-text-tertiary); }
[data-theme="dark"] .msm-popup {
    --msm-ink: var(--rently-text-strong);
    --msm-tier-new-soft: rgba(91, 107, 115, 0.32);
    --msm-tier-new-text: #cbd5e1;
    --msm-tier-community-soft: rgba(46, 143, 156, 0.26);
    --msm-tier-community-text: #82d4df;
    --msm-tier-frequent-soft: rgba(31, 100, 112, 0.34);
    --msm-tier-frequent-text: #79c6d3;
    --msm-tier-highly-soft: rgba(217, 154, 43, 0.24);
    --msm-tier-highly-text: #f0c277;
}
[data-theme="dark"] .msm-popup__facts { color: var(--rently-text-secondary); }
[data-theme="dark"] .msm-popup__verified { color: #82d4df; }