:root{
  /* Light theme */
  --bg:#f8fafc;
  --panel:#ffffff;
  --card:#ffffff;

  --text:#0f172a;
  --muted:#475569;

  --line: rgba(15,23,42,.10);
  --border: rgba(15,23,42,.10);

  --shadow: 0 10px 30px rgba(15,23,42,.06);
  --radius:18px;

  --accent:#2563eb;

  /* EU */
  --eu-blauw:#003399;
  --eu-geel:#FFCC00;
  --hs-groen:#15cc95;

  /* Sticky offsets */
  --header-h: 74px; /* stel bij als je header hoger/lager is */
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Links */
a{ color: var(--accent); }
a:hover{ opacity: .9; }

/* ==========================
   Sticky header (ONE place)
   ========================== */
/* Als header via include.js in #site-header komt */
#site-header{
  position: sticky;
  top: 0;
  z-index: 2000;
}

/* Fallback: als een pagina header direct in HTML heeft */
header.topbar{
  position: sticky;
  top: 0;
  z-index: 2000;
}

/* ================
   Top bar / Header
   ================ */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;

  border-bottom:2px solid var(--eu-blauw);

  backdrop-filter: blur(10px);
  background:#ffffff;

  width: 100%;
}

.brand{
  text-decoration:none;
  color:inherit;
  display:flex;
  gap:12px;
  align-items:center;
}

.logo-dot{
  width:14px;
  height:14px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(37,99,235,.15);
}

.brand-title{
  font-weight:700;
  letter-spacing:.2px;
  color:var(--hs-groen);
}

.brand-sub{
  font-size:12px;
  color:var(--hs-groen);
  margin-top:2px;
}

.top-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.lang{
  display:flex;
  gap:8px;
  align-items:center;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:8px 10px;
  border-radius:999px;

  border:1px solid var(--border);
  background: rgba(15,23,42,.05);
  color: var(--text);

  text-decoration:none;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
}

.chip.ghost{ background:transparent; }

/* Flags */
.flag{
  width:14px;
  height:10px;
  border-radius:2px;
  display:inline-block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}
.flag-nl{
  background: linear-gradient(#ae1c28 0 33%, #ffffff 33% 66%, #21468b 66% 100%);
}
.flag-en{ background:#012169; }

/* =========
   Layout
   ========= */
.layout{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  padding:18px;
  max-width:1200px;
  margin:0 auto;
  align-items: start; /* important for sticky in grid */
}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
}

/* =========
   Cards
   ========= */
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Headings */
h1{margin:0 0 6px 0; font-size:22px}
h2{margin:0 0 14px 0; font-size:18px}
.muted{color:var(--muted); font-size:13px}

/* =================
   Wizard header
   ================= */
.wizard-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 10px 18px;
}

/* Vertical stack variant */
.wizard-head-col{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  gap:14px;
  padding:18px 18px 10px 18px;
}

/* Stepbar: one row, scrollable on small screens */
.stepbar{
  display:flex;
  gap:10px;
  width:100%;
  overflow-x:auto;
  padding-bottom:6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.stepbar::-webkit-scrollbar{ height:8px; }
.stepbar::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.18);
  border-radius:999px;
}
.stepbar::-webkit-scrollbar-track{ background: transparent; }

/* Step buttons */
.stepbox{
  flex: 0 0 112px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:12px 10px;
  min-height:86px;
  border-radius:18px;

  border:1px solid #cbd5e1;
  background:#e2e8f0;
  color:#15cc95;

  cursor:pointer;
  font-weight:700;
  text-align:center;

  transition: all .18s ease;
}

.stepbox:hover{ background:#cbd5e1; }
.stepbox:active{ transform: translateY(1px); }

/* Icon container */
.stepbox-ico{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;

  border-radius:16px;
  background: rgba(255,255,255,.70);
  border:1px solid rgba(0,0,0,.06);
}

/* SVG icon sizing */
.stepbox .ico{
  width:26px;
  height:26px;
  display:block;
}

/* Label text under icon */
.stepbox-txt{
  font-size:12px;
  font-weight:700;
  color:#475569;
  letter-spacing:.2px;
}

/* Active step */
.stepbox.active,
.stepbox[aria-selected="true"]{
  background:#15cc95;
  color:#15cc95;
  border-color:#15cc95;
}

/* Active label + icon */
.stepbox.active .stepbox-txt,
.stepbox[aria-selected="true"] .stepbox-txt{
  color:#ffffff;
}

.stepbox.active .stepbox-ico,
.stepbox[aria-selected="true"] .stepbox-ico{
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.25);
}

.stepbox.active .ico,
.stepbox[aria-selected="true"] .ico{
  color:#ffffff;
}

/* Wizard body */
.wizard-body{padding:14px 18px 18px 18px}

/* =========
   Forms
   ========= */
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 560px){
  .grid2{grid-template-columns:1fr}
}
.span2{grid-column: 1 / -1}

.field{display:flex; flex-direction:column; gap:7px; font-size:13px}

.field input,
.field select,
textarea{
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--text);
  outline:none;
}

.field input:focus,
.field select:focus,
textarea:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 6px rgba(37,99,235,.12);
}

.row{display:flex; align-items:center; gap:12px}
.swatches{display:flex; gap:8px; flex-wrap:wrap}

.swatch{
  width:18px;
  height:18px;
  border-radius:6px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.06);
  cursor:pointer;
}
.swatch[data-color="#2563eb"]{background:#2563eb}
.swatch[data-color="#f59e0b"]{background:#f59e0b}
.swatch[data-color="#10b981"]{background:#10b981}
.swatch[data-color="#a855f7"]{background:#a855f7}
.swatch[data-color="#ef4444"]{background:#ef4444}
.swatch[data-color="#111827"]{background:#111827}

/* Details */
.details{
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  background: rgba(15,23,42,.03);
}
.details summary{cursor:pointer; color:var(--text); font-weight:700}

.note{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  border:1px dashed rgba(15,23,42,.18);
  color:var(--muted);
  background: rgba(15,23,42,.02);
}

/* Radio toggle */
.radio-group{
  display:flex;
  gap:10px;
}
.radio{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  cursor:pointer;
}
.radio input{
  accent-color: var(--eu-blauw);
  cursor:pointer;
}

/* =========
   Templates
   ========= */
.template-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (max-width: 560px){
  .template-grid{grid-template-columns:1fr}
}

.template-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  background: rgba(15,23,42,.03);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.template-card:hover{transform: translateY(-1px)}
.template-card.active{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 6px rgba(201, 13, 44, 0.50);
}

.template-title{font-weight:800; margin-bottom:8px}

.template-mini{
  border-radius:12px;
  background: rgba(15,23,42,.03);
  border:1px solid var(--border);
  padding:10px;
  color:#111;
  overflow:hidden;
}

/* Template picker: previews should not be clickable */
.template-mini,
.template-mini *{
  pointer-events: none;
  user-select: none;
}

/* =========
   Wizard footer
   ========= */
.wizard-foot{
  display:flex;
  justify-content:space-between;
  gap:12px;

  padding:14px 18px 18px 18px;
  border-top:1px solid var(--border);
}

/* =========
   Buttons
   ========= */
.btn{
  border:none;
  background:#15cc95;
  color:#ffffff;
  padding:11px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:700;
}

.btn:hover{ background:#1d4ed8; }
.btn:active{ transform: translateY(1px); }

.btn.secondary{
  background:#e2e8f0;
  color:#1e293b;
  border:1px solid #cbd5e1;
}
.btn.secondary:hover{ background:#cbd5e1; }

.btn .sub{
  display:block;
  font-weight:500;
  color: rgba(255,255,255,.85);
  font-size:12px;
  margin-top:4px;
}
.btn.secondary .sub{
  color: rgba(30,41,59,.75);
}

/* =========
   Preview
   ========= */
.preview{padding:0}

.preview-head{
  padding:18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.preview-title{font-weight:900}
.preview-badges{display:flex; gap:8px; flex-wrap:wrap}

.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.03);
  color: var(--text);
}
.badge.ghost{background:transparent}

.preview-canvas{
  padding:18px;
  background:#ffffff;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  min-height:260px;
  color:#111;
}

.preview-foot{padding:14px 18px 18px 18px; color: var(--muted);}

/* =========
   Export
   ========= */
.export-box{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background: rgba(15,23,42,.03);
}

.export-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width: 560px){
  .export-actions{grid-template-columns:1fr}
}

.mini{margin-top:14px}
.mini-title{font-weight:800; margin-bottom:8px}

#sourcePreview{
  width:100%;
  height:180px;
  resize:vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:12px;
  line-height:1.4;
  background:#ffffff;
  border:1px solid var(--border);
}

/* Toast */
.toast{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(16,185,129,.45);
  background: rgba(16,185,129,.10);
  color: #064e3b;
}

/* ==========================
   Mail-like preview chrome
   ========================== */
.mail{
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.mail-head{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.02);
}

.mail-row{
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  font-size: 12.5px;
  color: #111827;
}
.mail-row .k{ color: rgba(17,24,39,.55); }
.mail-row .v{ color: rgba(17,24,39,.85); }

.mail-body{ padding: 14px; }

.mail-line{
  height: 10px;
  border-radius: 999px;
  background: rgba(17,24,39,.10);
  margin: 10px 0;
}
.mail-line.w80{ width: 80%; }
.mail-line.w72{ width: 72%; }
.mail-line.w65{ width: 65%; }
.mail-line.w55{ width: 55%; }

.mail-spacer{
  height: 12px;
  border-top: 1px dashed rgba(17,24,39,.18);
  margin: 14px 0 12px 0;
}

/* ==========================
   Sticky preview (desktop)
   ========================== */
@media (min-width: 980px){
  aside.preview{
    position: sticky;
    top: calc(var(--header-h) + 12px);
    align-self: start;
  }

  /* sticky + card overflow fix */
  aside.preview.card{
    overflow: visible;
  }

  /* scroll inside preview body if needed */
  aside.preview .preview-canvas{
    max-height: calc(100vh - (var(--header-h) + 220px));
    overflow: auto;
  }
}
/* Template previews: back to white */
.tpl,
.tpl-prev {
  background: #fff !important;
}

/* Als je een inner wrapper gebruikt in de preview */
.tpl-prev table,
.tpl-prev td {
  background: #fff !important;
}
/* Template tiles: restore card look */
.tpl{
  border-radius: 14px;
  overflow: hidden;          /* zodat de preview ook netjes rond is */
}

/* Binnenkant van de tile */
.tpl-prev{
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  padding: 10px;
}

/* Optioneel: iets meer lucht rond de naam */
.tpl-name{
  padding: 12px 12px 0 12px;
}
.tpl.active{
  outline: 2px solid var(--eu-blauw);
}
.preview-actions{
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.preview-actions .btn{
  width: 100%;
}

.preview-actions .toast{
  margin-top: 4px;
}
@media (min-width: 900px){
  .preview-actions{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .preview-actions .toast,
  .preview-actions textarea{
    grid-column: 1 / -1;
  }
}
/* Forceer template previews links uitgelijnd */

.tpl-prev{
  text-align: left;
  display: block;
}

.tpl-prev table{
  margin-left: 0 ;
  margin-right: auto;
}

.tpl-prev td{
  text-align: left;
}
.lang-switch {
  display: inline-flex;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #fff;
}

.lang-btn {
  padding: 6px 12px;
  font-size: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #374151;
}

.lang-btn:hover {
  background: #f3f4f6;
}

.lang-btn.active {
  background: #111827;
  color: #fff;
}