/* Container Peta relatif */
.map-wrapper {
    position: relative;
    width: 100%;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
}

.map-img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.85; /* Sedikit diredupkan agar icon terlihat menonjol */
}

/* Styling Dasar Pin Cabang */
.map-pin {
    position: absolute;
    transform: translate(-50%, -100%); /* Menepatkan titik ujung pin di koordinat lokasi */
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.map-pin i {
    font-size: 22px;
    filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.3));
}

/* Kustomisasi Warna & Jenis Icon */
.pin-hq i {
    color: #e74c3c; /* Merah untuk Headquarter */
    font-size: 26px;
}

.pin-branch i {
    color: var(--bs-primary, #06A3DA); /* Warna Utama Template untuk Cabang */
}

.pin-warehouse i {
    color: #f39c12; /* Oranye untuk Gudang/Warehouse */
    font-size: 20px;
}

/* Tooltip Nama Cabang saat Di-hover */
.pin-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(9, 30, 62, 0.9);
    color: #ffffff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Efek Hover (Saat Kursor Mengarah ke Pin) */
.map-pin:hover {
    transform: translate(-50%, -115%) scale(1.2);
    z-index: 10;
}

.map-pin:hover .pin-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Penyesuaian di Layar HP */
@media (max-width: 576px) {
    .map-pin i {
        font-size: 14px;
    }
    .pin-hq i {
        font-size: 18px;
    }
    .pin-tooltip {
        font-size: 10px;
        padding: 2px 5px;
    }
}
    /* Ukuran default pin SVG di Desktop / Laptop */
    .map-pin img, 
    .pin-img {
        width: 22px; /* Sesuaikan ukuran awal desktop */
        height: auto;
        display: block;
        filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.3)); /* Efek bayangan opsional */
    }

    /* Responsif di Layar HP (Maksimal 576px) */
    @media (max-width: 576px) {
        .map-pin img,
        .pin-img {
            width: 13px; /* Pin mengecil otomatis saat dibuka di HP */
        }

        .pin-tooltip {
            font-size: 10px;
            padding: 2px 5px;
        }
    }
    /* Khusus Layar Tablet & HP (<= 768px) */
    @media (max-width: 768px) {
        .map-pin img, 
        .pin-img {
            width: 2.5vw !important; /* Ukuran menyesuaikan % lebar layar HP */
            min-width: 8px !important; /* Batas paling kecil agar tidak menghilang */
        }

        .pin-tooltip {
            font-size: 8px !important;
            padding: 1px 3px !important;
        }
    }

    /* Khusus HP Berlayar Kecil (<= 480px) */
    @media (max-width: 480px) {
        .map-pin img, 
        .pin-img {
            width: 8px !important; /* Ukuran fixed sangat kecil */
        }
    }

    /* Styling Map Legend (Satu Baris Sejajar di Tengah Bawah) */
    .map-legend {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%); /* Memposisikan persis di tengah-tengah bawah */
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(4px);
        padding: 6px 18px;
        border-radius: 30px; /* Bentuk kapsul/pill rapi untuk 1 baris */
        border: 1px solid #dee2e6;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        z-index: 5;
        
        /* Aturan Utama Satu Baris */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        flex-wrap: nowrap !important; /* Mencegah teks/icon turun ke baris baru */
        white-space: nowrap;
    }

    .legend-title {
        font-size: 12px;
        font-weight: 700;
        color: #333;
        margin-right: 4px;
    }

    .legend-item {
        display: flex !important;
        flex-direction: row !important; /* Memaksa menyamping (Icon di kiri, Teks di kanan) */
        align-items: center !important;  /* Rata tengah secara vertikal */
        gap: 6px !important;            /* Jarak antara icon dan teks */
    }

    .legend-icon {
        width: 15px !important;
        height: auto !important;
        display: inline-block !important;
        margin: 0 !important;
    }
    .legend-item span {
        font-size: 12px;
        font-weight: 600;
        color: #495057;
    }

    /* Responsif untuk HP agar tetap 1 baris dan muat di layar sempit */
    @media (max-width: 576px) {
        .map-legend {
            bottom: 6px;
            padding: 4px 10px;
            gap: 8px;
            max-width: 95%; /* Mencegah legenda melebihi lebar peta di HP */
        }

        .legend-title {
            display: none; /* Sembunyikan kata "Keterangan:" di HP agar lebih hemat tempat */
        }

        .legend-icon {
            width: 10px; /* Icon mengecil di HP */
        }

        .legend-item span {
            font-size: 8.5px; /* Teks mengecil agar muat dalam 1 baris */
        }
    }