/* =========================================================
   KB Wizard UI (Kastamer-style)
   v1.0
========================================================= */

:root{
  --kb-bg:#f4f5f7;
  --kb-card:#ffffff;
  --kb-line:#e8e9ee;
  --kb-text:#14151a;
  --kb-muted:#6b7280;
  --kb-accent:#b10f8a;      /* paars button */
  --kb-accent-dark:#930c72;
  --kb-radius:18px;
  --kb-shadow:0 18px 55px rgba(18,18,28,.08);
  --kb-shadow-soft:0 10px 30px rgba(18,18,28,.06);
  --kb-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.kb-wizard{
  background:var(--kb-bg);
  padding:36px 18px;
  font-family:var(--kb-font);
  color:var(--kb-text);
}

.kb-wizard__frame{
  max-width:1180px;
  margin:0 auto;
  background:linear-gradient(180deg, rgba(177,15,138,.06), rgba(255,255,255,0) 55%),
             radial-gradient(900px 420px at 18% 18%, rgba(177,15,138,.06), transparent 60%),
             #ffffff;
  border:1px solid rgba(20,21,26,.06);
  border-radius:24px;
  padding:18px;
  box-shadow:var(--kb-shadow-soft);
}

.kb-wizard__frame{
  display:grid;
  grid-template-columns: 360px minmax(0,1fr);
  gap:18px;
  align-items:stretch;
}

.kb-wizard__side{
  background:linear-gradient(180deg, rgba(177,15,138,.06), rgba(255,255,255,0) 70%),
             #ffffff;
  border:1px solid rgba(20,21,26,.06);
  border-radius:22px;
  padding:18px;
  box-shadow:var(--kb-shadow-soft);
}

.kb-side__head{ margin-bottom:14px; }
.kb-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(20,21,26,.55);
  background:rgba(177,15,138,.06);
  border:1px solid rgba(177,15,138,.12);
  border-radius:999px;
  padding:8px 10px;
}
.kb-side__title{
  margin-top:10px;
  font-size:16px;
  font-weight:800;
}
.kb-side__desc{
  margin-top:6px;
  font-size:13px;
  color:var(--kb-muted);
  line-height:1.4;
}

.kb-steps{
  list-style:none;
  padding:0;
  margin:14px 0 0;
}
.kb-step{
  position:relative;
  display:grid;
  grid-template-columns: 34px 1fr;
  gap:12px;
  padding:12px 12px;
  border-radius:14px;
}
.kb-step + .kb-step{ margin-top:6px; }
.kb-step:hover{ background:rgba(20,21,26,.02); }

.kb-dot{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:2px solid rgba(20,21,26,.10);
  font-weight:800;
  font-size:13px;
  background:#fff;
}

.kb-step.is-active .kb-dot{
  border-color:rgba(177,15,138,.55);
  box-shadow:0 0 0 4px rgba(177,15,138,.10);
}
.kb-step.is-done .kb-dot{
  background:rgba(177,15,138,.12);
  border-color:rgba(177,15,138,.35);
}

.kb-step__text strong{
  display:block;
  font-size:14px;
  font-weight:800;
  color:var(--kb-text);
}
.kb-step__text small{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:var(--kb-muted);
}

/* connector line */
.kb-step::before{
  content:"";
  position:absolute;
  left:26px;
  top:42px;
  width:2px;
  height:calc(100% - 42px);
  background:rgba(20,21,26,.08);
}
.kb-step:last-child::before{ display:none; }
.kb-step.is-done::before{ background:rgba(177,15,138,.22); }

.kb-wizard__main{
  background:var(--kb-card);
  border:1px solid rgba(20,21,26,.06);
  border-radius:22px;
  box-shadow:var(--kb-shadow);
  padding:22px 22px 18px;
}

.kb-main__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.kb-kicker{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(20,21,26,.55);
  font-weight:800;
}

.kb-title{
  margin:6px 0 0;
  font-size:30px;
  line-height:1.15;
  font-weight:900;
}

.kb-subtitle{
  margin:10px 0 0;
  font-size:14px;
  color:var(--kb-muted);
  max-width:70ch;
}

.kb-topactions{ padding-top:6px; }
.kb-link{
  color:rgba(20,21,26,.55);
  text-decoration:none;
  font-weight:700;
}
.kb-link:hover{ color:rgba(20,21,26,.85); }

.kb-card{
  border:1px solid var(--kb-line);
  border-radius:18px;
  padding:16px;
  background:#fff;
}

/* ACF form styling */
.kb-wizard .acf-form{ margin:0; }
.kb-wizard .acf-fields > .acf-field{
  border-top:1px solid var(--kb-line) !important;
  padding:14px 0 !important;
}
.kb-wizard .acf-fields > .acf-field:first-child{
  border-top:0 !important;
}

.kb-wizard .acf-label label{
  font-size:13px !important;
  font-weight:800 !important;
  color:var(--kb-text) !important;
}
.kb-wizard .acf-input input[type="text"],
.kb-wizard .acf-input input[type="email"],
.kb-wizard .acf-input input[type="tel"],
.kb-wizard .acf-input input[type="number"],
.kb-wizard .acf-input select,
.kb-wizard .acf-input textarea{
  width:100% !important;
  border-radius:12px !important;
  border:1px solid var(--kb-line) !important;
  padding:12px 12px !important;
  font-size:15px !important;
  background:#fff !important;
  color:var(--kb-text) !important;
  box-shadow:none !important;
}

.kb-wizard .acf-form-submit{
  margin-top:14px !important;
  padding-top:10px !important;
  border-top:1px solid var(--kb-line) !important;
}

.kb-wizard .acf-form-submit input[type="submit"]{
  background:var(--kb-accent) !important;
  border:1px solid var(--kb-accent) !important;
  color:#fff !important;
  border-radius:10px !important;
  font-weight:900 !important;
  padding:12px 16px !important;
  font-size:14px !important;
  cursor:pointer;
}
.kb-wizard .acf-form-submit input[type="submit"]:hover{
  background:var(--kb-accent-dark) !important;
  border-color:var(--kb-accent-dark) !important;
}

/* responsive */
@media (max-width: 980px){
  .kb-wizard__frame{ grid-template-columns:1fr; }
  .kb-title{ font-size:24px; }
}
/* =========================================================
   KB Wizard UI – aanvullingen (upload stap)
   v1.0.1
   Plak onderaan je klikbrik-builder.css
========================================================= */

/* 1) Divi/Theme defaults killen die witruimte veroorzaken */
.kb-wizard #main-content,
.kb-wizard .et_pb_section,
.kb-wizard .et_pb_row,
.kb-wizard .et_pb_column{
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
}

.kb-wizard .container{
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
}

/* voorkomt gigantische lege “page height” gevoel */
.kb-wizard .kb-wizard__main{
  min-height:0 !important;
}

/* 2) Upload melding (leesbaar) */
.kb-alert{
  margin:12px 0 0;
  padding:12px 14px;
  border-radius:14px;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
  border:1px solid var(--kb-line);
  background:#fff;
  color:var(--kb-text);
}

.kb-alert--success{
  border-color:rgba(177,15,138,.20);
  background:rgba(177,15,138,.06);
  color:var(--kb-text);
}

/* 3) Gallery grid (compact, geen mega wit) */
.kb-gallery-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:10px;
}

.kb-gallery-grid img{
  width:100%;
  height:92px;
  object-fit:cover;
  border-radius:14px;
  display:block;
  border:1px solid rgba(20,21,26,.06);
}

/* 4) Upload queue items (als je per foto progress toont) */
.kb-upload-queue{
  margin-top:12px;
  display:grid;
  gap:10px;
}

.kb-upload-item{
  border:1px solid var(--kb-line);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.kb-upload-name{
  font-weight:800;
  font-size:13px;
  color:var(--kb-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:60%;
}

.kb-upload-pct{
  font-weight:900;
  font-size:13px;
  color:rgba(20,21,26,.70);
}

.kb-upload-bar{
  margin-top:8px;
  height:8px;
  border-radius:999px;
  background:rgba(20,21,26,.06);
  overflow:hidden;
}

.kb-upload-bar > span{
  display:block;
  height:100%;
  width:0%;
  background:var(--kb-accent);
  border-radius:999px;
  transition:width .15s linear;
}

/* 5) Sticky footer knop (altijd zichtbaar) */
.kb-footerbar{
  position:sticky;
  bottom:0;
  margin-top:14px;
  padding-top:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1) 60%);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* hergebruik jouw knopstijl (paars) maar dan als <a> */
.kb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:10px;
  font-weight:900;
  font-size:14px;
  text-decoration:none;
  cursor:pointer;
  border:1px solid var(--kb-line);
  background:#fff;
  color:var(--kb-text);
}

.kb-btn-primary{
  background:var(--kb-accent);
  border-color:var(--kb-accent);
  color:#fff;
}

.kb-btn-primary:hover{
  background:var(--kb-accent-dark);
  border-color:var(--kb-accent-dark);
}

.kb-btn[aria-disabled="true"]{
  opacity:.55;
  pointer-events:none;
}

/* 6) ACF gallery/uploader in wizard wat strakker */
.kb-wizard .acf-gallery{
  border:1px solid var(--kb-line) !important;
  border-radius:14px !important;
  overflow:hidden;
}

.kb-wizard .acf-gallery .acf-gallery-main{
  background:#fff !important;
}

.kb-wizard .acf-gallery .acf-gallery-toolbar{
  border-top:1px solid var(--kb-line) !important;
  background:#fff !important;
}

/* 7) mobiel */
@media (max-width: 980px){
  .kb-footerbar{
    justify-content:stretch;
  }
  .kb-btn{
    width:100%;
  }
}
/* =========================================================
   KB Wizard – submit bar links met scheidingslijn
========================================================= */

.kb-wizard .acf-form-submit{
  margin-top:18px !important;
  padding-top:16px !important;
  border-top:1px solid var(--kb-line) !important;
  display:flex;
  justify-content:flex-start; /* links */
}

/* knop zelf */
.kb-wizard .acf-form-submit input[type="submit"]{
  background:var(--kb-accent) !important;
  border:1px solid var(--kb-accent) !important;
  color:#fff !important;
  border-radius:14px !important;
  font-weight:900 !important;
  padding:14px 22px !important;
  font-size:15px !important;
  cursor:pointer;
}

.kb-wizard .acf-form-submit input[type="submit"]:hover{
  background:var(--kb-accent-dark) !important;
  border-color:var(--kb-accent-dark) !important;
}

/* geen centrering / rare margins van Divi */
.kb-wizard .acf-form-submit .acf-spinner{
  display:none !important;
}
/* =========================
   KB Upload UI aanvullingen
========================= */

.kb-upload__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

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

.kb-upload__label{
  font-weight:900;
  font-size:13px;
  margin-bottom:8px;
}

.kb-upload__help{
  margin-top:8px;
  font-size:12px;
  color:var(--kb-muted);
}

.kb-upload__grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}

@media (max-width: 980px){
  .kb-upload__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.kb-thumb{
  border:1px solid var(--kb-line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}

.kb-thumb img{
  width:100%;
  height:140px;
  object-fit:cover;
  display:block;
}

.kb-thumb__meta{
  padding:8px 10px;
  font-size:12px;
  color:var(--kb-muted);
}

.kb-thumb.is-uploading .kb-thumb__ph{
  height:140px;
  background:rgba(20,21,26,.04);
}

.kb-thumb__bar{
  height:6px;
  background:rgba(20,21,26,.06);
}
.kb-thumb__bar span{
  display:block;
  height:100%;
  width:0%;
  background:rgba(177,15,138,.55);
}

.kb-thumb.is-error{
  border-color:rgba(200,40,40,.35);
  background:rgba(200,40,40,.04);
}
.kb-thumb__err{
  padding:12px 10px;
  font-weight:900;
  color:#b91c1c;
}

.kb-upload__status{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--kb-line);
  background:#fff;
  color:var(--kb-text);
  font-weight:800;
  font-size:13px;
  min-height:42px;
  display:flex;
  align-items:center;
}

.kb-upload__status.is-busy{
  background:rgba(177,15,138,.06);
  border-color:rgba(177,15,138,.18);
}

.kb-upload__status.is-ok{
  background:rgba(16,185,129,.08);
  border-color:rgba(16,185,129,.25);
}

.kb-upload__status.is-error{
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.25);
}

/* Button links + streep erboven */
.kb-form-submit{
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid var(--kb-line);
  display:flex;
  justify-content:flex-start;
}

.kb-nextbtn{
  background:var(--kb-accent);
  border:1px solid var(--kb-accent);
  color:#fff;
  border-radius:10px;
  font-weight:900;
  padding:12px 16px;
  font-size:14px;
  cursor:pointer;
}

.kb-nextbtn:hover{
  background:var(--kb-accent-dark);
  border-color:var(--kb-accent-dark);
}

.kb-nextbtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.kb-wizard .acf-form-submit .kb-nextbtn{
  background:var(--kb-accent);
  border:1px solid var(--kb-accent);
  color:#fff;
  border-radius:10px;
  font-weight:900;
  padding:12px 16px;
  font-size:14px;
  cursor:pointer;
}
.kb-wizard .acf-form-submit .kb-nextbtn:hover{
  background:var(--kb-accent-dark);
  border-color:var(--kb-accent-dark);
}
.kb-wizard .acf-form-submit .kb-nextbtn:disabled{
  opacity:.5;
  cursor:not-allowed;
}