/**
 * =========================================================================
 * STYLES FOR: Fitness Gear Finder Page (Quiz Template)
 * WEBSITE: repcave.com
 * =========================================================================
 */

/* ==========================================================================
   1. Design System & General Styling
   ========================================================================== */
:root {
    --color-primary: #E53935; --color-primary-dark: #C62828; --color-text-dark: #2c3e50; --color-text-light: #5a6a7a; --color-bg-light: #FFFFFF; --color-bg-alt: #F9FAFB; --color-border: #EAECEF;
    --font-headings: 'Montserrat', sans-serif; --font-body: 'Roboto', sans-serif;
    --section-padding: 6rem 0;
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
h1, h2, h3, h4 { font-family: var(--font-headings); font-weight: 700; line-height: 1.2; color: var(--color-text-dark); }
h1 span, h2 span { color: var(--color-primary); }
p { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.7; color: var(--color-text-light); }
.section-title { font-size: 2.8rem; text-align: center; margin-bottom: 1.25rem; }
.section-subtitle { text-align: center; margin-bottom: 3.5rem; max-width: 700px; margin-left: auto; margin-right: auto; }

/* --- Unified Button Styles --- */
.button { display: inline-block; padding: 14px 32px; font-size: 1rem; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; font-weight: 600; cursor: pointer; text-align: center; border: 2px solid transparent; }
.primary-button { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.primary-button:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.secondary-button { background-color: transparent; color: var(--color-text-dark); border-color: var(--color-border); }
.secondary-button:hover { background-color: var(--color-text-dark); color: #fff; border-color: var(--color-text-dark); transform: translateY(-3px); box-shadow: var(--shadow-md); }

.full-width-background { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

/* ==========================================================================
   2. Section Backgrounds & Spacing
   ========================================================================== */
.quiz-hero-section, .quiz-results-section { background-color: var(--color-bg-alt); padding: var(--section-padding); }
.quiz-hero-section .container { text-align: center; }
.quiz-questions-section { background-color: var(--color-bg-light); padding: var(--section-padding); }
.quiz-cta-section { background-color: var(--color-text-dark); padding: var(--section-padding); }
.quiz-cta-section .section-title, .quiz-cta-section .section-subtitle { color: #fff; }
.quiz-cta-section .cta-buttons { margin-top: 2rem; text-align: center; }

/* ==========================================================================
   3. Quiz Form & Steps
   ========================================================================== */
.quiz-form { max-width: 750px; margin: 0 auto; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.quiz-step { background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: 16px; padding: 3rem; box-shadow: var(--shadow-lg); animation: fadeIn 0.5s ease-in-out; }
.quiz-step-title { font-size: 2rem; text-align: center; margin: 0 0 2.5rem 0; }
.quiz-options { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2.5rem; }
.quiz-options label { display: block; position: relative; }
.quiz-options input[type="radio"] { position: absolute; opacity: 0; }
.quiz-options span { display: block; padding: 1rem 1.5rem; border: 2px solid var(--color-border); border-radius: 8px; font-size: 1.1rem; font-weight: 500; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; }
.quiz-options label:hover span { border-color: var(--color-primary); color: var(--color-primary); }
.quiz-options input[type="radio"]:checked + span { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: var(--shadow-md); transform: scale(1.02); }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--color-border); padding-top: 2rem; margin-top: 1rem; }
.quiz-nav .button.prev-step { margin-right: auto; }
.quiz-nav .button.next-step, .quiz-nav .button.submit-quiz { margin-left: auto; }

/* ==========================================================================
   4. Results Section & Cards
   ========================================================================== */
.recommendations { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.recommendation-card { background-color: #fff; border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-md); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; overflow: hidden; text-align: left; }
.recommendation-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }
.recommendation-card .card-image-wrapper { width: 100%; height: 220px; background-color: var(--color-bg-alt); }
.recommendation-card img { width: 100%; height: 100%; object-fit: cover; }
.recommendation-card .card-content { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.recommendation-card .card-title { font-size: 1.5rem; margin: 0 0 0.75rem 0; }
.recommendation-card .card-description { font-size: 1rem; color: var(--color-text-light); margin-bottom: 1.5rem; flex-grow: 1; }
.recommendation-card .button { margin-top: auto; }

/* --- NEW: Styling for Recommendation Labels --- */
.recommendation-label { padding: 0.5rem 1.5rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: center; border-bottom: 1px solid var(--color-border); }
.label-primary { color: var(--color-primary); background-color: #fef4f4; /* A very light red */ }
.label-secondary { color: var(--color-text-light); background-color: var(--color-bg-alt); /* A very light gray */ }

/* --- NEW: Styling for No-Results Message --- */
.no-results { grid-column: 1 / -1; text-align: center; padding: 2rem; border: 2px dashed var(--color-border); border-radius: 12px; }

/* --- Styling for Next Steps After Quiz Results --- */
.quiz-next-steps { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--color-border); display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* ==========================================================================
   5. Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
    :root { --section-padding: 4rem 0; }
    .section-title { font-size: 2.2rem; }
    .quiz-step { padding: 2rem 1.5rem; }
    .quiz-step-title { font-size: 1.6rem; }
}
@media (max-width: 480px) {
    .quiz-options { grid-template-columns: 1fr; }
    .quiz-nav { flex-direction: column; gap: 1rem; }
    .quiz-nav .button { width: 100%; }
    .quiz-nav .button.prev-step { order: 2; }
    .quiz-nav .button.next-step, .quiz-nav .button.submit-quiz { order: 1; }
}

/* General Styling - Fix Overflow */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
    overflow-x: hidden; /* Ensure no horizontal overflow */
    width: 100%; /* Explicitly set body width */
}

/* Full-Width Background Fix */
.full-width-background {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* Add this to handle scrollbar width on desktop */
    margin-right: calc(-50vw + 8px); /* Adjust for scrollbar width (typically 8px on desktop) */
}

/* Container Adjustment */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%; /* Ensure container doesn’t exceed viewport */
}

/* Specific Section Adjustments (Apply to Both Pages) */
.plans-hero-section.full-width-background,
.plans-starters-section.full-width-background,
.plans-equipment-section.full-width-background,
.plans-quiz-section.full-width-background,
.plans-newsletter-section.full-width-background,
.plans-cta-section.full-width-background,
.contact-hero-section.full-width-background,
.contact-newsletter-section.full-width-background,
.contact-cta-section.full-width-background {
    overflow-x: hidden; /* Prevent horizontal overflow in these sections */
    padding: 80px 0; /* Maintain existing padding */
}

@media (max-width: 768px) {
    .full-width-background {
        margin-right: -50vw; /* Reset margin on mobile to avoid unnecessary adjustment */
    }
}

/* Ensure No Unintended Widths or Margins */
.site-main {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Additional Debugging - Remove if Not Needed */
* {
    box-sizing: border-box;
    /* Uncomment to debug and identify overflow elements */
    /* outline: 1px solid red; */
}