/* MPC Interactive Map v2.0 — Public CSS */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=DM+Sans:wght@300;400;500&display=swap');

/* ── CSS Variables (overridden per-instance via JS) ── */
.mpc-map-wrap {
  --mpc-primary:   #57B9A3;
  --mpc-secondary: #1c2320;
  --mpc-panel-bg:  #141a18;
  --mpc-text:      #e8ede9;
  --mpc-muted:     #8a9b94;
  --mpc-border:    rgba(87,185,163,0.18);
  --mpc-hover:     rgba(87,185,163,0.06);
  --mpc-active:    rgba(87,185,163,0.12);
  --mpc-accent:    #57B9A3;
  --mpc-panel-w:   300px;
  --mpc-panel-r:   14px;
  --mpc-panel-off: 20px;
  --mpc-panel-shadow: 0 8px 40px rgba(0,0,0,.5);
  /* Typography */
  --mpc-title-family:    'Cormorant Garamond', Georgia, serif;
  --mpc-title-size:      20px;
  --mpc-title-weight:    300;
  --mpc-title-color:     #e8ede9;
  --mpc-title-lh:        1.2;
  --mpc-title-ls:        0.04em;
  --mpc-subtitle-family: 'DM Sans', sans-serif;
  --mpc-subtitle-size:   10px;
  --mpc-subtitle-weight: 300;
  --mpc-subtitle-color:  #8a9b94;
  --mpc-subtitle-transform: uppercase;
  --mpc-subtitle-ls:     0.14em;
  --mpc-tab-family:      'DM Sans', sans-serif;
  --mpc-tab-size:        11px;
  --mpc-tab-weight:      400;
  --mpc-tab-color:       #8a9b94;
  --mpc-tab-radius:      20px;
  --mpc-tab-active-bg:   #57B9A3;
  --mpc-tab-active-color:#1a1f1e;
  --mpc-pname-family:    'DM Sans', sans-serif;
  --mpc-pname-size:      13px;
  --mpc-pname-weight:    400;
  --mpc-pname-color:     #e8ede9;
  --mpc-pname-lh:        1.3;
  --mpc-psub-family:     'DM Sans', sans-serif;
  --mpc-psub-size:       11px;
  --mpc-psub-weight:     300;
  --mpc-psub-color:      #8a9b94;
  --mpc-ptime-family:    'Cormorant Garamond', Georgia, serif;
  --mpc-ptime-size:      20px;
  --mpc-ptime-weight:    300;
  --mpc-ptime-color:     #57B9A3;
  --mpc-pmin-family:     'DM Sans', sans-serif;
  --mpc-pmin-size:       9px;
  --mpc-pmin-weight:     300;
  --mpc-pmin-color:      #8a9b94;
  --mpc-badge-near-bg:   rgba(87,185,163,0.12);
  --mpc-badge-near-border:rgba(87,185,163,0.3);
  --mpc-legend-bg:       #141a18;
  --mpc-legend-r:        10px;
}

/* ── WRAP ── */
.mpc-map-wrap { position:relative; overflow:hidden; font-family:'DM Sans',sans-serif; }

/* ── PANEL ── */
.mpc-panel {
  position:absolute;
  top:var(--mpc-panel-off);
  left:var(--mpc-panel-off);
  width:var(--mpc-panel-w);
  max-height:calc(100% - var(--mpc-panel-off) * 2);
  background:var(--mpc-panel-bg);
  border:1px solid var(--mpc-border);
  border-radius:var(--mpc-panel-r);
  box-shadow:var(--mpc-panel-shadow);
  z-index:10;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:transform .3s ease, opacity .3s ease;
}
.mpc-panel.is-hidden { transform:translateX(-110%); opacity:0; pointer-events:none; }

/* Panel header */
.mpc-panel-hd {
  padding:16px 18px 12px;
  border-bottom:1px solid var(--mpc-border);
  flex-shrink:0;
  user-select:none;
}
.mpc-panel-title {
  font-family:var(--mpc-title-family);
  font-size:var(--mpc-title-size);
  font-weight:var(--mpc-title-weight);
  color:var(--mpc-title-color);
  line-height:var(--mpc-title-lh);
  letter-spacing:var(--mpc-title-ls);
}
.mpc-panel-title span { color:var(--mpc-accent); }
.mpc-panel-sub {
  font-family:var(--mpc-subtitle-family);
  font-size:var(--mpc-subtitle-size);
  font-weight:var(--mpc-subtitle-weight);
  color:var(--mpc-subtitle-color);
  text-transform:var(--mpc-subtitle-transform);
  letter-spacing:var(--mpc-subtitle-ls);
  margin-top:4px;
}

/* Category tabs */
.mpc-cat-tabs {
  display:flex;
  gap:5px;
  padding:10px 12px;
  border-bottom:1px solid var(--mpc-border);
  overflow-x:auto;
  scrollbar-width:none;
  flex-shrink:0;
}
.mpc-cat-tabs::-webkit-scrollbar { display:none; }
.mpc-cat-btn {
  padding:4px 12px;
  border-radius:var(--mpc-tab-radius);
  border:1px solid var(--mpc-border);
  background:transparent;
  font-family:var(--mpc-tab-family);
  font-size:var(--mpc-tab-size);
  font-weight:var(--mpc-tab-weight);
  color:var(--mpc-tab-color);
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s;
}
.mpc-cat-btn.is-active {
  background:var(--mpc-tab-active-bg);
  color:var(--mpc-tab-active-color);
  border-color:var(--mpc-tab-active-bg);
}
.mpc-cat-btn:hover:not(.is-active) { border-color:var(--mpc-primary); color:var(--mpc-primary); }

/* Points list — the actual rendered element has class .mpc-pts-list (the
 * legacy `.mpc-points-list` here never matched and broke scrolling). We keep
 * both selectors so an old browser cache won't break anything. */
.mpc-points-list,
.mpc-pts-list {
  flex: 1;
  min-height: 0;            /* required inside a flex column for overflow to work */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--mpc-border) transparent;
}
.mpc-pts-list::-webkit-scrollbar         { width: 6px; }
.mpc-pts-list::-webkit-scrollbar-thumb   { background: var(--mpc-border); border-radius: 3px; }
.mpc-pts-list::-webkit-scrollbar-track   { background: transparent; }
.mpc-pt-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-bottom:1px solid var(--mpc-border);
  cursor:pointer;
  transition:background .12s;
}
.mpc-pt-item:hover    { background:var(--mpc-hover); }
.mpc-pt-item.is-active{ background:var(--mpc-active); }
/* Featured row — soft background highlight (colour + opacity configurable in design pane) */
.mpc-pt-item.is-featured {
  background: var(--mpc-featured-row-bg, rgba(240,192,64,0.12));
}
.mpc-pt-item.is-featured:hover { background: var(--mpc-featured-row-bg, rgba(240,192,64,0.12)); filter: brightness(1.15); }
/* Name row wraps the .mpc-pt-name + the ⭐ in a single flex line so the
 * star sits immediately next to the name. The name keeps its
 * `text-overflow: ellipsis` behaviour; the star has flex-shrink:0 so it
 * never gets clipped even when the name truncates. */
.mpc-pt-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.mpc-pt-name-row .mpc-pt-name {
  min-width: 0;        /* required inside a flex item so ellipsis kicks in */
}
.mpc-pt-item .mpc-ext-star {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
  color: var(--mpc-badge-feat-color, #f0c040);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
  pointer-events: none;
}
.mpc-pt-ico           { width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mpc-pt-meta          { flex:1; min-width:0; }
.mpc-pt-name {
  font-family:var(--mpc-pname-family);
  font-size:var(--mpc-pname-size);
  font-weight:var(--mpc-pname-weight);
  color:var(--mpc-pname-color);
  line-height:var(--mpc-pname-lh);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mpc-pt-sub {
  font-family:var(--mpc-psub-family);
  font-size:var(--mpc-psub-size);
  font-weight:var(--mpc-psub-weight);
  color:var(--mpc-psub-color);
  margin-top:2px;
}
.mpc-pt-time {
  font-family:var(--mpc-ptime-family);
  font-size:var(--mpc-ptime-size);
  font-weight:var(--mpc-ptime-weight);
  color:var(--mpc-ptime-color);
  text-align:right;
  flex-shrink:0;
  line-height:1;
}
.mpc-pt-time span {
  display:block;
  font-family:var(--mpc-pmin-family);
  font-size:var(--mpc-pmin-size);
  font-weight:var(--mpc-pmin-weight);
  color:var(--mpc-pmin-color);
  text-transform:uppercase;
  letter-spacing:0.1em;
}
.mpc-badge-near {
  display:inline-block;
  margin-left:5px;
  padding:1px 6px;
  font-size:9px;
  font-weight:600;
  color:var(--mpc-primary);
  background:var(--mpc-badge-near-bg);
  border:1px solid var(--mpc-badge-near-border);
  border-radius:3px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  vertical-align:middle;
}

/* Route footer */
.mpc-route-foot {
  padding:10px 14px;
  border-top:1px solid var(--mpc-border);
  display:none;
  flex-shrink:0;
}
.mpc-route-foot.is-visible { display:flex; align-items:center; gap:10px; }
.mpc-route-info { flex:1; font-size:11px; color:var(--mpc-muted); line-height:1.4; }
.mpc-close-route {
  background:transparent;
  border:1px solid var(--mpc-border);
  border-radius:18px;
  padding:4px 12px;
  font-size:11px;
  color:var(--mpc-muted);
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .12s, color .12s;
}
.mpc-close-route:hover { border-color:var(--mpc-primary); color:var(--mpc-primary); }

/* Toggle button (shows when panel is hidden) */
.mpc-toggle-panel {
  position:absolute;
  top:var(--mpc-panel-off);
  left:var(--mpc-panel-off);
  width:40px; height:40px;
  background:var(--mpc-panel-bg);
  border:1px solid var(--mpc-border);
  border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  color:var(--mpc-muted);
  font-size:16px;
  cursor:pointer;
  z-index:11;
  display:none;
  align-items:center;
  justify-content:center;
  transition:color .12s;
}
.mpc-toggle-panel.is-visible { display:flex; }
.mpc-toggle-panel:hover { color:var(--mpc-primary); }

/* Legend */
.mpc-legend {
  position:absolute;
  bottom:20px; right:12px;
  background:var(--mpc-legend-bg);
  border:1px solid var(--mpc-border);
  border-radius:var(--mpc-legend-r);
  padding:10px 14px;
  z-index:10;
  min-width:120px;
  /* Flex container so rows can be stacked vertically (default) or
     distributed horizontally with wrap based on `legend_layout` design. */
  display:flex;
  flex-direction:var(--mpc-legend-direction, column);
  flex-wrap:wrap;
  gap:4px 14px;
}
.mpc-leg-row  { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--mpc-muted); line-height:1.8; }
.mpc-leg-dot  { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* InfoWindow */
.mpc-iw          { padding:2px 4px; font-family:'DM Sans',sans-serif; min-width:140px; }
.mpc-iw-name     { font-size:13px; font-weight:500; color:#1a1f1e; margin-bottom:3px; }
.mpc-iw-sub      { font-size:11px; color:#6a7a74; margin-bottom:4px; }
.mpc-iw-mode     { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:#3a5a52;
                   background:rgba(87,185,163,.1); border:1px solid rgba(87,185,163,.25);
                   border-radius:14px; padding:3px 10px; }

/* Google Maps zoom control */
.gm-bundled-control { margin-right:8px !important; }

/* ── RESPONSIVE ── */
@media (max-width:600px) {
  .mpc-panel {
    top:auto; left:0; right:0; bottom:0;
    width:100%;
    max-height:55%;
    border-radius:16px 16px 0 0;
    border-left:none; border-right:none; border-bottom:none;
  }
  .mpc-toggle-panel {
    top:12px; left:50%; transform:translateX(-50%);
    width:auto; padding:0 16px; border-radius:20px;
    font-size:13px;
  }
  .mpc-legend { display:none; }
}