/* Browser/Wix edition. The Android assets remain untouched. */
html.web-build,
html.web-build body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  background: var(--bg);
}

/* Bold, modern wordmark inspired by the rounded reference lettering. */
html.web-build .brand-text,
html.web-build .bi-hva,
html.web-build .first-place-brand > span {
  font-family: 'Fredoka', 'Arial Rounded MT Bold', 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  font-kerning: normal;
  transform-origin: left center;
  background: linear-gradient(100deg, #f078a4, #9b82e8 58%, #62bddb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

html.web-build .brand-text {
  font-size: 27px !important;
  line-height: 1.15 !important;
  padding: .06em .04em .18em;
  margin: -.06em -.04em -.18em;
  overflow: visible;
}

html.web-build .bi-hva {
  letter-spacing: -.025em !important;
  line-height: 1.15 !important;
  padding: .04em .04em .18em;
  margin: -.04em -.04em -.18em;
  overflow: visible;
}

html.web-build body {
  margin: 0;
  /* v6: the page itself is transparent – the backdrop lives on <html> (drawn
     fallback map) and in #bgMap (the real Utforsk map, faint). */
  background: transparent !important;
}

html.web-build {
  /* v7: plain page colour – the only map is the faint Utforsk map (#bgMap). */
  background: var(--bg);
}

/* Avoid mobile safe-area assumptions inside a desktop iframe. */
@media (min-width: 768px) {
  html.web-build {
    --safe-top: 0px;
    --safe-bottom: 0px;
  }

  /* Compact first visit: a centered location card, not a full-screen wall. */
  html.web-build #locationDialog.first-run {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: min(34vw, 460px);
    min-width: 390px;
    height: auto;
    min-height: 0;
    max-height: calc(100vh - 48px);
    margin: auto;
    padding: 24px;
    border-radius: 28px;
    background: var(--surface);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .42);
    overflow-y: auto;
  }

  html.web-build #locationDialog.first-run[open] {
    display: block;
  }

  html.web-build #locationDialog.first-run::backdrop {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
  }

  html.web-build #locationDialog.first-run .first-place-bg-map {
    width: 82%;
    opacity: .3;
  }

  html.web-build #locationDialog.first-run .first-place-brand {
    margin: 0 0 22px;
  }

  html.web-build #locationDialog.first-run .dialog-heading {
    margin: 0 0 7px;
  }

  html.web-build #locationDialog.first-run .dialog-heading h2 {
    font-size: clamp(30px, 3vw, 38px);
  }

  html.web-build #locationDialog.first-run .first-place-copy {
    margin-bottom: 18px;
  }

  html.web-build #locationDialog.first-run .city-grid {
    gap: 8px;
  }

  html.web-build #locationDialog.first-run .city-grid button {
    min-height: 46px;
    border-radius: 15px;
    font-size: 14px;
  }

  html.web-build #locationDialog.first-run .divider {
    margin: 14px 0 10px;
  }

  html.web-build #locationDialog.first-run #useGPS {
    min-height: 46px;
    border-radius: 15px;
  }

  html.web-build #locationDialog.first-run #allVestfold {
    min-height: 38px;
    margin-top: 4px;
  }
}

/* Give keyboard users a visible, elegant focus indicator. */
html.web-build :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--dream-lilac) 82%, white);
  outline-offset: 3px;
}

/* Keep dialogs comfortable in a Wix iframe or a regular desktop tab. */
@media (min-width: 1024px) {
  /* Desktop landing flow: slideshow first, search centered directly below. */
  html.web-build body.pc-web[data-view="home"] #homeView {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "hello" "hero" "ask" "feed" "foot" !important;
    grid-template-rows: auto auto auto auto auto !important;
    column-gap: 0 !important;
    align-content: start;
  }

  html.web-build body.pc-web[data-view="home"] .home-hello { grid-area: hello; }
  html.web-build body.pc-web[data-view="home"] .hero { grid-area: hero; }

  html.web-build body.pc-web[data-view="home"] .home-ask {
    grid-area: ask;
    width: min(680px, calc(100% - 40px));
    max-width: 680px;
    margin: 18px auto 5px;
    justify-self: center;
  }

  html.web-build body.pc-web[data-view="home"] .event-feed {
    grid-area: feed;
    margin-top: 24px;
  }

  html.web-build body.pc-web[data-view="home"] .home-foot { grid-area: foot; }

  html.web-build body.pc-web .hero {
    position: relative;
    display: block;
    width: 100%;
    min-height: 320px;
    overflow: hidden;
  }

  html.web-build body.pc-web #heroSwiper {
    display: block;
    position: relative;
    width: 100%;
    max-width: none;
    height: 320px;
    min-height: 320px;
    margin: 0;
    overflow: hidden;
  }

  html.web-build body.pc-web #heroSlides {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  html.web-build body.pc-web #heroSlides .g-slide .slide {
    border-radius: 22px;
    overflow: hidden;
  }

  html.web-build body.pc-web #heroSlides .slide-body {
    padding: 16px 18px 24px;
  }

  html.web-build body.pc-web #heroSlides .slide-body h3 {
    font-size: clamp(17px, 1.25vw, 22px);
    line-height: 1.08;
    -webkit-line-clamp: 2;
  }

  html.web-build body.pc-web #heroSlides .slide-top {
    top: 16px;
    left: 16px;
    right: 16px;
  }

  html.web-build body.pc-web .glide-arrow {
    display: grid !important;
  }

  html.web-build dialog:not(#filterDialog) {
    max-height: min(860px, calc(100vh - 48px));
  }

  html.web-build .chat-panel {
    max-height: calc(100vh - 48px);
  }
}

/* Wix preview can be shorter than a normal browser window. */
@media (max-height: 650px) and (min-width: 768px) {
  html.web-build .glide {
    min-height: 250px;
    height: 42vh;
  }
}

html.web-build .web-only-note {
  display: block;
}

/* Map venue cards: one calm left edge for every information level. */
html.web-build .leaflet-popup-content,
html.web-build .pop-venue-card,
html.web-build .pop-venue-head,
html.web-build .pop-venue-info,
html.web-build .pop-list,
html.web-build .pop-item,
html.web-build .pop-item-text { text-align: left !important; }
html.web-build .pop-venue-head { align-items: flex-start; }
html.web-build .pop-venue-info { align-items: flex-start; }
html.web-build .pop-date-header { margin-left: 0; margin-right: 0; }
html.web-build .pop-item { padding-left: 0; padding-right: 0; justify-content: flex-start; }
html.web-build .pop-item-text { align-items: flex-start; }
html.web-build .pop-directions { justify-content: flex-start; margin-left: 0; margin-right: 0; padding-left: 16px; }

@media (display-mode: standalone) {
  html.web-build .app-header {
    user-select: none;
  }
}

/* ---------- v5: location choice before the page launches ---------- */
/* Until a place is chosen (first visit), only the location step is visible. */
html.pre-place body > :not(#locationDialog),
html.web-build body:has(#locationDialog.first-run[open]) > :not(#locationDialog) {
  visibility: hidden !important;
}
html.pre-place #locationDialog::backdrop,
html.web-build #locationDialog.first-run::backdrop {
  background: var(--bg) !important;
}
html.pre-place body { background-image: none; }

@media (min-width: 768px) {
  /* Card hugs its content instead of stretching to the full window height. */
  html.web-build #locationDialog.first-run {
    height: fit-content;
  }
}

/* ---------- v5: larger top menu buttons ---------- */
@media (min-width: 1024px) {
  html.web-build .tabbar {
    height: 64px;
    gap: 6px;
  }
  html.web-build .tabbar button {
    font-size: 15.5px !important;
    padding: 11px 20px !important;
    gap: 9px;
    border-radius: 15px;
  }
  html.web-build .tabbar button .ico,
  html.web-build .tabbar .ib svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* v5: faded Norway map on the location step a little more visible (mobile). */
html.web-build #locationDialog.first-run .first-place-bg-map { opacity: .44; }
@media (min-width: 768px) {
  html.web-build #locationDialog.first-run .first-place-bg-map { opacity: .3; }
}

/* v5: mid-width screens (tablet / narrow Wix embed) – the menu floated over the
   location pill. Dock it at the bottom, centred, as on mobile. */
@media (min-width: 768px) and (max-width: 1023px) {
  html.web-build .tabbar {
    top: auto !important;
    bottom: calc(10px + var(--safe-bottom)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(560px, calc(100% - 32px));
  }
}
@media (min-width: 1024px) {
  html.web-build .tabbar button { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1239px) {
  html.web-build .tabbar button { font-size: 14.5px !important; padding: 10px 13px !important; }
}

/* ---------- v6: the Utforsk map as a faint backdrop for the whole app ---------- */
html.web-build #bgMap {
  position: fixed !important;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  background: transparent !important;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
  filter: saturate(.7) blur(.4px);
}
html.web-build #bgMap.ready { opacity: .2; }
:root[data-theme=light] html.web-build #bgMap.ready,
html.web-build[data-theme=light] #bgMap.ready { opacity: .16; }
/* soft vignette so the map melts into the page edges and never competes with text */
html.web-build #bgMap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1000;
  background:
    radial-gradient(130% 100% at 50% 45%, transparent 45%, color-mix(in srgb, var(--bg) 85%, transparent) 100%);
}
html.web-build #bgMap .leaflet-control-attribution {
  pointer-events: auto;
  margin: 0 0 4px 6px;
  padding: 0 5px;
  border-radius: 6px;
  background: transparent !important;
  color: var(--muted);
  font-size: 9px;
  opacity: .9;
}
html.web-build #bgMap .leaflet-control-attribution a { color: inherit; }
@media (max-width: 1023px) {
  /* the floating tab bar sits at the bottom here */
  html.web-build #bgMap .leaflet-control-attribution { margin-bottom: calc(var(--tabbar-h, 64px) + 14px); }
}
/* Utforsk already shows the full map */
html.web-build body[data-view=map] #bgMap { visibility: hidden; }

/* Location step: let the faint map show behind the card instead of a flat colour. */
html.web-build.has-bgmap #locationDialog.first-run::backdrop {
  background: color-mix(in srgb, var(--bg) 55%, transparent) !important;
}
html.web-build.has-bgmap body:has(#locationDialog.first-run[open]) > #bgMap { visibility: visible !important; }
html.pre-place.has-bgmap body > #bgMap { visibility: visible !important; }

/* v8: active Aktiviteter choice shown on the map sheet, so hidden pins are never a mystery */
html.web-build .chip.active-filter-chip {
  background: color-mix(in srgb, var(--dream-lilac, #a88cff) 22%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dream-lilac, #a88cff) 60%, transparent);
  color: var(--ink);
  font-weight: 750;
}

/* v8: map filter status – Utforsk has no list panel, so show what is hiding pins */
html.web-build .map-filter-bar {
  position: absolute;
  z-index: 900;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 120px);
  padding: 7px 7px 7px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dream-lilac, #a88cff) 35%, transparent), 0 14px 34px -16px rgba(0, 0, 0, .8);
  color: var(--muted);
  font-size: 13.5px;
  white-space: nowrap;
}
html.web-build .map-filter-bar[hidden] { display: none; }
html.web-build .map-filter-bar .mfb-text { overflow: hidden; text-overflow: ellipsis; }
html.web-build .map-filter-bar b { color: var(--ink); }
html.web-build .map-filter-bar button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(100deg, #e0719d, #8f76e0 60%, #5aaecf);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
@media (max-width: 1023px) {
  html.web-build .map-filter-bar { max-width: calc(100% - 24px); font-size: 12.5px; }
}

/* v10: filters never remove pins on Utforsk – non-matching stacks fade back, matches stay bright */
html.web-build .bpin.dim { opacity: .32; filter: saturate(.35); transition: opacity .25s, filter .25s; }
html.web-build .pin-wrap:hover .bpin.dim { opacity: .85; filter: none; }
html.web-build .bpin.dim .bpin-label { display: none; }

/* v11: quiet "under development" note under the landing headline */
html.web-build .dev-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 10px auto 2px;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
  text-align: left;
}
html.web-build .dev-note b { color: var(--ink); font-weight: 700; }
html.web-build .dev-note a {
  color: var(--dream-lilac, #a88cff);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
html.web-build .dev-note a:hover { text-decoration: underline; }
html.web-build .dev-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f0b35e;
  box-shadow: 0 0 8px color-mix(in srgb, #f0b35e 70%, transparent);
}
@media (min-width: 1024px) { html.web-build .dev-note { font-size: 13.5px; margin-top: 12px; } }
@media (max-width: 480px) { html.web-build .dev-note { border-radius: 16px; font-size: 12px; padding: 7px 12px; } }

/* v12: a bit larger dev note */
html.web-build .dev-note { font-size: 14px; padding: 8px 18px; gap: 10px; margin-top: 12px; }
html.web-build .dev-dot { width: 9px; height: 9px; }
@media (min-width: 1024px) { html.web-build .dev-note { font-size: 15.5px; padding: 9px 20px; margin-top: 14px; } }
@media (max-width: 480px) { html.web-build .dev-note { font-size: 13.5px; padding: 9px 14px; } }

/* v33: crisp hero photography — retain only a very narrow edge dissolve. */
html.web-build body[data-view=home] .g-slide {
  --fh:6px;
  --fv:6px;
}
html.web-build body[data-view=home] .g-slide .slide-img {
  left:-2%;
  right:-2%;
  width:104%;
  filter:contrast(1.055) saturate(1.035)!important;
  image-rendering:auto;
  backface-visibility:hidden;
}
html.web-build body[data-view=home] .g-slide .slide-art {
  left:-2%;
  right:-2%;
  width:104%;
}

/* v15: clearer place switching, one-tap discovery and a stable five-column feed. */
html.web-build .headline-row { display:flex; align-items:center; justify-content:center; gap:12px; }
html.web-build .headline-location {
  display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:0 14px; border:0;
  border-radius:999px; color:var(--ink);
  background:color-mix(in srgb,var(--dream-lilac,#a88cff) 17%,var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dream-lilac,#a88cff) 45%,transparent),0 11px 28px -18px var(--dream-lilac,#a88cff);
  font:750 13px/1 var(--body); white-space:nowrap; transition:transform .2s ease,background .2s ease;
}
html.web-build .headline-location [data-icon]{display:grid;width:17px;height:17px;color:var(--dream-lilac,#a88cff)}
html.web-build .headline-location svg{width:100%;height:100%}
html.web-build .headline-location:hover{background:color-mix(in srgb,var(--dream-lilac,#a88cff) 25%,var(--surface));transform:translateY(-1px)}
html.web-build .intro-on .headline-location{visibility:hidden}

html.web-build body[data-view=home] .home-discovery {
  width:min(850px,calc(100% - 40px)); margin:18px auto 5px; display:grid;
  grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:10px;
}
html.web-build body[data-view=home] .home-discovery .home-ask {
  width:100%!important; max-width:none!important; min-height:60px; margin:0!important;
}
html.web-build .home-surprise {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:154px; padding:0 18px;
  border:0; border-radius:19px; color:#fff; background:linear-gradient(115deg,#7966be,#9a79c8 58%,#bd7d9e);
  box-shadow:0 14px 30px -18px rgba(157,116,211,.9),inset 0 1px rgba(255,255,255,.18);
  font:800 14px/1 var(--body); transition:transform .2s ease,filter .2s ease;
}
html.web-build .home-surprise>span{font-size:18px}
html.web-build .home-surprise:hover{transform:translateY(-1px);filter:brightness(1.08)}
html.web-build .home-surprise:active{transform:scale(.98)}
@media (min-width:1024px) {
  html.web-build body.pc-web[data-view=home] .home-discovery{grid-area:ask}
  html.web-build body.pc-web[data-view=home] .home-ask{grid-area:auto}
  html.web-build body.pc-web[data-view=home] .event-feed .event-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
@media (max-width:650px) {
  html.web-build .headline-row{gap:6px}
  html.web-build .headline-location{width:40px;min-width:40px;height:40px;padding:0;justify-content:center}
  html.web-build .headline-location>span:last-child{display:none}
  html.web-build body[data-view=home] .home-discovery{width:calc(100% - 28px);grid-template-columns:minmax(0,1fr) 52px;gap:8px;margin-top:7px}
  html.web-build .home-surprise{min-width:52px;padding:0;border-radius:18px}
  html.web-build .home-surprise b{display:none}
}

/* v16: calmer, more readable event feed — four taller cards across on desktop. */
@media (min-width:1024px) {
  html.web-build body.pc-web[data-view=home] .event-feed .event-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
  }
  html.web-build body.pc-web[data-view=home] .event-feed .card {
    min-height:272px!important;
    border-radius:20px!important;
  }
  html.web-build body.pc-web[data-view=home] .event-feed .card-media {
    height:172px!important;
  }
  html.web-build body.pc-web[data-view=home] .event-feed .card-body {
    padding:13px 15px 16px!important;
    gap:5px!important;
  }
  html.web-build body.pc-web[data-view=home] .event-feed .card-body strong {
    font-size:16px!important;
    line-height:1.22!important;
    letter-spacing:-.12px;
    -webkit-line-clamp:2!important;
  }
  html.web-build body.pc-web[data-view=home] .event-feed .card-body small {
    font-size:12.5px!important;
    line-height:1.3!important;
  }
  html.web-build body.pc-web[data-view=home] .event-feed .card-body .when {
    font-size:12.5px!important;
    letter-spacing:.1px;
  }
}

/* v17: keep the place control attached to the question and give discovery breathing room. */
html.web-build .headline-row { gap:4px; }
html.web-build .headline-location { margin-left:0; }
@media (min-width:1024px) {
  html.web-build body[data-view=home] .home-discovery {
    width:min(920px,calc(100% - 48px));
    grid-template-columns:minmax(0,680px) auto;
    justify-content:center;
    gap:24px;
  }
}

/* v19: location picker grouped by region – Vestfold towns and Oslo as separate sections */
#locationDialog .region-block { margin-top: 14px; }
#locationDialog .region-block + .region-block { margin-top: 16px; }
#locationDialog .region-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 8px; }
#locationDialog .region-head h3 {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font: 800 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
#locationDialog .region-head small { color: var(--muted); font-size: 11.5px; font-weight: 650; }
#locationDialog .region-new {
  padding: 3px 7px; border-radius: 999px; font-size: 9.5px; letter-spacing: .06em;
  background: color-mix(in srgb, var(--dream-lilac, #a88cff) 22%, transparent); color: var(--dream-lilac, #a88cff);
}
#locationDialog .city-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; line-height: 1.1; }
#locationDialog .city-grid button small { font-size: 10.5px; font-weight: 600; color: var(--muted); }
#locationDialog .city-grid button small:empty { display: none; }
#locationDialog .city-grid button.active { box-shadow: inset 0 0 0 1.5px var(--dream-lilac, #a88cff) !important; }
#locationDialog .city-grid .region-all {
  grid-column: 1 / -1; min-height: 44px !important;
  background: transparent !important; color: var(--dream-lilac, #a88cff) !important; font-weight: 800 !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dream-lilac, #a88cff) 35%, transparent) !important;
}
#locationDialog .region-oslo .city-grid { grid-template-columns: 1fr; }
#locationDialog .city-grid button.city-oslo {
  min-height: 58px;
  background: linear-gradient(120deg, color-mix(in srgb, #62bddb 16%, var(--surface)), color-mix(in srgb, #9b82e8 16%, var(--surface))) !important;
}
/* the first-run card on mobile gets taller – let it scroll instead of squeezing */
html.web-build #locationDialog.first-run { overflow-y: auto; }
#locationDialog.first-run .dialog-heading { margin-top: clamp(18px, 5vh, 60px); }
@media (min-width: 768px) {
  html.web-build #locationDialog.first-run .city-grid button { min-height: 50px; }
}

/* v19: Vestfold / Oslo jump on Utforsk */
html.web-build .map-regions {
  position: absolute; z-index: 900; top: 14px; left: 14px;
  display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 12px 30px -16px rgba(0,0,0,.8);
}
html.web-build .map-regions button {
  min-height: 34px; padding: 0 14px; border-radius: 999px;
  color: var(--muted); font-weight: 800; font-size: 13px; background: transparent;
}
html.web-build .map-regions button[aria-pressed=true] {
  color: #fff; background: linear-gradient(100deg, #e0719d, #8f76e0 60%, #5aaecf);
}
@media (max-width: 1023px) {
  html.web-build .map-regions { top: auto; bottom: 14px; left: 50%; transform: translateX(-50%); }
}

/* v22: all pins, no bubbles – optimised for many pins (Oslo) */
/* 1. No filters or never-ending animations on every pin: static shadows are far cheaper to draw */
html.web-build body[data-view=map] .bpin { filter: none !important; }
html.web-build .bpin::before { animation: none !important; opacity: .35; transform: none; }
html.web-build .bpin:not(.today):not(.hot-pin)::before { display: none; }
html.web-build body[data-view=map] .bpin-drop { box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
html.web-build .pin-wrap { contain: layout style; }
/* 2. Pins scale with zoom so the map stays readable from afar – smooth, no pop */
html.web-build .bpin-head { transform-origin: 50% 100%; transform: scale(var(--pin-scale, 1)); }
/* while Leaflet animates a zoom, skip the size transition so pins follow the map exactly */
/* 3. Pins fade in once when created (opacity only – cheap) */
.pin-wrap > .bpin { animation: bpinFade .25s ease-out; }
@keyframes bpinFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pin-wrap > .bpin { animation: none; } }
:root.reduce-motion .pin-wrap > .bpin { animation: none; }

/* v22: no never-ending pulse on busy pins – a static glow ring instead (much lighter with many pins) */
html.web-build .hot-pin .bpin-drop, html.web-build .bpin .bpin-drop { animation: none !important; }
html.web-build .hot-pin .bpin-drop { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 28%, transparent), 0 4px 10px rgba(0, 0, 0, .35); }
/* small glowing dots for the venues that are not full pins at this zoom */
html.web-build .map-dot { cursor: pointer; transition: stroke-opacity .2s, stroke-width .2s; }
html.web-build .map-dot:hover { stroke-width: 3px; }
html.web-build .leaflet-tooltip { border: 0; border-radius: 10px; padding: 5px 9px; font-weight: 700; font-size: 12.5px;
  background: color-mix(in srgb, var(--surface) 96%, transparent); color: var(--ink); box-shadow: 0 8px 20px -8px rgba(0,0,0,.7); }
html.web-build .leaflet-tooltip-top::before { border-top-color: color-mix(in srgb, var(--surface) 96%, transparent); }

/* v22: bigger info bubble when you tap a pin */
html.web-build .leaflet-popup-content { margin: 16px 16px 14px !important; min-width: min(340px, calc(100vw - 84px)); }
html.web-build .pop-venue-card { gap: 10px; }
html.web-build .pop-venue-head { gap: 14px; padding-bottom: 12px; }
html.web-build .pop-venue-img { width: 68px; height: 68px; flex-basis: 68px; border-radius: 16px; }
html.web-build .pop-venue-title { font-size: 18px; white-space: normal; line-height: 1.2; }
html.web-build .pop-venue-sub { font-size: 13px; white-space: normal; }
html.web-build .pop-venue-count { font-size: 12.5px; }
html.web-build .pop-date-header { font-size: 13px; margin: 10px 2px 6px; }
html.web-build .pop-list { max-height: min(380px, 50vh); }
html.web-build .pop-item { gap: 12px; padding: 8px 6px; min-height: 56px; }
html.web-build .pop-item:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
html.web-build .pop-thumb { width: 44px; height: 44px; flex-basis: 44px; border-radius: 11px; }
html.web-build .pop-item strong { font-size: 15px; line-height: 1.25; }
html.web-build .pop-item small { font-size: 12.5px; color: var(--muted); }
html.web-build .pop-directions { font-size: 14px; padding: 10px 0 2px; }
/* the pulsing ring on busy pins becomes a still ring (78 pulsing rings were the main cost) */
html.web-build body[data-view=map] .bpin.hot-pin .bpin-drop::before { animation: none !important; transform: scale(1.18); opacity: .35; }

/* v23: bottom menu – four equal buttons across the full width (mobile & tablet) */
@media (max-width: 1023px) {
  html.web-build .tabbar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    left: 10px !important; right: 10px !important; width: auto !important;
    transform: none !important;
    gap: 0;
  }
  html.web-build .tabbar button { width: 100%; min-width: 0; padding: 0 2px; font-size: 11.5px; }
  html.web-build .tabbar button .ico { width: 23px; height: 23px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html.web-build .tabbar { left: 50% !important; right: auto !important; width: min(520px, calc(100% - 32px)) !important; transform: translateX(-50%) !important; }
}
/* crisp, GPU-friendly map: no per-element filters on the vector layer */
html.web-build .leaflet-overlay-pane svg { shape-rendering: geometricPrecision; }

/* v24: mobile/tablet – search and «Overrask meg» sit under the slideshow, full width and in the right order.
   Scoped to non-PC layouts so the desktop version is untouched. */
@media (max-width: 1023px) {
  html.web-build body:not(.pc-web)[data-view=home] .home-discovery,
  html.web-build body[data-view=home] #homeView > .home-discovery { order: 3; }
  html.web-build body:not(.pc-web)[data-view=home] .home-discovery {
    width: calc(100% - 28px); margin: 10px auto 4px;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  }
  html.web-build body:not(.pc-web)[data-view=home] .home-discovery .home-ask { order: 0; min-height: 56px; }
  html.web-build body:not(.pc-web)[data-view=home] .home-discovery .home-surprise {
    order: 1; min-width: 0; width: 100%; height: 46px; padding: 0 16px; border-radius: 16px; font-size: 14px;
  }
  html.web-build body:not(.pc-web)[data-view=home] .home-discovery .home-surprise b { display: inline; }
}
@media (min-width: 560px) and (max-width: 1023px) {
  /* enough room on tablets: search and «Overrask meg» side by side */
  html.web-build body:not(.pc-web)[data-view=home] .home-discovery { grid-template-columns: minmax(0, 1fr) auto; }
  html.web-build body:not(.pc-web)[data-view=home] .home-discovery .home-surprise { width: auto; height: auto; min-width: 150px; }
}

/* v24: white ring around the small map dots */

/* v25: smoother zoom – same easing as the map, crisp tiles fading in gently */
html.web-build .leaflet-zoom-anim .leaflet-zoom-animated { transition-timing-function: cubic-bezier(0, 0, .25, 1); }
html.web-build .leaflet-fade-anim .leaflet-tile { transition: opacity .3s linear; }

/* v25: slides show all their info – text sits inside the sharp area of the card (not in the soft
   fading edges), titles fit on max two lines, and the carousel frame is as tall as the cards. */
html.web-build .g-slide .slide-body {
  padding: 16px calc(var(--fh, 40px) + 8px) calc(var(--fv, 44px) + 6px) !important;
}
html.web-build .g-slide .slide-top {
  top: calc(var(--fv, 44px) * .62) !important;
  left: calc(var(--fh, 40px) + 4px) !important; right: calc(var(--fh, 40px) + 4px) !important;
}
html.web-build .g-slide .slide-body h3 {
  font-size: clamp(18px, 1.35vw + 10px, 26px) !important; line-height: 1.12 !important;
  -webkit-line-clamp: 2 !important; margin-bottom: 8px !important;
}
html.web-build .g-slide .slide-place { display: flex; align-items: center; gap: 5px; min-width: 0; }
html.web-build .g-slide .slide-place b { min-width: 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; }
html.web-build .g-slide .slide-top > .slide-when { max-width: calc(100% - 44px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) {
  html.web-build .g-slide .slide-body h3 { font-size: clamp(17px, 4.8vw, 22px) !important; }
}
@media (min-width: 1024px) {
  html.web-build body.pc-web .hero { min-height: 390px !important; height: 390px; overflow: hidden; }
  html.web-build body.pc-web #heroSwiper { height: 380px !important; min-height: 380px !important; margin-top: 4px; }
}
/* text scales with each card's own width (container query), narrower soft edges = more room for text */
html.web-build .g-slide { --fh: clamp(14px, 7%, 30px) !important; --fv: clamp(22px, 9%, 44px) !important; }
html.web-build .g-slide .slide { container-type: inline-size; }
html.web-build .g-slide .slide-body h3 { font-size: clamp(15px, 8.2cqi, 26px) !important; -webkit-line-clamp: 3 !important; }
html.web-build .g-slide .slide-place { font-size: clamp(11px, 4.6cqi, 13.5px) !important; }
html.web-build .g-slide .slide-top > .slide-when { font-size: clamp(10px, 4.4cqi, 13px) !important; max-width: calc(100% - 40px); }

/* v26: comprehensive location picker – search + one section per region */
#locationDialog .place-search { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 0 12px; min-height: 44px; border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, var(--ink) 6%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
#locationDialog .place-search span { color: var(--dream-lilac, #a88cff); font-size: 18px; }
#locationDialog .place-search input { flex: 1; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14.5px; }
#locationDialog .place-regions { max-height: min(52vh, 460px); overflow-y: auto; margin: 0 -4px; padding: 0 4px; overscroll-behavior: contain; }
#locationDialog .region-all { display: flex !important; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 50px; padding: 8px 14px;
  margin-bottom: 8px; border-radius: 15px; text-align: left; color: var(--ink);
  background: linear-gradient(120deg, color-mix(in srgb, #9b82e8 14%, var(--surface)), color-mix(in srgb, #62bddb 10%, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dream-lilac, #a88cff) 30%, transparent); }
#locationDialog .region-all b { font-size: 14.5px; }
#locationDialog .region-all small { color: var(--muted); font-size: 11.5px; font-weight: 600; }
#locationDialog .region-all.active, #locationDialog .city-grid button.active { box-shadow: inset 0 0 0 2px var(--dream-lilac, #a88cff) !important; }
#locationDialog .city-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; }
#locationDialog [hidden] { display: none !important; }
html.web-build #locationDialog.first-run { overflow-y: auto; }

/* v27: «Bytt sted» sits right after the question mark; the header location pill is gone */
html.web-build .home-hello .headline-row { display: flex !important; justify-content: center !important; align-items: center; gap: 12px !important; flex-wrap: nowrap; width: 100%; }
html.web-build .home-hello .headline-row #helloTitle { flex: 0 1 auto !important; width: auto !important; max-width: calc(100% - 64px); margin: 0 !important; }
html.web-build .home-hello .headline-row .headline-location { position: static !important; flex: 0 0 auto; margin: 0 !important; transform: none; }
html.web-build .home-hello .headline-row .headline-location:hover { transform: translateY(-1px); }
@media (max-width: 650px) {
  html.web-build .home-hello .headline-row { gap: 8px !important; }
  html.web-build .home-hello .headline-row #helloTitle { max-width: calc(100% - 52px); }
}
html.web-build .app-header #locationBtn { display: none !important; }
#locationDialog .place-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
#locationDialog .place-recent small { width: 100%; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
#locationDialog .place-recent button { min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 85%, var(--ink) 8%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
#locationDialog .place-everything { margin-top: 10px; background: linear-gradient(110deg, color-mix(in srgb, #f078a4 20%, var(--surface)), color-mix(in srgb, #9b82e8 22%, var(--surface)) 55%, color-mix(in srgb, #62bddb 20%, var(--surface))) !important; }

/* v34: final slide treatment — crisp photography with only a hairline dissolve. */
html.web-build body[data-view=home] #heroSlides .g-slide { --fh:5px!important; --fv:5px!important; }
html.web-build body[data-view=home] #heroSlides .g-slide .slide-img {
  left:-2%!important; right:-2%!important; width:104%!important;
  filter:contrast(1.08) saturate(1.07) brightness(1.015)!important;
  transition:opacity .42s ease!important; image-rendering:auto; backface-visibility:hidden;
}
html.web-build body[data-view=home] #heroSlides .g-slide .slide-art { left:-2%!important; right:-2%!important; width:104%!important; }
html.web-build body[data-view=home] #heroSlides .g-slide .slide-body { padding:18px 22px 28px!important; }
html.web-build body[data-view=home] #heroSlides .g-slide .slide-top { top:16px!important; left:18px!important; right:18px!important; }

/* v36: all event information remains readable inside narrow carousel cards. */
html.web-build body[data-view=home] #heroSlides .g-slide .slide { overflow:hidden; }
html.web-build body[data-view=home] #heroSlides .g-slide .slide-body {
  left:0; right:0; bottom:0; box-sizing:border-box; min-width:0;
  padding:14px 17px 20px!important;
}
html.web-build body[data-view=home] #heroSlides .g-slide .slide-body h3 {
  margin:0 0 7px!important;
  font-size:clamp(15px,7.1cqi,22px)!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
  -webkit-line-clamp:3!important;
  overflow-wrap:anywhere;
}
html.web-build body[data-view=home] #heroSlides .g-slide .slide.title-long .slide-body h3 {
  font-size:clamp(14px,6.25cqi,19px)!important;
  line-height:1.1!important;
}
html.web-build body[data-view=home] #heroSlides .g-slide .slide.title-very-long .slide-body h3 {
  font-size:clamp(13px,5.55cqi,17px)!important;
  line-height:1.12!important;
  -webkit-line-clamp:4!important;
}
html.web-build body[data-view=home] #heroSlides .g-slide .slide-place {
  width:100%; min-width:0; font-size:clamp(10.5px,4.15cqi,12.5px)!important; line-height:1.2!important;
}
html.web-build body[data-view=home] #heroSlides .g-slide .slide-place b {
  white-space:normal!important; overflow-wrap:anywhere; -webkit-line-clamp:2!important;
}
html.web-build body[data-view=home] #heroSlides .g-slide .slide.place-long .slide-place { font-size:clamp(10px,3.8cqi,11.5px)!important; }
html.web-build body[data-view=home] #heroSlides .g-slide .slide-top {
  gap:6px; max-width:calc(100% - 36px); align-items:flex-start;
}
html.web-build body[data-view=home] #heroSlides .g-slide .slide-top>.slide-when {
  min-width:0; max-width:calc(100% - 38px)!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:clamp(9.5px,4cqi,12px)!important;
}

/* v40: the dev note a size larger */
html.web-build .dev-note { font-size: 16px; padding: 10px 20px; gap: 11px; }
html.web-build .dev-dot { width: 10px; height: 10px; }
@media (min-width: 1024px) { html.web-build .dev-note { font-size: 18px; padding: 11px 24px; margin-top: 16px; } }
@media (max-width: 480px) { html.web-build .dev-note { font-size: 15px; padding: 10px 15px; } }

/* v42: the round guide button is gone everywhere (floating button and dialog headers) */
#chatToggle,.chat-toggle,.dlg-wizard{display:none!important}

/* v44: optional login – «Logg inn» in the header, «Mine notater» for signed-in visitors */
.account-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; margin-right: 6px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--dream-lilac, #a88cff) 45%, var(--border, transparent)); background: color-mix(in srgb, var(--dream-lilac, #a88cff) 12%, transparent);
  color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .2s, transform .15s; flex-shrink: 0; }
.account-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.account-btn:hover { background: color-mix(in srgb, var(--dream-lilac, #a88cff) 22%, transparent); }
.account-btn:active { transform: scale(.97); }
.account-btn.signed-in { border-color: transparent; background: var(--dream-lilac, #a88cff); color: #16121f; }
.account-btn[hidden] { display: none !important; }
@media (max-width: 420px) { .account-btn { padding: 0 12px 0 10px; font-size: 13px; } }
@media (max-width: 340px) { .account-btn span { display: none; } .account-btn { width: 40px; padding: 0; justify-content: center; } }

.account-dialog { max-width: 460px; }
.account-lead { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin: 4px 0 14px; }
.account-msg { margin: 0 0 12px; padding: 11px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.account-msg.info { background: color-mix(in srgb, #5b8cff 16%, transparent); }
.account-msg.error { background: color-mix(in srgb, #ef4444 16%, transparent); }
.account-msg.success { background: color-mix(in srgb, #34d399 16%, transparent); }
.account-tabs { display: flex; gap: 6px; padding: 4px; margin-bottom: 14px; border-radius: 14px; background: var(--soft); }
.account-tabs button { flex: 1; height: 40px; border-radius: 11px; font-weight: 750; color: var(--muted); }
.account-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 10px -4px rgba(0,0,0,.35); }
.account-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.account-form label { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 6px; }
.account-form label small { font-weight: 500; }
.account-form input, .account-form textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--soft); color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.4; }
.account-form input:focus, .account-form textarea:focus { outline: 2px solid var(--dream-lilac, #a88cff); outline-offset: 1px; }
.account-form textarea { resize: vertical; min-height: 80px; }
.account-form > button { margin-top: 10px; }
.account-form > .account-forgot { align-self: center; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.account-who { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 16px; font-size: 14px; color: var(--muted); }
.account-who b { color: var(--ink); word-break: break-all; }
.account-h { margin: 0 0 8px; font-size: 17px; }
.account-notes { list-style: none; margin: 0; padding: 0; }
.account-note { padding: 12px 0; border-top: 1px solid var(--border); }
.account-note-text { margin: 0 0 4px; white-space: pre-wrap; word-wrap: break-word; line-height: 1.45; }
.account-note-meta { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.account-row { display: flex; gap: 8px; flex-wrap: wrap; }
.account-row button { margin: 0; align-self: center; }
.account-row .ghost { height: 36px; font-size: 13.5px; border: 1px solid var(--border); }
.account-row .danger { color: #f87171; }
.account-row .primary { height: 40px; }
.account-row .ghost.danger { margin: 0 !important; height: 36px; width: auto; }
.account-page-link { display:flex; align-items:center; justify-content:center; min-height:46px; margin-bottom:18px; text-decoration:none; }

/* v45: Kategorier – tick categories on/off on Utforsk (left side) */
.map-cats { position: absolute; z-index: 600; left: 14px; top: 14px; width: 248px; max-height: calc(100% - 120px); display: flex; flex-direction: column;
  border-radius: 18px; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.55), inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; color: var(--ink); }
.map-cats-head { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 48px; padding: 0 14px; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.map-cats-head b { font-size: 15px; font-weight: 800; }
.map-cats-head small { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.map-cats-head i { font-style: normal; font-size: 16px; color: var(--muted); transition: transform .25s; }
.map-cats-ico .ico, .map-cats-ico svg { width: 18px; height: 18px; color: var(--dream-lilac, #a88cff); display: block; }
.map-cats.collapsed .map-cats-head i { transform: rotate(-90deg); }
.map-cats.collapsed .map-cats-body { display: none; }
.map-cats-body { overflow-y: auto; padding: 0 8px 10px; scrollbar-width: thin; }
.map-cats-actions { display: flex; gap: 6px; padding: 0 6px 8px; }
.map-cats-actions button { flex: 1; height: 32px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.map-cats-actions button:hover { background: var(--soft); }
.map-cat { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 8px; border-radius: 12px; cursor: pointer; user-select: none; transition: background .15s, opacity .2s; }
.map-cat:hover { background: color-mix(in srgb, var(--c) 12%, transparent); }
.map-cat input { position: absolute; opacity: 0; pointer-events: none; }
.map-cat-ico { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--c); color: #fff; position: relative; transition: background .2s, color .2s; }
.map-cat-ico .ico, .map-cat-ico svg { width: 16px; height: 16px; }
.map-cat-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-cat small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.map-cat::after { content: ''; flex: 0 0 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--c); background: var(--c)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; }
.map-cat.off { opacity: .55; }
.map-cat.off .map-cat-ico { background: transparent; color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }
.map-cat.off::after { background: transparent; }
.map-cat:has(input:focus-visible) { outline: 2px solid var(--dream-lilac, #a88cff); outline-offset: -2px; }
@media (max-width: 767px) {
  .map-cats { left: 10px; top: 10px; width: min(240px, calc(100% - 80px)); max-height: 55%; }
  .map-cats.collapsed { width: auto; }
  .map-cats.collapsed .map-cats-head small { display: none; }
}
@media (min-width: 768px) { .map-cats { top: 70px; max-height: calc(100% - 150px); } }   /* below the Vestfold / Oslo switch */

/* Egen, foreløpig kartseksjon for uavhengige besøkssteder i Vestfold. */
.map-gems-section{margin:9px 5px 2px;padding-top:10px;border-top:1px solid var(--border)}
.map-gems-title{display:flex;align-items:center;gap:8px;width:100%;padding:9px 8px;border:1px solid color-mix(in srgb,#e8a84c 32%,var(--border));border-radius:12px;background:color-mix(in srgb,#e8a84c 7%,transparent);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.map-gems-title>span{display:grid;place-items:center;width:25px;height:25px;border-radius:9px;background:#e8a84c;color:#241604;font-weight:900}.map-gems-title b{font-size:13px}.map-gems-title small{margin-left:auto;color:var(--muted);font-size:11px}.map-gems-title:not(.active){opacity:.62;filter:saturate(.35)}
.map-gems-section>p{margin:7px 7px 8px;color:var(--muted);font-size:11px;line-height:1.35}.map-gem-types[hidden]{display:none}.gem-type{--c:#e8a84c}.gem-type-dot{display:grid;place-items:center;width:22px;font-size:14px}
.gem-pin-wrap{background:none!important;border:0!important}/* Lokale perler: same family as the event pins (gradient body, coloured rim, line icon, soft glow, zoom scaling)
   but a diamond "gem" shape + gold sparkle badge, so they never read as events. */
.gem-pin{--g:#e8a84c;position:relative;display:block;width:42px;height:52px;scale:max(.8,var(--pin-scale,1));transform-origin:50% 90%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.28));transition:scale .25s}
.gem-pin-body{position:absolute;left:6px;top:6px;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;transform:rotate(45deg);
  background:linear-gradient(150deg,#fff 10%,color-mix(in srgb,var(--g) 22%,#fff));border:2px solid color-mix(in srgb,var(--g) 75%,#fff);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--g) 18%,transparent),0 0 14px -2px color-mix(in srgb,var(--g) 60%,transparent)}
.gem-pin-body .ico{transform:rotate(-45deg);width:18px;height:18px;color:color-mix(in srgb,var(--g) 80%,#000)}
.gem-pin::after{content:'';position:absolute;left:50%;top:42px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:color-mix(in srgb,var(--g) 80%,#fff);box-shadow:0 0 6px var(--g)}
.gem-pin-badge{position:absolute;right:-2px;top:-3px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:9.5px;line-height:1;
  color:#3a2600;background:linear-gradient(140deg,#ffe29a,#e8a84c);border:1.5px solid var(--surface)}
:root[data-theme=dark] .gem-pin-body{background:linear-gradient(150deg,#262a31,color-mix(in srgb,var(--g) 35%,#1a1d22));border-color:color-mix(in srgb,var(--g) 70%,#fff)}
:root[data-theme=dark] .gem-pin-body .ico{color:color-mix(in srgb,var(--g) 50%,#fff)}
.gem-pin-wrap:hover .gem-pin{scale:calc(max(.8,var(--pin-scale,1)) * 1.12)}
#map.map-overview .gem-pin-badge{display:none}
.gem-popup{font-family:inherit;color:var(--ink)!important}
.gem-popup .gem-kicker{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,#e8a84c 76%,var(--ink))!important}
.gem-popup h3{margin:5px 0 2px;color:var(--ink)!important;font-size:18px}
.gem-popup p{margin:7px 0;color:var(--ink)!important;line-height:1.4}
.gem-popup .gem-address{margin-top:0;color:var(--muted)!important;font-size:12px;font-weight:650}
.gem-popup .gem-hours{margin:10px 0;padding:8px 10px;border:1px solid color-mix(in srgb,#e8a84c 28%,var(--border));border-radius:9px;background:color-mix(in srgb,#e8a84c 14%,var(--surface));color:var(--ink)!important;font-size:12px;font-weight:800}
.gem-popup .gem-actions{display:flex;gap:7px;margin:10px 0}
.gem-popup .gem-actions a{flex:1;padding:8px;border-radius:9px;background:var(--ink);color:var(--on-ink)!important;text-align:center;text-decoration:none;font-size:12px;font-weight:800}
.gem-popup>small{display:block;color:var(--muted)!important;font-size:10.5px;font-weight:600;line-height:1.4}
/* v46: four regions on Utforsk – keep the switch on one line, also on phones */
html.web-build .map-regions { max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
html.web-build .map-regions::-webkit-scrollbar { display: none; }
html.web-build .map-regions button { flex: 0 0 auto; }
@media (max-width: 767px) { html.web-build .map-regions button { padding-left: 11px; padding-right: 11px; font-size: 13px; } }

/* ===================== Spotlight pins ("Se hit!") on Utforsk =====================
   A few hand-picked big events: soft halo around the venue + a floating poster card.
   Calm on purpose: slow breathing halo, one shine sweep every few seconds, tiny twinkles. */
.bpin.hype { --hype: #ff5e7e; z-index: 50; }
.bpin.hype .bpin-head { isolation: isolate; }
.hype-halo { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: -1; pointer-events: none; }
.hype-halo::before { content: ''; position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hype) 38%, transparent) 0%, color-mix(in srgb, var(--hype) 14%, transparent) 45%, transparent 70%);
  animation: hypeBreath 3.6s ease-in-out infinite; }
.hype-halo i { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--hype) 75%, #fff); opacity: 0; animation: hypeRing 3.6s cubic-bezier(.2, .7, .3, 1) infinite; }
.hype-halo i + i { animation-delay: 1.8s; }
@keyframes hypeBreath { 0%, 100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes hypeRing { 0% { transform: scale(.7); opacity: .75; } 100% { transform: scale(2.1); opacity: 0; } }
html.web-build body[data-view=map] .bpin.hype .bpin-drop { box-shadow: 0 0 0 3px #fff, 0 0 0 6px color-mix(in srgb, var(--hype) 55%, transparent), 0 6px 16px rgba(0, 0, 0, .35); }

/* The poster card floats above the pin */
.hype-card { position: absolute; left: 50%; bottom: calc(100% + 14px); width: 232px; display: block; text-align: left; cursor: pointer;
  border-radius: 16px; background: var(--surface); color: var(--ink); overflow: visible;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hype) 70%, transparent), 0 12px 28px -8px color-mix(in srgb, var(--hype) 55%, rgba(0,0,0,.4)), 0 4px 10px rgba(0, 0, 0, .18);
  transform: translateX(-50%); transform-origin: 50% 100%;
  animation: hypeIn .7s cubic-bezier(.2, 1.3, .4, 1) .25s both, hypeFloat 5s ease-in-out 1s infinite;
  transition: box-shadow .2s, scale .2s; outline: none; font-family: var(--font, inherit); }
.hype-card::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: var(--surface);
  transform: translateX(-50%) rotate(45deg); border-radius: 0 0 3px 0;
  box-shadow: 2px 2px 0 0 color-mix(in srgb, var(--hype) 70%, transparent); }
.hype-card:hover, .hype-card:focus-visible { scale: 1.04; box-shadow: 0 0 0 2.5px var(--hype), 0 16px 34px -8px color-mix(in srgb, var(--hype) 65%, rgba(0,0,0,.4)), 0 4px 10px rgba(0, 0, 0, .2); }
@keyframes hypeIn { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes hypeFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

.hype-img { position: relative; display: block; height: 118px; overflow: hidden; border-radius: 16px 16px 0 0; background: color-mix(in srgb, var(--hype) 30%, #222); }
.leaflet-container .leaflet-marker-pane .hype-img img, .hype-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; animation: hypeZoom 12s ease-in-out infinite alternate; }
@keyframes hypeZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.hype-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-120%); animation: hypeShine 5.5s ease-in-out 1.4s infinite; pointer-events: none; }
@keyframes hypeShine { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }

.hype-body { display: grid; gap: 3px; padding: 9px 12px 11px; }
.hype-tag { display: inline-flex; align-items: center; gap: 5px; justify-self: start; font-style: normal; font-size: 10px; font-weight: 900;
  letter-spacing: .6px; text-transform: uppercase; color: #fff; background: var(--hype); padding: 3px 8px 3px 6px; border-radius: 999px;
  margin-top: -21px; box-shadow: 0 3px 8px color-mix(in srgb, var(--hype) 50%, transparent); position: relative; }
.hype-star { display: inline-block; font-weight: 400; animation: hypeTwinkle 2.4s ease-in-out infinite; }
.hype-title { font-size: 14.5px; line-height: 1.2; font-weight: 850; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hype-meta { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hype-when { color: var(--hype); font-weight: 850; }
:root[data-theme=dark] .hype-when { color: color-mix(in srgb, var(--hype) 60%, #fff); }

/* Small twinkles around the card */
.hype-spark { position: absolute; width: 8px; height: 8px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0 20%, color-mix(in srgb, var(--hype) 80%, #fff) 40%, transparent 70%);
  animation: hypeTwinkle 3s ease-in-out infinite; }
.hype-spark.s1 { top: -6px; right: 14px; animation-delay: .4s; }
.hype-spark.s2 { top: 38px; left: -6px; width: 6px; height: 6px; animation-delay: 1.5s; }
.hype-spark.s3 { top: 70px; right: -5px; width: 7px; height: 7px; animation-delay: 2.3s; }
@keyframes hypeTwinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 45% { opacity: 1; transform: scale(1.15); } 60% { opacity: .8; transform: scale(1); } }
.hype-tag .hype-star { animation-name: hypeStar; }
@keyframes hypeStar { 0%, 100% { opacity: .55; transform: scale(.85) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }

/* Default: a small round poster bubble with a star badge. Hover / keyboard focus / tap expands it into the full card. */
:root { interpolate-size: allow-keywords; }
.hype-card { width: 54px; height: 54px; border-radius: 27px; bottom: calc(100% + 10px);
  transition: width .38s cubic-bezier(.2, .9, .3, 1), height .38s cubic-bezier(.2, .9, .3, 1), border-radius .38s, bottom .3s, box-shadow .2s; }
.hype-card .hype-img { height: 54px; border-radius: 27px; transition: height .38s cubic-bezier(.2, .9, .3, 1), border-radius .38s; }
.hype-card .hype-body { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; transition: opacity .2s, max-height .38s, padding .38s; }
.hype-card .hype-spark.s2, .hype-card .hype-spark.s3 { display: none; }
.hype-card::after { width: 8px; height: 8px; bottom: -4px; transition: width .3s, height .3s, bottom .3s; }
/* Follows the map zoom like the other pins (--pin-scale is set on the marker pane, .58–1); the pin head shrinks too, so pull the bubble down to keep the gap */
.hype-card { scale: var(--pin-scale, 1); bottom: calc(100% + 10px - (1 - var(--pin-scale, 1)) * 34px); transition: width .38s cubic-bezier(.2, .9, .3, 1), height .38s cubic-bezier(.2, .9, .3, 1), border-radius .38s, bottom .3s, box-shadow .2s, scale .25s; }
.hype-card:hover, .hype-card:focus-visible { scale: var(--pin-scale, 1); }
.hype-badge { position: absolute; top: -5px; right: -5px; z-index: 3; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hype); color: #fff; font-size: 11px; line-height: 1; border: 2px solid var(--surface);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--hype) 55%, transparent); transition: opacity .2s, transform .3s; }
.hype-badge b { display: inline-block; animation: hypeStar 2.4s ease-in-out infinite; font-weight: 400; }

.pin-wrap:hover .hype-card, .hype-card:focus-visible, .hype-card.open {
  width: 232px; height: auto; border-radius: 16px; scale: 1; bottom: calc(100% + 14px - (1 - var(--pin-scale, 1)) * 34px); }
.pin-wrap:hover .hype-card .hype-img, .hype-card:focus-visible .hype-img, .hype-card.open .hype-img { height: 118px; border-radius: 16px 16px 0 0; }
.pin-wrap:hover .hype-card .hype-body, .hype-card:focus-visible .hype-body, .hype-card.open .hype-body { opacity: 1; max-height: 120px; overflow: visible; padding-top: 9px; padding-bottom: 11px; transition: opacity .25s .12s, max-height .38s, padding .38s; }
.pin-wrap:hover .hype-card .hype-spark, .hype-card:focus-visible .hype-spark, .hype-card.open .hype-spark { display: block; }
.pin-wrap:hover .hype-card::after, .hype-card:focus-visible::after, .hype-card.open::after { width: 14px; height: 14px; bottom: -7px; }
.pin-wrap:hover .hype-badge, .hype-card:focus-visible .hype-badge, .hype-card.open .hype-badge { opacity: 0; transform: scale(.4); }
.pin-wrap:hover .hype-card { box-shadow: 0 0 0 2.5px var(--hype), 0 16px 34px -8px color-mix(in srgb, var(--hype) 65%, rgba(0,0,0,.4)), 0 4px 10px rgba(0, 0, 0, .2); }
#map.map-overview .hype-halo::before { left: -34px; top: -34px; width: 68px; height: 68px; }

/* Phones: a bit more compact */
@media (max-width: 560px) {
  .hype-card.open { width: 196px; }
  .hype-card.open .hype-img { height: 96px; }
  .hype-title { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hype-card, .hype-img img, .hype-shine, .hype-spark, .hype-star, .hype-badge b, .hype-halo::before, .hype-halo i { animation: none !important; }
  .hype-card { opacity: 1; } .hype-halo i { opacity: .35; transform: scale(1.3); }
}
:root.reduce-motion .hype-card, :root.reduce-motion .hype-img img, :root.reduce-motion .hype-shine, :root.reduce-motion .hype-spark,
:root.reduce-motion .hype-star, :root.reduce-motion .hype-badge b, :root.reduce-motion .hype-halo::before, :root.reduce-motion .hype-halo i { animation: none !important; }
:root.reduce-motion .hype-halo i { opacity: .35; transform: scale(1.3); }

/* ===================== Utforsk: search on the map ===================== */
.map-search { position: absolute; z-index: 950; top: 14px; right: 64px; width: min(380px, calc(100% - 640px)); min-width: 280px; }
.map-search-field { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 6px 0 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 95%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent), 0 14px 34px -16px rgba(0, 0, 0, .8); transition: box-shadow .2s; }
.map-search-field:focus-within { box-shadow: inset 0 0 0 2px var(--dream-lilac, #a88cff), 0 14px 34px -14px color-mix(in srgb, var(--dream-lilac, #a88cff) 55%, rgba(0,0,0,.6)); }
.map-search-ico { font-size: 19px; line-height: 1; color: var(--muted); transform: translateY(-1px); }
.map-search-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; }
.map-search-field input::placeholder { color: var(--muted); font-weight: 500; }
.map-search-field input::-webkit-search-cancel-button { display: none; }
.map-search-count { flex: 0 0 auto; font-size: 11.5px; font-weight: 850; color: #fff; padding: 4px 9px; border-radius: 999px; background: linear-gradient(100deg, #e0719d, #8f76e0 60%, #5aaecf); }
.map-search-count:empty { display: none; }
.map-search-clear { flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.map-search-panel { margin-top: 8px; max-height: min(60vh, 520px); overflow-y: auto; padding: 8px; border-radius: 18px; background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 22px 44px -18px rgba(0, 0, 0, .75); animation: msIn .18s ease-out; }
@keyframes msIn { from { opacity: 0; transform: translateY(-6px); } }
.ms-understood { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 4px 6px 8px; font-size: 11px; color: var(--muted); }
.ms-understood b { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--dream-lilac, #a88cff) 16%, var(--surface)); color: var(--ink); font-weight: 750; }
.ms-group { padding: 8px 8px 4px; font-size: 10.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ms-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 7px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.ms-item:hover, .ms-item:focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); outline: none; }
.ms-dot { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--c) 22%, var(--surface)); color: var(--c); font-size: 14px; }
.ms-dot .ico { width: 16px; height: 16px; }
.ms-copy { display: grid; gap: 1px; min-width: 0; }
.ms-copy strong { font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-copy small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-gem .ms-copy strong { color: color-mix(in srgb, #e8a84c 70%, var(--ink)); }
.ms-more { width: 100%; margin-top: 6px; min-height: 38px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--dream-lilac, #a88cff) 14%, var(--surface)); color: var(--ink); font-weight: 800; font-size: 12.5px; cursor: pointer; }
.ms-note, .ms-empty { margin: 4px 8px 8px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.ms-examples { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 6px; }
.ms-examples button { min-height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--dream-lilac, #a88cff) 13%, var(--surface)); color: var(--ink); font-size: 11.5px; font-weight: 750; cursor: pointer; }
@media (max-width: 1180px) and (min-width: 1024px) { .map-search { width: 300px; min-width: 0; } }
@media (max-width: 1023px) {
  .map-search { left: 14px; right: 64px; width: auto; min-width: 0; }
  .map-cats { top: 70px; }
}
@media (max-width: 767px) {
  .map-search { top: 10px; left: 10px; right: 56px; }
  .map-search-field { height: 42px; }
  .map-cats { top: 62px; }
  .map-search-panel { max-height: 52vh; }
}
.map-search-field input:focus, .map-search-field input:focus-visible { outline: none !important; box-shadow: none !important; }

/* Utforsk search: rich event cards (picture, when, where, price) – soonest first */
.map-search { width: min(420px, calc(100% - 640px)); }
.ms-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; margin: 2px 0; border-radius: 14px; transition: background .15s; }
.ms-card:hover, .ms-card:focus-within { background: color-mix(in srgb, var(--c) 10%, transparent); }
.ms-card-main { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 11px; align-items: center; padding: 7px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; border-radius: 14px; min-width: 0; }
.ms-card-main:focus-visible { outline: 2px solid var(--c); outline-offset: -2px; }
.ms-thumb { position: relative; width: 86px; height: 64px; border-radius: 11px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 55%, #1a1d22), color-mix(in srgb, var(--c) 22%, #1a1d22)); color: #fff; }
.ms-thumb-art .ico { width: 24px; height: 24px; opacity: .85; }
.leaflet-container .ms-thumb img, .ms-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .35s; }
.ms-thumb img.loaded { opacity: 1; }
.ms-card-copy { display: grid; gap: 2px; min-width: 0; }
.ms-card-copy strong { font-size: 13.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-when { font-size: 11px; font-weight: 850; color: color-mix(in srgb, var(--c) 70%, var(--ink)); }
.ms-where { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.ms-flag { font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--muted); }
.ms-flag.cat { background: color-mix(in srgb, var(--c) 18%, transparent); color: color-mix(in srgb, var(--c) 65%, var(--ink)); }
.ms-flag.sold { background: color-mix(in srgb, #e5484d 20%, transparent); color: #e5484d; }
.ms-flag.few { background: color-mix(in srgb, #f5a524 22%, transparent); color: #c98200; }
.ms-card-map { align-self: center; width: 36px; height: 36px; margin-right: 6px; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); cursor: pointer; }
.ms-card-map:hover, .ms-card-map:focus-visible { background: var(--c); color: #fff; outline: none; }
.ms-card-map .ico { width: 17px; height: 17px; }
@media (max-width: 1180px) and (min-width: 1024px) { .map-search { width: 340px; } }
@media (max-width: 1023px) { .map-search { width: auto; } }
@media (max-width: 767px) { .ms-card-main { grid-template-columns: 72px minmax(0, 1fr); } .ms-thumb { width: 72px; height: 56px; } }