.frete-mapa {
    width: 100%;
    position: relative;
}

.frete-mapa__canvas {
    width: 100%;
    /*
     * aspect-ratio em vez de height fixa: com altura fixa, a coluna do
     * mapa fica "retrato" sempre que fica mais estreita (sidebar aberta,
     * telas menores) — o mockup aprovado mantém o mapa sempre retangular
     * e largo, proporcional à largura disponível, não uma altura fixa em
     * pixels.
     */
    aspect-ratio: 16 / 9;
    min-height: 320px;
    max-height: 480px;
    border-radius: 0.5rem;
    overflow: hidden;
}

.frete-mapa__badge {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: rgba(17, 24, 39, 0.85);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: 0 1px 3px var(--app-border);
}

.frete-mapa__badge-separador {
    width: 1px;
    height: 0.875rem;
    background-color: var(--app-subtle);
}

.frete-mapa__marcador {
    border-radius: 9999px;
    box-shadow: 0 0 0 2px #fff, 0 1px 3px var(--app-border);
}

.frete-mapa__marcador--origem {
    background-color: #22c55e;
}

.frete-mapa__marcador--destino {
    background-color: #ef4444;
}

/*
 * Rótulos permanentes "Origem"/"Destino" presos ao pino (mockup
 * aprovado) — sobrescreve o balãozinho branco padrão do Leaflet por um
 * badge colorido, sem seta, coerente com a cor do marcador.
 */
.frete-mapa__rotulo {
    padding: 0.125rem 0.5rem;
    border: none;
    border-radius: 0.25rem;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 1px 3px var(--app-border);
}

.frete-mapa__rotulo::before {
    display: none;
}

.frete-mapa__rotulo--origem {
    background-color: #16a34a;
}

.frete-mapa__rotulo--destino {
    background-color: #dc2626;
}