/* Gratis VSO-check — de pagina (B-096/B-098, v2.24.0). Laadt ná calculator.css:
   de trechter (vlak, wrap, kaart, fasen, velden, knoppen, zijkolom) komt daarvandaan,
   hier staat alleen wat de upload toevoegt. Maten uit mockup r1.1 (gemeten op 390 en 1280). */

/* ── drie fasen in plaats van vier (mobiele lijnen zijn absoluut gepositioneerd) ── */
.orj-calc--vso .orj-calc-fasen { grid-template-columns: repeat(3, 1fr); }
.orj-calc--vso .orj-calc-lijn { width: calc(33.333% - var(--bol) - 2 * var(--gap)); }
.orj-calc--vso .orj-calc-lijn--0 { left: calc(16.667% + var(--bol) / 2 + var(--gap)); }
.orj-calc--vso .orj-calc-lijn--1 { left: calc(50% + var(--bol) / 2 + var(--gap)); }
.orj-calc--vso { --calc-stand-h-m: 456px; }   /* gemeten: het lege uploadscherm eindigt op 660 bij 390 × 660 (header 73) */

/* ── ghost-knop (secundair naast de solid Volgende) ── */
.orj-calc--vso .orj-cta--ghost { background: #fff !important; color: var(--orj-ink) !important; border: 1px solid #c6d7cf !important; gap: 10px; cursor: pointer; }
.orj-calc--vso .orj-cta--ghost:hover { background: var(--orj-mint) !important; border-color: #9dbfb1 !important; }
.orj-calc--vso .orj-cta--ghost:focus-within { outline: 2px solid var(--orj-green); outline-offset: 2px; }
.orj-calc--vso .orj-cta--sm2 { height: 48px !important; min-width: 0 !important; font-size: 15px !important; padding: 0 18px !important; }
.orj-vsop-ico { width: 18px; height: 18px; flex-shrink: 0; }
.orj-vsop-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.orj-calc--vso label.orj-cta { position: relative; }

/* ── dropzone: mintvlak, gestippelde rand, r12 (geneste hoek onder de kaart van 16) ── */
.orj-vsop-dz { border: 1.5px dashed #9dbfb1; background: var(--orj-mint); border-radius: 12px; padding: 16px; text-align: center; transition: background .15s, border-color .15s; }
.orj-vsop-dz.is-sleep { background: var(--orj-mint-donker); border-color: var(--orj-green); }
.orj-vsop-dz-icoon { display: block; width: 40px; height: 40px; margin: 0 auto 10px; color: var(--orj-green); }
.orj-vsop-dz-icoon svg { width: 40px; height: 40px; }
.orj-vsop-dz-acties { display: grid; gap: 10px; }
.orj-vsop-dz-acties .orj-cta { width: 100%; height: 48px; min-width: 0; }
.orj-vsop-dz-hint { margin: 10px 0 0; font-size: 13px; color: #4b5563; line-height: 1.4; }   /* B-235: muted haalt op mint 4,3 : 1 (§2b: muted alleen op wit); #4b5563 = 6,8 : 1 */
.orj-vsop-alleen-desktop, .orj-vsop-alleen-desktop-flex { display: none !important; }
@media (hover: hover) and (pointer: fine) {
	.orj-vsop-cam { display: none !important; }                  /* geen camera op een desktop: de bestandskiezer is dan de enige knop */
	.orj-vsop-alleen-touch { display: none !important; }
	.orj-vsop-alleen-desktop { display: inline !important; }
	.orj-vsop-alleen-desktop-flex { display: inline-flex !important; }
}
@container orjcalc (min-width: 640px) {
	.orj-vsop-dz { padding: 32px 24px; }
	.orj-vsop-dz-icoon, .orj-vsop-dz-icoon svg { width: 48px; height: 48px; }
	.orj-vsop-dz-icoon { margin-bottom: 14px; }
	.orj-vsop-dz-acties { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
	.orj-vsop-dz-acties .orj-cta { width: auto; height: 56px; }
	.orj-vsop-dz-hint { font-size: 14px; margin-top: 12px; }
}
/* met bestanden: compact, links uitgelijnd */
.orj-vsop-dz.is-vol { padding: 16px 18px; text-align: left; }
.orj-vsop-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.orj-vsop-rij { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #c6d7cf; border-radius: 8px; padding: 8px; }
.orj-vsop-thumb { width: 44px; height: 44px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; overflow: hidden; background: var(--orj-mint); color: var(--orj-green-dark); }
.orj-vsop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.orj-vsop-naam { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orj-vsop-naam small { display: block; font-size: 13px; font-weight: 400; color: var(--orj-muted); }
.orj-vsop-weg { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 50%; color: var(--orj-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.orj-vsop-weg:hover { background: var(--orj-mint); }
.orj-vsop-weg:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 1px; }
.orj-vsop-weg svg { width: 16px; height: 16px; }
.orj-vsop-telling { margin: 10px 0 0; font-size: 14px; color: #4b5563; }   /* B-235: staat op mint */
@media (hover: hover) and (pointer: fine) { .orj-vsop-dz:not(.is-vol) { cursor: pointer; } }   /* B-235: het hele lege vlak opent de bestandskiezer */
.orj-vsop-meer { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.orj-vsop-meer .orj-cta { width: auto; }
.orj-vsop-nudge { margin-top: 14px; padding: 14px 16px; background: #fff; border: 1px solid #c6d7cf; border-radius: 10px; font-size: 15px; line-height: 1.45; }
.orj-vsop-nudge p { margin: 0; font-weight: 600; }
.orj-vsop-nudge-acties { display: flex; gap: 14px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.orj-vsop-nudge-ja { background: none; border: 0; color: var(--orj-green-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px 0; font-size: 15px; min-height: 44px; }
.orj-vsop-nudge[hidden], .orj-vsop-dz-vol[hidden], .orj-vsop-dz-leeg[hidden], .orj-vsop-meer[hidden] { display: none !important; }

/* ── gegevens ── */
.orj-vsop-recap { display: flex; align-items: center; gap: 10px; font-size: 15px; margin: -6px 0 18px; padding: 10px 14px; background: var(--orj-paper); border-radius: 10px; line-height: 1.4; }
.orj-vsop-recap b { font-weight: 600; }
.orj-vsop-recap-wijzig { margin-left: auto; background: none; border: 0; color: var(--orj-green-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 0; white-space: nowrap; font-size: 15px; }
.orj-vsop-optioneel { font-weight: 400; color: var(--orj-muted); }
.orj-calc--vso .orj-vsop-textarea { height: auto !important; min-height: 96px; padding: 12px 14px !important; line-height: 1.45 !important; resize: vertical; }
.orj-vsop-vink { margin: 4px 0 0; align-items: flex-start; font-size: 15px; }
.orj-vsop-vink input { margin-top: 2px; }
.orj-vsop-vink a { color: var(--orj-green-dark); font-weight: 500; }
.orj-calc--vso .orj-calc-micro a { color: var(--orj-green-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ── versturen: echte voortgang ── */
.orj-vsop-progress { height: 8px; background: var(--orj-mint); border-radius: 4px; overflow: hidden; margin-top: 8px; }
.orj-vsop-progress span { display: block; height: 100%; width: 0; background: var(--orj-green); border-radius: 4px; transition: width .2s; }
.orj-vsop-progress-lbl { display: flex; justify-content: space-between; font-size: 14px; color: var(--orj-muted); margin: 8px 0 0; }

/* ── klaar ── */
.orj-vsop-lead { font-size: 18px; line-height: 1.45; margin: 0 0 22px; max-width: 46ch; }
.orj-vsop-lead b { font-weight: 600; }
.orj-vsop-ontvangen { background: var(--orj-paper); border-radius: 10px; padding: 14px 16px; margin: 0 0 24px; }
.orj-vsop-ontvangen > p { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.orj-vsop-ontvangen ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 15px; color: #374151; }
.orj-vsop-ontvangen ul li::before { content: "✓"; color: var(--orj-green); font-weight: 700; margin-right: 8px; }
.orj-vsop-h3 { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
.orj-vsop-checks { display: grid; grid-template-columns: 1fr; gap: 6px 24px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.orj-vsop-checks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.orj-vsop-checks li i { width: 18px; height: 18px; border-radius: 50%; background: var(--orj-green); flex-shrink: 0; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.orj-vsop-checks li i svg { width: 11px; height: 11px; stroke-width: 3; }
@container orjcalc (min-width: 640px) { .orj-vsop-checks { grid-template-columns: 1fr 1fr; } }
.orj-vsop-link { color: var(--orj-green-dark); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; }
.orj-vsop-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── zijkolom: zo werkt het ── */
.orj-vsop-stappen { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.orj-vsop-stappen li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.orj-vsop-stappen li span { width: 26px; height: 26px; border-radius: 50%; background: var(--orj-mint); color: var(--orj-green-dark); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.orj-vsop-stappen li b { display: block; font-weight: 600; }
.orj-vsop-stappen li small { color: var(--orj-muted); font-size: 14px; }
.orj-vsop-goed { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--haar); font-size: 14px; color: #374151; line-height: 1.45; }
/* B-234: één zijkaart op de dienstpagina. Zo werkt het als tijdlijn: inktring 12 op de eerste regel van de titel (21 hoog), spoor van 2 in
   de grijze rand van de ghost-knop, 4 vrij boven en onder elke ring; geen nummers en geen groen accent (geen voortgangstaal, B-144). */
.orj-vsop-zo--kaart .orj-vsop-stappen { gap: 16px; }
.orj-vsop-zo--kaart .orj-vsop-stappen li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 14px; position: relative; }
.orj-vsop-zo--kaart .orj-vsop-knoop { display: block; width: 12px; height: 12px; margin-top: 4.5px; border: 2px solid var(--orj-ink); border-radius: 50%; background: #fff; position: relative; z-index: 1; }
.orj-vsop-zo--kaart .orj-vsop-stappen li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 20.5px; bottom: -16.5px; width: 2px; border-radius: 1px; background: #d1d5db; }
.orj-vsop-zo--kaart .orj-vsop-stappen li small { display: block; text-wrap: pretty; }
.orj-vsop-zo--kaart .orj-vsop-goed b { font-weight: 600; color: var(--orj-ink); }
/* Trustpilot als voet: het lockup van de hero op tegel 18, in twee rijen (label + sterren · aantal + logo), zoals onder 640 (B-045) */
.orj-vsop-zo--kaart .orj-vsop-tp { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--haar); }
.orj-vsop-zo--kaart .orj-vsop-tp .orj-tp { --tp-h: 18px !important; flex-wrap: wrap !important; justify-content: flex-start; row-gap: 8px !important; }
.orj-vsop-zo--kaart .orj-vsop-tp .orj-tp-breuk { display: block; flex-basis: 100%; height: 0; }

/* ── FAQ-strook onder het vlak (wit) ── */
.orj-vsop-faq { background: #fff; padding: 48px 16px 56px; font-family: var(--orj-font); color: var(--orj-ink); }
.orj-vsop-faq-in { max-width: 1024px; margin: 0 auto; }
.orj-vsop-faq .orj-calc-kop { font-size: 24px !important; }
.orj-vsop-faq .orj-calc-streep { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--orj-green); margin: 14px 0 8px; }
.orj-vsop-faq-lijst { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--lijn); }
.orj-vsop-faq-lijst li { padding: 20px 0; border-bottom: 1px solid var(--lijn); }
.orj-vsop-faq-lijst h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.orj-vsop-faq-lijst p { margin: 0; font-size: 16px; line-height: 1.55; color: #374151; }
.orj-vsop-lees { background: var(--orj-mint); border-radius: 16px; padding: 24px 28px; font-size: 15px; line-height: 1.5; margin-top: 32px; }
.orj-vsop-lees h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.orj-vsop-lees p { margin: 0 0 12px; }
.orj-vsop-lees p:last-child { margin: 0; }
.orj-vsop-lees a { color: var(--orj-green-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 960px) {
	.orj-vsop-faq { padding: 72px 24px 80px; }
	.orj-vsop-faq-in--zij { display: grid; grid-template-columns: 660px 316px; column-gap: 48px; align-items: start; }
	.orj-vsop-lees { margin-top: 0; }
	.orj-vsop-faq .orj-calc-kop { font-size: 28px !important; }
	.orj-vsop-faq-lijst h3 { font-size: 18px; }
}

/* ── zonder JavaScript ── */
.orj-vsop-nojs { display: block; }
html.orj-js .orj-vsop-nojs { display: none; }
.orj-vsop-nojs .orj-calc-kop { margin-bottom: 18px !important; }
.orj-vsop-nojs-status { margin: 16px 0 0; font-weight: 600; }
.orj-vso-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .orj-vsop-progress span, .orj-vsop-dz { transition: none; } }