/* WP Nose Shape Quiz - Vanilla CSS */
:root{
  --bg1:#F7DDE1; /* blush */
  --bg2:#F6F1EB; /* beige */
  --bg3:#E6F0FF; /* soft blue */
  --text:#111;
  --muted:#6b7280;
  --white:#fff;
  --border:#e5e7eb;
}

.wnsq-container{ max-width:520px; margin:16px auto; padding:16px; color:var(--text); }
.wnsq-card{ background:var(--white); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:0 1px 6px rgba(0,0,0,.04); }
.wnsq-center{ text-align:center; }
.wnsq-gradient{ background:linear-gradient(135deg,var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%); }
.wnsq-intro{ min-height:50vh; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:24px; padding:32px; }

/* Typography */
.wnsq-title{ font-size:22px; font-weight:700; margin:0 0 8px; color:var(--text); }
.wnsq-sub{ color:var(--muted); margin:0 auto 24px; max-width:32ch; }

/* Buttons */
.wnsq-btn{ display:inline-block; padding:12px 18px; border-radius:999px; border:1px solid var(--border); background:var(--white); color:var(--text); cursor:pointer; text-decoration:none; }
.wnsq-btn:hover{ background:#f9fafb; }
.wnsq-btn-primary{ background:var(--text); color:var(--white); border-color:var(--text); }
.wnsq-btn-primary:hover{ opacity:.92; }
.wnsq-btn-block{ width:100%; text-align:center; }

/* Options grid */
.wnsq-grid{ display:grid; gap:12px; }
.wnsq-opt{ padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--white); text-align:left; cursor:pointer; color:var(--text) !important; }
.wnsq-opt:hover{ background:#f9fafb; }

/* Ensure theme button resets don't force white text */
.wnsq-container button{ color:var(--text); }
.wnsq-container .wnsq-btn-primary{ color:var(--white); }

/* Progress */
.wnsq-progress{ height:8px; background:#f3f4f6; border-radius:999px; overflow:hidden; margin-top:16px; }
.wnsq-progress-bar{ height:100%; background:var(--text); width:0%; transition:width .25s ease; }

/* Result */
.wnsq-row{ display:flex; gap:8px; align-items:center; }
.wnsq-pill{ flex:1; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.wnsq-pill-active{ background:var(--text); color:var(--white); }
.wnsq-pill-muted{ background:#f3f4f6; color:#6b7280; }

/* Animations */
.wnsq-fade-in{ animation:wnsqFadeIn 0.8s ease-out forwards; }
@keyframes wnsqFadeIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

/* Spacing helpers */
.mt-2{ margin-top:8px }
.mt-3{ margin-top:12px }
.mt-4{ margin-top:16px }
.mt-6{ margin-top:24px }
.mb-2{ margin-bottom:8px }
.mb-3{ margin-bottom:12px }
.mb-4{ margin-bottom:16px }