/* ==========================================================================
   HEIC naar PNG/JPG (V2.48.0) – huisstijl; zelfde opbouw als de Afbeelding-resizer
   ========================================================================== */
.hc { display: flex; flex-direction: column; gap: 16px; }
.hc [hidden] { display: none !important; }
.hc .kaart { padding: 22px; }
.hc h2 { font: 600 1.1rem/1.3 var(--font-tekst); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.hc h2 svg.i { width: 18px; height: 18px; color: var(--merk); flex: none; }

.hc-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 170px; padding: 24px 16px; border: 2px dashed color-mix(in srgb, var(--merk) 45%, var(--rand)); border-radius: var(--r-m);
  background: color-mix(in srgb, var(--merk-zacht) 55%, var(--vlak)); cursor: pointer; transition: border-color .15s, background .15s;
}
.hc-zone:hover, .hc-zone.sleep { border-color: var(--merk); background: var(--merk-zacht); }
.hc-zone:focus-visible { outline: none; box-shadow: var(--ring); }
.hc-zone b { font: 700 1.05rem/1.3 var(--font-tekst); color: var(--tekst); }
.hc-zone > span:not(.hc-zone-ic) { font-size: var(--fs-s); color: var(--tekst-2); }
.hc-zone-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--merk); color: #fff; display: grid; place-items: center; margin-bottom: 4px; }
.hc-zone-ic svg.i { width: 26px; height: 26px; }
.hc.heeft .hc-zone { min-height: 0; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; padding: 14px 16px; }
.hc.heeft .hc-zone-ic { width: 38px; height: 38px; margin: 0; }
.hc.heeft .hc-zone-ic svg.i { width: 20px; height: 20px; }
.hc.heeft .hc-zone b { font-size: var(--fs-s); }
.hc.heeft .hc-zone > span:not(.hc-zone-ic) { font-size: var(--fs-xs); }
.hc-privacy { margin: 12px 0 0; display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-xs); color: var(--tekst-2); }
.hc-privacy svg.i { width: 16px; height: 16px; color: var(--ok); flex: none; margin-top: 1px; }
.hc-voortgang { margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-s); font-weight: 600; color: var(--tekst-2); }
.hc-balk { height: 8px; border-radius: var(--r-rond); background: var(--vlak-2); overflow: hidden; }
.hc-balk i { display: block; height: 100%; width: 0; background: var(--merk); border-radius: inherit; transition: width .2s; }
.hc-melding { margin: 10px 0 0; font-size: var(--fs-s); color: var(--ok); font-weight: 600; }
.hc-melding:empty { display: none; }
.hc-melding.fout { color: var(--fout); padding: 10px 12px; border-radius: var(--r-s); background: var(--fout-zacht); font-weight: 500; }

.hc-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.hc-types button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: var(--r-m); border: 2px solid var(--rand);
  background: var(--vlak); color: var(--tekst); text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.hc-types button:hover { border-color: color-mix(in srgb, var(--merk) 50%, var(--rand)); }
.hc-types button[aria-checked="true"] { border-color: var(--merk); background: var(--merk-zacht); box-shadow: 0 4px 14px color-mix(in srgb, var(--merk) 20%, transparent); }
.hc-types button[aria-checked="true"] b { color: var(--merk); }
.hc-types button:focus-visible { outline: none; box-shadow: var(--ring); }
.hc-types b { font: 800 1.05rem/1.2 var(--font-tekst); }
.hc-types small { font-size: .74rem; color: var(--tekst-3); line-height: 1.3; }
.hc-opties { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; }
.hc-veld { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-s); font-weight: 600; min-width: 220px; flex: 1; max-width: 380px; }
.hc-veld b { color: var(--merk); font-family: var(--font-code); }
.hc input[type="range"] { width: 100%; accent-color: var(--merk); }
.hc .hc-veld select.veld { height: 44px; }

.hc-res-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.hc-res-kop h2 { margin: 0; }
.hc-res-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-totaal { margin: 8px 0 12px; font: 600 var(--fs-s) var(--font-code); color: var(--ok); }
.hc-totaal:empty { display: none; }
.hc-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hc-item { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 8px; border: 1px solid var(--rand); border-radius: var(--r-m); background: var(--vlak); }
.hc-mini { width: 56px; height: 56px; border-radius: var(--r-s); background: var(--vlak-2); flex: none; overflow: hidden; display: grid; place-items: center; }
.hc-mini img { width: 100%; height: 100%; object-fit: cover; }
.hc-mini img:not([src]) { visibility: hidden; }
.hc-item-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-item-tekst b { font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-item-tekst small { font: 500 var(--fs-xs)/1.4 var(--font-code); color: var(--tekst-2); overflow-wrap: anywhere; }
.hc-weg { width: 34px; height: 34px; flex: none; border: 0; border-radius: var(--r-s); background: none; color: var(--tekst-3); display: grid; place-items: center; cursor: pointer; }
.hc-weg:hover { background: var(--fout-zacht); color: var(--fout); }
.hc-weg:focus-visible { outline: none; box-shadow: var(--ring); }

.hc-uitleg ul { margin: 0; padding-left: 20px; color: var(--tekst-2); line-height: 1.7; }
.hc-uitleg li + li { margin-top: 6px; }
.hc-uitleg b { color: var(--tekst); }
.hc-uitleg a { color: var(--merk-tekst, var(--merk)); }

@media (max-width: 560px) {
  .hc .kaart { padding: 14px; }
  .hc-zone { min-height: 140px; }
  .hc-types { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hc-veld { min-width: 0; max-width: none; width: 100%; }
  .hc-res-knoppen, .hc-res-knoppen .knop { width: 100%; justify-content: center; }
}