/* ==========================================================================
   Gratis SEO-tools: iconen en voorbeelduitkomsten (fs-pv-*)
   Geladen via inc/tools-visuals.php op /gratis-seo-tools/ en de toolpagina's.
   Eindstand is de standaard. Alleen met JavaScript (.js op <html>) en zonder
   reduced motion begint een voorbeeld in de beginstand en loopt het naar de
   eindstand zodra tool-visuals.js de klasse .is-visible zet.
   ========================================================================== */

.fs-tool-icon { display: block; flex: 0 0 auto; }

/* Kaart ------------------------------------------------------------------- */
.fs-pv {
  --fs-pv-good: var(--fs-green);
  --fs-pv-warn: var(--fs-gold);
  --fs-pv-bad: #b3261e;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 380px;
  min-height: 260px;
  padding: 18px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-md);
  background: #fff;
  box-shadow: var(--fs-shadow);
  color: var(--fs-text);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.fs-pv * { min-width: 0; }
:where(.fs-pv) :where(p, ul, ol, li) { margin: 0; padding: 0; }
:where(.fs-pv) :where(ul, ol) { list-style: none; }

.fs-pv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fs-pv-context { overflow: hidden; color: var(--fs-muted); font-size: 13px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.fs-pv-badge { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; background: var(--fs-cream); color: var(--fs-gold-readable); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.fs-pv-note { color: var(--fs-muted); font-size: 13px; }
.fs-pv-tick { display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--fs-pv-good); color: #fff; }

/* Tabs (schema-generator, deelvoorbeeld) */
.fs-pv-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--fs-cream); align-self: flex-start; max-width: 100%; }
.fs-pv-tabs span { padding: 3px 10px; border-radius: 999px; color: var(--fs-muted); font-size: 13px; font-weight: 650; }
.fs-pv-tabs .is-on { background: #fff; color: var(--fs-navy); box-shadow: 0 2px 8px rgba(8, 21, 43, .08); }

/* SEO-check: score-ring met drie regels */
.fs-pv-score { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: center; flex: 1; }
.fs-pv-ring { position: relative; display: grid; place-items: center; width: 104px; height: 104px; }
.fs-pv-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fs-pv-ring circle { fill: none; stroke-width: 7; }
.fs-pv-ring-bg { stroke: var(--fs-cream-deep); }
.fs-pv-ring-val { stroke: var(--fs-gold); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--fs-pv-v, 0)); }
.fs-pv-ring b { position: relative; margin-top: -8px; color: var(--fs-navy); font-size: 30px; font-weight: 750; line-height: 1; letter-spacing: -.03em; }
.fs-pv-ring span { position: absolute; top: 62px; color: var(--fs-muted); font-size: 13px; }
.fs-pv-checks { display: grid; gap: 8px; }
.fs-pv-checks li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 9px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--fs-line); border-radius: 10px; color: var(--fs-navy); font-size: 13px; font-weight: 600; line-height: 1.35; }
.fs-pv-checks i, .fs-pv-types li::before { width: 10px; height: 10px; border-radius: 50%; background: var(--fs-line); transform: translateY(1px); }
.fs-pv-checks .is-good i { background: var(--fs-pv-good); }
.fs-pv-checks .is-warn i { background: var(--fs-pv-warn); }
.fs-pv-checks .is-bad i { background: var(--fs-pv-bad); }

/* Google-voorbeeld en indexcheck: zoekresultaat */
.fs-pv-serp, .fs-pv-snippet { display: grid; gap: 4px; }
.fs-pv-serp-site { display: flex; align-items: center; gap: 10px; }
.fs-pv-serp-site > span:last-child { display: grid; line-height: 1.3; overflow: hidden; }
.fs-pv-serp-site b { color: #202124; font-size: 14px; font-weight: 600; }
.fs-pv-serp-site small, .fs-pv-snippet small { overflow: hidden; color: #4d5156; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.fs-pv-fav { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--fs-cream); border: 1px solid var(--fs-cream-deep); color: var(--fs-navy); font-size: 13px; font-weight: 800; }
.fs-pv-serp-title { margin-top: 4px; color: #1a0dab; font-size: 17px; line-height: 1.3; }
.fs-pv-serp-desc { color: #4d5156; font-size: 13px; line-height: 1.5; }
.fs-pv-serp-desc b { color: #202124; }
.fs-pv-meters { display: grid; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid #eee8dc; }
.fs-pv-meter { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.fs-pv-meter span { color: var(--fs-navy); font-weight: 650; }
.fs-pv-meter em { color: var(--fs-muted); font-style: normal; }
.fs-pv-meter i, .fs-pv-domains i, .fs-pv-bars i { position: relative; display: block; height: 8px; border-radius: 999px; background: var(--fs-cream-deep); overflow: hidden; }
.fs-pv-meter i::after, .fs-pv-domains i::after, .fs-pv-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fs-pv-w, 0); border-radius: inherit; background: var(--fs-pv-good); transform-origin: left center; }

/* AI-check: vraag en antwoord */
.fs-pv-chat { display: grid; gap: 10px; }
.fs-pv-q { justify-self: end; max-width: 88%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--fs-navy); color: #fff; font-size: 13px; font-weight: 600; }
.fs-pv-a { max-width: 94%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--fs-cream); color: var(--fs-text); font-size: 13px; }
.fs-pv-a ol { display: grid; gap: 2px; margin-top: 6px; counter-reset: fs-pv-a; }
.fs-pv-a li { counter-increment: fs-pv-a; }
.fs-pv-a li::before { content: counter(fs-pv-a) ". "; color: var(--fs-muted); }
.fs-pv-hl { padding: 0 .12em; font-weight: 750; color: var(--fs-navy); background: linear-gradient(transparent 55%, rgba(215, 168, 58, .6) 55%, rgba(215, 168, 58, .6) 92%, transparent 92%) no-repeat 0 0 / 100% 100%; }
.fs-pv-verdict, .fs-pv-status { display: flex; align-items: center; gap: 9px; margin-top: auto; color: var(--fs-green); font-size: 14px; font-weight: 750; }
.fs-pv-status { margin-top: 0; font-size: 17px; letter-spacing: -.01em; }

/* Backlinks: drie tellers en drie domeinen */
.fs-pv-stats, .fs-pv-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fs-pv-stats div, .fs-pv-counts div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--fs-cream); }
.fs-pv-stats b, .fs-pv-counts b { color: var(--fs-navy); font-size: 24px; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; }
.fs-pv-stats span, .fs-pv-counts span { color: var(--fs-muted); font-size: 13px; }
.fs-pv-domains { display: grid; gap: 10px; }
.fs-pv-domains li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; align-items: center; font-size: 13px; color: var(--fs-navy); font-weight: 600; }
.fs-pv-domains span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fs-pv-domains i::after { background: var(--fs-navy); }

/* Positie: plek 4 met mini-top-5 */
.fs-pv-rank { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; align-items: center; flex: 1; }
.fs-pv-place { display: grid; justify-items: center; padding: 12px 8px; border-radius: 14px; background: var(--fs-navy); color: #fff; text-align: center; }
.fs-pv-place span { color: var(--fs-gold-light); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fs-pv-place b { font-size: 48px; font-weight: 750; line-height: 1; letter-spacing: -.04em; }
.fs-pv-place small { margin-top: 4px; color: #d8e0ec; font-size: 13px; line-height: 1.3; }
.fs-pv-top5 { display: grid; gap: 4px; }
.fs-pv-top5 li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; padding: 4px 8px; border-radius: 8px; color: var(--fs-muted); font-size: 13px; }
.fs-pv-top5 span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fs-pv-top5 em { color: var(--fs-muted); font-style: normal; font-weight: 700; }
.fs-pv-top5 .is-you { background: rgba(215, 168, 58, .2); box-shadow: inset 0 0 0 1.5px var(--fs-gold); color: var(--fs-navy); font-weight: 750; }
.fs-pv-top5 .is-you em { color: var(--fs-navy); }

/* Indexcheck */
.fs-pv-snippet { padding: 12px 14px; border: 1px solid var(--fs-line); border-radius: 12px; }
.fs-pv-snippet .fs-pv-serp-title { margin-top: 0; font-size: 16px; }
.fs-pv--index-checker .fs-pv-note { margin-top: auto; }

/* Codeblokken: robots.txt en JSON-LD */
.fs-pv-code { display: grid; flex: 1; align-content: start; margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--fs-navy-dark); color: #e6ecf5; font: 500 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.fs-pv-code span { display: block; min-height: 1.6em; }
.fs-pv-code em { color: var(--fs-gold-light); font-style: normal; }
.fs-pv-code u { color: #9fd8bf; text-decoration: none; }

/* Schema-checker: drie types */
.fs-pv-types { display: grid; gap: 8px; }
.fs-pv-types li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--fs-line); border-radius: 12px; }
.fs-pv-types li::before { content: ""; transform: none; }
.fs-pv-types b { overflow: hidden; color: var(--fs-navy); font-size: 14px; font-weight: 700; text-overflow: ellipsis; }
.fs-pv-types span { padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.fs-pv-types .is-good::before { background: var(--fs-pv-good); }
.fs-pv-types .is-good span { background: #e8f3ee; color: var(--fs-green); }
.fs-pv-types .is-warn::before { background: var(--fs-pv-warn); }
.fs-pv-types .is-warn span { background: #f8efd9; color: var(--fs-orange); }
.fs-pv--schema-checker .fs-pv-note, .fs-pv--backlinks-checken .fs-pv-note { margin-top: auto; }

/* Deelvoorbeeld: linkkaart */
.fs-pv-link { display: grid; flex: 1; grid-template-rows: minmax(96px, 1fr) auto; border: 1px solid var(--fs-line); border-radius: 12px; overflow: hidden; }
.fs-pv-link-img { position: relative; min-height: 96px; background: linear-gradient(180deg, #f3e3b8 0%, var(--fs-cream) 100%); overflow: hidden; }
.fs-pv-link-sun { position: absolute; top: 16px; right: 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--fs-gold); }
.fs-pv-link-house { position: absolute; left: 24%; bottom: 0; width: 34%; height: 46%; background: var(--fs-navy); border-radius: 2px 2px 0 0; }
.fs-pv-link-house::after { content: ""; position: absolute; left: 38%; bottom: 0; width: 24%; height: 58%; background: var(--fs-gold-light); border-radius: 2px 2px 0 0; }
.fs-pv-link-roof { position: absolute; left: calc(24% - 10px); bottom: 45%; width: calc(34% + 20px); height: 30%; background: var(--fs-navy-mid); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fs-pv-link-text { display: grid; gap: 2px; padding: 10px 12px; background: #fff; border-top: 1px solid var(--fs-line); }
.fs-pv-link-text b { color: var(--fs-text); font-size: 14px; font-weight: 700; line-height: 1.35; }
.fs-pv-link-text small { color: var(--fs-muted); font-size: 13px; }

/* Woordenteller: vier grote tellers */
.fs-pv-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; flex: 1; }
.fs-pv-counts div { align-content: center; padding: 14px 16px; }
.fs-pv-counts b { font-size: 32px; }

/* Leesbaarheid: score met schaal */
.fs-pv-read { display: flex; align-items: center; gap: 14px; }
.fs-pv-read b { color: var(--fs-navy); font-size: 52px; font-weight: 750; line-height: 1; letter-spacing: -.04em; }
.fs-pv-read span { display: grid; color: var(--fs-muted); font-size: 13px; }
.fs-pv-read strong { color: var(--fs-navy); font-size: 17px; }
.fs-pv-scale { position: relative; padding-top: 14px; }
.fs-pv-scale > i { position: absolute; top: 0; left: var(--fs-pv-x, 0); width: 0; height: 0; margin-left: -7px; border: 7px solid transparent; border-top: 9px solid var(--fs-navy); border-bottom: 0; }
.fs-pv-scale-bar { display: grid; grid-template-columns: 50fr 10fr 10fr 30fr; gap: 3px; height: 12px; }
.fs-pv-scale-bar span { border-radius: 3px; }
.fs-pv-scale-bar span:nth-child(1) { background: #e3b7b3; border-radius: 999px 3px 3px 999px; }
.fs-pv-scale-bar span:nth-child(2) { background: #efd9a3; }
.fs-pv-scale-bar span:nth-child(3) { background: #cfe3d8; }
.fs-pv-scale-bar span:nth-child(4) { background: #9cc9b3; border-radius: 3px 999px 999px 3px; }
.fs-pv-scale-labels { display: flex; justify-content: space-between; margin-top: 6px; color: var(--fs-muted); font-size: 13px; }
.fs-pv--leesbaarheid-checken .fs-pv-note { margin-top: auto; }

/* Zoekwoorddichtheid: staafjes van woorden */
.fs-pv-density { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.fs-pv-density b { color: var(--fs-navy); font-size: 40px; font-weight: 750; line-height: 1; letter-spacing: -.03em; }
.fs-pv-density span { color: var(--fs-muted); font-size: 13px; }
.fs-pv-bars { display: grid; gap: 9px; }
.fs-pv-bars li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 24px; gap: 10px; align-items: center; color: var(--fs-navy); font-size: 13px; font-weight: 600; }
.fs-pv-bars span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fs-pv-bars em { color: var(--fs-muted); font-style: normal; text-align: right; }
.fs-pv-bars i { height: 12px; }
.fs-pv-bars i::after { background: var(--fs-navy-mid); opacity: .55; }
.fs-pv-bars .is-key i::after { background: var(--fs-gold); opacity: 1; }
.fs-pv-bars .is-key span { font-weight: 800; }

@media (max-width: 420px) {
  .fs-pv { padding: 16px; }
  .fs-pv-score { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .fs-pv-ring { width: 88px; height: 88px; }
  .fs-pv-ring b { font-size: 26px; }
  .fs-pv-ring span { top: 52px; }
  .fs-pv-rank { grid-template-columns: 78px minmax(0, 1fr); gap: 10px; }
  .fs-pv-tabs { gap: 2px; }
  .fs-pv-tabs span { padding: 3px 8px; }
  .fs-pv-place b { font-size: 40px; }
  .fs-pv-stats b { font-size: 20px; }
  .fs-pv-counts b { font-size: 26px; }
  .fs-pv-meter { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .fs-pv-bars li { grid-template-columns: 80px minmax(0, 1fr) 22px; }
}

/* Binnenkomst-animatie -------------------------------------------------------
   Alleen met JS en zonder reduced motion. Transities staan op het element zelf;
   de beginstand geldt zolang .is-visible ontbreekt. */
@media (prefers-reduced-motion: no-preference) {
  .fs-pv-ring-val { transition: stroke-dashoffset 1.1s cubic-bezier(.3, .7, .2, 1) .15s; }
  .js .fs-pv:not(.is-visible) .fs-pv-ring-val { stroke-dashoffset: 100; }

  .fs-pv-checks li, .fs-pv-types li, .fs-pv-top5 li, .fs-pv-domains li, .fs-pv-bars li, .fs-pv-stats div, .fs-pv-counts div,
  .fs-pv-q, .fs-pv-a, .fs-pv-verdict, .fs-pv-status, .fs-pv-snippet, .fs-pv-code span, .fs-pv-link, .fs-pv-serp, .fs-pv-read, .fs-pv-density {
    transition: opacity .45s ease, transform .45s ease;
  }
  .js .fs-pv:not(.is-visible) :is(.fs-pv-checks li, .fs-pv-types li, .fs-pv-top5 li, .fs-pv-domains li, .fs-pv-bars li, .fs-pv-stats div, .fs-pv-counts div,
  .fs-pv-q, .fs-pv-a, .fs-pv-verdict, .fs-pv-status, .fs-pv-snippet, .fs-pv-code span, .fs-pv-link, .fs-pv-serp, .fs-pv-read, .fs-pv-density) {
    opacity: 0;
    transform: translateY(8px);
  }

  /* Volgorde: elk volgend element iets later */
  .fs-pv :is(li, .fs-pv-stats div, .fs-pv-counts div, .fs-pv-code span):nth-child(2) { transition-delay: .08s; }
  .fs-pv :is(li, .fs-pv-stats div, .fs-pv-counts div, .fs-pv-code span):nth-child(3) { transition-delay: .16s; }
  .fs-pv :is(li, .fs-pv-stats div, .fs-pv-counts div, .fs-pv-code span):nth-child(4) { transition-delay: .24s; }
  .fs-pv :is(li, .fs-pv-code span):nth-child(5) { transition-delay: .32s; }
  .fs-pv .fs-pv-code span:nth-child(6) { transition-delay: .40s; }
  .fs-pv .fs-pv-code span:nth-child(7) { transition-delay: .48s; }
  .fs-pv .fs-pv-code span:nth-child(n+8) { transition-delay: .56s; }
  .fs-pv .fs-pv-a { transition-delay: .25s; }
  .fs-pv .fs-pv-verdict { transition-delay: .9s; }
  .fs-pv .fs-pv-snippet { transition-delay: .15s; }

  /* Balkjes groeien */
  .fs-pv-meter i::after, .fs-pv-domains i::after, .fs-pv-bars i::after { transition: transform .9s cubic-bezier(.3, .7, .2, 1) .25s; }
  .js .fs-pv:not(.is-visible) :is(.fs-pv-meter, .fs-pv-domains, .fs-pv-bars) i::after { transform: scaleX(0); }

  /* Markering in het ChatGPT-antwoord tekent zichzelf */
  .fs-pv-hl { transition: background-size .8s ease .7s; }
  .js .fs-pv:not(.is-visible) .fs-pv-hl { background-size: 0% 100%; }

  /* Pijl op de leesbaarheidsschaal schuift naar de score */
  .fs-pv-scale > i { transition: left 1s cubic-bezier(.3, .7, .2, 1) .2s; }
  .js .fs-pv:not(.is-visible) .fs-pv-scale > i { left: 0; }

  /* Eigen plek in de top 5 licht op */
  .fs-pv .fs-pv-top5 li.is-you { transition: opacity .45s ease .24s, transform .45s ease .24s, background-color .6s ease .7s, box-shadow .6s ease .7s; }
  .js .fs-pv:not(.is-visible) .fs-pv-top5 li.is-you { background-color: transparent; box-shadow: inset 0 0 0 1.5px transparent; }
}