/* ===== Base ===== */
:root{
  --chip-bg: #ffffff30;
  --chip-border: #ffffff;
  --accent: #ACC51A;
  --text-dim: #6b7280;
}

/* ===== FONT & BASE ===== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: Verdana, sans-serif;
}

#map {
  height: 100vh;
  width: 100%;
}
.leaflet-container{ background-color: transparent !important; }
.leaflet-div-icon{ background: transparent !important; border: none !important; }


/* FILTERS: overlay + fade (no layout shift) */
.filters{
  position: absolute; /* overlay on map */
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #ffffff80;
  border: 1px solid #ffffff;
  border-radius: 10px;
  padding: 8px 12px;
  max-width: 1096px;
  width: calc(100% - 20px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  font-family: Verdana, sans-serif;
  backdrop-filter: blur(6px);
}

/* toolbar */
.filters-toolbar{
  display:flex; align-items:center; justify-content:flex-end;
  gap:6px; padding-bottom:4px;
}
.filters-toggle{
  background: #0737412b !important;
  border:1px solid #ffffff;
  padding:4px 8px; font-size:12px; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  backdrop-filter: blur(6px);
  border-radius: 5px;
}
.filters-toggle:hover{ background: #ffffff80; !important; }

.filters-inner{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  overflow: hidden;
  will-change: opacity, transform, max-height;
  transition: opacity .22s ease, transform .22s ease, max-height .28s ease;
  opacity: 1;
  transform: translateY(0) scale(1);
  max-height: 420px; /* just needs to exceed real content height */
}

.filters--hidden .filters-inner{
  opacity: 0;
  transform: translateY(-6px) scale(0.99);
  max-height: 0;           /* <-- this collapses the big white box */
  pointer-events: none;
}

/* compact groups + Verdana */
.filter-group{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px;
  background: #0737410d;
  border:1px solid var(--chip-border, #e6e6e6);
  border-radius:8px; padding:6px 8px;
  font-size:11px; font-family: Verdana, sans-serif;
  backdrop-filter: blur(6px);
}
.filter-title{ font-weight:700; margin-right:4px; font-size:11px; }
.filter-actions{ margin-left:4px; display:flex; gap:4px; }
.filter-actions button,
#filterReset{ border:1px solid #e5e7eb; background:#fff; border-radius:6px; padding:2px 6px; font-size:11px; cursor:pointer; }
.filter-actions button:hover,#filterReset:hover{ background:#f9fafb; }

.filter-group label{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.filters input[type="checkbox"]{ accent-color:#ACC51A; }

.shape{ width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; }
.role-dot{ width:8px; height:8px; border-radius:999px; border:1px solid rgba(0,0,0,.08); }
.role-support{ background:#073741; } .role-partner{ background:#7ea48c; } .role-beneficiary{ background:#ACC51A; }

/* Map Info Card - matches filter panel style */
.info-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  max-width: min(1080px, 92vw);
  width: calc(100% - 24px);
  background: #ffffff80;
  border: 1px solid #ffffff;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
  box-sizing: border-box;
  font-family: Verdana, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  z-index: 1200;
  text-align: left;
}

/* Card title */
.info-card h4 {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: bold;
  color: #073741; /* deep tone from roleColors */
}

/* Subtitle (role) */
.info-card h6 {
  margin: 0 0 8px 0;
  font-size: 11px;
  font-weight: normal;
  color: var(--text-dim, #6b7280);
}

/* Paragraph text */
.info-card p {
  margin: 0 0 8px 0;
  color: #333;
}

/* Link */
.info-card a {
  color: #073741;
  text-decoration: none;
  font-weight: bold;
}
.info-card a:hover {
  text-decoration: underline;
}

/* Close button */
#infoClose {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-dim, #6b7280);
}
#infoClose:hover {
  color: #000;
}

.leaflet-tooltip.entity-tooltip{
  background: #ffffff80;             /* translucent white */
  border: 1px solid #ffffff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  backdrop-filter: blur(6px);
  color: #073741;
  font-family: Verdana, sans-serif;
  font-size: 12px;
  line-height: 1.3;
  padding: 6px 8px;
  border-radius: 8px;
}

/* The little pointer triangle needs the same translucent color */
.leaflet-tooltip-top.entity-tooltip:before {
  border-top-color: #ffffff80;
}
.leaflet-tooltip-bottom.entity-tooltip:before {
  border-bottom-color: #ffffff80;
}
.leaflet-tooltip-left.entity-tooltip:before {
  border-left-color: #ffffff80;
}
.leaflet-tooltip-right.entity-tooltip:before {
  border-right-color: #ffffff80;
}

.city-legend-pin{
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  margin: 0 6px 0 6px; /* space after checkbox and before text */
  vertical-align: middle;
}

.liaison-legend-plus{
  display:inline-flex;
  width:14px; height:14px;
  align-items:center; justify-content:center;
  margin:0 6px 0 6px;
  vertical-align:middle;
}

/* tiny “?” bubble + tooltip */
.hint{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:6px;
  font-size:11px; line-height:1; font-weight:700;
  color:#6b7280; cursor:help; user-select:none;
  border:1px solid #ffffff; border-radius:999px;
  background:#ffffff80; box-shadow:0 1px 3px rgba(0,0,0,.08);
  position:relative;
}
.hint::after{
  content:attr(data-tip);
  position:absolute; left:50%; bottom:130%;
  transform:translateX(-50%) translateY(4px);
  white-space:nowrap; padding:6px 8px; font-size:11px; color:#374151;
  background:#ffffff80; border:1px solid #ffffff; border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.12); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
}
.hint::before{
  content:""; position:absolute; left:50%; bottom:118%;
  transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#ffffff; opacity:.8;
}
.hint:hover::after, .hint:focus::after{ opacity:1; transform:translateX(-50%) translateY(0); }


.hint.align-left::after {
  left: 0;
  transform: translateX(0) translateY(4px);
}
.hint.align-left:hover::after,
.hint.align-left:focus::after {
  transform: translateX(0) translateY(0);
}

/* ===== Base ===== */
:root{
  --chip-bg: #ffffff30;
  --chip-border: #ffffff;
  --accent: #ACC51A;
  --text-dim: #6b7280;
}

/* ===== FONT & BASE ===== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: Verdana, sans-serif;
}

/* … your existing styles … */

/* Countries legend swatches */
.legend-swatch{
  width:14px; height:14px; border-radius:3px;
  display:inline-block; vertical-align:middle;
}

.tag{ display:inline-block; font-size:11px; line-height:1; padding:4px 8px; border-radius:999px; border:1px solid #e5e7eb; background:#f5f7f9; margin-right:6px; }
.tag--core{ color:#073741; border-color:#07374133; background:#07374110; }
.tag--associated{ color:#ACC51A; border-color:#ACC51A44; background:#ACC51A14; }

/* Info card */
.close-btn{ position:absolute; top:6px; right:8px; border:none; background:transparent; font-size:18px; line-height:1; cursor:pointer; }
.info-card h4{ margin:0 28px 8px 0; font-size:16px; }
.info-card .actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.info-card .btn{ border:1px solid #e5e7eb; background:#fff; border-radius:8px; padding:6px 10px; font-size:12px; cursor:pointer; text-decoration:none; color:#111; }
.info-card .btn--primary{ border-color:#073741; color:#073741; }


/* === Capacities map: wrapper + full-bleed + overlay fixes === */

/* The shortcode prints <div class="capacities-map-wrap ...">… */
.capacities-map-wrap {
  position: relative;            /* anchors overlays */
  isolation: isolate;            /* keep z-index stacking self-contained */
  padding-top: 96px;             /* space for the filters bar */
  margin-top: 24px;              /* small gap from the section above */
}

/* Full-bleed option: [capacities_map full="true"] */
.capacities-map-wrap.full-bleed {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible;             /* avoid clipping overlays */
}

/* Filters are positioned INSIDE the wrapper, not the page */
.capacities-map-wrap .filters {
  position: absolute !important;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(1080px, 92vw);
  width: calc(100% - 24px);
}

/* Map should fill the wrapper below the filters */
.capacities-map-wrap #map {
  display: block;
  width: 100% !important;
  height: 100vh !important;      /* you can override via shortcode height="" */
}

/* Info card on top-right, within wrapper */
.capacities-map-wrap .info-card {
  position: absolute;
  right: 16px;
  bottom: 16px;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .capacities-map-wrap { padding-top: 76px; }
  .capacities-map-wrap .filters { top: 8px; max-width: 96vw; }
}