/* ---- Leaflet map: pin points for Mas Food's warehouses ----
   Full-bleed: no title/copy, no container, no rounded corners — just the map,
   flush to both edges of the section. ---- */
#peta-gudang {
  padding: 0;
}

.warehouse-map {
  width: 100%;
  height: 520px;
  background-color: var(--color-black-2);
  z-index: 0;
}

/* Standard OSM tiles are light — invert + hue-rotate just the tile imagery so the
   map reads dark, without touching the (separately-paned) markers and popups. */
.warehouse-map .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.88) contrast(0.92) saturate(0.7);
}

.warehouse-map .leaflet-control-attribution {
  background-color: rgba(11, 11, 12, 0.7);
  color: rgba(247, 245, 241, 0.75);
}

.warehouse-map .leaflet-control-attribution a {
  color: rgba(247, 245, 241, 0.9);
}

.warehouse-map .leaflet-bar a {
  background-color: var(--color-black-2);
  color: var(--color-offwhite);
  border-bottom-color: rgba(247, 245, 241, 0.15);
}

.warehouse-map .leaflet-bar a:hover {
  background-color: var(--color-black);
  color: var(--color-gold);
}

.warehouse-marker {
  background: none;
  border: none;
}

.warehouse-marker span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-circle);
  background: var(--gradient-gold);
  border: 2px solid var(--color-black);
  box-shadow: 0 0 0 4px rgba(184, 149, 74, 0.25);
}

.warehouse-map .leaflet-popup-content-wrapper {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
}

.warehouse-map .leaflet-popup-content {
  margin: 0.85rem 1rem;
  font-family: var(--font-body);
}

.warehouse-popup-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-dim);
  margin-bottom: 0.2rem;
}

.warehouse-popup-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-black);
  margin-bottom: 0.3rem;
}

.warehouse-popup-address {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.warehouse-popup-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-gold-dim);
  text-decoration: none;
}

.warehouse-popup-link:hover {
  color: var(--color-gold);
}

@media (max-width: 767.98px) {
  .warehouse-map {
    height: 380px;
  }
}