/* ============================================================
   JR TECHNIEK — 3. COMPONENTEN
   Losse elementen. Elk component leest uit de componentlaag
   van de tokens, zodat je het per context kunt bijstellen
   zonder de basis te raken.
   ============================================================ */

/* ---------- Knop ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: var(--ruimte-xsmall);
        min-height: var(--knop-hoogte); padding: 0 var(--ruimte-custom1);
        border-radius: var(--radius-vol); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
        font-family: var(--familie-ui); font-weight: var(--gewicht-bold); font-size: var(--tekst-regular);
        letter-spacing: 0.03em; text-transform: uppercase;
        background: var(--knop-vlak); color: var(--knop-tekst);
          /* De haarlijn binnenin geeft de knop een rand licht, zoals
             gepolijst metaal. Zonder die lijn oogt het vlak plat. */
        box-shadow: inset 0 1px 0 var(--knop-glans), var(--knop-schaduw);
        transition: background var(--duur-normaal), color var(--duur-normaal),
                    border-color var(--duur-normaal), transform var(--duur-normaal),
                    box-shadow var(--duur-normaal); }
.knop:hover { transform: translateY(-1px); background: var(--knop-vlak-hover); color: var(--knop-tekst-hover);
              box-shadow: inset 0 1px 0 var(--knop-glans), 0 2px 4px rgba(12,14,17,0.22), 0 16px 34px -14px rgba(12,14,17,0.55); }
.knop:active { transform: none; box-shadow: inset 0 1px 0 var(--knop-glans), 0 1px 2px rgba(12,14,17,0.3); }
.knop svg { width: 16px; height: 16px; flex: none; }


.knop.is-secundair { --knop-glans: transparent; --knop-schaduw: none;
                     --knop-vlak: transparent; --knop-tekst: var(--tekst-primair);
                     --knop-vlak-hover: var(--tekst-primair); --knop-tekst-hover: var(--vlak);
                     border-color: var(--knop-lijn); }
.knop.is-secundair:hover { border-color: var(--tekst-primair); }
  /* Zelfde omkering als op een licht vlak: daar loopt de knop bij hover
     vol met de tekstkleur. Op donker is dat wit met blauwe tekst, gelijk
     aan de primaire knop ernaast. Een waas van 12% wit las niet als hover. */
.op-donker .knop.is-secundair { --knop-vlak-hover: var(--neutraal-950); --knop-tekst-hover: var(--neutraal-0); }
.op-donker .knop.is-secundair:hover { border-color: var(--neutraal-0); }

.knop.is-contrast { --knop-vlak: var(--neutraal-950); --knop-tekst: var(--neutraal-0);
                    --knop-vlak-hover: var(--neutraal-700); --knop-tekst-hover: var(--neutraal-0); }

.knop.is-tekst { --knop-glans: transparent; --knop-schaduw: none;
                 --knop-vlak: transparent; --knop-tekst: var(--accent-tekst);
                 --knop-vlak-hover: transparent; --knop-tekst-hover: var(--tekst-primair);
                 padding: 0; min-height: 0; text-decoration: underline; text-underline-offset: 4px; }
.knop.is-tekst:hover { transform: none; }

  /* WhatsApp is een tweede route, geen hoofdactie. Daarom de secundaire
     knop met alleen een gekleurd icoon als herkenningspunt. */
.knop.is-whatsapp svg { color: var(--whatsapp-icoon); }

.knop.is-klein { min-height: var(--knop-hoogte-klein); padding: 0 var(--ruimte-custom1); font-size: var(--tekst-small); }
.knop.is-vol { width: 100%; }
.knop[disabled], .knop.is-uit { opacity: 0.45; pointer-events: none; }

/* ---------- Formulier ---------- */
.veldgroep { display: flex; flex-direction: column; gap: var(--ruimte-xxsmall); }
.veldlabel { font-family: var(--familie-ui); font-weight: var(--gewicht-bold); font-size: var(--tekst-tiny);
             letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-secundair); }
.veldlabel .verplicht { color: var(--rood-700); }
.veld { width: 100%; min-height: var(--veld-hoogte); padding: 0 var(--ruimte-small);
        border: 1.5px solid var(--veld-lijn); border-radius: var(--radius-s);
        background: var(--veld-vlak); color: var(--tekst-primair);
        font: var(--gewicht-normaal) var(--tekst-regular)/1.5 var(--familie-body);
        transition: border-color var(--duur-snel), background var(--duur-snel); }
textarea.veld { min-height: 7.5rem; padding: var(--ruimte-xsmall) var(--ruimte-small); resize: vertical; line-height: 1.6; }
.veld::placeholder { color: var(--tekst-tertiair); }
.veld:hover { border-color: var(--veld-lijn-hover); }
.veld:focus { outline: none; border-color: var(--veld-lijn-focus); box-shadow: 0 0 0 3px var(--accent-zacht); }
.veld[disabled] { background: var(--vlak-zacht); color: var(--tekst-tertiair); cursor: not-allowed; }
.veld.is-fout { border-color: var(--rood-500); background: var(--rood-100); }
select.veld { appearance: none; cursor: pointer; padding-right: var(--ruimte-medium);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F656D' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.hulptekst { font-size: var(--tekst-tiny); color: var(--tekst-secundair); }
.foutmelding { display: flex; align-items: center; gap: 6px; font-size: var(--tekst-tiny);
               color: var(--rood-700); font-weight: var(--gewicht-medium); }
.foutmelding svg { width: 14px; height: 14px; flex: none; }

  /* ---------- Bestandsveld: foto's meesturen ----------
     De echte input is verborgen maar blijft bereikbaar met het
     toetsenbord; het label eromheen is het klikvlak. */
.bestandsveld { display: flex; flex-direction: column; gap: var(--ruimte-xsmall); }
.bestandsveld .zone { position: relative; display: flex; align-items: center; gap: var(--ruimte-small);
                      padding: var(--ruimte-small); border: 1.5px dashed var(--veld-lijn);
                      border-radius: var(--radius-s); background: var(--veld-vlak); cursor: pointer;
                      transition: border-color var(--duur-snel), background var(--duur-snel); }
.bestandsveld .zone:hover { border-color: var(--veld-lijn-hover); }
.bestandsveld .zone:focus-within { border-color: var(--veld-lijn-focus); box-shadow: 0 0 0 3px var(--accent-zacht); }
.bestandsveld .zone.is-sleep { border-color: var(--veld-lijn-focus); background: var(--accent-zacht); }
.bestandsveld input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%;
                                   opacity: 0; cursor: pointer; }
.bestandsveld .icoon { flex: none; display: grid; place-items: center; width: 44px; height: 44px;
                       border-radius: var(--radius-s); background: var(--accent-zacht); color: var(--accent-tekst); }
.bestandsveld .icoon svg { width: 22px; height: 22px; }
.bestandsveld .uitleg strong { display: block; font-size: var(--tekst-small); font-weight: var(--gewicht-semibold); }
.bestandsveld .uitleg small { display: block; font-size: var(--tekst-tiny); color: var(--tekst-secundair); margin-top: 2px; }
.bestandsveld .lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bestandsveld .lijst li { display: flex; align-items: center; gap: 6px; font-size: var(--tekst-tiny);
                          color: var(--tekst-secundair); }
.bestandsveld .lijst svg { width: 13px; height: 13px; flex: none; color: var(--accent-tekst); }
@media (max-width: 560px) {
  /* Naast elkaar wordt de tekstkolom te smal en breekt alles af. */
  .bestandsveld .zone { flex-direction: column; align-items: flex-start; gap: var(--ruimte-xsmall); }
  .bestandsveld .icoon { width: 38px; height: 38px; }
  .bestandsveld .icoon svg { width: 19px; height: 19px; }
}

.keuze { display: flex; align-items: flex-start; gap: var(--ruimte-xsmall); cursor: pointer; font-size: var(--tekst-small); }
.keuze input { appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0;
               border: 1.5px solid var(--neutraal-300); background: var(--veld-vlak); cursor: pointer;
               transition: border-color var(--duur-snel), background var(--duur-snel); }
.keuze input[type="checkbox"] { border-radius: var(--radius-xs); }
.keuze input[type="radio"] { border-radius: 50%; }
.keuze input:hover { border-color: var(--accent-vlak); }
.keuze input:checked { background: var(--accent-vlak); border-color: var(--accent-vlak); }
.keuze input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317181A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
  background-size: 14px; background-position: center; background-repeat: no-repeat; }
.keuze input[type="radio"]:checked { box-shadow: inset 0 0 0 4px var(--veld-vlak); }

/* ---------- Kaart ---------- */
.kaart { background: var(--kaart-vlak); border: 1px solid var(--kaart-lijn);
         border-radius: var(--kaart-radius); padding: var(--ruimte-custom1); }
.kaart.is-kaal { border: 0; }
.kaart.is-vlak { background: transparent; border: 0; padding: 0; }

/* ---------- Melding ---------- */
.melding { display: inline-block; padding: 5px 10px; border-radius: var(--radius-xs);
           font: var(--gewicht-medium) var(--tekst-tiny)/1.4 var(--familie-body);
           background: var(--geel-100); color: var(--geel-700); border: 1px dashed var(--geel-500); }
.melding.is-fout { background: var(--rood-100); color: var(--rood-700); border-color: var(--rood-500); border-style: solid; }
.melding.is-goed { background: var(--groen-100); color: var(--groen-700); border-color: var(--groen-500); border-style: solid; }
.melding.is-verifieer::before { content: "TE VERIFIËREN — "; font-weight: var(--gewicht-bold); letter-spacing: 0.04em; }

/* ---------- Beeld-pil in een kop ----------
   Een klein beeld dat meeloopt in de zin. Zet hem op een logisch
   punt midden in de kop, nooit aan het begin of het einde. Maat
   staat in em, dus hij schaalt mee met de kop. */
.kop-beeld { display: inline-block; vertical-align: middle;
             width: var(--pil-breedte, 1.9em); height: var(--pil-hoogte, 0.78em);
             margin: 0 0.08em 0.12em 0.12em; border-radius: var(--radius-vol);
             background-size: cover; background-position: center; background-repeat: no-repeat;
             box-shadow: 0 4px 18px rgba(12,14,17,0.22); }

/* ---------- Icoon ---------- */
.icoon-small { width: 16px; height: 16px; flex: none; }
.icoon-medium { width: 22px; height: 22px; flex: none; }
.icoon-large { width: 28px; height: 28px; flex: none; }
.icoonvlak { flex: none; display: grid; place-items: center; border-radius: var(--radius-m);
             width: 50px; height: 50px; background: var(--accent-zacht); color: var(--accent-tekst); }
.icoonvlak svg { width: 24px; height: 24px; }
.icoonvlak.is-rond { border-radius: 50%; }

/* ---------- Insigne: rond logo op een foto ---------- */
.insigne { position: absolute; left: -14px; bottom: -14px; width: 8.25rem; height: 8.25rem;
           border-radius: 50%; background: var(--neutraal-900); border: 4px solid var(--neutraal-0);
           display: grid; place-items: center; box-shadow: var(--schaduw-hoog); }
.insigne svg, .insigne img { width: 5.75rem; height: 5.75rem; }
@media (max-width: 900px) { .insigne { left: 12px; bottom: 12px; width: 6.25rem; height: 6.25rem; }
                            .insigne svg, .insigne img { width: 4.25rem; height: 4.25rem; } }

/* ---------- Avatar ---------- */
  /* Zelfde vulling als de knoppen, zodat witte tekst 7,00 contrast houdt. */
.avatar { width: 3rem; height: 3rem; border-radius: 50%; background: var(--knop-vlak);
          color: var(--knop-tekst); display: grid; place-items: center;
          font-family: var(--familie-kop); font-weight: var(--gewicht-bold); font-size: var(--tekst-small); }
.op-donker .avatar { border: 1.5px solid rgba(255,255,255,0.28); }