@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* --- BASE & BODY STYLES --- */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 20px;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f4f4f4;
    min-height: 100vh;
    margin: 0;
    padding: 30px 15px;
    box-sizing: border-box;
    color: #333;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- QUIZ CONTAINER --- */
#quiz-container {
    background-color: #fff;
    padding: 30px 35px 45px 35px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 700px;
    margin-top: 0;
    margin-bottom: 30px;
    text-align: center;
    box-sizing: border-box;
}

/* --- LOGO --- */
#quiz-logo {
    display: block;
    max-width: 170px;
    height: auto;
    margin: 0 auto 25px auto;
}

/* --- PROGRESS BAR --- */
#progress-container {
    width: 100%;
    background-color: #e9ecef;
    border-radius: 25px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    height: 25px;
    --progress-width: 0%; /* CSS Variable for progress */
}

#progress-bar {
    height: 100%;
    width: var(--progress-width);
    background-color: #007bff; /* Blue progress */
    border-radius: 25px;
    transition: width 0.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Base text (behind the clipped text) */
#progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: 0.85em;
    color: #444;
    z-index: 2;
    font-weight: 600;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    pointer-events: none;
}

/* Clipped text (overlay) */
#progress-container::before {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    font-size: 0.85em;
    font-weight: 600;
    color: #ffffff; /* White text on progress bar */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3; /* Above base text and bar */
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    clip-path: inset(0 calc(100% - var(--progress-width, 0%)) 0 0);
    transition: clip-path 0.5s ease-in-out;
}

#progress-container::before span { /* Prevent potential wrapping issues */
   display: inline-block;
}

/* --- STEP STYLING --- */
.quiz-step {
    display: none;
    animation: fadeIn 0.4s ease-out;
    margin-top: 20px;
}
.quiz-step.active-step {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Question Text & Sub-text */
.question-text {
    font-size: 1.4em;
    color: #333;
    margin-bottom: 25px;
    font-weight: 600;
}
.sub-text {
    font-size: 1.05em;
    color: #555;
    margin-top: -15px;
    margin-bottom: 25px;
}

/* --- OPTIONS CONTAINER & **ENGAGING** RADIO STYLES --- */
.options-container {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.options-container.horizontal { /* Ensure consistency */
     flex-direction: column;
     align-items: stretch;
     gap: 12px;
}

/* 1. HIDE THE ACTUAL RADIO INPUT */
.options-container input[type="radio"] {
    opacity: 0;
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* 2. STYLE THE LABEL AS THE **GREEN** BUTTON */
.options-container label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Engaging Green Background - Similar to CTA */
    background-color: #0db715; /* Standard Green */
    border: 1px solid #0caa14; /* Slightly darker green border */
    color: white;             /* White text */
    border-radius: 8px;
    padding: 16px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
    font-size: 1.05em;
    font-weight: 500; /* Default weight */
    width: 100%;
    box-sizing: border-box;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

/* 3. ARROW INDICATOR (Adjust color for green background) */
.options-container label::after {
    content: '→';
    font-size: 1.4em;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.983); /* Match choice arrow color */
    margin-left: 15px;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* 4. HOVER STATE (Slightly darker green) */
.options-container label:hover {
    background-color: #0ca013;
    border-color: #0caa14;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.options-container label:hover::after {
    color: white; /* Fully opaque arrow */
    transform: translateX(3px);
}

/* 5. SELECTED STATE (Darker Green, bolder text) */
.options-container input[type="radio"]:checked + label {
    background-color: #0db715; /* Darker green when selected */
    border-color: #0caa14;
    color: white;
    font-weight: 600; /* Bolder text when selected */
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.4); /* Green focus ring */
}

.options-container input[type="radio"]:checked + label::after {
    color: white; /* White arrow */
    transform: translateX(0); /* Reset hover transform */
}
/* --- END OPTIONS STYLING --- */


/* --- INPUT FIELDS (Height, Weight) --- */
.input-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 5px;
}
.input-container input[type="number"] {
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1.1em;
    width: 120px;
    text-align: center;
    transition: border-color 0.2s ease;
    font-family: 'Montserrat', sans-serif;
}
.input-container input[type="number"]:focus {
    outline: none;
    border-color: #007bff; /* Keep blue focus for inputs maybe? Or change to green? */
}
.input-container span {
    font-size: 1em;
    color: #555;
    font-weight: 500;
}
.error-message {
    color: #dc3545;
    font-size: 0.9em;
    min-height: 1.2em;
    margin-bottom: 20px;
    font-weight: 500;
}

/* --- BUTTONS (Next, CTA) --- */
/* Next Buttons (Quiz Steps 4, 5, 6, 7, 8) - MODIFIED with arrow */
.next-button {
    display: inline-flex;
    align-items: center;
    /* Change justify-content to space-between like labels */
    justify-content: space-between;

    /* Padding might need slight adjustment again if text wraps weirdly */
    padding: 14px 20px; /* Adjusted horizontal padding */

    color: white;
    border: 1px solid #409143;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    margin-top: 10px;
    background-color: #0db715;
    font-family: 'Montserrat', sans-serif;
    background-image: none;
    text-decoration: none;
    position: relative;
    /* REMOVE white-space: nowrap; */
    /* Ensure wrapping is allowed (should be default for button text) */
     word-wrap: break-word;
     overflow-wrap: break-word;
     text-align: left; /* Align wrapped text to the left */
     line-height: 1.3; /* Adjust line height for wrapped text */
     /* Set a max-width if needed, e.g., based on container */
     /* max-width: 90%; */
}

/* Add the arrow to the button */
.next-button::after {
    content: '→';
    font-size: 1.3em; /* Adjust arrow size if needed */
    font-weight: bold;
    color: rgba(255, 255, 255, 0.983); /* Match choice arrow color */
    margin-left: 12px; /* Space between text and arrow */
    transition: color 0.2s ease, transform 0.2s ease;
}

.next-button:hover:not(:disabled) {
    background-color: #0db715;
    border-color: #0caa14;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-image: none; /* Ensure no gradient on hover */
}

/* Handle arrow color and transform on hover */
.next-button:hover:not(:disabled)::after {
    color: white; /* Match choice arrow hover color */
    transform: translateX(3px); /* Match choice arrow hover transform */
}

/* Disabled state */
.next-button:disabled {
    background-image: none;
    background-color: #cccccc;
    border-color: #cccccc;
    color: #888;
    cursor: not-allowed;
    opacity: 0.65;
    box-shadow: none;
}

/* Hide arrow on disabled button */
.next-button:disabled::after {
    opacity: 0.5; /* Fade out arrow */
    /* Or display: none; if you want it completely gone */
}

/* CTA Button (Results Page) - Keep as is (Green Gradient) */
.cta-button {
    padding: 16px 40px;
    background: linear-gradient(180deg, #0db715, #0cad14); /* Original Green Gradient */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.3em;
    font-weight: 700;
    transition: background-color 0.2s ease; /* Keep simple hover for CTA */
    margin-top: 20px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', sans-serif;
}
.cta-button:hover {
    background: linear-gradient(180deg, #0dc016, #0cba15); /* Slightly lighter on hover */
}

/* --- INFO & ENGAGEMENT STEPS --- */
.info-step p:not([style*="font-size: 0.8em"]) {
    font-size: 1.05em; color: #444; line-height: 1.6; margin-bottom: 20px;
    background-color: #eef2f7; padding: 15px 20px; border-left: 4px solid #007bff;
    border-radius: 4px; text-align: left;
}
.engagement-step p:not(.pack-note):not([style*="font-size: 0.8em"]) {
    text-align: center; max-width: 550px; margin-left: auto; margin-right: auto;
    background-color: transparent; border-left: none; padding-left: 0; padding-right: 0;
}
.engagement-step p strong { color: #0056b3; }
.engagement-step p[style*="background-color: #e9f5ff"] {
    background-color: #e9f5ff !important; padding: 12px !important;
    border-radius: 5px !important; border-left: none !important; text-align: center !important;
}
.engagement-step p[style*="font-size: 0.8em"] {
     margin-top: -20px; margin-bottom: 25px; font-style: italic;
     color: #888; text-align: center; background-color: transparent;
     border-left: none; padding: 0;
}
#step-4 .video-wrapper {
    width: 100%; max-width: 480px; margin: 20px auto 25px auto;
    border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
#step-8 .body-image {
    max-width: 80%; height: auto; margin: 10px auto 15px auto; display: block;
}

/* --- ANALYZING STEP --- */
#analyzing-step { text-align: center; padding: 45px 0; min-height: 200px; }
#analyzing-step p { font-size: 1.25em; color: #555; margin-bottom: 25px; font-weight: 500; }
.loader { border: 5px solid #f0f0f0; border-top: 5px solid #007bff; border-radius: 50%; width: 45px; height: 45px; animation: spin 1.3s linear infinite; margin: 25px auto 30px auto; display: inline-block; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- RESULTS PAGE --- */
#results-page h2 { color: #333; margin-bottom: 15px; font-weight: 700; }
#results-page h3 { color: #444; margin-bottom: 15px; font-weight: 600; }
.projection-text { font-size: 1.2em; color: #333; margin-bottom: 30px; background-color: #e9f5ff; padding: 15px 20px; border-radius: 6px; font-weight: 500; }
.projection-text strong { color: #0056b3; font-weight: 700; }
#chartContainer { border-radius: 8px; border: 1px solid #e0e5ec; margin-bottom: 35px; }
.comparison-section { display: flex; gap: 20px; margin-bottom: 40px; background-color: #f8f9fa; padding: 25px 35px; border-radius: 8px; }
.column { flex: 1; text-align: center; }
.column h3 { font-size: 1.3em; margin-bottom: 10px; font-weight: 600; }
.weight-display { font-size: 1.5em; font-weight: 700; color: #007bff; margin-bottom: 15px; display: block; }
.body-image { max-width: 80%; height: auto; margin: 10px auto 15px auto; display: block; }
.body-fat { font-size: 0.95em; color: #555; font-weight: 500; }
.product-section { border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 35px 0; margin-bottom: 35px; }
.brand-logo { max-width: 150px; margin-bottom: 15px; }
.offer-text { font-size: 1.3em; color: #dc3545; font-weight: 600; margin-bottom: 20px; }
.offer-text strong { font-size: 1.2em; font-weight: 700; }
.product-image { max-width: 300px; height: auto; margin-bottom: 20px; border-radius: 6px; }
.pricing { font-size: 1.4em; margin-bottom: 10px; font-weight: 500; }
.old-price { text-decoration: line-through; color: #888; margin-right: 15px; font-size: 0.75em; }
.new-price { color: #0cae14; font-weight: 700; }
.pack-note { font-size: 0.9em; color: #666; margin-bottom: 25px; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.guarantee-text { font-weight: 600; color: #333; margin-top: 15px; font-size: 1.0em; }
.social-proof { margin-bottom: 30px; font-size: 1.1em; }
.social-proof p { margin: 5px 0; font-weight: 500; }
.testimonials { margin-top: 30px; margin-bottom: 35px; border: 1px solid #eee; padding: 15px 25px; border-radius: 8px; background-color: #fdfdff; text-align: left; }
.testimonials h3 { margin-top: 0; margin-bottom: 20px; text-align: center; font-size: 1.3em; font-weight: 600; color: #444; }
.testimonial { background-color: #fff; border: 1px solid #eee; border-radius: 6px; padding: 15px; margin-bottom: 15px; }
.testimonial p:first-child { margin: 0 0 8px 0; font-size: 1em; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.testimonial p strong { color: #333; }
.testimonial .verified { font-size: 0.85em; color: #777; font-weight: 500; white-space: nowrap; }
.testimonial blockquote { margin: 0; font-size: 0.95em; color: #555; line-height: 1.6; font-style: normal; padding-left: 12px; border-left: 3px solid #f0f0f0; font-weight: 400; }

/* --- RESPONSIVE STYLES --- */
@media (max-width: 700px) {
    .comparison-section { padding: 20px 15px; gap: 10px; }
    .pricing { font-size: 1.3em; }
    .question-text { font-size: 1.3em; }
    .cta-button { font-size: 1.25em; padding: 15px 30px; }
    .next-button { font-size: 1.05em; padding: 12px 28px; }
}
@media (max-width: 500px) {
     #quiz-container { padding: 25px 20px 40px 20px; }
     .options-container label { padding: 14px 18px; font-size: 1em; }
     .options-container label::after { font-size: 1.3em; }
     .input-container input[type="number"] { width: 100px; padding: 11px 12px; font-size: 1em; }
     .projection-text { font-size: 1.1em; padding: 14px 18px; }
     .testimonials { padding: 15px 15px; }
     #progress-text, #progress-container::before { font-size: 0.8em; }
     .question-text { font-size: 1.25em; }
     .cta-button { font-size: 1.2em; padding: 14px 25px; }
}
@media (max-width: 400px) {
   .comparison-section { padding: 15px 10px; gap: 8px; }
   .column h3 { font-size: 1em; }
   .weight-display { font-size: 1.1em; }
   .product-image { max-width: 250px; }
   .options-container label { padding: 12px 15px; font-size: 0.95em; }
   .options-container label::after { font-size: 1.2em; }
}

.benefit-list {
    list-style: none; /* Remove default bullets */
    padding-left: 0;  /* Remove default indentation */
    max-width: 480px; /* Adjust max-width as needed */
    margin: 25px auto 30px auto; /* Center & adjust vertical spacing */
    text-align: left;
}
.benefit-list li {
    display: flex;          /* Use Flexbox for layout */
    align-items: flex-start; /* Align icon top with first line of text */
    margin-bottom: 15px; /* Space between list items */
    font-size: 1.0em;     /* Control text size */
    line-height: 1.6;     /* Improve readability */
    color: #333;
}
.benefit-list li span.icon {
    flex-shrink: 0;        /* Prevent icon from shrinking */
    width: 20px;           /* Fixed width for icon */
    margin-right: 10px;    /* Space between icon and text */
    font-size: 1.3em;      /* Adjust icon size */
    color: #007bff;       /* Icon color (adjust if needed) */
    text-align: center;
    margin-top: 1px;       /* Fine-tune vertical alignment */
}

/* Style for the quote */
.benefit-quote {
    font-style: italic;
    color: #555;
    text-align: center;
    margin: 20px 15px 30px 15px; /* More vertical space, slight horizontal margin */
    padding: 10px 15px; /* Add some padding */
    border-left: 3px solid #e0e0e0; /* Subtle accent line */
    /* Optional: light background */
    /* background-color: #f8f9fa; */
    /* border-radius: 4px; */
}

.stock-level-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Adjust spacing */
    margin-top: 15px; /* Space below CTA */
    margin-bottom: 10px; /* Space above guarantee */
    font-size: 0.95em;
    color: #555;
}

.stock-label {
    font-weight: 500;
}

.stock-blocks {
    display: flex;
    gap: 3px; /* Space between blocks */
}

.stock-block {
    width: 14px; /* Adjust size */
    height: 14px; /* Adjust size */
    border: 1px solid #ccc; /* Border for empty blocks */
}

.stock-block.filled {
    background-color: #dc3545; /* Red color for filled */
    border-color: #dc3545;
}

.stock-block.empty {
    background-color: #e9ecef; /* Light grey for empty */
}

.stock-status.low {
    font-weight: 700;
    color: #dc3545; /* Red color for LOW */
    font-size: 1.1em; /* Slightly larger */
}