/* Fiskekart — premium redesign. Refined utilitarian; the map is the product. */

:root {
  /* Core */
  --fk-natt: #1B3A4B;
  --fk-fjord: #2D5F7A;
  --fk-vatn: #4A90D9;
  --fk-gull: #D97706;
  --fk-gull-light: #FEF3C7;
  --fk-gull-text: #92400E;
  --fk-skog: #22C55E;
  --fk-snø: #FAFAF7;
  --fk-snø-dark: #F5F0E8;

  /* Text */
  --fk-text-primary: #1C1917;
  --fk-text-secondary: #78716C;
  --fk-text-muted: #A8A29E;
  --fk-text-on-dark: #F1F5F9;
  --fk-text-on-dark-muted: rgba(255,255,255,0.5);

  /* Borders */
  --fk-border: #E5E2DB;
  --fk-border-dark: rgba(255,255,255,0.06);

  /* Routes / elevation */
  --fk-route-blue: #4285F4;
  --fk-route-blue-light: #93C5FD;
  --fk-elevation-line: #60A5FA;
  --fk-elevation-bg: #0C1C28;
  --fk-ascent: #4ADE80;
  --fk-descent: #F87171;

  /* Shape */
  --fk-radius: 12px;
  --fk-radius-sm: 8px;
  --fk-radius-lg: 14px;

  --fk-font: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fk-shadow: 0 2px 12px rgba(27,58,75,0.10), 0 1px 3px rgba(27,58,75,0.06);
  --fk-shadow-lg: 0 8px 30px rgba(27,58,75,0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--fk-font);
  color: var(--fk-text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
button { font-family: inherit; }
a { color: var(--fk-vatn); text-decoration: none; }

#map { position: absolute; inset: 0; }

.fk-ic { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; }

/* ── Floating search + filters (top-left) — light, separate elements ──────── */
#search-container {
  position: absolute; top: 20px; left: 20px; z-index: 20;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  width: 300px; max-width: calc(100vw - 40px);
}

#search-box {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: #fff; border: 1.5px solid rgba(27,58,75,0.25);
  border-radius: 12px; padding: 10px 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
#search-box .search-icon { width: 17px; height: 17px; color: #1B3A4B; flex: none; }
#search-input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font-size: 14px; font-family: inherit; color: #1C1917;
}
#search-input::placeholder { color: #A8A29E; font-size: 14px; }

/* Search results — light floating panel */
#search-results { width: 100%; background: rgba(250,250,247,0.98);
  border: 0.5px solid rgba(0,0,0,0.08); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1); overflow: hidden; }
#search-results:empty { display: none; }
.search-result {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 12px; border: 0; background: none; cursor: pointer;
  text-align: left; border-bottom: 0.5px solid rgba(0,0,0,0.06);
}
.search-result:last-child { border-bottom: 0; }
.search-result:hover, .search-result.focused { background: rgba(0,0,0,0.04); }
.result-name { font-size: 14px; font-weight: 500; color: #1C1917; }
.result-meta { font-size: 11.5px; color: #78716C; margin-top: 1px; }
.result-badges { display: flex; gap: 5px; flex: none; }
.result-badge { font-size: 10px; padding: 2px 6px; border-radius: 5px; font-weight: 600; }
.result-badge.species { background: #EAF2FB; color: var(--fk-vatn); }
.result-badge.size { background: var(--fk-gull-light); }
.search-empty { padding: 12px; font-size: 13px; color: #A8A29E; }

/* Filter pills row (matches search width) + toggle, stacked with 6px gaps */
#filter-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
.filter-pills { display: flex; gap: 6px; width: 100%; }
.species-filter { position: relative; flex: 1; min-width: 0; }
.species-filter-btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: #fff; border: 1.5px solid rgba(27,58,75,0.25); border-radius: 8px;
  padding: 7px 12px; font-size: 12px; font-weight: 500; color: #1B3A4B;
  cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,0.1); transition: background 150ms, border-color 150ms;
}
.species-filter-btn > span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.species-filter-btn:hover { background: #FAFAF7; }
.species-filter-btn .fk-ic { width: 14px; height: 14px; color: #1B3A4B; flex: none; }
.species-filter-btn.has-selection { border-color: rgba(27,58,75,0.5); }
.species-filter-chevron { width: 11px; height: 11px; color: #A8A29E; margin-left: auto; flex: none; }

/* "Kun vann med data" — pill containing a toggle switch */
#quick-only-data {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: #fff; border: 1.5px solid rgba(27,58,75,0.25); border-radius: 8px;
  padding: 7px 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); cursor: pointer; transition: background 150ms;
}
#quick-only-data:hover { background: #FAFAF7; }
.data-toggle-track {
  position: relative; width: 32px; height: 18px; border-radius: 9px; flex: none;
  background: rgba(0,0,0,0.12); transition: background 160ms;
}
.data-toggle-knob {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: transform 160ms;
}
#quick-only-data.active .data-toggle-track { background: #22C55E; }
#quick-only-data.active .data-toggle-knob { transform: translateX(14px); }
.data-toggle-label { font-size: 12px; color: #57534E; }

/* Filter dropdown menus — light */
.species-filter-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 184px; max-height: 60vh; overflow-y: auto;
  background: rgba(250,250,247,0.98); border: 0.5px solid rgba(0,0,0,0.08); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1); padding: 6px; z-index: 30;
}
#tier-filter .species-filter-menu { left: auto; right: 0; }
.species-filter-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 7px;
  font-size: 13px; cursor: pointer; color: #1C1917;
}
.species-filter-item:hover { background: rgba(0,0,0,0.04); }
.species-filter-item input { accent-color: var(--fk-fjord); width: 15px; height: 15px; }
.species-filter-divider { height: 0.5px; background: rgba(0,0,0,0.08); margin: 5px 4px; }
.tier-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tier-dot-gray { background: #78716C; } .tier-dot-blue { background: #2563EB; }
.tier-dot-green { background: #16A34A; } .tier-dot-gold { background: var(--fk-gull); }
.tier-filter-shortcut {
  display: block; width: 100%; text-align: left; background: rgba(45,95,122,0.1); color: var(--fk-fjord);
  border: 0.5px solid rgba(45,95,122,0.2); border-radius: 7px; padding: 8px 12px; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.tier-filter-shortcut:hover { background: rgba(45,95,122,0.18); }

/* ── Hover tooltip (dark) ─────────────────────────────────────────────────── */
#map-tooltip {
  position: fixed; z-index: 40; pointer-events: none; opacity: 0; transform: translateY(4px);
  background: var(--fk-natt); color: var(--fk-text-on-dark); border-radius: 10px;
  padding: 9px 12px; max-width: 230px; box-shadow: var(--fk-shadow-lg);
  transition: opacity 120ms ease, transform 120ms ease;
}
#map-tooltip.visible { opacity: 1; transform: translateY(0); }
#map-tooltip::after {
  content: ''; position: absolute; left: 18px; bottom: -6px; width: 12px; height: 12px;
  background: var(--fk-natt); transform: rotate(45deg); border-radius: 2px;
}
.tooltip-name { font-size: 14px; font-weight: 500; }
.tooltip-meta { font-size: 12px; color: var(--fk-text-on-dark-muted); margin-top: 2px; }
.tooltip-size { font-size: 12px; color: #FCD34D; margin-top: 4px; font-weight: 500; }

/* ── Trail click panel ────────────────────────────────────────────────────── */
#trail-panel {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(8px);
  z-index: 18; background: #fff; border: 0.5px solid var(--fk-border); border-radius: var(--fk-radius);
  box-shadow: var(--fk-shadow-lg); padding: 14px 18px; min-width: 220px; max-width: 320px;
  opacity: 0; pointer-events: none; transition: opacity 160ms, transform 160ms;
}
#trail-panel.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.trail-panel-name { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.trail-panel-type { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--fk-text-muted); }
.trail-panel-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; color: var(--fk-text-secondary); }
.trail-panel-close { position: absolute; top: 8px; right: 8px; background: none; border: 0; cursor: pointer;
  color: var(--fk-text-muted); font-size: 15px; line-height: 1; padding: 4px; }

/* ── Map watermark + basemap toggle (floating over the map) ───────────────── */
#map-wordmark {
  position: absolute; bottom: 40px; left: 10px; z-index: 18;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--fk-natt); opacity: 0.4;
  background: rgba(255,255,255,0.7); padding: 4px 10px; border-radius: 6px; letter-spacing: -0.2px;
  text-decoration: none; cursor: pointer; transition: opacity 150ms;
}
#map-wordmark:hover { opacity: 0.8; }
#map-wordmark .wordmark-ic { width: 14px; height: 14px; flex: none; }
#layer-toggle {
  position: absolute; bottom: 44px; right: 14px; z-index: 18; display: inline-flex;
  background: #fff; border: 0.5px solid var(--fk-border); border-radius: 8px;
  box-shadow: var(--fk-shadow); overflow: hidden;
}
.toggle-btn { background: none; border: 0; padding: 7px 12px; font-size: 12px; font-weight: 500;
  color: var(--fk-text-secondary); cursor: pointer; font-family: inherit; transition: background 150ms, color 150ms; }
.toggle-btn:hover { color: var(--fk-text-primary); }
.toggle-btn.active { background: var(--fk-natt); color: #fff; }

/* ── Sidebar shell ────────────────────────────────────────────────────────── */
#sidebar {
  position: absolute; top: 0; right: 0; height: 100%; width: 460px; max-width: 100vw;
  z-index: 50; background: var(--fk-snø); box-shadow: none;
  transform: translateX(100%); transition: transform 250ms ease-in, box-shadow 250ms ease-in;
  display: flex; flex-direction: column;
}
#sidebar.open { transform: translateX(0); box-shadow: -8px 0 24px rgba(0,0,0,0.08);
  transition: transform 300ms ease-out, box-shadow 300ms ease-out; }
#sidebar-inner { height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
#sidebar-body { display: block; }

/* Skeleton loader */
#sidebar-loading { padding: 90px 22px 22px; }
.sk-line { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #ECE8E0 25%, #F5F0E8 50%, #ECE8E0 75%);
  background-size: 200% 100%; animation: sk 1.3s infinite; margin-bottom: 12px; }
.sk-title { height: 26px; width: 60%; } .sk-subtitle { width: 40%; } .sk-short { width: 30%; }
.sk-medium { width: 70%; } .sk-long { width: 90%; } .sk-spacer { height: 16px; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Sidebar dark header ──────────────────────────────────────────────────── */
.sb-header { background: linear-gradient(135deg, var(--fk-natt) 0%, var(--fk-fjord) 100%);
  padding: 18px 22px 20px; color: #fff; }
.sb-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sb-loc { font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--fk-text-on-dark-muted); font-weight: 500; padding-top: 4px; min-height: 15px; }
.sb-header-actions { display: flex; gap: 8px; flex: none; }
.sb-icon-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.1); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms;
}
.sb-icon-btn:hover { background: rgba(255,255,255,0.2); }
.sb-icon-btn .fk-ic { width: 16px; height: 16px; }
.sb-name { font-size: 28px; font-weight: 400; letter-spacing: -0.8px; margin: 6px 0 0; line-height: 1.1; }

.sb-stats { display: flex; gap: 2px; margin-top: 16px; }
.sb-stat { flex: 1; background: rgba(255,255,255,0.04); padding: 9px 6px; text-align: center; }
.sb-stat:first-child { border-radius: var(--fk-radius-sm) 0 0 var(--fk-radius-sm); }
.sb-stat:last-child { border-radius: 0 var(--fk-radius-sm) var(--fk-radius-sm) 0; }
.sb-stat-num { display: block; font-size: 22px; font-weight: 500; color: #fff; line-height: 1.1; }
.sb-stat-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--fk-text-on-dark-muted); margin-top: 3px; }

/* ── Gold trophy banner ───────────────────────────────────────────────────── */
.sb-gold { display: flex; align-items: center; gap: 14px; padding: 14px 22px;
  background: #FFF7ED; border-bottom: 0.5px solid #FED7AA; }
.sb-gold-icon { width: 40px; height: 40px; border-radius: var(--fk-radius-sm); background: #FFFBEB;
  display: flex; align-items: center; justify-content: center; color: var(--fk-gull); flex: none; }
.sb-gold-icon .fk-ic { width: 22px; height: 22px; fill: var(--fk-gull); stroke: var(--fk-gull); }
.sb-gold-title { font-size: 14px; font-weight: 500; color: var(--fk-gull-text); }
.sb-gold-sub { font-size: 12.5px; color: #B45309; margin-top: 2px; }
.sb-gold-src { color: var(--fk-gull-text); font-weight: 500; cursor: pointer; }
.sb-gold-src:hover { text-decoration: underline; }

/* ── Content body ─────────────────────────────────────────────────────────── */
.sb-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 22px; }
.sb-section { display: block; }
.sb-h { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.5px; color: #8C8780; font-weight: 600; margin: 0 0 10px; }
.sb-h .fk-ic { width: 13px; height: 13px; }
.sb-card { background: #fff; border: 0.5px solid var(--fk-border); border-radius: var(--fk-radius); padding: 14px; }
.sb-empty { font-size: 13px; color: var(--fk-text-muted); padding: 2px 0; }

/* Species cards */
.sb-species-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb-species-card { background: #fff; border: 0.5px solid var(--fk-border); border-radius: var(--fk-radius); padding: 12px 13px; }
.sb-species-top { display: flex; align-items: center; gap: 7px; }
.sb-conf-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--fk-skog); }
.sb-species-name { font-size: 15px; font-weight: 500; color: var(--fk-text-primary); }
.sb-species-conf { font-size: 12px; color: var(--fk-text-secondary); margin-top: 5px; }
.sb-species-obs { font-size: 11.5px; color: var(--fk-text-muted); margin-top: 2px; }
.sb-species-uncertain { opacity: 0.7; }
.sb-uncertain-mark { color: var(--fk-gull); font-weight: 700; margin-left: 3px; cursor: help; }

.sb-species-more { margin-top: 10px; }
.sb-species-more-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0;
  font-size: 12.5px; color: var(--fk-text-secondary); cursor: pointer; padding: 4px 0; font-family: inherit; }
.sb-species-more-btn .fk-ic { width: 13px; height: 13px; transition: transform 150ms; }
.sb-species-more-btn[aria-expanded="true"] .fk-ic { transform: rotate(180deg); }
.sb-species-row { display: flex; align-items: center; gap: 7px; padding: 7px 0;
  border-top: 0.5px solid var(--fk-border); font-size: 13.5px; }
.sb-species-row .sb-conf-dot { width: 7px; height: 7px; }
.sb-species-row-meta { margin-left: auto; font-size: 11.5px; color: var(--fk-text-muted); }

.sb-uncertain-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--fk-gull-light); color: var(--fk-gull-text); border-radius: var(--fk-radius-sm);
  padding: 8px 11px; font-size: 12px; margin-bottom: 10px; }
.sb-uncertain-toggle { background: none; border: 0; color: var(--fk-vatn); font-size: 12.5px; font-weight: 500;
  cursor: pointer; padding: 6px 0; font-family: inherit; }

/* Tilkomst */
.sb-access-row { display: flex; align-items: center; justify-content: space-between; }
.sb-access-label { font-size: 13px; color: var(--fk-text-secondary); }
.sb-access-val { font-size: 15px; font-weight: 500; }
.sb-divider { height: 0.5px; background: var(--fk-border); margin: 12px -14px; }
.sb-route-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: var(--fk-natt); color: #fff; border: 0; border-radius: var(--fk-radius); padding: 12px;
  font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 150ms; }
.sb-route-btn:hover:not(:disabled) { background: var(--fk-fjord); }
.sb-route-btn:disabled { opacity: 0.7; cursor: default; }
.sb-route-btn .fk-ic { width: 16px; height: 16px; }
.sb-byroad { font-size: 13px; color: var(--fk-text-secondary); }

/* Route results */
.sb-route-results { display: flex; flex-direction: column; gap: 9px; }
.sb-route-card { border-radius: var(--fk-radius); padding: 13px 14px; cursor: pointer;
  background: rgba(27,58,75,0.06); border: 0.5px solid var(--fk-border); opacity: 0.7;
  transition: opacity 150ms, background 150ms; animation: rc-in 250ms ease-out backwards; }
.sb-route-card:hover { opacity: 0.92; }
.sb-route-card.selected { background: var(--fk-natt); border: 2px solid var(--fk-route-blue); opacity: 1; cursor: default; color: #fff; }
.sb-rc-head { display: flex; align-items: center; gap: 8px; }
.sb-rc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fk-route-blue);
  box-shadow: 0 0 0 4px rgba(66,133,244,0.25); flex: none; }
.sb-rc-title { font-size: 13.5px; font-weight: 500; }
.sb-route-card.selected .sb-rc-title { color: #fff; }
.sb-rc-badge { margin-left: auto; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.5px;
  background: rgba(66,133,244,0.25); color: var(--fk-route-blue-light); padding: 2px 7px; border-radius: 5px; font-weight: 600; }
.sb-rc-dist { font-size: 17px; font-weight: 500; color: #fff; margin-top: 9px; }
.sb-rc-terr { font-size: 14px; color: var(--fk-text-on-dark-muted); font-weight: 400; }
.sb-rc-elev { display: flex; gap: 16px; margin-top: 7px; font-size: 13px; font-weight: 500; }
.sb-rc-elev .up { color: var(--fk-ascent); } .sb-rc-elev .down { color: var(--fk-descent); }
.sb-rc-elev .fk-ic { width: 14px; height: 14px; }
.sb-rc-elev span { display: inline-flex; align-items: center; gap: 4px; }
.sb-rc-types { font-size: 12px; color: var(--fk-text-on-dark-muted); margin-top: 8px; }
.sb-rc-time { font-size: 12.5px; color: var(--fk-text-on-dark-muted); margin-top: 4px; }
.sb-rc-bom { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #FCD34D; margin-top: 8px; }
.sb-rc-bom .fk-ic { width: 14px; height: 14px; color: var(--fk-gull); }
.sb-rc-nav { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px;
  color: var(--fk-route-blue-light); font-weight: 500; }
.sb-rc-nav:hover { text-decoration: underline; }
.sb-rc-nav .fk-ic { width: 14px; height: 14px; }
.sb-rc-nav .fk-ic.ext { width: 12px; height: 12px; opacity: 0.7; }

/* Unselected compact card */
.sb-rc-compact { display: flex; align-items: center; gap: 10px; }
.sb-rc-compact .sb-rc-name { font-size: 13px; font-weight: 500; color: var(--fk-text-primary); }
.sb-rc-compact .sb-rc-mini-dist { font-size: 13px; color: var(--fk-text-secondary); margin-left: auto; }
.sb-rc-compact .sb-rc-mini-elev { display: flex; gap: 9px; font-size: 11.5px; }
.sb-rc-compact .up { color: #16A34A; } .sb-rc-compact .down { color: #DC2626; }
.sb-rc-compact .sb-rc-bom-mini { color: var(--fk-gull); display: inline-flex; }
.sb-rc-compact .fk-ic { width: 12px; height: 12px; }

/* Selected vs compact card body */
.sb-rc-full { display: none; }
.sb-route-card.selected .sb-rc-full { display: block; }
.sb-route-card.selected .sb-rc-compact { display: none; }

/* Elevation chart */
.sb-elev-chart { background: var(--fk-elevation-bg); border-radius: var(--fk-radius-sm);
  height: 56px; margin-top: 4px; padding: 0; overflow: hidden; }
.sb-elev-chart svg { display: block; width: 100%; height: 100%; }
.elev-lbl { fill: rgba(255,255,255,0.45); font-size: 9px; font-family: var(--fk-font); }
.elev-peak { fill: rgba(255,255,255,0.7); font-size: 9px; font-family: var(--fk-font); }

.sb-route-hide { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  background: none; border: 0; color: var(--fk-text-muted); font-size: 12.5px; cursor: pointer;
  padding: 8px 0; font-family: inherit; }
.sb-route-hide:hover { color: var(--fk-text-secondary); }
.sb-route-hide .fk-ic { width: 13px; height: 13px; }
.sb-route-none h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--fk-text-muted); margin: 0 0 6px; }
.sb-route-none p { font-size: 13px; color: var(--fk-text-secondary); margin: 4px 0; line-height: 1.5; }
.sb-route-error { font-size: 13px; color: #DC2626; }

/* Fiskekort */
.sb-fk-area { font-size: 14px; font-weight: 500; }
.sb-fk-provider { font-size: 12px; color: var(--fk-text-secondary); margin-top: 2px; }
.sb-fk-buy { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; background: var(--fk-vatn);
  color: #fff; border-radius: var(--fk-radius-sm); padding: 8px 14px; font-size: 13px; font-weight: 500; }
.sb-fk-buy:hover { background: #3A7BC0; }
.sb-fk-buy .fk-ic { width: 13px; height: 13px; }
.sb-fk-note { font-size: 12.5px; color: var(--fk-text-muted); margin-top: 8px; }

/* Omtaler */
.sb-omtale { padding: 9px 0 9px 12px; border-left: 3px solid var(--fk-skog); }
.sb-omtale + .sb-omtale { border-top: 0.5px solid var(--fk-border); margin-top: 2px; }
.sb-omtale.neg { border-left-color: var(--fk-descent); }
.sb-omtale-text { font-style: italic; font-size: 13px; color: var(--fk-text-primary); line-height: 1.5; }
.sb-omtale-src { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  color: var(--fk-text-muted); margin-top: 5px; }
.sb-omtale-src .fk-ic { width: 11px; height: 11px; }
.sb-omtale-toggle { background: none; border: 0; color: var(--fk-vatn); font-size: 12.5px; font-weight: 500;
  cursor: pointer; padding: 8px 0 0; font-family: inherit; }

/* Search section / fiskekvalitet / stocking / regs */
.sb-search-card { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: #fff; border: 0.5px solid var(--fk-border); border-radius: var(--fk-radius);
  padding: 13px 14px; cursor: pointer; font-family: inherit; transition: border-color 150ms, background 150ms; }
.sb-search-card:hover:not(:disabled) { border-color: var(--fk-vatn); background: #fff; }
.sb-search-card:disabled { cursor: default; }
.sb-search-card .fk-ic { width: 16px; height: 16px; color: var(--fk-vatn); flex: none; }
.sb-search-card .lbl { font-size: 13.5px; font-weight: 500; }
.sb-search-card .sub { font-size: 11.5px; color: var(--fk-text-muted); margin-left: auto; }
.sb-search-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(74,144,217,0.3);
  border-top-color: var(--fk-vatn); animation: spin 700ms linear infinite; }
.sb-search-banner { border-radius: var(--fk-radius); padding: 13px 14px; font-size: 13.5px; font-weight: 500;
  background: #EAF2FB; color: var(--fk-natt); }
.sb-search-banner.gold { background: var(--fk-gull-light); color: var(--fk-gull-text); }

.sb-quality { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; }
.sb-kv-list { list-style: none; margin: 0; padding: 0; }
.sb-kv-list li { font-size: 13px; color: var(--fk-text-secondary); padding: 3px 0; }
.sb-kv-toggle { background: none; border: 0; color: var(--fk-vatn); font-size: 12.5px; cursor: pointer; padding: 6px 0; font-family: inherit; }
.sb-kv-collapsed li:nth-child(n+6) { display: none; }
.sb-kv-list.stocking-expanded li { display: list-item; }
.sb-reg-item { font-size: 13px; color: var(--fk-text-secondary); line-height: 1.6; }
.sb-reg-item + .sb-reg-item { border-top: 0.5px solid var(--fk-border); margin-top: 8px; padding-top: 8px; }
.sb-reg-src { font-size: 11.5px; color: var(--fk-text-muted); margin-top: 8px; }

/* Footer */
.sb-footer { display: flex; align-items: center; justify-content: space-between;
  border-top: 0.5px solid var(--fk-border); padding-top: 14px; }
.sb-coords { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--fk-text-secondary); cursor: pointer; background: none; border: 0; font-family: inherit; }
.sb-coords .fk-ic { width: 13px; height: 13px; color: var(--fk-text-muted); }
.sb-copy { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--fk-vatn);
  cursor: pointer; background: none; border: 0; font-family: inherit; }
.sb-copy .fk-ic { width: 13px; height: 13px; }

/* MapLibre control polish */
.maplibregl-ctrl-group { border-radius: 9px !important; box-shadow: var(--fk-shadow) !important; border: 0.5px solid var(--fk-border) !important; }

/* Drag handle (mobile only) */
.sb-drag-handle { display: none; }

/* ── Animations ───────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Mobile: bottom sheet ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #search-container { width: calc(100vw - 20px); top: 10px; left: 10px; }
  #search-box { width: 100%; }
  /* #filter-row keeps the stacked column layout; pills fit the full-width card.
     No overflow here — it would clip the filter dropdowns. */
  .species-filter-btn { white-space: nowrap; }

  #sidebar {
    top: auto; bottom: 0; right: 0; left: 0; width: 100%; height: 88vh;
    border-radius: 18px 18px 0 0; overflow: hidden;
    transform: translateY(100%);
    transition: transform 300ms ease-out;
  }
  #sidebar.open { transform: translateY(calc(100% - 132px)); } /* peek: header visible */
  #sidebar.open.sheet-half { transform: translateY(45vh); }
  #sidebar.open.sheet-full { transform: translateY(0); }

  .sb-drag-handle { display: block; position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 5;
    cursor: grab; touch-action: none; }
  .sb-drag-handle::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.4); }
  .sb-header { padding-top: 26px; }
}