/* ── HUSH QUIZ — Frontend Styles ──────────────────────── */
/* Colors injected as CSS variables by JS from WP options  */

.hush-quiz-root {
  --hq-blue:   #0652fc;
  --hq-pink:   #f769d9;
  --hq-lime:   #b6fc7e;
  --hq-black:  #000000;
  --hq-white:  #ffffff;
  --hq-coral:  #ffb9ae;
  --hq-sand:   #e5dbd6;
  --hq-dodger: #90d1fc;
  --hq-lilac:  #dcacfc;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--hq-white);
  color: var(--hq-black);
  max-width: 740px;
  margin: 0 auto;
  padding: 44px 20px 80px;
  box-sizing: border-box;
}
.hush-quiz-root *, .hush-quiz-root *::before, .hush-quiz-root *::after { box-sizing: border-box; }

/* Loading */
.hq-loading { display:flex; flex-direction:column; align-items:center; gap:16px; padding:80px 0; }
.hq-logo-inline { font-size:48px; font-weight:900; color:var(--hq-blue); letter-spacing:-2px; }
.hq-loading-dots { display:flex; gap:6px; }
.hq-loading-dots span { width:8px; height:8px; border-radius:50%; background:var(--hq-pink); animation:hqDot .9s infinite; }
.hq-loading-dots span:nth-child(2){ animation-delay:.2s; background:var(--hq-blue); }
.hq-loading-dots span:nth-child(3){ animation-delay:.4s; background:var(--hq-lime); }
@keyframes hqDot { 0%,80%,100%{transform:scale(0.6);opacity:.4} 40%{transform:scale(1);opacity:1} }

/* Header */
.hq-header { text-align:center; margin-bottom:40px; }
.hq-logo { font-size:52px; font-weight:900; letter-spacing:-2px; line-height:1; color:var(--hq-blue); display:block; margin-bottom:4px; }
.hq-logo em { color:var(--hq-pink); font-style:normal; }
.hq-logo-sub { display:block; font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--hq-blue); opacity:.55; margin-bottom:18px; }
.hq-pill { display:inline-block; background:var(--hq-lime); color:var(--hq-black); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:6px 18px; border-radius:50px; margin-bottom:14px; }
.hq-header h1 { font-size:clamp(1.6rem,5vw,2.4rem); font-weight:900; margin-bottom:8px; line-height:1.15; }
.hq-header h1 em { color:var(--hq-blue); font-style:normal; }
.hq-header p { font-size:13px; color:#555; line-height:1.6; }

/* Progress */
.hq-prog-wrap { margin-bottom:36px; }
.hq-prog-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.hq-prog-label { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--hq-blue); }
.hq-prog-pct   { font-size:11px; font-weight:700; color:#aaa; }
.hq-prog-bar   { height:4px; background:#eee; border-radius:4px; overflow:hidden; }
.hq-prog-fill  { height:100%; border-radius:4px; background:var(--hq-blue); transition:width .6s cubic-bezier(.4,0,.2,1); }
.hush-quiz-root.mode-her .hq-prog-fill { background:var(--hq-pink); }
.hush-quiz-root.mode-him .hq-prog-fill { background:var(--hq-blue); }

/* Steps */
.hq-step { display:none; }
.hq-step.active { display:block; animation:hqUp .38s ease both; }
@keyframes hqUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

.hq-q-tag { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; padding:4px 12px; border-radius:50px; margin-bottom:12px; }
.hq-tag-blue { background:var(--hq-blue); color:var(--hq-white); }
.hq-tag-pink { background:var(--hq-pink); color:var(--hq-white); }
.hq-tag-lime { background:var(--hq-lime); color:var(--hq-black); }

.hq-step h2 { font-size:clamp(1.3rem,4vw,1.75rem); font-weight:900; margin-bottom:6px; line-height:1.2; }
.hq-step .hq-sub { font-size:12px; color:#666; margin-bottom:26px; line-height:1.5; }

/* Grid */
.hq-grid { display:grid; gap:12px; margin-bottom:28px; }
.hq-grid.cols-2 { grid-template-columns:1fr 1fr; }
.hq-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.hq-grid.cols-4 { grid-template-columns:repeat(2,1fr); }
@media(max-width:460px){ .hq-grid.cols-3 { grid-template-columns:1fr 1fr; } }

/* Option card */
.hq-opt {
  cursor:pointer; position:relative;
  border:2.5px solid #eee; border-radius:16px; overflow:hidden;
  background:var(--hq-white);
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  transition:all .2s ease;
}
.hq-opt:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.12); }
.hq-opt.her-opt:hover  { border-color:var(--hq-pink); }
.hq-opt.him-opt:hover  { border-color:var(--hq-blue); }
.hq-opt.neu-opt:hover  { border-color:var(--hq-lime); }
.hq-opt.her-opt.picked { border-color:var(--hq-pink); background:#fff6fe; }
.hq-opt.him-opt.picked { border-color:var(--hq-blue); background:#f0f4ff; }
.hq-opt.neu-opt.picked { border-color:var(--hq-blue); background:#f0f4ff; }

/* Tick */
.hq-tick {
  position:absolute; top:8px; right:8px;
  width:26px; height:26px; border-radius:50%;
  display:none; align-items:center; justify-content:center; z-index:3;
}
.hq-opt.picked .hq-tick { display:flex; }
.hq-opt.her-opt.picked .hq-tick { background:var(--hq-pink); }
.hq-opt.him-opt.picked .hq-tick { background:var(--hq-blue); }
.hq-opt.neu-opt.picked .hq-tick { background:var(--hq-blue); }
.hq-tick svg { width:13px; height:13px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

/* Image */
.hq-img-wrap { width:100%; aspect-ratio:1/1; overflow:hidden; position:relative; }
.hq-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.hq-opt:hover .hq-img-wrap img { transform:scale(1.05); }

/* Placeholder */
.hq-ph { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.hq-ph-her  { background:#fce8fa; }
.hq-ph-him  { background:#eaf1ff; }
.hq-ph-lime { background:#f3ffe8; }
.hq-ph-dark { background:var(--hq-black); }
.hq-ph svg  { width:40px; height:40px; }
.hq-ph-lbl  { font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.hq-ph-her  .hq-ph-lbl { color:var(--hq-pink); }
.hq-ph-him  .hq-ph-lbl { color:var(--hq-blue); }
.hq-ph-lime .hq-ph-lbl { color:#5a8a00; }
.hq-ph-dark .hq-ph-lbl { color:var(--hq-lime); }

/* Caption */
.hq-cap { padding:11px 13px 13px; text-align:center; }
.hq-cap strong { display:block; font-size:13px; font-weight:800; margin-bottom:3px; }
.hq-cap span   { font-size:11px; color:#777; font-weight:400; line-height:1.4; display:block; }

/* Nav */
.hq-nav { display:flex; gap:10px; margin-top:4px; }
.hq-btn-back {
  padding:11px 22px; border:2px solid #ddd; background:transparent;
  border-radius:50px; font-family:inherit; font-size:11px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:#888; cursor:pointer; transition:all .2s;
}
.hq-btn-back:hover { border-color:var(--hq-blue); color:var(--hq-blue); }
.hq-btn-next {
  flex:1; padding:13px 24px; border:none; border-radius:50px;
  font-family:inherit; font-size:11px; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; cursor:pointer; transition:all .22s;
  background:var(--hq-blue); color:var(--hq-white);
}
.hq-btn-next:hover:not(:disabled) { background:var(--hq-pink); transform:translateY(-1px); }
.hq-btn-next:disabled { opacity:.28; cursor:not-allowed; transform:none; }
.hush-quiz-root.mode-him .hq-btn-next { background:var(--hq-black); color:var(--hq-lime); }
.hush-quiz-root.mode-him .hq-btn-next:hover:not(:disabled) { background:var(--hq-blue); color:var(--hq-white); }

/* Result */
.hq-result { text-align:center; }
.hq-res-badge { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; padding:5px 16px; border-radius:50px; margin-bottom:20px; }
.hq-res-badge.her-badge { background:var(--hq-pink); color:var(--hq-white); }
.hq-res-badge.him-badge { background:var(--hq-blue); color:var(--hq-lime); }

.hq-res-circle { width:160px; height:160px; border-radius:50%; overflow:hidden; margin:0 auto 22px; border:4px solid var(--hq-lime); }
.hq-res-circle-inner { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.hq-res-circle-inner.her-bg { background:var(--hq-pink); }
.hq-res-circle-inner.him-bg { background:var(--hq-blue); }
.hq-res-circle-inner img { width:100%; height:100%; object-fit:cover; }
.hq-res-circle-inner svg { width:60px; height:60px; opacity:.5; }

.hq-result h2 { font-size:clamp(1.6rem,5vw,2.2rem); font-weight:900; margin-bottom:6px; }
.hq-res-scent { font-size:12px; color:#888; font-weight:700; letter-spacing:.06em; margin-bottom:32px; }

.hq-res-card { border-radius:16px; padding:26px 22px; text-align:left; margin-bottom:16px; }
.hq-res-card.her-card { background:#fff0fd; border:2px solid var(--hq-pink); }
.hq-res-card.him-card { background:#eef2ff; border:2px solid var(--hq-blue); }
.hq-res-card .hq-rc-tag { font-size:9px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; margin-bottom:8px; }
.hq-res-card.her-card .hq-rc-tag { color:var(--hq-pink); }
.hq-res-card.him-card .hq-rc-tag { color:var(--hq-blue); }
.hq-res-card h3 { font-size:1.3rem; font-weight:900; margin-bottom:4px; }
.hq-res-card p  { font-size:12px; color:#666; line-height:1.6; margin-bottom:6px; }
.hq-price { font-size:18px; font-weight:900; color:var(--hq-blue); margin:8px 0; }

.hq-res-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.hq-btn-cart {
  flex:1; min-width:140px; padding:13px 20px; border:none; border-radius:50px;
  font-family:inherit; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; transition:all .22s; background:var(--hq-blue); color:var(--hq-white);
}
.hq-btn-cart:hover { background:var(--hq-pink); transform:translateY(-1px); }
.hq-btn-cart.adding { opacity:.6; cursor:wait; }
.hq-btn-cart.added  { background:#22a355; }
.hq-btn-view {
  padding:13px 20px; border:2px solid #ddd; border-radius:50px; background:transparent;
  font-family:inherit; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#555; text-decoration:none; transition:all .2s; display:inline-flex; align-items:center;
}
.hq-btn-view:hover { border-color:var(--hq-blue); color:var(--hq-blue); }

.hush-quiz-root.mode-him .hq-btn-cart { background:var(--hq-black); color:var(--hq-lime); }
.hush-quiz-root.mode-him .hq-btn-cart:hover { background:var(--hq-blue); color:var(--hq-white); }

.hq-duo-card { border-radius:14px; padding:18px 20px; margin-bottom:28px; text-align:left; background:var(--hq-lime); }
.hq-duo-tag  { font-size:9px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--hq-black); margin-bottom:6px; }
.hq-duo-card p { font-size:12px; color:var(--hq-black); line-height:1.65; font-weight:700; }

.hq-btn-restart {
  padding:12px 32px; border:2px solid #ddd; background:transparent;
  border-radius:50px; font-family:inherit; font-size:11px; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; color:#888; cursor:pointer; transition:all .2s;
}
.hq-btn-restart:hover { border-color:var(--hq-blue); color:var(--hq-blue); }

/* Bundles */
.hq-bundles-card { background:var(--hq-black); color:var(--hq-white); border-radius:20px; padding:44px 28px; text-align:center; }
.hq-bundles-card .hq-b-logo { font-size:36px; font-weight:900; color:var(--hq-blue); margin-bottom:6px; letter-spacing:-1px; display:block; }
.hq-bundles-card .hq-b-logo em { color:var(--hq-lime); font-style:normal; }
.hq-bundles-card h3 { font-size:1.5rem; font-weight:900; margin-bottom:10px; }
.hq-bundles-card p  { font-size:13px; color:rgba(255,255,255,.6); line-height:1.7; margin-bottom:26px; }
.hq-btn-bundles {
  display:inline-block; padding:13px 32px; background:var(--hq-lime); color:var(--hq-black);
  border-radius:50px; font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; transition:background .2s;
}
.hq-btn-bundles:hover { background:var(--hq-blue); color:var(--hq-white); }