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

/* --- BASE & BODY STYLES --- */
html {
    font-size: 110%;
    -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 */
    transition: opacity 0.5s, height 0.5s, margin-bottom 0.5s; /* For hiding on results */
}

#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 GREEN** RADIO STYLES --- */
/* General container for options */
.options-container {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

/* Keep consistency if horizontal class is used */
.options-container.horizontal {
     flex-direction: column;
     align-items: stretch;
     gap: 12px;
}

/* 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;
}

/* STYLE THE LABEL AS THE **GREEN** BUTTON (Default for most questions) */
.options-container:not(.pain-scale-options) label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Engaging Green Background */
    background-color: #4CAF50; /* Standard Green */
    border: 1px solid #409143; /* 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;
}

/* ARROW INDICATOR for green buttons */
.options-container:not(.pain-scale-options) label::after {
    content: '→';
    font-size: 1.4em;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7); /* Semi-transparent white arrow */
    margin-left: 15px;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* HOVER STATE for green buttons */
.options-container:not(.pain-scale-options) label:hover {
    background-color: #45a049;
    border-color: #367c39;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.options-container:not(.pain-scale-options) label:hover::after {
    color: white; /* Fully opaque arrow */
    transform: translateX(3px);
}

/* SELECTED STATE for green buttons */
.options-container:not(.pain-scale-options) input[type="radio"]:checked + label {
    background-color: #3e8e41; /* Darker green when selected */
    border-color: #2d6a30;
    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:not(.pain-scale-options) input[type="radio"]:checked + label::after {
    color: white; /* White arrow */
    transform: translateX(0); /* Reset hover transform */
}

/* --- **NEW** PAIN SCALE STYLES (Overrides general label style for this specific container) --- */
.pain-scale-options {
    display: flex;
    flex-direction: row; /* Horizontal layout */
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

/* Style labels for pain scale buttons */
.pain-scale-options label {
    display: inline-block; /* Allow items side-by-side */
    border: 1px solid #ccc;
    padding: 10px 0; /* Vertical padding only */
    border-radius: 4px;
    background-color: #fff; /* White background */
    min-width: 45px;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    color: #333; /* Default text color */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    line-height: 1.2;
}

/* Remove arrow for pain scale labels */
.pain-scale-options label::after {
    content: none;
}

/* Hover state for pain scale buttons */
.pain-scale-options label:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
}

/* Checked state for pain scale buttons (use primary blue) */
.pain-scale-options input[type="radio"]:checked + label {
    background-color: #007bff; /* Blue background */
    color: #fff; /* White text */
    border-color: #0056b3; /* Darker blue border */
    box-shadow: none; /* Remove green focus ring */
    font-weight: bold; /* Keep bold */
}
/* --- END PAIN SCALE STYLES --- */


/* --- INPUT FIELDS (Height, Weight - Keep for potential future use) --- */
.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;
}
.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 - Use existing styles) --- */
/* Next Buttons (Use existing green style with arrow) */
.next-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    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: #4CAF50;
    font-family: 'Montserrat', sans-serif;
    background-image: none;
    text-decoration: none;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: left;
    line-height: 1.3;
}
/* Arrow for Next Button */
.next-button::after {
    content: '→';
    font-size: 1.3em;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 12px;
    transition: color 0.2s ease, transform 0.2s ease;
}
.next-button:hover:not(:disabled) {
    background-color: #45a049;
    border-color: #367c39;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-image: none;
}
/* Arrow hover state */
.next-button:hover:not(:disabled)::after {
    color: white;
    transform: translateX(3px);
}
/* 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;
}
.next-button:disabled::after {
    opacity: 0.5;
}

/* CTA Button (Results Page - Use existing Green Gradient) */
.cta-button {
    padding: 16px 40px;
    background: linear-gradient(180deg, #4aa314, #369106);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.3em;
    font-weight: 700;
    transition: background 0.2s ease; /* Transition the whole background */
    margin-top: 20px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none; /* Ensure links look like buttons */
}
.cta-button:hover {
    background: linear-gradient(180deg, #55b718, #3fa707);
}

/* --- INFO & ENGAGEMENT STEPS --- */
/* Keep existing info-step style for consistency if used */
.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;
}
/* Style paragraphs within the NEW engagement steps (Steps 5 & 8) */
.engagement-step p:not(.pack-note):not([style*="font-size: 0.8em"]):not(.sub-text) {
    text-align: left; /* Changed from center */
    max-width: 100%; /* Remove max-width restriction */
    margin-left: 0;
    margin-right: 0;
    background-color: transparent;
    border-left: none;
    padding-left: 0;
    padding-right: 0;
    font-size: 1.0em; /* Slightly smaller for info blocks */
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
}
/* Styles for the intro/sub-text in engagement steps */
.engagement-step .sub-text {
    text-align: center;
    font-size: 0.95em;
    margin-top: -10px; /* Adjust spacing */
    margin-bottom: 15px;
}

/* **NEW** Engagement Image Style */
.engagement-image {
   max-width: 80%; /* Control size */
   height: auto;
   margin: 20px auto 20px auto; /* Center and add spacing */
   display: block;
   border-radius: 5px;
   border: 1px solid #eee; /* Subtle border */
   box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Video wrapper style (keep generic) */
#step-4 .video-wrapper, /* Old ID reference (Akusoli) */
.video-wrapper /* New generic class */
{
    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);
}
.video-wrapper > div { /* Added for intrinsic ratio */
    position: relative;
    padding-top: 75.5%; /* Adjust as needed for aspect ratio */
}
.video-wrapper iframe { /* Added for intrinsic ratio */
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: none;
 }


/* --- 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 (Adapt existing + Add new) --- */
#results-page { text-align: center; } /* Center align results page content */

#results-page h2 { /* Style for main results headline */
    color: #0056b3; /* Darker Blue */
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 1.5em;
}
#results-page h3 { /* Style for sub-headlines within results */
    color: #333;
    margin-top: 25px; /* Space above sub-headlines */
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 1.3em;
}

/* Style for paragraphs on results, default left align */
#results-page p {
    margin-bottom: 15px;
    text-align: left;
    line-height: 1.6;
    color: #333;
    padding: 0 5px; /* Slight padding */
}
/* Override for paragraphs specifically centered */
#results-page p.projection-text,
#results-page p[style*="text-align: center"] {
     text-align: center;
     padding: 0;
}

/* Style for the main projection/summary text */
.projection-text {
    font-size: 1.15em; /* Slightly larger */
    color: #333;
    margin-bottom: 30px;
    background-color: #e9f5ff; /* Light blue background */
    padding: 15px 20px;
    border-radius: 6px;
    font-weight: 500;
    text-align: center !important; /* Ensure center alignment */
}
.projection-text strong { /* Highlight within projection text */
    color: #0056b3;
    font-weight: 700;
}

/* **NEW** Style for dynamic value spans */
.dynamic-value {
    font-weight: bold;
    color: #007bff; /* Highlight dynamic parts in blue */
}


/* Product Section (Adapted for new structure) */
.product-section {
    border-top: 1px solid #eee;
    padding: 30px 15px 20px 15px; /* Adjusted padding */
    margin-top: 30px; /* Space above */
    margin-bottom: 25px; /* Space below */
    background-color: #f8f9fa; /* Light background */
    border-radius: 8px;
}

/* Style for offer text (discount mention) */
.offer-text {
    font-size: 1.2em; /* Adjust size */
    color: #333; /* More neutral color initially */
    font-weight: 500;
    margin-bottom: 5px !important; /* Reduced margin */
    text-align: center !important;
}
/* Specific style for H3 used for discount */
.product-section h3 {
    font-size: 1.5em !important;
    color: #dc3545 !important; /* Red for emphasis */
    margin-top: 0 !important; /* Remove top margin */
    margin-bottom: 20px !important; /* Space below */
    font-weight: 700 !important;
}
.product-section h3 strong { /* Ensure strong within H3 is also red */
    color: inherit;
}


/* Product image style */
.product-section .product-image {
    display: block;
    max-width: 280px; /* Control size */
    height: auto;
    margin: 10px auto 25px auto; /* Center and space */
    border-radius: 6px;
}

/* Ensure the results page CTA uses the gradient style */
#results-page .cta-button {
     padding: 16px 35px; /* Slightly adjust padding if needed */
     font-size: 1.3em;
     margin: 25px auto 15px auto; /* Adjust spacing */
     display: block; /* Center button */
     width: fit-content;
     max-width: 90%;
}

/* Pack Note Style (Keep existing) */
.pack-note {
    font-size: 0.9em !important;
    color: #666 !important;
    margin-bottom: 25px !important;
    max-width: 450px; /* Limit width */
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.5 !important;
    background-color: #e9f5ff !important; /* Use light blue like projection */
    padding: 12px !important;
    border-radius: 4px !important;
    border: 1px solid #bde0ff !important;
    text-align: center !important;
}

/* Guarantee Text Style (Keep existing, add icon style) */
.guarantee-text {
    font-weight: 600;
    color: #333;
    margin-top: 15px;
    font-size: 1.0em;
    text-align: center !important;
}
/* **NEW** Style for guarantee icon */
.guarantee-text img {
    height: 18px;
    vertical-align: middle;
    margin-right: 5px;
    margin-bottom: 2px; /* Fine-tune alignment */
}


/* Testimonials Style (Keep existing - should work with new structure) */
.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-left: 4px solid #007bff; /* Blue accent */
    border-radius: 6px; padding: 15px; margin-bottom: 15px;
}
.testimonial p:first-child { /* Name/Verified Line */
    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; } /* Name */
.testimonial .verified { /* Verified text */
    font-size: 0.85em; color: #28a745; /* Green verified */
    font-weight: 500; white-space: nowrap; margin-left: 8px;
}
.testimonial blockquote { /* Quote text */
    margin: 0; font-size: 0.95em; color: #555; line-height: 1.6;
    font-style: italic; /* Italic quote */
    padding-left: 0; /* Remove old padding */
    border-left: none; /* Remove old border */
    font-weight: 400;
    text-align: left !important; /* Ensure left align */
}


/* --- STOCK INDICATOR (Use existing, slight adjustments) --- */
.stock-level-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    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;
}
.stock-block {
    width: 16px; /* Slightly larger */
    height: 12px; /* Rectangular */
    border: 1px solid #ccc;
    border-radius: 2px;
}
.stock-block.filled {
    background-color: #007bff; /* Changed filled color to BLUE */
    border-color: #0056b3;
}
.stock-block.empty {
    background-color: #e9ecef; /* Light grey empty */
    border-color: #ccc;
}
.stock-status { /* General status style */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.0em; /* Adjust size */
}
.stock-status.low { color: #dc3545; } /* Red for LOW */
.stock-status.medium { color: #fd7e14; } /* Orange for MEDIUM */
.stock-status.high { color: #28a745; } /* Green for HIGH */


/* --- REMOVE OR COMMENT OUT UNUSED AKUSOLI STYLES --- */
/*
#chartContainer { display: none; }
.comparison-section { display: none; }
.column { display: none; }
.weight-display { display: none; }
#step-8 .body-image { display: none; } // Specific Akusoli image
.body-fat { display: none; }
.brand-logo { display: none; }
.pricing { display: none; }
.old-price { display: none; }
.new-price { display: none; }
.social-proof { display: none; }
.benefit-list { display: none; }
.benefit-quote { display: none; }
*/


/* --- RESPONSIVE STYLES (Keep existing) --- */
@media (max-width: 700px) {
    /* .comparison-section { padding: 20px 15px; gap: 10px; } */ /* Removed */
    /* .pricing { font-size: 1.3em; } */ /* Removed */
    .question-text { font-size: 1.3em; }
    .cta-button { font-size: 1.25em; padding: 15px 30px; }
    .next-button { font-size: 1.05em; padding: 12px 18px; } /* Adjusted next btn padding */
    .pain-scale-options label { min-width: 40px; padding: 8px 0; } /* Adjust pain scale */
    #results-page h2 { font-size: 1.4em; }
    #results-page h3 { font-size: 1.2em; }
    .projection-text { font-size: 1.1em; }
    .stock-level-indicator { flex-wrap: wrap; gap: 5px; }
    .stock-label { width: 100%; text-align: center; margin-bottom: 5px; }
    .stock-blocks { margin: 0 auto 5px auto; }
    .stock-status { width: 100%; text-align: center; }
}
@media (max-width: 500px) {
     #quiz-container { padding: 25px 20px 40px 20px; }
     .options-container:not(.pain-scale-options) label { padding: 14px 18px; font-size: 1em; }
     .options-container:not(.pain-scale-options) 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; width: 100%; max-width: 100%; } /* Full width CTA */
     .next-button { width: 100%; } /* Full width Next button */
     .pain-scale-options label { min-width: 38px; padding: 7px 0; font-size: 1em;}
}
@media (max-width: 400px) {
   /* .comparison-section { padding: 15px 10px; gap: 8px; } */ /* Removed */
   /* .column h3 { font-size: 1em; } */ /* Removed */
   /* .weight-display { font-size: 1.1em; } */ /* Removed */
   .product-section .product-image { max-width: 220px; }
   .options-container:not(.pain-scale-options) label { padding: 12px 15px; font-size: 0.95em; }
   .options-container:not(.pain-scale-options) label::after { font-size: 1.2em; }
   .pain-scale-options label { min-width: 35px; padding: 6px 0;}
   #results-page h2 { font-size: 1.3em; }
   #results-page h3 { font-size: 1.15em; }
}