/* Blue World merk-fonts (Arlon), lokaal gebundeld zodat de plugin er hetzelfde uitziet als de site. */
@font-face {
  font-family: 'bwregular';
  src: url('../fonts/Arlon-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'bwsemibold';
  src: url('../fonts/Arlon-SemiBold.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.bw-offerte {
  --bw-blue: #000556;
  --bw-blue-2: #001a8c;
  --bw-green: #65bd7d;
  --bw-bg: #f2f3f5;
  --bw-error: #d43a3a;
  --bw-radius: 12px;
  --bw-shadow: 0 4px 24px rgba(0,5,86,.08);
  font-family: bwregular, system-ui, -apple-system, sans-serif;
  color: var(--bw-blue);
  width: 100%;
  padding: 28px 0 40px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.bw-offerte[x-cloak], .bw-offerte [x-cloak] { display: none !important; }

.bw-progress { margin-bottom: 28px; }
.bw-progress-text { font-size: 14px; color: #5a5f7a; margin-bottom: 10px; }
.bw-progress-bar { height: 12px; background: #e4e6ee; border-radius: 999px; overflow: hidden; }
.bw-progress-fill {
  height: 100%; border-radius: 999px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--bw-green) 0%, #8ad6a0 100%);
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.bw-progress-fill::after {
  content: ""; position: absolute; inset: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-160%);
  animation: bw-progress-sheen 1.8s ease-in-out infinite;
}
@keyframes bw-progress-sheen { 0% { transform: translateX(-160%); } 55%, 100% { transform: translateX(320%); } }

.bw-steps { display: grid; min-height: 380px; align-content: start; }
.bw-steps > .bw-step { grid-area: 1 / 1; }

/* Velden-layout: standaard volle breedte, .bw-field--half staat naast elkaar (2 koloms). */
.bw-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.bw-fields > .bw-field { grid-column: 1 / -1; }
.bw-fields > .bw-field--half { grid-column: span 1; }
@media (max-width: 559px) { .bw-fields > .bw-field--half { grid-column: 1 / -1; } }

.bw-step-title { font-family: bwsemibold, system-ui, sans-serif; font-size: 24px; line-height: 1.25; margin: 0 0 6px; color: var(--bw-blue); }
.bw-step-sub { color: #5a5f7a; font-size: 15px; margin: 0 0 18px; }
.bw-help { background: #eef4ff; border-radius: 10px; padding: 12px 14px; font-size: 14px; margin: 0 0 16px; }

.bw-cards { display: grid; gap: 12px; margin-bottom: 8px; }
@media (min-width: 560px) { .bw-cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.bw-card {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 14px 16px; text-align: left;
  background: #fff; border: 2px solid #e4e6ee; border-radius: var(--bw-radius);
  font: inherit; color: var(--bw-blue); cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.bw-card:hover { transform: translateY(-2px); box-shadow: var(--bw-shadow); }
.bw-card:focus-visible { outline: 3px solid var(--bw-blue-2); outline-offset: 2px; }
.bw-card.is-selected { border-color: var(--bw-blue); box-shadow: var(--bw-shadow); }
.bw-card-label { font-size: 16px; }
.bw-card-check { opacity: 0; color: var(--bw-green); font-weight: 700; font-size: 18px; }
.bw-card.is-selected .bw-card-check { opacity: 1; }

.bw-label { display: block; font-size: 14px; margin: 14px 0 6px; }
.bw-input {
  width: 100%; box-sizing: border-box; padding: 13px 14px; font: inherit;
  border: 2px solid #e4e6ee; border-radius: var(--bw-radius); background: #fff; color: var(--bw-blue);
}
.bw-input:focus { outline: none; border-color: var(--bw-blue-2); }
.bw-input[aria-invalid="true"] { border-color: var(--bw-error); }
.bw-textarea { min-height: 120px; resize: vertical; }
.bw-number { display: flex; align-items: center; gap: 10px; }
.bw-number .bw-input { flex: 1; }
.bw-unit { color: #5a5f7a; font-size: 14px; }

.bw-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; margin: 12px 0; cursor: pointer; }
.bw-check input { margin-top: 3px; }

.bw-error { color: var(--bw-error); font-size: 13px; margin: 6px 0 0; }

.bw-dropzone { border: 2px dashed #c3c8da; border-radius: var(--bw-radius); padding: 22px; text-align: center; background: #fff; }
.bw-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bw-dropzone-label { cursor: pointer; color: #5a5f7a; font-size: 14px; }
.bw-link { color: var(--bw-blue-2); text-decoration: underline; }
.bw-uploads { list-style: none; padding: 0; margin: 14px 0 0; text-align: left; }
.bw-upload-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--bw-bg); border-radius: 8px; margin-bottom: 6px; font-size: 14px; }
.bw-upload-remove { border: 0; background: none; font-size: 18px; cursor: pointer; color: #5a5f7a; }

.bw-review-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: start; padding: 10px 0; border-bottom: 1px solid #eef0f5; }
.bw-review-label { color: #5a5f7a; font-size: 13px; }
.bw-review-value { font-size: 14px; }
.bw-review-edit { border: 0; background: none; color: var(--bw-blue-2); cursor: pointer; font-size: 13px; text-decoration: underline; }
.bw-turnstile { margin-top: 18px; }
.bw-honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.bw-nav { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.bw-nav-spacer { flex: 1; }
.bw-btn, .bw-btn-ghost {
  font: inherit; font-family: bwsemibold, system-ui, sans-serif; padding: 13px 22px;
  border-radius: var(--bw-radius); cursor: pointer; border: 2px solid transparent;
}
.bw-btn { background: var(--bw-green); color: #fff; border-color: var(--bw-green); }
.bw-btn:hover { filter: brightness(.96); }
.bw-btn[disabled] { opacity: .6; cursor: default; }
.bw-btn-ghost { background: #fff; color: var(--bw-blue); border-color: #e4e6ee; }

.bw-success { text-align: center; padding: 36px 20px; }
.bw-success-check { width: 64px; height: 64px; line-height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--bw-green); color: #fff; font-size: 32px; }
.bw-success-title { font-family: bwsemibold, system-ui, sans-serif; font-size: 24px; }
.bw-success-ref { font-size: 16px; }
.bw-success-steps { text-align: left; max-width: 420px; margin: 22px auto 0; background: var(--bw-bg); border-radius: var(--bw-radius); padding: 18px 20px; }

@media (max-width: 559px) {
  .bw-nav { position: sticky; bottom: 0; background: #fff; padding: 12px 0; box-shadow: 0 -4px 16px rgba(0,5,86,.06); }
}
@media (prefers-reduced-motion: reduce) {
  .bw-card, .bw-progress-fill { transition: none; }
  .bw-progress-fill::after { animation: none; }
}