/* =============================================================================
   Geografisk – Full-page Denmark map page
   Tabler / Bootstrap 5 integration
   Pin colour scheme:
     Male   (sex=1) : #2c7be5  (blue)
     Female (sex=2) : #e54b4b  (red / pink)
     Trans  (sex=3) : #9b59b6  (purple)
     Par    (sex=4) : #e67e22  (orange)
     Other  (sex=5) : #636e72  (grey)
   ============================================================================= */

/* ── Custom properties ── */
:root {
  --geo-male: #2c7be5;
  --geo-female: #e54b4b;
  --geo-trans: #9b59b6;
  --geo-par: #e67e22;
  --geo-other: #636e72;

  --geo-male-light: rgba(44, 123, 229, 0.12);
  --geo-female-light: rgba(229, 75, 75, 0.12);
  --geo-trans-light: rgba(155, 89, 182, 0.12);
  --geo-par-light: rgba(230, 126, 34, 0.12);
  --geo-other-light: rgba(99, 110, 114, 0.12);

  --geo-topbar-h: 64px;
  --geo-radius: 10px;
  --geo-radius-sm: 6px;
  --geo-transition: all 0.18s ease;
  --geo-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --geo-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
  --geo-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.18);

  --geo-surface: var(--tblr-bg-surface, #ffffff);
  --geo-border: var(--tblr-border-color, #e6e7e9);
  --geo-text: var(--tblr-body-color, #1f2937);
  --geo-muted: var(--tblr-secondary, #667085);
  --geo-chip-hover: var(--tblr-bg-surface-secondary, #f4f6f8);
}

/* ── Dark / TrueBlue theme overrides ── */
.dark,
.trueblue,
html.dark,
html.trueblue,
body.theme-dark,
body.theme-trueblue,
.theme-dark,
.theme-trueblue,
[data-theme="dark"],
[data-theme="trueblue"] {
  --geo-surface: var(--panel-bg, #1e293b);
  --geo-border: var(--border-color, rgba(148, 163, 184, 0.2));
  --geo-text: var(--default-text-color, #e2e8f0);
  --geo-muted: var(--muted-text-color, #94a3b8);
  --geo-chip-hover: rgba(255, 255, 255, 0.06);
  --geo-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.32);
  --geo-shadow: 0 4px 16px rgba(0, 0, 0, 0.42);
  --geo-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.54);
}

/* ============================================================
   Embed scroll lock — geografisk is a full-viewport map; it must
   re-lock body/html overflow that the shared embed style leaves open
   so that the map pans instead of the page scrolling.
   Only applies when loaded with ?embed=1 (IS_EMBED = true in base).
   ============================================================ */
html:has(.geografisk-main),
body:has(.geografisk-main) {
  overflow: hidden !important;
  height: 100% !important;
}
main:has(.geografisk-main) {
  overflow: hidden !important;
  height: 100% !important;
}

/* ============================================================
   Layout: full-page section
   Works in both modes:
     - Standalone page : main fills viewport minus navbar via flex
     - Embed (iframe)  : html/body/main are 100% from embed style;
                         everything below uses flex:1 to fill up
   ============================================================ */

/* Tabler's <main> wrapper — make it a flex column so children can stretch */
main:has(.geografisk-main) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.geografisk-main {
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* flex:1 fills whatever height the parent gives us —
     works for both standalone (parent = <main> minus navbar) and embed (parent = 100vh) */
  flex: 1 1 auto;
  min-height: 0;
}

.geografisk-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* ============================================================
   Map
   ============================================================ */
#geografisk-map {
  flex: 1 1 auto;
  width: 100%;
  min-height: 200px; /* never collapse to 0 — Leaflet needs visible size */
  z-index: 1;
  background: #aad3df; /* OSM ocean colour — matches mødekort */
}

/* Match mødekort — no background-image interference */
#geografisk-map .leaflet-container,
#geografisk-map .leaflet-pane,
#geografisk-map .leaflet-map-pane {
  background-image: none !important;
}

/* Leaflet container bg matches OSM ocean — never dark */
#geografisk-map .leaflet-container {
  background: #aad3df !important;
}

/* ============================================================
   Top bar
   ============================================================ */
.geografisk-topbar {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 14px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  min-height: var(--geo-topbar-h);
  height: auto;
  background: var(--geo-surface);
  border-bottom: 1px solid var(--geo-border);
  z-index: 10;
  flex-shrink: 0;
  box-shadow: var(--geo-shadow-sm);
}

/* Left section – icon + title */
.geografisk-topbar-left {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 100%;
  white-space: nowrap;
}

.geografisk-topbar-left .ti-map-2 {
  font-size: 1.25rem;
  color: var(--tblr-primary, #1877f2);
}

.geografisk-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--geo-text);
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.2;
}

.geografisk-subtitle {
  font-size: 0.75rem;
  color: var(--geo-muted);
  font-weight: 400;
}

/* Center section – gender filter chips (single row) */
.geografisk-topbar-center {
  order: 2;
  flex: 1 1 420px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  overflow: visible;
}

/* Right section – additional filters */
.geografisk-topbar-right {
  order: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 420px;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 8px;
}

/* ============================================================
   Gender filter chips
   ============================================================ */
.geo-filter-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
  padding-bottom: 1px; /* stop scrollbar from clipping chip borders */
}
.geo-filter-group::-webkit-scrollbar {
  display: none;
}

.geo-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1.5px solid var(--geo-border);
  background: transparent;
  color: var(--geo-muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--geo-transition);
  line-height: 1.4;
  user-select: none;
}

.geo-filter-chip:hover {
  background: var(--geo-chip-hover);
  color: var(--geo-text);
  border-color: var(--geo-text);
}

/* "Alle" chip active state */
.geo-filter-chip.active {
  background: var(--tblr-primary, #1877f2);
  border-color: var(--tblr-primary, #1877f2);
  color: #ffffff;
}

.geo-filter-chip.active:hover {
  background: var(--tblr-primary-darken, #1462d4);
  border-color: var(--tblr-primary-darken, #1462d4);
}

/* Male chip */
.geo-chip-male.active {
  background: var(--geo-male);
  border-color: var(--geo-male);
  color: #ffffff;
}

.geo-chip-male:hover:not(.active) {
  background: var(--geo-male-light);
  border-color: var(--geo-male);
  color: var(--geo-male);
}

/* Female chip */
.geo-chip-female.active {
  background: var(--geo-female);
  border-color: var(--geo-female);
  color: #ffffff;
}

.geo-chip-female:hover:not(.active) {
  background: var(--geo-female-light);
  border-color: var(--geo-female);
  color: var(--geo-female);
}

/* Trans chip */
.geo-chip-trans.active {
  background: var(--geo-trans);
  border-color: var(--geo-trans);
  color: #ffffff;
}

.geo-chip-trans:hover:not(.active) {
  background: var(--geo-trans-light);
  border-color: var(--geo-trans);
  color: var(--geo-trans);
}

/* Par chip */
.geo-chip-par.active {
  background: var(--geo-par);
  border-color: var(--geo-par);
  color: #ffffff;
}

.geo-chip-par:hover:not(.active) {
  background: var(--geo-par-light);
  border-color: var(--geo-par);
  color: var(--geo-par);
}

/* Other chip */
.geo-chip-other.active {
  background: var(--geo-other);
  border-color: var(--geo-other);
  color: #ffffff;
}

.geo-chip-other:hover:not(.active) {
  background: var(--geo-other-light);
  border-color: var(--geo-other);
  color: var(--geo-other);
}

/* ── Colour dots inside chips ── */
.geo-pin-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.geo-pin-male {
  background: var(--geo-male);
}
.geo-pin-female {
  background: var(--geo-female);
}
.geo-pin-trans {
  background: var(--geo-trans);
}
.geo-pin-par {
  background: var(--geo-par);
}
.geo-pin-other {
  background: var(--geo-other);
}

/* ============================================================
   Search input
   ============================================================ */
.geo-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.geo-search-icon {
  position: absolute;
  left: 9px;
  font-size: 0.85rem;
  color: var(--geo-muted);
  pointer-events: none;
  z-index: 1;
}

.geo-search-input {
  padding: 5px 10px 5px 28px;
  border: 1.5px solid var(--geo-border);
  border-radius: 20px;
  background: var(--geo-surface);
  color: var(--geo-text);
  font-size: 0.8rem;
  width: 160px;
  transition: var(--geo-transition);
  outline: none;
}

.geo-search-input::placeholder {
  color: var(--geo-muted);
}

.geo-search-input:focus {
  border-color: var(--tblr-primary, #1877f2);
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.14);
  width: 200px;
}

/* ============================================================
   Live badge
   ============================================================ */
.geo-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(34, 160, 107, 0.1);
  border: 1px solid rgba(34, 160, 107, 0.25);
  color: #1a9063;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.theme-dark .geo-live-badge,
.theme-trueblue .geo-live-badge,
[data-theme="dark"] .geo-live-badge,
[data-theme="trueblue"] .geo-live-badge {
  background: rgba(34, 160, 107, 0.18);
  border-color: rgba(34, 160, 107, 0.35);
  color: #4ade80;
}

/* Pulsing green dot */
.geo-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22a06b;
  animation: geo-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes geo-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 160, 107, 0.55);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.15);
    box-shadow: 0 0 0 5px rgba(34, 160, 107, 0);
  }
}

/* ============================================================
   Leaflet custom marker overrides
   ============================================================ */

/* Colour-coded div-icon pins */
.geo-div-icon {
  background: transparent;
  border: none;
}

/* ============================================================
   Pin markers — CSS teardrop (no inline SVG)
   HTML: .geo-marker > .geo-pin-body > img.geo-pin-avatar
                      > .geo-pin-tip
   --pin-color is set inline per marker
   ============================================================ */
.geo-marker {
  position: relative; /* needed so .geo-pin-ripple positions against the pin */
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.15s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.geo-marker:hover {
  transform: translateY(-3px) scale(1.08);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

/* Circular body containing the avatar */
.geo-pin-body {
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--pin-color, #636e72);
  border: 2px solid rgba(255, 255, 255, 0.85);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Avatar image — counter-rotate to stay upright */
.geo-pin-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  transform: rotate(45deg);
  display: block;
}

/* Tiny triangle tip below the body */
.geo-pin-tip {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--pin-color, #636e72);
  margin-top: -1px;
}

/* ============================================================
   Status dot on pin — bottom-right of .geo-pin-body
   ============================================================ */
.geo-pin-status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  /* counter-rotate so it stays upright (pin-body is rotated -45deg) */
  transform: rotate(45deg);
  z-index: 2;
}
.geo-pin-status--online {
  background: #22c55e;
}
.geo-pin-status--away {
  background: #f59e0b;
}
.geo-pin-status--offline {
  background: #94a3b8;
}

/* Dim offline pins slightly so online ones stand out */
.geo-marker--offline .geo-pin-body {
  opacity: 0.65;
}
.geo-marker--offline .geo-pin-tip {
  opacity: 0.65;
}

/* Status filter chips removed — map shows online+away only, no UI toggle */

/* ============================================================
   Age range inputs
   ============================================================ */
.geo-age-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
}

/* ============================================================
   Radius filter + online toggle
   ============================================================ */
.geo-radius-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
}
.geo-online-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: var(--app-text, #e2e8f0);
  font-size: 0.8rem;
  user-select: none;
  cursor: pointer;
}
.geo-online-toggle input {
  cursor: pointer;
}
@media (max-width: 768px) {
  .geo-radius-wrap,
  .geo-online-toggle {
    display: none;
  }
}
.geo-age-label {
  font-size: 0.72rem;
  color: var(--geo-muted);
  white-space: nowrap;
}
.geo-age-input {
  width: 50px;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid var(--geo-border);
  background: var(--geo-chip-bg);
  color: var(--geo-text);
  font-size: 0.78rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.geo-age-input::-webkit-outer-spin-button,
.geo-age-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
}
.geo-age-input:focus {
  outline: none;
  border-color: var(--geo-accent);
}
.geo-age-sep {
  color: var(--geo-muted);
  font-size: 0.8rem;
}

/* ============================================================
   New-user live drop-in animation
   Layer 1 : .geo-pin-new              — drop + bounce entrance
   Layer 2 : .geo-pin-new .geo-pin-body — glow pulse on the pin head
   Layer 3 : .geo-pin-ripple           — expanding sonar ring (sibling div)
   JS removes .geo-pin-new after the animation ends so cluster
   re-renders don't replay it.
   ============================================================ */

/* Layer 1: the whole pin drops in from above and bounces */
.geo-pin-new {
  animation: geo-pin-drop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transform-origin: bottom center;
}
@keyframes geo-pin-drop {
  0% {
    opacity: 0;
    transform: translateY(-28px) scale(0.6);
  }
  60% {
    opacity: 1;
    transform: translateY(4px) scale(1.08);
  }
  80% {
    transform: translateY(-3px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Layer 2: colour glow pulses on the pin body after it lands */
.geo-pin-new .geo-pin-body {
  animation:
    geo-pin-drop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    geo-pin-glow 1.4s ease-in-out 0.6s 3;
}
@keyframes geo-pin-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--pin-color, #2c7be5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
}

/* Layer 3: sonar ripple ring — absolutely positioned sibling */
.geo-pin-ripple {
  position: absolute;
  /* centre under the pin body (32px body, iconAnchor bottom-centre) */
  top: -16px;
  left: -16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--pin-color, #2c7be5);
  pointer-events: none;
  animation: geo-ripple 1.3s ease-out 0.3s 3;
  opacity: 0;
}
@keyframes geo-ripple {
  0% {
    opacity: 0.85;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(3.2);
  }
}

/* Cluster circles */
.geo-cluster {
  background: rgba(30, 41, 59, 0.88);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  backdrop-filter: blur(4px);
}

/* Legacy class kept to avoid breaking old references */
.geo-pin-marker {
  width: 28px;
  height: 36px;
  position: relative;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.32));
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}

.geo-pin-marker:hover {
  transform: scale(1.15) translateY(-2px);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.44));
}

/* SVG pin head */
.geo-pin-marker-head {
  width: 28px;
  height: 28px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  position: absolute;
  top: 0;
  left: 0;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pin needle (triangle) */
.geo-pin-marker-head::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 0;
  height: 0;
}

/* Inner avatar or initial */
.geo-pin-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #ffffff;
}

.geo-pin-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gender colour variants */
.geo-pin-color-1 .geo-pin-marker-head {
  background: var(--geo-male);
}
.geo-pin-color-2 .geo-pin-marker-head {
  background: var(--geo-female);
}
.geo-pin-color-3 .geo-pin-marker-head {
  background: var(--geo-trans);
}
.geo-pin-color-4 .geo-pin-marker-head {
  background: var(--geo-par);
}
.geo-pin-color-5 .geo-pin-marker-head {
  background: var(--geo-other);
}
.geo-pin-color-0 .geo-pin-marker-head {
  background: var(--geo-other);
}

/* New-pin pulse animation (for recently registered users) */
.geo-pin-new .geo-pin-marker-head {
  animation: geo-pin-new-pulse 2.2s ease-in-out 3;
}

@keyframes geo-pin-new-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
}

/* ── Leaflet popup overrides ── */
.leaflet-popup-content-wrapper {
  border-radius: var(--geo-radius) !important;
  box-shadow: var(--geo-shadow) !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--geo-border);
  background: var(--geo-surface) !important;
}

.leaflet-popup-content {
  margin: 0 !important;
  color: var(--geo-text) !important;
}

.leaflet-popup-tip {
  background: var(--geo-surface) !important;
}

.leaflet-popup-close-button {
  color: var(--geo-muted) !important;
  font-size: 18px !important;
  top: 6px !important;
  right: 8px !important;
  padding: 0 !important;
}

.leaflet-popup-close-button:hover {
  color: var(--geo-text) !important;
}

/* Compact popup card */
.geo-popup-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-width: 180px;
  max-width: 240px;
}

.geo-popup-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--geo-border);
}

.geo-popup-info {
  flex: 1 1 auto;
  min-width: 0;
}

.geo-popup-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--geo-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.geo-popup-meta {
  font-size: 0.73rem;
  color: var(--geo-muted);
  margin-top: 1px;
}

.geo-popup-city {
  font-size: 0.73rem;
  color: var(--geo-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.geo-popup-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--tblr-primary, #1877f2);
  color: #ffffff;
  font-size: 0.73rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: var(--geo-transition);
  text-decoration: none;
}

.geo-popup-open-btn:hover {
  background: var(--tblr-primary-darken, #1462d4);
  color: #ffffff;
  text-decoration: none;
}

/* ============================================================
   MarkerCluster custom styles
   ============================================================ */
.marker-cluster {
  transition: transform 0.15s ease;
}

.marker-cluster:hover {
  transform: scale(1.1);
}

.marker-cluster-small,
.marker-cluster-medium {
  background-color: rgba(44, 123, 229, 0.15) !important;
}

.marker-cluster-small div,
.marker-cluster-medium div {
  background-color: rgba(44, 123, 229, 0.75) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
}

.marker-cluster-large {
  background-color: rgba(229, 75, 75, 0.15) !important;
}

.marker-cluster-large div {
  background-color: rgba(229, 75, 75, 0.8) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
}

/* ============================================================
   Live user feed  —  floating transparent cards, top-right of map
   No container box — cards float freely over the map, stack top-down,
   slide in from the right, auto-fade out after timeout.
   ============================================================ */

/* Outer wrapper — just a stacking column, fully transparent */
.geo-feed {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 600;
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none; /* cards handle their own pointer-events */
}

/* Header and toggle hidden — no panel chrome */
.geo-feed-header {
  display: none;
}
.geo-feed-toggle {
  display: none;
}
.geo-feed-dot {
  display: none;
}
.geo-feed-title {
  display: none;
}

/* List — just a transparent flex column, no background/border */
.geo-feed-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  overflow: visible;
  max-height: none;
}

/* ── Individual card — the only visible element ── */
.geo-feed-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px 8px 8px;
  border-radius: 12px;
  /* frosted glass — very subtle, mostly transparent */
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
  cursor: default;
  /* start hidden — JS adds .geo-feed-row--in to trigger entrance */
  opacity: 0;
  transform: translateX(28px) scale(0.96);
  transition:
    background 0.15s,
    box-shadow 0.15s;
}

/* Entrance — slide in from right + scale up */
.geo-feed-row--in {
  animation: geo-feed-card-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes geo-feed-card-in {
  from {
    opacity: 0;
    transform: translateX(28px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Idle — fully visible after entrance, allow hover etc. */
.geo-feed-row--visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Fade out — shrinks height to 0 smoothly */
.geo-feed-row--out {
  animation: geo-feed-card-out 0.5s ease forwards;
  pointer-events: none;
}
@keyframes geo-feed-card-out {
  0% {
    opacity: 1;
    max-height: 80px;
    margin-bottom: 0;
    transform: scale(1);
  }
  40% {
    opacity: 0;
    transform: scale(0.94);
  }
  100% {
    opacity: 0;
    max-height: 0;
    margin-bottom: -6px;
    transform: scale(0.9);
  }
}

.geo-feed-row:hover {
  background: rgba(0, 0, 0, 0.42);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
}

/* ── Avatar ── */
.geo-feed-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  background-color: var(--feed-color, #636e72);
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 0 0 2px var(--feed-color, #636e72),
    0 0 0 3px rgba(255, 255, 255, 0.08);
}
.geo-feed-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ── Text ── */
.geo-feed-info {
  flex: 1;
  min-width: 0;
}
.geo-feed-name {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--feed-color, #fff);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.geo-feed-meta {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ── Action buttons — always visible (no hover gate on transparent cards) ── */
.geo-feed-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.geo-feed-row:hover .geo-feed-actions {
  opacity: 1;
}

.geo-feed-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  transition:
    filter 0.12s,
    transform 0.1s;
  flex-shrink: 0;
}
.geo-feed-btn:active {
  transform: scale(0.9);
}

.geo-feed-btn-dm {
  background: var(--feed-color, #2c7be5);
  color: #fff;
}
.geo-feed-btn-dm:hover {
  filter: brightness(1.25);
}

.geo-feed-btn-prof {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.geo-feed-btn-prof:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================================
   User pin modal
   ============================================================ */
.geo-modal-dialog {
  max-width: 320px;
}

.geo-modal-content {
  border-radius: var(--geo-radius) !important;
  border: none !important;
  overflow: hidden;
  box-shadow: var(--geo-shadow-lg) !important;
  background: var(--geo-surface) !important;
}

.geo-modal-header-cover {
  height: 70px;
  background: linear-gradient(
    135deg,
    var(--tblr-primary, #1877f2) 0%,
    var(--tblr-primary-darken, #1462d4) 100%
  );
  position: relative;
  flex-shrink: 0;
}

/* Gender-specific cover gradient */
.geo-modal-header-cover[data-gender="1"] {
  background: linear-gradient(135deg, var(--geo-male) 0%, #1a5cbf 100%);
}
.geo-modal-header-cover[data-gender="2"] {
  background: linear-gradient(135deg, var(--geo-female) 0%, #c0392b 100%);
}
.geo-modal-header-cover[data-gender="3"] {
  background: linear-gradient(135deg, var(--geo-trans) 0%, #7d3c98 100%);
}
.geo-modal-header-cover[data-gender="4"] {
  background: linear-gradient(135deg, var(--geo-par) 0%, #ca6f1e 100%);
}
.geo-modal-header-cover[data-gender="5"],
.geo-modal-header-cover[data-gender="0"] {
  background: linear-gradient(135deg, var(--geo-other) 0%, #4a5057 100%);
}

.geo-modal-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 10;
  filter: invert(1) grayscale(1) brightness(2);
  opacity: 0.85;
}

.geo-modal-close:hover {
  opacity: 1;
}

.geo-modal-body {
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.geo-modal-avatar-wrap {
  position: relative;
  margin-top: -32px;
  margin-bottom: 8px;
}

.geo-modal-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--geo-surface);
  box-shadow: var(--geo-shadow-sm);
}

.geo-modal-gender-badge {
  position: absolute;
  bottom: 0;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--geo-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
}

.geo-modal-gender-badge[data-gender="1"] {
  background: var(--geo-male);
  color: #fff;
}
.geo-modal-gender-badge[data-gender="2"] {
  background: var(--geo-female);
  color: #fff;
}
.geo-modal-gender-badge[data-gender="3"] {
  background: var(--geo-trans);
  color: #fff;
}
.geo-modal-gender-badge[data-gender="4"] {
  background: var(--geo-par);
  color: #fff;
}
.geo-modal-gender-badge[data-gender="5"],
.geo-modal-gender-badge[data-gender="0"] {
  background: var(--geo-other);
  color: #fff;
}

.geo-modal-username {
  font-weight: 700;
  font-size: 1rem;
  color: var(--geo-text);
  margin-bottom: 2px;
}

.geo-modal-meta {
  font-size: 0.78rem;
  color: var(--geo-muted);
  margin-bottom: 4px;
}

.geo-modal-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 6px;
}
.geo-modal-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.geo-modal-status--online {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
}
.geo-modal-status--online::before {
  background: #22c55e;
}
.geo-modal-status--away {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}
.geo-modal-status--away::before {
  background: #f59e0b;
}
.geo-modal-status--offline {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.12);
}
.geo-modal-status--offline::before {
  background: #94a3b8;
}

.geo-modal-city {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--geo-muted);
  margin-bottom: 8px;
}

.geo-modal-city .ti-map-pin {
  color: var(--tblr-primary, #1877f2);
}

.geo-modal-about {
  font-size: 0.8rem;
  color: var(--geo-muted);
  line-height: 1.5;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 12px;
  width: 100%;
  text-align: left;
}

.geo-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.geo-modal-profile-btn {
  border-radius: 20px;
  padding: 5px 16px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ============================================================
   Leaflet attribution & controls
   ============================================================ */
.leaflet-control-zoom a {
  border-radius: var(--geo-radius-sm) !important;
  color: var(--geo-text) !important;
  background: var(--geo-surface) !important;
  border-color: var(--geo-border) !important;
  transition: var(--geo-transition) !important;
}

.leaflet-control-zoom a:hover {
  background: var(--geo-chip-hover) !important;
}

.leaflet-control-zoom {
  border-radius: var(--geo-radius-sm) !important;
  box-shadow: var(--geo-shadow-sm) !important;
  border: 1px solid var(--geo-border) !important;
  overflow: hidden;
}

.leaflet-bar {
  box-shadow: var(--geo-shadow-sm) !important;
  border-radius: var(--geo-radius-sm) !important;
  border: 1px solid var(--geo-border) !important;
}

.leaflet-bar a {
  color: var(--geo-text) !important;
  background: var(--geo-surface) !important;
  border-bottom-color: var(--geo-border) !important;
}

.leaflet-bar a:hover {
  background: var(--geo-chip-hover) !important;
}

/* Attribution */
.leaflet-control-attribution {
  background: rgba(var(--tblr-bg-surface-rgb, 255, 255, 255), 0.82) !important;
  border-radius: var(--geo-radius-sm) 0 0 0 !important;
  font-size: 10px !important;
  padding: 2px 6px !important;
  backdrop-filter: blur(4px);
}

.theme-dark .leaflet-control-attribution,
.theme-trueblue .leaflet-control-attribution,
[data-theme="dark"] .leaflet-control-attribution,
[data-theme="trueblue"] .leaflet-control-attribution {
  background: rgba(15, 23, 42, 0.78) !important;
  color: #94a3b8 !important;
}

/* ============================================================
   Dark-mode Leaflet tile overlay tint
   ============================================================ */
.theme-dark .leaflet-tile-pane,
.theme-trueblue .leaflet-tile-pane,
[data-theme="dark"] .leaflet-tile-pane,
[data-theme="trueblue"] .leaflet-tile-pane {
  filter: brightness(0.7) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3)
    brightness(0.7);
}

/* ============================================================
   Responsive – mobile (<= 768 px)
   ============================================================ */
@media (max-width: 768px) {
  .geografisk-topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 12px;
    gap: 8px;
  }

  .geografisk-topbar-left {
    flex: 1 1 auto;
  }

  .geografisk-subtitle {
    display: none;
  }

  .geografisk-topbar-center {
    order: 3;
    width: 100%;
    align-items: flex-start;
  }

  .geografisk-topbar-right {
    flex-wrap: wrap;
    gap: 6px;
  }

  .geo-age-wrap {
    display: none; /* hide age on mobile — too cramped */
  }

  .geo-search-input {
    width: 110px;
  }

  .geo-search-input:focus {
    width: 140px;
  }

  /* no explicit height needed — flex:1 fills the parent */

  .geo-feed {
    right: 6px;
    width: 200px;
  }
}

@media (max-width: 480px) {
  .geo-filter-group {
    gap: 4px;
  }

  .geo-filter-chip {
    padding: 3px 8px;
    font-size: 0.72rem;
  }

  .geo-live-badge {
    padding: 3px 7px;
    font-size: 0.7rem;
  }

  .geo-search-input {
    width: 90px;
  }

  .geo-search-input:focus {
    width: 120px;
  }
}

/* no-header: no explicit height needed — flex:1 fills parent in all modes */