:root{
  --bg: #0b1228;
  --card: #121936;
  --ink: #e9efff;
  --muted:#9fb3d6;
  --brand:#2563eb;      /* helder blauw voor links */
  --accent:#1e2b55;     /* zonnig geel */
  --accent-2:#ff7070;   /* koraalroze */
  --ring: #e5e7eb;
  --shadow: 0 10px 25px rgba(0,0,0,.05);
  --radius: 16px;
}

body.theme-dark{
  --bg:#0b1228;
  --card:#121936;
  --ink:#e9efff;
  --muted:#9fb3d6;
  --brand:#2563eb;
  --accent:#1e2b55;
  --radius:16px;
}


/* Algemene layout */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header */
.header {
  background: linear-gradient(135deg, #0b1228, #0d1b3a);
  color: #eef3ff;
  padding: 18px 16px;
  text-align: center;
  border-bottom: 1px solid #1e2b55;
}
.header h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .2px;
}
.kicker {
  font-size: 12px;
  color: #a9b8e8;
  margin: 6px 0 0;
}

/* Pagina layout */
.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .sticky { position: static; }
}

.panel {
  background: linear-gradient(180deg, rgba(19,24,46,.9), rgba(15,20,40,.9));
  border: 1px solid #1c2952;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 10px 28px rgba(0,10,40,.35);
}
.sticky { position: sticky; top: 16px; }

/* Koppen */
h2 {
  margin: .2em 0 .4em 0;
  font-size: 18px;
  color: #cfe0ff;
}

/* ---------- Verbeterde spacing & leesbaarheid ---------- */
label {
  display: block;
  margin-top: 88px;          /* meer afstand boven label */
  margin-bottom: 6px;        /* ruimte tussen label en veld */
  font-weight: 500;
  color: #cfd9ff;
}

input,
select,
textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #2a3a66;
  border-radius: 12px;
  background: #0d1530;
  color: #e8eeff;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  outline: none;
}

/* Kolommen */
.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) { .two-cols { grid-template-columns: 1fr; } }

.hr {
  border: none;
  border-top: 1px solid #1e2b55;
  margin: 18px 0;
}

/* Buttons */
.btn {
  margin-top: 20px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  border-radius: 12px;
  padding: 13px 22px;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(37,99,235,0.35);
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(37,99,235,0.45);
}
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 4px 14px rgba(37,99,235,0.25);
}

/* Kleine tekst / prijslabels */
.small { font-size: 12px; color: var(--muted); }
.badge {
  display: inline-block;
  background: #0f1f46;
  color: #9cc6ff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
}
.priceRow {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Canvas / voorbeeld */
.canvasWrap { display: flex; justify-content: center; }
canvas {
  background: #fff;
  border-radius: 50%;
  border: 5px solid #3b4c86;
  max-width: 100%;
}

/* ---------- Kleurkiezer chips ---------- */
.color-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 10px;
}

input[type="color"].color-chip {
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid #ffffff33;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  box-shadow: 0 2px 10px #0006;
}
input[type="color"].color-chip::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"].color-chip::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
}
input[type="color"].color-chip::-moz-color-swatch {
  border: none;
  border-radius: 8px;
}
.color-hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #9fb3d6;
}

/* Tabel / admin re-use (voor latere modules) */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
  border-bottom: 1px solid #2a3050;
  text-align: left;
}

/* Responsiveness extra */
@media (max-width: 600px) {
  .header h1 { font-size: 22px; }
  h2 { font-size: 16px; }
  .btn { width: 100%; text-align: center; }
}

/* --- Labelafstand fix --- */
label {
  display: block;
  margin-top: 18px;
  margin-bottom: 10px;    /* iets meer ruimte tot het invoerveld */
  font-weight: 500;
  color: #cfd9ff;
  line-height: 1.3;
}

/* extra regel: als er direct een input/select/textarea in het label zit */
label > input,
label > select,
label > textarea {
  margin-top: 6px;
}

.priceBox{background:#0f1f46;color:#e9efff;border-radius:14px;padding:12px 14px;max-width:360px}
.priceBox .line{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid #1c2952}
.priceBox .line:last-child{border-bottom:0}
.priceBox .total{font-weight:800;font-size:1.05rem}
.freeNote{margin-top:8px;color:#9be37a;font-weight:700}


/* Light accents */
.btn, button, .variant-pill { transition: background .2s ease, color .2s ease, border-color .2s ease; }
.btn-primary{ background: var(--brand); color:#0b1b2a; border:1px solid #b6e2f5; }
.btn-primary:hover{ filter:brightness(0.95); }
.header, .card{ background:var(--card); }
.badge{ background:var(--accent); color:#1e293b; padding:.15rem .5rem; border-radius:999px; }
footer.site-footer{ margin-top:40px; padding:16px; text-align:center; color:var(--muted); border-top:1px solid #e5e7eb; background:#f9fafb; }
.theme-dark footer.site-footer{ background:#0f1733; border-top-color:#1f2b4f; }
.theme-toggle{ cursor:pointer; border:1px solid #dbe7ff; background:#fff; padding:8px 10px; border-radius:999px; font-size:14px; }
.theme-dark .theme-toggle{ background:#121936; border-color:#32407b; color:#e9efff; }

background:var(--bg);color:var(--ink);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.4}
.header{background:#fff;border-bottom:1px solid var(--ring);box-shadow:var(--shadow)}
.header .title{font-weight:700;letter-spacing:.3px}
.container{max-width:1100px;margin:0 auto;padding:20px}
.card{background:var(--card);border:1px solid var(--ring);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.grid{display:grid;gap:18px}
@media(min-width:960px){.grid{grid-template-columns:1fr 1fr}}
h1,h2,h3{font-weight:700}
label{font-weight:600}
input[type="text"],input[type="email"],textarea,select{width:100%;padding:12px;border:1px solid var(--ring);border-radius:12px;outline:none}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(30,86,219,.15);border-color:#b9cdf8}
.button{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg, #ffe483, #ffd84d);color:#1e293b;border:0;padding:12px 18px;border-radius:999px;font-weight:700;box-shadow:0 6px 20px rgba(255,216,77,.35);cursor:pointer}
.button:hover{filter:brightness(.98)}
.button-secondary{background:#1e56db;color:#fff;box-shadow:0 6px 20px rgba(30,86,219,.25)}
.badge{background:#fff3b6;color:#1e293b;padding:.25rem .5rem;border-radius:999px;border:1px dashed #ffd84d}
.footer{margin-top:40px;padding:18px;text-align:center;color:var(--muted);}
.preview{background:linear-gradient(145deg,#ffffff,#fff7db);border:1px solid var(--ring);border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);padding:16px}

/* === v9.2 playful polish === */
:root{ --pop: cubic-bezier(.2,.8,.2,1); }
.card{transition: transform .18s var(--pop), box-shadow .18s var(--pop);}
.card:hover{transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.08);}
.button{transition: transform .15s var(--pop), box-shadow .15s var(--pop);}
.button:hover{transform: translateY(-1px);}
.button:active{transform: translateY(0); box-shadow: 0 4px 12px rgba(0,0,0,.12) inset;}
input,select,textarea{transition: box-shadow .15s var(--pop), border-color .15s var(--pop), background .15s var(--pop);}
.variant-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--ring);cursor:pointer;background:#fff;}
.variant-pill:hover{box-shadow:0 6px 16px rgba(0,0,0,.06);}

/* Confetti bits */
.confetti{position:fixed; top:0; left:0; width:8px; height:12px; pointer-events:none; opacity:0; z-index:9999; will-change: transform, opacity;}
@keyframes confetti-fall{
  0%{transform: translate3d(var(--x,0), -10vh, 0) rotate(0); opacity:1;}
  100%{transform: translate3d(var(--x,0), 110vh, 0) rotate(720deg); opacity:0;}
}
/* =========================================
   MOBIEL LAYOUT PATCH (preview → formulier)
   Laat index en bestaande styles ongemoeid
   ========================================= */
@media (max-width: 980px){

  /* Stapel alle content onder elkaar op mobiel */
  .grid-app{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Zet preview als eerste blok */
  .grid-app > .right-col,
  .grid-app > *:has(#previewCanvas){
    order: 1;
    position: static !important;   /* geen sticky/overlay op mobiel */
    z-index: auto !important;
    width: 100%;
  }

  /* Alles wat geen preview is komt erna (formulier e.d.) */
  .grid-app > *:not(:has(#previewCanvas)){
    order: 2;
    width: 100%;
  }

  /* Voor de zekerheid: sticky echt uit op mobiel */
  .right-col{
    position: static !important;
    top: auto !important;
  }

  /* Preview netjes schalen */
  .canvasWrap{ justify-content: center }
  canvas#previewCanvas{
    display: block;
    max-width: 340px;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

/* Desktop: sticky alleen hier actief (ongewijzigd gedrag) */
@media (min-width: 981px){
  .right-col{
    position: sticky;
    top: 16px;
  }
}

/* --- Mobile ordering: preview bovenaan, rest eronder --- */
@media (max-width: 980px){
  /* Stapel de twee kolommen */
  .grid-app{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Preview ALTIJD als eerste */
  .grid-app > .right-col{
    order: 1 !important;
    position: static !important; /* geen sticky overlap op mobiel */
  }

  /* Formulier (linkerkolom) daarna */
  .grid-app > .panel{
    order: 2 !important;
  }

  /* Cart staat buiten .grid-app, maar hoeft niet verplaatst te worden;
     alleen wat ruimte voor nette flow. */
  #cartBox{
    margin-top: 16px;
  }

  /* FAQ-paneel: geen ordering meer (laat in DOM-volgorde),
     alleen wat ruimte zodat het visueel onder cart staat. */
  .panel.info-panel{
    margin-top: 16px;
  }
}

/* Desktop blijft sticky rechts */
@media (min-width: 981px){
  .right-col{ position: sticky; top: 16px; }
}

/* =============== MOBILE LAYOUT (max 980px) =============== */
@media (max-width: 980px){

  /* 1) Stack main grid vertically */
  .grid-app{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* 2) Preview (right column) first; no sticky overlap on mobile */
  .grid-app > .right-col{
    order: 1 !important;
    position: static !important;
    z-index: auto !important;
    width: 100%;
  }

  /* 3) Form (left panel) after preview */
  .grid-app > .panel{
    order: 2 !important;
    width: 100%;
  }

  /* 4) Cart block (outside grid) keeps its natural position; give spacing */
  #cartBox{
    margin-top: 16px;
  }

  /* 5) If a FAQ/info panel is INSIDE the right column, hide it on mobile
        so we only use the bottom/standalone FAQ panel. */
  .right-col .panel.info-panel{
    display: none !important;
  }

  /* 6) Standalone FAQ panel (outside grid) — show and keep it visually last */
  .panel.info-panel{
    display: block;
    width: 100%;
    margin-top: 16px;
  }
}

/* =============== DESKTOP (min 981px) =============== */
@media (min-width: 981px){
  /* Keep your original sticky preview on desktop */
  .right-col{
    position: sticky;
    top: 16px;
  }
}
/* UNDO: FAQ verbergen op mobiel */
@media (max-width: 980px){
  /* Zorg dat de FAQ binnen .right-col weer zichtbaar is */
  .right-col .panel.info-panel{
    display: block !important;
    margin-top: 16px;
  }
}
/* Mobiel: stapel grid; preview bovenaan, formulier erna */
@media (max-width: 980px){
  .grid-app{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .right-col{ position: static !important; } /* geen overlap */
}

/* Spacing voor losse blokken onder de grid */
.panel.cart-panel{ margin-top: 16px; }
.panel.info-panel{ margin-top: 16px; }
.footer, .site-footer{ margin-top: 16px; }
/* ============================================================
   PACKAGING LOOK & FEEL — append-only patch
   Witte basis, strak blauw merk, pill/badge stijl
   ============================================================ */

/* Merkblauw iets prominenter */
:root{
  --brand:#1E56DB;          /* ButtonMaker blauw */
  --brand-weak:#ECF3FF;     /* heel licht blauw vlak */
  --ring:#E9EEFC;           /* lichtere randkleur */
  --canvas-ring:#E9EEFC;    /* ring rond preview */
}

/* Header zoals de verpakking: blauw merkwoord + subtitel rustig */
.header h1{
  color: var(--brand);
  font-weight: 700;
  letter-spacing: .15px;
}
/* Optioneel het blauwe puntje na ButtonMaker zoals op de verpakking */
.header h1::after{
  content: ".";
  color: var(--brand);
  margin-left: 2px;
}
.kicker{
  color:#7C8799;
  font-weight:500;
}

/* Panel/rand netter en lichter, zachte schaduw zoals productkaart */
.panel{
  border-color: var(--ring);
  box-shadow: 0 10px 24px rgba(30,86,219,.06);
}

/* Variant pills → witte pill met subtiele rand en blauwe prijsbadge */
.variant-row{ gap: 8px; }
.variant-pill{
  background:#fff;
  color:#0f172a;
  border:1px solid var(--ring);
  padding:9px 12px;
  border-radius: 999px;
}
.variant-pill:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.06); }
.variant-pill.active{
  background: #F3F7FF;
  box-shadow: 0 0 0 2px var(--brand) inset;
}
.badge-price{
  background: var(--brand);
  color:#fff;
  border:none;
  padding:2px 10px;
  font-weight:700;
}

/* Kleurchips iets strakker */
.color-chip{
  border:1px solid var(--ring);
  box-shadow:none;
}
.color-hex{ color:#6B7890; }

/* Form inputs: lichtere rand & focus in merkblauw */
input,select,textarea{ border-color: var(--ring); }
input:focus,select:focus,textarea:focus{
  border-color:#b9cdf8;
  box-shadow:0 0 0 3px rgba(30,86,219,.14);
}

/* Primaire knop: ButtonMaker-blauw, zachte pill */
.btn{
  background: linear-gradient(180deg, #2B6BE6, #1E56DB);
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(30,86,219,.22);
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(30,86,219,.28);
}

/* Unit/prijsregel rustiger grijs zoals verpakking */
#unitBox{ color:#6B7890; }

/* Preview-kaart zoals productshot */
canvas#previewCanvas{
  border:6px solid var(--canvas-ring);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}

/* Info-banner soft geel zoals prijslabel accenten */
.info-banner{
  background: linear-gradient(180deg, #FFF8CF, #FFFFFF);
  border-color:#FFE9A6;
  color:#5A4A00;
}

/* Tabel/randen subtieler */
.cart th,.cart td{ border-bottom:1px solid var(--ring); }

/* Footer iets lichter */
.footer{ color:#7C8799; border-top-color: var(--ring); }

/* Mobiel: behoud de stacking die we eerder maakten (preview → formulier) */
@media (max-width:980px){
  .grid-app{ display:flex; flex-direction:column; gap:18px; }
  .grid-app > .right-col{ order:1; position:static !important; width:100%; }
  .grid-app > .panel{ order:2; width:100%; }
}