:root{
  --wl-gap:12px;
  --wl-controls-bg:#ffffff;
  --wl-border:#e5e7eb;
  --wl-text:#343434;
  --wl-muted:#5c5c5c;
  --wl-accent:#099855;

  --wl-header-h: 72px;
  --wl-controls-h: 64px;
  --wl-controls-extra-pad:12px;
  --wl-mobile-tabs-h:44px;
}

html, body { height:100%; margin:0; background:#fff; }
body { overflow:hidden; }

.site-header{ margin-bottom:0 !important; }

.wl-controls-wrap{
  position:sticky;
  top:var(--wl-header-h);
  z-index:30000;
  background:var(--wl-controls-bg);
  border-bottom:1px solid var(--wl-border);
}
.wl-controls{
  display:flex; align-items:center; gap:var(--wl-gap);
  padding:var(--wl-controls-extra-pad) 0 0 0;
  min-height:var(--wl-controls-h);
  flex-wrap:wrap;
}
.wl-filters-label{ font-weight:600; color:var(--wl-text); user-select:none; }
.wl-filter-row{ display:flex; align-items:center; gap:var(--wl-gap); flex:1 1 auto; flex-wrap:wrap; }
.wl-right-controls{ margin-left:auto; display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }

.wl-toggle{ display:inline-flex; align-items:center; gap:8px; font-weight:500; color:var(--wl-text); user-select:none; }
.wl-switch{ position:relative; width:44px; height:24px; background:#d1d5db; border-radius:999px; cursor:pointer; transition:background .2s ease; }
.wl-switch::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s ease; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.wl-switch[data-checked="true"]{ background:var(--wl-accent); }
.wl-switch[data-checked="true"]::after{ transform:translateX(20px); }

.wl-filter-btn{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--wl-border); border-radius:10px;
  background:#fff; color:var(--wl-text); font-weight:500; line-height:1.1; cursor:pointer;
  transition:box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  user-select:none;
}
.wl-filter-btn:focus{ outline:2px solid var(--wl-accent); outline-offset:2px; }
.wl-filter-btn:hover{
  background:#eaf2ff;
  border-color:var(--wl-accent);
  color:var(--wl-accent);
  box-shadow:0 2px 8px rgba(37,99,235,.18);
}
.wl-caret{ border:solid var(--wl-muted); border-width:0 2px 2px 0; display:inline-block; padding:3px; transform:rotate(45deg); margin-top:-2px; }
.wl-filter-btn[aria-expanded="true"] .wl-caret{ transform:rotate(-135deg); }

.wl-dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:260px; max-width:320px;
  background:#fff; border:1px solid var(--wl-border); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.1);
  padding:10px; display:none; z-index:31000;
}
.wl-dropdown[data-open="true"]{ display:block; }
.wl-search{ width:100%; border:1px solid var(--wl-border); border-radius:8px; padding:8px 10px; margin-bottom:8px; font-size:14px; }
.wl-options{ max-height:200px; overflow:auto; border:1px solid var(--wl-border); border-radius:8px; padding:6px; }
.wl-option{ display:flex; align-items:center; gap:8px; padding:6px 4px; border-radius:6px; cursor:pointer; }
.wl-option:hover{ background:#f9fafb; }
.wl-option input{ margin:0; accent-color: var(--wl-accent); }

.wl-actions{ display:flex; justify-content:space-between; gap:8px; margin-top:10px; }
.wl-btn{ flex:1 1 auto; padding:8px 10px; border-radius:8px; border:1px solid var(--wl-border); background:#fff; font-weight:600; cursor:pointer; color:var(--wl-text); transition:all .15s ease; }
.wl-btn:hover{ background:#eff6ff; border-color:var(--wl-accent); color:var(--wl-accent); }
.wl-btn-primary{ background:var(--wl-accent); color:#fff; border-color:var(--wl-accent); }
.wl-btn-primary:hover{ background:#1e4fd6; border-color:#1e4fd6; color:#fff; }

.wl-viewport{
  position:fixed;
  top:calc(var(--wl-header-h) + var(--wl-controls-h));
  left:0; right:0; bottom:0;
  z-index:1;
  background:#fff;
  height:calc(100vh - (var(--wl-header-h) + var(--wl-controls-h)));
}
.wl-viewport .container-sides{
  padding-left:0; padding-right:0; padding-bottom:0; margin-bottom:0;
  height:100%;
  max-width:none; width:100%;
}
.wl-viewport > main{ height:100%; }
.wl-viewport > main > .container-sides{ height:100%; }

.wl-mobile-tabs{
  display:none;
  position:absolute;
  top:0; left:0; right:0;
  height:var(--wl-mobile-tabs-h);
  background:#fff;
  border-bottom:1px solid var(--wl-border);
  z-index:15000;
  align-items:center;
  padding:6px;
  gap:6px;
  box-sizing:border-box;
}
.wl-mobile-tab{
  flex:1 1 0;
  display:inline-flex; align-items:center; justify-content:center;
  height:32px;
  border:1px solid var(--wl-border);
  border-radius:8px;
  background:#fff;
  color: var(--wl-text); /* fixed */
  font-weight:600;
  cursor:pointer;
  transition:all .15s ease;
  user-select:none;
}
.wl-mobile-tab:hover{ background:#eaf2ff; border-color:var(--wl-accent); color:var(--wl-accent); }
.wl-mobile-tab[aria-pressed="true"]{
  background:var(--wl-accent); color:#fff; border-color:var(--wl-accent);
}

.wl-content{
  display:grid; grid-template-columns:1fr; gap:var(--wl-gap);
  height:100%;
  min-height:0;
  margin:0 !important;
  padding:0;
  position:relative;
}
.wl-layout--map .wl-content{ grid-template-columns:1fr 3fr; }

.wl-left{
  display:flex; flex-direction:column;
  height:100%;
  min-height:0;
  overflow:hidden;
  margin:0;
}
.wl-left-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:12px;
  padding:0 12px 12px 12px;
  box-sizing:border-box;
}
.wl-intro{
  border:1px solid var(--wl-border); border-radius:12px; background:#fff;
  padding:20px 16px 16px;
  margin-top:8px;
  flex:0 0 auto;
}
.wl-intro h3{ margin:0 0 6px 0; font-weight:700; }
.wl-intro p{ margin:0; color:#6b7280; }

.wl-graphs{
  border:1px solid var(--wl-border); border-radius:12px; background:#fff;
  padding:10px; display:flex; flex-direction:column; gap:10px; margin:0;
  flex:0 0 auto;
}
.wl-graph-card{ border:1px solid var(--wl-border); border-radius:10px; overflow:hidden; background:#fff; }
.wl-graph-card img{ width:100%; display:block; height:auto; }
.wl-graph-meta{ padding:8px 10px; font-size:13px; color:#6b7280; }

.wl-map{
  position:relative;
  border:1px solid var(--wl-border); border-radius:12px; overflow:hidden; background:#f3f4f6;
  height:100%;
  min-height:0;
  margin:0;
}
.wl-map .leaflet-container{ width:100%; height:100%; }
.leaflet-top, .leaflet-bottom{ z-index: 100000; }

.wl-map-toggle{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:12px;
  z-index:20000;
  border:1px solid var(--wl-border); background:#fff; color:#1f2937;
  border-radius:8px;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  user-select:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.wl-map-toggle:hover{
  background:#eaf2ff;
  border-color:var(--wl-accent);
  color:var(--wl-accent);
  box-shadow:0 2px 8px rgba(37,99,235,.18);
}

.wl-layout--map.wl-map-only .wl-content{ grid-template-columns:1fr; }
.wl-layout--map.wl-map-only .wl-left{ display:none; }

.wl-fullpage{
  display:none;
  height:100%;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
  padding:24px;
}
.wl-layout--list .wl-left, .wl-layout--list .wl-map{ display:none; }
.wl-layout--list .wl-fullpage{ display:block; }
.wl-layout--list #wlGraphs{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:24px;
  padding:0;
  border:none; background:transparent; border-radius:0; margin:0;
}

@media (max-width:991px){
  .wl-mobile-tabs{ display:flex; }
  .wl-right-controls{ display:none; }
  .wl-map-toggle{ display:none; }
  .wl-content{ padding-top:var(--wl-mobile-tabs-h); }
  .wl-layout--map .wl-content{ grid-template-columns:1fr; }
  .wl-layout--map .wl-left{ display:none; }
  .wl-layout--map .wl-map{
    height:100%;
    width:100%;
    border-radius:0;
    border-left:none; border-right:none;
  }
  .wl-layout--list .wl-fullpage{ height:100%; }
}

.site-header { position: relative; z-index: 100010 !important; }
#mobile-menu { position: relative; z-index: 100005 !important; }
#mobile-menu .mobile-navigation { position: relative; z-index: 100005; }

.cluster-bubble { position: relative; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; }
.cluster-bubble .ring { position:absolute; border-radius:50%; opacity:.35; background:#ff8c00; }
.cluster-bubble .r1 { width:36px; height:36px; }
.cluster-bubble .r2 { width:28px; height:28px; }
.cluster-bubble .r3 { width:20px; height:20px; opacity:.9; }
.cluster-bubble .count { position:relative; font:600 12px/1 system-ui, sans-serif; color:#fff; }
.marker-cluster-small  .cluster-bubble { width:36px; height:36px; }
.marker-cluster-medium .cluster-bubble { width:42px; height:42px; }
.marker-cluster-medium .r1 { width:42px; height:42px; }
.marker-cluster-medium .r2 { width:32px; height:32px; }
.marker-cluster-medium .r3 { width:22px; height:22px; }
.marker-cluster-large  .cluster-bubble { width:48px; height:48px; }
.marker-cluster-large  .r1 { width:48px; height:48px; }
.marker-cluster-large  .r2 { width:38px; height:38px; }
.marker-cluster-large  .r3 { width:26px; height:26px; }

.construction-banner {
  position: fixed;
  top: 150px;
  right: 12px;
  z-index: 200000;
  background: #eff937;
  color: #222;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  max-width: 320px;
  line-height: 1.4;
}

/* --- Reset Filters button: light red base, darker red on hover --- */
.wl-reset-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  /* same sizing as other filter buttons */
  padding: 8px 12px;
  border: 1px solid #f5c2c2;        /* light red border */
  border-radius: 10px;
  line-height: 1.1;

  background: #fdeaea;              /* light red/pink background */
  color: #b91c1c;                   /* dark red text */
  font-weight: 600;
  cursor: pointer;

  transition:
    box-shadow .15s ease,
    background .15s ease,
    color .15s ease,
    border-color .15s ease;
}

/* Removed margin-left:auto so it sits right next to filter buttons */
#wlResetFilters { margin-left: 0; }

.wl-reset-btn:focus {
  outline: 2px solid #ef4444; /* bright red focus ring */
  outline-offset: 2px;
}

.wl-reset-btn:hover {
  background: #ef4444;   /* darker red background */
  border-color: #dc2626; /* stronger red border */
  color: #fff;           /* white text for contrast */
  box-shadow: 0 2px 8px rgba(239,68,68,0.3);
}

/* small screens: full-width alignment if your buttons wrap */
@media (max-width: 480px) {
  .wl-reset-btn { width: auto; justify-content: center; }
}

/* Extra breathing room under filter buttons on mobile */
@media (max-width: 991px) {
  /* Adds space below the whole filter bar */
  .wl-controls {
    padding-bottom: 12px; /* was 0 — bump slightly */
  }

  /* If your filters also appear on non-sticky layouts (e.g., hero on index) */
  .wl-filter-wrap {
    margin-bottom: 12px; /* subtle space under the buttons block */
  }

  /* Nice wrap spacing between rows of buttons when they break */
  .wl-filter-row {
    row-gap: 10px; /* extra vertical gap between wrapped rows */
  }
}


/* ===== Draggable window on map ===== */
.wl-map{ position:relative; }

.wq-sheet {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px !important;                 /* small gap from bottom */
  width: 83.3333%;                          /* 5/6 width */
  height: 50%;
  background: #fff;
  border-radius: 12px;                      /* rounded on all corners */
  border: 1px solid var(--wl-border, #e5e7eb);
  box-shadow: 0 -10px 30px rgba(0,0,0,.18);
  z-index: 120000;
  display: none;                            /* set to flex when opened */
  flex-direction: column;
  overflow: hidden;
}

/* Header (drag handle area) */
.wq-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--wl-border, #e5e7eb);
  cursor: move;                             /* drag handle */
  user-select: none;
  position: relative;
}

/* keep tabs clickable & not “move” cursor */
.wq-tabs { 
  display:flex; 
  gap:6px; 
  flex-wrap:wrap; 
  cursor: default; 
  -webkit-user-drag: none;
  flex: 1 1 auto;                           /* occupy remaining space */
  min-width: 0;
}

body.wq-dragging { cursor: grabbing; }

/* Close button – red, uniform padding, sits to the right of tabs */
.wq-sheet-close {
  flex-shrink: 0;
  appearance: none;
  border: 1px solid #ef4444;
  background: #fecaca;                      /* light red */
  color: #991b1b;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  width: 36px;
  height: 36px;
  line-height: 1;
  padding: 0;                                /* equal padding all sides via square */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: auto;                         /* pushes to far right, not overlapping tabs */
}
.wq-sheet-close:hover {
  background: #ef4444;                      /* darker red hover */
  border-color: #ef4444;
  color: #fff;
}

/* Tabs — green; disabled grey */
.wq-tab{
  appearance:none;
  border:1px solid #0a8a4c;
  background:#12a05a;
  color:#fff;
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  transition:filter .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.wq-tab:hover{ filter:brightness(0.95); }
.wq-tab[aria-selected="true"]{
  background:#0b7f45;
  border-color:#0b7f45;
}
.wq-tab.is-disabled,
.wq-tab:disabled{
  background:#d1d5db;
  border-color:#c7cbd1;
  color:#555;
  cursor:not-allowed;
}

/* Body & key/value layout */
.wq-sheet-body{ 
  overflow:auto; 
  padding:12px 14px; 
  height:100%; 
}
.wq-kv{ 
  display:flex; 
  flex-direction:column; 
  gap:8px; 
}
.wq-row{ 
  display:grid; 
  grid-template-columns: 220px 1fr; 
  gap:10px; 
}
.wq-k{ color:#444; font-weight:700; }
.wq-v{ color:#111; }
.wq-sup{ font-size:.7em; vertical-align:super; }
.wq-empty{ color:#666; font-style:italic; }

/* Responsive tweaks */
@media (max-width: 1024px){
  .wq-sheet { width: 90%; }
}
@media (max-width: 640px){
  .wq-row{ grid-template-columns: 140px 1fr; }
}