/* ============================================================
   Health questionnaires — shared premium quiz system.
   Used by: mens-health-quiz.html, womens-health-quiz.html,
   weight-loss-quiz.html. Rendered by /js/health-quiz-engine.js.

   Register: brand identity (navy/teal/gold, Playfair + DM Sans,
   per DESIGN.md), applied to a transactional tool surface — so
   this page is PINNED LIGHT (see .hq-wrap in the main.v3.css P9
   dark-mode block) exactly like booking/.bq-wrap/.bm-wrap/.search-wrap.

   Distinct from .bq-* (blood-test-quiz.html): richer stepper,
   serif question headings, a top-edge reveal on option hover
   (the site's card "signature detail" — see DESIGN.md §5 Cards),
   a gold badge reserved for premium-tier outcomes only.
   ============================================================ */

.hq-wrap{
  --hq-ease:cubic-bezier(.16,1,.3,1);
  max-width:640px;margin:0 auto;padding:3.25rem 1.25rem 5rem;
  box-sizing:border-box;width:100%
}

/* ── Progress ─────────────────────────────────────────────── */
.hq-progress{margin-bottom:2.25rem}
.hq-progress__row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.6rem;gap:1rem}
.hq-progress__label{font-size:.78rem;font-weight:700;color:var(--navy);letter-spacing:.02em}
.hq-progress__hint{font-size:.75rem;color:var(--muted);white-space:nowrap}
.hq-progress__track{height:6px;background:var(--teal-pale);border-radius:999px;overflow:hidden}
.hq-progress__fill{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--teal),var(--teal-mid));
  transition:width .45s var(--hq-ease)
}

/* ── Stage / panel ────────────────────────────────────────── */
.hq-stage{position:relative}
.hq-panel{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:2.1rem 1.9rem;box-shadow:var(--shadow-sm);
  animation:hq-in .32s var(--hq-ease)
}
@keyframes hq-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── Question ─────────────────────────────────────────────── */
.hq-q{
  font-size:clamp(1.2rem,3vw,1.55rem);line-height:1.32;margin:0 0 .6rem;
  text-wrap:balance
}
.hq-qhint{font-size:.85rem;color:var(--muted);line-height:1.65;margin:0 0 1.4rem}
.hq-q + .hq-options{margin-top:1.4rem}

.hq-options{display:grid;grid-template-columns:1fr;gap:.65rem}
.hq-options--2col{grid-template-columns:1fr}
@media(min-width:520px){.hq-options--2col{grid-template-columns:1fr 1fr}}

.hq-opt{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:1rem;width:100%;text-align:left;
  background:#fff;border:1.5px solid var(--border-mid);border-radius:var(--radius);
  padding:.95rem 1.15rem;cursor:pointer;font-family:var(--sans);
  transition:border-color .2s var(--hq-ease),background-color .2s var(--hq-ease),transform .15s var(--hq-ease)
}
.hq-opt::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--teal),var(--teal-mid));
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--hq-ease)
}
.hq-opt:hover{border-color:var(--teal);background:var(--teal-xpale);transform:translateY(-1px)}
.hq-opt:hover::before{transform:scaleX(1)}
.hq-opt.is-selected{border-color:var(--teal);background:var(--teal-pale);box-shadow:0 0 0 1px var(--teal) inset}
.hq-opt.is-selected::before{transform:scaleX(1)}
.hq-opt:disabled{cursor:default}
.hq-opt:disabled:not(.is-selected){opacity:.45}
.hq-opt__body{flex:1;min-width:0}
.hq-opt__label{display:block;font-weight:700;color:var(--navy);font-size:.94rem;line-height:1.4}
.hq-opt__hint{display:block;font-size:.79rem;color:var(--muted);margin-top:.2rem;line-height:1.55}
.hq-opt__check{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--border-mid);background:#fff;color:transparent;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .2s var(--hq-ease),border-color .2s var(--hq-ease)
}
.hq-opt__check svg{opacity:0;transform:scale(.4);transition:opacity .18s var(--hq-ease),transform .18s var(--hq-ease)}
.hq-opt.is-selected .hq-opt__check{background:var(--teal);border-color:var(--teal);color:#fff}
.hq-opt.is-selected .hq-opt__check svg{opacity:1;transform:scale(1)}
@media(max-width:820px){.hq-opt{min-height:44px}}

/* ── Badges ───────────────────────────────────────────────── */
.hq-badge{
  display:inline-block;padding:.32rem .85rem;border-radius:20px;
  background:var(--teal);color:#fff;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:1rem
}
.hq-badge--gold{background:var(--gold);color:var(--navy)}
.hq-badge--notice{background:#fbbf24;color:#3d2c05}

/* ── Photo step (optional bonus step — mole-checker.html) ───── */
.hq-photo{margin-top:1.4rem}
.hq-photo__input{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.hq-photo__drop{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;
  padding:2rem 1.25rem;border:1.5px dashed var(--border-mid);border-radius:var(--radius);
  cursor:pointer;color:var(--muted);transition:border-color .2s var(--hq-ease),background-color .2s var(--hq-ease)
}
.hq-photo__drop:hover{border-color:var(--teal);background:var(--teal-xpale)}
.hq-photo__drop svg{color:var(--teal);margin-bottom:.3rem}
.hq-photo__label{font-weight:700;color:var(--navy);font-size:.92rem}
.hq-photo__hint{font-size:.78rem;color:var(--muted)}
.hq-photo__preview{
  display:flex;align-items:center;gap:1rem;padding:.9rem 1rem;
  border:1.5px solid var(--border-mid);border-radius:var(--radius);background:var(--teal-xpale)
}
.hq-photo__preview img{width:64px;height:64px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#fff}
.hq-photo__remove{
  margin-left:auto;background:none;border:1.5px solid var(--border-mid);border-radius:var(--radius);
  padding:.5rem 1rem;font:inherit;font-size:.82rem;font-weight:600;color:var(--navy);cursor:pointer;
  transition:border-color .18s var(--hq-ease)
}
.hq-photo__remove:hover{border-color:var(--teal);color:var(--teal)}
.hq-photo__status{font-size:.82rem;color:var(--teal-dark);font-weight:600;margin:.7rem 0 0;min-height:1.2em}
.hq-photo__status.is-error{color:#dc2626}
@media(max-width:820px){.hq-photo__drop{min-height:44px}.hq-photo__remove{min-height:44px}}

/* ── Email gate ───────────────────────────────────────────── */
.hq-gate__h{font-size:1.3rem;margin:0 0 .6rem;text-wrap:balance}
.hq-gate__body{font-size:.9rem;color:var(--muted);line-height:1.7;margin:0 0 1.3rem}
.hq-gate__row{display:flex;gap:.6rem;flex-wrap:wrap}
.hq-gate__row input{
  flex:1;min-width:200px;padding:.75rem 1rem;border:1.5px solid var(--border-mid);
  border-radius:var(--radius);font-size:.92rem;font-family:inherit;outline:none;
  min-height:48px;transition:border-color .18s var(--hq-ease),box-shadow .18s var(--hq-ease)
}
.hq-gate__row input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,122,110,.12)}
@media(max-width:820px){.hq-gate__row input{font-size:16px}}
.hq-gate__row .btn{white-space:nowrap}
.hq-gate__err{display:none;color:#dc2626;font-size:.79rem;margin-top:.6rem}
.hq-gate__err.is-visible{display:block}
.hq-gate__note{font-size:.74rem;color:var(--muted);margin-top:.75rem;line-height:1.6}
.hq-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#hq-ts{margin-top:.7rem;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── Result ───────────────────────────────────────────────── */
.hq-result__name{font-size:clamp(1.35rem,3.2vw,1.7rem);margin:0 0 .3rem;text-wrap:balance}
.hq-result__price{font-family:var(--serif);font-size:1.3rem;font-weight:700;color:var(--teal);margin:0 0 .85rem}
.hq-result__desc{font-size:.92rem;color:#3a4552;line-height:1.75;margin:0 0 1.25rem}
.hq-included{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-direction:column;gap:.6rem}
.hq-included li{display:flex;align-items:flex-start;gap:.65rem;font-size:.87rem;color:var(--muted);line-height:1.6}
.hq-included li svg{flex-shrink:0;color:var(--teal);margin-top:.2rem}
.hq-alt{font-size:.82rem;color:var(--muted);line-height:1.65;margin:1.3rem 0 0}
.hq-alt a{color:var(--teal);font-weight:600}

/* ── Notice / safety redirect (calm advisory tone) ──────────── */
.hq-notice{text-align:left}
.hq-notice__h{font-size:1.25rem;margin:0 0 .7rem;text-wrap:balance}
.hq-notice__body{font-size:.9rem;color:var(--muted);line-height:1.75;margin:0 0 1.4rem}
.hq-notice__body strong{color:var(--navy)}

/* ── CTA row / restart ────────────────────────────────────── */
.hq-cta-row{display:flex;gap:.7rem;flex-wrap:wrap}
.hq-cta-row .btn{flex:1 1 auto;justify-content:center;min-width:0}
@media(max-width:480px){.hq-cta-row .btn{white-space:normal}}
.hq-restart{
  background:none;border:0;font:inherit;font-size:.82rem;color:var(--teal);font-weight:600;
  cursor:pointer;text-decoration:underline;padding:.3rem 0;margin-top:1.4rem;display:inline-block
}
@media(max-width:820px){.hq-restart{min-height:44px;display:inline-flex;align-items:center}}

/* ── Reduced motion ───────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .hq-wrap *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ── Mobile ───────────────────────────────────────────────── */
@media(max-width:480px){
  .hq-wrap{padding:2.25rem 1rem 3.5rem}
  .hq-panel{padding:1.5rem 1.15rem;border-radius:var(--radius)}
}