/* =====================================================================
   LANDING V2 — categorie-first  (alleen actief onder body.v2 / ?v=2)
   Kalme, premium pastel-look. Fraunces (display) + DM Sans (UI).
   Raakt v1 niet: alle regels staan onder .v2 of #v2-root.
   ===================================================================== */

/* ── v1-chrome verbergen in v2 (header + bg-blobs + headerSpacer blijven) ── */
body.v2 #sidebar,
body.v2 #right-panel { display: none !important; }
/* Alle originele v1-content in #bubblesView verbergen, behalve de header-spacer
   en onze #v2-root. Drie ids in de selector → wint van v1's mobile-!important
   regels (die max 2 ids hebben) zonder per element te hoeven jagen. */
body.v2 #bubblesView > *:not(#v2-root):not(#headerSpacer) { display: none !important; }
/* v1 #bubblesView is een centrerende flexbox → daarin shrink-wrapt #v2-root.
   In v2 forceren we block-flow zodat #v2-root de volle breedte pakt. */
body.v2 #bubblesView { margin: 0 !important; display: block !important; }

/* ── Root ── (viewport-hoge flex-kolom: hero boven, stage vult de rest.
   #bubblesView reserveert al ruimte voor de fixed header (~60px) + fixed
   footer (~60px) via padding; daarbinnen vult #v2-root de hoogte zodat de
   stage NOOIT onder de footer valt. Breed voor grote schermen. */
#v2-root {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1640px;
  margin: 0 auto;
  padding: clamp(4px, 1.2vh, 14px) clamp(16px, 3vw, 48px) clamp(6px, 1vh, 14px);
  box-sizing: border-box;
  min-height: calc(100vh - 124px);
  display: flex;
  flex-direction: column;
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* ── Hero ── (compact, vaste hoogte: het bubble-veld is de held, niet de kop) */
.v2-hero { flex: 0 0 auto; text-align: center; padding: clamp(4px, 1.4vh, 14px) 0 clamp(6px, 1.2vh, 14px); }
.v2-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  font-size: clamp(1.85rem, 4.4vw, 3.3rem);
}
.v2-title-1 { display: block; color: var(--text, #1c1b22); }
.v2-title-2 {
  display: block;
  font-style: italic;
  background: linear-gradient(100deg, #E48AB0 0%, #9C7BE0 46%, #6E94D6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.v2-promise {
  margin: 14px auto 0;
  font-size: clamp(0.82rem, 1.4vw, 0.98rem);
  letter-spacing: 0.01em;
  color: var(--text-2, #5a5862);
}
.v2-search {
  display: flex; align-items: center; gap: 8px;
  max-width: 540px; margin: 20px auto 0;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--border, #e6e3ee);
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  box-shadow: 0 8px 30px -12px rgba(80, 70, 120, 0.28), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  backdrop-filter: blur(6px);
  transition: box-shadow .25s, border-color .25s;
}
.v2-search:focus-within { border-color: #b9a9f0; box-shadow: 0 12px 38px -12px rgba(110, 90, 200, 0.4); }
.v2-search-input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-size: 1rem; color: var(--text, #1c1b22); font-family: inherit;
}
.v2-search-input::placeholder { color: var(--text-3, #9a96a4); }
.v2-search-btn {
  flex-shrink: 0; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #6E94D6, #9C7BE0); color: #fff;
  font-size: 1.15rem; cursor: pointer; transition: transform .18s, filter .18s;
  display: grid; place-items: center;
}
.v2-search-btn:hover { transform: scale(1.07); filter: brightness(1.06); }
.v2-legend {
  display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
  margin-top: 16px; font-size: 0.78rem; color: var(--text-3, #8c8896);
}
.v2-legend span { display: inline-flex; align-items: center; gap: 7px; }
.v2-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.v2-dot-size { background: radial-gradient(circle at 32% 28%, #fff, #b7b2c6); }
.v2-dot-color { background: radial-gradient(circle at 32% 28%, #f6b9d2, #9C7BE0); }

/* ── Stage: context + canvas ── (vult de resterende hoogte onder de hero) */
.v2-stage { flex: 1 1 auto; min-height: 0; display: flex; gap: clamp(16px, 2vw, 28px); align-items: stretch; margin-top: 10px; }
.v2-context { width: clamp(220px, 20vw, 280px); flex-shrink: 0; overflow-y: auto; }
/* Tool-view: sidebar iets breder voor categorie-header + size toggle */
.v2-context.v2-context-tools { width: clamp(230px, 21vw, 296px); }

.v2-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border, #ece9f4);
  border-radius: 20px;
  padding: 20px 18px;
  box-shadow: 0 10px 34px -18px rgba(80, 70, 120, 0.3);
  backdrop-filter: blur(6px);
}
.v2-card-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.02rem; margin: 0 0 14px; color: var(--text, #1c1b22); }
.v2-how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.v2-how li { display: flex; gap: 11px; align-items: flex-start; }
.v2-how-ic { font-size: 1.2rem; line-height: 1.2; flex-shrink: 0; }
.v2-how li div { display: flex; flex-direction: column; }
.v2-how li b { font-size: 0.86rem; font-weight: 600; color: var(--text, #1c1b22); }
.v2-how li span { font-size: 0.78rem; color: var(--text-2, #6c6877); line-height: 1.4; }

.v2-filter-group { display: flex; flex-direction: column; gap: 9px; }
.v2-filter-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3, #9a96a4); font-weight: 600; }
.v2-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.v2-chip {
  border: 1px solid var(--border, #e6e3ee); background: rgba(255, 255, 255, 0.6);
  border-radius: 999px; padding: 6px 13px; font-size: 0.8rem; cursor: pointer;
  color: var(--text-2, #5a5862); font-family: inherit; transition: all .18s;
}
.v2-chip:hover { border-color: #b9a9f0; color: var(--text, #1c1b22); }
.v2-chip.is-active { background: linear-gradient(135deg, #6E94D6, #9C7BE0); color: #fff; border-color: transparent; }

/* Smalle chips voor size-toggle (verticale stapel) */
.v2-chip.v2-chip-sm { padding: 5px 11px; font-size: 0.78rem; border-radius: 8px; width: 100%; text-align: left; }

/* Categorie-header in tool-view sidebar */
.v2-ctx-cat-header { display: flex; align-items: center; gap: 12px; margin-bottom: 0; }
.v2-ctx-cat-ic { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.v2-ctx-cat-name { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.05rem; color: var(--text, #1c1b22); line-height: 1.2; }
.v2-ctx-cat-count { font-size: 0.75rem; color: var(--text-3, #9a96a4); margin-top: 3px; }
.v2-divider { height: 1px; background: var(--border, #ece9f4); margin: 14px 0; opacity: 0.7; }
.v2-size-btns { display: flex; flex-direction: column; gap: 5px; }
.v2-ctx-back-link {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  cursor: pointer; font-family: inherit; font-size: 0.82rem; color: var(--text-2, #6c6877);
  padding: 4px 0; transition: color .15s;
}
.v2-ctx-back-link:hover { color: var(--text, #1c1b22); }

/* ── Canvas ── (gekaderde "stage"; vult de resterende hoogte → alles in beeld,
   nooit onder de footer) */
.v2-canvas {
  position: relative; flex: 1 1 auto; min-height: 340px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.14));
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 24px 60px -34px rgba(80, 70, 120, 0.4);
  /* overflow: clip op container, SVG zelf overflow: visible zodat labels
     net buiten de bubbel-rand toch zichtbaar zijn binnen de canvas-padding */
  overflow: clip;
}
#v2Svg { width: 100%; height: 100%; display: block; overflow: visible; }
.v2-bub text { font-family: 'DM Sans', sans-serif; }
.v2-bub .v2-cat-name { font-weight: 600; }
.v2-bub .v2-disk { transition: filter .2s; }
.v2-bub { transition: filter .22s ease; }
.v2-bub.is-hover { filter: drop-shadow(0 7px 16px rgba(80, 70, 120, 0.3)); }
.v2-bub.is-hover .v2-disk { filter: brightness(1.05) saturate(1.08); }
.v2-bub.is-central { filter: drop-shadow(0 8px 24px rgba(156, 124, 240, 0.3)); }
.v2-bub.is-central.is-hover { filter: drop-shadow(0 10px 28px rgba(156, 124, 240, 0.42)); }
.v2-bub.is-central .v2-cat-name { font-family: 'Fraunces', serif; font-weight: 500; }
.v2-bub .v2-cat-sub { font-style: italic; }
.v2-bub:focus { outline: none; }
.v2-bub:focus-visible .v2-disk { stroke: #5B7FD0; stroke-width: 3; stroke-opacity: 1; }

.v2-back {
  position: absolute; top: 4px; left: 4px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, 0.85); border: 1px solid var(--border, #e6e3ee);
  border-radius: 999px; padding: 8px 16px 8px 13px; cursor: pointer;
  font-family: inherit; font-size: 0.84rem; color: var(--text, #1c1b22);
  box-shadow: 0 6px 20px -10px rgba(80, 70, 120, 0.3); transition: transform .18s, box-shadow .18s;
}
.v2-back:hover { transform: translateX(-2px); box-shadow: 0 8px 24px -10px rgba(80, 70, 120, 0.42); }
.v2-back span[aria-hidden] { font-size: 1rem; }
.v2-crumb {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: 'Fraunces', serif; font-size: 1.1rem; color: var(--text, #1c1b22);
  display: inline-flex; align-items: center; gap: 9px; pointer-events: none;
}
.v2-crumb-ic { font-size: 1.15rem; }
.v2-crumb-count { font-family: 'DM Sans', sans-serif; font-size: 0.74rem; background: rgba(120, 110, 160, 0.12); color: var(--text-2, #5a5862); border-radius: 999px; padding: 2px 9px; }
.v2-hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  margin: 0; font-size: 0.8rem; color: var(--text-3, #9a96a4); pointer-events: none;
  background: rgba(255, 255, 255, 0.6); padding: 5px 14px; border-radius: 999px; backdrop-filter: blur(4px);
}

/* ── Tool-detail slide-in ── */
.v2-detail-scrim {
  position: fixed; inset: 0; z-index: 60; background: rgba(30, 26, 46, 0.18);
  opacity: 0; transition: opacity .28s; backdrop-filter: blur(1px);
}
.v2-detail-scrim.is-open { opacity: 1; }
.v2-detail {
  position: fixed; top: 0; right: 0; z-index: 61; height: 100vh; width: min(380px, 92vw);
  background: var(--bg, #fff); border-left: 1px solid var(--border, #ece9f4);
  box-shadow: -20px 0 60px -28px rgba(40, 30, 80, 0.4);
  /* padding-top past voor de vaste header (~52px) zodat de sluitknop zichtbaar is */
  padding: 60px 26px 28px;
  overflow-y: auto;
  transform: translateX(104%); transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
.v2-detail.is-open { transform: translateX(0); }
.v2-d-close {
  position: absolute; top: 58px; right: 16px; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: rgba(120, 110, 160, 0.1);
  cursor: pointer; font-size: 0.9rem; color: var(--text-2, #5a5862);
}
.v2-d-close:hover { background: rgba(120, 110, 160, 0.2); }
.v2-d-head { display: flex; gap: 14px; align-items: center; margin: 6px 0 18px; }
.v2-d-logo { width: 56px; height: 56px; border-radius: 16px; background-size: cover; background-position: center; flex-shrink: 0; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.25); }
.v2-d-logo-init { display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; font-family: 'Fraunces', serif; }
.v2-d-cat { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.v2-d-name { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.45rem; margin: 2px 0 0; color: var(--text, #1c1b22); }
.v2-d-stats { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 16px; }
.v2-d-stat { font-size: 0.92rem; color: #E8A33D; font-weight: 600; }
.v2-d-badge { font-size: 0.74rem; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.v2-d-gratis { background: #E3F5E6; color: #2E7D43; }
.v2-d-freemium { background: #FFF0DD; color: #B5701A; }
.v2-d-betaald { background: #ECECEF; color: #5C5C66; }
.v2-d-price { font-size: 0.82rem; color: var(--text-2, #6c6877); }
.v2-d-desc { font-size: 0.92rem; line-height: 1.6; color: var(--text-2, #4f4b59); margin: 0 0 22px; }
.v2-d-link {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  background: linear-gradient(135deg, #6E94D6, #9C7BE0); color: #fff;
  padding: 11px 20px; border-radius: 999px; font-weight: 600; font-size: 0.9rem;
  transition: transform .18s, filter .18s;
}
.v2-d-link:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ── Tool-view: hero compacter, tools krijgen meer canvas ── */
body.v2-tools .v2-hero { padding: 6px 0 4px; }
body.v2-tools .v2-title { font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.1; }
body.v2-tools .v2-title-1 { display: inline; }
body.v2-tools .v2-title-2 { display: inline; margin-left: 9px; }
body.v2-tools .v2-promise, body.v2-tools .v2-legend { display: none; }
body.v2-tools .v2-search { margin-top: 12px; }

/* ── Mobiel ── */
@media (max-width: 860px) {
  #v2-root { min-height: auto; padding-left: 10px; padding-right: 10px; }
  .v2-stage { flex-direction: column; }
  .v2-context { width: 100%; }
  /* Op mobiel: "Zo werkt"-kaart weg, korte hint volstaat (ruimte sparen) */
  body.v2 .v2-context { display: none; }
  .v2-title { font-size: clamp(1.7rem, 7vw, 2.3rem); }
  .v2-legend { display: none; }
  .v2-hero { padding: 6px 0 8px; }
  .v2-canvas { min-height: 62vh; }
  /* Op mobiel: back links (← Alle categorieën) + crumb naast elkaar,
     crumb rechts zodat ze niet overlappen */
  .v2-back { font-size: 0.78rem; padding: 6px 10px 6px 8px; max-width: 48%; }
  .v2-crumb {
    left: auto; right: 8px; transform: none; top: 12px;
    font-size: 0.88rem;
    max-width: 44%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .v2-crumb-count { display: none; } /* op smal scherm te druk */
  /* Hint simpeler op mobiel */
  .v2-hint { font-size: 0.74rem; padding: 4px 11px; }
}
@media (min-width: 861px) {
  /* In tool-view toont de context filters; op de landing de "Zo werkt"-kaart */
  .v2-context-tools .v2-card { position: sticky; top: 90px; }
}

/* ── Dark theme ── */
/* v1 darkt de pagina-bg niet globaal; voor v2 zetten we een eigen donkere
   achtergrond zodat de (lichte) hero-tekst leesbaar is. bg-blobs gloeien subtiel. */
body.v2[data-theme="dark"] { background: #141220 !important; }
body[data-theme="dark"].v2 .v2-canvas { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border-color: rgba(255, 255, 255, 0.1); }
body[data-theme="dark"].v2 .v2-card,
body[data-theme="dark"].v2 .v2-search { background: rgba(40, 36, 56, 0.7); }
body[data-theme="dark"].v2 .v2-search-input { color: #eee; }
body[data-theme="dark"].v2 .v2-back { background: rgba(40, 36, 56, 0.85); }
body[data-theme="dark"].v2 .v2-detail { background: #1b1828; }
body[data-theme="dark"].v2 .v2-hint { background: rgba(40, 36, 56, 0.6); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .v2-bub, .v2-detail, .v2-search-btn, .v2-back { transition: none !important; }
}