/*
 * Talking Time RegionMap styles.
 *
 * Leaflet's own stylesheet is loaded from the CDN inside the
 * component. These rules only style the canvas wrapper, error
 * state, and the coloured divIcon pin.
 *
 * Requirement 33.1, 5.5
 */

.tt-area .tt-region-map {
    position: relative;
    border-radius: var(--tt-radius-md);
    overflow: hidden;
    background: var(--tt-surface-raised);
    border: 1px solid rgba(74, 123, 200, 0.14);
}

.tt-area .tt-region-map__canvas {
    width: 100%;
    min-height: 200px;
    background: var(--tt-surface-raised);
}

.tt-area .tt-region-map__error {
    margin: 0;
    padding: 10px 14px;
    background: rgba(194, 74, 74, 0.1);
    color: var(--tt-danger);
    font-size: var(--tt-font-size-sm);
}

.tt-area .tt-region-map__empty {
    margin: 0;
    padding: 10px 14px;
    color: var(--tt-text-muted);
    font-size: var(--tt-font-size-sm);
    font-style: italic;
}

/*
 * divIcon pin — Leaflet places our raw HTML inside a wrapper div we
 * style directly. We draw a filled circle with a border so it stands
 * out on street tiles regardless of the Buddy_Group colour.
 */
.tt-area .tt-region-map__pin-wrapper {
    background: transparent !important;
    border: none !important;
}

.tt-area .tt-region-map__pin {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(29, 46, 74, 0.35);
}