/*
  widget.css
  ----------
  Alles unter .nwvc gescoped, damit nichts ins Theme ausblutet.
  Farben ueber Custom Properties — im Theme ueberschreibbar.
*/

.nwvc {
  --nwvc-ink: #17211d;
  --nwvc-soft: #5a6a63;
  --nwvc-line: rgba(23, 33, 29, .14);
  --nwvc-bg: #fff;
  --nwvc-accent: #17211d;
  --nwvc-ok-bg: #eaf6ee;   --nwvc-ok-line: #2d8a2d;  --nwvc-ok-ink: #1c5c22;
  --nwvc-no-bg: #fdecec;   --nwvc-no-line: #c8151c;  --nwvc-no-ink: #8d1015;
  --nwvc-may-bg: #fff7ed;  --nwvc-may-line: #ec8a4d; --nwvc-may-ink: #8a4a17;
  --nwvc-radius: 12px;

  font-family: inherit;
  color: var(--nwvc-ink);
  max-width: 640px;
}

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

.nwvc-card {
  background: var(--nwvc-bg);
  border: 1px solid var(--nwvc-line);
  border-radius: var(--nwvc-radius);
  padding: clamp(18px, 4vw, 28px);
}

.nwvc-title { margin: 0 0 6px; font-size: 1.25rem; line-height: 1.3; }
.nwvc-intro { margin: 0 0 20px; color: var(--nwvc-soft); font-size: .95rem; line-height: 1.55; }

.nwvc-field { margin-bottom: 16px; }
.nwvc-label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 6px; }

.nwvc-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--nwvc-ink);
  background: #fff;
  border: 1px solid var(--nwvc-line);
  border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nwvc-input:focus {
  outline: none;
  border-color: var(--nwvc-accent);
  box-shadow: 0 0 0 3px rgba(23, 33, 29, .1);
}
.nwvc-input[maxlength="17"] { letter-spacing: .06em; text-transform: uppercase; }

.nwvc-hint { display: block; margin-top: 6px; color: var(--nwvc-soft); font-size: .8rem; line-height: 1.45; }

.nwvc-consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 18px 0; font-size: .85rem; line-height: 1.5; color: var(--nwvc-soft);
  cursor: pointer;
}
.nwvc-consent input { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; cursor: pointer; }

.nwvc-btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem; font-weight: 600; font-family: inherit;
  color: #fff; background: var(--nwvc-accent);
  border: 0; border-radius: 8px; cursor: pointer;
  transition: opacity .15s ease, transform .05s ease;
}
.nwvc-btn:hover:not(:disabled) { opacity: .88; }
.nwvc-btn:active:not(:disabled) { transform: translateY(1px); }
.nwvc-btn:disabled { opacity: .55; cursor: default; }

.nwvc-privacy { margin: 12px 0 0; font-size: .75rem; line-height: 1.5; color: var(--nwvc-soft); }
.nwvc-privacy a { color: inherit; }

.nwvc-msg {
  margin-top: 16px; padding: 12px 14px;
  border-radius: 8px; font-size: .9rem; line-height: 1.5;
  background: #f4f6f5; border-left: 3px solid var(--nwvc-line);
}
.nwvc-msg--warn { background: var(--nwvc-may-bg); border-left-color: var(--nwvc-may-line); color: var(--nwvc-may-ink); }

.nwvc-result { margin-top: 20px; }

.nwvc-verdict { padding: 16px 18px; border-radius: 10px; border-left: 4px solid; }
.nwvc-verdict--ok    { background: var(--nwvc-ok-bg);  border-left-color: var(--nwvc-ok-line);  color: var(--nwvc-ok-ink); }
.nwvc-verdict--no    { background: var(--nwvc-no-bg);  border-left-color: var(--nwvc-no-line);  color: var(--nwvc-no-ink); }
.nwvc-verdict--maybe { background: var(--nwvc-may-bg); border-left-color: var(--nwvc-may-line); color: var(--nwvc-may-ink); }

.nwvc-verdict-head { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.nwvc-verdict-text { margin: 0; font-size: .92rem; line-height: 1.6; }
.nwvc-vehicle { margin: 10px 0 0; font-size: .8rem; opacity: .8; }

.nwvc-products { display: grid; gap: 10px; margin-top: 14px; }

.nwvc-product {
  display: grid; gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--nwvc-line); border-radius: 10px;
  text-decoration: none; color: var(--nwvc-ink);
  transition: border-color .15s ease, background .15s ease;
}
.nwvc-product:hover { border-color: var(--nwvc-accent); background: #fafbfa; }
.nwvc-product-title { font-weight: 600; font-size: .95rem; }
.nwvc-product-for { font-size: .8rem; color: var(--nwvc-soft); }
.nwvc-product-hint { font-size: .82rem; line-height: 1.55; color: var(--nwvc-ink); opacity: .85; margin-top: 4px; }
.nwvc-product-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }

.nwvc-badge {
  font-size: .72rem; padding: 3px 8px; border-radius: 99px;
  background: #eef1f0; color: var(--nwvc-soft);
}
.nwvc-price { font-weight: 600; font-size: .9rem; }

.nwvc-vinlist { display: grid; gap: 8px; margin-top: 12px; }
.nwvc-vinpick {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 12px 14px; font-family: inherit; font-size: .9rem; text-align: left;
  background: #fff; border: 1px solid var(--nwvc-line); border-radius: 8px; cursor: pointer;
}
.nwvc-vinpick:hover { border-color: var(--nwvc-accent); }
.nwvc-vinpick-vin { font-weight: 600; letter-spacing: .04em; }
.nwvc-vinpick-meta { color: var(--nwvc-soft); font-size: .8rem; }

.nwvc.is-busy .nwvc-input { opacity: .7; }

@media (max-width: 480px) {
  .nwvc-card { padding: 18px 16px; }
  .nwvc-title { font-size: 1.1rem; }
}

/* ---------- Dreischritt-Ablauf ---------- */

.nwvc-steps {
  display: flex; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0;
  counter-reset: none;
}
.nwvc-step {
  flex: 1; display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--nwvc-soft);
  padding-top: 10px; border-top: 3px solid var(--nwvc-line);
  transition: border-color .2s ease, color .2s ease;
}
.nwvc-step-num {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--nwvc-line); color: var(--nwvc-ink);
  font-size: .7rem; font-weight: 700;
}
.nwvc-step.is-active { border-top-color: var(--nwvc-accent); color: var(--nwvc-ink); font-weight: 600; }
.nwvc-step.is-active .nwvc-step-num { background: var(--nwvc-accent); color: #fff; }
.nwvc-step.is-done { border-top-color: var(--nwvc-ok-line); color: var(--nwvc-ok-ink); }
.nwvc-step.is-done .nwvc-step-num { background: var(--nwvc-ok-line); color: #fff; }
.nwvc-step.is-done .nwvc-step-num::after { content: '✓'; }
.nwvc-step.is-done .nwvc-step-num { font-size: .72rem; }
.nwvc-step.is-done .nwvc-step-num { text-indent: -9999px; overflow: hidden; position: relative; }
.nwvc-step.is-done .nwvc-step-num::after {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-indent: 0;
}

.nwvc-frage { margin: 0 0 14px; font-size: 1rem; font-weight: 600; line-height: 1.45; }

.nwvc-choice { display: grid; gap: 10px; }
.nwvc-choice-btn {
  display: grid; gap: 3px; text-align: left; cursor: pointer;
  padding: 14px 16px; font-family: inherit;
  background: #fff; border: 1px solid var(--nwvc-line); border-radius: 10px;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.nwvc-choice-btn:hover { border-color: var(--nwvc-accent); background: #fafbfa; }
.nwvc-choice-btn:active { transform: translateY(1px); }
.nwvc-choice-btn.is-selected { border-color: var(--nwvc-accent); background: #f4f6f5; }
.nwvc-choice-title { font-weight: 600; font-size: .95rem; color: var(--nwvc-ink); }
.nwvc-choice-sub { font-size: .8rem; color: var(--nwvc-soft); }

.nwvc-row { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.nwvc-row .nwvc-btn { flex: 1; margin: 0; }

.nwvc-back {
  flex: 0 0 auto; padding: 14px 16px; font-family: inherit; font-size: .9rem;
  color: var(--nwvc-soft); background: transparent;
  border: 1px solid var(--nwvc-line); border-radius: 8px; cursor: pointer;
}
.nwvc-back:hover { border-color: var(--nwvc-accent); color: var(--nwvc-ink); }

.nwvc-cta { margin-left: auto; font-size: .82rem; color: var(--nwvc-soft); }
.nwvc-product-meta { justify-content: flex-start; width: 100%; }

.nwvc-restart {
  display: block; width: 100%; margin-top: 14px; padding: 12px;
  font-family: inherit; font-size: .85rem; color: var(--nwvc-soft);
  background: transparent; border: 1px dashed var(--nwvc-line);
  border-radius: 8px; cursor: pointer;
}
.nwvc-restart:hover { border-color: var(--nwvc-accent); color: var(--nwvc-ink); }

@media (max-width: 480px) {
  .nwvc-step-label { display: none; }
  .nwvc-step { justify-content: center; }
}