:root{
  --blue:#1f2f8a;
  --bg:#f4f6fb;
  --line:#e6e9f2;
  --text:#0f172a;
  --muted:#667085;
  --card:#ffffff;
  --pill:#2bd67b;
  --shadow: 0 10px 30px rgba(15,23,42,.08);
  --shadow2: 0 8px 22px rgba(15,23,42,.06);
  --radius:14px;
  --navw:70px;
  --navw-open:210px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

a{color:inherit}
a:hover{opacity:.95}

/* LOGIN */
.cp-login{display:grid;place-items:center;padding:24px}
.cp-login-card{
  width:min(460px,100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:22px
}
.cp-login-brand{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.cp-logo-dot{width:130px;height:34px;border-radius:10px;background:var(--blue)}
.cp-brand-title{font-weight:900}
.cp-brand-sub{color:var(--muted);font-size:13px;margin-top:2px}
.cp-alert{background:#fff4f4;border:1px solid #ffd1d1;color:#7a0b0b;padding:10px 12px;border-radius:12px;margin:10px 0}
.cp-form label{display:block;margin:10px 0}
.cp-form span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.cp-form input{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  outline:none
}
.cp-form input:focus{border-color:#c7cff6;box-shadow:0 0 0 4px rgba(31,47,138,.08)}
.cp-btn-primary{
  width:100%;
  margin-top:8px;
  padding:12px 14px;
  border:0;
  border-radius:12px;
  background:var(--blue);
  color:#fff;
  font-weight:900;
  cursor:pointer
}
.cp-login-foot{margin-top:12px;color:var(--muted);font-size:12px}

/* APP TOPBAR */
.cp-topbar{
  height:54px;
  background:var(--blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.12);

  /* UPDATE: topbar boven alles (menu/backdrop/knoppen) */
  position:relative;
  z-index:10020;
}
.cp-topbar .left{display:flex;align-items:center;gap:10px}
.cp-topbar .brand-dot{width:18px;height:18px;border-radius:6px;background:#fff;opacity:.9}
.cp-topbar .tabs{display:flex;gap:18px;align-items:center;font-weight:700;font-size:13px;opacity:.95}
.cp-topbar .tabs .tab{opacity:.85}
.cp-topbar .tabs .tab.active{opacity:1}
.cp-topbar .right{display:flex;align-items:center;gap:12px}
.cp-topbar .iconbtn{
  width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.10);
}
.cp-topbar .iconbtn:hover{background:rgba(255,255,255,.16)}
.cp-topbar .userchip{display:flex;align-items:center;gap:10px}
.cp-topbar .avatar{width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,.25)}

/* APP LAYOUT */
.cp-main{
  height:calc(100vh - 54px);
  display:grid;
  grid-template-columns: var(--navw) 1fr 360px;

  /* UPDATE: eigen stacking context, zodat nav z-index altijd werkt */
  position:relative;
  z-index:1;
}

/* LEFT NAV (hover expand) */
.cp-nav{
  background:#fff;
  border-right:1px solid var(--line);

  /* UPDATE: altijd bovenop content/knoppen */
  position:relative;
  z-index:10010;

  overflow:hidden;
  transition:width .18s ease;
  width:var(--navw);
}
.cp-nav:hover{width:var(--navw-open)}
.cp-nav .navwrap{
  padding:10px;

  /* UPDATE: extra zekerheid dat inner content bovenop zit */
  position:relative;
  z-index:10011;
}
.cp-nav .navitem{
  display:flex;align-items:center;gap:12px;
  padding:10px 10px;border-radius:14px;
  color:#1f2937;

  /* UPDATE */
  position:relative;
  z-index:10012;
}
.cp-nav .navitem:hover{background:#f5f7ff}
.cp-nav .navitem.active{background:#eef2ff;color:#1f2f8a}
.cp-nav .ico{
  width:34px;height:34px;border-radius:12px;
  background:#f3f4f6;
  display:grid;place-items:center;
  flex:0 0 34px;
}
.cp-nav .label{
  white-space:nowrap;
  opacity:0;
  transform:translateX(-6px);
  transition:all .18s ease;
  font-weight:800;
  font-size:13px;
}
.cp-nav:hover .label{opacity:1;transform:translateX(0)}

/* CENTER TICKET */
.cp-center{
  overflow:auto;
  padding:18px 18px 26px;

  /* UPDATE: nooit boven nav */
  position:relative;
  z-index:1;
}
.cp-ticket{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  min-height:calc(100% - 10px);
}
.cp-ticket .head{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.cp-ticket .subject{font-weight:900}
.cp-ticket .meta{color:var(--muted);font-size:12px;margin-top:2px}
.cp-pill{
  background:var(--pill);
  color:#05331a;
  font-weight:900;
  font-size:12px;
  padding:6px 12px;
  border-radius:999px
}
.cp-ticket .thread{padding:14px 16px 10px}
.msg{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  margin:12px 0;
  background:#fff;
}
.msg.agent{border-left:4px solid #f59e0b}
.msg .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.msg .who{display:flex;align-items:center;gap:10px;font-weight:900}
.msg .who .miniava{width:28px;height:28px;border-radius:999px;background:#e5e7eb}
.msg .when{color:var(--muted);font-size:12px}
.msg .body{margin-top:10px;color:#111827;white-space:pre-wrap;line-height:1.45}

.cp-ticket .actions{
  padding:12px 16px 18px;
  display:flex;
  justify-content:center;
  gap:12px;
  border-top:1px dashed var(--line);
}
.cp-btn{
  border-radius:10px;
  border:1px solid var(--line);
  padding:10px 14px;
  background:#fff;
  font-weight:900;
}
.cp-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}

/* RIGHT CUSTOMER PANEL */
.cp-right{
  background:#eef1f8;
  border-left:1px solid var(--line);
  padding:14px;
  overflow:auto;

  /* UPDATE: nooit boven nav */
  position:relative;
  z-index:1;
}

/* Profile card */
.panel-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow2);
  padding:14px;
  margin-bottom:12px;
}
.panel-top{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.panel-top img{
  width:54px;
  height:54px;
  border-radius:14px;
  object-fit:cover;
  flex:0 0 auto;
}
.panel-name{font-weight:950;font-size:15px;line-height:1.15}
.panel-mail{
  color:#1f2f8a;
  font-weight:900;
  font-size:12px;
  line-height:1.2;
  margin-top:3px;
  word-break:break-word;
}
.panel-sub{
  color:rgba(15,23,42,.65);
  font-size:12px;
  margin-top:8px;
  line-height:1.25;
}
.panel-kebab{
  margin-left:auto;
  width:30px;height:30px;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:rgba(15,23,42,.55);
  background:#f3f4f6;
  border:1px solid rgba(15,23,42,.06);
}
.panel-kebab:hover{background:#eef2ff}

/* Sections (Bedrijfsgegevens / Privégegevens) */
.cp-section{margin-top:14px}
.cp-section-title{
  font-weight:950;
  font-size:12px;
  letter-spacing:.03em;
  text-transform:uppercase;
  margin:0 0 8px 2px;
  color:#0f172a;
}

/* The inner card like the screenshot */
.cp-section-card{
  background:#f5f7fb;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  padding:10px 12px;
  box-shadow:0 1px 0 rgba(15,23,42,.03);
}

/* Compact rows */
.cp-frow{padding:7px 0}
.cp-frow + .cp-frow{
  border-top:1px solid rgba(15,23,42,.06);
}
.cp-flabel{
  font-size:12px;
  line-height:1.1;
  font-weight:800;
  color:rgba(15,23,42,.68);
  margin-bottom:2px;
}
.cp-fvalue{
  font-size:14px;
  line-height:1.25;
  font-weight:950;
  color:#0f172a;
  word-break:break-word;
}
.cp-fvalue a{
  color:#0f172a;
  text-decoration:none;
}
.cp-fvalue a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Responsive */
@media (max-width: 1100px){
  .cp-main{grid-template-columns: var(--navw) 1fr}
  .cp-right{display:none}

  /* UPDATE: ook op tablet/mobile menu boven alles */
  .cp-nav{z-index:10010}
}
@media (max-width: 720px){
  .cp-topbar .tabs{display:none}
  .cp-center{padding:12px}
  .cp-ticket{border-radius:14px}
}
/* Edit icon button next to name */
.panel-action{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#f3f4f6;
  border:1px solid rgba(15,23,42,.06);
  color:rgba(15,23,42,.75);
  cursor:pointer;
  flex:0 0 auto;
}
.panel-action:hover{background:#eef2ff;color:#1f2f8a}

/* Modal */
.cp-modal.hidden{display:none}
.cp-modal{
  position:fixed;
  inset:0;
  z-index:9999;
}
.cp-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter: blur(2px);
}
.cp-modal-dialog{
  position:relative;
  width:min(720px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  margin: 0 auto;
  top: 100px;
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 24px 80px rgba(0,0,0,.30);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.cp-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid var(--line);
  background:#fbfcff;
}
.cp-modal-title{
  font-weight:950;
}
.cp-modal-x{
  width:36px;height:36px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.cp-modal-x:hover{background:#eef2ff;color:#1f2f8a}
.cp-modal-body{
  padding:14px;
  overflow:auto;
}
.cp-modal-foot{
  padding:12px 14px;
  border-top:1px solid var(--line);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  background:#fbfcff;
}
.cp-modal-msg{
  margin-right:auto;
  color:rgba(15,23,42,.70);
  font-weight:700;
  font-size:13px;
}

/* Edit form */
.cp-eform{display:block}
.cp-etabs{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.cp-etab{
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  color:rgba(15,23,42,.75);
}
.cp-etab.active{
  background:#eef2ff;
  border-color:#cdd6ff;
  color:#1f2f8a;
}
.cp-epanel{display:none}
.cp-epanel.active{display:block}

.cp-efield{
  margin:10px 0;
}
.cp-elabel{
  font-size:12px;
  font-weight:900;
  color:rgba(15,23,42,.72);
  margin-bottom:6px;
}
.cp-einput{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  outline:none;
  font-weight:800;
}
.cp-einput:focus{
  border-color:#c7cff6;
  box-shadow:0 0 0 4px rgba(31,47,138,.08);
}
.cp-einput[disabled]{
  background:#f3f4f6;
  color:rgba(15,23,42,.55);
}
/* ===== Tickets list view ===== */
.cp-loading{
  padding:18px;
  color:rgba(15,23,42,.70);
  font-weight:800;
}

.cp-listhead{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  background:#fff;
  border-radius:18px 18px 0 0;
}

.cp-addbtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#0ea5a6;
  color:#fff;
  font-weight:950;
  cursor:not-allowed;
  opacity:.55;
}
.cp-addbtn svg{stroke:#fff}

.cp-tablecard{
  background:#fff;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 18px 18px;
  overflow:hidden;
}

.cp-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}

.cp-table thead th{
  text-align:left;
  font-size:12px;
  letter-spacing:.02em;
  color:rgba(15,23,42,.70);
  font-weight:950;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:#fbfcff;
}

.cp-table tbody td{
  padding:12px 14px;
  border-bottom:1px solid rgba(15,23,42,.06);
  vertical-align:middle;
}

.cp-row{
  cursor:pointer;
}
.cp-row:hover td{
  background:#f5f7ff;
}

.cp-table .mono{
  font-variant-numeric: tabular-nums;
  font-weight:950;
  color:rgba(15,23,42,.75);
}

.cp-table .subj{
  font-weight:900;
  color:#0f172a;
}

.cp-status{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#1f2f8a;
  font-weight:950;
  font-size:12px;
}

.cp-table .act{
  text-align:right;
}

.cp-mini{
  width:32px;height:32px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  display:grid;
  place-items:center;
}
.cp-mini:hover{
  background:#eef2ff;
  border-color:#cdd6ff;
  color:#1f2f8a;
}

.cp-empty{
  padding:18px 14px;
  color:rgba(15,23,42,.65);
  font-weight:800;
}
/* ===== Tickets list view ===== */
.cp-loading{
  padding:18px;
  color:rgba(15,23,42,.70);
  font-weight:800;
}

.cp-listhead{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  background:#fff;
  border-radius:18px 18px 0 0;
}

.cp-addbtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#0ea5a6;
  color:#fff;
  font-weight:950;
  cursor:pointer;
}
.cp-addbtn svg{stroke:#fff}
.cp-addbtn:hover{filter:brightness(.98)}

.cp-tablecard{
  background:#fff;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 18px 18px;
  overflow:hidden;
}

.cp-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}

.cp-table thead th{
  text-align:left;
  font-size:12px;
  letter-spacing:.02em;
  color:rgba(15,23,42,.70);
  font-weight:950;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:#fbfcff;
}

.cp-table tbody td{
  padding:12px 14px;
  border-bottom:1px solid rgba(15,23,42,.06);
  vertical-align:middle;
}

.cp-row{cursor:pointer}
.cp-row:hover td{background:#f5f7ff}

.cp-table .mono{
  font-variant-numeric: tabular-nums;
  font-weight:950;
  color:rgba(15,23,42,.75);
}

.cp-table .subj{font-weight:900;color:#0f172a}

.cp-status{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#1f2f8a;
  font-weight:950;
  font-size:12px;
}

.cp-table .act{text-align:right}

.cp-mini{
  width:32px;height:32px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  display:grid;
  place-items:center;
}
.cp-mini:hover{
  background:#eef2ff;
  border-color:#cdd6ff;
  color:#1f2f8a;
}

.cp-empty{
  padding:18px 14px;
  color:rgba(15,23,42,.65);
  font-weight:800;
}

/* Pager */
.cp-pager{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  background:#fff;
}
.cp-pager-left{
  display:flex;
  gap:8px;
  align-items:center;
}
.cp-pbtn{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:900;
}
.cp-pbtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.cp-pagechip{
  min-width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#0ea5a6;
  color:#fff;
  font-weight:950;
}
.cp-pagesize{
  height:34px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.10);
  padding:0 10px;
  font-weight:900;
}
/* ===== Dashboard ===== */
.cp-dash{
  padding:16px;
}

.cp-dash-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:#fff;
  border-radius:18px 18px 0 0;
}

.cp-dash-title{
  font-weight:950;
  font-size:16px;
}
.cp-dash-sub{
  margin-top:4px;
  color:rgba(15,23,42,.65);
  font-weight:700;
  font-size:13px;
}

.cp-dash-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.cp-dash-actions .cp-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.cp-dash-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  padding:14px 0 0;
}

.cp-dash-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow2);
  padding:14px;
}

.cp-dash-kpi{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.k-label{
  color:rgba(15,23,42,.68);
  font-weight:900;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.k-value{
  font-weight:950;
  font-size:28px;
  line-height:1;
  color:#0f172a;
}
.k-hint{
  margin-top:10px;
  color:rgba(15,23,42,.65);
  font-weight:700;
  font-size:13px;
}

.cp-dash-split{
  display:grid;
  grid-template-columns: 1.4fr .8fr;
  gap:12px;
  margin-top:12px;
}

.cp-dash-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow2);
  padding:14px;
}

.cp-dash-panel-title{
  font-weight:950;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#0f172a;
  margin-bottom:10px;
}

.cp-dash-table{
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  overflow:hidden;
  background:#fbfcff;
}

.cp-dash-thead{
  display:grid;
  grid-template-columns: 110px 1fr 140px 170px;
  gap:0;
  padding:12px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
  font-weight:950;
  font-size:12px;
  color:rgba(15,23,42,.70);
}

.cp-dash-row{
  width:100%;
  border:0;
  text-align:left;
  background:#fff;
  padding:12px 12px;
  display:grid;
  grid-template-columns: 110px 1fr 140px 170px;
  gap:0;
  border-bottom:1px solid rgba(15,23,42,.06);
  cursor:pointer;
}
.cp-dash-row:hover{
  background:#f5f7ff;
}

.cp-dash-row .mono{
  font-variant-numeric: tabular-nums;
  font-weight:950;
  color:rgba(15,23,42,.75);
}
.cp-dash-row .subj{
  font-weight:900;
  color:#0f172a;
  padding-right:10px;
}
.cp-dash-row .muted{
  color:rgba(15,23,42,.65);
  font-weight:800;
  font-size:12px;
}

.cp-dash-empty{
  padding:14px;
  color:rgba(15,23,42,.65);
  font-weight:800;
}

.cp-dash-note{
  background:#f5f7fb;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  padding:12px;
}
.cp-dash-note-title{
  font-weight:950;
  margin-bottom:6px;
}
.cp-dash-note-text{
  color:rgba(15,23,42,.72);
  font-weight:700;
  line-height:1.35;
  font-size:13px;
}

/* Responsive dashboard */
@media (max-width: 1100px){
  .cp-dash-grid{grid-template-columns:1fr}
  .cp-dash-split{grid-template-columns:1fr}
  .cp-dash-thead{display:none}
  .cp-dash-row{
    grid-template-columns: 1fr;
    gap:6px;
  }
  .cp-dash-row .muted{font-size:12px}
}
.reply-box{
  margin-top:16px;
  display:flex;
  gap:12px;
  align-items:flex-end;
}

.reply-box textarea{
  flex:1;
  min-height:90px;
  padding:12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  font-family:inherit;
  resize:vertical;
}

.msg.customer{
  background:#f8fafc;
}

.msg.agent{
  background:#eef2ff;
}
/* ===== Ticket reply box ===== */
.cp-replywrap{
  margin-top:14px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
}

.cp-replyhead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.cp-replytitle{
  font-weight:800;
  font-size:14px;
}

.cp-replyhint{
  color:#6b7280;
  font-size:12px;
}

.cp-replygrid{
  display:grid;
  grid-template-columns: 1fr 140px;
  gap:12px;
  align-items:stretch;
}

.cp-reply{
  width:100%;
  resize:vertical;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  font:inherit;
  outline:none;
  background:#fff;
}

.cp-reply:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.cp-replysend{
  height:100%;
  border-radius:12px;
  font-weight:800;
}

.cp-replymsg{
  margin-top:10px;
  font-size:12px;
  color:#6b7280;
}

@media (max-width: 820px){
  .cp-replygrid{ grid-template-columns: 1fr; }
  .cp-replysend{ height:auto; padding:12px 14px; }
}
/* ===========================
   Bell wrapper
=========================== */

.cp-bell-wrapper {
    position: relative;
    display: inline-block;
}

.cp-bell {
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
    color: white;
}

/* Animatie rood/wit */

@keyframes bellPulse {
    0%   { color: white; }
    50%  { color: #ff2b2b; }
    100% { color: white; }
}

.cp-bell.alert {
    animation: bellPulse 1s infinite;
}

/* Badge */

.cp-bell-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: red;
    color: white;
    font-size: 10px;
    border-radius: 50%;
    padding: 3px 6px;
    display: none;
}

/* Tooltip */

.cp-bell-tooltip {
    position: absolute;
    top: 35px;
    right: 0;
    background: #1e1e1e;
    color: white;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 8px;
    white-space: nowrap;
    display: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.cp-bell {
  position: relative;
  transition: color 0.3s ease;
}

.cp-bell-alert {
  animation: bellPulse 1s infinite alternate;
  color: #ff3b3b;
}

@keyframes bellPulse {
  from { color: #ff3b3b; }
  to { color: #ffffff; }
}

.cp-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: red;
  color: #fff;
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.cp-bell-tooltip {
  position: absolute;
  top: 34px;
  right: 0;
  background: #111827;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  z-index: 100;
}