/* stil.css — all visuell styling. Mobil-først. */


/* === BASIS === */

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-tekst);
  font-size: 1rem;
  line-height: 1.5;
  min-height: 100dvh;
}


/* === LYS-OVERFLATE-SCOPE ===
   Kort, forsidekort og modal har lys kortflate mot appens mørke bakgrunn
   (se --flate-1 i variabler.css). De tre selectorene under omdefinerer
   --paper/--graa/--flate-2/--sekundaer LOKALT til sine lys-tilpassede
   motstykker (regnet ut i variabler.css) — alt av tittel, meta, tid,
   pris og knapper inni arver disse via vanlig CSS-cascading, så teksten
   blir automatisk mørk-på-lys uten at hver enkelt regel må overstyres.

   NB: "color: var(--paper)" gjentas her med vilje (samme mønster som
   body). Elementer som .kort-tittel/.modal-tittel setter ingen egen
   color — de arver den. CSS arver den FERDIG UTREGNEDE fargen, ikke en
   levende kobling til variabelen, så uten denne linja ville de fortsatt
   arvet body sin lyse tekstfarge gjennom kortet. Denne linja gjør at
   arven starter på nytt her, med riktig mørk verdi. */
.kort,
.modal-container,
.utvalg-kort {
  --paper:     var(--tekst-kort);
  --graa:      var(--graa-kort);
  --flate-2:   var(--flate-2-kort);
  --sekundaer: var(--sekundaer-pa-lys);
  color: var(--paper);
}


/* === TOPBAR (sticky: header + filtre) ===
   Én felles sticky container gjør at begge elementer
   klistrer seg til toppen som én blokk ved scrolling. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ink);
  box-shadow: 0 1px 0 var(--flate-2);
  padding-top: env(safe-area-inset-top);
}

/* Sentrert innhold-wrapper brukt av både header og filtre */
.topbar-innhold {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gap-m);
  padding-left: max(var(--gap-m), env(safe-area-inset-left));
  padding-right: max(var(--gap-m), env(safe-area-inset-right));
}


/* === TOPPTEKST === */

.topptekst {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding: var(--gap-l) 0 var(--gap-s);
}

/* Logo-lockup: merket (symbolet) først, så ordmerket — begge PNG med
   den mørke fyllfargen byttet til papir/off-white ("-lys"-variantene,
   se bilder/), siden de sitter på den mørke topbaren. Naturlig-fargede
   versjoner (mørk på transparent) brukes til favicon og OG-bildet,
   der bakgrunnen er lys. */
.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-s);
}

.logo-merke {
  display: block;
  height: 34px;
  width: auto;
}

.logo-ordmerke {
  display: block;
  height: 29px;
  width: auto;
}

.tagline {
  flex: 1;
  font-size: 0.8rem;
  color: var(--graa);
}

.lagret-knapp {
  padding: var(--gap-s);
  border-radius: var(--radius-s);
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lagret-knapp:hover,
.lagret-knapp.aktiv {
  background: var(--flate-2);
}

.følger-topbar-knapp {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--flate-2);
  color: var(--graa);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}

.følger-topbar-knapp:hover {
  border-color: var(--paper);
  color: var(--paper);
}

.følger-topbar-knapp.aktiv {
  border-color: var(--aksent);
  color: var(--aksent);
  background: rgba(255, 77, 94, 0.08);
}


/* === FILTRE === */

.filtre {
  padding: var(--gap-s) 0 var(--gap-m);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.filter-gruppe {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-etikett {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--graa);
}

.filter-chips {
  display: flex;
  gap: var(--gap-s);
  flex-wrap: wrap;
}

/* Bunnraden: Nærhets-chip + Nullstill på samme linje */
.filter-bunn-rad {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  margin-top: 2px;
}

.chip {
  padding: 0.3rem 0.8rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--flate-2);
  border-radius: 100px;
  font-size: 0.8rem;
  color: var(--graa);
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  outline-offset: 2px;
}

.chip:hover {
  border-color: var(--graa);
  color: var(--paper);
}

.chip.aktiv {
  background: var(--aksent);
  border-color: var(--aksent);
  color: var(--aksent-kontrast);
}

.nullstill-knapp {
  font-size: 0.8rem;
  color: var(--aksent);
  border: none;
  background: none;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-family: var(--font-tekst);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s;
}

.nullstill-knapp:hover {
  opacity: 0.75;
}


/* === HOVEDDEL — to-kolonne-layout ===
   Mobil-default: én kolonne, sidestolpe over feedkolonne.
   Desktop (≥900px): flex-rad, sidestolpe sticky til venstre. */

.hoveddel {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gap-m);
  padding-left: max(var(--gap-m), env(safe-area-inset-left));
  padding-right: max(var(--gap-m), env(safe-area-inset-right));
}

/* Sidestolpe: filtre. Ingen spesialbehandling på mobil — flyter normalt over feeden. */
.sidestolpe {
  padding-top: var(--gap-m);
}

/* Feedkolonne: treff-teller + feed */
.feedkolonne {
  /* Arver bredde fra hoveddel på mobil */
}

@media (min-width: 768px) {
  .topbar-innhold {
    max-width: 1020px;
    padding: 0 var(--gap-xl);
    padding-left: max(var(--gap-xl), env(safe-area-inset-left));
    padding-right: max(var(--gap-xl), env(safe-area-inset-right));
  }

  .hoveddel {
    max-width: 1020px;
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xl);
    padding: 0 var(--gap-xl);
    padding-left: max(var(--gap-xl), env(safe-area-inset-left));
    padding-right: max(var(--gap-xl), env(safe-area-inset-right));
  }

  .sidestolpe {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--topbar-h) + env(safe-area-inset-top));
    padding-top: var(--gap-l);
  }

  .feedkolonne {
    flex: 1;
    min-width: 0;
  }
}


/* === TREFF-LINJE === */

.treff-linje {
  padding: var(--gap-m) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--graa);
  min-height: 2rem;
}

.tilbake-knapp {
  color: var(--aksent);
  font-size: 0.875rem;
}

.skjult {
  display: none !important;
}


/* === UKE-NAVIGASJON === */

.uke-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
  padding: var(--gap-s) 0 0;
  font-size: 0.8rem;
}

.uke-knapp {
  color: var(--aksent);
  background: none;
  border: none;
  padding: 0.3rem 0.2rem;
  font-family: var(--font-tekst);
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.uke-knapp:hover {
  opacity: 0.75;
}

.uke-knapp:last-child {
  margin-left: auto;
}

.uke-label {
  color: var(--graa);
  font-weight: 600;
  text-align: center;
  flex: 1;
}


/* === DAG-SEKSJON === */

.dag-gruppe {
  margin-top: var(--gap-l);
}

.dag-gruppe:first-child {
  margin-top: var(--gap-m);
}

.dag-overskrift {
  font-family: var(--font-tittel);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--graa);
  padding-bottom: var(--gap-s);
  border-bottom: 1px solid var(--flate-2);
  margin-bottom: var(--gap-m);
}

/* "I dag" fremheves */
.dag-overskrift:first-letter {
  /* Stor I → ingen spesialbehandling, brukes bare for "I dag" */
}

.dag-gruppe:first-child .dag-overskrift {
  color: var(--paper);
}

.dag-kort {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}


/* === FEED === */

.feed {
  padding-bottom: calc(var(--gap-xl) + env(safe-area-inset-bottom));
}

.tom-feed,
.laster {
  text-align: center;
  color: var(--graa);
  padding: var(--gap-xl) var(--gap-m);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: var(--gap-l);
}


/* === FØLGER-VISNING === */

.følger-seksjon {
  margin-top: var(--gap-xl);
}

.følger-seksjon:first-child {
  margin-top: var(--gap-m);
}

.følger-seksjon-header {
  display: flex;
  align-items: baseline;
  gap: var(--gap-m);
  padding-bottom: var(--gap-s);
  border-bottom: 1px solid var(--flate-2);
  margin-bottom: var(--gap-m);
}

.følger-seksjon-tittel {
  font-family: var(--font-tittel);
  font-size: 1rem;
  font-weight: 600;
  color: var(--paper);
}

.avfølg-knapp {
  font-size: 0.72rem;
  color: var(--graa);
  margin-left: auto;
  transition: color 0.15s;
}

.avfølg-knapp:hover {
  color: var(--aksent);
}

.følger-tom {
  font-size: 0.875rem;
  color: var(--graa);
  padding: var(--gap-m) 0;
  opacity: 0.7;
}


/* Lokal-lagring-info — vises kun i lagret-visning */
.lagret-info {
  font-size: 0.78rem;
  color: var(--graa);
  padding: var(--gap-s) 0 0;
  opacity: 0.7;
}


/* === KORT === */

.kort {
  background: var(--flate-1);
  border-radius: var(--radius-l);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.kort:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.kort:active {
  transform: translateY(0);
}

.kort-bilde-wrapper {
  position: relative;
  /* Litt flatere enn 16:9 — gjør at flere kort vises */
  aspect-ratio: 16 / 7;
  overflow: hidden;
}

.kort-bilde {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.kort:hover .kort-bilde {
  transform: scale(1.03);
}

.kort-bilde-placeholder {
  width: 100%;
  height: 100%;
  background: var(--flate-2);
}

.kort-kategori {
  position: absolute;
  top: var(--gap-s);
  left: var(--gap-s);
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Badge-teksten er samme hvit/papir-farge for alle fire kategorier (ingen
   fargekoding lenger — kategorien identifiseres av teksten/etiketten selv).
   Bakgrunnen er --ink — den samme mørke fargen som resten av nettsidens
   bakgrunn (topbar, forside, sidestolpe) — IKKE en fast/annen gråtone, og
   ALDRI en lys/transparent bakgrunn, som gjorde badgen nær usynlig oppå
   lyse bilder. Fortsatt solid og ugjennomsiktig, så teksten er alltid lesbar
   uansett hvilket bilde ligger bak. */
.kategori-musikk,
.kategori-mat,
.kategori-klubb,
.kategori-pafunn {
  background: var(--ink);
  color: #F4F1EA;
}

/* En tynn hvit stripe der bildet møter tekstflaten (eller øverst på kort
   uten bilde — samme element, samme plassering først i kortet). Samme
   hvitfarge som badge-teksten — ikke lenger fargekodet per kategori. */
.kort-stripe { height: 4px; background: #F4F1EA; }

/* === GJENTAS-BADGE (ribbon øvre høyre hjørne) ===
   Samme prinsipp som kategori-badgen: solid --merke-bg, tydelig farget tekst —
   ikke en lys aksentflate som kan bli utydelig mot enkelte bilder/paletter. */
.gjentas-badge {
  position: absolute;
  top: 45px;
  right: -40px;
  width: 180px;
  padding: 3px 0;
  transform: rotate(45deg);
  text-align: center;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  background: var(--aksent);
  color: var(--aksent-kontrast);
  pointer-events: none;
}

/* === BINDERS-IKON (lagre) === */

/* Ikke lagret: dempet hvit */
.binders-ikon {
  display: block;
  color: rgba(244, 241, 234, 0.55);
  transition: color 0.15s;
  flex-shrink: 0;
}

/* Lagret: korall */
.lagret .binders-ikon {
  color: var(--aksent);
}

/* Pop-animasjon når man lagrer */
@keyframes binders-pop {
  0%   { transform: scale(1)    rotate(0deg);  }
  30%  { transform: scale(1.35) rotate(-8deg); }
  60%  { transform: scale(0.88) rotate(3deg);  }
  100% { transform: scale(1)    rotate(0deg);  }
}

.binders-pop .binders-ikon {
  animation: binders-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Kort-knapp */
.hjerte-knapp {
  position: absolute;
  top: var(--gap-s);
  right: var(--gap-s);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 19, 24, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
  outline-offset: 2px;
}

.hjerte-knapp:hover {
  transform: scale(1.1);
  background: rgba(20, 19, 24, 0.85);
}

.hjerte-knapp:hover .binders-ikon {
  color: var(--paper);
}

/* Topbar-knapp */
.lagret-knapp .binders-ikon {
  color: var(--graa);
  transition: color 0.15s;
}

.lagret-knapp:hover .binders-ikon {
  color: var(--paper);
}

.lagret-knapp.aktiv .binders-ikon {
  color: var(--aksent);
}

/* Modal lagre-knapp */
.modal-hjerte {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.modal-hjerte .binders-ikon {
  color: var(--graa);
  transition: color 0.15s;
}

.modal-hjerte.lagret .binders-ikon {
  /* --aksent-pa-lys, ikke --aksent: dette ikonet står direkte på den lyse
     kortflaten (modal-container), og trenger den mørknede on-lys-varianten
     for å lese — se KRAV i variabler.css. */
  color: var(--aksent-pa-lys);
}

.kort-innhold {
  padding: var(--gap-m);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.kort-tittel {
  font-family: var(--font-tittel);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
}

.kort-meta {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  font-size: 0.85rem;
  color: var(--graa);
}

.avstand::before {
  content: '· ';
}

.avstand {
  color: var(--sekundaer);
}

.kort-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.tid {
  color: var(--graa);
}

.pris-gratis {
  color: var(--sekundaer);
  font-weight: 500;
}


/* === MODAL === */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 19, 24, 0.85);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal.aktiv {
  opacity: 1;
  pointer-events: all;
}

.modal-container {
  background: var(--flate-1);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  position: relative;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.modal.aktiv .modal-container {
  transform: translateY(0);
}

.modal-lukk {
  position: absolute;
  top: var(--gap-m);
  right: var(--gap-m);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--flate-2);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background 0.15s;
}

.modal-lukk:hover {
  background: var(--graa);
}

.modal-bilde {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
}

.modal-body {
  padding: var(--gap-l);
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.modal-kategori {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.modal-tittel {
  font-family: var(--font-tittel);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.modal-sted-rad {
  display: flex;
  align-items: baseline;
  gap: var(--gap-s);
  flex-wrap: wrap;
}

.modal-sted {
  font-size: 0.9rem;
  color: var(--graa);
}

.følg-knapp {
  font-size: 0.72rem;
  padding: 2px 10px;
  border-radius: 100px;
  border: 1px solid var(--flate-2);
  color: var(--graa);
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}

.følg-knapp:hover {
  border-color: var(--paper);
  color: var(--paper);
}

.følg-knapp.fulgt {
  /* --aksent-pa-lys: knappen står direkte på den lyse modal-kortflaten */
  border-color: var(--aksent-pa-lys);
  color: var(--aksent-pa-lys);
}

/* Faktarad: Type / Tid / Pris / Avstand */
.modal-faktarad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-m) var(--gap-l);
  padding: var(--gap-m);
  background: var(--flate-2);
  border-radius: var(--radius-m);
}

.faktarad-felt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.faktarad-etikett {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--graa);
}

.faktarad-verdi {
  font-size: 0.9rem;
  font-weight: 500;
}

.modal-beskrivelse {
  font-size: 1rem;
  line-height: 1.65;
}

.modal-handlinger {
  display: flex;
  gap: var(--gap-s);
}

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-m);
  font-size: 0.9rem;
  font-weight: 500;
  transition: opacity 0.15s, transform 0.1s;
}

.knapp:hover  { opacity: 0.85; }
.knapp:active { transform: scale(0.98); }

.knapp-primaer {
  background: var(--aksent);
  color: var(--aksent-kontrast);
  flex: 1;
}

.knapp-sekundaer {
  background: var(--flate-2);
  color: var(--paper);
}

.knapp-ghost {
  border: 1.5px solid var(--flate-2);
  color: var(--graa);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-m);
  font-size: 0.875rem;
  transition: border-color 0.15s, color 0.15s;
}

.knapp-ghost:hover {
  border-color: var(--graa);
  color: var(--paper);
}

.modal-bunn {
  display: flex;
  gap: var(--gap-s);
  padding-bottom: calc(var(--gap-m) + env(safe-area-inset-bottom));
}

body.modal-aapen {
  overflow: hidden;
}


/* === MODAL DESKTOP === */

@media (min-width: 640px) {
  .modal {
    align-items: center;
  }

  .modal-container {
    max-width: 520px;
    border-radius: var(--radius-l);
    margin: auto;
  }

  .modal-bilde {
    border-radius: var(--radius-l) var(--radius-l) 0 0;
  }
}


/* === LANDSCAPE TELEFON ===
   Reduser topbar-høyde når skjermen er lav og bred (f.eks. iPhone i sidestilt). */

@media (orientation: landscape) and (max-height: 500px) {
  .topptekst {
    padding-top: var(--gap-s);
    padding-bottom: var(--gap-xs, 0.25rem);
  }

  .filtre {
    padding-bottom: var(--gap-s);
  }
}


/* === KURATORTEKST === */

.modal-kuratortekst {
  font-size: 0.875rem;
  color: var(--graa);
  font-style: italic;
  line-height: 1.55;
}


/* === TILLITSSIGNALER === */

.modal-tillit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-s);
  padding-top: var(--gap-s);
  border-top: 1px solid var(--flate-2);
  font-size: 0.8rem;
}

.tillit-verifisert {
  color: var(--graa);
}

.tillit-feedback {
  color: var(--graa);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tillit-feedback:hover {
  color: var(--paper);
}


/* === BILDE-PLACEHOLDER MED KATEGORIIDENTITET === */

.kort-bilde-placeholder.kategori-musikk  { background: rgba(200, 255, 77, 0.08); }
.kort-bilde-placeholder.kategori-mat     { background: rgba(255, 77, 94, 0.08);  }
.kort-bilde-placeholder.kategori-klubb   { background: rgba(244, 241, 234, 0.06); }
.kort-bilde-placeholder.kategori-pafunn  { background: rgba(180, 77, 255, 0.08); }


/* === FILTER BUNNRAD (Vis avstand + Nullstill) === */

.filter-bunn-rad {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  margin-top: var(--gap-s);
  flex-wrap: wrap;
}

#vis-avstand.aktiv {
  background: color-mix(in srgb, var(--sekundaer) 15%, transparent);
  border-color: var(--sekundaer);
  color: var(--sekundaer);
}

#vis-avstand:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* === POSISJONSSTATUS === */

.posisjon-status {
  font-size: 0.8rem;
  margin-top: var(--gap-s);
  line-height: 1.4;
}

.posisjon-info { color: var(--graa); }
.posisjon-feil { color: var(--aksent); }


/* === SORTERINGSKONTROLL ===
   Plasseres i .treff-linje — legg til flex-wrap for mobilstøtte. */

.treff-linje {
  flex-wrap: wrap;
  gap: var(--gap-s);
}

.sortering-kontroll {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.sortering-label {
  font-size: 0.8rem;
  color: var(--graa);
  white-space: nowrap;
  user-select: none;
}

.sortering-select {
  font-family: var(--font-tekst);
  font-size: 0.8rem;
  color: var(--paper);
  background: var(--flate-2);
  border: 1.5px solid var(--flate-2);
  border-radius: var(--radius-s);
  padding: 0.25rem 1.6rem 0.25rem 0.5rem;
  cursor: pointer;
  outline-offset: 2px;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239994A2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 8px 5px;
}

.sortering-select:hover {
  border-color: var(--graa);
}

.sortering-select:focus-visible {
  outline: 2px solid var(--aksent);
  outline-offset: 2px;
  border-color: var(--graa);
}

@media (max-width: 380px) {
  .sortering-kontroll {
    margin-left: 0;
    width: 100%;
  }
}


/* === FORSIDE === */

.forside {
  border-bottom: 1px solid var(--flate-2);
  padding: var(--gap-xl) 0;
}

.forside-innhold {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gap-m);
  padding-left:  max(var(--gap-m), env(safe-area-inset-left));
  padding-right: max(var(--gap-m), env(safe-area-inset-right));
}

.forside-tittel {
  font-family: var(--font-tittel);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

.forside-undertittel {
  color: var(--graa);
  font-size: 1rem;
  margin-bottom: var(--gap-xl);
}

.forside-utvalg {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  margin-bottom: var(--gap-l);
}

/* Utvalg-kort: litt større og åpnere enn vanlig feed-kort */

.utvalg-kort {
  background: var(--flate-1);
  border-radius: var(--radius-l);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.utvalg-kort:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.utvalg-bilde-wrapper {
  position: relative;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  background: var(--flate-2);
}

.utvalg-bilde {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.utvalg-kort:hover .utvalg-bilde {
  transform: scale(1.03);
}

.utvalg-badge-rad {
  position: absolute;
  top: var(--gap-s);
  left: var(--gap-s);
  display: flex;
  gap: var(--gap-s);
  align-items: center;
  flex-wrap: wrap;
}

/* Gjenbruker .kategori-* klassene som allerede er definert */
.utvalg-badge {
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.utvalg-fremhevet-badge {
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--ink);
  color: #ffd700;
}

.utvalg-innhold {
  padding: var(--gap-m) var(--gap-l);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.utvalg-tittel {
  font-family: var(--font-tittel);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}

.utvalg-meta {
  font-size: 0.85rem;
  color: var(--graa);
}

.utvalg-kuratortekst {
  font-size: 0.9rem;
  color: var(--sekundaer);
  font-style: italic;
  line-height: 1.55;
  margin-top: 0.15rem;
}

.se-alt-knapp {
  width: 100%;
  padding: var(--gap-m);
  background: var(--aksent);
  border: 1.5px solid var(--aksent);
  border-radius: var(--radius-m);
  color: var(--aksent-kontrast);
  font-family: var(--font-tekst);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}

.se-alt-knapp:hover {
  opacity: 0.85;
}

/* Flytende pill-versjon — alltid position:fixed, synlighet styres av JS.
   Samme grønne aksentflate som knappen over — solid bakgrunn trenger
   ikke lenger frostet glass-effekten fra den gamle mørke/transparente pillen. */
.se-alt-flytende {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;

  /* Pill-stil: mindre og mer kompakt enn den naturlige knappen */
  white-space: nowrap;
  padding: 0.55rem 1.4rem;
  border-radius: 100px;
  border: 1.5px solid var(--aksent);
  background: var(--aksent);
  color: var(--aksent-kontrast);
  font-family: var(--font-tekst);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

.se-alt-flytende.vis {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.se-alt-flytende:hover {
  opacity: 0.85;
}

@media (min-width: 768px) {
  .forside {
    padding: var(--gap-xl) 0;
  }

  .forside-innhold {
    max-width: 1020px;
    padding: 0 var(--gap-xl);
    padding-left:  max(var(--gap-xl), env(safe-area-inset-left));
    padding-right: max(var(--gap-xl), env(safe-area-inset-right));
  }

  .forside-tittel {
    font-size: 2.5rem;
  }
}


/* === SAMTYKKE-STRIPE === */

.samtykke-stripe {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  padding: var(--gap-s) var(--gap-m);
  padding-bottom: calc(var(--gap-s) + env(safe-area-inset-bottom));
  background: var(--flate-2);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  color: var(--graa);
}

.samtykke-knapp {
  font-family: var(--font-tekst);
  font-size: 0.8rem;
  background: var(--aksent);
  color: var(--aksent-kontrast);
  padding: 0.3rem 1rem;
  border-radius: var(--radius-s);
  white-space: nowrap;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.samtykke-knapp:hover {
  opacity: 0.85;
}


/* === BUNN-NAV — kun mobil (< 900px) ===
   Fast plassert nederst, som en native app-tab-bar.
   Skjult på desktop; der gjelder eksisterende navigering uendret. */

.bunn-nav {
  display: none;
}

@media (max-width: 899px) {
  body {
    padding-bottom: calc(var(--bunn-nav-h) + env(safe-area-inset-bottom));
  }

  .bunn-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    height: var(--bunn-nav-h);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--ink);
    border-top: 1px solid var(--flate-2);
  }

  .bunn-nav-knapp {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--graa);
    font-family: var(--font-tekst);
    font-size: 0.65rem;
    font-weight: 500;
    transition: color 0.15s;
  }

  .bunn-nav-ikon {
    width: 22px;
    height: 22px;
  }

  .bunn-nav-knapp.aktiv {
    color: var(--aksent);
  }

  /* Løft flytende "se alt"-pill og samtykke-stripe over bunn-nav */
  .se-alt-flytende {
    bottom: calc(var(--bunn-nav-h) + 0.75rem + env(safe-area-inset-bottom));
  }

  .samtykke-stripe {
    bottom: var(--bunn-nav-h);
    padding-bottom: var(--gap-s);
  }
}

@media (max-width: 899px) and (orientation: landscape) and (max-height: 500px) {
  .bunn-nav-knapp span {
    display: none;
  }
}