/**
 * Peta Komunitas — Styles
 * Path: inc/peta-komunitas/assets/css/peta-komunitas.css
 */

.pk-app {
    --pk-primary: #4a1942;      /* ungu tua, sesuai badge/tombol di screenshot */
    --pk-accent: #c9a227;       /* kuning/gold, sesuai aksen dekorasi */
    --pk-bg-cream: #ede4d3;
    --pk-text-dark: #1f1f1f;
    position: relative;
    font-family: inherit;
}

/* ============================
   Header: title + search + filter
   ============================ */
.pk-header {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.pk-title {
    color: var(--pk-primary);
    font-weight: 700;
    margin: 0;
}

.pk-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pk-search {
    position: relative;
    display: flex;
    align-items: center;
}

.pk-search input {
    padding: 0px 40px 0px 16px;
    border: 1px solid #121212;
    min-width: 290px;
    font-size: var(--text-s);
    height: 36px;
}

.pk-search button {
    position: absolute;
    top: 10px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: #121212;
}

/* Dropdown */
.pk-dropdown {
    position: relative;
}

.pk-dropdown-toggle {
    padding: 8px 16px;
    height: 36px;
    border: 1px solid #121212;
    background: #fff;
    cursor: pointer;
    font-size: var(--text-s);
    white-space: nowrap;
}

.pk-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    min-width: 180px;
    z-index: 1001;
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.pk-dropdown.is-open .pk-dropdown-menu {
    display: block;
}

.pk-dropdown-menu li button {
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.pk-dropdown-menu li button:hover {
    background: var(--color-vanilla-cream);
}

/* ============================
   Map wrapper
   ============================ */
.pk-map-wrapper {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
}

#pk-map {
    width: 100%;
    height: 100%;
    background: #e8e8e8;
}

/* ============================
   Legend
   ============================ */
.pk-legend {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: var(--color-vanilla-cream);
    padding: 8px;
    z-index: 400; /* di atas leaflet tile (default z-index leaflet ~200-400) */
    font-size: var(--text-s);
}

.pk-legend-title {
    display: block;
    margin-bottom: 8px;
    color: var(--color-midnight-violet);
}

.pk-legend-list,
#pk-legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#pk-legend-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    color: var(--color-midnight-violet);
}

.pk-legend-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 4px solid #999;
    background: #fff;
    flex-shrink: 0;
}

/* ============================
   Marker + label (custom divIcon)
   ============================ */
.pk-marker {
    position: relative;
    width: 0;
    height: 0;
    cursor: pointer;
}

.pk-marker-pin {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -100%); /* ujung bawah pin presisi di titik koordinat */
    width: 32px;
    height: 42px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
    transition: transform .15s ease;
}

.pk-marker:hover .pk-marker-pin,
.pk-marker.is-active .pk-marker-pin {
    transform: translate(-50%, -100%) scale(1.1); /* sedikit membesar saat hover/aktif, opsional tapi bantu UX */
}

.pk-marker-label {
    position: absolute;
    left: 20px;
    top: -26px; /* sejajar area lingkaran pin, bukan ujung bawah */
    transform: translateY(-50%);
    background: rgba(255,255,255,.95);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    color: #9a9a9a; /* FIX: default pudar/abu-abu */
    transition: color .15s ease, opacity .15s ease;
}

/* FIX: warna terang saat hover ATAU aktif, warnanya ambil dari --pin-color per marker */
.pk-marker:hover .pk-marker-label,
.pk-marker.is-active .pk-marker-label {
    color: var(--pin-color, #4a1942);
}

.pk-marker.pk-label-hidden .pk-marker-label,
.pk-label-hidden .pk-marker-label {
    display: none;
}

/* ============================
   Onboarding popup
   ============================ */
.pk-onboarding-backdrop {
    display: none;
    position: absolute;
    inset: 0; /* shorthand untuk top:0; right:0; bottom:0; left:0; */
    background: rgba(0, 0, 0, .45);
    z-index: 490; /* di atas map (Leaflet ~400-700) tapi di bawah popup */
    border-radius: 8px; /* ikutin radius .pk-map-wrapper biar nggak nabrak sudut */
}

.pk-onboarding-backdrop.is-visible {
    display: block;
}

.pk-onboarding {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-vanilla-cream);
    padding: 16px;
    min-width: 300px;
    max-width: 480px;
    z-index: 500;
    overflow: hidden;
}

.pk-onboarding.is-visible {
    display: block;
}

.pk-onboarding h4 {
    color: var(--color-black);
    margin: 0 0 8px;
}

.pk-onboarding p {
    font-size: var(--text-s);
    color: var(--color-black);
    line-height: 1.5;
    margin: 0 0 24px;
}

.pk-onboarding-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: var(--pk-accent);
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
}

.pk-btn-primary {
    background: var(--color-midnight-violet);
    color: #fff;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    font-size: var(--text-s);
    position: relative;
  z-index: 1;
  overflow: visible;
}

.pk-btn-primary::before {
  content: "";
  position: absolute;
  left: 14px; 
  width: calc(100% - 28px);
  bottom: 2px;
  height: 14px;
  background-image: url('/wp-content/uploads/line.svg'); 
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 0; 
  
  clip-path: inset(0 100% 0 0); 
  transition: clip-path 0.4s ease-in-out;
}

.pk-btn-primary::after {
  content: "";
  position: absolute;
  left: 14px; 
  width: calc(100% - 28px);
  bottom: 7px; 
  height: 1px;
  background-color: currentColor; 
  
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease-in-out;
}

.pk-btn-primary:hover::before {
  clip-path: inset(0 0 0 0);
}

.pk-btn-primary:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.super-graph {
    width: auto;
    height: 56px;
    position: absolute;
    top: -25px;
    right: -25px;
}

.super-graph path{
    fill: var(--color-sunlit-clay);
}

/* ============================
   Slide-in panel (kanan)
   ============================ */
.pk-panel {
    position: absolute;
    top: 0;
    right: -420px; /* tersembunyi di luar viewport */
    width: 420px;
    max-width: 90%;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0,0,0,.15);
    transition: right .3s ease;
    z-index: 996;
    overflow-y: auto;
}

.pk-panel.is-open {
    right: 0;
}

.pk-panel-close {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    z-index: 2;
    background: none;
    color: white;
    font-weight: 800;
    font-size: 18px;
}

.pk-panel-gallery {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.pk-panel-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pk-gallery-nav {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: none;
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 46px;
    cursor: pointer;
}

.pk-panel-body {
    padding: 24px 16px;
    background: var(--color-midnight-violet);
}

.pk-panel-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.pk-badge {
    color: var(--color-midnight-violet);
    background: var(--color-sunlit-clay);
    padding: 4px 16px;
    font-size: var(--text-m);
}

.pk-badge-divider {
    color: white;
    background: white;
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.pk-badge-komunitas {
    font-size: var(--text-m);
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pk-komunitas-icon {
    display: inline-flex;
    align-items: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.pk-panel-body h4 {
    color: white;
    margin: 24px 0 8px;
}

.pk-panel-body p {
    font-size: var(--text-s);
    color: white;
}

.pk-panel-program {
    margin-top: 24px;
}

/* Kampanye cards */
.pk-panel-kampanye {
    margin-top: 24px;
}

.pk-panel-program h5, .pk-panel-kampanye h5 {
    margin: 0 0 8px;
    color: white;
}

.pk-panel-program p {
    font-size: var(--text-m);
    color: white;
    margin: 0;
}

.pk-kampanye-empty {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #703041;
    padding: 8px;
    font-size: var(--text-s);
    color: white;
}

.pk-kampanye-empty i {
    color: var(--color-sunlit-clay);
    font-size: 14px;
    flex-shrink: 0;
}

.pk-kampanye-ajakan {
    font-size: var(--text-s);
    color: white;
    margin-bottom: 8px;
}

.pk-kampanye-card {
    background: #703041;
    color: #fff;
    padding: 16px;
    margin-bottom: 16px;
}

.pk-kampanye-judul {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: var(--text-l);
}

.pk-kampanye-nominal {
    font-size: var(--text-s);
    margin-bottom: 8px;
}

.pk-kampanye-nominal strong {
    color: var(--color-sunlit-clay);
}

.pk-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--color-vanilla-cream);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 8px;
}

.pk-progress-fill {
    height: 100%;
    background: var(--color-sunlit-clay);
    border-radius: 16px;
}

.pk-kampanye-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-s);
    margin-bottom: 16px;
}

.pk-kampanye-link {
  position: relative;
  z-index: 1;
  overflow: visible;
  color: #fff;
    font-size: var(--text-s);
    font-weight: 400;
}

.pk-kampanye-link::before {
  content: "";
  position: absolute;
  left: 0; 
  width: 100%;
  bottom: -7px;
  height: 14px;
  background-image: url('/wp-content/uploads/line.svg'); 
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 0; 
  
  clip-path: inset(0 100% 0 0); 
  transition: clip-path 0.4s ease-in-out;
}

.pk-kampanye-link::after {
  content: "";
  position: absolute;
  left: 0; 
  width:100%;
  bottom: -2px; 
  height: 1px;
  background-color: currentColor; 
}

.pk-kampanye-link:hover::before {
  clip-path: inset(0 0 0 0);
}

.pk-kampanye-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.pk-kampanye-link i.fas {
    margin-left: 4px;
    font-size: var(--text-xs);
}

.leaflet-left {
    z-index: 996 !important;
}

/* ============================
   Responsive
   ============================ */
@media (max-width: 640px) {
    .pk-map-wrapper { height: 480px; }
    .pk-panel { width: 100%; right: -100%; }
    .pk-header { flex-direction: column; align-items: flex-start; }
}