/* ==========================================================================
   Gedeelde stijl van de twee ontwerpers: /ontwerp-je-strip en
   /ontwerp-je-startscherm. De ontwerpers zijn losse apps in een eigen tabblad
   en laden daarom niet de grote styles.css van de site; de huisstijl
   (pastelvlekken, regenboog, groene pill-knoppen) is hier overgenomen.

   Mobiel is de basis. De tweekoloms desktoplayout staat onderaan in een
   min-width media query, zodat de pagina bij twijfel terugvalt op mobiel in
   plaats van op een preview die over de tekst heen schuift.
   ========================================================================== */
:root {
  --bg: #fefdfb;
  --ink: #16181d;
  --ink-soft: #6b7280;
  --green: #22ae58;
  --green-dark: #1c9a4d;
  --card: #ffffff;
  --line: #eceae6;
  --radius: 16px;
  --rainbow: linear-gradient(90deg, #f5a623, #d9c93a, #3fbb6a, #4a90d9);
  --font: -apple-system, "Inter", "Segoe UI", system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font);
  min-height: 100vh; position: relative; overflow-x: hidden;
}
/* iOS Safari kleurt knoptekst zonder eigen color-regel systeemblauw */
button, input[type=text] { color: var(--ink); -webkit-appearance: none; appearance: none; }
button { font: inherit; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(560px 480px at 4% 6%, rgba(244, 170, 170, .38), transparent 68%),
    radial-gradient(620px 560px at 98% 22%, rgba(243, 228, 148, .42), transparent 70%),
    radial-gradient(500px 480px at 82% 92%, rgba(180, 226, 189, .30), transparent 70%);
}
:focus-visible { outline: 2.5px solid var(--green); outline-offset: 2px; border-radius: 6px; }

/* ---- kop ---- */
header {
  padding: 14px 5vw; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0, 0, 0, .04);
  position: sticky; top: 0; z-index: 30;
}
.brand { font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.brand .logo {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(135deg, #f5a623, #3fbb6a 55%, #4a90d9);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-style: normal;
}
.brand .name { white-space: nowrap; }
.brand .sub { color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.brand .sub::before { content: "·"; margin-right: 6px; }
@media (max-width: 560px) { .brand .sub { display: none; } }
@media (max-width: 480px) { .brand .sub { display: none; } }
.terug-site {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--ink-soft);
  padding: 8px 15px; border-radius: 999px; border: 1.5px solid var(--line); background: rgba(255, 255, 255, .7);
  transition: color .15s, border-color .15s;
}
.terug-site svg { width: 15px; height: 15px; flex: none; }
.terug-site:hover { color: var(--ink); border-color: var(--ink-soft); }
@media (max-width: 620px) { .terug-site { padding: 9px; gap: 0; } .terug-site span { display: none; } }

/* stappen: aanklikbaar, met de naam van de stap erbij op brede schermen */
.stappen { display: flex; gap: 4px; align-items: center; flex: 0 1 auto; min-width: 0; }
.stappen button {
  display: flex; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer;
  padding: 6px 8px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--ink-soft);
}
.stappen button i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; transition: background .25s, transform .2s; }
.stappen button.gedaan i { background: var(--green); }
.stappen button.nu { color: var(--ink); background: rgba(34, 174, 88, .1); }
.stappen button.nu i { background: var(--green); transform: scale(1.25); }
.stappen button span { display: none; }
@media (min-width: 1000px) { .stappen button.nu span { display: inline; } }

main { max-width: 1160px; margin: 0 auto; padding: 5vh 5vw 34vh; }

/* ---- wizard ---- */
h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: .4em; }
h1 em { font-style: normal; display: block; background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: var(--ink-soft); margin-bottom: 1.8em; line-height: 1.6; max-width: 56ch; }
.pane { display: none; animation: fade .3s ease; }
.pane.on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

.groep { margin-bottom: 26px; }
.groep > h2 { font-size: .92rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.groep > h2 small { font-weight: 500; color: var(--ink-soft); font-size: .8rem; }

.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.choices.smal { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.choice {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 16px 15px; cursor: pointer; text-align: left; color: var(--ink);
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.choices.smal .choice { padding: 12px 12px; border-radius: 13px; }
.choice:hover { transform: translateY(-2px); }
.choice.sel { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.choice .ico { display: block; width: 30px; height: 30px; margin-bottom: 12px; color: var(--ink-soft); transition: color .15s; }
.choice .ico svg { display: block; width: 100%; height: 100%; }
.choice:hover .ico, .choice.sel .ico { color: var(--green); }
.choice b { display: block; font-size: .95rem; line-height: 1.25; }
.choice small { color: var(--ink-soft); font-size: .77rem; line-height: 1.4; display: block; margin-top: .25em; }
.choice .letter { font-size: 1.35rem; line-height: 1.15; font-weight: 400; display: block; min-height: 1.6em; }

/* segmentknoppen: weinig / normaal / veel */
.segment { display: inline-flex; background: #f1efeb; border-radius: 999px; padding: 4px; gap: 2px; }
.segment button { border: 0; background: none; padding: 9px 18px; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.segment button.sel { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.rij { display: flex; flex-wrap: wrap; gap: 22px 34px; }

label.field { display: block; margin-bottom: 18px; max-width: 520px; }
label.field span { display: flex; justify-content: space-between; font-weight: 600; font-size: .9rem; margin-bottom: 7px; }
label.field span i { font-style: normal; font-weight: 500; color: var(--ink-soft); font-size: .78rem; }
label.field .hint { display: block; margin-top: 6px; font-size: .8rem; color: var(--ink-soft); line-height: 1.45; }
input[type=text] {
  width: 100%; font: inherit; font-size: 1.05rem; padding: 13px 15px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink);
}
input[type=text]:focus { outline: none; border-color: var(--green); }

/* ---- stijlgalerij ---- */
.stijlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; }
.stijlen.liggend { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.stijl {
  border: 1.5px solid var(--line); background: var(--card); border-radius: var(--radius);
  padding: 8px 8px 11px; cursor: pointer; text-align: left; position: relative;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.stijl:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(22, 24, 29, .1); }
.stijl.sel { border-color: var(--green); box-shadow: 0 0 0 1.5px var(--green), 0 10px 26px rgba(34, 174, 88, .16); }
.stijl canvas { width: 100%; height: auto; display: block; border-radius: 10px; background: #f3f1ed; }
.stijl b { display: block; font-size: .9rem; margin: 9px 3px 0; }
.stijl small { display: block; color: var(--ink-soft); font-size: .74rem; margin: 2px 3px 0; line-height: 1.35; }
.stijl .tip {
  position: absolute; top: 14px; left: 14px; font-size: .66rem; font-weight: 700; letter-spacing: .02em;
  background: var(--green); color: #fff; padding: 3px 8px; border-radius: 999px;
}
.stijl.sel::after {
  content: "✓"; position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* ---- kleuren ---- */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.swatch { width: 112px; padding: 8px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; color: var(--ink); transition: border-color .15s; }
.swatch.sel { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.swatch .strip3 { display: flex; height: 32px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .06); }
.swatch .strip3 i { flex: 1; }
.swatch small { display: block; margin-top: 6px; font-size: .75rem; color: var(--ink-soft); }
.custom-colors { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; }
.custom-colors label { font-size: .8rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 6px; }
input[type=color] { width: 58px; height: 38px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; padding: 3px; }
.let-op { margin-top: 12px; font-size: .84rem; color: #9a5b12; background: #fff6e6; border: 1px solid #f3dfb8; padding: 10px 13px; border-radius: 11px; max-width: 520px; line-height: 1.45; }
.let-op[hidden] { display: none; }
.let-op button { border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }

/* ---- uploads ---- */
.upload {
  border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 24px; text-align: center;
  color: var(--ink-soft); cursor: pointer; background: var(--card); transition: border-color .15s; max-width: 520px;
}
.upload:hover, .upload.sleep { border-color: var(--green); }
.upload canvas, .upload img { max-height: 84px; max-width: 220px; display: block; margin: 0 auto 8px; border-radius: 6px;
  background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.upload-opties { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: .86rem; color: var(--ink-soft); align-items: center; }
.upload-opties[hidden] { display: none; }
.upload-opties label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.upload-opties input { width: 17px; height: 17px; accent-color: var(--green); }
.link { border: 0; background: none; color: var(--ink-soft); text-decoration: underline; cursor: pointer; font-size: .86rem; padding: 0; }
.link:hover { color: var(--ink); }

/* ---- knoppen ---- */
.nav { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; align-items: center; }
button.primary, button.ghost, a.primary {
  font-weight: 700; font-size: 1rem; padding: 14px 28px; border-radius: 999px; cursor: pointer;
  transition: transform .12s, background .15s; text-decoration: none; text-align: center; display: inline-block;
}
button.primary, a.primary { background: var(--green); color: #fff; border: 0; box-shadow: 0 8px 22px rgba(34, 174, 88, .32); }
button.primary:hover, a.primary:hover { background: var(--green-dark); }
button.primary:active { transform: scale(.97); }
button.primary[disabled] { opacity: .6; cursor: default; }
button.ghost { background: rgba(255, 255, 255, .7); color: var(--ink-soft); border: 1.5px solid var(--line); }
button.wit { background: #fff; color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
button.wit:hover { background: #faf9f6; }
.verras {
  display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: #fff;
  padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: .9rem; cursor: pointer; color: var(--ink);
}
.verras:hover { border-color: var(--ink-soft); }
.verras svg { width: 17px; height: 17px; }
.bewaard { font-size: .8rem; color: var(--ink-soft); margin-top: 22px; }
.bewaard[hidden] { display: none; }

.done-actions { display: flex; flex-direction: column; gap: 12px; max-width: 340px; }
#sendStatus { font-size: .88rem; margin-top: 6px; line-height: 1.45; }
#sendStatus.ok { color: #2e7d46; }
#sendStatus.err { color: #b3423a; }
.checkline { color: var(--ink-soft); font-size: .9rem; margin-top: 16px; line-height: 1.7; }
.checkline b { color: var(--ink); }
.checkline .vink { color: var(--green); font-weight: 700; }

/* meldingsblok: overnemen van de strip, of een intern geopend ontwerp */
.melding {
  margin: 0 0 22px; padding: 14px 16px; max-width: 560px; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--ink-soft); font-size: .9rem; line-height: 1.5;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.melding[hidden] { display: none; }
.melding b { color: var(--ink); }
.melding button { flex: none; padding: 9px 16px; font-size: .88rem; }

/* datum-CTA voor wie nog niet geboekt heeft: de belangrijkste vervolgstap */
.boek-cta {
  position: relative; overflow: hidden; margin-top: 22px; padding: 24px 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fffdf6 100%); border: 1.5px solid var(--line);
  border-radius: var(--radius); max-width: 480px; box-shadow: 0 12px 30px rgba(22, 24, 29, .08);
}
.boek-cta::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--rainbow); }
.boek-cta[hidden] { display: none; }
.boek-cta h2 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin-bottom: 6px; }
.boek-cta p { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; margin-bottom: 16px; }
.boek-cta a {
  display: flex; align-items: center; justify-content: center; text-decoration: none; text-align: center;
  font-weight: 700; font-size: 1.02rem; padding: 15px 26px; border-radius: 999px; width: 100%; max-width: 340px;
  background: var(--green); color: #fff; box-shadow: 0 8px 22px rgba(34, 174, 88, .32); transition: background .15s, transform .12s;
}
.boek-cta a:hover { background: var(--green-dark); }
.boek-cta .cta-klein { font-size: .82rem; color: var(--ink-soft); margin: 12px 0 0; }
.boek-cta.is-hero { border-color: rgba(34, 174, 88, .32); background: linear-gradient(180deg, #ffffff 0%, #f3fbf6 100%); box-shadow: 0 16px 38px rgba(34, 174, 88, .18); animation: cta-pop .4s ease both; }
@keyframes cta-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* video maken: voortgang en resultaat (alleen startscherm) */
.maak-balk { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; max-width: 340px; margin-top: 4px; }
.maak-balk[hidden] { display: none; }
.maak-balk i { display: block; height: 100%; width: 0; background: var(--rainbow); transition: width .15s linear; }
#resultaat { margin: 0 0 22px; max-width: 480px; }
#resultaat[hidden] { display: none; }
#resultaat video { width: 100%; aspect-ratio: 4 / 3; display: block; border-radius: var(--radius); background: #000; box-shadow: 0 12px 30px rgba(22, 24, 29, .14); }
#resultaat small { display: block; margin-top: 8px; color: var(--ink-soft); font-size: .8rem; }

/* ---- preview: mobiel = kleine live-thumbnail rechtsonder, tik = vergroten ---- */
#previewWrap { position: fixed; right: 12px; bottom: 12px; top: auto; z-index: 40; text-align: center; }
#previewCanvas {
  display: block; border-radius: 12px; background: #fff; cursor: zoom-in;
  box-shadow: 0 10px 30px rgba(28, 26, 23, .32); outline: 1px solid var(--line);
}
body.staand #previewCanvas { height: 25vh; max-height: 25vh; width: auto; max-width: 40vw; }
body.liggend #previewCanvas { width: 44vw; max-width: 260px; height: auto; aspect-ratio: 4 / 3; }
#previewWrap p { display: none; }
#previewWrap::after { content: "tik voor groot"; display: block; margin-top: 5px; font-size: .68rem; color: var(--ink-soft); text-align: center; }
/* in de galerij zijn de kaarten zelf het voorbeeld: daar zit de thumbnail alleen maar in de weg */
body.stap-stijl #previewWrap { display: none; }
body.preview-open #previewWrap {
  display: flex; inset: 0; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(22, 24, 29, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
body.preview-open.staand #previewCanvas { height: 84vh; max-height: 84vh; max-width: 92vw; cursor: zoom-out; }
body.preview-open.liggend #previewCanvas { width: min(94vw, 112vh); max-width: none; cursor: zoom-out; }
body.preview-open #previewWrap::after { content: "tik om te sluiten"; color: rgba(255, 255, 255, .85); margin-top: 12px; font-size: .8rem; }

/* mobiel, strip: de knoppen blijven links van de zwevende thumbnail */
@media (max-width: 760px) {
  body.staand .nav { padding-right: 40vw; }
  body.staand.stap-stijl .nav { padding-right: 0; }
}
/* mobiel, startscherm: een liggend voorbeeld past bovenaan. Het blijft daar
   plakken, zodat je bij het verfijnen ziet wat je verandert zonder te scrollen. */
@media (max-width: 760px) {
  body.liggend main { display: flex; flex-direction: column; padding-top: 0; }
  body.liggend #previewWrap {
    position: sticky; top: 55px; right: auto; bottom: auto; order: -1; z-index: 20;
    margin: 0 -5vw 3vh; padding: 10px 0 8px;
    background: rgba(254, 253, 251, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
  }
  body.liggend #previewCanvas { width: 58vw; max-width: 300px; margin: 0 auto; box-shadow: 0 6px 18px rgba(28, 26, 23, .18); }
  body.liggend #previewWrap::after { content: none; }
  body.liggend.preview-open #previewWrap { position: fixed; margin: 0; padding: 0; z-index: 50; }
}

/* ---- desktop: tweekoloms met meelezende preview rechts ---- */
@media (min-width: 761px) {
  main { display: grid; gap: 4vw; align-items: start; padding-bottom: 10vh; }
  body.staand main { grid-template-columns: minmax(0, 1fr) minmax(240px, 330px); }
  body.liggend main { grid-template-columns: minmax(0, 1fr) minmax(300px, 470px); }
  #previewWrap, body.stap-stijl #previewWrap { display: block; position: sticky; inset: auto; top: 86px; z-index: auto; background: none; }
  body.staand #previewCanvas { height: 74vh; max-height: 720px; max-width: 100%; margin: 0 auto; }
  body.liggend #previewCanvas { width: 100%; max-width: 100%; }
  #previewCanvas { cursor: default; outline: 0; box-shadow: 0 18px 50px rgba(28, 26, 23, .16); }
  #previewWrap p { display: block; color: var(--ink-soft); font-size: .8rem; margin-top: 12px; line-height: 1.5; }
  #previewWrap::after { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pane, .boek-cta.is-hero { animation: none; }
  .choice, .stijl { transition: none; }
}