/* ==========================================================================
   SPORTIF — Marker dan popup venue pada peta publik
   Dipakai bersama oleh /olahraga-prestasi (tema tosca) dan /prasarana
   (tema gelap lama). Peta area admin TIDAK memuat berkas ini.

   Token ditulis lokal (awalan --pv-) supaya berkas ini tidak bergantung pada
   public.css, yang tidak dimuat oleh layouts/public-dark.blade.php.

   Rasio kontras WCAG 2.1 pasangan warna yang dipakai:
     #FFFFFF di atas #087F73 ... 4,89 : 1   ← ikon pin, teks tombol
     #075E55 di atas #FFFFFF ... 7,66 : 1   ← judul popup
     #0B1F1D di atas #FFFFFF .. 16,66 : 1   ← teks isi popup
     #5B7370 di atas #FFFFFF ... 4,58 : 1   ← teks sekunder popup
   ========================================================================== */

.leaflet-container {
    --pv-utama:    #087F73;
    --pv-gelap:    #075E55;
    --pv-paling:   #04332E;
    --pv-muda:     #EAF5F2;
    --pv-garis:    #DCE9E6;
    --pv-tinta:    #0B1F1D;
    --pv-sekunder: #5B7370;
}

/* ── Pin lokasi ─────────────────────────────────────────── */

/* Bentuk pin dibuat dari kotak dengan satu sudut siku, lalu diputar 45°.
   Sudut siku itu berakhir tepat di bawah-tengah, sehingga titik pin berada
   pada koordinat sebenarnya bila iconAnchor diset [17, 41]. */
.penanda-venue {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: var(--pv-utama, #087F73);
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 3px 8px rgba(4, 51, 46, .34);
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
    box-sizing: border-box;
}
.penanda-venue i {
    transform: rotate(45deg);
    color: #fff; font-size: .95rem; line-height: 1;
}
.leaflet-marker-icon:hover .penanda-venue {
    background: var(--pv-gelap, #075E55);
    box-shadow: 0 5px 14px rgba(4, 51, 46, .44);
}

/* Marker terpilih: lingkaran halo statis, isian lebih gelap, dan pin sedikit
   lebih besar. Tanpa gerak berulang supaya tidak mengganggu pembacaan peta. */
.penanda-venue--terpilih {
    background: var(--pv-gelap, #075E55);
    border-width: 4px;
    transform: rotate(-45deg) scale(1.26);
    z-index: 1000;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, .9),
        0 0 0 9px rgba(8, 127, 115, .52),
        0 8px 18px rgba(4, 51, 46, .5);
}
.penanda-venue--terpilih i { font-size: 1rem; }

/* ── Popup venue ────────────────────────────────────────── */

/* Selektor memakai kelas popup sendiri agar menang atas tema gelap halaman
   /prasarana tanpa bergantung pada urutan pemuatan berkas. */
.leaflet-popup.popup-venue .leaflet-popup-content-wrapper {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--pv-tinta, #0B1F1D);
    border: 1px solid var(--pv-garis, #DCE9E6);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(4, 51, 46, .22);
    padding: 0;
    overflow: hidden;
}
.leaflet-popup.popup-venue .leaflet-popup-content {
    margin: 0;
    width: clamp(260px, 78vw, 300px) !important;
    font-family: inherit;
    line-height: 1.5;
}
.leaflet-popup.popup-venue .leaflet-popup-tip {
    background: #fff;
    border: 1px solid var(--pv-garis, #DCE9E6);
    box-shadow: none;
}

/* Tombol tutup diperbesar supaya nyaman ditekan di layar sentuh. */
.leaflet-popup.popup-venue .leaflet-popup-close-button {
    width: 32px; height: 32px;
    top: 6px; right: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1;
    color: var(--pv-sekunder, #5B7370);
    border-radius: 999px;
    background: var(--pv-muda, #EAF5F2);
}
.leaflet-popup.popup-venue .leaflet-popup-close-button:hover {
    color: #fff; background: var(--pv-gelap, #075E55);
}

.popup-venue__isi { padding: 16px 18px 16px; }

.popup-venue__nama {
    display: block;
    font-weight: 700; font-size: 1rem; line-height: 1.32;
    color: var(--pv-gelap, #075E55);
    /* Nama panjang membungkus, bukan terpotong. */
    overflow-wrap: anywhere;
    padding-right: 28px;   /* ruang untuk tombol tutup */
}

.popup-venue__lokasi {
    display: flex; align-items: center; gap: 6px;
    margin-top: 4px;
    font-size: .8125rem; color: var(--pv-sekunder, #5B7370);
}

.popup-venue__pisah {
    height: 1px; border: 0; margin: 12px 0;
    background: var(--pv-garis, #DCE9E6);
}

.popup-venue__baris {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: .8125rem; color: var(--pv-tinta, #0B1F1D);
    margin-bottom: 8px;
}
.popup-venue__baris:last-of-type { margin-bottom: 0; }
.popup-venue__baris i {
    flex: 0 0 auto; margin-top: 2px;
    color: var(--pv-utama, #087F73); font-size: .9rem;
}
.popup-venue__baris span { overflow-wrap: anywhere; }
.popup-venue__kosong { color: var(--pv-sekunder, #5B7370); font-style: italic; }

.popup-venue__tombol {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; margin-top: 14px;
    padding: 10px 14px; min-height: 42px;
    font-family: inherit; font-size: .875rem; font-weight: 600;
    color: #fff; background: var(--pv-utama, #087F73);
    border: 0; border-radius: 999px; cursor: pointer;
    transition: background .18s ease;
}
.popup-venue__tombol:hover,
.popup-venue__tombol:focus-visible { background: var(--pv-gelap, #075E55); color: #fff; }
.popup-venue__tombol:focus-visible { outline: 3px solid var(--pv-paling, #04332E); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .penanda-venue { transition: none; }
    .penanda-venue--terpilih { transform: rotate(-45deg) scale(1.26); }
    .popup-venue__tombol { transition: none; }
}