/* ============================================================
   Ontslagrechtjuristen.nl — InPrivy upload form
   Design: Neutraal grijs / Apple-stijl — v5 final
   Drie pagina-contexten:
     .page_publicshare  — uploadformulier
     .page_prelude      — "Bekijk gedeelde informatie"
     .page_secret       — downloadscherm met bestanden
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --green:          #1d9e75;
  --green-dark:     #167a5a;
  --green-light:    #f9fdf9;
  --green-strip:    #e8f5ef;
  --green-ring:     rgba(29,158,117,.12);
  --green-shadow:   rgba(29,158,117,.22);

  --bg:             #f5f5f7;
  --surface:        #ffffff;
  --border:         #e0e0e0;
  --border-light:   #ebebeb;

  --text-1:         #1d1d1f;
  --text-2:         #3c3c43;
  --text-3:         #6e6e73;
  --text-4:         #aeaeb2;
  --text-5:         #c0c0c0;

  --radius-card:    20px;
  --radius-field:   10px;
  --radius-pill:    999px;

  --shadow-card:
    0 1px 1px  rgba(0,0,0,.03),
    0 6px 24px rgba(0,0,0,.06),
    0 1px 3px  rgba(0,0,0,.04);

  --ease:     cubic-bezier(.4,0,.2,1);
  --spring:   cubic-bezier(.22,.68,0,1.2);
  --fast:     150ms;
  --base:     240ms;
}

/* ── BASE ────────────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; }

body {
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue',
               system-ui, sans-serif !important;
  background-color: var(--bg) !important;
  color: var(--text-1) !important;
}

/* ── HEADER ──────────────────────────────────────────────── */
.bg-slate-100 {
  background-color: var(--bg) !important;
  padding-top:    2vh !important;
  padding-bottom: 2vh !important;
}

/* ── LOGO: verborgen ─────────────────────────────────────── */
.logo {
  display: none !important;
}

/* ── CONTENT positie ─────────────────────────────────────── */
.content {
  --tw-translate-y: -0.5rem !important;
  translate: 0 -0.5rem !important;
}

/* ── TITEL boven kaart ───────────────────────────────────── */
.content::before {
  content:       "Dossier aanvullen";
  display:       block;
  width:         100%;
  margin:        0 auto 16px;
  background:    none;
  border:        none;
  padding:       0;
  font-size:     17px;
  font-weight:   700;
  color:         var(--text-1);
  letter-spacing:-.03em;
  box-shadow:    none;
  font-family:   inherit;
  text-align:    center;
}

/* ── KAART ───────────────────────────────────────────────── */
.content .max-w-2xl {
  border-radius: var(--radius-card) !important;
  border:        0.5px solid var(--border) !important;
  box-shadow:    var(--shadow-card) !important;
  padding:       0 !important;
  overflow:      hidden;
  background:    var(--surface) !important;
  animation:     orj-up var(--base) var(--spring) both;
}

@keyframes orj-up {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0);    }
}

/* ── TRUST STRIP bovenaan kaart ──────────────────────────── */
.content .max-w-2xl::before {
  content:       "SSL-versleuteld \B7  Document upload in beveiligde omgeving";
  display:       block;
  background:    var(--green-light);
  border-bottom: 0.5px solid var(--green-strip);
  color:         var(--green-dark);
  font-size:     11px;
  font-weight:   600;
  padding:       9px 20px;
  text-align:    center;
  font-family:   inherit;
  letter-spacing:.02em;
  box-sizing:    border-box;
  width:         100%;
}

/* ── FOOTER BADGE onderaan kaart ─────────────────────────── */
.content .max-w-2xl::after {
  content:     "Versleuteld verstuurd volgens AES-256 technologie";
  display:     block;
  text-align:  center;
  font-size:   11px;
  font-weight: 500;
  color:       var(--text-4);
  padding:     14px 20px 20px;
  border-top:  0.5px solid var(--border-light);
  font-family: inherit;
}

/* ============================================================
   PAGE_PUBLICSHARE — uploadformulier
   ============================================================ */

/* ── FORM ────────────────────────────────────────────────── */
.page_publicshare form {
  display:        flex !important;
  flex-direction: column !important;
  padding:        22px 22px 0 !important;
}

/* ── VELDVOLGORDE ────────────────────────────────────────── */
.page_publicshare form > p                           { order: 1; }
.page_publicshare form > div:has(.filepond--root)    { order: 3; }
.page_publicshare form > div:has(label[for="email"]) { order: 4; }
.page_publicshare form > div:has(textarea)           { order: 2; }
.page_publicshare form > .action                     { order: 5; }

/* ── INTRO TEKST ─────────────────────────────────────────── */
.page_publicshare form > p {
  font-size:     14px !important;
  line-height:   1.65 !important;
  color:         var(--text-2) !important;
  text-align:    left !important;
  margin:        0 0 16px 0 !important;
  padding:       0 !important;
}

/* ── UPLOAD label + hint ─────────────────────────────────── */
.page_publicshare form > div:has(.filepond--root)::before {
  content:       "Bestanden uploaden *";
  display:       block;
  font-size:     12px;
  font-weight:   700;
  color:         var(--text-1);
  letter-spacing:-.01em;
  margin-bottom: 6px;
  font-family:   inherit;
}
.page_publicshare form > div:has(.filepond--root)::after {
  content:     "Je kunt meerdere bestanden tegelijk uploaden of slepen.";
  display:     block;
  font-size:   11px;
  color:       var(--text-4);
  margin-top:  6px;
  font-family: inherit;
}

/* ── TEXTAREA label ──────────────────────────────────────── */
.page_publicshare form > div:has(textarea)::before {
  content:       "Beschrijf de documenten die je gaat uploaden *";
  display:       block;
  font-size:     12px;
  font-weight:   700;
  color:         var(--text-1);
  letter-spacing:-.01em;
  margin-bottom: 6px;
  font-family:   inherit;
}

/* ============================================================
   PAGE_PRELUDE — "Bekijk gedeelde informatie"
   HTML: .max-w-2xl > div > p  +  .max-w-2xl > .action > a.btn
   ============================================================ */

/* ── WRAPPER div: padding zodat inhoud niet tegen rand zit ─ */
.page_prelude .content .max-w-2xl > div {
  padding: 20px 22px 0 !important;
}

/* ── PARAGRAAF tekst ─────────────────────────────────────── */
.page_prelude .content .max-w-2xl > div > p {
  font-size:   15px !important;
  line-height: 1.7 !important;
  color:       var(--text-2) !important;
  text-align:  center !important;
  margin:      0 !important;
  padding:     0 !important;
}

/* ── ACTION div: padding ─────────────────────────────────── */
.page_prelude .content .max-w-2xl > .action {
  padding: 16px 22px 22px !important;
}

/* ── BEKIJK-knop (is een <a class="btn">) ────────────────── */
.page_prelude .content .max-w-2xl .action a.btn {
  display:       block !important;
  font-family:   inherit !important;
  font-size:     15px !important;
  font-weight:   600 !important;
  background:    var(--green) !important;
  color:         #fff !important;
  border:        none !important;
  border-radius: var(--radius-pill) !important;
  padding:       14px 28px !important;
  width:         100% !important;
  text-align:    center !important;
  text-decoration: none !important;
  box-sizing:    border-box !important;
  letter-spacing:-.01em;
  cursor:        pointer !important;
  box-shadow:    0 2px 12px var(--green-shadow) !important;
  transition:    background var(--fast) var(--ease),
                 transform  var(--fast) var(--spring) !important;
}
.page_prelude .content .max-w-2xl .action a.btn:hover {
  background: var(--green-dark) !important;
  transform:  translateY(-1px) !important;
}

/* ============================================================
   PAGE_SECRET — downloadscherm met bestanden
   HTML: .max-w-2xl > .unlocked > .secret__container > p
         .unlocked > .action > span.btn  (= Kopiëren, verbergen)
   ============================================================ */

/* ── KOPIËREN span: volledig verbergen ───────────────────── */
/* Het is een <span class="btn">, geen <button>               */
.page_secret .action .btn,
.page_secret .action span.btn {
  display: none !important;
}

/* ── UNLOCKED wrapper: padding ───────────────────────────── */
.page_secret .content .max-w-2xl .unlocked {
  padding: 20px 22px 6px !important;
}

/* ── "Upload bestanden" tekst ────────────────────────────── */
.page_secret .secret__container p {
  font-size:   15px !important;
  line-height: 1.7 !important;
  color:       var(--text-2) !important;
  text-align:  center !important;
  margin:      0 0 4px !important;
  padding:     0 !important;
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue',
               system-ui, sans-serif !important;
}

/* ── BESTANDENLIJST ──────────────────────────────────────── */
.page_secret .attachments {
  border:        0.5px solid var(--border) !important;
  border-radius: var(--radius-field) !important;
  padding:       4px 8px !important;
  margin-top:    16px !important;
}
.page_secret .attachments li {
  font-size:   13px !important;
  color:       var(--text-2) !important;
}
.page_secret .attachments a {
  color:       var(--text-2) !important;
  text-decoration: none !important;
}
.page_secret .attachments a:hover {
  color:       var(--green) !important;
}

/* ============================================================
   GEDEELDE STIJLEN — velden, knoppen, filepond
   ============================================================ */

/* ── FILEPOND ────────────────────────────────────────────── */
.filepond--root {
  border:        1.5px dashed var(--border) !important;
  border-radius: var(--radius-field) !important;
  background:    var(--bg) !important;
  min-height:    120px !important;
  font-family:   inherit !important;
  transition:    border-color var(--fast) var(--ease),
                 background   var(--fast) var(--ease) !important;
}
.filepond--root:hover {
  border-color: var(--green) !important;
  background:   #f0faf6 !important;
}
.filepond--panel-root {
  background: transparent !important;
  border:     none !important;
  box-shadow: none !important;
}
.filepond--drop-label {
  color:       var(--text-1) !important;
  font-size:   13px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
}
.filepond--drop-label label { cursor: pointer !important; }

/* ── EMAIL label ─────────────────────────────────────────── */
label[for="email"] {
  font-size:     12px !important;
  font-weight:   600 !important;
  color:         var(--text-1) !important;
  letter-spacing:-.01em !important;
  margin-bottom: 6px !important;
  display:       block !important;
}

/* ── TEXTAREA ────────────────────────────────────────────── */
textarea.field {
  font-family:   inherit !important;
  font-size:     14px !important;
  color:         var(--text-1) !important;
  background:    var(--bg) !important;
  border:        0.5px solid var(--border) !important;
  border-radius: var(--radius-field) !important;
  padding:       12px 13px !important;
  height:        auto !important;
  min-height:    80px !important;
  resize:        none;
  field-sizing:  content;
  line-height:   1.55 !important;
  transition:    border-color var(--fast) var(--ease),
                 box-shadow   var(--fast) var(--ease),
                 background   var(--fast) var(--ease) !important;
}
textarea.field::placeholder { color: var(--text-5) !important; }
textarea.field:focus {
  border-color: var(--green) !important;
  background:   var(--surface) !important;
  box-shadow:   0 0 0 3px var(--green-ring) !important;
  outline:      none !important;
}
textarea.field:invalid {
  border-color: var(--border) !important;
  background:   var(--bg) !important;
  box-shadow:   none !important;
}
textarea.field:invalid:focus {
  border-color: var(--green) !important;
  box-shadow:   0 0 0 3px var(--green-ring) !important;
}

/* ── INPUT VELDEN ────────────────────────────────────────── */
.field {
  font-family:   inherit !important;
  font-size:     14px !important;
  color:         var(--text-1) !important;
  background:    var(--bg) !important;
  border:        0.5px solid var(--border) !important;
  border-radius: var(--radius-field) !important;
  padding:       12px 13px !important;
  transition:    border-color var(--fast) var(--ease),
                 box-shadow   var(--fast) var(--ease),
                 background   var(--fast) var(--ease) !important;
  -webkit-appearance: none;
}
.field::placeholder { color: var(--text-5) !important; }
.field:focus {
  border-color: var(--green) !important;
  background:   var(--surface) !important;
  box-shadow:   0 0 0 3px var(--green-ring) !important;
  outline:      none !important;
}

/* ── SUBMIT KNOP ─────────────────────────────────────────── */
button.btn {
  font-family:   inherit !important;
  font-size:     15px !important;
  font-weight:   600 !important;
  background:    var(--green) !important;
  color:         #fff !important;
  border:        none !important;
  border-radius: var(--radius-pill) !important;
  padding:       14px 28px !important;
  width:         100% !important;
  letter-spacing:-.01em;
  cursor:        pointer !important;
  box-shadow:    0 2px 12px var(--green-shadow) !important;
  transition:    background var(--fast) var(--ease),
                 transform  var(--fast) var(--spring),
                 box-shadow var(--fast) var(--ease) !important;
}
button.btn:hover {
  background: var(--green-dark) !important;
  transform:  translateY(-1px) !important;
  box-shadow: 0 4px 18px var(--green-shadow) !important;
}
button.btn:active {
  transform: scale(.99) translateY(0) !important;
}

/* ── SPACING ─────────────────────────────────────────────── */
.mt-5 { margin-top: 14px !important; }

/* ── MOBIELE ZOOM PREVENTIE ──────────────────────────────── */
@media (max-width: 768px) {
  .field,
  textarea.field,
  input.field,
  .filepond--drop-label {
    font-size: 16px !important;
  }
}

/* ── FOOTER LINKS ────────────────────────────────────────── */
.footer__links ul li {
  background-color: rgba(0,0,0,.28) !important;
}
.footer__links a {
  color:       rgba(255,255,255,.55) !important;
  font-size:   11px !important;
  font-family: inherit !important;
}
.footer__links a:hover { color: #fff !important; }