/* ---------------------------------------------------------
   STEP1.CSS — Scoped styles alleen voor Stap 1 (klasse .s1)
   Past niets aan buiten .s1.
   Layout: (Voornaam | Achternaam) / (Straat | Nr.) / (Postcode | Plaats)
---------------------------------------------------------- */

/* Grids (alleen in .s1) */
.s1 .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width:720px){ .s1 .grid-2{ grid-template-columns:1fr } }

.s1 .grid-address{
  display:grid; grid-template-columns:minmax(280px,1fr) 120px;
  gap:14px; align-items:end;
}
@media (max-width:720px){
  .s1 .grid-address{ grid-template-columns:1fr 110px }
}

/* Kaarten */
.s1 .vof-card{
  background: var(--panel-strong);
  border:1px solid #cfe1fb;
  border-radius:10px;
  padding:.9rem;
  margin-bottom:14px;
}

.s1 #vennotenWrap{ display:grid; gap:14px } /* ruimte tussen vennoten */

.s1 .vennoot-card{
  background: var(--panel-strong);
  border:1px solid #cfe1fb;
  border-radius:10px;
  padding:.9rem;
}
.s1 .vennoot-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.6rem;
}

/* Veldcontainers – minimalistische lijnstijl, alleen hier */
.s1 .field{ background:transparent; border:0; padding:0 }
.s1 .field label{
  display:block; font-weight:700; font-size:.9rem; color:#1f2937;
  margin-left:.1rem; margin-bottom:.2rem;
}

/* Inputs in Stap 1: lijnstijl + extra linker padding */
.s1 input[type=text],
.s1 input[type=number],
.s1 input[type=date],
.s1 input[type=email],
.s1 textarea,
.s1 select{
  width:100%;
  font:inherit; color:#0f172a; background:#fff;
  border:0; border-bottom:1px solid #e5e7eb; border-radius:0;
  padding:.62rem .5rem .52rem 1rem; /* extra ruimte links */
  outline:none;
}
.s1 input[type=text]:focus,
.s1 input[type=number]:focus,
.s1 input[type=date]:focus,
.s1 input[type=email]:focus,
.s1 textarea:focus,
.s1 select:focus{
  border-bottom-color:#002E5D;
}

/* Smalle velden (alleen hier) */
.s1 .field--nr input{ max-width:120px }
.s1 .w-pc input{ max-width:160px }

/* Voorbeeld-blok was hier, maar is verwijderd in de UI */

/* Kleine helper voor de “+ vennoot” regel */
.s1 .inline{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center }
.s1 .hint{ color:#64748b; font-size:.9rem }

/* -----------------------------------------
   Mooie tooltip voor de “i”-badge bij E-mail
   (alleen binnen .s1)
------------------------------------------ */
.s1 .tip{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:.4rem;
  font-weight:700; font-size:.78rem; line-height:1;
  color:var(--brand); background:#fff;
  border:1px solid var(--brand); border-radius:50%;
  cursor:default; user-select:none;
}
.s1 .tip::after{
  content: attr(data-tip);
  position:absolute; z-index:10;
  left:50%; top:calc(100% + 8px); transform:translate(-50%, 0);
  background:#0b2a4a; color:#fff;
  padding:.5rem .6rem; border-radius:8px; box-shadow:var(--shadow);
  font-size:.87rem; line-height:1.25;
  min-width:220px; max-width:320px; white-space:normal;
  opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
}
.s1 .tip::before{
  content:"";
  position:absolute; z-index:10;
  top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#0b2a4a;
  opacity:0; transition:opacity .15s;
}
.s1 .tip:hover::after,
.s1 .tip:focus::after{
  opacity:1; transform:translate(-50%, -2px);
}
.s1 .tip:hover::before,
.s1 .tip:focus::before{
  opacity:1;
}