/* Aanleverpagina (deel 2). Bouwt voort op formulier.css: dezelfde kleuren, letters, velden en knoppen. */

.pagina-aanleveren { grid-template-columns: minmax(0, 760px); justify-content: center; }
.pagina-aanleveren .bedankt { justify-self: start; }

/* Voortgang en opslaan: blijft bovenaan staan tijdens het scrollen */
.voortgang { position: sticky; top: 0; z-index: 5; margin: 0 calc(var(--rand) * -1) 28px; padding: 12px var(--rand); background: rgb(255 255 255 / .94); border-bottom: 1px solid var(--lijn); backdrop-filter: blur(6px); }
.voortgang ol { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.voortgang a { color: var(--nacht); font-weight: 500; text-decoration: none; }
.voortgang a:hover { text-decoration: underline; }
.voortgang-stand { color: var(--zacht); font-size: 13px; }
.voortgang li[data-stand="klaar"] .voortgang-stand { color: var(--roze-donker); font-weight: 600; }
.voortgang li[data-stand="klaar"] .voortgang-stand::before { content: "✓ "; }
.opslaan { margin-top: 4px; min-height: 1.4em; font-size: 13px; color: var(--zacht); }
/* Top 10 (20 oktober 2026): op de telefoon één regel ("Stap 3 van 7 · nog 2 te doen") met een knop die de lijst openklapt. Op de computer is er geen knop. */
.voortgang-kort { display: none; }
/* formulier.css zet 24px. Hier komt de vaste voortgangsbalk bovenaan erbij, zodat een stap waar je naartoe springt niet onder de balk valt.
   De balk is hoger bij een smal scherm of grote letters. aanleveren.js zet zijn hoogte in --balk (met een ResizeObserver); 108px is de hoogte
   op een telefoon zolang dat script nog niet gelopen heeft. De browsertest controleert dit op een computer, een telefoon en met grote letters. */
html { scroll-padding-top: calc(var(--balk, 108px) + 16px); }
}
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
  .voortgang-kort svg { transition: none; }
}
@media (max-width: 640px) {
  .voortgang { padding-top: 8px; padding-bottom: 8px; }
  .voortgang ol { gap: 2px 14px; font-size: 14px; }
  .voortgang-stand { font-size: 12px; }
  .opslaan { margin-top: 2px; }
}

/* Het blok "Alles is aangeleverd" en het blok "Deze link werkt niet": een zacht vlak met een roze streep links */
.op-slot, .toegang { margin-bottom: 28px; padding: 24px 28px; border-left: 4px solid var(--roze); border-radius: 6px 20px 20px 6px; background: var(--wit-zacht); }
.op-slot h2, .toegang h2 { margin-bottom: 6px; font-size: 26px; line-height: 1.2; }
.op-slot p + p { margin-top: 8px; }
.toegang:focus { outline: none; }

/* Het blok bovenaan na het akkoord op het eerste ontwerp (deel B): één regel met de datum van het akkoord en de stand van de betaling */
.ontwerp-status { margin-bottom: 28px; padding: 14px 24px; border-left: 4px solid var(--roze); border-radius: 6px 20px 20px 6px; background: var(--wit-zacht); }
.ontwerp-status p { font-weight: 500; overflow-wrap: break-word; }
@media (max-width: 640px) {
  .ontwerp-status { padding: 12px 18px; }
}
/* Na het akkoord op het eerste ontwerp: het ontwerp als vertrekpunt en als bron van het logo en de foto's (bij "Heb je al een website?" en Stijl) */
.uit-ontwerp { margin: 4px 0 20px; padding: 14px 20px; border-left: 4px solid var(--roze); border-radius: 6px 20px 20px 6px; background: var(--wit-zacht); }
.uit-ontwerp p { margin: 0; overflow-wrap: break-word; }
.uit-ontwerp .knop-rand { margin-top: 12px; }
@media (max-width: 640px) {
  .uit-ontwerp { padding: 12px 16px; }
}

/* balance: op de telefoon geen los woord als "(optioneel)" op de laatste regel (standaardcontrole, taak 15 van de chat). */
.subkop { margin: 22px 0 10px; font-family: var(--serif); font-size: 22px; font-weight: 400; line-height: 1.2; text-wrap: balance; }
/* Een uitleg direct onder een subkop (bij Instagram, Facebook of een andere pagina): dicht bij de kop, met ruimte voor het eerste veld */
.subkop + .hint { max-width: 40em; margin: -4px 0 12px; }
.subkop-klein { margin-top: 26px; font-size: 18px; }
.subkop-klein + .uitleg { max-width: 40em; margin: 0 0 10px; }
.veld-kop { margin: 6px 0 8px; font-size: 15px; font-weight: 500; }
.veld-ruim { margin-top: 18px; }
.vast { margin: 18px 0; font-size: 15px; color: var(--zacht); }

/* Voorbeeldsites als kaarten met plaatje */
.voorbeeldsites { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 4px 0 18px; }
.voorbeeldsites-alle { margin: -6px 0 18px; }
.site { position: relative; display: flex; flex-direction: column; border: 1.5px solid var(--lijn); border-radius: 14px; background: var(--wit); overflow: hidden; transition: border-color .2s; }
.site:hover { border-color: var(--lijn-sterk); }
/* Alleen de keuze voor de basis kleurt de kaart; het vinkje "Ook mooi" (de briefing van 29 oktober 2026) heeft een eigen, rustiger rand. */
.site:has(.site-keus input:checked) { border-color: var(--roze); box-shadow: 0 0 0 3px rgb(154 92 96 / .18); }
.site:has(.site-ook input:checked) { border-color: var(--lijn-sterk); }
.site-keus { display: flex; flex: 1; flex-direction: column; cursor: pointer; }
.site-keus input { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; margin: 0; accent-color: var(--roze); }
.site-keus input:focus-visible { outline: 2px solid var(--roze); outline-offset: 2px; }
.site-beeld { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; background: var(--wit-zacht); }
.site-tekst { display: flex; flex-direction: column; padding: 10px 12px 2px; }
.site-tekst strong { font-size: 15px; font-weight: 600; line-height: 1.3; }
.site-tekst small { font-size: 13px; color: var(--zacht); }
.site-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 12px 12px; }
.site-bekijk { flex: none; }
.site-ook { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; font-size: 13px; cursor: pointer; }
.site-ook input { width: 18px; height: 18px; margin: 0; }
.site-ook:has(input:disabled) { opacity: .45; cursor: not-allowed; }
/* De sfeer (hooguit drie): wat niet meer aan kan, is zichtbaar uit. */
.veld-kop + .hint { margin: -4px 0 10px; }
.knopje:has(input:disabled) { cursor: not-allowed; }
.knopje input:disabled + span { opacity: .45; }

.voorbeeld-rij { padding: 14px 16px 2px; border-radius: 14px; background: var(--wit-zacht); margin-bottom: 10px; }

/* Uploaden */
.uploader { margin-bottom: 10px; }
.knop-bestand { position: relative; overflow: hidden; }
.knop-bestand input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.knop-bestand:focus-within { outline: 2px solid var(--roze); outline-offset: 3px; }
.bestanden { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.bestanden:empty { display: none; }
.bestanden-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bestand { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 10px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--wit); }
.bestand-beeld, .bestand-icoon { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--wit-zacht); }
.bestand-icoon { display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--zacht); }
.bestand-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bestand-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.bestand-grootte { font-size: 13px; color: var(--zacht); }
.bestand-fout { font-size: 13px; font-weight: 500; color: var(--fout); }
.bestand-balk { width: 100%; height: 6px; accent-color: var(--roze); }
.bestand-notitie { width: 100%; padding: 6px 10px; border: 1px solid var(--lijn-sterk); border-radius: 8px; background: var(--wit); font-size: 14px; }
.bestand-acties { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.extra-klein { margin-bottom: 8px; padding: 10px 14px; }
.hint-adres { max-width: 40em; margin: -6px 0 12px; }

.pagina-blok { margin-top: 18px; padding: 18px 20px 6px; border: 1px solid var(--lijn); border-radius: 16px; background: var(--wit); }
.pagina-blok .subkop { margin-top: 0; }
#pagina-erbij { margin-top: 18px; }
.vragen { margin-bottom: 8px; padding: 18px 20px 6px; border-radius: 16px; background: var(--wit-zacht); }
.vragen legend { float: left; width: 100%; margin: 0 0 10px; }
.vragen legend + * { clear: both; }
.stap .vragen > legend.subkop { font-size: 22px; margin: 22px 0 10px; }

/* Stap 6, Koppelingen (docs/ontwerp-koppelingen.md, hoofdstuk 3), zoals in het goedgekeurde voorbeeld van 7 oktober 2026 */
.standaard { margin: 0 0 22px; padding: 14px 18px; border-radius: 14px; background: var(--wit-zacht); font-size: 15px; }
.standaard strong { font-weight: 600; }
.aanvragen { margin-bottom: 8px; padding: 18px 20px 6px; border: 1px solid var(--lijn); border-radius: 16px; background: var(--wit); }
.aanvragen .subkop { margin-top: 0; }
.groep-kop { margin: 26px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); }
/* Het vak onder een aangevinkte koppeling: ingesprongen tot onder de naam (14px rand van het vinkje plus 24px vinkje) */
.koppeling-velden { margin: -2px 0 14px 38px; padding: 16px 18px 6px; border-left: 3px solid var(--blush); border-radius: 4px 14px 14px 4px; background: var(--wit-zacht); }
.koppeling-velden .veld:last-child { margin-bottom: 10px; }
.koppeling-velden .knoppenkeuze { margin-bottom: 12px; }
.koppeling-velden p.hint { margin-bottom: 12px; }
.hint-social { margin-top: 12px; }
.meer { display: inline-block; margin: 0 0 12px; font-size: 14px; }
.gedeeld { font-size: 14px; color: var(--zacht); margin-bottom: 12px; }
.toestemming-blok { margin-top: 26px; padding: 18px 20px 6px; border: 1px solid var(--lijn); border-radius: 16px; }
.toestemming-blok .subkop { margin-top: 0; }
/* Een uitleg onderaan een omlijnd blok (bij "In mijn WhatsApp" en bij de toestemming) staat niet tegen de rand aan */
.aanvragen .hint:last-child, .toestemming-blok .hint:last-child { margin-bottom: 14px; }
.cookie-noot { margin: 10px 0 14px; padding: 12px 16px; border-left: 3px solid var(--roze); background: var(--wit-zacht); border-radius: 4px 12px 12px 4px; font-size: 15px; }
.slot-noot { margin-top: 22px; font-size: 15px; color: var(--zacht); }
/* CRO punt 4 (19 oktober 2026): de codes van een andere dienst in een dichtgeklapt blok "Technische gegevens (mag ook later)".
   Rustig: een dunne rand, een pijltje dat omdraait (zonder animatie) en een licht vlak bij aanwijzen. */
.techniek { margin: 0 0 12px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--wit); }
.techniek > summary { position: relative; padding: 12px 44px 12px 16px; border-radius: 12px; font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; }
.techniek > summary::-webkit-details-marker { display: none; }
.techniek > summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--roze); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.techniek[open] > summary::after { margin-top: -2px; transform: rotate(-135deg); }
.techniek > summary:hover { background: var(--wit-zacht); }
.techniek[open] > summary { border-radius: 12px 12px 0 0; }
.techniek-inhoud { padding: 4px 16px 4px; }
.techniek-inhoud > .hint:first-child { margin-bottom: 12px; }
/* "Stap 3 van 7" onder de kop van een stap, op één lijn met de naam (44px rondje plus 16px tussenruimte) */
.stapteller { margin: -6px 0 16px 60px; font-size: 14px; color: var(--zacht); }
/* Zolang de teller verborgen is (vóór het tellen), houdt het eerste element erna de zwevende kop nog steeds boven zich (zoals .stap legend + *) */
.stap legend + .stapteller + * { clear: both; }
#aanvragen-email > .hint { margin-bottom: 12px; }
@media (max-width: 640px) {
  .koppeling-velden { margin-left: 0; }
}

.klaar-blok { padding-top: 32px; border-top: 1px solid var(--lijn); }
.klaar-blok .knop { margin-bottom: 10px; }
/* De regel met de privacyverklaring staat los van de uitleg over "Klaar" erboven */
.klaar-blok .hint + .hint { margin-top: 8px; }

@media (max-width: 560px) {
  /* Top 10 (20 oktober 2026): het voortgangsblok is hier één regel met een knop; de lijst klapt open (.open). */
  .voortgang { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; }
  .voortgang-kort { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--nacht); cursor: pointer; text-align: left; }
  .voortgang-kort svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
  .voortgang-kort[aria-expanded="true"] svg { transform: rotate(180deg); }
  .voortgang-kort:focus-visible { outline: 2px solid var(--nacht); outline-offset: 2px; border-radius: 4px; }
  /* Open ligt de lijst over de pagina heen (zoals een uitklapmenu): de inhoud eronder schuift dan niet weg. */
  .voortgang ol { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 4px var(--rand) 14px; background: rgb(255 255 255 / .98); border-bottom: 1px solid var(--lijn); box-shadow: 0 18px 30px -24px rgb(22 18 15 / .45); }
  .voortgang.open ol { display: flex; }
  .voortgang .opslaan { margin: 0; min-height: 0; text-align: right;   .voorbeeldsites { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .site-tekst strong { font-size: 14px; }
  /* Een lange naam of branche ("Schoonmaakbedrijf") past niet in een kaart van 140 pixels: afbreken in plaats van afknippen */
  .site-tekst { overflow-wrap: break-word; hyphens: auto; }
  .bestanden-fotos { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .site { transition: none; }
}

/* Op de telefoon staat "Stap X van N" al in de compacte balk bovenaan: niet nog eens onder de kop (keuring 20 oktober 2026). */
@media (max-width: 560px) { .stapteller { display: none; } }