/* ==========================================================================
   Mockups bij de functieblokken

   De oude beelden waren marketingafbeeldingen van de leveranciers: een
   Elementor-collage, een FunnelKit-monitor, een BuddyBoss-community. Ze
   toonden niet ons product, droegen vreemde merknamen en stonden bovendien
   bij de verkeerde koppen. Deze mockups zijn getekend met HTML en CSS, in
   dezelfde stijl als de visual op de homepage. Ze schalen mee, zijn leesbaar
   in licht en donker, en de tekst erin is echte tekst.

   Opbouw: .mk is het venster, .mk-kop de balk erboven, daarna de inhoud.
   Alles is decoratief; belangrijke informatie staat altijd ook in de tekst
   naast de mockup.
   ========================================================================== */

.mk {
	/* Eigen kleuren: --groen en --amber betekenen in de lichte modus iets
	   anders, waardoor de labels hun kleur verloren. */
	--mk-groen: #157f4a;
	--mk-groen-bg: rgba(21, 127, 74, .12);
	--mk-amber: #9a6a12;
	--mk-amber-bg: rgba(154, 106, 18, .14);
	background: var(--bg2);
	border: 1px solid var(--rand);
	border-radius: var(--r-l);
	box-shadow: var(--schaduw);
	overflow: hidden;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tekst);
	text-align: left;
}
.mk .ico { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mk-kop { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--paneel); border-bottom: 1px solid var(--rand); font-size: 11px; color: var(--zacht); }
.mk-kop b { font-family: 'Archivo', system-ui, sans-serif; font-size: 11.5px; font-weight: 700; color: var(--tekst); letter-spacing: .01em; }
.mk-kop .mk-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.mk-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.mk-stip { width: 7px; height: 7px; border-radius: 50%; background: var(--mk-groen); flex-shrink: 0; }
.mk-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.mk-tag.ok { background: var(--mk-groen-bg); color: var(--mk-groen); }
.mk-tag.wacht { background: var(--mk-amber-bg); color: var(--mk-amber); }
.mk-kaart { background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--r-s); padding: 11px 12px; }
.mk-rij { display: flex; align-items: center; gap: 10px; }
.mk-rij + .mk-rij { margin-top: 8px; }
.mk-zacht { color: var(--zacht); }
.mk-num { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: auto; white-space: nowrap; }
.mk-balk { height: 6px; border-radius: 999px; background: var(--rand2); overflow: hidden; }
.mk-balk i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-h)); }
.mk-lijn { height: 8px; border-radius: 999px; background: var(--rand2); }
.mk-lijn.kort { width: 45%; }
.mk-lijn.half { width: 68%; }

/* Stappen onder elkaar, met een verbindingslijn: automatiseringen en funnels */
.mk-stappen { display: flex; flex-direction: column; gap: 0; }
.mk-stap { display: flex; align-items: center; gap: 10px; background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--r-s); padding: 10px 12px; }
.mk-stap b { font-weight: 600; }
.mk-pijl { width: 1px; height: 14px; margin-left: 24px; background: var(--rand2); }
.mk-stap .mk-bol { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); flex-shrink: 0; }
.mk-stap.groen .mk-bol { background: var(--mk-groen-bg); color: var(--mk-groen); }
.mk-stap.amber .mk-bol { background: var(--mk-amber-bg); color: var(--mk-amber); }

/* Bedragen, bijvoorbeeld in een checkout of op een factuur */
.mk-bedrag { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mk-bedrag span { color: var(--zacht); }
.mk-bedrag b { font-variant-numeric: tabular-nums; }
.mk-totaal { border-top: 1px solid var(--rand); padding-top: 9px; margin-top: 3px; font-family: 'Archivo', system-ui, sans-serif; }
.mk-totaal b { font-size: 16px; }

/* Betaalmethoden */
.mk-betaal { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.mk-betaal span { border: 1px solid var(--rand); border-radius: var(--r-xs); padding: 7px 8px; text-align: center; font-size: 10.5px; color: var(--zacht); background: var(--paneel); }
.mk-betaal span.aan { border-color: var(--accent); color: var(--tekst); box-shadow: 0 0 0 1px var(--accent) inset; }

/* Order bump en upsell: iets dat je aanvinkt */
.mk-bump { border: 1px dashed var(--accent); border-radius: var(--r-s); padding: 11px 12px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mk-vink { width: 16px; height: 16px; border-radius: 5px; background: var(--accent); color: #fff; display: grid; place-items: center; flex-shrink: 0; }

/* Knop in een mockup: nooit klikbaar, alleen beeld */
.mk-knop { display: inline-block; padding: 8px 14px; border-radius: 9px; background: var(--knop); color: #fff; font-weight: 600; font-size: 11.5px; text-align: center; }
.mk-knop.rustig { background: transparent; border: 1px solid var(--rand2); color: var(--tekst); }

/* Twee kolommen binnen een mockup, bijvoorbeeld editor en voorbeeld */
.mk-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .mk-twee { grid-template-columns: 1fr; } }

/* Raster met kleine blokjes: koppelingen, modules, statusvakjes */
.mk-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.mk-vak { background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--r-s); padding: 9px 10px; }
.mk-vak b { display: block; font-size: 11px; }
.mk-vak span { display: block; color: var(--zachter); font-size: 10.5px; }

/* Zoekresultaat en AI-antwoord, voor de pagina over vindbaarheid */
.mk-zoek { background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--r-s); padding: 11px 12px; }
.mk-zoek .url { color: var(--mk-groen); font-size: 10.5px; }
.mk-zoek .titel { color: var(--accent); font-weight: 600; margin: 3px 0 4px; }
.mk-zoek p { margin: 0; color: var(--zacht); font-size: 11px; }
.mk-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--zacht); background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--r-xs); padding: 8px 10px; white-space: pre-wrap; word-break: break-word; }

/* In de lichte modus houden we hetzelfde donkere venster: dat leest rustiger
   naast de tekst, en het is dezelfde keuze als bij de visual op de homepage. */

/* Kleine variant, voor in een kaart of naast een kop. Span-elementen, zodat
   hij ook binnen een <a> mag staan. */
.mk-mini { display: block; }
.mk-mini .mk-kop, .mk-mini .mk-body, .mk-mini .mk-rij { display: flex; }
.mk-mini .mk-body { flex-direction: column; gap: 7px; padding: 11px 12px; }
.mk-mini .mk-rij { align-items: center; gap: 8px; font-size: 11.5px; }
.mk-mini .mk-rij b { font-weight: 600; }
.mk-mini .mk-kop { padding: 9px 12px; }

/* In de donkere modus mogen de kleuren wat lichter, anders vallen ze weg. */
body:not(.licht) .mk {
	--mk-groen: #5FD08A;
	--mk-groen-bg: rgba(95, 208, 138, .14);
	--mk-amber: #E8B45C;
	--mk-amber-bg: rgba(232, 180, 92, .14);
}