/* step4.css — alleen voor Stap 4 (scoped met .s4) */
.s4 { }
.s4 .section-title { margin: .2rem 0 .6rem; }

/* Info-blok (uitleg) */
.s4 .info{
  border:1px solid #d7e6f7;
  background:#f7fbff;
  border-radius:10px;
  padding:.9rem 1rem;
  color:#0b2a4a;
}

/* Kaart-blokken (concept/definitief) */
.s4 .card{
  border:1px solid #d7e6f7;
  background:#eef5ff;           /* zachte blauwe achtergrond */
  border-radius:10px;
  padding:.9rem 1rem;
  margin: 1rem 0;               /* lucht boven & onder */
}
.s4 .card .actions{ display:flex; gap:.6rem; flex-wrap:wrap }

/* Signers container en individuele kaarten */
.s4 #signers{ display:block; margin: 1rem 0; }
.s4 .signer{
  border:1px solid #d7e6f7;
  background:#f7fbff;
  border-radius:10px;
  padding:.9rem 1rem;
  margin-bottom: 1rem;          /* lucht NA elke signer-kaart */
}
.s4 .signer__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; margin-bottom:.6rem;
}

/* Status-chip */
.s4 .status{
  font-weight:700; font-size:.85rem; padding:.2rem .5rem;
  border-radius:999px; border:1px solid #cfe1fb; background:#e9f3ff;
}
.s4 .status--ok{ background:#e8f8ec; border-color:#bfe9c6; color:#156a2f; }
.s4 .status--wait{ color:#0b2a4a; }

/* Handtekening-pad en preview */
.s4 .sig-pad{
  background:#fff;
  border:1px solid var(--border, #e5e7eb);
  border-radius:8px;
  padding:.55rem;
  margin-bottom:.8rem;          /* lucht ONDER het tekenvlak */
}
.s4 .sig-canvas{
  display:block;
  width:100%;
  height:160px;                 /* breder canvas */
  background:#fff;
  border:1px dashed #cfd8e3;
  border-radius:6px;
}
.s4 .sig-actions{ display:flex; gap:.6rem; margin-top:.55rem }

/* Getekende preview-afbeelding */
.s4 .signer img{
  display:block;
  max-width:260px;
  background:#fff;
  border:1px solid var(--border, #e5e7eb);
  border-radius:6px;
  padding:4px;
  margin-bottom:.9rem;          /* lucht ONDER de preview */
}

/* Divider + e-mail invite */
.s4 .divider{ height:1px; background:var(--border, #e5e7eb); margin:.8rem 0 }
.s4 .field{ margin:.5rem 0 0 }
.s4 .invite{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.35rem }
.s4 .invite input[type=email]{
  flex:1 1 260px;
  min-width:240px;
  padding:.65rem .75rem;
  border:1px solid #dfe5ee;
  border-radius:8px;
  background:#fff;
  font:inherit;
}
.s4 .note{ margin-top:.35rem; color:#5b6b83 }
 
/* Lokale knoppen (scoped, stoort globale .btn niet) */
.s4 .btn-primary{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem .9rem;
  border-radius:10px;
  border:2px solid #3AAE2B;
  background:#3AAE2B; color:#ffffff; font-weight:600; cursor:pointer;
}
.s4 .btn-primary[disabled]{ opacity:.6; cursor:not-allowed }
.s4 .btn-ghost{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .85rem;
  border-radius:10px;
  border:1px solid var(--border, #e5e7eb);
  background:#fff; color:#0b2a4a; cursor:pointer;
}
.s4 .btn-ghost:hover{ border-color:#c8d6ee }

/* Extra verticale lucht tussen hoofdonderdelen binnen .s4 */
.s4 > * + *{ margin-top: .8rem; }