/* =============================================================================
   vermist-extra-fotos.php — foto's toevoegen aan een lopende vermist-melding
   -----------------------------------------------------------------------------
   Voorvoegsel: .vef-

   Eén taak, één kolom. De lezer is het baasje, komt via een link uit de mail en
   wil hier zo snel mogelijk weg. Daarom eerst de teller (hoeveel kan er nog bij),
   dan het uploadveld, en pas onderaan wat er al staat.

   De pagina droeg hiervoor een donkere gradient-kop, drie kaarten met randen en
   een handvol style-attributen; die zaten de taak alleen maar in de weg.
   ============================================================================= */

.vef-blad { padding: clamp(1.75rem, 4vw, 2.75rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.vef-kolom { max-width: 44rem; }
.vef-kop {
  font-size: 1.08rem;
  font-family: var(--font-body);
  font-weight: 700;
  margin: 2rem 0 .85rem;
}
.vef-kolom > .vef-kop:first-of-type { margin-top: 0; }

/* ── Terugkoppeling na een upload ─────────────────────────────────────────── */
.vef-melding {
  display: flex; align-items: flex-start; gap: .65rem;
  border-radius: var(--radius-sm);
  padding: .85rem 1.1rem;
  margin: 0 0 1.5rem;
  font-size: .95rem;
  line-height: 1.5;
}
.vef-melding .bi { font-size: 1.1rem; flex-shrink: 0; line-height: 1.4; }
.vef-melding-goed { background: var(--primary-light); border: 1px solid var(--primary-border); color: var(--primary-darker); }
.vef-melding-goed .bi { color: var(--primary); }
.vef-melding-info { background: var(--band-blauw); border: 1px solid var(--band-blauw-rand); color: var(--text); }
.vef-melding-info .bi { color: var(--blue); }
.vef-melding-fout {
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--surface));
  color: var(--text);
}
.vef-melding-fout .bi { color: var(--danger); }

/* ── Teller: hoeveel foto's staan er al ───────────────────────────────────── */
.vef-teller { margin-bottom: 1.75rem; }
.vef-teller-tekst { margin: 0 0 .5rem; font-weight: 600; }
.vef-balk {
  height: .45rem;
  border-radius: var(--radius-pill);
  background: var(--border);
  overflow: hidden;
}
.vef-balk span {
  display: block;
  height: 100%;
  width: var(--vef-deel, 0%);
  background: var(--primary);
  border-radius: var(--radius-pill);
}

/* ── Uploadveld ───────────────────────────────────────────────────────────── */
.vef-dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-warm);
  padding: clamp(1.75rem, 5vw, 2.75rem) 1.5rem;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease;
}
.vef-dropzone.is-sleep { background: var(--band-blauw); border-color: var(--blue); }
.vef-dropzone > .bi { font-size: 2.75rem; color: var(--border-strong); display: block; margin-bottom: .5rem; }
.vef-dropzone-hoofd { font-size: 1.05rem; font-weight: 600; margin: 0 0 .3rem; }
.vef-dropzone-sub { color: var(--text-muted); font-size: .88rem; margin: 0 0 1.15rem; }
.vef-dropzone label { cursor: pointer; font-weight: 600; }

/* De verzendknop verschijnt pas als er iets gekozen is; dat stond eerder als
   style="display:none" in de markup en werd door JavaScript weer leeggezet. */
.vef-verzend { display: none; width: 100%; margin-top: 1.1rem; font-weight: 600; }
.vef-form.heeft-keuze .vef-verzend { display: inline-flex; align-items: center; justify-content: center; }

.vef-preview { margin-top: 1.1rem; }
.vef-preview:empty { display: none; }

.vef-watermerk {
  display: flex; align-items: flex-start; gap: .6rem;
  color: var(--text-muted);
  font-size: .87rem;
  line-height: 1.55;
  margin: 1rem 0 0;
}
.vef-watermerk .bi { color: var(--primary); font-size: 1rem; flex-shrink: 0; line-height: 1.5; }
.vef-watermerk strong { color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem; }

/* ── Rasters: bestaande foto's en de voorvertoning ────────────────────────── */
.vef-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: .7rem;
}
.vef-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-warm);
}

/* ── Daarna ───────────────────────────────────────────────────────────────── */
.vef-verder {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.vef-verder .vef-kop { margin-top: 0; }
.vef-verder-knoppen { display: flex; flex-wrap: wrap; gap: .6rem; }
.vef-verder-knoppen .btn { font-weight: 600; }

/* ── Ongeldige link ───────────────────────────────────────────────────────── */
.vef-leeg { padding: clamp(2rem, 5vw, 3rem) 0; }
.vef-leeg p { color: var(--text-muted); max-width: 58ch; line-height: 1.7; margin: 0 0 1.5rem; }

@media (max-width: 575px) {
  .vef-verder-knoppen .btn { width: 100%; }
}