#relatie_combo_wrap{ position:relative; }

.combo-native-select{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.combo-dropdown{
  position:absolute;
  top: calc(100% + 6px);
  left:0; right:0;
  background: var(--card, #fff);
  border:1px solid var(--border-color, rgba(17,24,39,.12));
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-soft, 0 10px 28px rgba(17,24,39,.08));
  z-index: 9999;
  overflow:hidden;
}

#relatie_combo_wrap:focus-within .combo-dropdown{
  border-color: var(--primary, #4284ff);
  box-shadow: 0 0 0 3px var(--primary-weak, rgba(66,132,255,.18)), var(--shadow-soft, 0 10px 28px rgba(17,24,39,.08));
}

.combo-list{ max-height: 340px; overflow:auto; }

.combo-item{
  width:100%;
  text-align:left;
  padding:10px 12px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:14px;
  color: var(--text, #0f172a);
}
.combo-item:hover{ background: var(--primary-soft, rgba(0,0,0,0.03)); }

.combo-item.is-selected{
  background: var(--primary-weak, rgba(66,132,255,.18));
}
.combo-item.is-selected::after{
  content:"✓";
  float:right;
  color: var(--primary, #4284ff);
}

.combo-item.is-active{
  outline: none;
  background: var(--primary-soft, rgba(0,0,0,0.03));
  box-shadow: inset 0 0 0 2px var(--primary, #4284ff);
}

.combo-empty{
  padding:10px 12px;
  color: var(--muted, #6b7280);
  font-size:13px;
}