/* ============================================================
   ComfyCool Configurator — PUBLIEKE stijl (ComfyCool huisstijl)
   Bron: comfycool.be — Plus Jakarta Sans, ink #1E0033,
   oranje CTA #FC5628, zacht blauw #B6CFF2.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --cc-ink:#1E0033;
  --cc-ink-soft:#5b4a6b;
  --cc-orange:#FC5628;
  --cc-orange-dark:#e2461c;
  --cc-sky:#B6CFF2;
  --cc-sky-soft:#E8F0FB;
  --cc-bg:#F6F8FC;
  --cc-card:#ffffff;
  --cc-border:#E4E8F0;
  --cc-radius:14px;
  --cc-shadow:0 10px 30px rgba(30,0,51,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body.cc{
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--cc-ink);
  background:var(--cc-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ── Topbalk met logo ── */
.cc-top{
  background:var(--cc-sky);
  padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.cc-top .cc-logo{height:34px;width:auto;display:block}
.cc-top .cc-help{
  font-size:.86rem;font-weight:600;color:var(--cc-ink);
  background:rgba(255,255,255,.6);padding:7px 14px;border-radius:999px;text-decoration:none;
}

/* ── Layout ── */
.cc-wrap{max-width:880px;margin:0 auto;padding:40px 20px 80px}
.cc-card{
  background:var(--cc-card);border:1px solid var(--cc-border);
  border-radius:var(--cc-radius);box-shadow:var(--cc-shadow);
  padding:40px;
}

/* ── Typografie ── */
.cc h1{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.cc h2{font-size:1.35rem;font-weight:700;margin-bottom:8px}
.cc .lead{color:var(--cc-ink-soft);font-size:1.05rem;margin-bottom:28px;max-width:60ch}
.cc-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--cc-sky-soft);color:#2f63b8;
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:6px 14px;border-radius:999px;margin-bottom:18px;
}
/* Merk-lockup: logo + woordmerk, in logo-navy, met hairline-scheiding
   van de stapvraag voor een professionele, commerciële hiërarchie. */
.cc-brandhead{display:flex;align-items:center;gap:18px;
  padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--cc-border)}
.cc-brandhead img{height:64px;width:64px;object-fit:contain;flex:0 0 auto}
.cc-brandhead span{font-size:2.3rem;font-weight:800;line-height:1.05;
  letter-spacing:-.015em;color:#16395B}
@media(max-width:600px){
  .cc-brandhead{gap:12px;padding-bottom:14px;margin-bottom:18px}
  .cc-brandhead img{height:46px;width:46px}
  .cc-brandhead span{font-size:1.55rem}}

/* ── Voortgangsbalk ── */
.cc-progress{height:8px;background:var(--cc-sky-soft);border-radius:999px;overflow:hidden;margin-bottom:32px}
.cc-progress > i{display:block;height:100%;background:var(--cc-orange);border-radius:999px;transition:width .35s ease}

/* ── Keuzekaarten (wizard) ── */
.cc-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:24px 0}
.cc-option{
  border:2px solid var(--cc-border);border-radius:var(--cc-radius);
  background:#fff;padding:22px 18px;cursor:pointer;text-align:center;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.cc-option:hover{border-color:var(--cc-sky);transform:translateY(-2px);box-shadow:var(--cc-shadow)}
.cc-option.selected{border-color:var(--cc-orange);box-shadow:0 0 0 3px rgba(252,86,40,.12)}
.cc-option .ic{font-size:1.8rem;margin-bottom:10px}
.cc-option .lbl{font-weight:700}

/* ── Knoppen ── */
.cc-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cc-orange);color:#fff;border:0;cursor:pointer;
  font:inherit;font-weight:700;padding:14px 28px;border-radius:999px;
  text-decoration:none;transition:filter .15s, transform .15s;
}
.cc-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.cc-btn.ghost{background:transparent;color:var(--cc-ink);border:2px solid var(--cc-border)}
.cc-btn.ghost:hover{border-color:var(--cc-ink);filter:none}
.cc-actions{display:flex;justify-content:space-between;gap:12px;margin-top:32px}

/* ── Resultaat / productkaarten ── */
.cc-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.cc-product{border:1px solid var(--cc-border);border-radius:var(--cc-radius);overflow:hidden;background:#fff}
.cc-product img{width:100%;height:160px;object-fit:contain;background:#fff;padding:14px}
.cc-product .body{padding:16px}
.cc-product .price{color:var(--cc-orange);font-weight:800;font-size:1.2rem}

/* ── Statuspagina ── */
.cc-status{min-height:100vh;display:flex;flex-direction:column}
.cc-status .mid{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px}
.cc-status .mid .inner{max-width:520px}
.cc-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
.cc-dot.ok{background:#1faa6a}.cc-dot.bad{background:var(--cc-orange)}
.cc-foot{padding:22px;text-align:center;color:var(--cc-ink-soft);font-size:.85rem}
.cc a:not(.cc-btn){color:var(--cc-orange);font-weight:600}

@media(max-width:600px){.cc-card{padding:26px 20px}.cc h1{font-size:1.6rem}}