.bkwz-wegwijzer {
  --bkwz-accent: #b08d57;
  --bkwz-accent-hover: #c99a3a;
  --bkwz-heading: #0e1a2b;
  --bkwz-body: #111111;
  --bkwz-surface: #fbf7ef;
  --bkwz-surface-hover: #f5f0e8;
  --bkwz-border: #e8e1d4;
  --bkwz-border-strong: #d8c8af;
  --bkwz-muted: #5f5548;
  --bkwz-white: #ffffff;

  max-width: 760px;
  margin: 0 auto;
  color: var(--bkwz-body);
}

.bkwz-wegwijzer *,
.bkwz-wegwijzer *::before,
.bkwz-wegwijzer *::after {
  box-sizing: border-box;
}

.bkwz-wegwijzer [hidden] {
  display: none !important;
}

.bkwz-card,
.bkwz-result {
  background: var(--bkwz-surface);
  border: 1px solid var(--bkwz-border);
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(14, 26, 43, 0.07);
  padding: 28px;
}

.bkwz-progress {
  margin-bottom: 24px;
}

.bkwz-progress span {
  display: block;
  color: var(--bkwz-heading);
  font-weight: 800;
  margin-bottom: 10px;
}

.bkwz-progress__bar {
  width: 100%;
  height: 8px;
  background: var(--bkwz-border);
  border-radius: 999px;
  overflow: hidden;
}

.bkwz-progress__bar > div {
  height: 100%;
  width: 34%;
  background: var(--bkwz-accent);
  border-radius: 999px;
  transition: width 0.22s ease;
}

.bkwz-question h3 {
  color: var(--bkwz-heading);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.2;
  margin: 0 0 20px;
}

.bkwz-options {
  display: grid;
  gap: 12px;
}

.bkwz-wegwijzer .bkwz-option {
  width: 100%;
  min-height: 58px;
  text-align: left;
  border: 1px solid var(--bkwz-border-strong) !important;
  background: var(--bkwz-white) !important;
  color: var(--bkwz-body) !important;
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 1rem;
  line-height: 1.35;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.bkwz-wegwijzer .bkwz-option:hover,
.bkwz-wegwijzer .bkwz-option:focus,
.bkwz-wegwijzer .bkwz-option:focus-visible {
  border-color: var(--bkwz-accent) !important;
  background: var(--bkwz-surface-hover) !important;
  color: var(--bkwz-heading) !important;
  outline: none;
}

.bkwz-wegwijzer .bkwz-option.is-active,
.bkwz-wegwijzer .bkwz-option.is-active:hover,
.bkwz-wegwijzer .bkwz-option.is-active:focus {
  border-color: var(--bkwz-accent) !important;
  background: #f1e5cf !important;
  color: var(--bkwz-heading) !important;
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.16);
}

.bkwz-wegwijzer .bkwz-option:disabled {
  cursor: default;
  opacity: 1;
}

.bkwz-nav {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.bkwz-wegwijzer .bkwz-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding: 12px 22px;
  border-radius: 12px;
  text-decoration: none !important;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.bkwz-wegwijzer .bkwz-btn--primary {
  background: var(--bkwz-accent) !important;
  color: var(--bkwz-white) !important;
  border-color: var(--bkwz-accent) !important;
}

.bkwz-wegwijzer .bkwz-btn--primary:hover,
.bkwz-wegwijzer .bkwz-btn--primary:focus,
.bkwz-wegwijzer .bkwz-btn--primary:focus-visible {
  background: var(--bkwz-accent-hover) !important;
  color: var(--bkwz-white) !important;
  border-color: var(--bkwz-accent-hover) !important;
  outline: none;
}

.bkwz-wegwijzer .bkwz-btn--ghost {
  background: transparent !important;
  color: var(--bkwz-heading) !important;
  border-color: var(--bkwz-accent) !important;
}

.bkwz-wegwijzer .bkwz-btn--ghost:hover,
.bkwz-wegwijzer .bkwz-btn--ghost:focus,
.bkwz-wegwijzer .bkwz-btn--ghost:focus-visible {
  background: var(--bkwz-surface-hover) !important;
  color: var(--bkwz-heading) !important;
  border-color: var(--bkwz-accent-hover) !important;
  outline: none;
}

.bkwz-result {
  margin-top: 24px;
}

.bkwz-eyebrow {
  color: var(--bkwz-accent);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.bkwz-result h2 {
  color: var(--bkwz-heading);
  line-height: 1.16;
  margin: 0 0 14px;
}

.bkwz-result p {
  line-height: 1.65;
}

.bkwz-result-actions {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.bkwz-result-actions .bkwz-btn {
  width: 100%;
}

.bkwz-result__note {
  margin-top: 18px;
  font-size: 0.95rem;
  color: var(--bkwz-muted);
}

.bkwz-result__links {
  margin-top: 12px;
  font-size: 0.95rem;
  color: var(--bkwz-muted);
}

.bkwz-result__links:empty,
.bkwz-result__note:empty {
  display: none;
}

.bkwz-result__links a {
  color: var(--bkwz-accent) !important;
  font-weight: 800;
}

.bkwz-result__links a:hover,
.bkwz-result__links a:focus {
  color: var(--bkwz-accent-hover) !important;
}

.bkwz-wegwijzer .bkwz-btn.is-disabled,
.bkwz-wegwijzer .bkwz-btn.is-disabled:hover,
.bkwz-wegwijzer .bkwz-btn.is-disabled:focus {
  background: var(--bkwz-surface-hover) !important;
  color: var(--bkwz-muted) !important;
  border-color: var(--bkwz-border-strong) !important;
  cursor: not-allowed;
  opacity: 0.78;
}

@media (max-width: 700px) {
  .bkwz-wegwijzer {
    max-width: none;
  }

  .bkwz-card,
  .bkwz-result {
    padding: 22px;
    border-radius: 20px;
  }

  .bkwz-wegwijzer .bkwz-option {
    min-height: 60px;
    padding: 16px;
  }

  .bkwz-nav .bkwz-btn,
  .bkwz-wegwijzer .bkwz-btn {
    width: 100%;
  }
}