/*
 * embed.css — vormgeving van de insluitbare widgets.
 *
 * Uitgangspunt: de widget staat op andermans pagina en moet daar niet als een
 * advertentie uitzien. Dus neutrale systeemtypografie, transparante
 * achtergrond, geen merkkleur als vlak. De enige merkuiting is het logo in de
 * bronregel onderaan.
 *
 * DRIE thema-toestanden, niet twee. Dat onderscheid is de kern van dit bestand:
 *
 *   1. Geen data-embed-theme  -> volg prefers-color-scheme (de bezoeker beslist)
 *   2. data-embed-theme=light -> altijd licht, ook op een donker systeem
 *   3. data-embed-theme=dark  -> altijd donker, ook op een licht systeem
 *
 * Waarom (2) en (3) moeten bestaan: prefers-color-scheme volgt het systeem van
 * de bezóéker, maar wat telt is hoe de host-pagina eruitziet. Een site met een
 * permanent donker ontwerp krijgt bij een bezoeker in lichte modus anders een
 * wit blok op donkere grond. Die site zet ?theme=dark.
 *
 * Alle kleuren zijn daarom tokens op `.rf-embed`; componenten verwijzen nooit
 * rechtstreeks naar een kleur binnen een media-query. Een kleur die alleen
 * binnen `@media (prefers-color-scheme: dark)` bestaat, geldt niet in toestand
 * (3) — dan krijg je de tekst van het ene thema op de grond van het andere.
 *
 * --rf-embed-accent is de kleur die de insluitende site mag overschrijven
 * (via ?accent= op de embed-URL). Standaard is dat het Rechtfabriek-groen,
 * maar wie hem op zijn eigen huisstijl zet, houdt de widget langer staan.
 */

/*
 * De widget moet de hele iframe vullen, niet alleen zijn eigen inhoud.
 *
 * Een insluiter geeft het iframe een vaste hoogte, en die is bijna altijd
 * ruimer dan de inhoud. Blijft de widget dan zo hoog als zijn tekst, dan zie
 * je daaronder de kale iframe-body — bij een donker thema een wit vlak van
 * honderden pixels. Vandaar height:100% op de documentwortel en min-height op
 * de widget zelf: zijn achtergrond loopt dan door tot de onderrand.
 */
html, body { height: 100%; margin: 0; }

/*
 * Kleurtokens op :root, niet op de componentselectors.
 *
 * Twee eisen die elkaar bijten. De calculator-component draait ook los op
 * /griffierecht-berekenen, zonder .rf-embed-wrapper — daar moeten de tokens
 * dus ook gelden. Maar zet je ze óók op .gr-calculator, dan herdefinieert dat
 * kind binnen de widget de accentkleur die de server via een style-attribuut
 * op .rf-embed heeft gezet, en blijft een ingesloten widget met ?accent=
 * gewoon groen.
 *
 * :root lost beide op: overal beschikbaar, en de inline waarde op .rf-embed
 * wint binnen die subtree. De namen zijn geprefixt, dus lekken is onschadelijk.
 */
:root {
    /* rf-green-dark uit de huisstijl, niet rf-green. Het lichtere #428f4c
       haalt met witte tekst maar 3,99 contrast; deze tint 5,76. Zo blijft de
       knop wit-op-groen zonder de toegankelijkheidsnorm te schenden. */
    --rf-embed-accent: #327339;

    /* Wordt server-side overschreven zodra een site zelf een accentkleur
       kiest: bij een lichte keuze moet de knoptekst donker worden. Zie
       core/kleur.py en _tekstkleur_bij in blueprints/embed/routes.py. */
    --rf-embed-accent-tekst: #ffffff;

    --rf-embed-ground: transparent;
    --rf-embed-surface: #ffffff;
    --rf-embed-ink: #1c1f2b;
    --rf-embed-ink-soft: #4a5152;
    --rf-embed-muted: #6e7670;
    --rf-embed-line: #dfe1e3;
    --rf-embed-line-soft: #eceeeb;
    --rf-embed-highlight: #e6f9ec;

    /* Het accent als TEKSTkleur is iets anders dan het accent als vlak.
       Een knop met een donkergroen vlak en witte letters werkt op elke grond;
       diezelfde donkergroene kleur als losse linktekst op een donkere grond
       niet. In het donkere thema wordt deze daarom opgelicht — via color-mix,
       zodat het ook klopt als de insluiter met ?accent= een eigen kleur kiest. */
    --rf-embed-accent-ink: var(--rf-embed-accent);

    /* --rf-red hoort hier NIET.
       De tool-componenten gebruiken die variabele (uit main.css), en in de
       iframe laadt main.css niet mee. Die reparatie staat daarom op
       .rf-embed-body, binnen de widget — niet op :root. Zet je hem hier, dan
       geldt hij ook op onze eigen landingpages, want die laden embed.css mee
       naast main.css: :root wint van :root op volgorde, dus de hele site
       kleurt groen (de rode balk bovenaan het eerst). Alle andere tokens hier
       zijn geprefixt en lekken onschadelijk; deze niet. */

    --rf-embed-fout-ink: #9e190e;
    --rf-embed-fout-grond: #f9efef;
    --rf-embed-fout-lijn: #e3b7b2;

    /* Het logo is zwart met rode accenten en verdwijnt op donkere grond.
       invert() maakt het zwart wit, maar zou het rood cyaan maken;
       hue-rotate(180deg) draait die kleuromslag terug. Netto: witte letters
       met het rood ongeveer intact — zonder dat er een aparte lichte
       logovariant hoeft te bestaan. */
    --rf-embed-logo-filter-dark: invert(1) hue-rotate(180deg);

    /* Dropdown-pijl; zelfde donkergrijs als Bootstrap op de site. */
    --rf-embed-select-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
}

/*
 * Afgeleide accentkleuren opnieuw declareren binnen de widget.
 *
 * Een custom property wordt opgelost op de selector waar hij is gedeclareerd,
 * niet op de plek waar hij wordt gebruikt. `--rf-embed-accent-ink:
 * var(--rf-embed-accent)` op :root krijgt daarom de :root-waarde mee en blijft
 * Rechtfabriek-groen, ook als de server met ?accent= een andere kleur als
 * style-attribuut op .rf-embed zet. Zichtbaar gevolg: een ingesloten widget met
 * een magenta knop hield groene links — half in de huisstijl van de host, half
 * in de onze.
 *
 * Hier opnieuw declareren lost hem alsnog op met de waarde die op dít element
 * geldt. De :root-declaratie blijft nodig voor de losse calculator op
 * /griffierecht-berekenen, die geen .rf-embed om zich heen heeft.
 *
 * Het donkere thema declareert accent-ink verderop nog een keer (met color-mix
 * voor leesbaarheid op donkere grond); dat blijft werken, want die selectors
 * zijn specifieker.
 */
.rf-embed { --rf-embed-accent-ink: var(--rf-embed-accent); }

/* Alleen de widget zelf: op een landingpage moet de component juist de
   typografie van de pagina volgen, niet die van de kale iframe. */
.rf-embed {
    min-height: 100%;
    background: var(--rf-embed-ground);
    color: var(--rf-embed-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;

    /*
     * Zijpadding gelijk aan de halve Bootstrap-gutter (8px), niet 4px.
     *
     * De formulierrijen gebruiken `.row`, en die heeft negatieve zijmarges van
     * -8px om de kolom-gutters te compenseren. Op een gewone pagina vangt de
     * `.container`-padding dat op; hier was die er niet, dus stak elke rij 4px
     * buiten het venster en kreeg iedere ingesloten widget onderaan een
     * horizontale scrollbalk over iets dat niet eens inhoud is.
     *
     * `overflow-x: hidden` op body lost dit NIET op: die waarde propageert naar
     * de viewport, en dan blijft de scrollbreedte gewoon staan. De oorzaak
     * wegnemen wel.
     */
    padding: 4px 8px;
}

/* Toestand 1: systeemvoorkeur volgen — maar niet als de site expliciet licht koos. */
@media (prefers-color-scheme: dark) {
    .rf-embed:not([data-embed-theme="light"]) {
        --rf-embed-surface: #191d24;
        --rf-embed-ink: #e7eae5;
        --rf-embed-ink-soft: #bcc3bc;
        --rf-embed-muted: #8e968d;
        --rf-embed-line: #2c333a;
        --rf-embed-line-soft: #232931;
        --rf-embed-highlight: #1b2a20;
        --rf-embed-accent-ink: color-mix(in srgb, var(--rf-embed-accent) 55%, #ffffff);
        --rf-embed-select-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238e968d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    --rf-embed-fout-ink: #e58275;
        --rf-embed-fout-grond: #2b1d1b;
        --rf-embed-fout-lijn: #5a2c26;
    }

    .rf-embed:not([data-embed-theme="light"]) .rf-embed-logo {
        filter: var(--rf-embed-logo-filter-dark);
    }
}

/*
 * Een expliciet gekozen thema krijgt óók een expliciete achtergrond.
 *
 * In de automatische stand is de widget transparant: hij neemt de grond van de
 * host-pagina over, en dat is precies de bedoeling. Maar wie ?theme=dark zet,
 * kiest donker terwijl de host-pagina licht kan zijn — dan levert transparant
 * lichte tekst op lichte grond op. Bij een expliciete keuze verft de widget
 * dus zijn eigen ondergrond.
 */
.rf-embed[data-embed-theme="light"] { --rf-embed-ground: #ffffff; }
.rf-embed[data-embed-theme="dark"] { --rf-embed-ground: #14171f; }

/* Eigen grond betekent zichtbare randen, dus wat meer lucht eromheen. */
.rf-embed[data-embed-theme] { padding: 14px 16px; }

/* Toestand 3: de site zet donker vast, ongeacht het systeem van de bezoeker. */
.rf-embed[data-embed-theme="dark"] {
    --rf-embed-surface: #191d24;
    --rf-embed-ink: #e7eae5;
    --rf-embed-ink-soft: #bcc3bc;
    --rf-embed-muted: #8e968d;
    --rf-embed-line: #2c333a;
    --rf-embed-line-soft: #232931;
    --rf-embed-highlight: #1b2a20;
    --rf-embed-accent-ink: color-mix(in srgb, var(--rf-embed-accent) 55%, #ffffff);
    --rf-embed-select-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238e968d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    --rf-embed-fout-ink: #e58275;
    --rf-embed-fout-grond: #2b1d1b;
    --rf-embed-fout-lijn: #5a2c26;
}

.rf-embed[data-embed-theme="dark"] .rf-embed-logo {
    filter: var(--rf-embed-logo-filter-dark);
}

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

.rf-embed-body {
    /* Op een kind-element, niet op .rf-embed zelf: dan wordt deze afgeleide
       opgelost mét de accent-ink zoals die op de widget geldt — inclusief de
       opgelichte variant die het donkere thema erop zet. Zie de toelichting bij
       .rf-embed hierboven; hetzelfde mechanisme, één niveau dieper. */
    --rf-red: var(--rf-embed-accent-ink);

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rf-embed h2 {
    font-size: 17px;
    font-weight: 650;
    line-height: 1.3;
    margin: 0;
    color: var(--rf-embed-ink);
}

.rf-embed p { margin: 0; }

.rf-embed .rf-embed-uitleg,
.gr-calculator .rf-embed-uitleg,
.pk-calculator .rf-embed-uitleg,
.vd-calculator .rf-embed-uitleg,
.vt-calculator .rf-embed-uitleg,
.oz-calculator .rf-embed-uitleg,
.vc-calculator .rf-embed-uitleg {
    font-size: 13.5px;
    color: var(--rf-embed-muted);
}

/* ---------- formulier ---------- */

.rf-embed .form-label {
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--rf-embed-ink-soft);
}

.rf-embed .form-control,
.rf-embed .form-select,
.rf-embed .input-group-text {
    background-color: var(--rf-embed-surface);
    border-color: var(--rf-embed-line);
    color: var(--rf-embed-ink);
    font-size: 15px;
}

.rf-embed .form-control:focus,
.rf-embed .form-select:focus {
    border-color: var(--rf-embed-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-embed-accent) 22%, transparent);
}

.rf-embed .input-group-text { color: var(--rf-embed-muted); }

/*
 * Keuzelijsten in de widget hun pijltje geven.
 *
 * Alleen binnen .rf-embed: op een landingpage laadt main.css mee en regelt die
 * het al (zie de toelichting daar bij "Keuzelijsten hun dropdown-pijltje
 * teruggeven"). Twee bronnen voor dezelfde pijl zou betekenen dat ze uit elkaar
 * gaan lopen.
 *
 * De widget heeft wel een eigen pijl nodig, want main.css laadt niet mee in het
 * iframe. De kleur volgt het thema: Bootstrap's donkergrijs is op een donkere
 * ondergrond niet te zien.
 */
.rf-embed .form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--rf-embed-select-pijl);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 15px;
    padding-right: 36px;
}

.rf-embed .form-text,
.rf-embed .form-check-label { color: var(--rf-embed-muted); font-size: 13px; }

/* Ook .rf-btn: de transitievergoeding-component komt van een landingpage en
   gebruikt de rf-btn-classes uit landing-components.css. Die stylesheet laadt
   hier bewust niet mee (te veel, en niet neutraal), dus geven we die knoppen
   hier hun embed-uiterlijk. */
.rf-embed .btn-rf-embed,
.rf-embed .rf-btn {
    display: inline-block;
    background-color: var(--rf-embed-accent);
    border: 1px solid var(--rf-embed-accent);
    color: var(--rf-embed-accent-tekst);
    font-size: 15px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}

.rf-embed .btn-rf-embed:hover,
.rf-embed .btn-rf-embed:focus,
.rf-embed .rf-btn:hover,
.rf-embed .rf-btn:focus {
    filter: brightness(.92);
    color: var(--rf-embed-accent-tekst);
}

.rf-embed .btn-rf-embed:focus-visible,
.rf-embed .rf-btn:focus-visible {
    outline: 2px solid var(--rf-embed-accent);
    outline-offset: 2px;
}

.rf-embed .rf-btn-pill { border-radius: 999px; }

/* Tekstknoppen die secties open- en dichtklappen ('Ik weet alleen mijn
   uurloon', 'Is er een vaste eindejaarsuitkering'). Bootstrap maakt hier
   felblauwe links van; die vallen uit de toon en zijn op donker slecht
   leesbaar. */
.rf-embed .btn-link-inline,
.rf-embed .btn.btn-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--rf-embed-accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.rf-embed .btn-link-inline:hover,
.rf-embed .btn.btn-link:hover { filter: brightness(1.1); }

.rf-embed .btn-link-inline:focus-visible,
.rf-embed .btn.btn-link:focus-visible {
    outline: 2px solid var(--rf-embed-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Aankruisvakjes krijgen op donkere grond anders een wit vlak. */
.rf-embed .form-check-input {
    background-color: var(--rf-embed-surface);
    border-color: var(--rf-embed-line);
}

.rf-embed .form-check-input:checked {
    background-color: var(--rf-embed-accent);
    border-color: var(--rf-embed-accent);
}

.rf-embed .form-check-input:focus {
    border-color: var(--rf-embed-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-embed-accent) 22%, transparent);
}

/* ---------- tabel ----------
   Ook onder .gr-calculator en .pk-calculator: die componenten kunnen met
   toon_tabel=true op een
   landingpage staan, en dan is er geen .rf-embed-wrapper. */

.rf-embed-tabelwrap { overflow-x: auto; }

.rf-embed table,
.gr-calculator table,
.pk-calculator table,
.vd-calculator table,
.vt-calculator table,
.oz-calculator table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
}

.rf-embed thead th,
.gr-calculator thead th,
.pk-calculator thead th,
.vd-calculator thead th,
.vt-calculator thead th,
.oz-calculator thead th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rf-embed-muted);
    border-bottom: 1px solid var(--rf-embed-line);
    padding: 8px 12px;
    white-space: nowrap;
}

.rf-embed tbody td,
.gr-calculator tbody td,
.pk-calculator tbody td,
.vd-calculator tbody td,
.vt-calculator tbody td,
.oz-calculator tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--rf-embed-line-soft);
    color: var(--rf-embed-ink-soft);
}

.rf-embed tbody tr:last-child td,
.gr-calculator tbody tr:last-child td,
.pk-calculator tbody tr:last-child td,
.vd-calculator tbody tr:last-child td,
.vt-calculator tbody tr:last-child td,
.oz-calculator tbody tr:last-child td { border-bottom: none; }

.rf-embed td.rf-embed-bedrag,
.gr-calculator td.rf-embed-bedrag,
.pk-calculator td.rf-embed-bedrag,
.vd-calculator td.rf-embed-bedrag,
.vt-calculator td.rf-embed-bedrag,
.oz-calculator td.rf-embed-bedrag { text-align: right; font-weight: 600; color: var(--rf-embed-ink); }

/* De rij die bij het ingevulde bedrag hoort. */
.rf-embed tbody tr.is-actief td,
.gr-calculator tbody tr.is-actief td,
.pk-calculator tbody tr.is-actief td,
.vd-calculator tbody tr.is-actief td,
.vt-calculator tbody tr.is-actief td,
.oz-calculator tbody tr.is-actief td {
    background: var(--rf-embed-highlight);
    color: var(--rf-embed-ink);
}

.rf-embed tbody tr.is-actief td:first-child,
.gr-calculator tbody tr.is-actief td:first-child,
.pk-calculator tbody tr.is-actief td:first-child,
.vd-calculator tbody tr.is-actief td:first-child,
.vt-calculator tbody tr.is-actief td:first-child,
.oz-calculator tbody tr.is-actief td:first-child {
    box-shadow: inset 3px 0 0 var(--rf-embed-accent);
}

/* ---------- uitkomst ---------- */

.rf-embed-uitkomst {
    border: 1px solid var(--rf-embed-line);
    border-left: 3px solid var(--rf-embed-accent);
    border-radius: 0 4px 4px 0;
    padding: 12px 16px;
    background: var(--rf-embed-surface);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rf-embed-uitkomst-bedrag {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--rf-embed-ink);
    font-variant-numeric: tabular-nums;
}

.rf-embed-uitkomst-toelichting { font-size: 13.5px; color: var(--rf-embed-muted); }

.rf-embed-fout {
    border: 1px solid var(--rf-embed-fout-lijn);
    background: var(--rf-embed-fout-grond);
    color: var(--rf-embed-fout-ink);
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 14px;
}

/* De knop hoort naast het datumveld te staan, niet naast de hulponderregel. */
.vt-submit-wrap {
    padding-top: 32px;
}

@media (max-width: 575.98px) {
    .vt-submit-wrap {
        padding-top: 0;
    }
}

/* ---------- kostenopstelling ----------
   De proceskosten-tool geeft geen bedrag maar een opstelling: vier posten met
   een totaal eronder. Dat is niet louter vormgeving — één totaalbedrag zonder
   de posten erboven gelooft niemand, en dan klikt de bezoeker door naar een
   pagina die het wél uitsplitst.

   Ook onder .pk-calculator, want op de landingpage ontbreekt de
   .rf-embed-wrapper. */

.rf-embed .rf-embed-opstelling,
.pk-calculator .rf-embed-opstelling,
.vd-calculator .rf-embed-opstelling,
.vc-calculator .rf-embed-opstelling {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rf-embed .rf-embed-post-kop,
.pk-calculator .rf-embed-post-kop,
.vd-calculator .rf-embed-post-kop,
.vc-calculator .rf-embed-post-kop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.rf-embed .rf-embed-post-bedrag,
.pk-calculator .rf-embed-post-bedrag,
.vd-calculator .rf-embed-post-bedrag {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.rf-embed .rf-embed-post-uitleg,
.pk-calculator .rf-embed-post-uitleg,
.vd-calculator .rf-embed-post-uitleg,
.vc-calculator .rf-embed-post-uitleg {
    display: block;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--rf-embed-muted);
}

.rf-embed .rf-embed-post-totaal,
.pk-calculator .rf-embed-post-totaal,
.vd-calculator .rf-embed-post-totaal {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--rf-embed-line);
    font-weight: 700;
}

/* Een post die is uitgerekend maar (nog) niet verschuldigd — bij een
   particulier zijn de incassokosten dat pas na een vruchteloze
   veertiendagenbrief. Gedempt in plaats van doorgestreept: het bedrag is niet
   vervallen, het is nog niet opeisbaar. */
.rf-embed .rf-embed-post-voorwaardelijk .rf-embed-post-bedrag,
.vd-calculator .rf-embed-post-voorwaardelijk .rf-embed-post-bedrag {
    color: var(--rf-embed-muted);
    font-weight: 500;
}

/* Het totaal zoals het wordt zodra die brief is verstreken. Staat onder de
   streep, maar mag het echte totaal niet overschreeuwen. */
.rf-embed .rf-embed-post-navordering,
.vd-calculator .rf-embed-post-navordering {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--rf-embed-line);
    color: var(--rf-embed-muted);
}

/* Hint onder een invoerveld — kort, en hij mag geen regel kosten die de widget
   over zijn afgesproken hoogte duwt. */
.rf-embed .rf-embed-veldhint,
.pk-calculator .rf-embed-veldhint,
.vd-calculator .rf-embed-veldhint,
.vt-calculator .rf-embed-veldhint,
.oz-calculator .rf-embed-veldhint {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--rf-embed-muted);
}

/* ---------- vragenlijst en bevindingen (VSO-check) ----------
   Twaalf vragen achter elkaar wordt een muur tekst. Een dunne scheidingslijn
   per vraag en een compacte antwoordrij houden het scanbaar zonder dat er
   kleurvlakken aan te pas komen. */

.rf-embed .rf-embed-vragen,
.vc-calculator .rf-embed-vragen {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rf-embed .rf-embed-vraag,
.vc-calculator .rf-embed-vraag {
    border: 0;
    border-top: 1px solid var(--rf-embed-line-soft);
    margin: 0;
    padding: 8px 0 0;
}

.rf-embed .rf-embed-vraag-tekst,
.vc-calculator .rf-embed-vraag-tekst {
    float: none;
    width: auto;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    padding: 0;
    color: var(--rf-embed-ink);
}

/* De drie antwoorden naast elkaar; op een smal frame vallen ze vanzelf terug
   op een kolom, want de widget kan ook 320 px breed staan. */
.rf-embed .rf-embed-keuzes-rij,
.vc-calculator .rf-embed-keuzes-rij {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
}

/* Een bevinding die de WW raakt, krijgt een randje. De tekst zelf zegt het ook
   ("Belangrijk"), dus kleur is hier versterking en geen enige drager. */
.rf-embed .rf-embed-bevinding.is-ernstig,
.vc-calculator .rf-embed-bevinding.is-ernstig {
    border-left: 3px solid var(--rf-embed-fout-ink);
    padding-left: 10px;
}

.rf-embed .rf-embed-ernst,
.vc-calculator .rf-embed-ernst {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--rf-embed-muted);
}

.rf-embed .rf-embed-bevinding.is-ernstig .rf-embed-ernst,
.vc-calculator .rf-embed-bevinding.is-ernstig .rf-embed-ernst {
    color: var(--rf-embed-fout-ink);
}

/* ---------- keuzegroep binnen een widget ----------
   Twee vragen naast elkaar, met de gekozen optie zichtbaar zonder dat kleur de
   enige drager is: de radio zelf blijft staan en houdt de semantiek intact. */

.rf-embed .rf-embed-keuzes,
.oz-calculator .rf-embed-keuzes,
.vc-calculator .rf-embed-keuzes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rf-embed .rf-embed-keuze,
.oz-calculator .rf-embed-keuze,
.vc-calculator .rf-embed-keuze {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13.5px;
    cursor: pointer;
}

.rf-embed .rf-embed-keuze input,
.oz-calculator .rf-embed-keuze input,
.vc-calculator .rf-embed-keuze input {
    accent-color: var(--rf-embed-accent);
    flex-shrink: 0;
}

/* ---------- urgentie bij een fatale termijn ----------
   Een vervaltermijn is niet te stuiten. Kleur helpt de ernst te zien, maar
   draagt hem niet alleen: de uitkomst zegt in woorden of de termijn verstreken
   is. Wie de kleur niet ziet, mist dus niets. */

.rf-embed .rf-embed-uitkomst.is-urgent,
.vt-calculator .rf-embed-uitkomst.is-urgent {
    border-left: 3px solid var(--rf-embed-fout-ink);
    padding-left: 10px;
}

.rf-embed .rf-embed-uitkomst.is-verstreken,
.vt-calculator .rf-embed-uitkomst.is-verstreken {
    border-left: 3px solid var(--rf-embed-fout-ink);
    padding-left: 10px;
}

.rf-embed .rf-embed-uitkomst.is-verstreken .rf-embed-uitkomst-bedrag,
.vt-calculator .rf-embed-uitkomst.is-verstreken .rf-embed-uitkomst-bedrag {
    color: var(--rf-embed-fout-ink);
}

/* Checkbox-regel in de widget: Bootstrap's form-check zonder de site-CSS. */
.rf-embed .form-check,
.vt-calculator .form-check,
.oz-calculator .form-check { padding-left: 1.6em; }

.rf-embed .form-check-label,
.vt-calculator .form-check-label,
.oz-calculator .form-check-label { font-size: 13.5px; }

/* ---------- uitklapbare tweede staffel ----------
   De rechtbanktarieven zitten achter een <details> omdat de widget-hoogte een
   contract is: `height="560"` staat in de HTML op sites die hem al hebben
   ingesloten. Dichtgeklapt kost dit blok ongeveer 20 px; open groeit het frame
   niet mee, dus de bezoeker scrollt binnen het iframe. Dat is precies de
   afweging: wie de rechtbanktarieven wil zien vraagt erom, de rest houdt de
   compacte widget.

   Ook onder .gr-calculator, want op de landingpage ontbreekt de .rf-embed-wrapper. */

.rf-embed .rf-embed-uitklap,
.gr-calculator .rf-embed-uitklap,
.pk-calculator .rf-embed-uitklap,
.vd-calculator .rf-embed-uitklap,
.vt-calculator .rf-embed-uitklap,
.oz-calculator .rf-embed-uitklap {
    margin-top: 4px;
    font-size: 13.5px;
}

.rf-embed .rf-embed-uitklap > summary,
.gr-calculator .rf-embed-uitklap > summary,
.pk-calculator .rf-embed-uitklap > summary,
.vd-calculator .rf-embed-uitklap > summary,
.vt-calculator .rf-embed-uitklap > summary,
.oz-calculator .rf-embed-uitklap > summary {
    cursor: pointer;
    color: var(--rf-embed-accent);
    font-weight: 600;
    /* `inside`, want de widget heeft geen inspringing: met de standaard
       `outside` valt het driehoekje buiten de rand en zie je niet dat er iets
       openklapt. Het is het enige affordance-signaal dat dit blok heeft. */
    list-style-position: inside;
}

.rf-embed .rf-embed-uitklap > summary:focus-visible,
.gr-calculator .rf-embed-uitklap > summary:focus-visible,
.pk-calculator .rf-embed-uitklap > summary:focus-visible,
.vd-calculator .rf-embed-uitklap > summary:focus-visible,
.vt-calculator .rf-embed-uitklap > summary:focus-visible,
.oz-calculator .rf-embed-uitklap > summary:focus-visible {
    outline: 2px solid var(--rf-embed-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.rf-embed .rf-embed-uitklap[open] > summary,
.gr-calculator .rf-embed-uitklap[open] > summary,
.pk-calculator .rf-embed-uitklap[open] > summary,
.vd-calculator .rf-embed-uitklap[open] > summary,
.vt-calculator .rf-embed-uitklap[open] > summary,
.oz-calculator .rf-embed-uitklap[open] > summary { margin-bottom: 8px; }

/* Knop in de uitkomst waarmee de bezoeker corrigeert dat zijn zaak toch bij de
   kantonrechter hoort (arbeid, huur, consumentenkoop). Oogt als een link, is
   een button — het voert een handeling uit en navigeert niet. */
.rf-embed .rf-embed-schakel,
.gr-calculator .rf-embed-schakel {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--rf-embed-accent);
    text-decoration: underline;
    cursor: pointer;
}

.rf-embed .rf-embed-schakel:focus-visible,
.gr-calculator .rf-embed-schakel:focus-visible {
    outline: 2px solid var(--rf-embed-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- bronregel ---------- */

.rf-embed-bron {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid var(--rf-embed-line-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--rf-embed-muted);
}

.rf-embed-bron-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    opacity: .85;
}

.rf-embed-bron-link:hover,
.rf-embed-bron-link:focus-visible { opacity: 1; }

.rf-embed-bron-link:focus-visible {
    outline: 2px solid var(--rf-embed-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* 34px: bij de brede logoverhouding (2,8:1) is dit de kleinste maat waarop
   "rechtfabriek" nog vlot leesbaar is. Kleiner en de merknaam wordt een vlek. */
.rf-embed-logo { display: block; height: 34px; width: auto; }

.rf-embed-bron-tekst { line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
    .rf-embed * { transition: none !important; animation: none !important; }
}