/* ==========================================================================
   Clean Vector Map Styling & Subtle Province Wave Animation
   Highlight Color: #0A3165
   ========================================================================== */

.indonesia-vector-svg {
  width: 100%;
  height: 100%;
  max-height: 80vh;
  display: block;
  margin: 0 0 0 auto;
  padding: 0;
  overflow: visible;
  filter: drop-shadow(0 15px 35px rgba(10, 49, 101, 0.04));
  user-select: none;
}

/* Base Island Landmass (Soft Grey, Ultra-Thin 0.042px Stroke) */
.island-path-land {
  fill: #D8DFE8;
  stroke: #C7D1DC;
  stroke-width: 0.042;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* ==========================================================================
   Highlighted Province Styling (#0A3165)
   ========================================================================== */
.provinsi-highlight-group {
  cursor: pointer;
  pointer-events: auto;
}

.provinsi-highlight-group:active .provinsi-path-highlight {
  filter: brightness(1.2) drop-shadow(0 2px 8px rgba(248, 106, 7, 0.4));
}

.provinsi-path-highlight {
  fill: #0A3165;
  stroke: #0C3E7F;
  stroke-width: 0.042;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 1;
  transition: fill 0.25s ease, stroke-width 0.25s ease, filter 0.25s ease, opacity 0.4s ease;
}

/* While the scroll tour is focused on one province, dim every other highlighted province */
.provinces-highlight-layer.is-touring .provinsi-highlight-group:not(.is-tour-focused) .provinsi-path-highlight {
  fill: #C3CCD9;
  stroke: #C3CCD9;
  opacity: 0.35;
  filter: none;
}

/* Hover styling only applies outside the scroll tour — focused mode owns the visuals.
   No transition here — a flat state swap, not an animation. */
.provinces-highlight-layer:not(.is-touring) .provinsi-highlight-group:hover .provinsi-path-highlight {
  fill: #0D3E7F;
  stroke: #0C3E7F;
  stroke-width: 0.075;
  transition: none;
}

/* Focused Province State during Scroll Tour — light fill so client kabupaten polygons
   drawn on top (see .kabupaten-client-path) stand out clearly */
.provinsi-highlight-group.is-tour-focused .provinsi-path-highlight {
  fill: #EDF2F8;
  stroke: #0C3E7F;
  stroke-width: 0.085;
  filter: drop-shadow(0 4px 12px rgba(12, 62, 127, 0.3));
}

/* ==========================================================================
   Client Kabupaten/Kota Layer — shown only for the currently focused province
   ========================================================================== */
.client-kabupaten-layer {
  pointer-events: none;
}

.kabupaten-client-group {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.kabupaten-client-group.is-active-kabupaten-group {
  opacity: 1;
  pointer-events: auto;
}

.kabupaten-client-path {
  fill: #0C3E7F;
  stroke: #FFFFFF;
  stroke-width: 0.06;
  stroke-linejoin: round;
  stroke-linecap: round;
  cursor: pointer;
}

.kabupaten-client-path:hover {
  fill: #F86A07;
}

/* Floating Clean Tooltip for Highlighted Provinces */
.map-hover-tooltip {
  position: absolute;
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
  box-shadow: 0 16px 36px -6px rgba(10, 49, 101, 0.25);
  border: 1px solid #E2E8F0;
  pointer-events: none;
  z-index: 100;
  transform: translate(-50%, -130%);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.map-hover-tooltip.active {
  opacity: 1;
  transform: translate(-50%, -140%);
}

.tooltip-client-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: #0A3165;
  margin-bottom: 0.2rem;
}

.tooltip-client-desc {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-body);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tooltip-accent-badge {
  font-size: 0.675rem;
  font-weight: 800;
  background: var(--accent-orange-subtle);
  color: var(--accent-orange);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}