/*
 * Koppeling van de formulieren van de klant aan de huisstijl van de site.
 *
 * De formulieren brengen hun eigen opmaak mee (forms/<key>/style.css, door
 * tools/extract.js afgeperkt tot .dci-form--<key>). Dat stylesheet werkt met
 * de kleurvariabelen van de klant (--dci, --dci-dark, --dci-tint ...). Hier
 * worden die gevuld vanuit de Webstart-theme-variabelen, zodat de kleuren,
 * fonts en knoppen meebewegen met de editor-instellingen van de site.
 *
 * Dit bestand wordt na forms/<key>/style.css geladen; de !important's zijn
 * voor de fonts, die de klant per element hardcodeerde (Inter/Syne).
 */
.dci-form {
    --dci:          var(--primaryColor, #016EB0);
    --dci-dark:     var(--primaryColor, #016EB0);
    --dci-deeper:   var(--secondaryColor, #00152D);
    --dci-tint:     #e8f1f8;
    --dci-tint-mid: #cfe2f1;
    --success:      var(--primaryColor, #016EB0);

    position: relative;
    margin: 0 auto;
    font-family: var(--primaryTextFont, inherit);
    color: var(--ink, #0f1923);
    text-align: left;
}

@supports (color: color-mix(in srgb, red 50%, white)) {
    .dci-form {
        --dci-dark:     color-mix(in srgb, var(--primaryColor, #016EB0) 85%, black);
        --dci-tint:     color-mix(in srgb, var(--primaryColor, #016EB0) 8%, white);
        --dci-tint-mid: color-mix(in srgb, var(--primaryColor, #016EB0) 22%, white);
    }
}

/* Pas tonen als de JavaScript de teksten in de juiste taal heeft gezet. */
.dci-form:not(.is-ready) {
    visibility: hidden;
}

/*
 * Verplicht-markering duidelijker: de rode asterisk van de klant staat op
 * dezelfde grootte als het label zelf en valt makkelijk weg tussen de
 * hoofdletters en letter-spacing van de labels. Alleen groter en vetter
 * gemaakt, verder niets aan de lay-out veranderd.
 */
.dci-form .req {
    font-weight: 700;
    font-size: 1.15em;
}

/*
 * Breedte: de klant bouwde dit als een eigen, volledige pagina en hield het
 * daarom op 760px. Op de site zelf staat het code blok in een rij van het
 * type "Tekst met afbeelding(en)", waarvan de tekstkolom (.info_row__content)
 * vast op 750px zit — breder dan dat komt hier dus toch nooit, welke waarde
 * hier ook staat. Daarom hier ook op 750px gezet (Kimberly, bevestigd op
 * /aanvraagformulier-rcd). Verhuist het blok ooit naar een rijtype zonder die
 * 750px-grens, dan kan dit weer omhoog.
 */
.dci-form .main,
.dci-form .progress-inner {
    max-width: 750px;
}

/* De voortgangsbalk van de klant was sticky bovenaan zijn eigen pagina; op de
 * site zou hij onder de vaste navigatie schuiven. */
.dci-form .progress-nav {
    position: static;
    border-radius: var(--borderRadius, 6px) var(--borderRadius, 6px) 0 0;
}

.dci-form .main {
    padding-left: 0;
    padding-right: 0;
}

/*
 * Stappenbalk: de klant gebruikte een donkere balk met genummerde bolletjes en
 * een kleurrand onderaan voor "actief"/"afgerond" — geen onderlinge lijn, dus
 * moeilijk te zien hoever je bent. Hier vervangen door bolletjes die met een
 * lijn verbonden zijn: de lijn kleurt in zodra een stap is afgerond, en een
 * afgeronde stap krijgt een vinkje in plaats van een cijfer.
 */
.dci-form .progress-nav {
    background: var(--white, #fff);
    border-bottom: none; /* client had een (op donker afgestemde) randkleur staan */
}
.dci-form .progress-inner {
    /* Geen horizontale padding: de stappen vullen zo dezelfde breedte als de
       kaart eronder (.main heeft ook padding-left/right: 0, zie hierboven). */
    padding: 18px 0;
}
.dci-form .prog-step {
    position: relative;
    border-bottom: none;
    border-radius: var(--radius, 6px);
}
.dci-form .prog-step:hover {
    background: var(--dci-tint, #e8f1f8);
}
/* Verbindingslijn tussen deze stap en de volgende, achter de bolletjes. */
.dci-form .prog-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 27px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--border, #dce3ea);
    z-index: 0;
}
.dci-form .prog-step.done:not(:last-child)::after {
    background: var(--dci, var(--primaryColor, #016EB0));
}
.dci-form .prog-dot {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    background: var(--white, #fff);
    border: 2px solid var(--border-mid, #b8c4ce);
    color: var(--muted, #546070);
    font-size: 14px;
    font-weight: 700;
}
.dci-form .prog-step.active .prog-dot {
    background: var(--dci, var(--primaryColor, #016EB0));
    border-color: var(--dci, var(--primaryColor, #016EB0));
    color: #fff;
}
.dci-form .prog-step.done .prog-dot {
    background: var(--dci, var(--primaryColor, #016EB0));
    border-color: var(--dci, var(--primaryColor, #016EB0));
    color: transparent;
}
/* Vinkje op een afgeronde stap, i.p.v. het (verborgen) cijfer. */
.dci-form .prog-step.done .prog-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat center / 55% 55%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat center / 55% 55%;
}
.dci-form .prog-label {
    color: var(--muted, #546070);
    font-weight: 500;
}
.dci-form .prog-step.active .prog-label {
    color: var(--dci, var(--primaryColor, #016EB0));
    font-weight: 700;
}
.dci-form .prog-step.done .prog-label {
    color: var(--ink, #0f1923);
}

/* Fonts van de site in plaats van Inter/Syne. */
.dci-form,
.dci-form input,
.dci-form select,
.dci-form textarea,
.dci-form button {
    font-family: var(--primaryTextFont, inherit) !important;
}

.dci-form .card-title,
.dci-form .confirm-title,
.dci-form .modal-title,
.dci-form .cat-letter,
.dci-form .mod-letter,
.dci-form .sum-block-title,
.dci-form .norm-code {
    font-family: var(--titleFont, inherit) !important;
}

/*
 * Knoppen: dezelfde opmaak als de Webstart-knoppen van de site (.button in
 * global/_4-buttons.scss), via de knopvariabelen uit de theme-editor. Volgende
 * en verzenden zijn knop A; Terug volgt de ghost-variant van de site
 * (transparant, rand en tekst in de primaire kleur). De modal-knoppen van de
 * klant volgen dezelfde twee stijlen.
 */
.dci-form .btn,
.dci-form .modal-btn-ok,
.dci-form .modal-btn-corr {
    appearance: none;
    cursor: pointer;
    user-select: none;
    text-decoration: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: var(--buttonHeight, 50px);
    padding: 5px 30px;
    line-height: 1.2;

    border-style: solid;
    border-width: var(--buttonBorderWidth, 1px);
    border-radius: var(--buttonBorderRadius, var(--borderRadius, 6px));

    font-family: var(--buttonFont, var(--titleFont, inherit)) !important;
    font-weight: var(--buttonFontWeight, 500);
    font-size: var(--buttonFontSize, 16px);
    letter-spacing: var(--buttonFontSpacing, 0);
    text-transform: var(--buttonTextTransform, none);

    transition: .2s;
    translate: 0 0;
}

.dci-form .btn-primary,
.dci-form .btn-submit,
.dci-form .modal-btn-ok {
    background: var(--buttonBackground, var(--primaryColor, #016EB0));
    color: var(--buttonColor, #fff);
    border-color: var(--buttonBorder, transparent);
}

.dci-form .btn-primary:hover,
.dci-form .btn-submit:hover,
.dci-form .modal-btn-ok:hover {
    background: var(--buttonBackground, var(--primaryColor, #016EB0));
    color: var(--buttonColor, #fff);
}

.dci-form .btn-ghost,
.dci-form .modal-btn-corr {
    background: transparent;
    color: var(--primaryColor, #016EB0);
    border-color: var(--primaryColor, #016EB0);
}

.dci-form .btn-ghost:hover,
.dci-form .modal-btn-corr:hover {
    background: transparent;
    color: var(--primaryColor, #016EB0);
}

/*
 * De site-theme heeft een eigen, algemene ".btn" (knoppen-component) die
 * toevallig dezelfde klasse gebruikt als onze knoppen en er bij :hover een
 * schaduw overheen legt — hier voor al onze knoppen uitgezet.
 */
.dci-form .btn:hover,
.dci-form .btn:focus,
.dci-form .modal-btn-ok:hover,
.dci-form .modal-btn-corr:hover {
    translate: 0 -2px;
    box-shadow: none;
}

.dci-form .btn:active,
.dci-form .modal-btn-ok:active,
.dci-form .modal-btn-corr:active {
    translate: 0 1px;
}

.dci-form .btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    translate: 0 0;
}

.dci-form .btn svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/*
 * Terug-knop als tekstlink i.p.v. knopvorm: geen rand/achtergrond meer, alleen
 * icoon + tekst in de primaire kleur. Alleen de nav-bar-knop (elke stap), niet
 * de andere .btn-ghost-knoppen (afdrukken, modal-correctie).
 */
.dci-form .nav-bar .btn-ghost {
    min-height: auto;
    padding: 5px 0;
    border: none;
}
.dci-form .nav-bar .btn-ghost:hover,
.dci-form .nav-bar .btn-ghost:focus {
    background: transparent;
    text-decoration: underline;
    translate: 0 0;
}

/* Honeypot: onzichtbaar voor bezoekers, wel in de DOM voor bots. */
.dci-form .dci-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* Foutmelding bij het verzenden (gevuld door script.js). */
.dci-form #dci-submit-error {
    margin: 0 22px 14px;
    padding: 12px 16px;
    border-left: 3px solid #c0392b;
    border-radius: 6px;
    background: #fcecea;
    color: #7d2419;
    font-size: 14px;
    line-height: 1.5;
}

/* Bevestiging na verzenden in het MED-formulier (stap 7). */
.dci-form #dci-confirm {
    margin-bottom: 18px;
    padding: 16px 18px;
    border-left: 3px solid var(--dci);
    border-radius: 6px;
    background: var(--dci-tint);
    font-size: 14px;
    line-height: 1.6;
}

.dci-form #dci-confirm strong[data-dci="title"] {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    color: var(--dci-deeper);
}

.dci-form .btn.is-busy {
    opacity: .6;
    pointer-events: none;
}

/*
 * Invoervelden en labels: net als bij de knoppen (hierboven) op de
 * inputvariabelen van de theme-editor gezet (global/_5-inputs.scss), zodat
 * het formulier het uiterlijk van de eigen webformulieren van de site volgt
 * (zie /contact-opnemen) in plaats van de losse stijl van de klant.
 * Hogere specificiteit dan de regels van de klant (die gebruiken maar één
 * klasse + attribuut), dus geen !important nodig.
 */
.dci-form .lbl {
    font-family: var(--inputLabelFont, inherit);
    font-weight: var(--inputLabelWeight, 600);
    color: var(--inputLabelColor, var(--ink, #0f1923));
}
.dci-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.dci-form select,
.dci-form textarea {
    color: var(--inputColor, var(--ink, #0f1923));
    background: var(--inputBackground, #fff);
    border-color: var(--inputBorderColor, #dce3ea);
    border-radius: var(--inputBorderRadius, var(--borderRadius, 6px));
}

/*
 * De site-theme heeft een algemene "select { height: 3rem; }"-regel (voor
 * álle <select>-elementen op de site) die hoger is dan onze gewone inputs
 * (38px): hier gelijkgetrokken. line-height van <select> is daarnaast van
 * zichzelf (browser-standaard, geen CSS-regel voor) hoger dan bij <input>,
 * vandaar ook die expliciet gelijkgezet.
 */
.dci-form select {
    height: auto;
    line-height: normal;
}

/*
 * Verplicht-sterretje uitgebreid met tekst ("(verplicht)"/"(required)", zie
 * tools/extract.js): zachter dan de rode ster zelf, puur als leestekst erbij.
 */
.dci-form .req-hint {
    margin-left: 4px;
    color: var(--muted, #546070);
    font-weight: 400;
    font-size: .85em;
}

/*
 * Iconen bij tegels (Particulier/Bedrijf e.d.) en in de kaarttitel ("Over u")
 * van 30/36px naar 40px, met het icoontje zelf iets mee vergroot.
 */
.dci-form .tile-icon,
.dci-form .card-icon {
    width: 40px;
    height: 40px;
}
.dci-form .tile-icon svg,
.dci-form .card-icon svg {
    width: 20px;
    height: 20px;
}

/*
 * Popup-vensters (bijv. "Vul eerst alle verplichte velden in"): het emoji-
 * waarschuwingsicoon oogt niet als onderdeel van de site, weggehaald. Titel
 * links uitgelijnd i.p.v. gecentreerd, past beter bij de rest van het
 * formulier.
 */
.dci-form .modal-icon {
    display: none;
}
.dci-form .modal-title {
    text-align: left;
}

/*
 * Dividers: 30px netto erboven en eronder (gemeten, niet aangenomen: .field/
 * .row/.divider zitten in gewone block-flow en vouwen hun marges samen tot
 * het maximum, ze tellen niet op. Invoervelden dragen zelf niets bij, die
 * hebben margin 0). Met .field/.row hieronder ook op 30px gezet, klopt de
 * som voor beide kanten van de divider vanzelf.
 *
 * Ontbreekt alle zichtbare inhoud tussen twee dividers (omdat de velden
 * ertussen door een eerdere keuze verborgen zijn), dan verdwijnt de tweede
 * vanzelf — zie dciCleanupDividers() in tools/runtime/shared.js.
 */
.dci-form .divider {
    margin: 30px 0;
}

/*
 * Ruimte tussen velden onderling: 30px netto (zelfde meting als bij de
 * divider hierboven). Was voor de klant 16px.
 */
.dci-form .field,
.dci-form .row {
    margin-bottom: 30px;
}

/*
 * Bug gevonden 23-09-2026: velden in een .row (c2/c3, meerdere kolommen) zijn
 * grid-items, geen gewone block-flow elementen — hun marges vouwen dus niet
 * samen en tellen wel mee bij het bepalen van de hoogte van de grid-rij zelf.
 * De klant zette op het laatste veld in de rij al margin-bottom:0 (dubbele
 * marge met .row zelf voorkomen), maar de overige velden in diezelfde rij
 * hielden hun 30px. Doordat grid-items standaard uitrekken (align-items:
 * normal = stretch) werd de rij zo hoog als "inhoud + 30px" van het eerste
 * veld, en rekte het veld zonder marge (het laatste) zichtbaar 30px verder
 * uit dan zijn eigen inhoud nodig heeft. Alle velden in een rij missen dus nu
 * hun eigen marge; de rij zelf (hierboven) blijft de 30px verzorgen.
 */
.dci-form .row .field {
    margin-bottom: 0;
}

/*
 * De site-theme heeft een eigen, algemene ".row" met een clearfix-pseudo-
 * element (voor een float-layout) die niet met onze klasse te maken heeft,
 * maar wel toevallig dezelfde naam gebruikt en dus ook op onze .row (altijd
 * display:grid) terechtkomt. Zonder deze override wordt dat pseudo-element
 * een onzichtbaar derde grid-item, dat een extra lege grid-rij aanmaakt en de
 * rij nog eens hoger maakt dan zijn inhoud nodig heeft.
 */
.dci-form .row::after {
    content: none;
}

/* Vinkje op de "Aanvraag indienen"-knop weggehaald, alleen de tekst blijft. */
.dci-form #submit-btn svg {
    display: none;
}

/*
 * MED-formulier, laatste stap: "Download als tekstbestand" staat in de bron
 * van de klant genest in hetzelfde flex-blokje als "Aanvraag indienen"
 * (naast elkaar, rechts van "Terug"). Op verzoek nu op een eigen regel van
 * 100% breedte, boven "Terug"/"Aanvraag indienen". De omliggende div krijgt
 * display:contents (verdwijnt zelf uit de layout, kinderen worden directe
 * flex-items van .nav-bar) zodat de knoppen met flex-wrap + order herschikt
 * kunnen worden zonder de HTML aan te passen.
 */
.dci-form .nav-bar {
    flex-wrap: wrap;
    row-gap: 12px;
}
.dci-form .nav-bar > div {
    display: contents !important;
}
.dci-form .nav-bar [onclick*="downloadFormAsText"] {
    order: -1;
    flex-basis: 100%;
    justify-content: center;
    margin-bottom: 12px;
}

.dci-form-unavailable {
    padding: 16px 20px;
    border-left: 3px solid var(--primaryColor, #016EB0);
    background: #f4f6f9;
}