/* ================================================================
   style-quiz-updated.css
   Integration overrides — applied when quiz sections are embedded
   inside index.php alongside the main page styles.
   These rules patch spacing, z-index, and background conflicts.
================================================================ */

/* ── Separation from the main page above ── */
.quiz-hero-section {
    margin-top: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ── Prevent quiz topbar gradient clashing with page gradient ── */
.quiz-topbar {
    background: linear-gradient(to right, #F6F3EE, #E8EFEA);
}

/* ── Lift-card section sits on F1F3F1 background ── */
.lift-card {
    background: #ffffff;
}

/* ── Parallax section: ensure it sits flush on wide screens ── */
.quiz-parallax-section {
    background-attachment: fixed; /* degrades to scroll on mobile */
}

/* ── Quiz card sits above page scroll content ── */
.quiz-section {
    position: relative;
    z-index: 3;
}

/* ── Bypass button block: tighter top spacing after quiz ── */
.bypass-wrap {
    padding-top: 40px;
}

/* ── Popup overlay: must be above all page layers ── */
.popup-overlay {
    z-index: 9999;
}

/* ── Match quiz benefit items to main page card style ── */
.quiz-benefit-item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
}

/* ── Ensure quiz section background aligns with page BG ── */
.quiz-icons-section,
.quiz-discover-section,
.quiz-value-section {
    background: #F1F3F1;
}

/* ── Mobile: remove horizontal overflow from quiz shell ── */
@media (max-width: 860px) {
    .quiz-shell {
        margin: 0 16px;
    }
}