/* ============================================================
   BE SVG Maps – Front-end styles
   - Base map is light gray with clear borders
   - Hover shows subtle "pop" on countries
   - Legend: position + persistent minimize/expand (no JS)
   - Legend: auto vertical scrolling when too tall
   ============================================================ */

.be-svg-map{
  position:relative;
  width:100%;
}

.be-svg-map__title{
  font-weight:700;
  margin:0 0 10px 0;
}

.be-svg-map__stage{
  position:relative;
  width:100%;
  max-width:100%;
  overflow:hidden;
  border-radius:14px;
}

/* SVG scales to stage height (stage controls height) */
.be-svg-map__svg{
  width:100%;
  height:100%;
  display:block;
}

/* Countries are tagged by PHP with .be-svg-map__country */
.be-svg-map__svg .be-svg-map__country{
  cursor:pointer;
  transition: transform .16s ease, filter .16s ease, stroke-width .16s ease, opacity .16s ease;
  transform-origin:center;
  vector-effect: non-scaling-stroke;
}

/* Subtle hover "pop" */
.be-svg-map__svg .be-svg-map__country:hover{
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.06) saturate(1.05) drop-shadow(0 2px 2px rgba(0,0,0,.12));
  stroke: rgba(0,0,0,.35) !important;
  stroke-width: 1.6 !important;
}

/* Active/highlighted countries (color comes from inline style set by PHP) */
.be-svg-map__svg .be-svg-map__country--active{
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.08));
}

/* Active hover: a touch more pop */
.be-svg-map__svg .be-svg-map__country--active:hover{
  filter: brightness(1.08) saturate(1.08) drop-shadow(0 2px 2px rgba(0,0,0,.14));
}

/* ------------------------------------------------------------
   Legend (position + persistent toggle)
   ------------------------------------------------------------ */
.be-svg-map__legend{
  position:absolute;
  z-index:5;

  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  border-radius:12px;

  padding:10px 10px;
  min-width:150px;
  max-width:260px;

  font-size:13px;

  /* expanded by default */
  transition: max-height .22s ease, padding .22s ease, transform .22s ease;
}

/* Legend positions */
.be-svg-map__legend--tl{ left:14px;  top:14px; }
.be-svg-map__legend--tr{ right:14px; top:14px; }
.be-svg-map__legend--bl{ left:14px;  bottom:14px; }
.be-svg-map__legend--br{ right:14px; bottom:14px; }

/* Hidden checkbox (drives collapse) */
.be-svg-map__legend-toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Header row */
.be-svg-map__legend-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 6px 0;
}

.be-svg-map__legend-title{
  font-weight:700;
  font-size:13px;
  margin:0;
  line-height:1.1;
}

/* The clickable minimize/expand button (label) */
.be-svg-map__legend-btn{
  width:26px;
  height:22px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;

  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
  background: rgba(255,255,255,.8);
  user-select:none;
}

.be-svg-map__legend-btn:active{
  transform: translateY(1px);
}

/* Show "–" when expanded (unchecked) */
.be-svg-map__legend-btn::after{
  content:"–";
  font-size:18px;
  font-weight:700;
  line-height:1;
  opacity:.85;
}

/* Legend body scrolls when long */
.be-svg-map__legend-body{
  max-height: 55vh;          /* safe outer cap */
  max-height: 55%;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:4px;
}

/* Nicer scrollbar (WebKit) */
.be-svg-map__legend-body::-webkit-scrollbar{ width:8px; }
.be-svg-map__legend-body::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius: 10px; }
.be-svg-map__legend-body::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); border-radius: 10px; }

.be-svg-map__legend-item{
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.3;
  padding:4px 0;
}

.be-svg-map__legend-swatch{
  width:10px;
  height:10px;
  border-radius:3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  flex:0 0 auto;
}

/* ------------------------------------------------------------
   Collapsed state (checkbox checked)
   - stays collapsed until clicked again
   - no hover behavior
   ------------------------------------------------------------ */
.be-svg-map__legend-toggle:checked ~ .be-svg-map__legend-header{
  margin:0;
}

/* When collapsed, hide body and tighten the box */
.be-svg-map__legend-toggle:checked ~ .be-svg-map__legend-body{
  display:none;
}

.be-svg-map__legend-toggle:checked ~ .be-svg-map__legend-header .be-svg-map__legend-btn::after{
  content:"+";
}

/* Reduce padding/height in collapsed state */
.be-svg-map__legend-toggle:checked ~ .be-svg-map__legend-header{
  padding:0;
}

.be-svg-map__legend-toggle:checked{
  /* nothing */
}

/* Because the checkbox is the first child, we need to collapse the container itself */
.be-svg-map__legend:has(.be-svg-map__legend-toggle:checked){
  padding:10px 10px;
  max-width:260px;
}

/* ------------------------------------------------------------
   Error box
   ------------------------------------------------------------ */
.be-svg-map__error{
  padding:12px 14px;
  border-radius:12px;
  background:#fff3f3;
  border:1px solid rgba(255,0,0,.15);
  color:#7a1a1a;
}

.be-svg-map__legend{
  max-height: 40%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media only screen and (max-width: 600px) {
.be-svg-map__legend{
  max-height: 28%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
}

/* optional: nicer scrollbar on WebKit */
.be-svg-map__legend::-webkit-scrollbar{ width: 8px; }
.be-svg-map__legend::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius: 10px; }
.be-svg-map__legend::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); border-radius: 10px; }