/* =============================================================================
   zoek.php — chipnummer opzoeken
   -----------------------------------------------------------------------------
   Opzet: het zoekveld staat in een eigen band direct onder de kop en blijft daar
   na een zoekopdracht staan. Daaronder één antwoordkolom met een smalle rail.
   Alles met voorvoegsel zk-, zodat deze opmaak los staat van de rest.
   ============================================================================= */

/* ── Zoekband ─────────────────────────────────────────────────────────────── */
.zk-zoekband {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0 1.35rem;
}
.zk-form { max-width: 640px; margin: 0; }
.zk-form-kop {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 .5rem;
}

.zk-invoer {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--surface-warm);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: .3rem .3rem .3rem 1rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.zk-invoer:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(45, 106, 79, .13);
}
.zk-invoer-icoon { color: var(--text-muted); font-size: 1.15rem; flex-shrink: 0; }

.zk-veld {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem;
  letter-spacing: .05em;
  padding: .6rem 0;
}
.zk-veld:focus { outline: none; }
.zk-veld::placeholder { color: var(--border-strong); letter-spacing: normal; }

.zk-knop {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  padding: .65rem 1.4rem;
  cursor: pointer;
  transition: background .16s ease;
}
.zk-knop:hover { background: var(--primary-dark); }

.zk-form-hulp {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin: .7rem 0 0;
  font-size: .86rem;
  color: var(--text-muted);
}
.zk-form-hulp .bi { margin-top: .15rem; flex-shrink: 0; }

/* ── Blad met antwoordkolom en rail ───────────────────────────────────────── */
.zk-blad { padding: 2.25rem 0 3rem; }
.zk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20.5rem;
  gap: 1.75rem;
  align-items: start;
}
.zk-hoofd { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.zk-rail  { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 5.25rem; }

/* ── Foutmelding ──────────────────────────────────────────────────────────── */
.zk-fout {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0;
  background: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--danger) 26%, var(--surface));
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  color: var(--danger);
  font-weight: 500;
}
.zk-fout .bi { margin-top: .15rem; flex-shrink: 0; }

/* ── Toestand: nog niets gezocht ──────────────────────────────────────────── */
.zk-start {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.2rem;
}
.zk-start h2 { font-size: 1.35rem; margin: 0 0 .4rem; }
.zk-start-lead { color: var(--text-muted); margin: 0 0 1.3rem; max-width: 46rem; }

.zk-bronnen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: bron; }
.zk-bronnen li { display: flex; gap: .95rem; align-items: flex-start; }
.zk-bron-icoon {
  flex-shrink: 0;
  width: 2.6rem; height: 2.6rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 1.15rem;
}
.zk-bronnen h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: .25rem 0 .2rem; }
.zk-bronnen p  { margin: 0; font-size: .92rem; color: var(--text-muted); }

/* ── Toestand: gevonden ───────────────────────────────────────────────────── */
.zk-treffer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.6rem;
}
.zk-treffer-vermist { border-top-color: var(--warning); }

.zk-treffer-kop { display: flex; align-items: flex-start; gap: 1rem; }
.zk-treffer-merk {
  flex-shrink: 0;
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 1.5rem;
}
.zk-treffer-vermist .zk-treffer-merk { background: color-mix(in srgb, var(--warning) 12%, var(--surface)); color: var(--warning); }

.zk-treffer-titel { min-width: 0; }
.zk-treffer-label {
  margin: 0;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.zk-treffer-titel h2 { font-size: 1.65rem; margin: .1rem 0 .35rem; overflow-wrap: anywhere; }
.zk-treffer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin: 0; color: var(--text-muted); }

.zk-alarm {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 1.2rem 0 0;
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--surface));
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  color: var(--warning);
  font-size: .93rem;
}
.zk-alarm .bi { margin-top: .15rem; flex-shrink: 0; }
.zk-alarm strong { display: block; }

/* Veldenraster: een definitielijst in kolommen. */
.zk-velden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .1rem 1.5rem;
  margin: 1.3rem 0 0;
}
.zk-velden > div { padding: .55rem 0; border-bottom: 1px solid var(--border); min-width: 0; }
.zk-velden dt {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.zk-velden dd { margin: .15rem 0 0; font-weight: 600; overflow-wrap: anywhere; }

.zk-chip {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  padding: .1rem .45rem;
  color: var(--primary-darker);
  font-size: .95rem;
}

/* Uitklapbaar blok, zonder JavaScript. */
.zk-meer { margin-top: 1.1rem; }
.zk-meer > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  list-style: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: .5rem 1.1rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--primary-dark);
  width: fit-content;
}
.zk-meer > summary::-webkit-details-marker { display: none; }
.zk-meer > summary:hover { background: var(--primary-light); }
.zk-meer > summary .bi { transition: transform .18s ease; }
.zk-meer[open] > summary .bi { transform: rotate(180deg); }

.zk-tekstveld { margin-top: 1rem; }
.zk-tekstveld h3 {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 .25rem;
}
.zk-tekstveld p { margin: 0; }

.zk-eigenaar {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-top: 1.3rem;
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
}
.zk-eigenaar-icoon {
  flex-shrink: 0;
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary-dark);
}
.zk-eigenaar-label {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.zk-eigenaar-naam { margin: 0; font-weight: 700; }
.zk-eigenaar-tel {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  color: var(--primary-dark);
  text-decoration: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: .4rem .95rem;
  background: var(--surface);
}
.zk-eigenaar-tel:hover { border-color: var(--primary); color: var(--primary); }

/* ── Toestand: niet gevonden ──────────────────────────────────────────────── */
.zk-nietgevonden {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 2.2rem 1.6rem;
  text-align: center;
}
.zk-nietgevonden-icoon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  background: var(--surface-warm);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 1.4rem;
  margin-bottom: .9rem;
}
.zk-nietgevonden h2 { font-size: 1.4rem; margin: 0 0 .5rem; }
.zk-nietgevonden-tekst { margin: 0 0 .4rem; color: var(--text-muted); }
.zk-nietgevonden-note  { margin: 0 0 1.3rem; font-size: .88rem; color: var(--text-muted); }
.zk-nietgevonden-acties { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 0; }

/* ── Asynchrone panelen ───────────────────────────────────────────────────── */
/* Klasse in plaats van een style-attribuut; het script zet daarna zelf
   element.style.display, en dat wint van een klasse. */
.zk-verborgen { display: none; }

.zk-paneel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.zk-paneel-kop {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .95rem 1.3rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-warm);
}
.zk-paneel-kop > .bi { color: var(--primary); font-size: 1.15rem; }
.zk-paneel-kop h2 { font-size: 1.05rem; margin: 0; font-family: var(--font-body); font-weight: 700; }
.zk-paneel-body { padding: 1.1rem 1.3rem 1.3rem; }

.zk-laden { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--text-muted); font-size: .92rem; }

/* ── Rail ─────────────────────────────────────────────────────────────────── */
.zk-kaartje {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.35rem;
}
.zk-kaartje h2 {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 .9rem;
}
.zk-acties { display: grid; gap: .5rem; }
.zk-acties .btn { justify-content: flex-start; text-align: left; display: flex; align-items: center; }

.zk-stappen { margin: 0; padding-left: 1.1rem; color: var(--text-muted); font-size: .9rem; }
.zk-stappen li { margin-bottom: .45rem; }
.zk-stappen li:last-child { margin-bottom: 0; }

.zk-kaartje-uitleg { background: var(--surface-warm); }
.zk-kaartje-uitleg p { margin: 0 0 .8rem; font-size: .9rem; color: var(--text-muted); }
.zk-voorbeeld {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  padding: .55rem .4rem;
  color: var(--primary-darker);
  font-weight: 500;
  letter-spacing: .04em;
  font-size: .88rem;
  margin: 0 0 .3rem !important;
}
.zk-voorbeeld-bijschrift { text-align: center; font-size: .74rem; margin: 0 !important; }

/* =============================================================================
   Opmaak voor wat het script in de panelen zet
   ============================================================================= */
.zk-sub {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 1.3rem 0 .55rem;
}
.zk-paneel-body > .zk-sub:first-child { margin-top: 0; }

.zk-rijen { display: grid; gap: 0; margin: 0 0 .6rem; }
.zk-rijen > div {
  display: grid;
  grid-template-columns: minmax(8rem, 38%) minmax(0, 1fr);
  gap: .75rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
}
.zk-rijen dt { color: var(--text-muted); font-size: .88rem; }
.zk-rijen dd { margin: 0; font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }

.zk-tabelwrap { overflow-x: auto; margin-bottom: .8rem; }
.zk-tabel { width: 100%; border-collapse: collapse; font-size: .84rem; }
.zk-tabel th, .zk-tabel td { border: 1px solid var(--border); padding: .4rem .6rem; text-align: left; }
.zk-tabel th { background: var(--surface-warm); font-weight: 700; color: var(--text-muted); white-space: nowrap; }

.zk-melding {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin: .5rem 0;
  font-size: .88rem;
  color: var(--text-muted);
}
.zk-melding .bi { margin-top: .15rem; flex-shrink: 0; }
.zk-melding-waarschuwing {
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--surface));
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  color: var(--warning);
}

.zk-uitkomst {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0 0 1.1rem;
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
}
.zk-uitkomst > .bi { font-size: 1.25rem; color: var(--text-muted); flex-shrink: 0; }
.zk-uitkomst small { display: block; font-size: .84rem; color: var(--text-muted); }
.zk-uitkomst-raak { background: var(--primary-light); border-color: var(--primary-border); }
.zk-uitkomst-raak > .bi { color: var(--primary); }
.zk-uitkomst-raak small { color: var(--primary-dark); }

.zk-bronkop {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 1.2rem 0 .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.zk-bronkop:first-child { margin-top: 0; }
.zk-bronkop-icoon { color: var(--primary); display: inline-flex; align-items: center; }
.zk-bronkop-naam { font-weight: 700; }
.zk-bronkop .badge { font-size: .7rem; }

.zk-dblijst { display: grid; gap: .5rem; }

.zk-db {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  background: var(--surface);
}
.zk-db-nee {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--surface-warm);
  color: var(--text-muted);
  font-size: .88rem;
  padding: .5rem .8rem;
}
.zk-db-nee > .bi { margin-left: auto; color: var(--border-strong); }
.zk-db-ja { border-color: var(--primary-border); background: var(--primary-light); }
.zk-db-kop { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.zk-db-naam { font-weight: 700; }
.zk-db-link { margin-left: auto; }
.zk-db-note { margin: .5rem 0 0; font-size: .88rem; color: var(--text-muted); }
.zk-db-vol .zk-rijen { margin-top: .7rem; }

.zk-meer-klein > summary { padding: .35rem .85rem; font-size: .84rem; }

.zk-zelf { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.zk-zelf-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.zk-zelf-links a {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: .35rem .85rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
}
.zk-zelf-links a:hover { border-color: var(--primary); color: var(--primary); }

.zk-extra { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.zk-wacht {
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
}
.zk-wacht ul {
  list-style: none;
  margin: 0 0 .7rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .4rem .9rem;
  font-size: .88rem;
  color: var(--text-muted);
}
.zk-wacht li { display: flex; align-items: center; gap: .45rem; }
.zk-wacht li .bi { color: var(--primary); }
.zk-wacht p { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; font-size: .82rem; color: var(--text-muted); }

.zk-bron { margin: .6rem 0 0; font-size: .8rem; color: var(--text-muted); }
.zk-bron .bi { margin-right: .3rem; }

.zk-voet {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin: 1.2rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--border);
  font-size: .8rem;
  color: var(--text-muted);
}

/* ── Smallere schermen ────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .zk-grid { grid-template-columns: minmax(0, 1fr); }
  .zk-rail { position: static; }
}
@media (max-width: 575.98px) {
  .zk-invoer { flex-wrap: wrap; border-radius: var(--radius); padding: .7rem .9rem; }
  .zk-veld { flex-basis: 100%; order: 2; }
  .zk-knop { width: 100%; order: 3; justify-content: center; margin-top: .5rem; }
  .zk-treffer, .zk-start { padding-left: 1.1rem; padding-right: 1.1rem; }
  .zk-paneel-kop, .zk-paneel-body { padding-left: 1rem; padding-right: 1rem; }
  .zk-rijen > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .zk-db-link { margin-left: 0; }
}