/* ===== Vorm trap – UI cards ===== */
.ns-shapes{
  margin:18px 0 22px;
  padding:14px;
  border:1px solid #e6e6e9;
  border-radius:14px;
  background:#fff;
}
.ns-shapes__title{
  font-weight:700;
  font-size:16px;
  margin:0 0 10px;
}
.ns-shapes__grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.ns-shape{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  border:1.5px solid #e7e7ea;
  border-radius:12px;
  padding:10px;
  cursor:pointer;
  user-select:none;
  transition:border-color .15s ease, box-shadow .15s ease, transform .06s ease;
  background:#fff;
}
.ns-shape:hover{ transform:translateY(-1px); }
.ns-shape input{ display:none; }

/* afbeeldingvak; tekeningen lang/hoog -> contain */
.ns-shape__fig{
  width:100%;
  border-radius:10px;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.ns-shape__fig img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  height: 100px !important;
}
.ns-shape__lbl{
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  color:#222;
  min-height:1.2em;
}

/* geselecteerd: oranje ring + checkbadge */
.ns-shape:has(input:checked),
.ns-shape.is-checked{
  border-color:#df6a3e;
  box-shadow:0 0 0 2px rgba(223,106,62,.15);
}
.ns-shape:has(input:checked)::after,
.ns-shape.is-checked::after{
  content:"✓";
  position:absolute;
  top:8px; right:8px;
  width:22px; height:22px;
  border-radius:50%;
  background:#df6a3e;
  color:#fff;
  font-weight:800;
  font-size:14px;
  line-height:22px;
  text-align:center;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}

/* responsive kolommen */
@media (max-width:1100px){ .ns-shapes__grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:900px){  .ns-shapes__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){  .ns-shapes__grid{ grid-template-columns:repeat(2,1fr); } }

/* info-blok onder de tegels */
.ns-shapes__note{
  margin-top:12px;
  padding:10px 12px;
  border:1px dashed #e6e6e9;
  border-radius:10px;
  background:#fafafa;
  font-size:14px;
  line-height:1.5;
  color:#222;
}
.ns-note-link{
  color:#df6a3e;
  text-decoration:none;
  border-bottom:1px dotted rgba(223,106,62,.4);
}
.ns-note-link:hover{
  text-decoration:none;
  border-bottom-color:transparent;
}