/* ============================================================
   We Run For Them — Hand-icon map styles v2.7
   Pure hand markers (no red circle), black/red/white popups,
   click-to-filter selection bar.
   ============================================================ */

/* Full-width breakout — map spans edge-to-edge regardless of parent container width */
.we-handmap-wrap {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 10px;
  border-radius: 0;
  overflow: hidden;
  background: #1A1A1A;
  box-shadow: 0 8px 32px -16px rgba(0,0,0,.5);
}
.we-handmap-stage { position:absolute; inset:0; }
.we-handmap-stage .leaflet-container { background:#1A1A1A; }
.we-handmap-stage .leaflet-control-attribution { background:rgba(0,0,0,.5); color:rgba(255,255,255,.6); font-size:10px; }
.we-handmap-stage .leaflet-control-attribution a { color:rgba(255,255,255,.8); }

.we-handmap-controls { position:absolute; top:14px; left:14px; z-index:401; display:flex; gap:6px; }
.we-handmap-btn { background:rgba(0,0,0,.7); color:#fff; border:1px solid rgba(255,255,255,.15); padding:8px 12px; border-radius:8px; font-family:'Inter',system-ui,sans-serif; font-weight:600; cursor:pointer; font-size:14px; min-width:36px; }
.we-handmap-btn:hover { background:#d61f2b; border-color:#d61f2b; }
.we-handmap-reset { padding:8px 18px; }

.we-handmap-leg { position:absolute; top:14px; right:14px; z-index:401; background:rgba(0,0,0,.7); color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.12); padding:8px 14px; border-radius:8px; font-family:'Inter',system-ui,sans-serif; font-size:12px; max-width:360px; line-height:1.4; }
.we-handmap-dot { display:inline-block; width:8px; height:8px; background:#d61f2b; border-radius:50%; margin-right:8px; vertical-align:middle; }

.we-handmap-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:22px; }

/* === Markers: pure hand image, no red circle === */
.we-hand-marker {
  background: transparent !important;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s ease;
}
.we-hand-marker img {
  width: 38px; height: 38px;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.7));
}
.we-hand-marker:hover { transform: scale(1.2); z-index: 1000 !important; }
.we-hand-marker.selected { transform: scale(1.25); z-index: 1100 !important; }
.we-hand-marker.selected img { filter: drop-shadow(0 0 6px #d61f2b) drop-shadow(0 2px 5px rgba(0,0,0,.7)); }

/* Cluster keeps a red disc badge with count */
.we-hand-cluster {
  background: #d61f2b;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'Anton', Georgia, serif;
  font-weight: 700;
  font-size: 15px;
}

/* === Popups: black / red / white === */
.leaflet-popup-content-wrapper {
  background: #100d0d !important;
  color: #f3ece2 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(214,31,43,.5);
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
}
.leaflet-popup-tip { background: #100d0d !important; border: 1px solid rgba(214,31,43,.5); }
.leaflet-popup-content { margin: 14px 16px !important; color: #f3ece2; }
.leaflet-popup-close-button { color: #f3ece2 !important; font-size: 22px !important; padding: 4px 8px 0 0 !important; }
.leaflet-popup-close-button:hover { color: #d61f2b !important; }

.we-handmap-popup { font-family:'Inter',system-ui,sans-serif; min-width:260px; color:#f3ece2; }
.we-handmap-popup .popup-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.we-handmap-popup .popup-text { flex:1; min-width:0; }
.we-handmap-popup .meta { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#d61f2b; font-weight:600; margin-bottom:6px; }
.we-handmap-popup h4 { font-family:'Anton','Inter',Georgia,serif; font-weight:400; font-size:22px; line-height:1.1; letter-spacing:.02em; margin:0 0 6px; color:#fff; text-transform:uppercase; }
.we-handmap-popup .loc { font-size:12px; color:rgba(243,236,226,.7); margin:0; }
.we-handmap-popup .stat { display:inline-block; padding:3px 8px; border-radius:999px; color:#fff; background:#d61f2b; font-size:9px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; white-space:nowrap; flex-shrink:0; align-self:flex-start; margin-right:24px; }
.we-handmap-popup .stat.missing { background:#c97d2f; }
.we-handmap-popup .sum { font-size:12px; line-height:1.5; color:rgba(243,236,226,.65); margin:0 0 14px; }
.we-handmap-popup .popup-actions { display:flex; gap:6px; align-items:center; }
.we-handmap-popup .runbtn { flex:1; text-align:center; background:#d61f2b; color:#fff !important; padding:8px 14px; border-radius:999px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; text-decoration:none; cursor:pointer; }
.we-handmap-popup .runbtn:hover { background:#b5101e; }
.we-handmap-popup .runbtn-hand-ext { width:30px; height:30px; object-fit:contain; flex-shrink:0; display:block; }
.we-handmap-popup .pickbtn { flex:1; text-align:center; background:transparent; color:#f3ece2 !important; padding:8px 14px; border:1px solid #d61f2b; border-radius:999px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; text-decoration:none; cursor:pointer; }
.we-handmap-popup .pickbtn:hover { background:rgba(214,31,43,.15); }
.we-handmap-popup .pickbtn.picked { background:#d61f2b; color:#fff !important; }

/* === Reservation polygons — faded red fill, mostly opaque === */
.we-reservation-poly { cursor: pointer; }
.we-reservation-popup { font-family:'Inter',system-ui,sans-serif; min-width:200px; color:#f3ece2; }
.we-reservation-popup .res-name { font-family:'Anton',Georgia,serif; font-size:18px; letter-spacing:.02em; color:#fff; text-transform:uppercase; margin:0 0 4px; }
.we-reservation-popup .res-tribe { font-size:11px; color:#d61f2b; letter-spacing:.18em; text-transform:uppercase; font-weight:600; margin-bottom:8px; }
.we-reservation-popup .res-desc { font-size:12px; line-height:1.5; color:rgba(243,236,226,.75); margin:0; }

/* === Selection bar (between map and grid) === */
.we-selection-bar {
  display: none;
  margin: 16px auto 12px;
  padding: 12px 16px;
  background: #100d0d;
  color: #f3ece2;
  border: 1px solid rgba(214,31,43,.5);
  border-radius: 8px;
  max-width: 1280px;
  font-family: 'Inter', system-ui, sans-serif;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.we-selection-bar.active { display: flex; }
.we-selection-bar .lbl { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #d61f2b; font-weight: 600; }
.we-selection-bar .chip { background: rgba(214,31,43,.15); border: 1px solid rgba(214,31,43,.5); border-radius: 999px; padding: 4px 6px 4px 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color:#f3ece2; }
.we-selection-bar .chip button { background: transparent; border: 0; color: #d61f2b; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.we-selection-bar .chip button:hover { color: #fff; }
.we-selection-bar .clear-all { margin-left: auto; background: transparent; border: 1px solid #d61f2b; color: #d61f2b; border-radius: 999px; padding: 4px 12px; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.we-selection-bar .clear-all:hover { background: #d61f2b; color: #fff; }