/* Travel map (Leaflet) - GLOBAL, non-scoped styles.
   Leaflet builds its marker/tooltip DOM dynamically, so those elements never receive
   Blazor's scoped [b-xxx] attribute and cannot be styled from a .razor.css file.
   CSS custom properties still inherit from :root, so the app theme variables work here. */

.tm-pin-wrap,
.tm-here-wrap {
    background: none;
    border: none;
}

/* City pin: gold dot, size scales with population (CitySize) */
.tm-pin {
    display: block;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--wl-gold, #d4af37);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease;
    cursor: pointer;
}

.tm-pin-wrap:hover .tm-pin {
    transform: scale(1.25);
}

.tm-pin--selected {
    background: #fff;
    border-color: var(--wl-gold, #d4af37);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5), 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* "You are here" - pulsing red marker, always on top */
.tm-here {
    display: block;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    animation: tmPulse 2s infinite;
}

@keyframes tmPulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Activity markers (concerts, interviews, festivals, awards, competitions):
   coloured circle + white glyph, clearly distinct from the small flat city dots. */
.tm-act-wrap { background: none; border: none; }

.tm-act {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease;
    cursor: pointer;
}

.tm-act svg { width: 14px; height: 14px; }
.tm-act-wrap:hover .tm-act { transform: scale(1.18); }

.tm-act--concert     { background: #ea580c; } /* orange */
.tm-act--interview   { background: #3b82f6; } /* blue */
.tm-act--festival    { background: #a855f7; } /* purple */
.tm-act--award       { background: #e11d48; } /* crimson */
.tm-act--competition { background: #10b981; } /* green */

/* Tooltip + attribution themed to match the app (dark-friendly) */
.leaflet-tooltip {
    background: var(--wl-bg-secondary, #1a1a1a);
    color: var(--wl-text-primary, #fff);
    border: 1px solid var(--wl-border-medium, rgba(255, 255, 255, 0.15));
    border-radius: 6px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.leaflet-tooltip-top::before { border-top-color: var(--wl-border-medium, rgba(255, 255, 255, 0.15)); }
.leaflet-tooltip-bottom::before { border-bottom-color: var(--wl-border-medium, rgba(255, 255, 255, 0.15)); }

.leaflet-container a.leaflet-popup-close-button { color: var(--wl-text-muted, #999); }