/* ============================================
   QUIZ - Step Wizard UI
   ============================================ */

/* --- Hero --- */
.quiz-hero{position:relative;min-height:55vh;display:flex;align-items:center;justify-content:center;background:url('/images/hero.jpeg') center center/cover no-repeat;padding:7rem 0 3rem}
.quiz-hero-overlay{position:absolute;inset:0;background:rgba(248,245,240,0.88)}
.quiz-hero-inner{position:relative;z-index:1;text-align:center;max-width:650px;margin:0 auto}
.quiz-hero-inner h1{font-family:var(--font-heading);font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;color:var(--dark);margin-bottom:1rem}
.quiz-hero-inner p{font-size:1.1rem;line-height:1.7;color:#555;margin-bottom:0}

/* --- Wizard Container --- */
.quiz-wizard{max-width:680px;margin:0 auto;padding:3rem 0 4rem}

/* --- Progress Bar --- */
.quiz-progress{margin-bottom:2.5rem}
.quiz-progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem}
.quiz-progress-label{font-size:0.85rem;font-weight:600;color:var(--teal)}
.quiz-progress-count{font-size:0.85rem;color:#888}
.quiz-progress-bar{height:6px;background:#e8e4e0;border-radius:3px;overflow:hidden}
.quiz-progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),#3d9a97);border-radius:3px;transition:width 0.5s cubic-bezier(0.4,0,0.2,1)}

/* --- Step (each question) --- */
.quiz-step{display:none;animation:quizFadeIn 0.4s ease}
.quiz-step.active{display:block}

@keyframes quizFadeIn{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}

/* --- Question Card --- */
.quiz-question-card{background:#fff;border-radius:20px;padding:2.5rem;box-shadow:0 4px 24px rgba(0,0,0,0.06)}
.quiz-question-number{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.8rem;font-weight:600;color:var(--teal);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:1rem}
.quiz-question-number span{width:28px;height:28px;background:var(--teal);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.85rem;letter-spacing:0}
.quiz-question-text{font-family:var(--font-heading);font-size:1.35rem;font-weight:600;color:var(--dark);line-height:1.4;margin-bottom:0.5rem}
.quiz-question-help{font-size:0.9rem;color:#888;margin-bottom:1.5rem}

/* --- Answer Options (Radio / Checkbox) --- */
.quiz-options{display:flex;flex-direction:column;gap:0.625rem}
.quiz-option{position:relative;cursor:pointer;transition:all 0.25s ease}
.quiz-option input{position:absolute;opacity:0;width:0;height:0}
.quiz-option-label{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;border:2px solid #e8e4e0;border-radius:14px;transition:all 0.25s ease;background:#fff}
.quiz-option-label:hover{border-color:rgba(43,122,120,0.3);background:rgba(43,122,120,0.02)}
.quiz-option-check{width:24px;height:24px;border-radius:50%;border:2px solid #d1d5db;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.25s ease}
.quiz-option-check svg{opacity:0;transition:opacity 0.2s ease}
.quiz-option-text{font-size:1rem;color:#444;font-weight:500;line-height:1.4}

/* Checked state */
.quiz-option input:checked ~ .quiz-option-label{border-color:var(--teal);background:rgba(43,122,120,0.05);box-shadow:0 0 0 1px var(--teal)}
.quiz-option input:checked ~ .quiz-option-label .quiz-option-check{background:var(--teal);border-color:var(--teal)}
.quiz-option input:checked ~ .quiz-option-label .quiz-option-check svg{opacity:1}
.quiz-option input:checked ~ .quiz-option-label .quiz-option-text{color:var(--dark);font-weight:600}

/* Checkbox variant */
.quiz-option.checkbox .quiz-option-check{border-radius:6px}

/* --- Scale Options --- */
.quiz-scale{display:flex;gap:0.5rem}
.quiz-scale-option{flex:1;position:relative;cursor:pointer}
.quiz-scale-option input{position:absolute;opacity:0;width:0;height:0}
.quiz-scale-label{display:flex;align-items:center;justify-content:center;height:52px;border:2px solid #e8e4e0;border-radius:12px;font-size:1rem;font-weight:600;color:#666;transition:all 0.25s ease;background:#fff}
.quiz-scale-option:hover .quiz-scale-label{border-color:rgba(43,122,120,0.3);color:var(--teal)}
.quiz-scale-option input:checked ~ .quiz-scale-label{border-color:var(--teal);background:var(--teal);color:#fff;box-shadow:0 4px 12px rgba(43,122,120,0.25)}
.quiz-scale-ends{display:flex;justify-content:space-between;margin-top:0.5rem;font-size:0.8rem;color:#999}

/* --- Text Input --- */
.quiz-textarea{width:100%;padding:1rem 1.25rem;border:2px solid #e8e4e0;border-radius:14px;font-size:1rem;font-family:inherit;resize:vertical;min-height:100px;transition:all 0.2s ease;outline:none;background:#fff}
.quiz-textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(43,122,120,0.1)}

/* --- Contact Info Step --- */
.quiz-contact-intro{text-align:center;margin-bottom:2rem}
.quiz-contact-intro svg{color:var(--teal);margin-bottom:1rem}
.quiz-contact-intro h3{font-family:var(--font-heading);font-size:1.25rem;color:var(--dark);margin-bottom:0.5rem}
.quiz-contact-intro p{font-size:0.95rem;color:#666;line-height:1.6}
.quiz-form-group{margin-bottom:1.25rem}
.quiz-form-label{display:block;font-weight:600;color:var(--dark);font-size:0.9rem;margin-bottom:0.4rem}
.quiz-form-label .required{color:#ef4444;margin-left:2px}
.quiz-form-input{width:100%;padding:0.875rem 1.25rem;border:2px solid #e8e4e0;border-radius:14px;font-size:1rem;font-family:inherit;transition:all 0.2s ease;outline:none;background:#fff}
.quiz-form-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(43,122,120,0.1)}
.quiz-form-input::placeholder{color:#aaa}

/* --- Navigation Buttons --- */
.quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;gap:1rem}
.quiz-btn-back{display:inline-flex;align-items:center;gap:0.5rem;padding:0.85rem 1.5rem;background:#fff;color:#666;font-weight:600;font-size:0.95rem;border:2px solid #e8e4e0;border-radius:50px;cursor:pointer;transition:all 0.2s ease}
.quiz-btn-back:hover{border-color:#ccc;color:var(--dark)}
.quiz-btn-back:disabled{opacity:0.4;cursor:not-allowed}
.quiz-btn-next{display:inline-flex;align-items:center;gap:0.5rem;padding:0.85rem 2rem;background:var(--teal);color:#fff;font-weight:600;font-size:0.95rem;border:none;border-radius:50px;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(43,122,120,0.25);margin-left:auto}
.quiz-btn-next:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(43,122,120,0.35)}
.quiz-btn-next:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none}
.quiz-btn-next svg{transition:transform 0.2s}
.quiz-btn-next:hover svg{transform:translateX(3px)}
.quiz-btn-submit{display:flex;align-items:center;justify-content:center;gap:0.75rem;width:100%;padding:1.1rem 2rem;background:linear-gradient(135deg,var(--teal,#2B7A78) 0%,#236865 100%);color:#fff;font-weight:600;font-size:1.05rem;border:none;border-radius:50px;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(43,122,120,0.3);margin-top:2rem}
.quiz-btn-submit:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(43,122,120,0.35)}

/* --- Welcome Step --- */
.quiz-welcome{text-align:center;padding:1rem 0}
.quiz-welcome-icon{width:80px;height:80px;border-radius:50%;background:rgba(43,122,120,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;color:var(--teal)}
.quiz-welcome h2{font-family:var(--font-heading);font-size:1.5rem;color:var(--dark);margin-bottom:0.75rem}
.quiz-welcome p{font-size:1rem;color:#666;line-height:1.7;margin-bottom:0}
.quiz-welcome-features{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.quiz-welcome-feat{display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;color:#555;font-weight:500}
.quiz-welcome-feat svg{color:var(--teal);flex-shrink:0}

/* --- Validation Error --- */
.quiz-error{color:#ef4444;font-size:0.85rem;margin-top:0.5rem;display:none}
.quiz-error.show{display:block}

/* ============================================
   RESULTS PAGE
   ============================================ */

.quiz-results-card{background:#fff;border-radius:20px;padding:3rem;box-shadow:0 4px 24px rgba(0,0,0,0.06);text-align:center}

/* Score Circle */
.quiz-score-wrap{margin-bottom:2rem}
.quiz-score-circle{width:140px;height:140px;border-radius:50%;background:linear-gradient(135deg,var(--teal),#3d9a97);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 1rem;box-shadow:0 8px 30px rgba(43,122,120,0.3)}
.quiz-score-value{font-size:2.75rem;font-weight:700;line-height:1}
.quiz-score-label{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;opacity:0.85;margin-top:0.25rem}
.quiz-score-text{font-size:0.9rem;color:#888}

/* Result Content */
.quiz-result-section{padding:2rem 0;border-top:1px solid #f0ece8}
.quiz-result-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.quiz-result-icon.high{background:rgba(16,185,129,0.1);color:#059669}
.quiz-result-icon.medium{background:rgba(43,122,120,0.1);color:var(--teal)}
.quiz-result-icon.low{background:rgba(99,102,241,0.1);color:#6366f1}
.quiz-result-title{font-family:var(--font-heading);font-size:1.3rem;color:var(--dark);margin-bottom:0.75rem}
.quiz-result-text{font-size:1.05rem;color:#666;line-height:1.7;max-width:520px;margin:0 auto}

/* CTA */
.quiz-cta-section{padding:2rem 0;border-top:1px solid #f0ece8}
.quiz-cta-title{font-family:var(--font-heading);font-size:1.15rem;color:var(--dark);margin-bottom:0.5rem}
.quiz-cta-desc{font-size:0.95rem;color:#666;margin-bottom:1.5rem}
.quiz-cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.quiz-cta-primary{display:inline-flex;align-items:center;gap:0.5rem;padding:0.9rem 1.75rem;background:var(--teal);color:#fff;font-weight:600;border-radius:50px;text-decoration:none;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(43,122,120,0.25)}
.quiz-cta-primary:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(43,122,120,0.35)}
.quiz-cta-secondary{display:inline-flex;align-items:center;gap:0.5rem;padding:0.9rem 1.75rem;background:rgba(43,122,120,0.08);color:var(--teal);font-weight:500;border-radius:50px;text-decoration:none;border:1.5px solid rgba(43,122,120,0.2);transition:all 0.2s ease}
.quiz-cta-secondary:hover{background:rgba(43,122,120,0.12)}

/* Next Steps */
.quiz-next-steps{background:#fff;border-radius:20px;padding:2.5rem;box-shadow:0 4px 24px rgba(0,0,0,0.06);margin-top:1.5rem}
.quiz-next-steps h3{font-family:var(--font-heading);font-size:1.2rem;color:var(--dark);margin-bottom:1.5rem;text-align:center}
.quiz-steps-list{display:flex;flex-direction:column;gap:0}
.quiz-step-item{display:flex;align-items:flex-start;gap:1.25rem;padding:1.25rem 0;border-bottom:1px solid #f0ece8}
.quiz-step-item:last-child{border-bottom:none;padding-bottom:0}
.quiz-step-item:first-child{padding-top:0}
.quiz-step-num{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--teal),#3d9a97);color:#fff;font-weight:700;font-size:0.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 10px rgba(43,122,120,0.2)}
.quiz-step-content strong{display:block;color:var(--dark);font-size:0.95rem;margin-bottom:0.2rem}
.quiz-step-content p{color:#666;font-size:0.9rem;line-height:1.6;margin:0}

/* --- Responsive --- */
@media(max-width:768px){
    .quiz-question-card{padding:1.75rem}
    .quiz-question-text{font-size:1.15rem}
    .quiz-scale{flex-wrap:wrap}
    .quiz-scale-option{flex:0 0 calc(20% - 0.4rem)}
    .quiz-results-card{padding:2rem 1.5rem}
    .quiz-welcome-features{flex-direction:column;align-items:center}
    .quiz-hero-inner h1{font-size:clamp(2rem,5vw,3rem)}
}
@media(max-width:480px){
    .quiz-question-card{padding:1.25rem}
    .quiz-scale-option{flex:0 0 calc(20% - 0.4rem)}
    .quiz-scale-label{height:44px;font-size:0.9rem}
    .quiz-nav{flex-direction:column}
    .quiz-btn-next{width:100%;justify-content:center;margin-left:0}
    .quiz-btn-back{width:100%;justify-content:center}
}