/* contractor-mortgage-eligibility.css */

/* Quiz wrapper */
.quiz-wrap { max-width:640px; margin:var(--space-xl) auto; }

/* Progress */
.quiz-progress { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-lg); }
.quiz-progress-label { font-family:var(--font-mono); font-size:0.8125rem; color:var(--text-muted); }
.quiz-dots { display:flex; gap:0.5rem; }
.quiz-dot { width:8px; height:8px; border-radius:50%; background:var(--border); transition:background 0.2s; }
.quiz-dot.active { background:var(--teal); }
.quiz-dot.done { background:var(--teal); opacity:0.4; }

/* Question card */
.quiz-card { background:var(--bg-card); border:1px solid var(--border); border-top:2px solid var(--teal); padding:var(--space-xl); display:none; }
.quiz-card.visible { display:block; }
.quiz-q { font-family:var(--font-headline); font-size:1.25rem; font-weight:600; color:var(--text-white); margin-bottom:var(--space-lg); }

/* Option buttons */
.quiz-options { display:flex; flex-direction:column; gap:0.625rem; }
.quiz-opt { display:flex; align-items:flex-start; gap:var(--space-md); padding:var(--space-md) var(--space-lg); background:var(--bg-dark); border:1px solid var(--border); cursor:pointer; text-align:left; color:var(--text-muted); font-size:0.9375rem; line-height:1.5; transition:border-color 0.15s, background 0.15s; }
.quiz-opt:hover { border-color:var(--teal); color:var(--text-white); }
.quiz-opt.selected { border-color:var(--teal); background:rgba(0,212,170,0.08); color:var(--text-white); }
.quiz-opt-key { font-family:var(--font-mono); font-size:0.75rem; color:var(--teal); flex-shrink:0; margin-top:0.1rem; min-width:1rem; }

/* Nav buttons */
.quiz-nav { display:flex; justify-content:space-between; align-items:center; margin-top:var(--space-lg); }
.quiz-back { background:none; border:1px solid var(--border); color:var(--text-muted); padding:0.5rem var(--space-md); font-size:0.875rem; cursor:pointer; }
.quiz-back:hover { border-color:var(--teal); color:var(--teal); }
.quiz-next { background:var(--teal); color:#000; padding:0.5rem var(--space-lg); font-size:0.9375rem; font-weight:600; border:none; cursor:pointer; font-family:var(--font-headline); }
.quiz-next:disabled { opacity:0.4; cursor:not-allowed; }
.quiz-next:not(:disabled):hover { background:var(--cyan); }

/* Result card */
.quiz-result { display:none; background:var(--bg-card); border:1px solid var(--border); padding:var(--space-xl); }
.quiz-result.visible { display:block; }
.result-icon { font-family:var(--font-mono); font-size:1.5rem; margin-bottom:var(--space-sm); }
.result-icon.green { color:var(--teal); }
.result-icon.amber { color:#F59E0B; }
.result-icon.red { color:#EF4444; }
.result-heading { font-family:var(--font-headline); font-size:1.375rem; font-weight:700; color:var(--text-white); margin-bottom:var(--space-md); }
.result-body { color:var(--text-muted); font-size:0.9375rem; line-height:1.8; margin-bottom:var(--space-lg); }
.result-bar { height:4px; max-width:200px; margin-bottom:var(--space-lg); border-radius:2px; }
.result-bar.green { background:var(--teal); }
.result-bar.amber { background:#F59E0B; }
.result-bar.red { background:#EF4444; }

/* Email capture form */
.quiz-form { margin-top:var(--space-lg); border-top:1px solid var(--border); padding-top:var(--space-lg); }
.form-group { margin-bottom:var(--space-md); }
.form-group label { display:block; font-family:var(--font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--teal); margin-bottom:0.375rem; }
.form-group input[type="email"] { width:100%; padding:0.625rem var(--space-md); background:var(--bg-dark); border:1px solid var(--border); color:var(--text-white); font-size:1rem; box-sizing:border-box; }
.form-group input[type="email"]:focus { outline:none; border-color:var(--teal); }
.form-note { font-size:0.8125rem; color:var(--text-muted); margin-top:var(--space-sm); font-style:italic; }
.btn-primary { background:var(--teal); color:#000; padding:0.75rem var(--space-xl); font-size:1rem; font-weight:700; border:none; cursor:pointer; font-family:var(--font-headline); width:100%; }
.btn-primary:hover { background:var(--cyan); }

/* Thank you message */
.quiz-thankyou { display:none; padding:var(--space-xl); text-align:center; border:1px solid var(--border); }
.quiz-thankyou.visible { display:block; }
.quiz-thankyou .ty-icon { font-size:2rem; color:var(--teal); margin-bottom:var(--space-md); }
.quiz-thankyou p { color:var(--text-muted); line-height:1.7; }
.quiz-thankyou a { color:var(--teal); }