/* Route-builder map markers. Global (not scoped) because MapLibre renders
   markers in its own DOM, outside Blazor component CSS isolation.
   Pin = a round head with a downward triangle tip — the tip always points
   straight down at the location (no rotation). */
.tg-pin { display: flex; flex-direction: column; align-items: center; cursor: pointer; }

/* Label floats above the pin. */
.tg-pin-label {
    margin-bottom: 4px;
    background: rgba(15, 23, 42, 0.88); color: #fff;
    font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px;
    white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}

/* Pin click popup (Add/Remove To Trip). */
.tg-popup { display: flex; flex-direction: column; gap: 6px; min-width: 140px; padding: 2px; }
.tg-popup-title { font-size: 13px; font-weight: 700; color: var(--color-ink); }
.tg-popup-btn {
    cursor: pointer; border: 0; border-radius: 8px; padding: 6px 10px;
    font-size: 12px; font-weight: 600;
}
.tg-popup-add    { background: var(--color-stop); color: #fff; }
.tg-popup-remove { background: var(--color-danger-soft); color: var(--color-danger); }

.tg-pin-head {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2.5px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}

/* Downward triangle; color (border-top-color) is applied from the theme token
   read in tour-map.js (makePin), matching the head. */
.tg-pin-tip {
    width: 0; height: 0; margin-top: -4px;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-top: 9px solid transparent;
}