/* ============================================================
   PERMATEEK Deck Visualizer — Boatworks Caribbean
   Bouwt voort op het Boatworks Caribbean design system:
   navy (romp) / teak & sand (dek) / paper / één oranje accent.
   Mobile-first, rustige Caribbean-esthetiek.
   ============================================================ */

:root {
  --navy-900:#0f1d36; --navy-800:#15233f; --navy-700:#1d3158;
  --teak:#c89b6a; --teak-dark:#a9794a; --sand:#e7dac6;
  --paper:#f6f1e8; --paper-2:#efe7d8; --white:#ffffff;
  --ink:#16223a; --muted:#5d6b80;
  --orange:#ee8a42; --orange-dark:#d9742c;
  --caulk-white:#f3efe7; --caulk-silver:#b9bcc2; --caulk-black:#1a1a1a;

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --radius:14px; --radius-lg:24px; --radius-pill:100px;
  --shadow-card:0 2px 10px rgba(15,29,54,.07),0 12px 32px rgba(15,29,54,.08);
  --shadow-cta:0 10px 30px -10px rgba(238,138,66,.7);
  --dur:.28s;
  --gutter:clamp(1.1rem,4.5vw,2.5rem);
  --maxw:680px;
}

* { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  font-family:var(--font-body); color:var(--ink); background:var(--paper);
  font-size:17px; line-height:1.55; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
button { font:inherit; touch-action:manipulation; }

/* ---------- Topbar ---------- */
.topbar {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem var(--gutter);
  background:rgba(246,241,232,.9);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(22,34,58,.07);
}
.topbar-brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--navy-800); font-weight:700; font-size:.98rem; min-width:0; }
.topbar-brand span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-brand img { height:30px; width:auto; flex:none; }
.topbar-tag { font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teak-dark); font-weight:600; text-align:right; line-height:1.35; max-width:44%; flex:none; }
@media (max-width:430px) { .topbar-tag { display:none; } }

/* ---------- Steps ---------- */
.step { display:none; }
.step.is-active { display:block; }

/* ---------- Hero ---------- */
.hero { max-width:var(--maxw); margin-inline:auto; padding:clamp(2rem,6vh,4rem) var(--gutter) 3.5rem; }
.eyebrow {
  font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--orange-dark); display:inline-flex; align-items:center; gap:.7rem;
}
.eyebrow::before { content:""; width:30px; height:1px; background:var(--orange-dark); }
h1,h2 { font-family:var(--font-display); color:var(--navy-800); font-weight:500; line-height:1.12; text-wrap:balance; }
h1 { font-size:clamp(2rem,7.2vw,3.1rem); margin:1.1rem 0 1rem; max-width:17ch; }
h2 { font-size:clamp(1.5rem,5.6vw,2.05rem); margin-bottom:.9rem; }
.lead { font-size:clamp(1.02rem,2.6vw,1.18rem); color:var(--muted); max-width:44ch; }
.hero-cta { margin:1.6rem 0 1.2rem; }
.trust-row { font-size:.86rem; color:var(--teak-dark); font-weight:600; letter-spacing:.02em; }

/* ---------- Before/after slider ---------- */
.ba-slider {
  position:relative; margin-top:1.6rem; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-card); user-select:none; -webkit-user-select:none;
  aspect-ratio:16/9; background:var(--sand); touch-action:pan-y;
}
.ba-slider img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba-before-wrap { position:absolute; inset:0; overflow:hidden; width:50%; }
.ba-before-wrap img { width:100%; height:100%; max-width:none; }
.ba-handle {
  position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px;
  background:rgba(255,255,255,.9); box-shadow:0 0 12px rgba(15,29,54,.35); pointer-events:none;
}
.ba-handle span {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:var(--white);
  box-shadow:0 2px 10px rgba(15,29,54,.3);
}
.ba-handle span::before, .ba-handle span::after {
  content:""; position:absolute; top:50%; width:8px; height:8px;
  border-top:2px solid var(--navy-800); border-left:2px solid var(--navy-800);
}
.ba-handle span::before { left:10px; transform:translateY(-50%) rotate(-45deg); }
.ba-handle span::after { right:10px; transform:translateY(-50%) rotate(135deg); }
.ba-range { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
.ba-label {
  position:absolute; bottom:.7rem; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; background:rgba(15,29,54,.65);
  padding:.25rem .6rem; border-radius:var(--radius-pill); pointer-events:none;
}
.ba-label-before { left:.7rem; } .ba-label-after { right:.7rem; }

/* ---------- Wizard ---------- */
.wizard { max-width:var(--maxw); margin-inline:auto; padding:1.2rem var(--gutter) 3rem; }
.progress { margin-bottom:1.6rem; }
.progress-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:.55rem; }
.progress-label { font-size:.85rem; color:var(--muted); }
.backlink { background:none; border:0; color:var(--muted); font-size:.9rem; font-weight:600; cursor:pointer; padding:.4rem .2rem; min-height:44px; }
.backlink:hover { color:var(--navy-800); }
.progress-bar { height:4px; border-radius:2px; background:var(--paper-2); overflow:hidden; }
.progress-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--teak),var(--orange)); border-radius:2px; transition:width .5s cubic-bezier(.22,1,.36,1); }

.panel { display:none; animation:panelIn .45s cubic-bezier(.22,1,.36,1); }
.panel.is-active { display:block; }
@keyframes panelIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.panel-sub { color:var(--muted); margin:-.3rem 0 1.2rem; }
.panel-actions { margin-top:1.6rem; display:flex; justify-content:flex-end; }
.micro { margin-top:1rem; font-size:.82rem; color:var(--muted); }

/* ---------- Knoppen ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:600; font-size:.98rem; padding:.85rem 1.5rem; border-radius:var(--radius-pill);
  cursor:pointer; border:1.5px solid transparent; text-decoration:none; min-height:48px;
  transition:transform var(--dur) ease, background var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.btn-xl { width:100%; padding:1.05rem 1.6rem; font-size:1.06rem; min-height:56px; }
.btn-sm { min-height:40px; padding:.5rem 1rem; font-size:.85rem; }
.btn-primary { background:var(--orange); color:var(--navy-900); box-shadow:var(--shadow-cta); }
.btn-primary:hover { background:var(--orange-dark); transform:translateY(-2px); }
.btn-dark { background:var(--navy-800); color:#fff; }
.btn-dark:hover { background:var(--navy-700); transform:translateY(-2px); }
.btn-ghost-dark { border-color:rgba(22,34,58,.22); color:var(--navy-800); background:transparent; }
.btn-ghost-dark:hover { background:rgba(22,34,58,.06); }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn:focus-visible, .dropzone:focus-visible, .chip:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }

/* Sticky CTA op mobiel */
@media (max-width:700px) {
  .panel-actions .btn-xl, #btn-generate, #btn-to-lead, #btn-send-lead {
    position:sticky; bottom:calc(.8rem + env(safe-area-inset-bottom)); z-index:20;
  }
  .hero-cta .btn-xl { position:sticky; bottom:calc(.8rem + env(safe-area-inset-bottom)); z-index:20; }
}

/* ---------- Dropzone ---------- */
.dropzone {
  border:2px dashed rgba(22,34,58,.22); border-radius:var(--radius-lg);
  background:var(--white); padding:1.6rem 1.2rem; text-align:center;
  transition:border-color var(--dur), background var(--dur); cursor:pointer;
}
.dropzone.is-drag { border-color:var(--orange); background:#fdf3ea; }
.dropzone-title { font-weight:700; color:var(--navy-800); margin-top:.6rem; }
.dropzone-or { color:var(--muted); font-size:.85rem; margin:.3rem 0 .9rem; }
.dropzone-inner svg { color:var(--teak-dark); }
.dropzone-actions { display:flex; flex-direction:column; gap:.6rem; max-width:320px; margin-inline:auto; }
.dropzone-preview img { width:100%; border-radius:var(--radius); max-height:46vh; object-fit:contain; background:var(--sand); }
.crop-hint { font-size:.84rem; color:var(--muted); margin:.8rem 0; }
.tips { list-style:none; margin-top:1.3rem; display:grid; gap:.55rem; }
.tips li { display:flex; gap:.7rem; align-items:baseline; font-size:.94rem; color:var(--ink); }
.tips li span:first-child { font-size:1.05rem; }

/* ---------- Swatches ---------- */
.swatch-carousel {
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px,42%);
  gap:.9rem; overflow-x:auto; padding:.3rem .2rem 1rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.swatch {
  scroll-snap-align:start; border:2px solid transparent; border-radius:var(--radius);
  background:var(--white); padding:.55rem; cursor:pointer; text-align:left;
  transition:border-color var(--dur), transform var(--dur), box-shadow var(--dur);
  position:relative;
}
.swatch img { width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:9px; }
.swatch-name { display:block; font-weight:600; font-size:.94rem; color:var(--navy-800); margin:.55rem .2rem .15rem; transition:font-size var(--dur); }
.swatch-pop { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--orange-dark); margin:0 .2rem .25rem; }
.swatch[aria-selected="true"] { border-color:var(--orange); box-shadow:0 4px 18px rgba(238,138,66,.25); transform:translateY(-3px); }
.swatch[aria-selected="true"] .swatch-name { font-size:1.06rem; }
.swatch[aria-selected="true"]::after {
  content:"✓"; position:absolute; top:.9rem; right:.9rem; width:28px; height:28px;
  background:var(--orange); color:var(--navy-900); border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-size:.9rem;
  box-shadow:0 2px 8px rgba(15,29,54,.3);
}
@media (min-width:701px) {
  .swatch-carousel { grid-auto-flow:row; grid-template-columns:repeat(3,1fr); overflow:visible; }
}

/* ---------- Lijnkaarten ---------- */
.line-cards { display:grid; gap:1rem; margin-top:1.2rem; }
.line-card {
  border:2px solid rgba(22,34,58,.12); border-radius:var(--radius); background:var(--white);
  padding:.6rem; cursor:pointer; text-align:left; display:grid; gap:.5rem;
  transition:border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.line-card canvas, .line-card img { width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:9px; background:var(--sand); }
.line-card-head { display:flex; align-items:center; gap:.6rem; padding:0 .2rem; }
.line-dot { width:22px; height:22px; border-radius:50%; border:1.5px solid rgba(22,34,58,.18); flex:none; }
.line-dot[data-line="black"] { background:var(--caulk-black); }
.line-dot[data-line="white"] { background:var(--caulk-white); }
.line-dot[data-line="silver"] { background:var(--caulk-silver); }
.line-card-name { font-weight:700; color:var(--navy-800); }
.line-card-advice { font-size:.86rem; color:var(--muted); padding:0 .2rem .3rem; }
.line-card[aria-selected="true"] { border-color:var(--orange); box-shadow:0 4px 18px rgba(238,138,66,.22); transform:translateY(-2px); }
.combine-bar {
  margin-top:1.4rem; display:grid; gap:1rem; padding:1rem; border-radius:var(--radius-lg);
  background:var(--white); box-shadow:var(--shadow-card);
}
.combine-preview { display:flex; align-items:center; gap:.9rem; }
.combine-preview img { width:88px; height:48px; object-fit:cover; border-radius:8px; }
.combine-text { display:grid; line-height:1.3; }
.combine-text b { color:var(--navy-800); }
.combine-text span { font-size:.86rem; color:var(--muted); }
@media (min-width:701px) { .line-cards { grid-template-columns:repeat(3,1fr); } }

/* ---------- Generatie ---------- */
.generating { text-align:center; padding:1rem 0 2rem; }
.gen-stage { position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.gen-stage img { width:100%; }
.gen-reveal {
  position:absolute; inset:0; background-size:cover; background-position:center;
  clip-path:inset(0 100% 0 0); transition:clip-path 1.4s cubic-bezier(.22,1,.36,1);
}
.gen-status { margin-top:1.2rem; font-family:var(--font-display); font-size:1.15rem; color:var(--navy-800); min-height:1.6em; }
.gen-status::after { content:""; display:inline-block; width:1.2em; text-align:left; animation:dots 1.2s steps(4) infinite; }
@keyframes dots { 0%{content:"";} 25%{content:".";} 50%{content:"..";} 75%{content:"...";} }

/* ---------- Resultaat ---------- */
.result-view { position:relative; }
.result-ba { margin-top:0; }
.result-side { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.result-side figure { margin:0; }
.result-side img { border-radius:var(--radius); width:100%; }
.result-side figcaption { text-align:center; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:.4rem; }
.result-toolbar { display:flex; align-items:center; gap:.8rem; margin-top:.9rem; }
.chip {
  border:1.5px solid rgba(22,34,58,.18); background:var(--white); color:var(--navy-800);
  border-radius:var(--radius-pill); padding:.42rem .95rem; font-size:.85rem; font-weight:600;
  cursor:pointer; min-height:40px;
}
.chip.is-on { background:var(--navy-800); color:#fff; border-color:var(--navy-800); }
.demo-badge { font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teak-dark); background:var(--sand); padding:.3rem .7rem; border-radius:var(--radius-pill); }
.disclaimer { margin-top:1rem; font-size:.86rem; color:var(--muted); font-style:italic; }
.result-actions { margin-top:1.2rem; display:grid; gap:.9rem; }
.result-actions-secondary { display:flex; gap:.7rem; flex-wrap:wrap; }
.result-actions-secondary .btn { flex:1; min-width:140px; }

/* ---------- Lead-formulier ---------- */
.lead form { display:grid; gap:1rem; margin-top:1.2rem; }
.lead label { display:grid; gap:.4rem; font-weight:600; color:var(--navy-800); font-size:.95rem; }
.lead label i { font-weight:400; color:var(--muted); font-style:normal; font-size:.85rem; }
.lead input, .lead select {
  font:inherit; padding:.85rem 1rem; border-radius:var(--radius); border:1.5px solid rgba(22,34,58,.16);
  background:var(--white); min-height:52px; color:var(--ink);
}
.lead input:focus, .lead select:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(238,138,66,.22); }
.form-error { color:#b3402e; font-size:.9rem; font-weight:600; }

/* ---------- Succes / fail ---------- */
.success, .failstate { text-align:center; padding:1.5rem 0 2.5rem; display:grid; gap:1rem; justify-items:center; }
.success-mark {
  width:72px; height:72px; border-radius:50%; background:var(--orange); color:var(--navy-900);
  font-size:2rem; font-weight:800; display:grid; place-items:center; box-shadow:var(--shadow-cta);
  animation:pop .5s cubic-bezier(.22,1.4,.36,1);
}
@keyframes pop { from { transform:scale(.4); opacity:0; } to { transform:scale(1); opacity:1; } }

/* ---------- Footer ---------- */
.foot { padding:2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom)); text-align:center; font-size:.8rem; color:var(--muted); display:grid; gap:.3rem; }

/* ---------- Debug ---------- */
#debug-panel {
  position:fixed; right:.7rem; bottom:.7rem; z-index:99; width:230px;
  background:var(--navy-900); color:#fff; border-radius:var(--radius); padding:.9rem;
  display:grid; gap:.6rem; font-size:.78rem; box-shadow:0 8px 30px rgba(15,29,54,.4);
}
#debug-panel h3 { font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); }
#debug-panel label { display:grid; gap:.25rem; }
#debug-panel input, #debug-panel select { width:100%; accent-color:var(--orange); font-size:.78rem; }
.dbg-hint { color:rgba(255,255,255,.55); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html { scroll-behavior:auto; }
}