/* ===============================
   Zwoeger Profiel — Consolidated CSS
   Scoping: zoveel mogelijk onder .zwoeger-profiel-shell
   =============================== */

/* ---------- Layout / container ---------- */
/* 1) Basis */
/* ——— Reset/vars ——— */
:root{
  --zwc-bg:        #ff6a00;       /* basis oranje (match jouw merk) */
  --zwc-bg-hi:     #ff7f22;
  --zwc-bg-lo:     #e85700;
  --zwc-text:      #ffffff;
  --zwc-shadow:    0 12px 24px rgba(255,106,0,.35), 0 2px 6px rgba(0,0,0,.12);
  --zwc-border:    rgba(255,255,255,.22);
  --zwc-glow:      0 0 0 0 rgba(255,130,40,.6);
  --zwc-radius:    14px;
  --zwc-speed:     .22s;
}

/* ——— De nieuwe premium knop ——— */
.chat-open-knop.zw-cta{
  --pad-y: .9rem; --pad-x: 1.2rem;
  appearance: none;
  border: 0;
  border-radius: var(--zwc-radius);
  padding: var(--pad-y) var(--pad-x);
  font: 600 1.05rem/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--zwc-text);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.35), transparent 45%),
    linear-gradient(180deg, var(--zwc-bg-hi), var(--zwc-bg-lo));
  box-shadow: var(--zwc-shadow);
  display: inline-flex; align-items: center; gap: .6rem;
  cursor: pointer;
  position: relative;
  isolation: isolate; /* glow onder content */
  transform: translateZ(0); /* perf */
  transition:
    transform var(--zwc-speed) cubic-bezier(.2,.8,.2,1),
    box-shadow var(--zwc-speed), filter var(--zwc-speed), background var(--zwc-speed);
}

/* glossy rand + inner highlight */
.chat-open-knop.zw-cta::before{
  content:""; position:absolute; inset:0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  mix-blend-mode: screen; pointer-events:none;
  opacity:.9;
}

/* ambient glow ring */
.chat-open-knop.zw-cta::after{
  content:""; position:absolute; inset:-8px; border-radius: calc(var(--zwc-radius) + 8px);
  box-shadow: 0 0 0 0 rgba(255,130,40,.55);
  transition: box-shadow var(--zwc-speed);
  z-index:-1;
}

/* Icon + label */
.zw-cta__icon{
  display:inline-grid; place-items:center;
  width: 2.1rem; height:2.1rem;
  border-radius: 999px;
  background: radial-gradient(100% 100% at 30% 30%, #fff, #ffe7d8 60%, rgba(255,255,255,.2) 100%);
  color:#c24d00;
  box-shadow: inset 0 2px 6px rgba(255,255,255,.85), inset 0 -2px 6px rgba(194,77,0,.25);
  transform: translateZ(0);
  transition: transform var(--zwc-speed);
}
.zw-cta__label{ letter-spacing:.2px; }

/* Hover / Active */
.chat-open-knop.zw-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.05);
  box-shadow:
    0 16px 32px rgba(255,106,0,.4),
    0 3px 10px rgba(0,0,0,.14);
}
.chat-open-knop.zw-cta:hover::after{
  box-shadow: 0 0 0 10px rgba(255,130,40,.18);
}
.chat-open-knop.zw-cta:active{
  transform: translateY(0);
  filter: brightness(.98);
  box-shadow:
    0 8px 18px rgba(255,106,0,.3),
    0 2px 6px rgba(0,0,0,.18);
}
.chat-open-knop.zw-cta:active .zw-cta__icon{
  transform: scale(.94);
}

/* Pulse (je bestaande class blijft werken, maar hier mooier) */
.chat-open-knop.pulse-animatie{
  animation: zwPulse 1.8s ease-in-out infinite;
}
@keyframes zwPulse{
  0%{ box-shadow: var(--zwc-shadow); }
  55%{ box-shadow: 0 18px 36px rgba(255,106,0,.5), 0 0 0 12px rgba(255,130,40,.18); }
  100%{ box-shadow: var(--zwc-shadow); }
}

/* Focus zichtbaar en toegankelijk */
.chat-open-knop.zw-cta:focus-visible{
  outline: none;
  box-shadow:
    0 18px 36px rgba(255,106,0,.5),
    0 0 0 3px #fff,
    0 0 0 6px rgba(26,115,232,.55); /* blauw ringetje */
}

/* Reduced motion respecteren */
@media (prefers-reduced-motion: reduce){
  .chat-open-knop.zw-cta, .zw-cta__icon{ transition: none; }
  .chat-open-knop.pulse-animatie{ animation: none; }
}

/* Donkere modus (optioneel) */
@media (prefers-color-scheme: dark){
  :root{
    --zwc-bg:     #ff7a1a;
    --zwc-bg-hi:  #ff8d3b;
    --zwc-bg-lo:  #e76711;
    --zwc-shadow: 0 10px 24px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35);
    --zwc-border: rgba(255,255,255,.25);
  }
}

.zwoeger-profiel-shell .z-banner__left{ display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; }
.zwoeger-profiel-shell .z-banner__avatar{
  width:60px !important; height:60px !important; flex:0 0 60px !important;
  border-radius:50%; object-fit:cover; box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.zwoeger-profiel-shell .z-banner__text{ display:flex; flex-direction:column; min-width:0; }
.zwoeger-profiel-shell .z-banner__name{
  font-weight:800; font-size:1.05rem; line-height:1.2; color:#2a2a2a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.zwoeger-profiel-shell .z-banner__meta{
  margin-top:2px; color:#6e6e6e; font-weight:600; font-size:.95rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.zwoeger-profiel-shell .z-banner__actions{ display:flex; align-items:center; gap:8px; }
.zwo-inbox-row.is-unread::before{
  content:"";
  position:absolute;
  left:8px; top:50%;
  width:8px; height:8px; margin-top:-4px;
  border-radius:999px; background:currentColor;
}

/* ---------- Buttons ---------- */
.zwoeger-profiel-shell .z-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; border-radius:12px; padding:9px 12px; line-height:1;
  border:1.5px solid transparent; cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  user-select:none; font-size:.95rem;
}
.zwoeger-profiel-shell .z-btn--ghost{
  background:#fff; color:#6a5bd7; border-color:#cfc9ff;
  box-shadow:0 3px 10px rgba(106,91,215,.08);
}
.zwoeger-profiel-shell .z-btn--ghost:hover{
  background:#f7f6ff; box-shadow:0 5px 14px rgba(106,91,215,.15);
}
.zwoeger-profiel-shell .z-logout{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:#ec6608; color:#fff; text-decoration:none !important;
  box-shadow:0 6px 16px rgba(236,102,8,.25);
  transition: background .2s ease, transform .08s ease, box-shadow .2s ease;
}
.zwoeger-profiel-shell .z-logout:hover{ background:#d45506; box-shadow:0 8px 20px rgba(236,102,8,.35); }
.zwoeger-profiel-shell .z-logout:active{ transform: translateY(1px); }
/* Actieve geselecteerde inbox-rij: oranje bg + donkere tekst */
.zwo-inbox-row.active {
  background-color: #ff6a00 !important;   /* jouw oranje */
  border-color: #ff6a00 !important;
}

/* Zorg dat álle tekst in de actieve rij donker blijft */
.zwo-inbox-row.active,
.zwo-inbox-row.active * {
  color: #222 !important;
  fill: #222 !important; /* voor eventuele SVG-icoontjes */
}

/* Sub-tekst net iets lichter */
.zwo-inbox-row.active .zwo-inbox-row__company,
.zwo-inbox-row.active .zwo-inbox-lasttext { color: #333 !important; }

/* Tijd rechts nog iets donkerder */
.zwo-inbox-row.active .zwo-inbox-time { color: #111 !important; }

/* ---------- Accordions ---------- */
.zwoeger-profiel-shell .zw-acc{
  background:#fff; border:1px solid #eee; border-radius:14px; margin:10px 0; overflow:hidden;
}
.zwoeger-profiel-shell .zw-acc > summary{
  list-style:none; cursor:pointer; padding:14px 16px; font-weight:800;
  display:flex; align-items:center; justify-content:space-between;
}
.zwoeger-profiel-shell .zw-acc[open] > summary{ color:#6a5bd7; border-bottom:1px solid #f2f2f2; }
.zwoeger-profiel-shell .zw-acc-body{ padding:12px 16px 16px; }
.zwoeger-profiel-shell .zw-acc--sub > summary{ padding:12px 14px; }
.zwoeger-profiel-shell .zw-acc--sub .zw-acc-body{ padding:10px 14px 14px; }
.zwoeger-profiel-shell .zw-acc-body > .zw-acc-refresh{
  margin:0 0 10px 0; border:1px solid #ddd; background:#fafafa; border-radius:8px; padding:6px 10px; cursor:pointer;
}

/* ---------- Chat popup ---------- */
.zwoeger-profiel-shell .chat-popup-overlay{
  position:fixed; inset:0; display:flex; justify-content:center; align-items:center;
  background:rgba(0,0,0,.6); z-index:9999;
}
.zwoeger-profiel-shell .chat-popup-content{
  background:#fff; border-radius:16px; padding:30px; width:90%; max-width:1000px;
  max-height:90vh; overflow-y:auto; box-shadow:0 20px 40px rgba(0,0,0,.25);
  animation:popupZoom .2s ease-out; display:flex; flex-direction:column; position:relative;
}
.zwoeger-profiel-shell .chat-popup-close{
  position:absolute; top:16px; right:20px; font-size:20px; background:transparent; border:none; cursor:pointer;
}
@keyframes popupZoom{0%{transform:scale(.95);opacity:0}100%{transform:scale(1);opacity:1}}
body.chat-open{ overflow:hidden; height:100vh; }

/* ---------- Hoofdtabs bovenaan ---------- */
.zwoeger-profiel-shell .zwoeger-hoofdtabs-wrapper{
  position: relative;
  height: 65px;
  margin-top: 10px;
}
.zwoeger-profiel-shell .zwoeger-hoofdtabs-scroll{
  display:flex; align-items:center;
  overflow-x:auto; overflow-y:hidden;
  white-space:nowrap; height:60px;
  scrollbar-width:none; -ms-overflow-style:none; touch-action:pan-x;
  -webkit-overflow-scrolling:touch;
  padding-right:34px; /* ruimte voor fade/pijl */
}
.zwoeger-profiel-shell .zwoeger-hoofdtabs-scroll::-webkit-scrollbar{ display:none; }

.zwoeger-profiel-shell .zwoeger-tabs{
  display:flex; gap:10px; flex-wrap:nowrap;
  min-width:max-content;
  border-bottom:1px solid #ddd;
  margin-bottom:20px;
  padding-top:4px;
}
.zwoeger-profiel-shell .zwoeger-tabs button{
  padding:12px 24px;
  background:#f9f9f9;
  border:1px solid #ddd;
  border-bottom:none;
  border-radius:10px 10px 0 0;
  font-weight:500; color:#333; cursor:pointer;
  transition:all .3s ease;
  position:relative;
}
.zwoeger-profiel-shell .zwoeger-tabs button.active{
  background:#E25B00; color:#fff; font-weight:bold;
  border:1px solid #E25B00; border-bottom:none;
  margin-bottom:-1px; z-index:2;
}
.zwoeger-profiel-shell .zwoeger-tabs button[data-tab="facturen"]{ position:relative; }
.zwoeger-profiel-shell .tab-badge{
  position:absolute; top:2px; right:4px;
  background:#ff5c00; color:#fff; font-weight:bold; font-size:12px; line-height:1;
  padding:4px 7px; border-radius:999px; box-shadow:0 0 0 2px #fff; z-index:10; white-space:nowrap;
}
.zwoeger-profiel-shell .zwoeger-tab-content{ margin-top:-1px; position:relative; z-index:1; }

/* Hoofdtabs indicator (mobiel) */
.zwoeger-profiel-shell .hoofdtabs-indicator-right{ display:none; }
@media (max-width:768px){
  .zwoeger-profiel-shell .hoofdtabs-indicator-right{
    position:absolute; right:0; top:0; height:60px; width:34px;
    background:linear-gradient(to left, #f3f3f3 65%, rgba(243,243,243,0) 100%);
    display:flex; align-items:center; justify-content:center;
    font-size:20px; z-index:10; pointer-events:none;
  }
  .zwoeger-profiel-shell .hoofdtabs-indicator-right.is-hidden{ display:none; }
}

/* ---------- Subtabs (Klussen) ---------- */
.zwoeger-profiel-shell .klussen-subtabs-wrapper{ position:relative; margin-bottom:10px; }
.zwoeger-profiel-shell .klussen-subtabs-scroll{
  overflow-x:auto; white-space:nowrap; scrollbar-width:none; -ms-overflow-style:none; position:relative; z-index:1;
}
.zwoeger-profiel-shell .klussen-subtabs-scroll::-webkit-scrollbar{ display:none; }
.zwoeger-profiel-shell .subtab-nav{
  display:flex; gap:10px; padding-left:0; margin:0; list-style:none;
}
.zwoeger-profiel-shell .subtab-nav li{
  flex:0 0 auto; padding:8px 14px; background:#f0f0f0; border-radius:6px; font-size:14px;
  cursor:pointer; white-space:nowrap;
}
.zwoeger-profiel-shell .subtab-nav li.active{
  background:#fff; border:1px solid #ccc; border-bottom:none; margin-bottom:-1px;
  z-index:2; position:relative;
}
.zwoeger-profiel-shell .subtab-content{ display:none; }
.zwoeger-profiel-shell .subtab-content.active{
  display:block; background:#fff; border:1px solid #ccc; border-top:none; border-radius:0 5px 5px 5px; padding:20px; margin-top:-1px; position:relative; z-index:1;
}

/* Subtabs indicator (mobiel) */
.zwoeger-profiel-shell .klussen-subtabs-indicator{ display:none; }
@media (max-width:768px){
  .zwoeger-profiel-shell .klussen-subtabs-indicator{
    position:absolute; right:0; top:0; height:40px; width:28px;
    background:linear-gradient(to left, #fff 65%, rgba(255,255,255,0) 100%);
    display:flex; align-items:center; justify-content:center; font-size:18px; z-index:10;
    pointer-events:none;
  }
  .zwoeger-profiel-shell .klussen-subtabs-indicator.is-hidden{ display:none !important; }
  .zwoeger-profiel-shell .klussen-subtabs-scroll{ padding-right:28px; }
}

/* ---------- Badges / notificaties ---------- */
.zwoeger-profiel-shell .badge-nieuw{
  position:absolute; top:-4px; right:-8px; background:#f97316; width:10px; height:10px;
  border-radius:50%; display:inline-block; box-shadow:0 0 0 2px #fff;
}
.zwoeger-profiel-shell .badge-nieuw-klussen{
  position:absolute; top:6px; right:10px; width:10px; height:10px;
  background:#ff5c00; border-radius:50%; z-index:10; animation:pulseBadge 1.5s infinite; box-shadow:0 0 0 2px #fff;
}
@keyframes pulseBadge{
  0%{ box-shadow:0 0 0 0 rgba(255,92,0,.6); }
  70%{ box-shadow:0 0 0 10px rgba(255,92,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,92,0,0); }
}

/* ---------- Certificatenlijst (weergave) ---------- */
.zwoeger-profiel-shell .cert-list{ display:flex; flex-direction:column; gap:8px; }
.zwoeger-profiel-shell .cert-row{
  display:flex; justify-content:space-between; align-items:center;
  background:#f8f9fb; border:1px solid #e7eaef; padding:10px 12px; border-radius:8px;
}
.zwoeger-profiel-shell .cert-title{ font-weight:600; }
.zwoeger-profiel-shell .cert-meta a{ font-weight:600; }
.zwoeger-profiel-shell .muted{ opacity:.65; }

/* Expiry pill (view) */
.zwoeger-profiel-shell .cert-pill{ margin-left:8px; padding:2px 8px; border-radius:999px; font-size:12px; }
.zwoeger-profiel-shell .cert-pill.expiry-ok{ background:#e8f6ee; color:#0a7a3d; }
.zwoeger-profiel-shell .cert-pill.expiry-soon{ background:#fff4e5; color:#8a4b0f; }
.zwoeger-profiel-shell .cert-pill.expiry-expired{ background:#fde8e8; color:#9b1c1c; }

/* ---------- Certificaat upload kaarten (formulier) ---------- */
.zwoeger-profiel-shell .identiteit-upload-kaart{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px; margin:10px 0 18px;
}
.zwoeger-profiel-shell .identiteit-upload-kaart .id-kop{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.zwoeger-profiel-shell .identiteit-upload-kaart .id-badge{ margin-left:auto; padding:3px 8px; border-radius:999px; font-size:12px; border:1px solid transparent; }
.zwoeger-profiel-shell .identiteit-upload-kaart .badge-ok{ background:#e9f9ef; color:#147d3f; border-color:#c9f0d8; }
.zwoeger-profiel-shell .identiteit-upload-kaart .badge-pending{ background:#fff4e6; color:#8a4b00; border-color:#ffe3c2; }
.zwoeger-profiel-shell .identiteit-upload-kaart .badge-no{ background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
.zwoeger-profiel-shell .identiteit-upload-kaart .badge-unknown{ background:#f3f4f6; color:#374151; border-color:#e5e7eb; }
.zwoeger-profiel-shell .identiteit-upload-kaart .id-tekst{ margin:0 0 10px; color:#334155; }
.zwoeger-profiel-shell .identiteit-upload-kaart .id-acties{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.zwoeger-profiel-shell .identiteit-upload-kaart .id-upload-btn{
  appearance:none; border:1px solid #ff7a1a; background:#ff7a1a; color:#fff;
  padding:8px 12px; border-radius:8px; font-weight:600; cursor:pointer;
}
.zwoeger-profiel-shell .identiteit-upload-kaart .id-link{ color:#0ea5e9; text-decoration:none; }
.zwoeger-profiel-shell .identiteit-upload-kaart .id-link:hover{ text-decoration:underline; }
.zwoeger-profiel-shell .identiteit-upload-kaart .id-hint{
  margin-top:8px; font-size:13px; color:#92400e; background:#fff9f2; border:1px solid #ffe3c2; padding:8px; border-radius:8px;
}
.zwoeger-profiel-shell .identiteit-upload-kaart .id-ok-hint{
  margin-top:8px; font-size:13px; color:#065f46; background:#ecfdf5; border:1px solid #a7f3d0; padding:8px; border-radius:8px;
}

/* ---------- Vakgebieden (formulier) ---------- */
/* ---------- Vakgebieden (formulier) ---------- */
.zwoeger-profiel-shell .vakgebieden-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:18px;
  margin-top:14px;
}
.zwoeger-profiel-shell .vakgebied-blok{
  grid-column:span 6;
  background:#fff; border:1px solid #e9ecef; border-radius:14px; padding:14px;
  box-shadow:0 2px 10px rgba(18,38,63,.04);
  transition:border-color .2s, box-shadow .2s, transform .06s;
}
.zwoeger-profiel-shell .vakgebied-blok:hover{ border-color:#dbe4ff; box-shadow:0 6px 18px rgba(18,38,63,.08); }
.zwoeger-profiel-shell .vakgebied-blok:active{ transform:translateY(1px); }

@media (max-width:1024px){
  .zwoeger-profiel-shell .vakgebied-blok{ grid-column:span 12; }
}

.zwoeger-profiel-shell .vakgebied-kop{
  display:flex; align-items:center; gap:10px; margin-bottom:8px; font-weight:600;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:.6rem .8rem;
}
.zwoeger-profiel-shell .vakgebied-kop input[type="checkbox"]{ transform:scale(1.1); accent-color:#ff7a1a; }
.zwoeger-profiel-shell .vakgebied-status-badge{
  margin-left:auto; padding:3px 8px; border-radius:999px; font-size:12px; line-height:1; border:1px solid transparent;
}
.zwoeger-profiel-shell .vakgebied-status-badge.badge-ok{ background:#e9f9ef; color:#147d3f; border-color:#c9f0d8; }
.zwoeger-profiel-shell .vakgebied-status-badge.badge-pending{ background:#fff4e6; color:#8a4b00; border-color:#ffe3c2; }
.zwoeger-profiel-shell .vakgebied-toggle{ margin-left:auto; border:0; background:transparent; cursor:pointer; font-size:1rem; line-height:1; transition:transform .2s ease; }
.zwoeger-profiel-shell .vakgebied-toggle[aria-expanded="true"]{ transform:rotate(90deg); }
.zwoeger-profiel-shell .vakgebied-panel{ display:none; padding:.75rem .5rem .25rem; }
.zwoeger-profiel-shell .vakgebied-panel.is-open{ display:block; }

/* Specialisaties */
.zwoeger-profiel-shell .vakgebied-specialisaties{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:6px 14px; background:#fafbff; border:1px dashed #e1e6ff; border-radius:10px;
  padding:10px 12px; margin:8px 0 12px;
}
.zwoeger-profiel-shell .vakgebied-specialisaties label{
  display:flex; align-items:center; gap:8px; font-size:14px; color:#333;
}
.zwoeger-profiel-shell .vakgebied-specialisaties input[type="checkbox"]{ accent-color:#5a6cff; }

/* Certificaten per vakgebied */
.zwoeger-profiel-shell .vakgebied-certificaten{
  background:#fff; border:1px solid #edf2f7; border-radius:12px; padding:12px; margin-bottom:12px;
}
.zwoeger-profiel-shell .vakgebied-certificaten .cert-lijst{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 14px;
}
@media (max-width:900px){
  .zwoeger-profiel-shell .vakgebied-certificaten .cert-lijst{ grid-template-columns:1fr; }
}
.zwoeger-profiel-shell .cert-item{ border:1px solid #e9ecef; border-radius:10px; padding:10px 12px; background:#fcfcff; }
.zwoeger-profiel-shell .cert-item[data-cert-status="goedgekeurd"]{ background:#f1fcf4; border-color:#c9f0d8; }
.zwoeger-profiel-shell .cert-item[data-cert-status="in_afwachting"],
.zwoeger-profiel-shell .cert-item[data-cert-status="in-afwachting"]{ background:#fff9f2; border-color:#ffe3c2; }
.zwoeger-profiel-shell .cert-item[data-cert-status="afgewezen"]{ background:#fff1f1; border-color:#ffd1d1; }

/* ---------- TARIEVEN (ALTJD 1 PER RIJ) ---------- */

/* 1) Lijst met combinaties: altijd één kolom (volle breedte) */
.zwoeger-profiel-shell .vakgebied-tarieven .tarieven-lijst{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;

  /* neutraliseer generieke thema-regels */
  column-count:1 !important;
  columns:auto !important;
  column-width:auto !important;
}

/* 2) Elke combinatie (= card) pakt 100% breedte */
.zwoeger-profiel-shell .vakgebied-tarieven .tarieven-lijst > .tarief-combi{
  width:100% !important;
  max-width:100% !important;
  grid-column:1 / -1 !important;

  /* wint van .grid > * { flex-basis:50% } of vergelijkbaar */
  flex:0 0 100% !important;
}

/* 3) Interne layout binnen één combinatie */
.zwoeger-profiel-shell .tarief-combi{
  display:grid;
  grid-template-columns: 1.2fr 1.2fr 1.2fr repeat(5, 1fr) auto; /* samenstelling / voertuig / dag / nacht / za / zo / feestdag / verwijderen */
  gap:10px;
  padding:10px 12px;
  background:#fff; border:1px solid #e9ecef; border-radius:12px;
}
.zwoeger-profiel-shell .tarief-combi select,
.zwoeger-profiel-shell .tarief-combi input[type="number"]{
  width:100%; border:1px solid #e2e8f0; border-radius:8px; padding:8px 10px; font-size:14px; background:#fff;
}
.zwoeger-profiel-shell .verwijder-tariefregel{
  border:1px solid #ffe3e3; background:#fff5f5; color:#c81e1e;
  border-radius:10px; padding:8px 12px; font-weight:600; cursor:pointer;
}

/* 4) Mobiel: velden onder elkaar (maar nog steeds 1 card per rij) */
@media (max-width:1100px){
  .zwoeger-profiel-shell .tarief-combi{
    grid-template-columns:1fr !important;
  }
  .zwoeger-profiel-shell .tarief-combi > *{
    min-width:0; width:100%;
  }
}


/* Specialisaties */
.zwoeger-profiel-shell .vakgebied-specialisaties{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:6px 14px; background:#fafbff; border:1px dashed #e1e6ff; border-radius:10px;
  padding:10px 12px; margin:8px 0 12px;
}
.zwoeger-profiel-shell .vakgebied-specialisaties label{
  display:flex; align-items:center; gap:8px; font-size:14px; color:#333;
}
.zwoeger-profiel-shell .vakgebied-specialisaties input[type="checkbox"]{ accent-color:#5a6cff; }

/* Certificaten per vakgebied */
.zwoeger-profiel-shell .vakgebied-certificaten{
  background:#fff; border:1px solid #edf2f7; border-radius:12px; padding:12px; margin-bottom:12px;
}
.zwoeger-profiel-shell .vakgebied-certificaten .cert-lijst{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 14px;
}
@media (max-width:900px){
  .zwoeger-profiel-shell .vakgebied-certificaten .cert-lijst{ grid-template-columns:1fr; }
}
.zwoeger-profiel-shell .cert-item{
  border:1px solid #e9ecef; border-radius:10px; padding:10px 12px; background:#fcfcff;
  transition:border-color .15s, background .15s;
}
.zwoeger-profiel-shell .cert-item[data-cert-status="goedgekeurd"]{ background:#f1fcf4; border-color:#c9f0d8; }
.zwoeger-profiel-shell .cert-item[data-cert-status="in_afwachting"],
.zwoeger-profiel-shell .cert-item[data-cert-status="in-afwachting"]{ background:#fff9f2; border-color:#ffe3c2; }
.zwoeger-profiel-shell .cert-item[data-cert-status="afgewezen"]{ background:#fff1f1; border-color:#ffd1d1; }

.zwoeger-profiel-shell .cert-kop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.zwoeger-profiel-shell .cert-kop strong{ font-size:14px; color:#1f2937; }
.zwoeger-profiel-shell .cert-status-ind{ font-size:12px; color:#6b7280; padding:2px 8px; border-radius:999px; background:#f3f4f6; }
.zwoeger-profiel-shell .cert-acties{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.zwoeger-profiel-shell .cert-upload{
  display:inline-block; border:1px solid #e2e8f0; background:#fff; border-radius:8px; padding:6px 8px; font-size:13px; max-width:100%;
}
.zwoeger-profiel-shell .cert-opslaan-btn{
  appearance:none; border:1px solid #ff7a1a; background:#ff7a1a; color:#fff;
  padding:8px 12px; border-radius:9px; font-weight:600; cursor:pointer; transition:filter .15s, transform .06s;
}
.zwoeger-profiel-shell .cert-opslaan-btn:hover{ filter:brightness(1.05); }
.zwoeger-profiel-shell .cert-opslaan-btn:active{ transform:translateY(1px); }
.zwoeger-profiel-shell .cert-opslaan-btn[disabled]{ opacity:.65; cursor:not-allowed; filter:grayscale(.2); }
.zwoeger-profiel-shell .cert-link{ font-size:13px; color:#0ea5e9; text-decoration:none; }
.zwoeger-profiel-shell .cert-link:hover{ text-decoration:underline; }
.zwoeger-profiel-shell .cert-hint, .zwoeger-profiel-shell .cert-toelichting{ margin-top:10px; font-size:13px; color:#6b7280; }

/* ---------- Tarieven combi ---------- */
.zwoeger-profiel-shell .tarief-combi{
  display:grid; grid-template-columns:1.2fr 1.2fr 1.2fr repeat(5,1fr) auto;
  gap:10px; padding:10px 12px; background:#fff; border:1px solid #e9ecef; border-radius:12px; margin-bottom:10px;
}
.zwoeger-profiel-shell .tarief-combi select,
.zwoeger-profiel-shell .tarief-combi input[type="number"]{
  width:100%; border:1px solid #e2e8f0; border-radius:8px; padding:8px 10px; font-size:14px; background:#fff;
}
.zwoeger-profiel-shell .verwijder-tariefregel{
  border:1px solid #ffe3e3; background:#fff5f5; color:#c81e1e; border-radius:10px; padding:8px 12px; font-weight:600; cursor:pointer;
}
@media (max-width:1100px){
  .zwoeger-profiel-shell .tarief-combi{ grid-template-columns:1fr 1fr; }
}

/* ---------- Algemeen knop-stijl ---------- */
.zwoeger-profiel-shell .edit-button,
.zwoeger-profiel-shell .pak-aan-btn{
  appearance:none; border:1px solid #ff7a1a; background:#ff7a1a; color:#fff;
  padding:10px 14px; border-radius:12px; font-weight:700; cursor:pointer;
  transition:filter .15s, transform .06s, box-shadow .15s;
}
.zwoeger-profiel-shell .edit-button:hover,
.zwoeger-profiel-shell .pak-aan-btn:hover{ filter:brightness(1.05); }
.zwoeger-profiel-shell .edit-button:active,
.zwoeger-profiel-shell .pak-aan-btn:active{ transform:translateY(1px); }
.zwoeger-profiel-shell .pak-aan-btn.disabled,
.zwoeger-profiel-shell .pak-aan-btn[disabled]{
  background:#e5e7eb !important; border-color:#e5e7eb !important; color:#6b7280 !important; cursor:not-allowed !important; pointer-events:none !important;
}

/* ---------- Kaartje (preview ‘Zo zien opdrachtgevers jou’) ---------- */
.zwoeger-profiel-shell .zwoeger-kaartje{
  background:#E25B00; border-radius:20px; padding:0; overflow:hidden; position:relative; z-index:1; max-width:360px; margin:20px auto; font-family:sans-serif;
}
.zwoeger-profiel-shell .zwoeger-kaartje .kaart-binnenkant{
  background:#fff; padding:20px 20px 14px; border-radius:20px; box-shadow:0 8px 16px rgba(0,0,0,.1); transition:border-radius .3s ease;
}
.zwoeger-profiel-shell .zwoeger-kaartje .kaart-binnenkant.kaart-open{ border-radius:20px !important; }
.zwoeger-profiel-shell .zwoeger-kaartje .uitnodig-knop{
  background:#E25B00; border-bottom-left-radius:20px; border-bottom-right-radius:20px;
  margin:0; position:relative; z-index:2; color:#fff; font-weight:bold; font-size:18px; text-align:center; padding:16px; cursor:pointer;
}
.zwoeger-profiel-shell .foto-preview-wrapper{
  position:relative; width:70px; height:70px; border-radius:50%; border:6px solid #E25B00; overflow:hidden; margin-right:15px; cursor:pointer;
}
.zwoeger-profiel-shell .foto-preview-wrapper img{
  width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;
}
.zwoeger-profiel-shell .foto-preview-wrapper .hover-duim{
  position:absolute; inset:0; background:rgba(255,255,255,.6); color:#E25B00; font-size:28px; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; pointer-events:none; font-weight:bold; border-radius:50%;
}
.zwoeger-profiel-shell .foto-preview-wrapper:hover .hover-duim{ opacity:1; }

/* ---------- Loader ---------- */
.zwoeger-profiel-shell #zwoeger-loader{
  display:none; justify-content:center; align-items:center; flex-direction:column; padding:20px;
}
.zwoeger-profiel-shell #zwoeger-loader.active{ display:flex !important; }

/* ---------- Utilities ---------- */
.zwoeger-profiel-shell .plusje{ color:#9ca3af; margin:0 6px; }
.zwoeger-profiel-shell .emoji-icon{ width:22px; height:22px; vertical-align:middle; }

/* ---------- Mobiel tweaks ---------- */
@media (max-width:560px){
  .zwoeger-profiel-shell .z-banner{ padding:10px 12px; border-radius:12px; }
  .zwoeger-profiel-shell .z-banner__avatar{ width:52px !important; height:52px !important; }
  .zwoeger-profiel-shell .z-btn{ padding:7px 10px; font-size:.9rem; }
  .zwoeger-profiel-shell .z-logout{ width:36px; height:36px; }
  .zwoeger-profiel-shell .z-banner__name{ font-size:1rem; }
  .zwoeger-profiel-shell .z-banner__meta{ font-size:.9rem; }
}

/* ---------- Certificaten-badges (canoniek) ---------- */
.zwoeger-profiel-shell .certificaat-badges{
  display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding-bottom:4px; margin:12px 0; scrollbar-width:none;
}
.zwoeger-profiel-shell .certificaat-badges::-webkit-scrollbar{ display:none; }
.zwoeger-profiel-shell .cert-badge{
  position:relative; flex:0 0 auto; display:inline-block;
  padding:4px 10px 4px 28px; font-size:.8rem; font-weight:600;
  border-radius:20px; border:1px solid #ccc; background:#fff;
  white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis;
}
.zwoeger-profiel-shell .badge-icon{
  position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:.9rem; line-height:1;
}
.zwoeger-profiel-shell .badge-actief{ background:#dcfce7; color:#15803d; border-color:#15803d; }
.zwoeger-profiel-shell .badge-wacht{ background:#fef9c3; color:#92400e; border-color:#facc15; }
.zwoeger-profiel-shell .badge-inactief{ background:#fee2e2; color:#b91c1c; border-color:#b91c1c; }
@media (max-width:420px){
  .zwoeger-profiel-shell .cert-badge{ font-size:.7rem; padding:3px 6px 3px 24px; max-width:120px; }
}



/* ===============================
   Zwoeger – Banner + Accordions
   (drop-in vervanging / enhancers)
   =============================== */

.zwoeger-profiel-shell{
  --zw-bg:#ffffff;
  --zw-border:#e9eef3;
  --zw-soft:#f6f8fb;
  --zw-text:#1f2937;
  --zw-muted:#6b7280;
  --zw-brand:#E25B00;
  --zw-brand-2:#6a5bd7;
  --zw-shadow:0 10px 30px rgba(16,24,40,.08);
}

/* ===== Banner ===== */
.zwoeger-profiel-shell .z-banner{
  position: sticky;
  top: 0;
  z-index: 1200;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--zw-bg);
  border: 1px solid var(--zw-border);
  border-radius: 16px;
  box-shadow: var(--zw-shadow);
  backdrop-filter: blur(6px);
}

body.admin-bar .zwoeger-profiel-shell .z-banner{ top: 46px; }
@media (min-width:783px){
  body.admin-bar .zwoeger-profiel-shell .z-banner{ top: 32px; }
}

.zwoeger-profiel-shell .z-banner__left{ display:flex; align-items:center; gap:12px; min-width:0; }
.zwoeger-profiel-shell .z-banner__avatar{
  width:64px; height:64px; border-radius:50%;
  object-fit:cover; flex:0 0 64px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.zwoeger-profiel-shell .z-banner__text{ min-width:0; }
.zwoeger-profiel-shell .z-banner__name{
  font-weight:800; color:var(--zw-text);
  font-size:1.1rem; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.zwoeger-profiel-shell .z-banner__meta{
  margin-top:2px; color:var(--zw-muted); font-weight:600; font-size:.95rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Banner acties */
.zwoeger-profiel-shell .z-banner__actions{ display:flex; align-items:center; gap:10px; }
.zwoeger-profiel-shell .z-btn{
  display:inline-flex; align-items:center; gap:8px; user-select:none;
  padding:10px 12px; border-radius:12px; font-weight:700; font-size:.95rem;
  border:1.5px solid #dcd7ff; color:var(--zw-brand-2); background:#fff;
  box-shadow:0 4px 12px rgba(106,91,215,.10);
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.zwoeger-profiel-shell .z-btn:hover{ background:#f7f6ff; box-shadow:0 6px 18px rgba(106,91,215,.18); }
.zwoeger-profiel-shell .z-btn:active{ transform: translateY(1px); }

.zwoeger-profiel-shell .z-logout{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--zw-brand); color:#fff; text-decoration:none !important;
  box-shadow:0 8px 20px rgba(226,91,0,.28);
  transition: filter .15s ease, transform .06s ease;
}
.zwoeger-profiel-shell .z-logout:hover{ filter: brightness(1.05); }
.zwoeger-profiel-shell .z-logout:active{ transform: translateY(1px); }

/* Mobiel banner tweaks */
@media (max-width:560px){
  .zwoeger-profiel-shell .z-banner{ padding:12px 14px; gap:10px; }
  .zwoeger-profiel-shell .z-banner__avatar{ width:56px; height:56px; flex-basis:56px; }
  .zwoeger-profiel-shell .z-banner__name{ font-size:1rem; }
  .zwoeger-profiel-shell .z-banner__meta{ font-size:.9rem; }
  .zwoeger-profiel-shell .z-btn{ padding:8px 10px; font-size:.9rem; }
  .zwoeger-profiel-shell .z-logout{ width:38px; height:38px; }
}

/* ===== Accordions (details/summary) ===== */
.zwoeger-profiel-shell .zw-acc{
  border:1px solid var(--zw-border);
  border-radius:14px;
  background:#fff;
  margin:12px 0;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.04);
}
.zwoeger-profiel-shell .zw-acc > summary{
  list-style:none; cursor:pointer; position:relative;
  padding:14px 16px; font-weight:800; color:var(--zw-text);
  display:flex; align-items:center; gap:10px;
}
.zwoeger-profiel-shell .zw-acc > summary::-webkit-details-marker{ display:none; }

/* Chevron */
.zwoeger-profiel-shell .zw-acc > summary::after{
  content:""; margin-left:auto; width:10px; height:10px;
  border-right:2px solid #94a3b8; border-bottom:2px solid #94a3b8;
  transform: rotate(-45deg); transition: transform .2s ease;
}
.zwoeger-profiel-shell .zw-acc[open] > summary{ color:#503bd6; border-bottom:1px solid #f0f2f6; background:var(--zw-soft); }
.zwoeger-profiel-shell .zw-acc[open] > summary::after{ transform: rotate(45deg); }

/* Body + smooth open */
.zwoeger-profiel-shell .zw-acc-body{
  padding:0 16px 16px;
}
.zwoeger-profiel-shell .zw-acc .zw-acc-body > .zw-acc-loader{
  background:linear-gradient(90deg,#f7f9fc, #fff); border:1px dashed var(--zw-border);
  padding:10px; border-radius:10px; color:var(--zw-muted);
}

/* Sub-accordions iets compacter */
.zwoeger-profiel-shell .zw-acc--sub > summary{ padding:12px 14px; }
.zwoeger-profiel-shell .zw-acc--sub .zw-acc-body{ padding:10px 14px 14px; }

/* Focus states (toetsenbord) */
.zwoeger-profiel-shell .zw-acc > summary:focus-visible{
  outline:2px solid #c7d2fe; outline-offset:2px; border-radius:10px;
}

/* ===== Hoofdtabs (boven de accordions) – visuele polish ===== */
.zwoeger-profiel-shell .zwoeger-tabs{
  display:flex; gap:8px; border-bottom:1px solid var(--zw-border);
  margin:8px 0 16px; padding-top:4px;
}
.zwoeger-profiel-shell .zwoeger-tabs button{
  padding:10px 16px; border:1px solid var(--zw-border); border-bottom:none;
  background:#f9fafb; color:#374151; border-radius:10px 10px 0 0; font-weight:600;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.zwoeger-profiel-shell .zwoeger-tabs button.active{
  background:var(--zw-brand); color:#fff; border-color:var(--zw-brand);
  box-shadow:0 6px 14px rgba(226,91,0,.18); position:relative; z-index:2;
}
.zwoeger-profiel-shell .zwoeger-tab-content{ position:relative; z-index:1; }
/* ===== Chat popup (ongeacht plek in DOM) ===== */
.chat-popup-overlay{
  position: fixed;
  inset: 0;
  display: none;                 /* default dicht */
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.6);
  z-index: 2147483000;           /* altijd boven alles */
}
.chat-popup-overlay.is-open{      /* state toggle */
  display: flex;
}

.chat-popup-content{
  background:#fff;
  border-radius:16px;
  padding:30px;
  width:90%;
  max-width:1000px;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
  position:relative;
  animation: popupZoom .2s ease-out;
}
.chat-popup-close{
  position:absolute; top:16px; right:20px;
  font-size:20px; background:transparent; border:none; cursor:pointer;
}
@keyframes popupZoom{0%{transform:scale(.95);opacity:0}100%{transform:scale(1);opacity:1}}

/* body lock wanneer open */
.chat-open {
  overflow: hidden;
  height: 100vh;
}
/* TARIEVEN – container: altijd één kolom */
.zwoeger-profiel-shell .vakgebied-tarieven .tarieven-lijst{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;

  /* neutraliseer theme-trucs */
  column-count: 1 !important;
  columns: auto !important;
  column-width: auto !important;
}

/* elke combinatie (= card) volle breedte */
.zwoeger-profiel-shell .vakgebied-tarieven .tarieven-lijst > .tarief-combi{
  width: 100% !important;
  max-width: 100% !important;
  grid-column: 1 / -1 !important;
  flex: 0 0 100% !important;   /* wint van .grid > * { flex:0 0 50% } */
}

/* binnen één combinatie: op mobiel stapelen */
@media (max-width: 1100px){
  .zwoeger-profiel-shell .tarief-combi{
    grid-template-columns: 1fr !important;
  }
  .zwoeger-profiel-shell .tarief-combi > *{
    min-width: 0; width: 100%;
  }
}
/* 1) Vakgebieden: altijd één per rij */
body .zwoeger-profiel-shell .vakgebieden-grid{
  grid-template-columns: 1fr !important;
}
body .zwoeger-profiel-shell .vakgebieden-grid .vakgebied-blok{
  grid-column: 1 / -1 !important;   /* i.p.v. span 6 */
}

/* 2) Tarieven-lijst: elke combinatie volle breedte, nooit 2 naast elkaar */
body .zwoeger-profiel-shell .vakgebied-tarieven .tarieven-lijst{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;

  /* neutraliseer eventuele theme “columns/flex” trucs */
  column-count: 1 !important;
  columns: auto !important;
  column-width: auto !important;
}
body .zwoeger-profiel-shell .vakgebied-tarieven .tarieven-lijst > .tarief-combi{
  width: 100% !important;
  max-width: 100% !important;
  grid-column: 1 / -1 !important;
  flex: 0 0 100% !important;
}

/* 3) Binnen één tarief-combi op smalle schermen stapelen */
@media (max-width:1100px){
  body .zwoeger-profiel-shell .tarief-combi{
    grid-template-columns: 1fr !important;
  }
  body .zwoeger-profiel-shell .tarief-combi > *{
    min-width: 0; width: 100%;
  }
}
/* ==== 1) Vakgebieden altijd 1 per rij ==== */
body .zwoeger-profiel-shell .vakgebieden-grid{
  grid-template-columns: 1fr !important;
}
body .zwoeger-profiel-shell .vakgebieden-grid .vakgebied-blok{
  grid-column: 1 / -1 !important;   /* i.p.v. span 6 */
}

/* ==== 2) Tarieven-lijst: 1 combi per rij ==== */
body .zwoeger-profiel-shell .vakgebied-tarieven .tarieven-lijst{
  /* maak container 'neutraal' */
  display: block !important;             /* overridet flex/grid van theme */
  column-count: initial !important;      /* overridet CSS-columns */
  columns: initial !important;
  column-width: initial !important;
  gap: 0 !important;                      /* laat spacing aan de cards zelf */
}

/* elk kind item volledige breedte, ongeacht theme-regels */
body .zwoeger-profiel-shell .vakgebied-tarieven .tarieven-lijst > *{
  float: none !important;                 /* neutraliseer .grid .col float */
  width: 100% !important;                 /* neutraliseer width:50%/flex-basis */
  max-width: 100% !important;
  flex: 0 0 100% !important;              /* neutraliseer flex-50% */
  grid-column: 1 / -1 !important;         /* als container toch grid is */
}

/* de card zelf (mag intern gewoon grid blijven) */
body .zwoeger-profiel-shell .tarief-combi{
  display: grid; 
  grid-template-columns: 1.2fr 1.2fr 1.2fr repeat(5,1fr) auto;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  margin-bottom: 10px;
}

/* smal scherm: velden onder elkaar */
@media (max-width:1100px){
  body .zwoeger-profiel-shell .tarief-combi{
    grid-template-columns: 1fr !important;
  }
  body .zwoeger-profiel-shell .tarief-combi > *{
    min-width: 0; width: 100%;
  }
}
/* Profielsecties: altijd 2 kolommen binnen onze shell */
.zwoeger-profiel-shell .profiel-sectie-container{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px;
  grid-auto-flow: row; /* zeker weten dat items per rij vullen */
}

/* Mobiel gewoon stapelen */
@media (max-width: 900px){
  .zwoeger-profiel-shell .profiel-sectie-container{
    grid-template-columns: 1fr !important;
  }
}

/* Een sectie die volle breedte moet pakken */
.zwoeger-profiel-shell .profiel-sectie--full{
  grid-column: 1 / -1 !important;
}
.meest-actief-lijst{display:flex;flex-direction:column;gap:10px;margin:10px 0 22px}
.meest-actief-lijst label{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.meest-actief-lijst input[type=radio]{transform:scale(1.1)}
.meest-actief-lijst .opt-tekst{color:#374151}
.meest-actief-lijst .opt-tekst b{color:#111827}
/* ---------- Chat overlay/panel ---------- */
.zw-chat__overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9999}
.zw-chat__panel{background:#fff;width:min(96vw,720px);height:min(90vh,820px);border-radius:14px;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden}
.zw-chat__header{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid #eee}
.zw-chat__back,.zw-chat__close{border:none;background:none;font-size:22px;cursor:pointer;line-height:1;padding:6px 8px}
.zw-chat__title{display:flex;align-items:center;gap:10px;min-width:0}
.zw-chat__title-btn{border:none;background:none;text-align:left;padding:0;cursor:pointer;min-width:0}
.zw-chat__title-name{display:block;font-weight:600;line-height:1.1;max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zw-chat__title-sub{display:block;font-size:.85em;color:#777;margin-top:2px;max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.zw-chat__messages{flex:1;overflow:auto;background:#fafafa;padding:12px}
.zw-chat__composer{display:flex;gap:8px;padding:10px;border-top:1px solid #eee;background:#fff}
.zw-chat__input{flex:1;resize:none;border:1px solid #ddd;border-radius:10px;padding:10px 12px}
.zw-chat__send{border:none;background:#E25B00;color:#fff;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}

/* ---------- Message rows ---------- */
.zw-chat__row{display:flex;gap:8px;margin:6px 0;align-items:flex-end}
.zw-chat__row.is-own{flex-direction:row-reverse}
.zw-chat__side{display:flex}
.zw-avatar{display:block;border-radius:999px;object-fit:cover}
.zw-avatar--ph{display:inline-block;border-radius:999px;background:#ddd}

.zw-chat__bubble{max-width:70%;background:#fff;border:1px solid #eee;border-radius:12px;padding:8px 10px;box-shadow:0 1px 1px rgba(0,0,0,.02)}
.zw-chat__row.is-own .zw-chat__bubble{background:#F6F8FF;border-color:#E6EAFF}
.zw-chat__meta-line{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px}
.zw-chat__meta-name{font-weight:600;font-size:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%}
.zw-chat__meta-time{font-size:.8em;color:#999;white-space:nowrap}
.zw-chat__text{word-wrap:break-word;white-space:pre-wrap;line-height:1.35}

/* ---------- Inbox overlay/list ---------- */
.zwo-inbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9999}
.zwo-inbox{background:#fff;width:min(96vw,960px);height:min(90vh,820px);border-radius:14px;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden}
.zwo-inbox__topbar{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee}
.zwo-inbox__close{border:none;background:none;font-size:22px;cursor:pointer;line-height:1}
.zwo-inbox__list{flex:1;overflow:auto}
.zwo-inbox__loading,.zwo-inbox__empty{padding:24px;color:#666}

.zwo-inbox-row{display:flex;gap:12px;width:100%;text-align:left;padding:12px 14px;background:#fff;border:none;border-bottom:1px solid #f1f1f1;cursor:pointer;position:relative}
.zwo-inbox-row:hover{background:#fafafa}
.zwo-inbox-row__left{display:flex;align-items:center}
.zwo-inbox-row__center{flex:1;min-width:0}
.zwo-inbox-row__right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:52px}
.zwo-inbox-row__title{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.zwo-inbox-row__name{font-weight:600}
.zwo-inbox-row__company{font-size:.9em;color:#777}
.zwo-inbox-lasttext{color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Unread pulse (compat met bestaande markThreadUnread) ---------- */
.zwo-unread-dot{width:9px;height:9px;border-radius:50%;background:#E25B00;box-shadow:0 0 0 2px #fff;opacity:.25;transition:opacity .2s}
.zwo-inbox-row.pulse-animatie .zwo-unread-dot{opacity:1;animation:zwo-pulse 1.8s ease-out infinite}
@keyframes zwo-pulse {
  0%{box-shadow:0 0 0 2px #fff, 0 0 0 0 rgba(226,91,0,.45)}
  70%{box-shadow:0 0 0 2px #fff, 0 0 0 10px rgba(226,91,0,0)}
  100%{box-shadow:0 0 0 2px #fff, 0 0 0 0 rgba(226,91,0,0)}
}
/* ===== Gedeelde afmetingen voor chat & inbox ===== */
:root{
  --zwo-chat-w: 420px;   /* desktop breedte */
  --zwo-chat-h: 620px;   /* desktop hoogte */
}

/* Overlay: centreren en vastzetten */
.zw-chat__overlay,
.zwo-inbox-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 12px; /* kleine marge voor kleine schermen */
}

/* Paneel: dezelfde “doos” voor beide */
.zw-chat__panel,
.zwo-inbox{
  width: var(--zwo-chat-w);
  height: var(--zwo-chat-h);
  max-width: min(95vw, var(--zwo-chat-w));
  max-height: min(90vh, var(--zwo-chat-h));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;      /* voorkomt groeien door inhoud */
  box-sizing: border-box;
}

/* Kopbalken: vaste hoogte zodat niets verspringt */
.zw-chat__header,
.zwo-inbox__topbar{
  flex: 0 0 56px;        /* vaste kophoogte */
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid #eee;
}

/* Lijsten / inhoud: altijd binnen dezelfde doos scrollen */
.zw-chat__messages,
.zwo-inbox__list{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}

/* Composer (onderbalk) ook vaste hoogte */
.zw-chat__composer{
  flex: 0 0 auto;
  border-top: 1px solid #eee;
  padding: 10px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.zw-chat__input{
  flex: 1 1 auto;
  min-height: 40px;      /* vaste minima */
  max-height: 120px;     /* niet groter dan dit → geen popup-resize */
  resize: none;
}
.zw-chat__send{ flex: 0 0 auto; }

/* Inbox-rijen: geen hoogte-invloed buiten de list */
.zwo-inbox-row{
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-bottom: 1px solid #f2f2f2;
  background: #fff;
}
.zwo-inbox-row__left { align-self: start; }
.zwo-inbox-row__center{ overflow: hidden; }
.zwo-inbox-lasttext{ 
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Avatars consistent zodat kopbalk niet springt */
.zw-avatar{
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; flex: 0 0 36px;
}

/* Chatbubbels breken binnen hun container (geen reflow) */
.zw-chat__bubble{
  max-width: 75%;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Knoppen in kopbalk hebben vaste breedte (voorkomt ‘jitter’) */
.zw-chat__back, .zw-chat__close, #zwoInboxClose{
  width: 36px; height: 36px; display: grid; place-items: center;
}

/* Mobiel: zelfde verhouding, maar wat compacter */
@media (max-width: 520px){
  :root{
    --zwo-chat-w: 94vw;   /* volgt viewport */
    --zwo-chat-h: 80vh;   /* idem */
  }
  .zw-chat__panel, .zwo-inbox{
    border-radius: 14px;
  }
  .zw-chat__header, .zwo-inbox__topbar{
    flex-basis: 52px; min-height: 52px;
  }
}
@media (min-width: 901px){
  .zw-messenger__list{ width: 30% !important; }
  .zw-messenger__chat{ width: 70% !important; }
}
/* === Chat header menu === */
.zw-chat-header {
  position: relative;
}

.zw-chat-actions {
  position: relative;
  margin-left: 6px;
}

.js-chat-menu {
  font-size: 20px;
  line-height: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  color: #444;
}

.js-chat-menu:hover {
  color: #ff6a00; /* accentkleur */
}

/* Dropdown */
.zw-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  min-width: 220px;
  display: none;
  z-index: 9999;
}

.zw-menu__item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  border: 0;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}

.zw-menu__item:hover {
  background: #f5f5f5;
}

.zw-menu__item.js-block-user {
  color: #b00020;
}

.zw-menu__item.js-unblock-user {
  color: #006600;
}
/* === ZWO Mobile hotfix (plaats onderaan) === */

/* 1) Tabs mogen krimpen en scrollen */
.zwoeger-profiel-shell .zwoeger-tabs {
  min-width: 0 !important;           /* i.p.v. max-content */
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.zwoeger-profiel-shell .zwoeger-tabs button {
  padding: 10px 14px !important;      /* iets compacter op mobiel */
  flex: 0 0 auto;
}

/* 2) Subtab-container en tab-content mogen 100% breed zijn */
.zwoeger-profiel-shell .zwoeger-tab-content,
.zwoeger-profiel-shell .subtab-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible;                   /* geen rare knijp */
}

/* 3) Voorkom 'min-content squeeze' in flex/grid lijnen */
.zwoeger-profiel-shell .zw-acc-body,
.zwoeger-profiel-shell .profiel-sectie-container > *,
.zwoeger-profiel-shell .subtab-content > *,
.zwoeger-profiel-shell .subtab-content .row,
.zwoeger-profiel-shell .subtab-content [class*="col"],
.zwoeger-profiel-shell .subtab-content [class*="grid"] {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* 4) Kaarten/lijsten in klussen altijd volle breedte */
.zwoeger-profiel-shell .subtab-content .card,
.zwoeger-profiel-shell .subtab-content .item,
.zwoeger-profiel-shell .vakgebied-blok,
.zwoeger-profiel-shell .tarieven-lijst > * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* 5) Tekstbreking netjes (geen verticale datumkolommen) */
.zwoeger-profiel-shell .subtab-content {
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* 6) Profiel-secties: op echt smal scherm altijd 1 kolom */
@media (max-width: 600px){
  .zwoeger-profiel-shell .profiel-sectie-container {
    grid-template-columns: 1fr !important;
  }
}

/* 7) Verwijder resterende kolom/floats van het theme binnen tarieven */
.zwoeger-profiel-shell .vakgebied-tarieven .tarieven-lijst {
  display: block !important;
  column-count: initial !important;
  columns: initial !important;
  column-width: initial !important;
  gap: 0 !important;
}
.zwoeger-profiel-shell .vakgebied-tarieven .tarieven-lijst > * {
  float: none !important;
  flex: 0 0 100% !important;
  grid-column: 1 / -1 !important;
}

/* 8) Extra: sticky banner wat compacter op mobiel */
@media (max-width: 560px){
  .zwoeger-profiel-shell .z-banner { position: sticky; top: 0; }
}
/* topbar voor verversen */
.zw-acc-topbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:8px;
}
.zw-acc-refresh{
  border:1px solid #ddd;
  background:#fafafa;
  border-radius:8px;
  padding:6px 10px;
  font-weight:600;
}

/* containers in klussen-body mogen krimpen op mobiel */
.zwoeger-profiel-shell .zw-acc-body{
  display:block;
  min-width:0;
}
.zwoeger-profiel-shell .zw-acc-body > *{
  min-width:0;
  max-width:100%;
}