/* ======= Popup container ======= */
#personPopupContainer{ position:absolute; display:none; z-index:9999; }
#personPopupContent{ padding:0 !important; margin:0 !important; background:transparent !important; border:0 !important; }

/* ======= Krime popup card ======= */
.popup_leden{
  position:relative;
  width: 260px;
  padding: 3px;
  background: rgba(18, 20, 26, 0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow:
    0 18px 45px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;
  color: #e7ebff;
  overflow: hidden;
  backdrop-filter: blur(10px);
  font-size: 12px;
}

/* subtiele “glow” rand bovenaan */
.popup_leden::marker{ content:none; }
.popup_leden::before,
.popup_leden::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: rgba(255,215,0,0.25);
  pointer-events:none;
}

/* ======= Pijl (links/rechts) in Krime stijl ======= */
.popup_leden::before{ /* reset (we gebruiken aparte pijlen hieronder) */ }

.popup_leden[data-arrow]::before,
.popup_leden[data-arrow]::after{ content:none; }

/* standaard pijl links */
/* als links geplaatst (pijl rechts) */
.popup-left .popup_leden::before{
  left:auto; right:-10px;
  border-color:transparent transparent transparent rgba(18,20,26,0.88);
}
.popup-left .popup_leden::after{
  left:auto; right:-12px;
  border-color:transparent transparent transparent rgba(255,255,255,0.09);
}

/* Binnenpaneel */
.popup_binnen{
  display:flex;
  align-items:flex-start;
  gap: 12px;
}

.popup_rechts{ flex:1; min-width:0; }

/* Titel */
.h2popup{
  margin: 0 0 10px;
  font: 800 18px/1.2 'Rajdhani', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffd54a;
  margin-top: 10px;
}

/* ======= Tabel (isoleren + Krime look) ======= */
.popup_leden .popup_tabel{
  width:95%;
  border-collapse: separate;
  border-spacing: 0 8px;          /* “chips” onder elkaar */
  table-layout: fixed;
  margin-top: 2px;
}
.popup_leden .popup_tabel tr{ background:transparent !important; }

.popup_leden .popup_tabel td{
  background: rgba(255,255,255,0.06);
  color:#e7ebff;
  padding: 3px 5px;
  border: 1px solid rgba(255,255,255,0.08);
  height:auto; line-height:1.1;
  font-weight:600;
}

/* icon cel */
.popup_leden .popup_tabel td.icon{
  width:34px;
  text-align:center;
  padding: 4px 3px;
  background: rgba(255,255,255,0.08);
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
}
.popup_leden .popup_tabel td.icon img{
  vertical-align:middle;
  width:16px; height:16px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));
  opacity: .95;
}

/* tekst cel */
.popup_leden .popup_tabel td + td{
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Klokje onderaan */
.popup_leden .popup-clock{
  position:absolute;
  left:12px;
  bottom:10px;
  opacity:.75;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* links/labels */
.popup_leden a{ color: #7fb3ff; text-decoration:none; font-weight:700; }
.popup_leden a:hover{ text-decoration:underline; }

a.groen, .groen{ color:#4fdc96; font-weight:800; }
a.rood,  .rood { color:#ff6b6b; font-weight:800; }