/* FileFortress Interactive Map: the map visitors see. Colors follow the FileFortress site theme. 
   Licensed under the FileFortress Template License (publish only on FileFortress), see LICENSE.txt. */
:root {
  --ffm-bg: #150c16;
  --ffm-chrome: #100912;
  --ffm-surface: #1c1120;
  --ffm-raised: #241729;
  --ffm-high: #2d1e33;
  --ffm-line: #2e2035;
  --ffm-line-strong: #432f4c;
  --ffm-brand: #e11d48;
  --ffm-brand-soft: #fee2e2;
  --ffm-text: rgba(255, 255, 255, 0.92);
  --ffm-muted: rgba(255, 255, 255, 0.55);
  --ffm-faint: rgba(255, 255, 255, 0.35);
  --ffm-font: Inter, ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; background: var(--ffm-bg); color: var(--ffm-text); font-family: var(--ffm-font); }
button, input, select, textarea { font: inherit; color: inherit; }

.ffm { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--ffm-bg); }
.ffm-map { position: absolute; inset: 0; background: var(--ffm-map-bg, var(--ffm-bg)); }
.ffm .leaflet-container { background: var(--ffm-map-bg, var(--ffm-bg)); font-family: var(--ffm-font); outline: none; }
.ffm .leaflet-tile { image-rendering: auto; }

/* ---------- side panel ---------- */
/* the sidebar: full height on the left, like the Map Maker's */
.ffm.has-panel .ffm-map { left: 320px; }
.ffm-panel {
  position: absolute; z-index: 600; left: 0; top: 0; bottom: 0; width: 320px;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--ffm-surface); border-right: 1px solid var(--ffm-line);
}
.ffm-head { padding: 18px 18px 16px; margin-bottom: 12px; background: var(--ffm-chrome); border-bottom: 1px solid var(--ffm-line); }
.ffm-eyebrow { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #fda4af; }
.ffm-title { margin: 6px 0 0; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; color: #fff; }
.ffm-desc { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ffm-muted); }
.ffm-search { position: relative; margin: 0 14px 6px; }
.ffm-search input {
  width: 100%; height: 38px; padding: 0 12px 0 34px; border-radius: 11px; border: 1px solid var(--ffm-line);
  background: var(--ffm-chrome); color: #fff; font-size: 13px; outline: none; transition: border-color .15s;
}
.ffm-search input:focus { border-color: var(--ffm-line-strong); }
.ffm-search svg { position: absolute; left: 11px; top: 11px; width: 16px; height: 16px; color: var(--ffm-faint); }
.ffm-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 10px; scrollbar-width: thin; scrollbar-color: var(--ffm-line-strong) transparent; }
.ffm-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 6px; font-size: 11px; color: var(--ffm-faint); }
.ffm-bar button { background: none; border: 0; padding: 0; margin-left: 10px; color: var(--ffm-muted); cursor: pointer; font-size: 11px; font-weight: 600; }
.ffm-bar button:hover { color: #fff; }
.ffm-group { margin: 12px 10px 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ffm-faint); }
.ffm-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 10px;
  background: none; text-align: left; cursor: pointer; transition: background .15s, opacity .15s;
}
.ffm-row:hover { background: var(--ffm-raised); }
.ffm-row.is-off { opacity: 0.42; }
.ffm-row .ffm-ico { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--ffm-high); font-size: 14px; }
.ffm-row .ffm-ico img { width: 18px; height: 18px; object-fit: contain; }
.ffm-row .ffm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--ffm-text); }
.ffm-row .ffm-count { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ffm-faint); }
/* switches (legend rows and group headers) */
.ffm-switch { position: relative; width: 34px; height: 20px; flex: none; border-radius: 99px; background: var(--ffm-high); border: 0; padding: 0; cursor: pointer; transition: background .15s; }
.ffm-switch i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transition: transform .15s, background .15s; }
.ffm-switch.is-on { background: var(--ffm-brand); }
.ffm-switch.is-on i { transform: translateX(14px); background: #fff; }
.ffm-row.is-off { opacity: 0.55; }
.ffm-row.is-in-group { padding-left: 18px; }
.ffm-ghead { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; padding: 4px 10px; }
.ffm-gname { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border: 0; background: none; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; cursor: pointer; text-align: left; }
.ffm-gname svg { width: 16px; height: 16px; color: var(--ffm-muted); transform: rotate(180deg); transition: transform .15s; }
.ffm-ghead.is-folded .ffm-gname svg { transform: none; }
/* hide the sidebar (desktop) */
.ffm-fold { position: absolute; z-index: 610; top: 14px; left: 334px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--ffm-line); background: rgba(28, 17, 32, 0.92); color: #fff; cursor: pointer; }
.ffm-fold:hover { background: var(--ffm-raised); border-color: var(--ffm-line-strong); }
.ffm-fold svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .2s; }
.ffm.is-folded .ffm-panel { display: none; }
.ffm.is-folded .ffm-map { left: 0; }
.ffm.is-folded .ffm-fold { left: 14px; }
.ffm.is-folded .ffm-fold svg { transform: rotate(-90deg); }
.ffm.is-folded .ffm-coords { left: 50%; }
/* hover label */
.ffm .ffm-tip { padding: 5px 9px; border: 0; border-radius: 8px; background: rgba(16, 9, 18, 0.94); color: #fff; font: 700 12px/1.3 var(--ffm-font); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
.ffm .ffm-tip::before { display: none; }
/* what visitors see when they click a marker */
.ffm .ffm-label .leaflet-popup-content-wrapper { padding: 0; border-radius: 12px; background: rgba(16, 9, 18, 0.95); border: 1px solid var(--ffm-line-strong); }
.ffm .ffm-label .leaflet-popup-content { margin: 0; }
.ffm .ffm-label .leaflet-popup-tip { background: rgba(16, 9, 18, 0.95); }
.ffm-lbl { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; }
.ffm-lbl-text { min-width: 0; }
.ffm-lbl-text b { display: block; font-size: 13.5px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.ffm-lbl-text small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--ffm-muted); max-width: 170px; }
.ffm-hide { display: flex; align-items: center; gap: 5px; flex: none; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: #fff; color: #150c16; font-size: 12px; font-weight: 800; cursor: pointer; }
.ffm-hide:hover { background: var(--ffm-brand-soft); }
.ffm-hide svg { width: 14px; height: 14px; }
.ffm-row .ffm-sub { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 500; color: var(--ffm-faint); }
.ffm-empty { padding: 18px 10px; font-size: 12.5px; color: var(--ffm-faint); text-align: center; }
.ffm-foot { padding: 10px 18px 14px; border-top: 1px solid var(--ffm-line); font-size: 11px; color: var(--ffm-faint); display: flex; justify-content: space-between; gap: 8px; }

/* ---------- controls ---------- */
.ffm-controls { position: absolute; z-index: 600; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.ffm-btn {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--ffm-line);
  background: rgba(28, 17, 32, 0.92); color: var(--ffm-text); cursor: pointer; backdrop-filter: blur(10px); transition: background .15s, border-color .15s;
}
.ffm-btn:hover { background: var(--ffm-raised); border-color: var(--ffm-line-strong); }
.ffm-btn svg { width: 18px; height: 18px; }
.ffm.has-panel .ffm-coords { left: calc(50% + 160px); }
.ffm-coords {
  position: absolute; z-index: 590; left: 50%; bottom: 18px; transform: translateX(-50%); pointer-events: none;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px #000, 0 0 12px rgba(0, 0, 0, 0.8); white-space: nowrap;
}
.ffm-toggle { display: none; position: absolute; z-index: 610; left: 16px; bottom: 16px; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--ffm-line); background: rgba(28, 17, 32, 0.94); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }

/* ---------- markers ---------- */
.ffm-pin {
  position: relative; display: grid; place-items: center; width: var(--ffm-pin, 30px); height: var(--ffm-pin, 30px); border-radius: 50%;
  background: var(--ffm-surface); border: 2px solid var(--c, var(--ffm-brand)); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
  font-size: calc(var(--ffm-pin, 30px) * 0.5); line-height: 1; transition: transform .12s;
}
.ffm-pin img, .ffm .leaflet-marker-pane .ffm-pin img { width: 62% !important; height: 62% !important; max-width: none; object-fit: contain; } /* beats Leaflet's marker image rule */
/* picture icon without the round frame */
.ffm-pin.is-bare { background: none; border: 0; box-shadow: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7)); }
.ffm-pin.is-bare img, .ffm .leaflet-marker-pane .ffm-pin.is-bare img { width: 100% !important; height: 100% !important; }
.ffm-pin.is-bare.is-active { box-shadow: none; filter: drop-shadow(0 0 6px var(--ffm-brand)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7)); }
.ffm-pin:hover, .ffm-pin.is-active { transform: scale(1.18); z-index: 2; }
.ffm-pin.is-active { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ffm-brand) 35%, transparent), 0 4px 12px rgba(0, 0, 0, 0.55); }
.ffm-cluster {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--ffm-brand); color: #fff; font-size: 12.5px; font-weight: 800;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ffm-brand) 28%, transparent), 0 6px 16px rgba(0, 0, 0, 0.5); transition: transform .12s;
}
.ffm-cluster:hover { transform: scale(1.08); }
/* group = the category icon + a count badge */
.ffm-group { cursor: pointer; }
.ffm-count-badge {
  position: absolute; top: -7px; right: -9px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
  display: grid; place-items: center; background: var(--c, var(--ffm-brand)); color: #fff;
  font: 800 11px/1 var(--ffm-font); letter-spacing: 0; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  border: 2px solid var(--ffm-bg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.ffm-pin.is-bare .ffm-count-badge { top: -6px; right: -10px; }
.ffm .leaflet-marker-icon { background: none; border: 0; }

/* ---------- popup ---------- */
.ffm .leaflet-popup-content-wrapper { background: var(--ffm-raised); color: var(--ffm-text); border: 1px solid var(--ffm-line-strong); border-radius: 14px; box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.85); }
.ffm .leaflet-popup-tip { background: var(--ffm-raised); border: 1px solid var(--ffm-line-strong); }
.ffm .leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.45; }
.ffm .leaflet-container a.leaflet-popup-close-button { color: var(--ffm-faint); top: 6px; right: 6px; }
.ffm-pop-cat { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ffm-muted); }
.ffm-pop-cat i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ffm-pop-name { margin-top: 4px; font-size: 15px; font-weight: 800; color: #fff; word-break: break-word; }
.ffm-pop-note { margin-top: 4px; color: var(--ffm-muted); white-space: pre-wrap; }
.ffm-pop-xy { margin-top: 8px; font-size: 11.5px; color: var(--ffm-faint); font-variant-numeric: tabular-nums; user-select: all; }
.ffm-pop-actions { display: flex; gap: 6px; margin-top: 10px; }
.ffm-pop-actions button { flex: 1; height: 30px; border-radius: 9px; border: 1px solid var(--ffm-line-strong); background: var(--ffm-surface); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.ffm-pop-actions button:hover { background: var(--ffm-high); }
.ffm-pop-actions .is-danger { color: #fca5a5; }

/* ---------- phones: the panel becomes a sheet at the bottom ---------- */
@media (max-width: 720px) {
  .ffm.has-panel .ffm-map { left: 0; }
  .ffm-fold { display: none; }
  .ffm.has-panel .ffm-coords { left: 50%; }
  .ffm-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 60%; border-right: 0; border-top: 1px solid var(--ffm-line); border-radius: 18px 18px 0 0; box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.9); transform: translateY(calc(100% + 16px)); transition: transform .25s; }
  .ffm-head { border-radius: 18px 18px 0 0; }
  .ffm.is-open .ffm-panel { transform: none; }
  .ffm-toggle { display: block; }
  .ffm.is-open .ffm-toggle, .ffm.is-open .ffm-controls { display: none; }
  .ffm-panel::before { content: ''; display: block; width: 38px; height: 4px; margin: 8px auto 0; border-radius: 99px; background: var(--ffm-line-strong); }
  .ffm-controls { right: 8px; bottom: 8px; }
  .ffm-coords { bottom: 64px; }
}

/* No hairlines between map tiles: where two tiles meet, the browser draws both edges half see-through, so a thin
   line of the background showed. plus-lighter adds those edges up to fully solid. Every zoom level is its own group,
   so tiles only add up with their neighbours, never with the picture below or another zoom level. */
.ffm .leaflet-tile-container { isolation: isolate; }
.ffm .leaflet-tile { mix-blend-mode: plus-lighter; }

/* "Loading map…" over a big (packed) map until its first tiles arrive */
.ffm-loading { position: absolute; z-index: 600; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(16, 9, 18, .88); border: 1px solid var(--ffm-line-strong); color: #fff; font-size: 13px; font-weight: 600; pointer-events: none; }
.ffm-loading-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: var(--ffm-brand); animation: ffm-spin .8s linear infinite; }
@keyframes ffm-spin { to { transform: rotate(360deg); } }