/* ─── Layout ────────────────────────────────────────────────────────── */
.map-layout {
  display: flex;
  height: calc(100vh - 60px);
}

/* ─── Sidebar ───────────────────────────────────────────────────────── */
.map-sidebar {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-right: 1px solid var(--gray-200);
  overflow: hidden;
}

.map-sidebar-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--gray-200);
}

.map-sidebar-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 12px;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-dot.resort    { background: #0c4a6e; }
.legend-dot.excursion { background: #e76f51; }
.legend-dot.activity  { background: #f59e0b; }
.legend-dot.shopping  { background: #7c3aed; }
.legend-dot.transport { background: #6b7280; }

/* ─── Location list ─────────────────────────────────────────────────── */
.location-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.location-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
  border-left: 3px solid transparent;
}

.location-item:hover {
  background: var(--gray-50);
}

.location-item.active {
  background: var(--ocean-lt);
  border-left-color: var(--ocean);
}

.location-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.location-item-emoji {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1.2;
}

.location-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.location-item-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.3;
}

.location-item.active .location-item-name { color: var(--ocean-dk); }

.location-item-dates {
  font-size: .75rem;
  color: var(--gray-400);
}

/* ─── Map container ─────────────────────────────────────────────────── */
#map {
  flex: 1;
  min-height: 0;
  z-index: 0;
}

/* ─── Custom pin marker ─────────────────────────────────────────────── */
.map-pin {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 3px rgba(255,255,255,.8);
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.map-pin:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.9);
}

.map-pin-emoji { line-height: 1; }

/* ─── Popup ─────────────────────────────────────────────────────────── */
.map-popup { min-width: 200px; }

.map-popup-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 99px;
  margin-bottom: 6px;
}

.map-popup-name {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
  margin-bottom: 4px;
}

.map-popup-dates {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ocean);
  margin-bottom: 6px;
}

.map-popup-notes {
  font-size: .82rem;
  color: var(--gray-600);
  line-height: 1.5;
  margin: 0;
}

.map-popup-gmaps {
  display: inline-block;
  margin-top: 8px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ocean);
  text-decoration: none;
}
.map-popup-gmaps:hover { text-decoration: underline; }

/* Override Leaflet popup chrome */
.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.15) !important;
  padding: 0 !important;
}

.leaflet-popup-content {
  margin: 16px 18px !important;
}

.leaflet-popup-tip-container { margin-top: -1px; }

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .map-layout { flex-direction: column; height: auto; }
  .map-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--gray-200); }
  .location-list { max-height: 40vh; }
  #map { height: 55vh; }
}