/* Styles for what this plugin renders: the CTA buttons, the quiz and the
   result screen. The page shell — canvas, type, cards, footer — belongs to
   the theme. Every colour is read from the theme's tokens with a fallback,
   so the plugin still looks right if it is ever dropped on another theme. */

.nb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.7rem; border:0; border-radius:999px; cursor:pointer;
  font:600 1rem/1.2 inherit; text-decoration:none;
  transition:background .15s,box-shadow .15s,transform .1s;
}
.nb-btn--primary{
  background:var(--nb-accent,#ff6b1f); color:#0c0d0e;
  box-shadow:0 10px 26px -10px color-mix(in srgb,var(--nb-accent,#ff6b1f) 75%,transparent);
}
.nb-btn--primary:hover{ background:var(--nb-accent-deep,#e0560c); color:#0c0d0e; }
.nb-btn--ghost{
  background:transparent; color:var(--nb-ink,#f5f4f1);
  box-shadow:inset 0 0 0 1px var(--nb-hairline,#2a2c30);
}
.nb-btn--ghost:hover{ box-shadow:inset 0 0 0 1px var(--nb-muted,#9c9ea4); }
.nb-btn:active{ transform:translateY(1px); }
.nb-btn--wide{ width:100%; }
.nb-btn:focus-visible{ outline:2px solid var(--nb-accent,#ff6b1f); outline-offset:3px; }

.nb-cta{ margin:2rem 0; display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
.nb-cta__sub{ color:var(--nb-muted,#9c9ea4); font-size:.875rem; }

/* ───────────────────────────────────────────────────────────────── quiz */

.nb-quiz{ max-width:34rem; margin:0 auto; }
.nb-q{
  border:0; margin:0; padding:1.9rem;
  background:var(--nb-card,#151618); border:1px solid var(--nb-hairline,#2a2c30);
  border-radius:var(--nb-radius,20px);
}
.nb-q__progress{
  margin:0 0 .8rem; color:var(--nb-muted,#9c9ea4); font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; font-weight:600;
}
.nb-q__eyebrow{
  margin:0 0 .35rem; color:var(--nb-accent,#ff6b1f); font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; font-weight:700;
}
.nb-q__title{
  margin:0 0 .8rem; padding:0; font-family:var(--nb-display,inherit);
  font-size:1.45rem; font-weight:700; line-height:1.2; letter-spacing:-.02em;
  color:var(--nb-ink,#f5f4f1);
}
.nb-q__hint{ margin:0 0 1.1rem; color:var(--nb-muted,#9c9ea4); font-size:.9375rem; }
.nb-q__opts{ display:grid; gap:.55rem; }
.nb-opt{
  display:flex; align-items:center; gap:.8rem; padding:.95rem 1.05rem;
  border-radius:calc(var(--nb-radius,20px) * .6);
  background:var(--nb-sunken,#1c1d20);
  box-shadow:inset 0 0 0 1px var(--nb-hairline,#2a2c30);
  cursor:pointer; color:var(--nb-ink,#f5f4f1); transition:box-shadow .12s,background .12s;
}
.nb-opt:hover{ box-shadow:inset 0 0 0 1px var(--nb-muted,#9c9ea4); }
.nb-opt input{ accent-color:var(--nb-accent,#ff6b1f); width:1.15rem; height:1.15rem; flex:0 0 auto; }
.nb-opt:has(input:checked){
  background:var(--nb-accent-soft,#2b1a10);
  box-shadow:inset 0 0 0 2px var(--nb-accent,#ff6b1f);
}
.nb-q__nav{ display:flex; gap:.75rem; margin-top:1.4rem; }
.nb-q__nav:empty{ display:none; }

.nb-result__text{ color:var(--nb-muted,#9c9ea4); margin:0 0 1.2rem; }
.nb-result__list{ margin:0 0 1.6rem; padding:0; list-style:none; display:grid; gap:.65rem; }
.nb-result__list li{ position:relative; padding-left:1.7rem; color:var(--nb-ink,#f5f4f1); }
.nb-result__list li::before{
  content:""; position:absolute; left:0; top:.5em; width:.7rem; height:.7rem;
  border-radius:50%; background:var(--nb-save,#34d583);
}
.nb-result__legal{ margin:1.2rem 0 0; color:var(--nb-muted,#9c9ea4); font-size:.82rem; line-height:1.55; }
.nb-result__legal a{ color:var(--nb-muted,#9c9ea4); text-decoration:underline; }

@media (max-width:30rem){
  .nb-q{ padding:1.3rem; }
  .nb-q__title{ font-size:1.25rem; }
  .nb-q__nav{ flex-direction:column-reverse; }
  .nb-q__nav .nb-btn{ width:100%; }
}