/* ==========================================================================
   Honeymoon — stylesheet
   Apple-inspired: system font stack, generous whitespace, translucent
   materials, subtle depth & spring motion, full light/dark support.
   ========================================================================== */

/* ---- Fonts (DM Sans, bundled locally so the app works offline) -----------
   Variabel skrift: ett woff2 dekker hele vekt-aksen 100–900, så tilpasning
   av tykkelse (ned til 100) gir reell tynn/tykk tekst. Italic beholdes som
   egen statisk fil. ------------------------------------------------------- */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/dm-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/dm-sans-latin-400-italic.woff2") format("woff2"); }

/* ---- Design tokens ------------------------------------------------------- */
:root {
  color-scheme: light dark;

  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
          Roboto, Helvetica, Arial, sans-serif;

  /* Light palette (meal-planner inspired) */
  --bg: #e8e8e8;
  --bg-grad-top: #ededed;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-solid: #ffffff;
  --surface-2: #f1f1f1;
  --fill-quaternary: rgba(118, 118, 128, 0.08);
  --fill-tertiary: rgba(118, 118, 128, 0.12);
  --separator: rgba(60, 60, 67, 0.12);
  --separator-strong: rgba(60, 60, 67, 0.22);

  --label: #1d1d1f;
  --label-2: #3c3c43cc;     /* secondary */
  --label-3: #3c3c4399;     /* tertiary  */
  --label-4: #3c3c4366;

  --accent: #b658a6;            /* magenta — primary accent */
  --accent-press: #9c4a8f;
  --accent-light: #d07ac2;      /* gradient top */
  --accent-rgb: 182, 88, 166;
  --display-yellow: #e2ef5f;    /* lime title text, only over images */
  --pink-active: #fac0f0;       /* active tab / segment */
  --pink: #ff375f;
  --pink-soft: #ff6482;
  --green: #34c759;
  --grey: #8e8e93;
  --yellow: #ff9f0a;

  --nav-blur: saturate(180%) blur(20px);
  --nav-bg: rgba(248, 248, 250, 0.72);

  --radius-card: 20px;
  --radius-tile: 16px;
  --radius-control: 12px;

  /* Tilpasning (settes live av innstillingene; defaults = standardutseende) */
  --tab-weight: 550;   --tab-scale: 1;       /* faner: typografi */
  --btn-weight: 700;   --btn-scale: 1;       /* knapper: typografi */
  --ui-card-radius: 20px;                     /* bildekort: hjørner */
  --ui-card-aspect: 1.3333;                   /* bildekort: høyde (b/h-forhold) */
  --ui-card-min: 260px;                       /* bildekort: bredde (min) */
  --ui-search-radius: 12px;                   /* søkefelt: hjørner */
  --ui-search-height: 44px;                   /* søkefelt: høyde */
  --ui-tab-radius: 28px;                      /* faner: hjørner */
  --ui-pill-radius: 28px;                     /* piller: hjørner */
  --ui-tab-height: 40px;                      /* faner: høyde */
  --tab-reserve-weight: 700;                  /* faner: reservert breddevekt (stabil bredde) */
  --trip-bar-height: 46px;                    /* reisebar: høyde */
  --trip-bar-radius: 12px;                    /* reisebar: hjørner */
  --trip-bar-text-weight: 500;                /* reisebar: tekst-tykkelse */
  --trip-bar-text-scale: 1;                   /* reisebar: tekst-størrelse */
  --hero-height: 300px;                       /* forside: headerbildets høyde */
  --rm-status-height: 26px;                   /* reisemål-status: pillehøyde */
  --rm-status-radius: 14px;                   /* reisemål-status: pillehjørner */
  --rm-status-weight: 600;                    /* reisemål-status: tekst-tykkelse */
  --rm-status-scale: 1;                       /* reisemål-status: tekst-størrelse */
  --nyttig-tab-radius: 14px;                  /* Nyttig-filter (Notater/Lenker): hjørner */
  --nyttig-tab-height: 34px;                  /* Nyttig-filter: høyde */
  --nyttig-tab-text-weight: 550;              /* Nyttig-filter: tekst-tykkelse */
  --nyttig-tab-text-scale: 1;                 /* Nyttig-filter: tekst-størrelse */
  --ui-search-text-weight: 400;               /* søkefelt: tekst-tykkelse */
  --ui-search-text-scale: 1;                  /* søkefelt: tekst-størrelse */
  --btn-pad-y: 9px;                           /* knapper: høyde (vertikal padding) */
  --grid-gap: 18px;                           /* layout: avstand i rutenett */
  --tile-scrim-strength: 68;                  /* bildekort: mørke nederst (0–100) */
  --home-title-align: left;                   /* forsidetittel: justering */
  --tile-name-align: center;                  /* bildekort-navn: tekstjustering */
  --tile-name-halign: center;                 /* bildekort-navn: vannrett plass */
  --tile-name-valign: center;                 /* bildekort-navn: loddrett plass */

  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.05), 0 18px 40px rgba(0,0,0,0.13);
  --shadow-sheet: 0 -1px 40px rgba(0,0,0,0.18);
  --shadow-fab: 0 6px 20px rgba(var(--accent-rgb),0.40);

  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --maxw: 1080px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg-grad-top: #0c0c0e;
    --surface: rgba(28, 28, 30, 0.82);
    --surface-solid: #1c1c1e;
    --surface-2: #2c2c2e;
    --fill-quaternary: rgba(118, 118, 128, 0.18);
    --fill-tertiary: rgba(118, 118, 128, 0.24);
    --separator: rgba(84, 84, 88, 0.45);
    --separator-strong: rgba(84, 84, 88, 0.65);
    --label: #f5f5f7;
    --label-2: #ebebf5b3;
    --label-3: #ebebf580;
    --label-4: #ebebf54d;
    --accent: #c06fb2;
    --accent-press: #d488c8;
    --accent-light: #d488c8;
    --accent-rgb: 192, 111, 178;
    --nav-bg: rgba(20, 20, 22, 0.66);
    --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 10px 30px rgba(0,0,0,0.5);
    --shadow-card-hover: 0 2px 6px rgba(0,0,0,0.5), 0 20px 48px rgba(0,0,0,0.62);
  }
}
/* Manual theme override */
:root[data-theme="dark"] {
  --bg: #000000; --bg-grad-top: #0c0c0e;
  --surface: rgba(28,28,30,0.82); --surface-solid: #1c1c1e; --surface-2: #2c2c2e;
  --fill-quaternary: rgba(118,118,128,0.18); --fill-tertiary: rgba(118,118,128,0.24);
  --separator: rgba(84,84,88,0.45); --separator-strong: rgba(84,84,88,0.65);
  --label: #f5f5f7; --label-2: #ebebf5b3; --label-3: #ebebf580; --label-4: #ebebf54d;
  --accent: #c06fb2; --accent-press: #d488c8; --accent-light: #d488c8; --accent-rgb: 192, 111, 178; --nav-bg: rgba(20,20,22,0.66);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 10px 30px rgba(0,0,0,0.5);
  --shadow-card-hover: 0 2px 6px rgba(0,0,0,0.5), 0 20px 48px rgba(0,0,0,0.62);
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Reserver alltid plass til den vertikale scrollbaren, slik at sidebredden
   ikke endrer seg når innholdet veksler mellom kort (Land) og høyt (Reisemål).
   Uten dette re-kropper home-hero-bildet (background-size:cover) og «hopper». */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable;
  scrollbar-width: thin; scrollbar-color: var(--fill-tertiary) transparent; }
/* Avrundede scrollbarer med transparent bakgrunn — hovedvisning + popup (sheet).
   Tommelen «flyter» med avrundede hjørner via transparent kant + padding-box. */
html::-webkit-scrollbar, .sheet-scroll::-webkit-scrollbar { width: 11px; height: 11px; }
html::-webkit-scrollbar-track, .sheet-scroll::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb, .sheet-scroll::-webkit-scrollbar-thumb {
  background: var(--fill-tertiary); border-radius: 99px;
  border: 3px solid transparent; background-clip: padding-box; }
html::-webkit-scrollbar-thumb:hover, .sheet-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--separator-strong); background-clip: padding-box; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--label);
  line-height: 1.45;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  /* Ingen overflow-x her: .home-hero bruker width:100% (ikke 100vw), så den
     lager ingen horisontal overflyt. Unngå overflow-x:hidden på body — det gjør
     body til en scroll-container og bryter position:sticky på .tabbar. */
}
body::before { /* subtle vertical wash */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--bg-grad-top), var(--bg) 38%);
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
::selection { background: rgba(var(--accent-rgb),0.22); }

/* ---- Layout -------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Icon button — round, frosted, tactile (brukes nå i .page-actions) */
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: var(--accent);
  background: var(--fill-quaternary);
  transition: transform .18s var(--ease-spring), background .2s, color .2s;
}
.icon-btn:hover { background: var(--fill-tertiary); }
.icon-btn:active { transform: scale(0.9); }
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn.plain { background: none; }

/* (Obsolete dashboard .hero / .hero-head styles removed — dashboard now uses
   .home-hero; land- og reisemål-sider bruker .country-head + .page-actions.) */

/* ---- Dashboard full-bleed hero (photo from top edge → just below search) -- */
.home-hero {
  position: relative; isolation: isolate;
  width: 100%; margin-left: 0;    /* #app ER allerede innholdsbredden (viewport − reservert scrollbar-gutter)
                                     og starter ved venstre vinduskant → flush mot begge kanter, konstant.
                                     IKKE bruk 100vw: ~scrollbar-bredden for bredt → overflyt/horisontal scrollbar. */
  display: flex; align-items: center;
  min-height: var(--hero-height, clamp(220px, 38vw, 360px));
  padding-top: calc(var(--safe-top) + 36px);
  padding-bottom: 28px;
  margin-bottom: 2px;
  overflow: hidden;
}
.home-hero::before {                  /* the photo, full-bleed to all edges */
  content: ""; position: absolute; z-index: -2; inset: 0;
  background-image: var(--front-img, url("images/header.jpg"));
  background-position: var(--front-pos, center 56%); background-size: cover; background-repeat: no-repeat;
  transform: scale(var(--front-zoom, 1)); transform-origin: var(--front-pos, center 56%);
}
.home-hero::after {                   /* scrim for title legibility */
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.16) 45%, rgba(0,0,0,0.30) 100%);
}
.home-hero-inner { position: relative; z-index: 1; }
.home-hero-actions {
  position: absolute; z-index: 3;
  top: calc(var(--safe-top) + 12px); right: 16px;
  display: flex; gap: 8px;
}
.home-title {
  color: var(--home-title-color, var(--display-yellow));
  text-align: var(--home-title-align, left);
  font-size: calc(clamp(44px, 10vw, 72px) * var(--home-title-scale, 1));
  font-weight: var(--home-title-weight, 700);
  letter-spacing: -0.04em; line-height: 1.0;
  text-shadow: 0 2px 22px rgba(0,0,0,0.45);
}

/* Reiseinfobar + søk på samme rad */
.home-toprow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 16px;
}
.home-toprow .trip-banner { margin-top: 0; flex: 0 1 auto; }
.home-toprow .home-search { margin-top: 0; flex: 1 1 200px; min-width: 140px; max-width: var(--ui-search-width, 100%); }
/* reisebarens høyde styres nå av --trip-bar-height (kan gjøres slankere) */
.home-toprow .trip-banner { min-height: var(--trip-bar-height, 40px); align-items: center; }
.home-toprow .home-search { align-items: center; }
/* «Legg til»-knapp på samme rad som søket → søket blir smalere */
.home-toprow .home-add { flex: 0 0 auto; align-self: center; min-height: var(--ui-search-height, 44px); }

/* search over the light page (below the header image) */
.home-search { margin-top: 14px; }

/* thin white divider under the search bar */
.home-divider {
  border: 0; height: 1px;
  background: #ffffff;
  margin: 16px 0 2px;
}

/* Trip context banner — lys, hvit pille (ikke rosa gradient); ikoner i fanenes rosa */
.trip-banner {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  padding: 2px 16px;                         /* høyden styres av min-height → kan bli slank */
  min-height: var(--trip-bar-height, 40px);  /* høydejustering: lar baren bli kortere */
  border-radius: var(--trip-bar-radius, 12px);
  background: var(--surface-solid);
  border: 0.5px solid var(--separator);
  max-width: var(--trip-bar-width, 100%);   /* breddejustering: lar baren bli smalere */
}
.trip-banner .tb-item { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--trip-bar-text-scale, 1)); color: var(--label); font-weight: var(--trip-bar-text-weight, 500); }
.trip-banner .tb-item svg { width: 17px; height: 17px; color: var(--accent); }
.trip-banner .tb-sep { width: 1px; height: 16px; background: var(--separator-strong); }

/* ---- Toolbar: search + segmented + sort --------------------------------- */
.toolbar { position: sticky; top: calc(52px + var(--safe-top)); z-index: 30;
  padding: 12px 0 8px; background: linear-gradient(180deg, var(--bg) 70%, transparent); }
.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-solid); border: 0.5px solid var(--separator);
  border-radius: var(--ui-search-radius, 12px); padding: 6px 12px;
  min-height: var(--ui-search-height, 38px);
  color: var(--label-3); transition: background .2s, border-color .2s;
}
.search:focus-within { background: var(--surface-solid); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.12), var(--shadow-card); }
.search svg { width: 18px; height: 18px; flex-shrink: 0; }
.search input { flex: 1; border: none; background: none; outline: none; color: var(--label); font-size: calc(16px * var(--ui-search-text-scale, 1)); font-weight: var(--ui-search-text-weight, 400); }
.search input::placeholder { color: var(--label-3); }

.controls-row { display: flex; gap: 10px; align-items: center; margin-top: 12px; }

/* Segmented control */
.segmented {
  display: inline-flex; background: var(--fill-tertiary); border-radius: 11px;
  padding: 2px; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented button {
  position: relative; flex: 0 0 auto; padding: 7px 14px; border-radius: 9px;
  font-size: 13.5px; font-weight: 500; color: var(--label-2); white-space: nowrap;
  transition: color .2s; display: flex; align-items: center; gap: 6px;
}
.segmented button .badge { font-size: 11px; font-weight: 600; color: var(--label-3); }
.segmented button[aria-selected="true"] {
  background: var(--pink-active); color: #1d1d1f;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.04);
  font-weight: 700;
}
.segmented button[aria-selected="true"] .badge { color: var(--accent); }

.sort-select {
  flex: 0 0 auto; background: var(--fill-tertiary); border: none; border-radius: 11px;
  padding: 8px 12px; font-size: 13.5px; font-weight: 500; color: var(--label);
  -webkit-appearance: none; appearance: none; cursor: pointer;
}

/* ---- Gallery grid -------------------------------------------------------- */
.grid {
  display: grid; gap: var(--grid-gap, 18px); padding: 18px 0 120px;
  grid-template-columns: repeat(auto-fill, minmax(var(--ui-card-min, 260px), 1fr));
}

/* Destination card */
.card {
  position: relative; border-radius: var(--ui-card-radius, var(--radius-card)); overflow: hidden;
  background: var(--surface-solid); box-shadow: var(--shadow-card);
  cursor: pointer; isolation: isolate;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring);
  animation: cardIn .5s var(--ease-out) both;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.card:active { transform: translateY(-1px) scale(0.992); }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-spring); }
.card:hover .card-media img { transform: scale(1.05); }
.card-media .gradient { /* fallback accent backdrop */
  position: absolute; inset: 0; display: grid; place-items: center;
}
.card-media .gradient svg { width: 64px; height: 64px; color: rgba(255,255,255,0.92); }
.card-media::after { /* legibility scrim */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 30%, transparent 55%, rgba(0,0,0,0.28) 100%);
}
.card-fav {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,0.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; transition: transform .2s var(--ease-spring), background .2s;
}
.card-fav:hover { background: rgba(0,0,0,0.42); }
.card-fav:active { transform: scale(0.84); }
.card-fav svg { width: 20px; height: 20px; }
.card-fav.is-fav { color: var(--pink-soft); }
.card-fav.is-fav svg { animation: pop .35s var(--ease-spring); }
@keyframes pop { 0%{transform:scale(0.6)} 60%{transform:scale(1.22)} 100%{transform:scale(1)} }

.card-status {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--ui-pill-radius, 999px);
  background: rgba(0,0,0,0.32); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.card-body { padding: 13px 16px 15px; }
.card-title { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card-sub { color: var(--label-2); font-size: 13.5px; margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.card-sub svg { width: 14px; height: 14px; color: var(--label-3); }
.card-meta { display: flex; align-items: center; gap: 12px; margin-top: 11px; color: var(--label-3); font-size: 12.5px; }
.card-meta .m { display: flex; align-items: center; gap: 4px; }
.card-meta .m svg { width: 14px; height: 14px; }
.rating-stars { display: inline-flex; gap: 1px; color: var(--yellow); }
.rating-stars svg { width: 14px; height: 14px; }
.rating-stars .empty { color: var(--separator-strong); }

/* season chip */
.season-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 550;
  padding: 3px 9px; border-radius: var(--ui-pill-radius, 999px); margin-top: 11px; }
.season-chip svg { width: 13px; height: 13px; }
.season-chip.great { background: rgba(52,199,89,0.16); color: #248a3d; }
.season-chip.good  { background: rgba(var(--accent-rgb),0.14); color: var(--accent); }
.season-chip.mixed { background: rgba(255,159,10,0.16); color: #c77700; }
.season-chip.unknown { background: var(--fill-tertiary); color: var(--label-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .season-chip.great { color: #5fda7d; }
  :root:not([data-theme="light"]) .season-chip.mixed { color: #ffc463; }
}

/* ---- Empty state --------------------------------------------------------- */
.empty {
  text-align: center; padding: 64px 24px; max-width: 420px; margin: 24px auto 0;
  animation: cardIn .5s var(--ease-out) both;
}
.empty .glyph {
  width: 88px; height: 88px; border-radius: 26px; margin: 0 auto 22px;
  display: grid; place-items: center; color: #fff;
  background: var(--empty-glyph-bg, linear-gradient(140deg, #ff8a65, #ff6384 45%, #7c5cc4));
  box-shadow: var(--empty-glyph-shadow, 0 12px 30px rgba(255,99,132,0.35));
}
.empty .glyph svg { width: 42px; height: 42px; }
.empty h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.empty p { color: var(--label-2); font-size: 15px; margin: 8px 0 22px; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: var(--btn-pad-y, 9px) 20px; border-radius: 9999px;
  font-size: calc(13.5px * var(--btn-scale, 1)); font-weight: var(--btn-weight, 700);
  letter-spacing: -0.02em;
  transition: transform .15s var(--ease-spring), background .2s, opacity .2s, filter .2s;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(0.96); }
.btn-filled { background: var(--accent); color: #fff; }
.btn-filled:hover { background: var(--accent-press); }
.btn-tinted { background: rgba(var(--accent-rgb),0.12); color: var(--accent); }
.btn-tinted:hover { background: rgba(var(--accent-rgb),0.2); }
.btn-grey { background: var(--fill-tertiary); color: var(--label); }
.btn-grey:hover { background: var(--separator); }
.btn-plain { color: var(--accent); padding: 11px 10px; }
.btn-destructive { background: rgba(255,59,48,0.12); color: #ff453a; }
.btn-destructive:hover { background: rgba(255,59,48,0.2); }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 22px; font-size: calc(16px * var(--btn-scale, 1)); }

/* Floating add button */
.fab {
  position: fixed; right: 22px; bottom: calc(24px + var(--safe-bottom)); z-index: 40;
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: linear-gradient(140deg, var(--accent-light), var(--accent));
  box-shadow: var(--shadow-fab);
  transition: transform .25s var(--ease-spring), box-shadow .25s;
}
.fab:hover { transform: scale(1.06); }
.fab:active { transform: scale(0.92); }
.fab svg { width: 28px; height: 28px; }

/* ---- Detail view --------------------------------------------------------- */
.detail { padding-bottom: 120px; animation: viewIn .4s var(--ease-out) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* (detail-hero fjernet — reisemål-siden bruker nå .country-head som land-siden.)
   .glass-btn beholdes: brukes av forsiden (home-hero) og lightbox. */
.glass-btn {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; line-height: 0;
  background: rgba(0,0,0,0.20); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; transition: transform .18s var(--ease-spring), background .2s;
}
.glass-btn:hover { background: rgba(0,0,0,0.30); }
.glass-btn:active { transform: scale(0.88); }
.glass-btn svg { width: 18px; height: 18px; display: block; }
.glass-btn.is-fav { color: var(--pink-soft); }

/* Detail summary card — ingen hero lenger, så ingen negativ overlapp. */
.detail-body { margin-top: 6px; position: relative; z-index: 4; }
.panel {
  background: var(--surface-solid); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 18px; margin-bottom: 18px;
  border: 0.5px solid var(--separator);
}
/* Reisemål-status: kompakt, sleek rad under stedsnavnet (stjerner + status).
   Størrelse/tykkelse/høyde/hjørner styres fra Innstillinger → UI → Status (reisemål). */
.rm-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }

.status-pills { display: inline-flex; gap: 5px; }
.status-pill {
  display: inline-flex; align-items: center;
  font-size: calc(12px * var(--rm-status-scale, 1)); font-weight: var(--rm-status-weight, 600);
  min-height: var(--rm-status-height, 26px); padding: 0 calc(11px * var(--rm-status-scale, 1));
  border-radius: var(--rm-status-radius, 14px);
  background: var(--fill-tertiary); color: var(--label-2); transition: all .2s;
}
.status-pill[aria-pressed="true"].green { background: rgba(52,199,89,0.18); color: #248a3d; }
.status-pill[aria-pressed="true"].blue { background: rgba(var(--accent-rgb),0.16); color: var(--accent); }
.status-pill[aria-pressed="true"].grey { background: var(--separator-strong); color: var(--label); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .status-pill[aria-pressed="true"].green{color:#5fda7d} }

.season-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  padding: 12px 14px; border-radius: 14px; background: var(--fill-quaternary); font-size: 13.5px; color: var(--label-2); }
.season-note svg { width: 18px; height: 18px; color: var(--pink); flex-shrink: 0; margin-top: 1px; }

/* Section */
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 12px; }
.section-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 9px; }
.section-head h2 svg { width: 20px; height: 20px; color: var(--accent); }
.section-head .count { font-size: 14px; color: var(--label-3); font-weight: 500; }

/* Pro / con columns */
.procon { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px){ .procon { grid-template-columns: 1fr; } }
.procon h3 { font-size: 13px; font-weight: 650; letter-spacing: 0.01em; margin-bottom: 8px; }
.procon .pro h3 { color: var(--green); }
.procon .con h3 { color: var(--pink); }
.chip-list { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px;
  padding: 6px 8px 6px 12px; border-radius: var(--ui-pill-radius, 999px); background: var(--fill-tertiary); color: var(--label);
}
.chip button { color: var(--label-3); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; }
.chip button:hover { color: var(--pink); background: var(--separator); }
.chip button svg { width: 13px; height: 13px; }
.chip-add { display: flex; gap: 8px; margin-top: 10px; }
.chip-add input { flex: 1; }

/* Item lists (notes, deals, links, reviews) */
.items { display: flex; flex-direction: column; gap: 10px; }
.item {
  display: flex; gap: 12px; padding: 14px; border-radius: var(--radius-tile);
  background: var(--surface-2); position: relative;
  animation: cardIn .35s var(--ease-out) both;
}
.item .ic { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--surface-solid); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.item .ic svg { width: 19px; height: 19px; }
.item .body { flex: 1; min-width: 0; }
.item .body .t { font-weight: 600; font-size: 15px; word-wrap: break-word; }
.item .body .d { color: var(--label-2); font-size: 14px; margin-top: 2px; white-space: pre-wrap; word-wrap: break-word; }
.item .body .meta { color: var(--label-3); font-size: 12px; margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.item .body .meta a { font-weight: 550; }
.item .price { font-weight: 700; color: var(--green); font-size: 15px; white-space: nowrap; }
.item .del { color: var(--label-3); align-self: flex-start; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.item .del:hover { color: var(--pink); background: var(--fill-tertiary); }
.item .del svg { width: 16px; height: 16px; }
.item .mini-stars { color: var(--yellow); display: inline-flex; }
.item .mini-stars svg { width: 13px; height: 13px; }

.add-row { margin-top: 12px; }
.empty-mini { color: var(--label-3); font-size: 14px; padding: 8px 2px; }

/* Photo grid */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.photo-cell { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface-2); animation: cardIn .35s var(--ease-out) both; }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-spring); cursor: zoom-in; }
.photo-cell:hover img { transform: scale(1.06); }
.photo-cell .ov { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(0,0,0,0.3), transparent 40%, rgba(0,0,0,0.35)); transition: opacity .2s; }
.photo-cell:hover .ov { opacity: 1; }
.photo-cell .pact { position: absolute; top: 7px; right: 7px; display: flex; gap: 6px; opacity: 0; transition: opacity .2s; }
.photo-cell:hover .pact { opacity: 1; }
.photo-cell .pact button { width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; }
.photo-cell .pact button svg { width: 15px; height: 15px; }
.photo-cell.is-cover::after { content: "Forside"; position: absolute; bottom: 6px; left: 6px; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.5); padding: 2px 7px; border-radius: var(--ui-pill-radius, 999px); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.photo-add {
  aspect-ratio: 1; border-radius: 14px; border: 2px dashed var(--separator-strong);
  display: grid; place-items: center; color: var(--label-3); transition: all .2s; cursor: pointer;
}
.photo-add:hover { border-color: var(--accent); color: var(--accent); background: var(--fill-quaternary); }
.photo-add svg { width: 26px; height: 26px; }

/* ---- Forms / fields ------------------------------------------------------ */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--label-2); margin-bottom: 6px; letter-spacing: -0.01em; }
.input, textarea.input, select.input {
  width: 100%; background: var(--surface-2); border: 1px solid transparent; border-radius: var(--radius-control);
  padding: 12px 14px; font-size: 16px; color: var(--label); transition: border-color .2s, background .2s, box-shadow .2s;
}
.input::placeholder { color: var(--label-3); }
.input:focus { outline: none; border-color: var(--accent); background: var(--surface-solid); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.12); }
textarea.input { resize: vertical; min-height: 84px; line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px){ .field-row { grid-template-columns: 1fr; } }

/* Fler-velger for reisemål (notat/lenke): kryssbokser gruppert per land */
.multiselect { max-height: 220px; overflow-y: auto; border: 1px solid var(--separator); border-radius: var(--radius-control, 12px);
  background: var(--surface-2); padding: 4px; }
.multiselect .ms-group + .ms-group { margin-top: 2px; border-top: 1px solid var(--separator); padding-top: 2px; }
.multiselect .ms-group-h { font-size: 11.5px; font-weight: 700; color: var(--label-3); letter-spacing: .04em;
  text-transform: uppercase; padding: 7px 8px 3px; }
.multiselect .ms-opt { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px;
  font-size: 15px; color: var(--label); cursor: pointer; }
.multiselect .ms-opt:hover { background: var(--surface-solid); }
.multiselect .ms-opt input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); }
.ms-empty { padding: 12px 10px; color: var(--label-2); font-size: 14px; }

/* ---- Sheet / modal ------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s; display: flex; align-items: flex-end; justify-content: center;
}
.scrim.show { opacity: 1; }
.sheet {
  width: 100%; max-width: 560px; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-solid); border-radius: 26px 26px 0 0;
  padding: 8px 20px 0;
  box-shadow: var(--shadow-sheet);
  transform: translateY(100%); transition: transform .42s var(--ease-spring);
}
/* Intern scroll-region: holder popupen innenfor vindusrammen. */
.sheet-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -20px; padding: 0 20px calc(12px + var(--safe-bottom)); -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--fill-tertiary) transparent;
}
.scrim.show .sheet { transform: translateY(0); }
@media (min-width: 600px) {
  .scrim { align-items: center; }
  .sheet { border-radius: 22px; max-height: 88vh; transform: translateY(16px) scale(0.96); opacity: 0; transition: transform .42s var(--ease-spring), opacity .3s; }
  .scrim.show .sheet { transform: none; opacity: 1; }
}
.sheet-grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--separator-strong); margin: 8px auto 4px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 16px; position: sticky; top: 0; background: var(--surface-solid); z-index: 2; }
.sheet-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.sheet-head .cancel { color: var(--accent); font-size: 16px; font-weight: 400; }
/* Handlingsknapper (Ferdig/Lagre) limes til bunnen av popupen så de aldri
   havner utenfor vinduet; innholdet over scrolles. */
.sheet-actions { display: flex; gap: 10px; position: sticky; bottom: 0; z-index: 4;
  margin: 8px -20px 0; padding: 12px 20px calc(8px + var(--safe-bottom));
  background: var(--surface-solid); box-shadow: 0 -10px 18px -10px rgba(0,0,0,0.22); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,0.9);
  display: grid; place-items: center; opacity: 0; transition: opacity .3s; padding: 24px; }
.lightbox.show { opacity: 1; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.lightbox .close-lb { position: absolute; top: calc(18px + var(--safe-top)); right: 18px; }
/* Lightbox-galleri (flere bilder) */
.lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
.lb-cap { color: rgba(255,255,255,0.86); font-size: 14px; font-weight: 600; text-align: center; max-width: 80vw; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-nav:active { transform: translateY(-50%) scale(0.9); }
.lb-prev { left: 16px; } .lb-prev svg { transform: rotate(180deg); }
.lb-next { right: 16px; }
.lb-dots { position: absolute; bottom: calc(20px + var(--safe-bottom, 0px)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px; }
.lb-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.35); transition: background .2s; }
.lb-dot.on { background: #fff; }

/* Action menu (more) */
.menu {
  position: absolute; min-width: 200px; background: var(--surface-solid); border-radius: 14px;
  box-shadow: var(--shadow-card-hover); border: 0.5px solid var(--separator);
  padding: 6px; z-index: 110; overflow: hidden;
  transform-origin: top right; animation: menuIn .2s var(--ease-spring) both;
}
@keyframes menuIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
.menu button { display: flex; width: 100%; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; font-size: 15px; color: var(--label); text-align: left; }
.menu button:hover { background: var(--fill-tertiary); }
.menu button svg { width: 18px; height: 18px; color: var(--label-2); }
.menu button.danger { color: #ff453a; }
.menu button.danger svg { color: #ff453a; }
.menu .sep { height: 0.5px; background: var(--separator); margin: 5px 8px; }

/* ---- Toast --------------------------------------------------------------- */
#toast-host { position: fixed; left: 0; right: 0; bottom: calc(24px + var(--safe-bottom)); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  background: rgba(40,40,42,0.92); color: #fff; padding: 12px 18px; border-radius: 14px;
  font-size: 14.5px; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; align-items: center; gap: 9px; max-width: 90vw;
  animation: toastIn .35s var(--ease-spring) both;
}
.toast svg { width: 18px; height: 18px; color: var(--green); }
.toast.out { animation: toastOut .3s var(--ease-out) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(12px); } }

/* ---- Misc ---------------------------------------------------------------- */
.spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--separator); border-top-color: var(--accent); animation: spin 0.8s linear infinite; margin: 80px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   Country › City architecture, tabs, chat — added layer
   ========================================================================== */
.muted { color: var(--label-3); }
.chev { color: var(--label-4); display: inline-flex; }
.chev svg { width: 18px; height: 18px; }

/* KPI row */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.kpi { background: var(--surface-solid); border: 0.5px solid var(--separator); border-radius: var(--radius-tile);
  padding: 14px 12px; text-align: center; box-shadow: var(--shadow-card); }
.kpi-n { font-size: 24px; font-weight: 750; letter-spacing: -0.03em; }
.kpi-l { font-size: 12px; color: var(--label-3); margin-top: 1px; }
@media (max-width: 520px){ .kpi-n { font-size: 20px; } .kpi-l { font-size: 11px; } }

.toolbar-lite { margin-top: 18px; }

/* Country cards */
/* Destinations carousel */
.dest-carousel { position: relative; margin-bottom: 100px; }
.dest-track {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(var(--dash-card-rows, 1), auto);
  grid-auto-columns: var(--dash-card-min, calc((100% - 36px) / 3));
  gap: 18px; padding: 18px 2px 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* tynn scrollbar under bildekortene */
  scrollbar-width: thin; scrollbar-color: var(--fill-tertiary) transparent;
}
.dest-track::-webkit-scrollbar { height: 6px; }
.dest-track::-webkit-scrollbar-track { background: transparent; }
.dest-track::-webkit-scrollbar-thumb { background: var(--fill-tertiary); border-radius: 99px; }
.dest-track::-webkit-scrollbar-thumb:hover { background: var(--separator-strong); }
.dest-track > .card { scroll-snap-align: start; }
/* Brukerens breddevalg (--dash-card-min) skal styre på ALLE skjermbredder.
   Fallback (når ingen verdi er satt) gir 2-/1-opp på smale vinduer. */
@media (max-width: 900px){ .dest-track { grid-auto-columns: var(--dash-card-min, calc((100% - 18px) / 2)); } }
@media (max-width: 600px){ .dest-track { grid-auto-columns: var(--dash-card-min, 82%); } }

.country-card { overflow: hidden;
  border-radius: var(--dash-card-radius, var(--ui-card-radius, 20px));
  --tile-scrim-strength: var(--dash-card-scrim, 68); }
.country-card .photo-tile { aspect-ratio: var(--dash-card-aspect, var(--ui-card-aspect, 1.3333)); }

/* Bildeutsnitt — dra-i-forhåndsvisning (felles for forside/land/reisemål) */
.reposition { padding-top: 4px; }
.repos-frame {
  position: relative; width: 100%; overflow: hidden;
  border-radius: var(--ui-card-radius, 16px);
  background: var(--fill-tertiary);
  touch-action: none; cursor: grab; user-select: none;
  box-shadow: inset 0 0 0 1px var(--separator);
}
.repos-frame.grabbing { cursor: grabbing; }
.repos-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; -webkit-user-drag: none; user-select: none;
}
.repos-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; color: var(--label-2); font-size: 13px; margin: 12px 4px 2px;
}
.repos-hint svg { width: 17px; height: 17px; color: var(--accent); flex: 0 0 auto; }
.repos-zoom { display: flex; align-items: center; gap: 12px; margin: 14px 2px 2px; }
.repos-zoom-l { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: 13px; color: var(--label-2); font-weight: 550; }
.repos-zoom-l svg { width: 16px; height: 16px; color: var(--accent); }
.repos-zoom .range { flex: 1; }

/* Shared photo tile — used by destination (country) cards AND city cards */
.photo-tile { position: relative; aspect-ratio: var(--ui-card-aspect, 1.3333); overflow: hidden; }
.photo-tile-img, .photo-tile-grad { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-tile-scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.06) 38%, rgba(0,0,0,0.12) 60%,
    rgba(0,0,0, calc(var(--tile-scrim-strength, 68) / 100 * 0.7)) 100%); }
.photo-tile-name { position: absolute; inset: 0; z-index: 2; display: grid;
  align-items: var(--tile-name-valign, center); justify-items: var(--tile-name-halign, center);
  text-align: var(--tile-name-align, center); padding: 16px; color: var(--tile-name-color, var(--display-yellow));
  font-size: calc(clamp(26px, 3.6vw, 40px) * var(--tile-name-scale, 1)); font-weight: var(--tile-name-weight, 700);
  letter-spacing: -0.03em; line-height: 1.0;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5); pointer-events: none; }

/* City cards reuse the tile, plus status / favorite / meta overlays.
   Navnplassering følger «Tekst: plassering» (--tile-name-valign, satt på .photo-tile-name).
   Bunnplass settes av JS (--tile-name-pad-bottom): ekstra rom når navnet er nederst
   (over sted/meta-foten), ellers symmetrisk så «midten» faktisk blir midten av bildet. */
.city-card .photo-tile-name { padding-bottom: var(--tile-name-pad-bottom, 16px); }
/* Land-kort på forsiden: egen typografi (uavhengig av reisemål-kort). */
.country-card .photo-tile-name {
  align-items: var(--dash-tile-name-valign, center);
  justify-items: var(--dash-tile-name-halign, center);
  text-align: var(--dash-tile-name-align, center);
  font-size: calc(clamp(26px, 3.6vw, 40px) * var(--dash-tile-name-scale, 1));
  font-weight: var(--dash-tile-name-weight, 700);
}
.photo-tile-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 13px; color: #fff; }
.photo-tile-foot .ptf-loc { display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 13px; font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.photo-tile-foot .ptf-loc svg { width: 14px; height: 14px; flex-shrink: 0; }
.photo-tile-foot .ptf-meta { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.photo-tile-foot .ptf-meta .m { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; }
.photo-tile-foot .ptf-meta .m svg { width: 14px; height: 14px; }
.photo-tile-foot .rating-stars svg { width: 14px; height: 14px; }

/* Search results */
.search-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.search-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--surface-solid); border: 0.5px solid var(--separator); border-radius: 14px; padding: 11px 13px;
  box-shadow: var(--shadow-card); transition: transform .15s var(--ease-spring); }
.search-row:hover { transform: translateY(-1px); }
.search-row:active { transform: scale(0.99); }
.sr-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.sr-ic svg { width: 19px; height: 19px; }
.sr-body { flex: 1; display: flex; flex-direction: column; }
.sr-t { font-weight: 600; font-size: 15px; }
.sr-s { color: var(--label-3); font-size: 13px; }

/* Country page head */
.country-head { display: flex; align-items: center; gap: 18px; padding: 10px 0 6px; }
.country-emblem { position: relative; overflow: hidden; cursor: pointer;
  width: var(--country-emblem-size, 76px); height: var(--country-emblem-size, 76px);
  border-radius: var(--country-emblem-radius, 22px); display: grid; place-items: center; flex-shrink: 0;
  font-size: 38px; box-shadow: 0 10px 26px rgba(0,0,0,0.18); color: #fff;
  transition: transform .18s var(--ease-spring); }
.country-emblem:hover { transform: scale(1.03); }
.country-emblem svg { width: 38px; height: 38px; }
.country-emblem-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.country-emblem-glyph { position: relative; z-index: 1; display: grid; place-items: center; }
.country-emblem-edit { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: rgba(0,0,0,0.42); color: #fff; opacity: 0; transition: opacity .2s; }
.country-emblem:hover .country-emblem-edit,
.country-emblem:focus-visible .country-emblem-edit { opacity: 1; }
.country-emblem-edit svg { width: 24px; height: 24px; }
.country-head-text h1 { font-size: clamp(26px, 6vw, 34px); font-weight: 750; letter-spacing: -0.03em; }
.country-head-text p { color: var(--label-2); font-size: 15px; margin-top: 4px; max-width: 60ch; }
.head-kicker { color: var(--label-3); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 2px; }

/* City detail extras (hero-kicker/city-summary fjernet — kicker + beskrivelse
   ligger nå i .country-head-text / .head-kicker, som på land-siden). */

/* Tab bar */
.tabbar { position: sticky; top: calc(var(--safe-top) + 52px); z-index: 20; display: flex; gap: 3px; padding: 4px;
  background: var(--surface); -webkit-backdrop-filter: var(--nav-blur); backdrop-filter: var(--nav-blur);
  border: 0.5px solid var(--separator); border-radius: 14px; margin-bottom: 18px; box-shadow: var(--shadow-card);
  overflow-x: auto; scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tabbar button { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 8px; border-radius: var(--ui-tab-radius, 10px);
  font-size: calc(14px * var(--tab-scale, 1)); font-weight: var(--tab-weight, 550); color: var(--label-2);
  white-space: nowrap; transition: color .2s, background .2s; }
.tabbar button svg { width: 18px; height: 18px; }
.tabbar button[aria-selected="true"] { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.3); }
@media (max-width: 480px){ .tabbar button span { display: none; } .tabbar button { padding: 11px 8px; } }
/* Nyttig-underfaner (Notater | Lenker): samme pille-/knappe-stil som .tabbar,
   men IKKE sticky — ligger som en vanlig rad under sidefanene (Land/Reisemål…). */
.nyttig-tabbar { position: static; top: auto; z-index: auto; margin-bottom: 12px; padding: 3px;
  border-radius: var(--nyttig-tab-radius, 14px); }
.nyttig-tabbar button { border-radius: var(--nyttig-tab-radius, 10px); min-height: var(--nyttig-tab-height, 34px); padding: 4px 8px;
  font-size: calc(14px * var(--nyttig-tab-text-scale, 1)); font-weight: var(--nyttig-tab-text-weight, 550); }

/* ---- Fly-fanen: kalender + avgangsliste -------------------------------- */
/* To felt på rad (avgang/landing) i skjemaet. */
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1 1 0; min-width: 0; }

/* Datooverskrift i avgangslista (grupperer på dato). */
.fly-date-head { font-size: 13px; font-weight: 700; color: var(--accent); text-transform: capitalize;
  letter-spacing: -0.01em; margin: 14px 2px 8px; }
.fly-date-head:first-child { margin-top: 2px; }

/* Metadata-chips på et avgangs-kort. */
.fly-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.fly-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--label-2); }
.fly-tag svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }

/* Kalender: ett eller flere månedsgrid. */
.fly-cal { display: grid; gap: 16px; margin-bottom: 4px; }
@media (min-width: 560px) { .fly-cal { grid-template-columns: 1fr 1fr; } }
.fly-month { background: var(--fill-quaternary); border-radius: 16px; padding: 12px; }
.fly-month-name { font-size: 14px; font-weight: 700; text-transform: capitalize; letter-spacing: -0.01em;
  margin: 0 2px 10px; }
.fly-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.fly-wd-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 2px; }
.fly-wd { text-align: center; font-size: 11px; font-weight: 600; color: var(--label-3); text-transform: uppercase; }
.fly-day { position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 9px; font-size: 13.5px; color: var(--label); border: 0;
  background: transparent; font-family: inherit; }
.fly-day.is-blank { background: transparent; }
.fly-day:not(.has-flight) { color: var(--label-3); }
.fly-day.has-flight { cursor: pointer; background: var(--surface-2); font-weight: 600; color: var(--label); }
.fly-day.has-flight:hover { background: rgba(var(--accent-rgb), 0.16); }
.fly-day.is-sel { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3); }
.fly-dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.fly-day.is-sel .fly-dot { background: #fff; }

/* Detaljliste under kalenderen for valgt dato. */
.fly-detail { margin-top: 14px; }
.fly-detail-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700;
  text-transform: capitalize; letter-spacing: -0.01em; margin: 0 2px 10px; }
.fly-detail-head svg { width: 18px; height: 18px; color: var(--accent); }

.tab-body { animation: viewIn .3s var(--ease-out) both; }
.tab-hint { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: 14px;
  background: var(--fill-quaternary); color: var(--label-2); font-size: 13.5px; margin-bottom: 16px; line-height: 1.5; }
.tab-hint svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }

/* ---- Flytende handlingsknapper (ingen topbar) -------------------------- */
/* Tilbake til venstre; tema + meny høyrestilt på samme rad. */
.page-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: calc(var(--safe-top) + 12px); padding-bottom: 2px; }
.page-actions-left { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.page-actions-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* Landmerke + åpne reisemål-faner ligger på samme rad som tilbake/hjem. */
.page-actions-tabs { flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  overflow-x: auto; scrollbar-width: none; }
.page-actions-tabs::-webkit-scrollbar { display: none; }
.page-actions-tabs .dest-tabs { padding: 0; }
.icon-btn.is-fav { color: var(--pink-soft); }

/* ---- Page-level faner (destinasjonsside) — i tråd med opplastet referanse:
   transparent rad, full-bredde linje under, aktiv fane = avrundet boble. ---- */
/* Fast høyde + alltid reservert action-slot => fanelinjen hopper ALDRI når man
   bytter fane (action-knappen finnes på noen seksjoner, ikke andre). */
.tabs-row { display: flex; align-items: flex-end; gap: 12px; margin: 6px 0 18px;
  min-height: 48px; border-bottom: 1px solid var(--separator); }
.tabs-row-action { flex-shrink: 0; display: flex; align-items: flex-end; padding-bottom: 6px; }
.page-tabs { display: flex; align-items: flex-end; gap: 4px; flex: 1; min-width: 0; min-height: 42px;
  overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--fill-tertiary) transparent; }
.page-tabs::-webkit-scrollbar { height: 4px; }
.page-tabs::-webkit-scrollbar-thumb { background: var(--fill-tertiary); border-radius: 99px; }
.page-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 4px 13px; min-height: var(--ui-tab-height, 40px); border: none;
  border-radius: 12px 12px 0 0; background: transparent; color: var(--label-3);
  font-size: calc(14px * var(--tab-scale, 1)); font-weight: var(--tab-weight, 550);
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background .18s, color .18s; }
.page-tab svg { width: 18px; height: 18px; }
.page-tab:hover { background: var(--fill-quaternary); color: var(--label); }
/* Aktiv fane blir fetere, men teksten reserverer alltid bredden til den tyngste
   tilstanden (--tab-reserve-weight) via et skjult ::after — så etiketten verken
   flytter seg eller endrer fanestørrelse når den blir aktiv. */
.page-tab[aria-selected="true"] { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); font-weight: var(--tab-reserve-weight, 700); }
.page-tab .tab-txt { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.page-tab .tab-txt::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden;
  pointer-events: none; font-weight: var(--tab-reserve-weight, 700); }

/* ---- Aggregerte by-grupper (Flyplasser + Gjøremål) --------------------- */
.agg-group { margin-bottom: 20px; }
.agg-group:last-child { margin-bottom: 0; }
.agg-city { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 2px 9px;
  margin-bottom: 10px; border: none; border-bottom: 0.5px solid var(--separator); background: transparent;
  cursor: pointer; color: var(--label); font-size: 15px; font-weight: 650; letter-spacing: -0.01em;
  text-align: left; transition: color .18s; }
.agg-city:hover { color: var(--accent); }
.agg-city svg { width: 18px; height: 18px; flex-shrink: 0; }
.agg-city svg:first-child { color: var(--accent); }
.agg-city svg:last-child { color: var(--label-3); }
.agg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agg-count { font-size: 12px; font-weight: 600; color: var(--label-3); background: var(--fill-quaternary);
  border-radius: 99px; padding: 2px 9px; }

/* ---- Kart-fane: kun illustrert SVG-kart (Google Maps fjernet) ----------- */

/* ---- Illustrert Portugal-kart (SVG) ------------------------------------ */
.illus-map { border-radius: var(--radius-tile); overflow: hidden; border: 0.5px solid var(--separator);
  background: #B7DBEA; padding: 10px 8px; margin: 0 auto 14px;
  /* Maks bredde knyttet til vindushøyden → kartet blir aldri så høyt at deler
     forsvinner ut av et lite vindu (Portugal er høyere enn bredt). */
  max-width: min(100%, 72vh); }
.honeymoon-map { width: 100%; height: auto; display: block; }

/* Regioner: lyser opp i salviegrønt på hover/fokus */
.honeymoon-map .region { cursor: default; outline: none; }
.honeymoon-map .region-fill { fill: #F5F3EF; transition: fill 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.honeymoon-map .region:hover .region-fill,
.honeymoon-map .region:focus-visible .region-fill { fill: #D5DCBD; }
.honeymoon-map .region:focus-visible { outline: 2px solid #958368; outline-offset: 2px; border-radius: 4px; }

/* Reisemål-markører */
.honeymoon-map .city { outline: none; cursor: default; }
.honeymoon-map .city.is-linked { cursor: pointer; }
.honeymoon-map .city path,
.honeymoon-map .city circle {
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), fill 180ms ease;
  transform-box: fill-box; transform-origin: center; }
.honeymoon-map .city.is-linked:hover path,
.honeymoon-map .city.is-linked:focus-visible path,
.honeymoon-map .city.is-linked:hover circle,
.honeymoon-map .city.is-linked:focus-visible circle { transform: scale(1.18); }
/* Bare den ytterste (brune) ringen mørkner – kjernen beholder fargen */
.honeymoon-map .city.is-linked:hover path[fill="#958368"],
.honeymoon-map .city.is-linked:focus-visible path[fill="#958368"],
.honeymoon-map .city.is-linked:hover circle[fill="#958368"],
.honeymoon-map .city.is-linked:focus-visible circle[fill="#958368"] { fill: #6E5C42; }
.honeymoon-map .city.is-linked:focus-visible { outline: 2px solid #6E5C42; outline-offset: 3px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .honeymoon-map .region-fill,
  .honeymoon-map .city path,
  .honeymoon-map .city circle { transition: none; }
  .honeymoon-map .city.is-linked:hover path,
  .honeymoon-map .city.is-linked:focus-visible path,
  .honeymoon-map .city.is-linked:hover circle,
  .honeymoon-map .city.is-linked:focus-visible circle { transform: none; }
}

/* ---- Notater-fane ------------------------------------------------------- */
.notes-area { width: 100%; min-height: 240px; resize: vertical; box-sizing: border-box;
  border: 0.5px solid var(--separator); border-radius: var(--radius-tile); background: var(--surface-solid);
  color: var(--label); font: inherit; font-size: 15px; line-height: 1.6; padding: 14px 16px; outline: none;
  transition: box-shadow .2s, border-color .2s; }
.notes-area:focus { border-color: transparent; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12); }
.notes-area::placeholder { color: var(--label-3); }

/* Notat-kort (liste på forsiden) */
.note-item { cursor: pointer; }
.note-text { white-space: pre-wrap; }
.note-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.note-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--label-2); background: var(--fill-quaternary); border-radius: 99px; padding: 3px 9px; }
.note-chip svg { width: 13px; height: 13px; color: var(--accent); }

/* Transport spec list */
.spec { display: flex; flex-direction: column; }
.spec-row { display: grid; grid-template-columns: 34px 130px 1fr; align-items: center; gap: 12px;
  padding: 13px 2px; border-bottom: 0.5px solid var(--separator); }
.spec-row:last-child { border-bottom: none; }
.spec-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--fill-tertiary); color: var(--accent); }
.spec-ic svg { width: 18px; height: 18px; }
.spec-l { font-size: 13.5px; color: var(--label-2); font-weight: 550; }
.spec-v { font-size: 15px; font-weight: 500; }
.spec-row.empty .spec-ic { color: var(--label-4); }
@media (max-width: 460px){
  .spec-row { grid-template-columns: 34px 1fr; grid-auto-rows: min-content; align-items: start; padding: 12px 2px; }
  .spec-l { grid-column: 2; font-size: 12px; color: var(--label-3); }
  .spec-v { grid-column: 2; }
  .spec-ic { grid-row: span 2; }
}

/* Hotels — tier blocks */
.tier-block { margin-bottom: 22px; }
.tier-block:last-child { margin-bottom: 0; }
.tier-head { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em; margin-bottom: 12px; }
.tier-dot { width: 11px; height: 11px; border-radius: 50%; }
.tier-dot.green { background: var(--green); } .tier-dot.blue { background: var(--accent); } .tier-dot.pink { background: var(--pink); }
.tier-count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--label-3);
  background: var(--fill-tertiary); border-radius: var(--ui-pill-radius, 999px); padding: 2px 10px; }
.tier-empty { padding: 14px; background: var(--surface-2); border-radius: 14px; text-align: center; }
.hotel-list { display: flex; flex-direction: column; gap: 12px; }

.hotel-card { background: var(--surface-2); border-radius: var(--radius-tile); padding: 15px 16px;
  animation: cardIn .35s var(--ease-out) both; }
.hotel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hotel-name { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.hotel-area { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--label-3); font-weight: 400; margin-left: 0; margin-top: 3px; }
.hotel-area { display: flex; }
.hotel-area svg { width: 13px; height: 13px; }
.amenities { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.am-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500;
  padding: 5px 10px; border-radius: var(--ui-pill-radius, 999px); background: var(--surface-solid); color: var(--label-2);
  border: 0.5px solid var(--separator); }
.am-chip svg { width: 14px; height: 14px; color: var(--accent); }
.hotel-line { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; margin-top: 11px; line-height: 1.45; }
.hotel-line svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.hotel-line.good { color: var(--label); } .hotel-line.good svg { color: var(--green); }
.hotel-line.warn { color: var(--label-2); } .hotel-line.warn svg { color: var(--yellow); }
.hotel-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 13px;
  padding-top: 11px; border-top: 0.5px solid var(--separator); font-size: 13px; }
.hotel-acts { display: inline-flex; gap: 4px; }
.mini-act { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--label-3); transition: all .2s; }
.mini-act:hover { background: var(--fill-tertiary); color: var(--accent); }
.mini-act svg { width: 16px; height: 16px; }

/* Hotel card: miniatyr + navn/meta-rad */
.hotel-head { display: flex; align-items: flex-start; gap: 13px; }
.hotel-head-main { flex: 1; min-width: 0; }
.hotel-thumb { width: 60px; height: 60px; border-radius: 13px; overflow: hidden; flex-shrink: 0; position: relative;
  background: var(--surface-solid); display: grid; place-items: center; color: var(--label-3);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06); transition: transform .2s var(--ease-out); }
.hotel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hotel-thumb.has-photo { cursor: zoom-in; }
.hotel-thumb.has-photo:hover { transform: scale(1.03); }
.hotel-thumb-empty svg { width: 26px; height: 26px; }
.thumb-count { position: absolute; right: 3px; bottom: 3px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: rgba(0,0,0,0.62); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.hotel-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; margin-top: 6px; }
.hotel-stars { display: inline-flex; align-items: center; gap: 1px; color: var(--yellow); }
.hotel-stars svg { width: 14px; height: 14px; }
.guest-score { display: inline-flex; align-items: baseline; gap: 1px; font-size: 13px; font-weight: 750;
  color: var(--green); background: rgba(48,209,88,0.13); border-radius: var(--ui-pill-radius, 999px);
  padding: 2px 9px; letter-spacing: -0.01em; }
.guest-score small { font-size: 10.5px; font-weight: 600; opacity: 0.72; }
.hotel-price { font-weight: 700; color: var(--green); font-size: 14.5px; white-space: nowrap; margin-left: auto; }

/* Stjernefilter på hotelloversikten */
.hotel-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filter-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600;
  padding: 6px 13px; border-radius: var(--ui-pill-radius, 999px); background: var(--surface-2);
  color: var(--label-2); border: 0.5px solid var(--separator); transition: background .18s, color .18s, border-color .18s; }
.filter-chip svg { width: 13px; height: 13px; }
.filter-chip:hover { background: var(--fill-tertiary); }
.filter-chip.on { background: var(--accent); color: #fff; border-color: transparent; }
.filter-chip.on svg { color: #fff; }

/* Fly-alternativer (transport-fanen) */
.flight-list { display: flex; flex-direction: column; gap: 12px; }
.flight-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.flight-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flight-filter-label { font-size: 12px; font-weight: 700; color: var(--label-3); min-width: 74px; letter-spacing: .01em; }
.flight-filter-row .hotel-filter { margin-bottom: 0; }
.flight-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.flight-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; min-width: 0; flex-wrap: wrap; }
.flight-title svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.flight-route { font-size: 13px; font-weight: 600; color: var(--label-3); }
.flight-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--label-2);
  background: var(--surface-solid); border: 0.5px solid var(--separator); padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.agg-flight { margin-top: 10px; }
.agg-flight .flight-title { font-size: 14px; margin-bottom: 4px; }

/* Stjernevelger i hotellskjema */
.star-pick { display: inline-flex; gap: 3px; align-items: center; height: 46px; }
.star-btn { color: var(--separator-strong); line-height: 0; padding: 2px; transition: transform .15s, color .15s; }
.star-btn.on { color: var(--yellow); }
.star-btn:hover { transform: scale(1.15); }
.star-btn svg { width: 26px; height: 26px; }

/* Rombilder i hotellskjema */
.room-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.room-photos:not(:empty) { margin-bottom: 10px; }
.room-photo { position: relative; display: flex; flex-direction: column; gap: 6px; }
.room-photo-img { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--separator); }
.room-photo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-cap { font-size: 12.5px; padding: 7px 9px; }
.room-del { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; background: rgba(0,0,0,0.55); color: #fff; transition: background .18s; }
.room-del svg { width: 14px; height: 14px; }
.room-del:hover { background: rgba(0,0,0,0.78); }
.field-hint { font-weight: 400; color: var(--label-3); font-size: 12px; }

/* Activities */
.act-list { display: flex; flex-direction: column; gap: 11px; }
.act-card { display: flex; gap: 13px; align-items: flex-start; background: var(--surface-2);
  border-radius: var(--radius-tile); padding: 14px; animation: cardIn .35s var(--ease-out) both; }
.act-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--surface-solid); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.act-ic svg { width: 20px; height: 20px; }
/* Opplastet bilde på et gjøremål — størrelse styres av --act-img-size (innstilling) */
.act-ic-photo { width: var(--act-img-size, 64px); height: var(--act-img-size, 64px); border-radius: 12px; overflow: hidden; background: var(--surface-solid); }
.act-ic-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bilde-velger i gjøremål-skjemaet */
.act-photo-edit { display: flex; align-items: center; gap: 12px; }
.act-photo-prev { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex: 0 0 auto;
  background: var(--surface-2); display: grid; place-items: center; border: 1px solid var(--separator); }
.act-photo-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act-photo-empty { color: var(--label-3); display: grid; place-items: center; }
.act-photo-empty svg { width: 24px; height: 24px; }
.act-photo-btns { display: flex; flex-direction: column; gap: 6px; }
.act-body { flex: 1; min-width: 0; }
.act-name { font-size: 15.5px; font-weight: 600; }
.act-desc { color: var(--label-2); font-size: 14px; margin-top: 2px; line-height: 1.45; }
.act-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; align-items: center; margin-top: 9px; color: var(--label-3); font-size: 12.5px; }
.act-meta span { display: inline-flex; align-items: center; gap: 4px; }
.act-meta svg { width: 13px; height: 13px; }
.type-chip { background: var(--fill-tertiary); color: var(--label-2); border-radius: var(--ui-pill-radius, 999px); padding: 2px 9px; font-weight: 550; }

/* Day plan */
.philo { display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-tile);
  background: linear-gradient(120deg, rgba(255,138,101,0.13), rgba(124,92,196,0.13)); font-size: 13.5px;
  color: var(--label); margin-bottom: 18px; line-height: 1.5; border: 0.5px solid var(--separator); }
.philo svg { width: 19px; height: 19px; color: var(--pink); flex-shrink: 0; margin-top: 1px; }
.timeline { display: flex; flex-direction: column; }
.day-card { display: flex; gap: 14px; padding-bottom: 6px; }
.day-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.day-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  font-size: 15px; color: #fff; background: var(--accent); z-index: 1; }
.day-card.free .day-num { background: var(--grey); }
.day-rail::after { content: ""; flex: 1; width: 2px; background: var(--separator); margin: 4px 0 -4px; }
.day-card:last-child .day-rail::after { display: none; }
.day-main { flex: 1; min-width: 0; background: var(--surface-2); border-radius: var(--radius-tile);
  padding: 13px 15px; margin-bottom: 14px; animation: cardIn .35s var(--ease-out) both; }
.day-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.day-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650;
  padding: 3px 10px; border-radius: var(--ui-pill-radius, 999px); }
.day-kind svg { width: 13px; height: 13px; }
.day-kind.active { background: rgba(var(--accent-rgb),0.14); color: var(--accent); }
.day-kind.free { background: rgba(255,159,10,0.16); color: #c77700; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .day-kind.free { color: #ffc463; } }
.day-title { font-size: 15.5px; font-weight: 650; margin-top: 9px; letter-spacing: -0.01em; }
.day-items { margin: 9px 0 0; padding-left: 18px; color: var(--label-2); font-size: 14px; line-height: 1.6; }
.day-items li { margin-bottom: 2px; }
.day-empty { color: var(--label-3); font-size: 13.5px; margin-top: 8px; font-style: italic; }

/* Checkboxes (sheet) */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check { display: flex; align-items: center; gap: 9px; background: var(--surface-2); border-radius: var(--radius-control);
  padding: 11px 13px; font-size: 15px; cursor: pointer; user-select: none; transition: background .2s; }
.check:hover { background: var(--fill-tertiary); }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--separator-strong);
  display: grid; place-items: center; color: transparent; transition: all .2s var(--ease-spring); flex-shrink: 0; }
.check .box svg { width: 14px; height: 14px; }
.check input:checked + .box { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ==========================================================================
   In-app fanerad (åpne reisemål per land) — inline OVER bildekortet, ikke
   sticky topbar. Land-pille + åpne reisemål med ×.
   ========================================================================== */
.dest-tabs { display: flex; align-items: center; gap: 6px; overflow-x: auto;
  scrollbar-width: none; padding: 4px 0 10px; }
.dest-tabs::-webkit-scrollbar { display: none; }
.dest-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--ui-pill-radius, 999px);
  font-size: calc(13px * var(--tab-scale, 1)); font-weight: var(--tab-weight, 600); letter-spacing: -0.01em;
  color: var(--label-2); background: var(--fill-tertiary); white-space: nowrap; cursor: pointer; user-select: none;
  border: 0.5px solid transparent; transition: background .18s, color .18s, transform .15s var(--ease-spring);
}
.dest-tab:hover { background: var(--separator); }
.dest-tab:active { transform: scale(0.97); }
.dest-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.dest-tab .dest-tab-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.dest-tab.is-active { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); border-color: rgba(var(--accent-rgb), 0.22); }
.dest-tab-close {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  margin-right: -4px; color: var(--label-3); transition: background .15s, color .15s;
}
.dest-tab-close:hover { background: var(--separator-strong); color: var(--label); }
.dest-tab-close svg { width: 13px; height: 13px; }

/* Innstillinger / tilpasning — sidebar (Bilder / Typografi / UI) */
.settings-img-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Kompakte, pilleformede knapper (ikke fullbredde) i bilde-seksjonen. */
.settings-img-actions .btn-block { flex: 0 0 auto; width: auto; }
.settings-img-actions .btn { padding: 8px 14px; font-size: 12.5px; white-space: nowrap; }
.settings-img-actions .btn svg { width: 16px; height: 16px; }
.settings-img-actions .btn-plain { padding: 8px 8px; }
.range { width: 100%; accent-color: var(--accent); height: 30px; cursor: pointer; }

.settings-shell { display: flex; gap: 16px; align-items: flex-start; padding: 4px 0 8px; }
.settings-nav { display: flex; flex-direction: column; gap: 4px; flex: 0 0 132px; }
.settings-navbtn { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--label-2); text-align: left; transition: background .18s, color .18s; }
.settings-navbtn svg { width: 18px; height: 18px; flex-shrink: 0; }
.settings-navbtn:hover { background: var(--fill-quaternary); color: var(--label); }
.settings-navbtn.is-active { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
/* Undergrupper under hvert sidemeny-element (vises kun for aktivt element) */
.settings-navgroup { display: flex; flex-direction: column; }
.settings-subnav { display: none; flex-direction: column; gap: 1px; margin: 3px 0 6px 13px;
  padding-left: 10px; border-left: 1.5px solid var(--separator); }
.settings-navgroup.is-open .settings-subnav { display: flex; }
.settings-subbtn { text-align: left; padding: 6px 9px; border-radius: 8px; font-size: 12.5px;
  font-weight: 550; color: var(--label-3); transition: background .15s, color .15s; }
.settings-subbtn:hover { background: var(--fill-quaternary); color: var(--label); }
.settings-subbtn.is-active { color: var(--accent); }

.settings-content { flex: 1; min-width: 0; }
.settings-section { display: none; animation: viewIn .25s var(--ease-out) both; }
.settings-section.is-active { display: block; }
.settings-h { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.settings-note { font-size: 12.5px; color: var(--label-3); margin-bottom: 14px; line-height: 1.45; }
/* Sammenleggbar gruppe (accordion via <details>) */
.settings-group { border: 0.5px solid var(--separator); border-radius: 14px; padding: 0 14px; margin-bottom: 12px; }
.settings-group-h { font-size: 12px; font-weight: 700; color: var(--label-3); letter-spacing: 0.01em;
  padding: 11px 0; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.settings-group-h::-webkit-details-marker { display: none; }
.settings-group-h::after { content: ""; width: 7px; height: 7px; flex: 0 0 auto;
  border-right: 2px solid var(--label-3); border-bottom: 2px solid var(--label-3);
  transform: rotate(-45deg); transition: transform .2s var(--ease-out); margin-right: 2px; }
.settings-group[open] > .settings-group-h::after { transform: rotate(45deg); }
.settings-group[open] > .settings-group-h { color: var(--label-2); }
.settings-group-body { padding-bottom: 8px; animation: viewIn .2s var(--ease-out) both; }
/* Fargevelger i en settings-pair */
.settings-color { -webkit-appearance: none; appearance: none; flex: 0 0 auto; margin-left: auto;
  width: 48px; height: 30px; padding: 0; border: 0.5px solid var(--separator-strong); border-radius: 8px;
  background: none; cursor: pointer; }
.settings-color::-webkit-color-swatch-wrapper { padding: 2px; }
.settings-color::-webkit-color-swatch { border: none; border-radius: 6px; }
.settings-section [data-reset-colors] { margin-top: 2px; }
.settings-pair { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.settings-pair + .settings-pair { border-top: 0.5px solid var(--separator); }
.settings-pair-l { flex: 0 0 78px; font-size: 13px; color: var(--label-2); font-weight: 550; }
.settings-pair .range { flex: 1; }
.settings-pair select.input { flex: 0 0 100px; margin-left: auto; }
.settings-pair .settings-toggle { margin-left: auto; }
/* Innholds-felt (tekst) i en settings-seksjon — gjenbruker .field men strammere. */
.settings-section .field { margin-bottom: 10px; }

/* iOS-aktig av/på-bryter (gjenbrukbar i Innstillinger) */
.settings-toggle { position: relative; display: inline-block; width: 44px; height: 26px; flex: 0 0 auto; }
.settings-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.settings-toggle span { position: absolute; inset: 0; border-radius: 99px; background: var(--fill-tertiary); transition: background .2s; }
.settings-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform .2s; }
.settings-toggle input:checked + span { background: var(--accent); }
.settings-toggle input:checked + span::after { transform: translateX(18px); }

@media (max-width: 560px) {
  .settings-shell { flex-direction: column; gap: 10px; }
  .settings-nav { flex-direction: row; flex: none; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-navgroup { flex-direction: row; flex: 0 0 auto; }
  .settings-navbtn { flex: 0 0 auto; }
  .settings-subnav { display: none !important; }   /* på mobil: bruk accordion inni panelet */
}

/* ==========================================================================
   Chat assistant
   ========================================================================== */
.chat-fab { position: fixed; right: 22px; bottom: calc(22px + var(--safe-bottom)); z-index: 90;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--accent-light), var(--accent)); box-shadow: var(--shadow-fab);
  transition: transform .25s var(--ease-spring), opacity .2s; }
.chat-fab:hover { transform: scale(1.06); }
.chat-fab:active { transform: scale(0.92); }
.chat-fab svg { width: 30px; height: 30px; }
.chat-fab.hidden { opacity: 0; transform: scale(0.4); pointer-events: none; }

.chat-panel { position: fixed; right: 22px; bottom: calc(22px + var(--safe-bottom)); z-index: 95;
  width: min(390px, calc(100vw - 32px)); height: min(580px, calc(100vh - 100px));
  background: var(--surface-solid); border: 0.5px solid var(--separator); border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.1); display: flex; flex-direction: column;
  overflow: hidden; transform-origin: bottom right;
  opacity: 0; transform: scale(0.5) translateY(30px); pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .38s var(--ease-spring); }
.chat-panel.open { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 480px){ .chat-panel { right: 12px; left: 12px; width: auto; bottom: 12px; height: min(72vh, 600px); } }

.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 14px 12px 16px; border-bottom: 0.5px solid var(--separator); }
.chat-id { display: flex; align-items: center; gap: 11px; }
.chat-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, #ff8a65, #ff6384 55%, #7c5cc4); flex-shrink: 0; }
.chat-avatar svg { width: 22px; height: 22px; }
.chat-name { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.chat-status { font-size: 12px; color: var(--label-3); display: flex; align-items: center; gap: 5px; }
.chat-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }

.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.chat-msg { display: flex; max-width: 86%; }
.chat-msg.user { align-self: flex-end; }
.chat-msg.bot { align-self: flex-start; }
.bubble { padding: 10px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; word-wrap: break-word; white-space: normal; }
.chat-msg.bot .bubble { background: var(--surface-2); color: var(--label); border-bottom-left-radius: 6px; }
.chat-msg.user .bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.bubble.typing { display: flex; gap: 4px; padding: 14px; }
.bubble.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--label-3); animation: typing 1.2s infinite; }
.bubble.typing span:nth-child(2){ animation-delay: .2s; } .bubble.typing span:nth-child(3){ animati
/* ---- login (web-versjonen, travel.j-hk.no) ------------------------------- */
.login-screen { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(360px, 100%); text-align: center; display: grid; gap: 12px;
  background: var(--bg-secondary, var(--fill-tertiary)); border-radius: var(--ui-card-radius, 16px);
  padding: 36px 28px; }
.login-title { font-size: 28px; font-weight: var(--home-title-weight, 700); margin: 0; }
.login-sub { color: var(--label-2); margin: 0 0 8px; }
.login-err { color: #d93025; font-size: 14px; margin: 0; }
.login-btn { width: 100%; justify-content: center; }