/* Carrier marker + cluster icons (Leaflet divIcons). Loaded globally
   because the markup lives inside Leaflet's DOM, not in a Blazor-scoped
   component tree, so .razor.css's auto-scoping doesn't reach them. */

.carrier-marker-icon-wrap {
    background: transparent;
    border: none;
}

.carrier-marker-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.carrier-cluster-icon-wrap {
    background: transparent;
    border: none;
}

.carrier-cluster-icon {
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Popup content for carrier markers. */
.carrier-popup {
    min-width: 180px;
    font-size: 0.85rem;
}

.carrier-popup-meta {
    font-size: 0.75rem;
    color: #666;
}

.carrier-popup-chips {
    margin: 0.375rem 0;
    display: flex;
    gap: 0.25rem;
}

.carrier-popup-chip {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    background: #f3f4f6;
    color: #374151;
}

.carrier-popup-chip-green { background: #dcfce7; color: #166534; }
.carrier-popup-chip-amber { background: #fef3c7; color: #92400e; }
.carrier-popup-chip-red { background: #fee2e2; color: #b91c1c; }
.carrier-popup-chip-grey { background: #f3f4f6; color: #4b5563; }
.carrier-popup-chip-hazmat { background: #ffedd5; color: #c2410c; }

.carrier-popup-cta {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.carrier-popup-cta:hover { text-decoration: underline; }