/* Stijl: zakelijk en licht, in de kleuren van de kaart (sinds 2026-10-14): warm gebroken wit zoals het land,
   petrolblauw als accent (het water, donkerder), leisteen voor tekst, saliegroen en terracotta voor goed/fout. */

:root {
  --paper: #f8f7f3;
  --surface: #ffffff;
  --surface-2: #efeee8;
  --ink: #1d2a30;
  --muted: #5f6c72;
  --line: #e2e1da;
  --red: #2b6a80;
  --red-soft: #e3eef1;
  --brand: #2b6a80;
  --brand-dark: #21566a;
  --navy: #1d2a30;
  --navy-soft: #eceee9;
  --good: #2f7a45;
  --bad: #b4472c;
  --on-brand: #ffffff;
  --warn-soft: #f8e9e3;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .06);
  --shadow: 0 6px 20px rgba(0, 0, 0, .12);
  --serif: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sans: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12171a;
    --surface: #1a2125;
    --surface-2: #232b30;
    --ink: #eef2f2;
    --muted: #9eabb0;
    --line: #2f383d;
    --red: #7cbcd1;
    --red-soft: #1c3139;
    --brand: #7cbcd1;
    --brand-dark: #9ccfe0;
    --on-brand: #0e1a1f;
    --warn-soft: #3a241d;
    --navy: #eef2f2;
    --navy-soft: #232b30;
    --good: #6cc28a;
    --bad: #f08a6c;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
    --shadow: 0 6px 20px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

img { max-width: 100%; display: block; }
a { color: var(--navy); }
button { font: inherit; color: inherit; cursor: pointer; }



/* ---------- kop ---------- */

.topbar {
  display: flex; align-items: baseline; gap: 12px;
  max-width: 1080px; margin: 0 auto;
  padding: 26px 16px 6px;
}
.brand {
  margin: 0; font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.1; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.text-btn {
  border: none; background: none; padding: 2px 0; flex-shrink: 0; font-family: var(--sans);
  font-size: .8125rem; font-weight: 500; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line);
}
.text-btn:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---------- tabs ---------- */

.tabs {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 22px;
  overflow-x: auto; scrollbar-width: none;
  padding: 0 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex-shrink: 0;
  padding: 14px 0 12px;
  border: none; border-bottom: 2px solid transparent; background: none;
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: .9375rem;
  white-space: nowrap; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--red); font-weight: 600; }
.tab.add { color: var(--muted); font-size: 1.15rem; line-height: 1; padding-left: 2px; padding-right: 2px; }

/* ---------- inhoud ---------- */

.panel { max-width: 1080px; margin: 0 auto; padding: 8px 16px calc(64px + var(--safe-b)); min-height: 50vh; }
.loading { color: var(--muted); padding: 40px 0; text-align: center; }

.section-head { margin: 26px 0 18px; max-width: 720px; }
.section-head h2 {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px;
  margin: 0; font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.15;
}
.section-intro { margin: 8px 0 0; color: var(--muted); white-space: pre-line; }

.label {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 32px 0 12px;
  display: flex; align-items: center; gap: 12px;
}
.label::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.hint { margin: 0; color: var(--muted); font-size: .9375rem; }

/* toevoegen */
.add-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 22px; padding: 12px 18px;
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: .9375rem;
  transition: transform .1s, background .15s, border-color .15s;
}
.add-cta:hover { background: var(--red); border-color: var(--red); }
.add-cta:active { transform: translateY(1px); }
.add-cta-plus { font-size: 1.1rem; line-height: 1; }

.empty {
  color: var(--muted); padding: 24px 0; border-top: 1px solid var(--line);
  font-family: var(--serif); font-style: italic; font-size: 1.0625rem;
}
.empty p { margin: 0 0 12px; }

/* ---------- kaarten ---------- */

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  transition: border-color .15s;
}
.card:hover { border-color: var(--muted); }
.card:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.card-media { aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { position: relative; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-hint {
  position: absolute; right: 16px; top: 18px;
  font-size: .75rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  opacity: 0; transition: opacity .15s;
}
.card:hover .card-hint, .card:focus-visible .card-hint { opacity: 1; }
@media (hover: none) { .card-hint { opacity: .85; } }

.card-sub { font-family: var(--mono); font-size: .75rem; letter-spacing: .03em; color: var(--muted); padding-right: 70px; }
.card-title { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.35rem; line-height: 1.2; padding-right: 70px; }
.added-by { font-size: .8125rem; color: var(--muted); font-style: italic; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.price {
  display: inline-block; font-family: var(--mono); font-weight: 600; font-size: .8125rem;
  padding: 2px 7px; border: 1px solid var(--navy); color: var(--navy); border-radius: 3px;
  white-space: nowrap;
}
.stars { color: var(--red); letter-spacing: 2px; font-size: .875rem; }
.stars .off { color: var(--line); }
.card-text { margin: 0; white-space: pre-line; }
.pc { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: .9375rem; }
.pc li { display: flex; gap: 8px; }
.pc li::before { font-family: var(--mono); font-weight: 600; flex-shrink: 0; width: 1em; }
.pc.pros li::before { content: '+'; color: var(--good); }
.pc.cons li::before { content: '–'; color: var(--bad); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .8125rem; padding: 2px 8px; border-radius: 3px;
  background: var(--surface-2); color: var(--ink); text-decoration: none;
}
a.chip:hover { background: var(--navy-soft); }

.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line);
}
.like {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; padding: 4px 0;
  font-family: var(--mono); font-size: .875rem; color: var(--muted);
}
.like .heart { font-size: 1.05rem; line-height: 1; }
.like.on { color: var(--red); }
.like:active { transform: scale(.94); }
.link-btn {
  font-size: .875rem; font-weight: 600; color: var(--navy);
  text-decoration: underline; text-underline-offset: 3px;
}

/* beste keuze: stempel */
.card.best { border-color: var(--red); }
.badge-best {
  align-self: flex-start;
  font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); border: 1.5px solid var(--red); border-radius: 3px;
  padding: 2px 7px; transform: rotate(-2deg);
}
.feature { margin-bottom: 4px; }
@media (min-width: 760px) {
  .feature { flex-direction: row; }
  .feature .card-media { aspect-ratio: auto; flex: 0 0 50%; min-height: 340px; }
  .feature .card-body { padding: 26px 28px; gap: 12px; }
  .feature .card-title { font-size: 1.8rem; }
}

/* reizen: als een ticket */
.card.trip .card-body { gap: 12px; }
.trip-picks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.trip-pick {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.trip-pick:hover .trip-pick-text { color: var(--navy); }
.trip-pick-icon { font-size: 1.1rem; flex-shrink: 0; width: 1.5em; text-align: center; }
.trip-pick-text { display: grid; flex: 1; min-width: 0; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.trip-pick-text small { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.trip-pick .price { justify-self: start; margin-top: 5px; }
.trip-picks-form { display: grid; gap: 14px; }

/* ---------- kaart: centrale plek ---------- */

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tab-map span { font-size: .95em; }

.route-map .panel { max-width: none; padding: 0; min-height: 0; }
.mapview { display: block; }
.map-stage { position: relative; }
.map {
  height: min(60dvh, 560px); min-height: 340px;
  background: var(--surface-2); z-index: 0;
  border-bottom: 1px solid var(--line);
}
.planner { padding: 18px 16px calc(64px + var(--safe-b)); display: grid; gap: 14px; align-content: start; }

@media (min-width: 960px) {
  body.route-map { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body.route-map > .topbar, body.route-map > .tabs { flex: none; }
  body.route-map > .tabs { position: relative; }
  .route-map .panel { flex: 1; min-height: 0; width: 100%; }
  .mapview { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 440px); height: 100%; }
  .map-stage, .map { height: 100%; min-height: 0; }
  .map { border-bottom: none; }
  .planner { overflow-y: auto; border-left: 1px solid var(--line); background: var(--paper); padding: 20px 22px 40px; }
}

.map .leaflet-tile-pane { filter: saturate(.7) sepia(.15); }
@media (prefers-color-scheme: dark) { .map .leaflet-tile-pane { filter: saturate(.5) brightness(.75); } }
.map-error { display: grid; place-items: center; height: 100%; color: var(--muted); }

.map-hint {
  position: absolute; left: 12px; bottom: 26px; z-index: 400;
  padding: 5px 9px; border-radius: 4px; pointer-events: none;
  background: var(--surface); border: 1px solid var(--line);
  font-size: .8125rem; color: var(--ink);
}
@media (max-width: 600px) { .map-hint { display: none; } }

/* zoekveld op de kaart */
.map-search {
  position: absolute; z-index: 1000; top: 12px; left: 12px; right: 12px; max-width: 440px;
}
.map-search input {
  width: 100%; height: 48px; padding: 0 14px 0 42px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(20, 16, 8, .18);
  -webkit-appearance: none; appearance: none;
}
.map-search input:focus { outline: 2px solid var(--navy); outline-offset: 0; border-color: transparent; }
.map-search-icon {
  position: absolute; left: 14px; top: 24px; transform: translateY(-52%);
  font-size: 1.3rem; color: var(--muted); pointer-events: none;
}
.place-results {
  list-style: none; margin: 6px 0 0; padding: 4px; max-height: min(50vh, 360px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(20, 16, 8, .22);
}
.place-results [role="option"] {
  display: grid; gap: 1px; padding: 10px 12px; border-radius: 6px; cursor: pointer;
}
.place-results [role="option"] strong { font-weight: 600; }
.place-results [role="option"] small { color: var(--muted); font-size: .8125rem; }
.place-results [role="option"] em { font-style: normal; color: var(--red); font-size: .75rem; font-weight: 600; }
.place-results [aria-selected="true"], .place-results [role="option"]:hover { background: var(--navy-soft); }
.place-status { padding: 10px 12px; color: var(--muted); font-size: .875rem; }

/* zoomknoppen */
.leaflet-bar a { background: var(--surface); color: var(--ink); border-bottom-color: var(--line); }
.leaflet-bar a:hover { background: var(--surface-2); }
.leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }

/* pinnen met nummer */
.pin-icon { background: none; border: none; }
.pin-icon:focus-visible { outline: none; }
.pin-icon:focus-visible .pin::before { outline: 3px solid var(--ink); outline-offset: 2px; }
.pin { width: 32px; height: 42px; position: relative; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); transition: transform .15s; transform-origin: 50% 100%; }
.pin::before {
  content: ''; position: absolute; left: 3px; top: 2px; width: 26px; height: 26px;
  background: var(--navy); border: 2px solid #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
}
.pin span {
  position: absolute; left: 3px; top: 3px; width: 26px; height: 26px;
  display: grid; place-items: center; color: #fff;
  font: 700 .75rem/1 var(--sans); font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) { .pin span { color: var(--paper); } }
.pin.best::before { background: var(--red); }
.pin.active { transform: scale(1.22); }
.pin.active::before { background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 30%, transparent); }
.pin-icon.hover .pin { transform: scale(1.15); }
.landed .pin { animation: land .6s ease-out; }
@keyframes land { 0% { transform: translateY(-8px) scale(1.15); } 60% { transform: translateY(0) scale(.95); } 100% { transform: none; } }

.leaflet-tooltip.pin-label {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12); padding: 2px 7px; font: 600 .75rem/1.3 var(--sans); text-align: center;
  cursor: pointer;
}
.leaflet-tooltip.pin-label small { display: block; font: 500 .625rem var(--mono); color: var(--muted); }
.leaflet-tooltip.pin-label::before { display: none; }

.flight-line { stroke: var(--red); stroke-dasharray: 2 7; stroke-linecap: round; fill: none; opacity: .85; }
.flight-trail { stroke: var(--red); stroke-linecap: round; fill: none; }
.plane-icon { background: none; border: none; }
.plane { color: var(--ink); line-height: 0; transform-origin: center; }
@media (prefers-color-scheme: dark) { .plane { color: #fff; } }

.leaflet-container { font-family: var(--sans); }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }

/* ---------- planner (lijst met bestemmingen) ---------- */

.when-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--navy-soft); color: var(--ink); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--navy) 25%, transparent);
}
.when-strip:hover { border-color: var(--navy); }
.when-strip > span:nth-child(2) { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.when-strip strong { font-weight: 600; }
.when-strip small { color: var(--muted); font-size: .8125rem; }
.when-icon { font-size: 1.3rem; }
.when-go { font-size: 1.1rem; color: var(--navy); }

.planner-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
.planner-head h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.5rem; display: flex; align-items: center; gap: 8px; }
.count-pill {
  font: 600 .75rem var(--mono); padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
}
.planner-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.planner .label { margin: 12px 0 0; }

.dest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dest {
  display: flex; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.dest:hover { border-color: var(--muted); }
.dest.best { border-color: var(--red); }
.dest.active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.dest-main {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  border: none; background: none; padding: 12px; text-align: left; border-radius: var(--radius);
}
.dest-main:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.dest-thumb {
  position: relative; width: 56px; height: 56px; flex-shrink: 0; border-radius: 10px; overflow: hidden;
  background: var(--navy-soft);
}
.dest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dest-num {
  position: absolute; left: 4px; top: 4px; min-width: 22px; height: 22px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--navy); color: var(--surface); font: 700 .75rem var(--sans); border: 2px solid var(--surface);
}
.dest.best .dest-num { background: var(--red); }
.dest-thumb:not(:has(img)) .dest-num { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; font-size: .875rem; }
.dest-text { display: grid; gap: 6px; min-width: 0; flex: 1; }
.dest-text strong { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.dest-steps { display: flex; flex-wrap: wrap; gap: 4px; }
.step-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .75rem; padding: 2px 6px 2px 5px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); white-space: nowrap;
}
.step-chip.ok { background: color-mix(in srgb, var(--good) 14%, var(--surface)); color: var(--ink); }
.step-chip.ok > span[aria-hidden] { color: var(--good); }
.step-chip .ic { width: 13px; height: 13px; }
.dest-done { font-size: .75rem; font-weight: 600; color: var(--good); }
.step-chip .warn, .warn { color: var(--bad); font-weight: 600; }
.dest-go { display: none; } /* het hele kaartje is klikbaar */
.dest-side {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 12px 8px 0;
}
.progress { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--good); border-radius: 3px; }
.progress.lg { width: 100%; height: 6px; }

.onboarding { margin: 0; padding: 0 0 0 22px; display: grid; gap: 10px; color: var(--muted); }
.onboarding strong { color: var(--ink); }

/* ---------- planpaneel ---------- */

#pinDialog[open] { display: flex; flex-direction: column; }
#pinTitle:focus { outline: none; }
.plan-sheet { width: min(600px, 100vw); }
.plan-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.plan-head > div { display: grid; min-width: 0; }
.plan-head h2 { overflow-wrap: anywhere; }
.plan-kicker { font: 600 .6875rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.plan-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--red); color: var(--surface); display: grid; place-items: center; font: 700 .875rem var(--sans);
}
.plan-num span { transform: rotate(45deg); }
.plan-num[hidden] { display: none; }
.sheet-head-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.pin-body { gap: 12px; }
.pin-body section { display: grid; gap: 8px; }

/* niet-modaal zijpaneel op een breed scherm */
#pinDialog.side {
  position: fixed; margin: 0; max-width: none; max-height: none; z-index: 900;
  border-radius: 0; border-width: 0 0 0 1px; box-shadow: -10px 0 30px rgba(20, 16, 8, .12);
  animation: side-in .18s ease-out;
}
@keyframes side-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }

.plan-top { display: grid; gap: 12px; }
.plan-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 7; background: var(--surface-2); }
.plan-img img { width: 100%; height: 100%; object-fit: cover; }
.plan-meta { display: grid; gap: 6px; }
.plan-status { font-size: .8125rem; color: var(--muted); }

.step { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.step[open] { border-color: var(--muted); }
.step summary {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none;
  border-radius: var(--radius); min-height: 56px;
}
.step summary::-webkit-details-marker { display: none; }
.step summary::after { content: '›'; margin-left: auto; font-size: 1.4rem; color: var(--muted); transition: transform .15s; line-height: 1; }
.step[open] summary::after { transform: rotate(90deg); }
.step summary:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.step-icon {
  width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-2); font-size: 1rem;
}
.step.done .step-icon { background: var(--good); color: var(--surface); font-weight: 700; }
.step-title { display: grid; min-width: 0; font-weight: 600; line-height: 1.3; }
.step-title small { font-weight: 400; color: var(--muted); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-body { display: grid; gap: 10px; padding: 0 14px 14px; }
.step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mini-label {
  margin: 4px 0 0; font: 600 .6875rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.when-chosen { display: grid; gap: 6px; }
.window-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.window {
  position: relative; display: grid; gap: 1px; text-align: left;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.window:hover { border-color: var(--navy); }
.window.on { border-color: var(--good); box-shadow: inset 0 0 0 1px var(--good); background: color-mix(in srgb, var(--good) 10%, var(--surface)); }
.window small { color: var(--muted); font-size: .75rem; }
.window-tag { font: 600 .625rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.date-row input { font: inherit; }

.chosen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chosen li { display: flex; align-items: center; gap: 6px; }
.chosen-main {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left;
  padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--good) 45%, var(--line)); border-radius: var(--radius);
  background: color-mix(in srgb, var(--good) 8%, var(--surface));
}
.chosen-main > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.chosen-main strong { font-weight: 600; overflow-wrap: anywhere; }
.chosen-main small { color: var(--muted); font-size: .75rem; }
.icon-btn.sm { width: 34px; height: 34px; font-size: .8rem; color: var(--muted); }

.plan-trip { border-top: 1px dashed var(--line); padding-top: 12px; }
.plan-trip-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-trip-row > span { display: grid; }
.plan-trip-row strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }

.sheet-label {
  margin: 0; font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.result { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.result-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.result-main strong { font-weight: 600; overflow-wrap: anywhere; }
.result-main small { color: var(--muted); font-size: .8125rem; }
.result-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8125rem; margin-top: 2px; }
.result-links a { color: var(--navy); }
.result .btn { flex-shrink: 0; }
.btn.done { color: var(--good); border-color: transparent; background: none; opacity: 1; }
.fineprint { margin: 0; font-size: .75rem; color: var(--muted); }
.loading-dots::after { content: '…'; display: inline-block; animation: dots 1.2s steps(4, end) infinite; overflow: hidden; vertical-align: bottom; width: 0; }
@keyframes dots { to { width: 1.2em; } }

/* gekoppelde vlucht/hotel */
.linked { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.linked button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: none; border-bottom: 1px solid var(--line); background: none; padding: 9px 0;
}
.linked button > span:nth-child(2) { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.linked button:hover > span:nth-child(2) { color: var(--navy); }
button.chip { border: none; cursor: pointer; font: inherit; font-size: .8125rem; }
button.chip:hover { background: var(--navy-soft); }

/* reisvenster: vinkjes per tab */
.pick-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px 8px; margin: 0; display: grid; max-height: 220px; overflow-y: auto; }
.pick-group legend { font-size: .8125rem; font-weight: 600; color: var(--muted); padding: 0 4px; }
.sheet label.pick {
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; cursor: pointer;
  font-size: .9375rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line);
}
.sheet label.pick:last-child { border-bottom: none; }
.sheet label.pick input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--red); flex-shrink: 0; padding: 0; }
.sheet label.pick span { display: grid; gap: 1px; }
.sheet label.pick .price { justify-self: start; }
.sheet label.pick small { color: var(--muted); font-weight: 400; }

/* terug naar de kaart vanuit de datumprikker */
.return-bar {
  position: sticky; top: 52px; z-index: 15; margin: 16px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 10px 12px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--ink); box-shadow: 0 4px 14px rgba(20, 16, 8, .12);
}
.return-bar span { font-weight: 600; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 22px; }
.cta-row .add-cta { margin: 0; text-decoration: none; }

/* ---------- datumprikker ---------- */

.poll-name { display: grid; gap: 6px; max-width: 320px; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.poll-name input {
  font: inherit; font-size: 16px; color: var(--ink); padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.poll-name input:focus { outline: 2px solid var(--navy); outline-offset: -1px; border-color: transparent; }

.best-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.best-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.best-row.top { border-color: var(--ink); }
.best-row.top strong::before { content: 'Beste keuze'; display: block; font: 600 .65rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 2px; }
.best-main { display: grid; gap: 4px; flex: 1; min-width: 0; }
.best-main strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.best-main small { color: var(--muted); }
.chip.ok { background: color-mix(in srgb, var(--good) 18%, var(--surface)); }
.chip.part { background: var(--surface-2); color: var(--muted); }
.chip.no { background: none; color: var(--muted); text-decoration: line-through; }

.months { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.month-title { margin: 0 0 8px; font-family: var(--serif); font-weight: 600; font-size: 1.1rem; text-transform: capitalize; }
.cal { display: grid; grid-template-columns: 28px repeat(7, 1fr); gap: 4px; }
.dow { font: 600 .6875rem var(--mono); text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 2px; }
.wk {
  border: none; background: none; padding: 0; font: .6875rem var(--mono); color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px;
}
.wk:disabled { visibility: hidden; }
.day {
  position: relative; aspect-ratio: 1; min-height: 38px;
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 4px;
  background: color-mix(in srgb, var(--navy) calc(var(--heat) * 55%), var(--surface));
  color: var(--ink); font-size: .875rem; font-variant-numeric: tabular-nums;
}
.day.out { border: none; background: none; }
.day.off { opacity: .35; cursor: default; }
.day .dcount {
  position: absolute; right: 3px; bottom: 1px; font: 600 .625rem var(--mono); color: var(--muted);
}
.day.mine { border: 2px solid var(--ink); font-weight: 700; }
.day.mine::after {
  content: '✓'; position: absolute; left: 3px; top: 0; font-size: .625rem; font-weight: 700; color: var(--ink);
}
.day.trip-ok { box-shadow: inset 0 -3px 0 var(--good); }
.day.trip-conflict { box-shadow: inset 0 -3px 0 var(--bad); }
@media (prefers-color-scheme: dark) {
  .day { background: color-mix(in srgb, var(--navy) calc(var(--heat) * 45%), var(--surface)); }
}

.planned { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.planned-row {
  display: grid; gap: 2px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--line); border-left: 4px solid var(--good); border-radius: var(--radius); background: var(--surface);
}
.planned-row span { color: var(--muted); font-size: .875rem; }
.planned-row small { color: var(--good); }
.planned-row.conflict { border-left-color: var(--bad); background: var(--warn-soft); }
.planned-row.conflict small { color: var(--bad); }

.people { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.people li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.people li span { flex: 1; font-weight: 500; }
.people li small { color: var(--muted); font-family: var(--mono); font-size: .75rem; }

/* reis valt op dagen dat iemand niet kan */
.trip-dates { font-family: var(--mono); font-size: .8125rem; color: var(--ink); }
.conflict-note, .date-warn.conflict {
  font-size: .875rem; color: var(--red); background: var(--red-soft);
  padding: 8px 10px; border-radius: var(--radius); border-left: 3px solid var(--red);
}
.ok-note, .date-warn.ok { font-size: .875rem; color: var(--good); }
.date-warn { margin: 0; }
.card.trip.conflict { border-color: var(--bad); border-width: 2px; }

/* ---------- stemronde ---------- */

.tab-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
  border-radius: 999px; background: var(--red); color: var(--on-brand); font: 700 .6875rem var(--sans); vertical-align: 1px;
}
.back-link { display: inline-block; margin-top: 22px; font-size: .875rem; color: var(--muted); }
.back-link + .section-head { margin-top: 10px; }

.vote-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius); text-decoration: none; color: var(--ink);
  background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
}
.vote-strip:hover { border-color: var(--red); }
.vote-strip > span:nth-child(2) { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.vote-strip small { color: var(--muted); font-size: .8125rem; }
.vote-strip .when-go { color: var(--red); }
.vote-cta { margin-top: 2px; }

.poll-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 720px; }
.poll-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--radius);
}
.poll-row.closed { border-left-color: var(--muted); }
.poll-row:hover { border-color: var(--muted); }
.poll-row-main { display: grid; flex: 1; min-width: 0; }
.poll-row-main strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.poll-row-main small { color: var(--muted); }
.poll-lead { font-size: .875rem; font-weight: 600; white-space: nowrap; }

.winner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; max-width: 720px; margin-bottom: 18px;
  padding: 16px 18px; border-radius: var(--radius); border: 2px solid var(--red); background: var(--surface);
}
.winner-cup { font-size: 2rem; }
.winner > span:nth-child(2) { display: grid; flex: 1; min-width: 180px; }
.winner small { font: 600 .6875rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.winner strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }

.options { display: grid; gap: 10px; max-width: 720px; margin-top: 14px; }
.option { position: relative; }
.option-main {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.option-main:not(:disabled):hover { border-color: var(--navy); }
.option-main:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.option-main:disabled { cursor: default; opacity: 1; }
.option.on .option-main { border-color: var(--good); box-shadow: inset 0 0 0 1px var(--good); }
.option.closed.lead .option-main { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.option-thumb { position: relative; width: 64px; height: 64px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--navy-soft); }
.option-thumb img { width: 100%; height: 100%; object-fit: cover; }
.option-thumb:not(:has(img)) .dest-num { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; }
.option-text { display: grid; gap: 5px; flex: 1; min-width: 0; }
.option-text strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.option-text small { color: var(--muted); font-size: .8125rem; }
.option-meta { font-size: .8125rem; color: var(--ink); }
.bar { display: block; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 4px; background: var(--navy); transition: width .3s; }
.option.on .bar span, .option.lead .bar span { background: var(--red); }
.option-check {
  width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--line); color: var(--surface); font-weight: 700;
}
.option.on .option-check { background: var(--good); border-color: var(--good); }
.option-map { position: absolute; right: 16px; bottom: 8px; font-size: .75rem; color: var(--navy); }

.share-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); max-width: 980px; }
.share-card {
  display: grid; gap: 8px; align-content: start; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.share-card strong { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; }
.share-card p { margin: 0; font-size: .875rem; color: var(--muted); }
.missing { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.btn.wa { background: #25d366; border-color: #25d366; color: #08250f; }
.btn.wa:hover { background: #1ebe5b; border-color: #1ebe5b; }
.poll-admin { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); max-width: 720px; }

/* ---------- knoppen ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface);
  padding: 9px 14px; border-radius: var(--radius); font-weight: 600; font-size: .9375rem;
  text-decoration: none; color: var(--ink);
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--red); border-color: var(--red); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.danger { color: var(--bad); }
.btn.block { width: 100%; }
.btn.sm { padding: 5px 10px; font-size: .8125rem; }
.btn:disabled { opacity: .4; cursor: default; }
.icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; font-size: .9rem; flex-shrink: 0;
}

/* ---------- vensters ---------- */

.sheet {
  border: 1px solid var(--line); padding: 0; color: var(--ink); background: var(--surface);
  width: min(560px, 100vw); max-width: 100vw; max-height: 92dvh;
  border-radius: 10px; box-shadow: 0 24px 60px rgba(20, 16, 8, .25);
}
.sheet.small { width: min(440px, 100vw); }
.sheet::backdrop { background: rgba(23, 20, 14, .45); }
.sheet form { display: flex; flex-direction: column; max-height: 92dvh; }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--line);
}
.sheet-head h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.25rem; line-height: 1.25; }
.sheet-body { padding: 16px 18px 18px; display: grid; grid-auto-rows: max-content; gap: 14px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.sheet-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px calc(12px + var(--safe-b)); border-top: 1px solid var(--line);
}
.sheet label { display: grid; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.sheet label small { font-weight: 400; }
.sheet label[hidden], .sheet-foot [hidden], .section-extra[hidden] { display: none; }
.sheet input, .sheet textarea, .sheet select {
  font: inherit; font-size: 16px; color: var(--ink);
  width: 100%; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper);
}
.sheet input:focus, .sheet textarea:focus, .sheet select:focus { outline: 2px solid var(--navy); outline-offset: -1px; border-color: transparent; }
.sheet textarea { resize: vertical; }
.sheet label.check {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 12px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line);
  font-size: .9375rem; font-weight: 500; color: var(--ink);
}
.sheet label.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--red); flex-shrink: 0; }
#itemDelete, #tripDelete, #pinDelete { margin-right: auto; }
.row-2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.row-icon { display: grid; gap: 14px; grid-template-columns: 76px 1fr; }
.icon-input { text-align: center; font-size: 1.25rem !important; }
.section-extra { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

.img-field { position: relative; height: clamp(140px, 30vw, 220px); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.img-field img { width: 100%; height: 100%; object-fit: cover; }
.placeholder { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.2rem; opacity: .6; }
.img-edit {
  position: absolute; right: 10px; bottom: 10px;
  border: none; border-radius: var(--radius); padding: 7px 12px; cursor: pointer;
  background: var(--ink); color: var(--paper); font-weight: 600; font-size: .8125rem;
}
.file-btn { cursor: pointer; font-size: .9375rem !important; color: var(--paper) !important; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .8125rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.link-list { display: grid; border-top: 1px solid var(--line); }
.link-option {
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: none; border-bottom: 1px solid var(--line); background: none; padding: 11px 2px;
}
.link-option > span:first-child { display: grid; flex: 1; min-width: 0; }
.link-option small { color: var(--muted); font-size: .75rem; }
.link-option:hover strong { color: var(--navy); }
.link-check { width: 1.2em; color: var(--red); font-weight: 700; text-align: center; }
.link-option.on strong { color: var(--red); }

@media (max-width: 600px) {
  .sheet {
    margin: auto 0 0; width: 100vw; border-radius: 12px 12px 0 0; border-bottom: none;
    animation: sheet-up .22s ease-out;
  }
  .row-2 { grid-template-columns: 1fr; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- melding ---------- */

.toast {
  position: fixed; left: 50%; bottom: calc(20px + var(--safe-b)); z-index: 1000;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--paper);
  padding: 9px 16px; border-radius: var(--radius); font-size: .875rem; font-weight: 500;
  white-space: nowrap; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--bad); color: #fff; }

@media (min-width: 760px) {
  .topbar, .panel { padding-left: 24px; padding-right: 24px; }
  .tabs { padding: 0 max(24px, calc((100vw - 1080px) / 2 + 24px)); gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
.when-range { margin: 0; }

/* melding met knop (bijv. ongedaan maken) */
.toast.has-action { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding-right: 8px; }
.toast-btn {
  font: inherit; font-weight: 600; color: inherit; background: none; cursor: pointer;
  border: 1px solid currentColor; border-radius: 4px; padding: 4px 10px; min-height: 32px;
}
.toast-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* populaire bestemmingen in het zoekveld */
.place-head { padding: 8px 12px 4px; font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.place-results:has(.place-chip) { display: grid; grid-template-columns: 1fr 1fr; }
.place-results:has(.place-chip) .place-head { grid-column: 1 / -1; }

/* eigen kaartknoppen boven de zoomknoppen */
.map-buttons a { display: grid !important; place-items: center; font-size: 1.05rem; text-decoration: none; }
.map-buttons a[aria-pressed="true"] { background: var(--navy-soft); }
.map.sat .leaflet-tile-pane { filter: none; }

/* labels rustiger bij ver uitzoomen */
.map.zoom-far .pin-label small { display: none; }
.map.zoom-world .leaflet-tooltip.pin-label { display: none; }

/* ---------- datumprikker: wie ben jij, snel invullen, vegen ---------- */

.who { display: grid; gap: 10px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); max-width: 560px; }
.who-q { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.who-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn {
  min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 600;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.chip-btn:hover, .chip-btn:focus-visible { border-color: var(--ink); }
.chip-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.who-new { display: flex; gap: 8px; }
.who-new input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--ink); padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.who-new input:focus { outline: 2px solid var(--navy); outline-offset: -1px; border-color: transparent; }
.who-set { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 10px 14px; }

.quick-fill { display: flex; flex-wrap: wrap; gap: 8px; }
.month-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.month-head .month-title { margin: 0; }
.months.locked .day:not(.off) { opacity: .6; }

/* dagen: grotere tikvlakken, vegen in de breedte, duidelijk "ik kan" */
.cal { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.day { min-height: 42px; -webkit-tap-highlight-color: transparent; }
.day.mine { background: color-mix(in srgb, var(--good) 80%, var(--surface)); color: #fff; border-color: var(--good); }
.day.mine::after { color: #fff; font-size: .7rem; }
.day.mine .dcount { color: rgba(255, 255, 255, .85); }
@media (prefers-color-scheme: dark) {
  .day.mine { background: color-mix(in srgb, var(--good) 55%, var(--surface)); color: var(--ink); }
  .day.mine::after, .day.mine .dcount { color: var(--ink); }
}
.day.painting { outline: 3px solid var(--good); outline-offset: -3px; }
.day.painting.paint-off { outline-color: var(--bad); opacity: .6; }
.day:focus-visible, .wk:focus-visible { outline: 3px solid var(--navy); outline-offset: 1px; }

/* meldingen mogen afbreken op smalle schermen */
.toast { white-space: normal; max-width: calc(100vw - 32px); width: max-content; text-align: center; }

/* ---------- mobiel: geen titel, tabs als balk onderaan ---------- */

@media (max-width: 600px) {
  .tabs {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 900;
    gap: 0; padding: 0 0 var(--safe-b);
    border-bottom: none; border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .tab {
    flex: 1 0 64px; min-height: 56px; padding: 6px 4px 7px; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    font-size: .6875rem; line-height: 1.2; text-align: center;
    border-bottom: none; border-top: 3px solid transparent;
  }
  .tab > span[aria-hidden] { font-size: 1.3rem; line-height: 1.1; }
  .tab.active { border-top-color: var(--red); border-bottom: none; }
  .tab.add { flex: 0 0 48px; font-size: 1.4rem; }
  .tab-badge { position: absolute; transform: translate(14px, -16px); }
  .tab { position: relative; }
  .panel { padding-bottom: calc(96px + var(--safe-b)); }
  .planner { padding-bottom: calc(96px + var(--safe-b)); }
  .toast { bottom: calc(76px + var(--safe-b)); }
  dialog .toast { bottom: calc(20px + var(--safe-b)); }
  html { scroll-padding-top: 12px; }
  /* kaart iets hoger nu de titel weg is */
  .map { height: min(64dvh, 600px); }
}

/* ---------- grepen van uitschuifpanelen ---------- */

.sheet-grip { display: none; }
.dest-sheet { display: contents; }
@media (min-width: 601px) and (max-width: 959px) { .dest-sheet { display: block; } }

/* ---------- mobiel: kaart over het hele scherm, lijst en planpaneel schuiven eroverheen ---------- */

@media (max-width: 600px) {
  :root { --tabbar: calc(57px + var(--safe-b)); --peek: 178px; }

  body.route-map { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  .route-map .panel { flex: 1; min-height: 0; width: 100%; padding: 0 0 var(--tabbar); }
  .mapview { position: relative; height: 100%; overflow: hidden; }
  /* de kaart loopt door tot onder de ronde hoeken van het paneel */
  .map-stage { position: absolute; inset: 0 0 calc(var(--peek) - 16px) 0; }
  .map-stage .map { height: 100%; min-height: 0; border-bottom: none; }
  .map .leaflet-bottom { bottom: 16px; }

  .sheet-grip {
    display: grid; place-items: center; flex: none; width: 100%; height: 26px; padding: 0;
    border: none; background: none; touch-action: none; cursor: grab;
  }
  .sheet-grip span { width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
  .sheet-grip:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }

  .dest-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 500;
    display: flex; flex-direction: column; height: var(--peek);
    background: var(--paper); border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(20, 16, 8, .18);
    transition: height .25s ease;
  }
  .dest-sheet.open { height: 86%; }
  .dest-sheet .planner { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 20px; gap: 12px; }
  .dest-sheet:not(.open) .planner { overflow: hidden; }
  /* op de telefoon eerst de bestemmingen, daarna datum en stemmen */
  .dest-sheet .planner-head { order: -2; margin-top: 0; }
  .dest-sheet .planner-head h2 { font-size: 1.25rem; cursor: pointer; }
  .dest-sheet .dest-list, .dest-sheet .onboarding { order: -1; }
  .dest-sheet .onboarding + .btn { order: -1; }

  /* compactere rijen zodat er meer bestemmingen in beeld passen */
  .dest-main { padding: 10px; gap: 10px; }
  .dest-thumb { width: 46px; height: 46px; }
  .dest-text strong { font-size: 1.05rem; }
  .dest-side { padding: 10px 10px 6px 0; }

  /* planpaneel: half over de kaart, omhoog vegen voor het hele scherm */
  #pinDialog.bottom {
    position: fixed; inset: auto 0 0 0; z-index: 1050; margin: 0;
    width: 100vw; max-width: none; height: 56dvh; max-height: none;
    border-radius: 16px 16px 0 0; border-width: 1px 0 0;
    box-shadow: 0 -8px 30px rgba(20, 16, 8, .22);
    transition: height .25s ease;
  }
  #pinDialog.bottom.full { height: calc(100dvh - 28px); }
  #pinDialog.bottom .sheet-head { padding: 0 16px 10px; touch-action: none; }
  .plan-kicker { display: none; }
  .plan-head h2 { font-size: 1.15rem; }
  .plan-num { width: 30px; height: 30px; font-size: .8125rem; }
  #pinDialog .pin-body { padding-top: 12px; }
  #pinDialog .sheet-foot { padding-top: 10px; padding-bottom: calc(10px + var(--safe-b)); }
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn.sm { width: 40px; height: 40px; }

  /* meldingen boven het planpaneel, niet eroverheen */
  body.pin-bottom .toast { bottom: calc(56dvh + 12px); z-index: 1100; }
  /* vliegveld/hotel kiezen: grotere knop voor de duim */
  .result .btn.sm { min-height: 40px; padding: 6px 12px; }
}

/* ---------- mobiel: bestemmingen als veegbare kaartjes in het ingeklapte paneel ---------- */

@media (max-width: 600px) {
  :root { --peek: 186px; }
  .dest-sheet:not(.open) .dest-list {
    position: relative; display: flex; gap: 10px;
    margin: 0 -16px; padding: 2px 16px 8px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    scroll-snap-type: x mandatory; scroll-padding: 0 16px;
  }
  .dest-sheet .planner { grid-auto-rows: max-content; }
  .dest-sheet:not(.open) .dest-list::-webkit-scrollbar { display: none; }
  .dest-sheet:not(.open) .dest { flex: 0 0 calc(100% - 40px); scroll-snap-align: start; }
  .dest-sheet:not(.open) .dest:only-child { flex-basis: 100%; }
  .dest.current { border-color: var(--ink); }
  .dest.current.best { border-color: var(--red); }
}

/* =====================================================================
   Zakelijk thema: strak schreefloos, wit met grijstinten, één accentkleur
   ===================================================================== */

.ic {
  width: 1.2em; height: 1.2em; flex: none; vertical-align: -.24em;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* koppen */
.section-head h2, .card-title, .planner-head h2, .sheet-head h2, .dest-text strong, .month-title,
.best-main strong, .poll-row-main strong, .winner strong, .option-text strong, .share-card strong,
.plan-trip-row strong, .who-q, .plan-head h2 {
  font-family: var(--sans); font-weight: 600; letter-spacing: -.015em;
}
.section-head h2 { font-weight: 700; letter-spacing: -.025em; font-size: clamp(1.6rem, 5vw, 2rem); align-items: center; }
.head-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); font-size: 1.25rem; }
.planner-head h2 { font-weight: 700; font-size: 1.375rem; }
.card-title { font-size: 1.2rem; }
.empty { font-family: var(--sans); font-style: normal; font-size: 1rem; }
/* Lege toestand als rustig vlak in het midden, met een icoon als dat er is (zoals Airbnb). */
.empty { display: grid; justify-items: center; gap: 6px; text-align: center; margin-top: 8px; padding: 40px 20px;
  border: 1px dashed var(--line); border-radius: 18px; }
.empty > .ic { width: 36px; height: 36px; color: var(--muted); stroke-width: 1.5; margin-bottom: 4px; }
.empty strong { color: var(--ink); font-size: 1.0625rem; }
.empty p { margin: 0; max-width: 46ch; }
.empty .btn, .empty .add-cta { margin: 10px 0 0; }

/* labels zonder typemachine-hoofdletters */
.label, .mini-label, .plan-kicker, .sheet-label, .place-head, .window-tag, .winner small,
.trip-pick-text small, .badge-best, .card-sub, .dow, .count-pill, .best-row.top strong::before {
  font-family: var(--sans); text-transform: none; letter-spacing: 0;
}
.label { font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin: 32px 0 12px; }
.label::after { display: none; }
.mini-label { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.plan-kicker, .card-sub { font-size: .8125rem; font-weight: 500; }
.place-head { font-size: .8125rem; color: var(--muted); }
.trip-pick-text small { font-size: .75rem; font-weight: 500; }
.dow { font-size: .75rem; font-weight: 600; }
.window-tag, .best-row.top strong::before { font-size: .75rem; font-weight: 700; color: var(--brand); }
.count-pill { font-size: .75rem; font-weight: 600; color: var(--ink); padding: 2px 8px; }
.badge-best {
  transform: none; border: none; border-radius: 999px; padding: 3px 10px;
  background: var(--brand); color: var(--on-brand); font-size: .75rem; font-weight: 600;
}

/* knoppen en links */
.btn { border-radius: 8px; border-color: var(--line); }
.btn:hover { border-color: var(--ink); }
.btn.primary, .add-cta { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover, .add-cta:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.ghost:hover { background: var(--surface-2); border-color: transparent; }
.add-cta { border-radius: 8px; padding: 13px 20px; }
.add-cta-plus { display: grid; }
.text-btn { color: var(--ink); font-weight: 600; text-decoration-color: currentColor; }
.text-btn:hover { color: var(--muted); }
.icon-btn { border-radius: 50%; border-color: transparent; background: var(--surface-2); }
.icon-btn:hover { background: var(--line); }
.link-btn { color: var(--ink); }
.chip-btn { border-color: var(--line); background: var(--surface); }
.toast { border-radius: 10px; box-shadow: var(--shadow); }
.like.on, .like.on .heart { color: var(--brand); }

/* kaartjes */
.card { border-radius: 16px; transition: box-shadow .2s, border-color .2s; }
.card:hover { box-shadow: var(--shadow); border-color: transparent; }
.card.best { border-color: var(--brand); }
.price { border: none; border-radius: 6px; padding: 2px 8px; background: var(--surface-2); color: var(--ink); font-weight: 600; }
.stars { color: var(--ink); }
.chip { border-radius: 999px; padding: 3px 10px; }

/* de kaart */
/* Rustige kaart (zoals Airbnb): minder verzadigd en iets lichter, zodat pinnen en prijzen opvallen. */
.map .leaflet-tile-pane { filter: saturate(.5) contrast(.9) brightness(1.04); }
@media (prefers-color-scheme: dark) { .map .leaflet-tile-pane { filter: brightness(.72) saturate(.55); } }
.map.sat .leaflet-tile-pane { filter: none; }
.map-search input {
  height: 52px; padding-left: 48px; border-radius: 999px; border-color: var(--line);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .12); font-weight: 500;
}
.map-search input:focus { outline: 2px solid var(--ink); }
.map-search-icon { left: 18px; top: 26px; transform: translateY(-50%); display: grid; color: var(--ink); font-size: 1.1rem; }
.place-results { border: none; border-radius: 16px; box-shadow: var(--shadow); padding: 8px; }
.place-results [role="option"] { border-radius: 10px; }
.place-results [aria-selected="true"], .place-results [role="option"]:hover { background: var(--surface-2); }
.place-results [role="option"] em { color: var(--brand); }

.map.leaflet-container .leaflet-bar { border: none; border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
.map .leaflet-bar a { color: var(--ink); background: var(--surface); border-bottom-color: var(--line); }
.map .leaflet-bar a:hover { background: var(--surface-2); }
.map-buttons a[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.map-buttons .ic { width: 20px; height: 20px; }

.pin::before { background: #222; border-color: #fff; }
.pin span { color: #fff; }
@media (prefers-color-scheme: dark) { .pin span { color: #fff; } }
.pin.best::before, .pin.active::before { background: var(--brand); }
.pin.active::before { box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 25%, transparent); }
.leaflet-tooltip.pin-label {
  border: none; border-radius: 999px; padding: 4px 11px; box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  font: 700 .75rem/1.25 var(--sans); color: var(--ink); background: var(--surface);
}
.leaflet-tooltip.pin-label small { font: 500 .6875rem var(--sans); }

/* lijst met bestemmingen */
.dest { border-radius: 16px; }
.dest-thumb { border-radius: 12px; background: var(--surface-2); }
.dest-num { background: var(--ink); color: var(--paper); }
.dest.best .dest-num { background: var(--brand); color: var(--on-brand); }
.step-chip { padding: 3px 9px; color: var(--ink); background: var(--surface-2); }
.step-chip .ic { width: 14px; height: 14px; vertical-align: -.15em; }
.step-chip.ok { background: color-mix(in srgb, var(--good) 12%, var(--surface)); }
.when-strip, .vote-strip { border-radius: 16px; border-color: transparent; }
.when-strip { background: var(--surface-2); }
.when-strip:hover { border-color: var(--line); }
.vote-strip { background: var(--red-soft); }
.when-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); font-size: 1.1rem; color: var(--ink); flex: none; }
.vote-strip .when-icon { color: var(--brand); }
.when-go { color: var(--ink); }
.vote-cta { gap: 8px; }

/* planpaneel en vensters */
.sheet { border: none; border-radius: 16px; }
.sheet-head h2 { font-weight: 700; font-size: 1.125rem; }
.sheet input, .sheet textarea, .sheet select { border-radius: 8px; background: var(--surface); }
.sheet label { color: var(--ink); }
.sheet label small { color: var(--muted); }
.plan-num { background: var(--brand); color: var(--on-brand); }
.step { border-radius: 12px; }
.step[open] { border-color: var(--line); box-shadow: var(--shadow-sm); }
.step-icon { background: var(--surface-2); color: var(--ink); }
.step.done .step-icon { background: var(--good); color: #fff; }
.window { border-radius: 12px; background: var(--surface); }
.window:hover { border-color: var(--ink); }
.chosen-main { border-radius: 10px; }
.chosen-icon { display: grid; place-items: center; width: 28px; color: var(--ink); }
.conflict-note, .date-warn.conflict { border-radius: 8px; }
.return-bar { border-radius: 12px; border-color: var(--line); }

/* datumprikker en stemmen */
.who, .best-row, .planned-row, .poll-row, .share-card, .winner, .option-main { border-radius: 16px; }
.day { border-radius: 8px; background: color-mix(in srgb, var(--brand) calc(var(--heat) * 30%), var(--surface)); }
@media (prefers-color-scheme: dark) { .day { background: color-mix(in srgb, var(--brand) calc(var(--heat) * 35%), var(--surface)); } }
.bar span { background: var(--ink); }
.option.on .bar span, .option.lead .bar span { background: var(--brand); }
.tab-badge { background: var(--brand); }

/* tabs */
.tabs { align-items: stretch; }
.tab { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.tab.active { border-bottom-color: var(--ink); }
.tab.add { display: inline-grid; place-items: center; }
.tab-emoji { font-size: 1.05em; }

/* naam van de site linksboven en je profiel rechtsboven, alleen op een breed scherm */
@media (max-width: 1099px) { .me-link { display: none !important; } }
@media (min-width: 1100px) {
  #brand.sr-only {
    position: absolute !important; top: 0; left: 24px; z-index: 30; width: auto; height: 50px; margin: 0;
    clip: auto; overflow: visible; display: flex; align-items: center; gap: 8px; white-space: nowrap;
    font: 700 1.25rem/1 var(--sans); letter-spacing: -.02em; color: var(--brand);
  }
  #brand .logo-img { width: 34px; height: 34px; flex: none; }
  #brand .team-pill { margin-left: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink);
    font-size: .8125rem; font-weight: 600; letter-spacing: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
  .me-link:not([hidden]) {
    position: fixed; top: 6px; right: 20px; z-index: 30; display: inline-flex; align-items: center; gap: 10px;
    height: 40px; padding: 0 5px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
    color: var(--ink); text-decoration: none; transition: box-shadow .15s;
  }
  .me-link:hover { box-shadow: var(--shadow-sm); }
  .me-link .ic { width: 16px; height: 16px; }
  .me-link .av { width: 30px; height: 30px; font-size: .8125rem; }
  .tabs { padding-right: 96px; }
  /* Ruimte voor de groepsnaam; bij veel tabs schuiven ze naar rechts in plaats van eronder. */
  .tabs { justify-content: safe center; padding-left: var(--brand-w, 200px); }
}

@media (max-width: 600px) {
  .tabs { background: color-mix(in srgb, var(--paper) 96%, transparent); }
  .tab { gap: 3px; font-weight: 500; color: var(--muted); border-top-color: transparent !important; }
  .tab .ic { width: 24px; height: 24px; stroke-width: 1.7; }
  .tab .tab-emoji { font-size: 1.3rem; line-height: 1.1; }
  .tab.active { color: var(--brand); font-weight: 600; }
  .sheet { border-radius: 16px 16px 0 0; }
  .dest-sheet { box-shadow: 0 -4px 20px rgba(0, 0, 0, .12); }
  .map .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
}

/* reis met datumconflict: de melding binnenin is genoeg, geen accentrand (die betekent 'favoriet') */
.card.trip.conflict { border-color: var(--line); border-width: 1px; }
.map-hint { border: none; border-radius: 999px; padding: 6px 12px; box-shadow: var(--shadow-sm); font-weight: 500; }

/* waarschuwingen ('kan niet') in een eigen kleur, los van de accentkleur */
.step-chip .warn, .warn { color: var(--bad); }
.conflict-note, .date-warn.conflict {
  color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); border-left-color: var(--bad);
}
.planned-row.conflict { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 7%, var(--surface)); }
.planned-row.conflict small { color: var(--bad); }
.day.trip-conflict { box-shadow: inset 0 -3px 0 var(--bad); }

/* reis delen in WhatsApp */
.trip-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.trip-share .btn.wa { gap: 8px; border-radius: 999px; padding: 8px 14px; }
.trip-share .text-btn { font-size: .8125rem; }

/* ---------- ideeën: vakantiepakketten ---------- */

.idea-cats { display: flex; flex-wrap: wrap; gap: 8px; max-width: 900px; }
.cat {
  min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 500; font-size: .9375rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color .15s, background .15s;
}
.cat:hover { border-color: var(--ink); }
.cat[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cat:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.idea-opts { display: grid; grid-template-columns: 1.6fr 1.2fr .8fr 1.2fr; gap: 12px; max-width: 760px; margin: 18px 0 8px; }
.idea-opts label { display: grid; gap: 6px; font-size: .8125rem; font-weight: 600; }
.idea-opts select, .idea-opts input {
  font: inherit; font-size: 16px; color: var(--ink); width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.idea-opts .euro { position: relative; display: block; }
.idea-opts .euro::before { content: '€'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 500; }
.idea-opts .euro input { padding-left: 28px; }
@media (max-width: 640px) { .idea-opts { grid-template-columns: 1fr 1fr; } .idea-opts .idea-when { grid-column: 1 / -1; } }
.stepper { display: flex; align-items: stretch; }
.stepper input { text-align: center; border-radius: 0 !important; border-left: none !important; border-right: none !important; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper button { flex: none; width: 44px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 1.25rem; font-weight: 600; }
.stepper button:first-child { border-radius: 10px 0 0 10px; }
.stepper button:last-child { border-radius: 0 10px 10px 0; }
.pkg-block { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.pkg-block .pkg-line strong { font-weight: 600; }
.pkg-price { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-left: 30px; font-size: .875rem; color: var(--muted); }
.pkg-price span:last-child { color: var(--ink); font-weight: 600; }
.pkg-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 0; padding-left: 30px; font-size: .875rem; font-weight: 600; }
.pkg-links:empty { display: none; }
.tours-link { padding-left: 0; margin-top: 8px; }
.pkg-links a { color: var(--ink); }

.idea-results { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin-top: 16px; }
.idea-results > .hint, .idea-results > .empty, .idea-results > .fineprint { grid-column: 1 / -1; }
.pkg { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
.pkg-img { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--surface-2), var(--line)); }
.pkg-img { overflow: hidden; }
.pkg-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pkg-score {
  position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: .8125rem; font-weight: 700; box-shadow: var(--shadow-sm);
}
.pkg-body { display: grid; gap: 10px; padding: 16px; }
/* Titel links, prijs rechts (zoals Booking): nooit onder elkaar, de titel mag wel afbreken. */
.pkg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pkg-head h3 { min-width: 0; overflow-wrap: anywhere; }
.pkg-head h3 small { display: block; margin-top: 2px; font-size: .875rem; }
.pkg-head h3 { margin: 0; font-size: 1.25rem; letter-spacing: -.015em; }
.pkg-head small { font-weight: 500; color: var(--muted); font-size: .9375rem; }
.pkg-on { font-size: .75rem; font-weight: 600; color: var(--good); }
.pkg-why { display: flex; flex-wrap: wrap; gap: 6px; }
.pkg-why .chip { background: var(--surface-2); font-size: .75rem; }
.pkg-why .chip.weather { background: color-mix(in srgb, #f59e0b 16%, var(--surface)); }
.pkg-line { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; }
.pkg-line .ic { margin-top: 2px; color: var(--muted); }
.pkg-line a { font-weight: 600; }
.group-review { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .8125rem; color: var(--good); font-weight: 500; }
.group-review .ic { width: 14px; height: 14px; }
.pkg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 4px; }
.pkg-total { display: grid; }
.pkg-total strong { font-size: 1.125rem; }
.pkg-total small { color: var(--muted); font-size: .8125rem; }
.pkg-foot .btn { gap: 8px; min-height: 44px; padding: 10px 16px; }

/* tabbalk op de telefoon: zes tabs passen naast elkaar */
@media (max-width: 600px) {
  .tab { flex: 1 0 54px; padding: 6px 2px 7px; }
  .tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .tab.add { flex: 0 0 40px; }
  .idea-results { grid-template-columns: 1fr; }
}
.idea-cats-label { margin: 18px 0 8px; }
.idea-opts { margin-top: 4px; }
@media (max-width: 600px) {
  .cat { min-height: 36px; padding: 0 13px; font-size: .875rem; }
  .idea-cats { gap: 6px; }
}
.pkg-pp { display: grid; justify-items: end; text-align: right; line-height: 1.2; }
.pkg-pp strong { font-size: 1.25rem; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
.pkg-pp small { font-size: .75rem; color: var(--muted); }
.idea-opts label small { font-weight: 400; color: var(--muted); }
.pkg-why .chip.rain { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); }
.idea-regions .cat[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.idea-more { grid-column: 1 / -1; min-height: 48px; }

/* ---------- accounts, groepen en chat ---------- */

/* rondje met de eerste letter, in de vaste kleur van die persoon */
.av {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c, var(--muted)); color: #fff;
  font: 700 .75rem/1 var(--sans); text-transform: uppercase;
}
.av.team { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; }
.av-space { width: 26px; flex-shrink: 0; }
.added-by { display: inline-flex; align-items: center; gap: 6px; font-style: normal; }
.added-by .av { width: 20px; height: 20px; font-size: .625rem; }

/* inlogscherm en groepskeuze */
body.gate .tabs { display: none; }
.gate-wrap { min-height: calc(100dvh - 40px); display: grid; place-items: center; padding: 24px 0; }
.gate-card { width: min(420px, 100%); display: grid; gap: 14px; }
.gate-brand { display: flex; align-items: center; gap: 8px; font: 700 1.35rem/1 var(--sans); color: var(--brand); letter-spacing: -.02em; }
.gate-brand .logo-img { width: 44px; height: 44px; flex: none; }
.gate-tag { margin: -4px 0 6px; color: var(--muted); }
.gate-hero { display: none; }
/* Breed scherm: formulier links, sfeerfoto met wat de app doet rechts (zoals Airbnb/Booking). */
@media (min-width: 900px) {
  .gate-wrap { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 56px; align-items: center; place-items: center stretch; }
  .gate-card { width: 100%; }
  .gate-hero { display: block; position: relative; height: min(620px, calc(100dvh - 120px)); border-radius: 24px; overflow: hidden; background: var(--surface-2); }
  .gate-hero > img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gate-hero-text { position: absolute; left: 20px; right: 20px; bottom: 20px; padding: 20px 22px; border-radius: 18px;
    background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow); }
  .gate-hero-text strong { font-size: 1.25rem; letter-spacing: -.015em; }
  .gate-hero-text ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--muted); }
  .gate-hero-text li { display: flex; align-items: center; gap: 10px; }
  .gate-hero-text .ic { color: var(--brand); }
}
.gate-title { margin: 6px 0 0; font-size: 1.6rem; letter-spacing: -.02em; }
.gate-form { display: grid; gap: 12px; }
.gate-form label { display: grid; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.gate-form input, .chat-compose textarea, .pref-note input, .invite-link input {
  font: inherit; font-size: 16px; color: var(--ink); width: 100%; min-width: 0;
  padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper);
}
.gate-form input:focus, .chat-compose textarea:focus, .pref-note input:focus { outline: 2px solid var(--navy); outline-offset: -1px; border-color: transparent; }
.gate-form .btn { min-height: 48px; }
.inline-form { grid-template-columns: 1fr auto; align-items: end; }
.inline-form .btn { min-height: 46px; }
.form-error { margin: 0; color: var(--bad); font-size: .875rem; font-weight: 500; }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; background: var(--surface-2); border-radius: 12px; }
.seg button { border: none; background: none; border-radius: 9px; padding: 10px; font-weight: 600; color: var(--muted); min-height: 44px; }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
.invite-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); background: var(--red-soft); }
.invite-note .ic { color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.invite-note small { display: block; color: var(--muted); }
.team-list { display: grid; gap: 8px; }
.team-row {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; min-height: 60px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.team-row > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.team-row small { color: var(--muted); font-size: .8125rem; }
.team-row .tab-badge { position: static; transform: none; }
.team-row:hover { border-color: var(--muted); }

/* chat */
.chat { display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; height: calc(100dvh - 72px); }
.route-chat .panel { padding-bottom: 0; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 10px; border-bottom: 1px solid var(--line); }
.chat-head h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.01em; }
.chat-head small { display: block; color: var(--muted); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 2px; display: flex; flex-direction: column; gap: 4px; overscroll-behavior: contain; }
.chat-log > :first-child { margin-top: auto; }
.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; margin-top: 6px; }
.msg.cont { margin-top: 0; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg.mine .av-space { display: none; }
.bubble { position: relative; padding: 8px 12px 6px; border-radius: 16px 16px 16px 4px; background: var(--surface-2); min-width: 0; overflow-wrap: anywhere; }
.msg.mine .bubble { background: var(--ink); color: var(--paper); border-radius: 16px 16px 4px 16px; }
.msg.mine .bubble a:not(.btn):not(.ref-card) { color: inherit; }
.bubble p { margin: 0; }
.msg-name { display: block; font-size: .75rem; font-weight: 700; margin-bottom: 1px; }
.msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: .6875rem; opacity: .65; margin-top: 2px; }
.msg-del { border: none; background: none; padding: 0 2px; color: inherit; font-size: .75rem; opacity: 0; }
.msg:hover .msg-del, .msg-event:hover .msg-del, .msg-del:focus-visible { opacity: 1; }
@media (hover: none) { .msg-del { opacity: .7; } }
.msg-day { align-self: center; margin: 14px 0 6px; font-size: .75rem; font-weight: 600; color: var(--muted); }
.msg-day span { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); }
.msg-event { align-self: center; display: flex; align-items: center; gap: 8px; max-width: 92%; margin: 8px 0 2px; font-size: .8125rem; color: var(--muted); text-align: left; }
.msg-event .av { width: 22px; height: 22px; font-size: .625rem; }
.msg-event strong { color: var(--ink); }
.msg-event time { font-size: .6875rem; margin-left: 4px; }
.msg-event .msg-del { margin-left: 6px; }
.msg-event-ref { align-self: center; width: min(420px, 92%); }
.ref-card {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; padding: 8px; min-width: min(260px, 70vw);
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; text-align: left;
}
.ref-card > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.ref-card strong { font-size: .9375rem; line-height: 1.3; }
.ref-card small { color: var(--muted); font-size: .75rem; }
.ref-card.gone { color: var(--muted); font-style: italic; font-size: .8125rem; }
.ref-thumb { width: 48px; height: 48px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }
.ref-thumb img { width: 100%; height: 100%; object-fit: cover; }
.trip-ref { flex-wrap: wrap; }
.ref-actions { display: flex; gap: 6px; width: 100%; }
.ref-actions .btn { flex: 1; min-height: 38px; }
.poll-ref { display: grid; gap: 8px; align-items: stretch; }
.poll-ref-head { display: flex; gap: 8px; align-items: flex-start; }
.poll-ref-head > span { display: grid; }
.poll-ref-head .ic { color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.poll-ref-options { display: grid; gap: 6px; }
.poll-ref-opt {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; font-weight: 600;
}
.poll-ref-opt .bar { position: absolute; inset: 0; background: none; border-radius: 0; height: auto; }
.poll-ref-opt .bar span { display: block; height: 100%; background: color-mix(in srgb, var(--brand) 14%, transparent) !important; border-radius: 0; }
.poll-ref-label { position: relative; flex: 1; }
.poll-ref-n { position: relative; color: var(--muted); font-variant-numeric: tabular-nums; }
.poll-ref-opt.on { border-color: var(--brand); color: var(--brand); }
.poll-ref-opt:disabled { cursor: default; opacity: 1; }
.poll-ref .text-btn { justify-self: start; }
.chat-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px 0 12px; border-top: 1px solid var(--line); background: var(--paper); }
.chat-compose textarea { resize: none; max-height: 140px; padding: 11px 14px; border-radius: 22px; line-height: 1.35; }
.chat-attach, .chat-send { width: 44px; height: 44px; border-radius: 50%; padding: 0; flex-shrink: 0; }
.chat-send .ic { width: 20px; height: 20px; }
.center { text-align: center; }
.link-row {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; min-height: 56px;
  border: none; border-bottom: 1px solid var(--line); background: none; padding: 8px 2px;
}
.link-row > span:last-child { display: grid; min-width: 0; }
.link-row small { color: var(--muted); font-size: .8125rem; }
.link-row .ic { color: var(--muted); flex-shrink: 0; }
.link-row .dest-num { position: static; transform: none; flex-shrink: 0; }

/* groepspagina */
.invite-card { max-width: 560px; }
.invite-card strong { display: flex; align-items: center; gap: 8px; }
.invite-link input { font-size: .875rem; padding: 9px 12px; background: var(--surface-2); }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.row-btns .btn { min-height: 40px; }
.prefs { display: flex; flex-wrap: wrap; gap: 8px; max-width: 760px; margin-top: 10px; }
.pref {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); font-weight: 500; font-size: .875rem;
}
.pref.like { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--paper)); }
.pref.dislike { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--paper)); }
.pref-note { display: grid; gap: 6px; margin-top: 14px; max-width: 560px; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.pref-note small { font-weight: 400; }
.members { list-style: none; margin: 10px 0 0; padding: 0; display: grid; max-width: 640px; }
.members li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.members .av { width: 36px; height: 36px; font-size: .9rem; }
.member-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.member-main small { font-weight: 400; color: var(--muted); }
.member-prefs { flex-basis: 100%; font-size: .8125rem; }
.member-menu { position: relative; }
.member-menu summary { list-style: none; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; font-size: 1.2rem; color: var(--muted); }
.member-menu summary::-webkit-details-marker { display: none; }
.member-menu[open] summary { background: var(--surface-2); }
.member-menu div {
  position: absolute; right: 0; top: 44px; z-index: 30; display: grid; min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.member-menu div button { border: none; background: none; text-align: left; padding: 10px 12px; border-radius: 8px; min-height: 44px; }
.member-menu div button:hover { background: var(--surface-2); }
.member-menu .danger { color: var(--bad); }
.new-team { margin-top: 12px; max-width: 560px; }
.new-team summary { list-style: none; }
.new-team summary::-webkit-details-marker { display: none; }
.new-team[open] summary { display: none; }
.account-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; }

/* ideeën: wat vindt de groep ervan */
.pkg-group { display: flex; align-items: center; gap: 10px; padding: 10px 0 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.feel { flex: 1; min-width: 0; display: grid; gap: 6px; font-size: .8125rem; }
.feel-row { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.feel-row .av { width: 22px; height: 22px; font-size: .625rem; }
.feel-row.up .av + .av { margin-left: -10px; box-shadow: 0 0 0 2px var(--surface); }
.feel-row.down strong { color: var(--bad); }
.feel-row.none { font-style: italic; }
.react { display: flex; gap: 6px; flex-shrink: 0; }
.react-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); display: grid; place-items: center; color: var(--muted); }
.react-btn .ic { width: 20px; height: 20px; }
.react-btn.on { background: var(--good); border-color: var(--good); color: #fff; }
.react-btn.down.on { background: var(--bad); border-color: var(--bad); }

/* kaart: wie pinde wat */
.pin-av {
  position: absolute; right: -7px; top: -5px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c); color: #fff; border: 2px solid #fff;
  font: 700 .5625rem/1 var(--sans); font-style: normal;
}
.who-filter { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 8px; }
.who-filter::-webkit-scrollbar { display: none; }
.who-filter .chip-btn { min-height: 36px; padding: 0 12px 0 6px; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: .8125rem; }
.who-filter .chip-btn:first-child { padding-left: 12px; }
.who-filter .chip-btn small { color: var(--muted); font-weight: 500; }
.who-filter .chip-btn.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.who-filter .chip-btn.on small { color: inherit; opacity: .7; }
.who-filter .av { width: 22px; height: 22px; font-size: .625rem; }

@media (max-width: 600px) {
  .gate-wrap { min-height: 100dvh; align-items: start; padding-top: 12vh; }
  body.gate .panel { padding-bottom: 24px; }
  body.route-chat { height: 100dvh; overflow: hidden; }
  .route-chat .panel { height: 100dvh; padding: 0 12px var(--tabbar); }
  .chat { height: 100%; }
  .chat-head { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .msg { max-width: 92%; }
  .react-btn { width: 40px; height: 40px; }
}

/* ---------- telefoon: vaste onderbalk met Meer-paneel ---------- */

.tab-more { border: none; background: none; }
.more-team {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink); text-decoration: none;
}
.more-team > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.more-team small { color: var(--muted); font-size: .8125rem; }
.more-team strong { font-size: 1.05rem; }
.more-grid { display: grid; }
.more-row {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 4px; width: 100%;
  border: none; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-decoration: none; text-align: left;
}
.more-text { flex: 1; min-width: 0; display: grid; }
.more-ic { width: 24px; display: grid; place-items: center; flex-shrink: 0; color: var(--muted); font-size: 1.2rem; }
.more-row small { color: var(--muted); font-size: .8125rem; }
.more-row .ic { width: 24px; height: 24px; }
.more-row.on strong { color: var(--brand); }
.more-row .tab-badge { position: static; transform: none; }

@media (max-width: 600px) {
  .tabs { overflow: visible; }
  .tab { flex: 1 1 0; min-width: 0; }
  .tab-more .tab-badge { position: absolute; transform: translate(14px, -16px); }
  /* chat: hoogte volgt wat er boven het toetsenbord zichtbaar is */
  .route-chat .panel { height: var(--vvh, 100dvh); }
  body.typing .tabs { display: none; }
  body.typing.route-chat .panel { padding-bottom: 0; }
  body.typing .chat-compose { padding-bottom: 8px; }
  #moreDialog .sheet-body { padding-bottom: calc(18px + var(--safe-b)); }
}

/* telefoon: alles wat je aantikt is minstens zo groot als een vingertop */
@media (max-width: 600px) {
  .text-btn { min-height: 44px; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
  h2 .text-btn { min-height: 36px; }
  .like { min-width: 44px; min-height: 44px; justify-content: center; }
  .btn.sm { min-height: 40px; }
  .pkg-links a, .result-links a { display: inline-block; padding: 9px 0; }
  .chip-btn { min-height: 44px; }
  .msg-del { padding: 6px 8px; margin: -6px -8px; }
}

/* link plakken in het toevoegscherm: gegevens van Airbnb, Booking of een website ophalen */
.link-fetch { display: grid; gap: 6px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-2); }
.link-fetch > label { font-weight: 600; }
.input-btn { display: flex; gap: 8px; }
.input-btn input { flex: 1; min-width: 0; }
.input-btn .btn { flex-shrink: 0; }
.link-status { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.link-status.ok { color: var(--good); }
.link-status.warn { color: var(--ink); }

/* knop naar de site van het verblijf (Airbnb, Booking…) */
.btn.out-link { flex-shrink: 0; white-space: nowrap; border-color: var(--ink); }
.btn.out-link:hover { background: var(--ink); color: var(--paper); }
.card-foot .btn.out-link { margin-left: auto; }
.card-media a { display: block; width: 100%; height: 100%; }
.trip-picks li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.trip-picks li .trip-pick { flex: 1; min-width: 0; border-bottom: none; }
.chosen li:has(.out-link) { display: grid; grid-template-columns: 1fr auto; }
.chosen li .btn.out-link { grid-column: 1; justify-self: start; min-height: 34px; }
.chosen li:has(.out-link) .icon-btn { grid-column: 2; grid-row: 1; }

/* ideeën: zoeken op land of plek */
.idea-search { position: relative; display: flex; align-items: center; max-width: 760px; margin: 18px 0 4px; }
.idea-search > .ic { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.idea-search input { flex: 1; min-width: 0; padding: 12px 44px 12px 42px; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: var(--surface); color: var(--ink); }
.idea-search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.idea-search input::-webkit-search-cancel-button { display: none; }
.idea-search [data-idea-clear] { position: absolute; right: 6px; }
.idea-q-note { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.idea-search input::-webkit-calendar-picker-indicator { display: none !important; }

/* huurauto */
.car-opts { grid-template-columns: 1fr 2fr; max-width: 560px; }
@media (max-width: 640px) { .car-opts { grid-template-columns: 1fr; } }
.car-filters { margin: 12px 0 18px; }
.car-search { max-width: 760px; display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); margin-bottom: 16px; }
.car-search .hint, .car-search .fineprint, .car-search .pkg-links, .car-search .mini-label { margin: 0; }
.car-rule { display: flex; gap: 10px; align-items: flex-start; }
.car-rule .ic { flex-shrink: 0; margin-top: 2px; }
.car-rule p { margin: 0; line-height: 1.45; }
.car-rule small { display: block; margin-top: 4px; color: var(--muted); font-size: .75rem; }
.car-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); max-width: 1000px; }
.car-card { display: grid; gap: 10px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.car-card.blocked { opacity: .7; }
.car-head { display: flex; gap: 10px; align-items: flex-start; }
.car-head > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.car-head h3 { margin: 0; font-size: 1.0625rem; overflow-wrap: anywhere; }
.car-head small { color: var(--muted); font-size: .8125rem; }
.car-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); flex-shrink: 0; }
.car-best { font: 600 .6875rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--good); border: 1.5px solid var(--good); border-radius: 4px; padding: 2px 6px; }
.car-age { justify-self: start; font-size: .8125rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.car-age.ok { color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--surface)); }
.car-age.no { color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--surface)); }
.car-age.unknown { color: var(--muted); background: var(--surface-2); }
.car-price { margin: 0; display: grid; gap: 4px; }
.car-price > div { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; }
.car-price dt { color: var(--muted); }
.car-price dd { margin: 0; font-variant-numeric: tabular-nums; }
.car-price .car-total { padding-top: 6px; border-top: 1px solid var(--line); font-weight: 700; }
.car-price .car-total dt { color: var(--ink); }
.car-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.car-foot .text-btn { margin-left: auto; }
.car-hidden { margin-top: 12px; }
.young-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 8px; }
.young-box legend { font-weight: 600; padding: 0 4px; }
.fee-row { display: flex; gap: 6px; }
.fee-row .euro { flex: 1; min-width: 0; }
#carForm .euro { position: relative; display: block; }
#carForm .euro::before { content: '€'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
#carForm .euro input { padding-left: 28px; width: 100%; }

/* toevoegen aan een reis (activiteit, huurauto) */
.trip-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.trip-add-label { flex-basis: 100%; font-size: .8125rem; color: var(--muted); }
.trip-add .btn .ic { width: 16px; height: 16px; }
.trip-add-body { display: grid; gap: 12px; align-content: start; }
.trip-add-body .mini-label, .trip-add-body .hint { margin: 4px 0 0; }
.trip-add-body .car-search { margin: 0; }
.trip-add-body .car-list { grid-template-columns: 1fr; }
.car-top { display: grid; gap: 10px; }
.car-top label { display: grid; gap: 6px; font-size: .8125rem; font-weight: 600; max-width: 220px; }
.car-top .car-filters { margin: 0; }
.car-card.in-trip { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.car-foot .btn.done { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }

/* ideeën: filters inklappen */
.idea-bar { display: flex; gap: 8px; align-items: center; max-width: 760px; margin: 10px 0 0; }
.idea-filter-btn { gap: 8px; }
.idea-filter-btn .ic { width: 18px; height: 18px; }
.idea-filter-btn .filter-count:not(:empty) { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: var(--on-brand); font-size: .75rem; display: inline-grid; place-items: center; }
.idea-filter-btn .chev { transition: transform .15s; color: var(--muted); }
.idea-filter-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.idea-sort { margin-left: auto; }
.idea-sort select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; font-size: .9375rem; }
.idea-summary { margin: 8px 0 0; color: var(--muted); font-size: .875rem; max-width: 760px; }
.idea-filters { max-width: 900px; margin-top: 12px; padding: 4px 16px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.idea-filters[hidden] { display: none; }
.idea-filters .idea-opts { margin-top: 12px; }
.idea-filters-done { margin-top: 16px; }
.idea-filters + .idea-results, .idea-summary + .idea-filters[hidden] + .idea-results { margin-top: 16px; }
.pkg-casino { margin: 0; font-size: .875rem; font-weight: 500; }
.idea-search [data-idea-clear][hidden] { display: none; }
.text-btn.danger { color: var(--bad); }

/* echte prijzen */
.pkg .pkg-price .real { color: var(--good); font-weight: 600; }
.airbnb-for small { display: block; color: var(--muted); font-size: .75rem; }
.airbnb-levels { margin: 4px 0 8px; font-size: .9375rem; }
.airbnb-levels small { color: var(--muted); }
.airbnb-price { font-size: .875rem; }
.airbnb-price strong { color: var(--ink); }
.account-email { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font-size: .9375rem; }
.account-email strong { overflow-wrap: anywhere; }
.real-note { color: var(--good); font-weight: 600; }

/* roulette in de stemtab: een gewone kaart in de stijl van de app, met een rood-zwart wiel */
.roulette {
  --pocket-red: var(--red); --pocket-black: #222222;
  position: relative; max-width: 720px; padding: 18px 16px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: grid; gap: 14px; overflow: hidden;
}
.roulette-head h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.roulette-head p { margin: 4px 0 0; color: var(--muted); font-size: .9375rem; }
.roulette-head strong { color: var(--ink); }
.roulette-bets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bet { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 10px; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); }
.bet:focus-within { border-color: var(--ink); }
.bet .chip-dot { grid-row: span 2; width: 14px; height: 14px; border-radius: 50%; }
.bet.red .chip-dot { background: var(--pocket-red); }
.bet.black .chip-dot { background: var(--pocket-black); box-shadow: 0 0 0 1px var(--line); }
.bet-col { font-size: .75rem; font-weight: 600; color: var(--muted); }
.bet select { min-width: 0; width: 100%; padding: 2px 0; border: 0; background: transparent; color: var(--ink); font: 600 .9375rem var(--sans); appearance: auto; }
.bet select:focus { outline: none; }
.wheel-wrap { position: relative; width: min(260px, 80%); margin: 2px auto 0; }
.wheel { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.12)); }
.wheel-rot { transform-origin: 120px 120px; transform-box: view-box; }
.w-rim { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.w-track { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.pocket.red { fill: var(--pocket-red); }
.pocket.black { fill: var(--pocket-black); }
.pocket-num { font: 700 9px var(--sans); fill: #fff; text-anchor: middle; dominant-baseline: middle; }
.w-frets line { stroke: var(--surface); stroke-width: 1.5; }
.w-cone { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.w-ring { fill: none; stroke: var(--line); }
.w-spokes line { stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.w-hub { fill: var(--ink); }
.bulb { fill: var(--line); transition: fill .2s; }
.roulette.spinning .bulb { animation: bulb .32s steps(1) infinite; }
.roulette.spinning .bulb.b1 { animation-delay: .16s; }
@keyframes bulb { 0% { fill: var(--red); } 50% { fill: var(--line); } }
.ball { fill: #fff; stroke: rgba(0,0,0,.25); stroke-width: .8; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.4)); }
.spin-btn { justify-self: center; min-width: 200px; padding: 12px 22px; }
.spin-btn:disabled { opacity: .8; cursor: default; }
.spin-btn:disabled:hover { background: var(--ink); border-color: var(--ink); }
.roulette-result { min-height: 2.5em; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.roulette-win { display: grid; text-align: center; padding: 8px 16px; border-radius: var(--radius); border: 2px solid var(--red); background: var(--surface); animation: pop .4s cubic-bezier(.2,1.6,.4,1); }
.roulette-win.black { border-color: var(--ink); }
.roulette-win small { font-size: .75rem; font-weight: 600; color: var(--muted); }
.roulette-win strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; }
.roulette-fine { margin: 0; text-align: center; font-size: .8125rem; color: var(--muted); }
.roulette-fine .link-btn { color: var(--ink); font-size: inherit; font-weight: 600; text-decoration: underline; padding: 0; background: none; border: none; cursor: pointer; }
.confetti { position: absolute; left: 50%; top: 45%; width: 7px; height: 10px; border-radius: 2px; pointer-events: none;
  animation: confetti 1.2s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes confetti { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 420px) { .roulette-bets { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) { .roulette { --pocket-black: #0a0a0a; } }
@media (prefers-reduced-motion: reduce) { .roulette.spinning .bulb { animation: none; } }

/* ---------- paasei: fiesta-modus ---------- */
.fiesta-layer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; }
.fiesta-plane { position: absolute; top: 14%; left: 0; display: flex; align-items: center; white-space: nowrap;
  transform: translateX(-100%); animation: fiesta-fly 7s linear forwards; }
.fiesta-banner { background: #ffd23f; color: #222; font-weight: 800; font-size: 15px; letter-spacing: .02em; text-transform: uppercase;
  padding: 7px 14px; border: 2px solid #222; border-radius: 3px; box-shadow: var(--shadow); animation: fiesta-flap .5s ease-in-out infinite alternate; }
.fiesta-rope { width: 34px; border-top: 2px dashed #222; }
.fiesta-jet { font-size: 34px; display: inline-block; transform: rotate(45deg); animation: fiesta-bob 1s ease-in-out infinite alternate; }
.fiesta-flamingo { position: absolute; bottom: calc(80px + env(safe-area-inset-bottom)); right: 16px; font-size: 54px;
  transform-origin: 50% 100%; animation: fiesta-dance .45s ease-in-out infinite alternate; }
.fiesta-drop { position: absolute; top: -60px; animation: fiesta-fall 4s linear both; }
body.fiesta #panel { animation: fiesta-disco 1.2s linear infinite, fiesta-wobble .6s ease-in-out infinite alternate; }
@keyframes fiesta-fly { to { transform: translateX(100vw); } }
@keyframes fiesta-flap { from { transform: skewY(-2deg); } to { transform: skewY(2deg) translateY(2px); } }
@keyframes fiesta-bob { to { transform: rotate(38deg) translateY(-6px); } }
@keyframes fiesta-dance { from { transform: rotate(-14deg) scaleY(.92); } to { transform: rotate(14deg) translateY(-12px); } }
@keyframes fiesta-fall { to { transform: translate(var(--drift), calc(100vh + 120px)) rotate(var(--spin)); } }
@keyframes fiesta-disco { to { filter: hue-rotate(360deg) saturate(1.6); } }
@keyframes fiesta-wobble { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg) scale(1.005); } }
@media (prefers-reduced-motion: reduce) {
  .fiesta-plane { animation: none; transform: none; left: 50%; translate: -50% 0; }
  .fiesta-banner, .fiesta-jet, .fiesta-flamingo, body.fiesta #panel { animation: none; }
}

/* ---------- reizen: meerdere selecteren en in één link delen ---------- */
.select-hint { margin: -10px 0 16px; color: var(--muted); font-size: .9375rem; }
.grid.selecting { padding-bottom: 96px; }
.grid.selecting .card.trip > :not(.select-check) { pointer-events: none; }
.grid.selecting .card.trip .card-hint, .grid.selecting .card.trip .trip-add, .grid.selecting .card.trip .trip-share { display: none; }
.grid.selecting .card.trip { user-select: none; -webkit-tap-highlight-color: transparent; }
.card.trip.selected { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.select-check {
  position: absolute; z-index: 2; top: 14px; right: 14px; pointer-events: none;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); border: 2px solid var(--muted); color: transparent;
  box-shadow: var(--shadow-sm);
}
.select-check .ic { width: 18px; height: 18px; stroke-width: 3; }
.card.trip.selected .select-check { background: var(--red); border-color: var(--red); color: var(--on-brand); }
.select-bar {
  position: fixed; z-index: 900; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + var(--tabbar, 0px) + var(--safe-b));
  display: flex; align-items: center; gap: 8px; width: min(560px, calc(100% - 32px));
  padding: 10px 10px 10px 18px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.select-count { flex: 1; min-width: 0; font-weight: 600; }
.select-bar .btn { flex: none; }
.select-bar .btn[disabled] { opacity: .45; }
@media (max-width: 600px) { .select-bar { bottom: calc(10px + var(--tabbar)); } .select-bar .btn.ghost { padding-inline: 10px; } }
.bundle-list { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 6px; font-weight: 600; }
.bundle-list small { font-weight: 400; color: var(--muted); margin-left: 4px; }
.bundle-actions { display: grid; gap: 10px; justify-items: stretch; }
.bundle-actions .btn.wa { display: inline-flex; justify-content: center; gap: 8px; }
.bundle-actions .text-btn { justify-self: center; margin-top: 4px; }

/* ---------- zwevende navigatie en kaartjes (2026-10-14) ----------
   Telefoon: de tabbalk zweeft als afgeronde balk boven de inhoud (zoals iOS en de Airbnb-app); de kaart
   loopt eronder door. Breed scherm: tabs als pillen, het actieve tab gevuld. */
@media (max-width: 600px) {
  /* ± 63px balk + 10px marge eronder + 9px lucht erboven; --peek = hoogte van het ingeklapte bestemmingenpaneel */
  :root { --tabbar: calc(82px + var(--safe-b)); --peek: 212px; }
  .tabs {
    left: 12px; right: 12px; bottom: calc(10px + var(--safe-b));
    gap: 2px; padding: 4px;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 22px;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16), 0 1px 3px rgba(0, 0, 0, .08);
  }
  .tab { flex: 1 1 0; min-height: 50px; border-radius: 18px; border-top: none !important; transition: background .15s, color .15s; }
  .tab.active { background: var(--red-soft); color: var(--brand); }
  .tab-badge { transform: translate(12px, -14px); }
  .panel, .planner { padding-bottom: calc(var(--tabbar) + 24px); }
  .toast { bottom: calc(var(--tabbar) + 8px); }
  .select-bar { bottom: calc(8px + var(--tabbar)); }
  /* Kaart over het hele scherm. De bestemmingen zweven als losse kaart net boven de tabbalk, in dezelfde
     stijl (marges, ronde hoeken, schaduw, doorschijnend), zodat er niets onder de balk door loopt. */
  .route-map .panel { padding-bottom: 0; }
  .map-stage { inset: 0; }
  .map .leaflet-bottom { bottom: calc(var(--peek) + var(--tabbar) + 6px); }
  .dest-sheet {
    left: 12px; right: 12px; bottom: var(--tabbar); height: var(--peek);
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 22px;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16), 0 1px 3px rgba(0, 0, 0, .08);
  }
  /* open: tot net onder het zoekveld */
  .dest-sheet.open { height: calc(100% - var(--tabbar) - 76px); }
  .dest-sheet .planner { padding-bottom: 16px; }
  .route-chat .panel { padding-bottom: var(--tabbar); }
}

@media (min-width: 601px) {
  .tabs { gap: 4px; align-items: center; min-height: 60px; }
  .tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; margin: 0; border-bottom: none; border-radius: 999px;
    transition: background .15s, color .15s;
  }
  .tab:hover { background: var(--surface-2); }
  .tab.active { background: var(--ink); color: var(--paper); border-bottom-color: transparent; }
  .tab.active .ic { color: var(--paper); }
  .tab.add { padding: 8px 10px; }
  /* ruimte onder de sticky kop: iets meer nu hij hoger is */
  html { scroll-padding-top: 76px; }
}
@media (min-width: 1100px) {
  #brand.sr-only { height: 60px; }
  .me-link:not([hidden]) { top: 10px; }
}

/* kaartjes komen iets omhoog als je eroverheen gaat */
@media (hover: hover) {
  .dest, .pkg, .card { transition: box-shadow .2s, transform .2s, border-color .2s; }
  .dest:hover, .pkg:hover, .card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .dest:hover, .pkg:hover, .card:hover { transform: none; }
}
/* knoppen op de kaart als zwevende, ronde knoppen */
.map.leaflet-container .leaflet-bar { border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }

/* ---------- het poppetje (Reismannetje: kompas als hoofd) ---------- */
.loading { display: grid; justify-items: center; gap: 10px; padding: 18vh 0 40px; }
.loading-mascot { width: 72px; height: auto; animation: hop 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px) rotate(-3deg); } 60% { transform: translateY(-10px) rotate(3deg); } }
.empty > .empty-mascot { width: 64px; height: auto; margin-bottom: 2px; }
.gate-hero-text { padding-left: 108px !important; min-height: 140px; }
.gate-mascot { position: absolute; left: 18px; bottom: 14px; width: 76px; height: auto; }
@media (prefers-reduced-motion: reduce) { .loading-mascot { animation: none; } }

/* App en meldingen (Groep-pagina) */
.app-block { display: grid; gap: 10px; }
.app-block .row-btns { align-items: center; }
.app-block .hint .ic { width: 1.05em; height: 1.05em; vertical-align: -2px; }
.app-ok { color: var(--good); font-weight: 500; }

.tabs:empty { display: none; } /* bijv. offline, voordat er een groep is geladen */