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

/* --- BASE & BODY STYLES --- */
html {
    font-size: 105%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Source Sans Pro', 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;
}

#quiz-container p{
    text-align: left;
    line-height: 1.32;
}

/* --- LOGO --- */
#quiz-logo {
    display: block;
    max-width: 155px;
    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;
}

/* Hide progress container smoothly */
#progress-container[style*="opacity: 0"] {
    margin-bottom: 0 !important; /* Remove margin when hidden */
    height: 0 !important; /* Collapse height */
    overflow: hidden; /* Prevent content visibility */
}


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

#progress-text { /* Base text (behind) */
    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;
}

#progress-container::before { /* Clipped text (overlay) */
    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;
    display: flex; align-items: center; justify-content: center;
    z-index: 3; 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 { 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); }
}
/* Shake animation for validation */
.shake-animation {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 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; text-align: center!important;
}

/* --- OPTIONS CONTAINER --- */
.options-container {
    margin-bottom: 15px; display: flex; flex-direction: column;
    align-items: stretch; gap: 12px;
}
.options-container.horizontal {
    flex-direction: column; align-items: stretch; gap: 12px; /* Keep consistent */
}

/* --- RADIO BUTTON STYLING (GREEN BUTTONS) --- */
/* Hide 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 labels as green buttons (excluding checkbox container and pain scale) */
.options-container:not(#past-attempts-options):not(.pain-scale-options) label {
    display: flex; align-items: center; justify-content: space-between;
    background-color: #4CAF50; border: 1px solid #409143; color: white;
    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;
    width: 100%; box-sizing: border-box; position: relative;
    word-wrap: break-word; overflow-wrap: break-word; line-height: 1.4;
}

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

/* Hover state for green buttons */
.options-container:not(#past-attempts-options):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(#past-attempts-options):not(.pain-scale-options) label:hover::after {
    color: white; transform: translateX(3px);
}

/* Selected state for green buttons */
.options-container:not(#past-attempts-options):not(.pain-scale-options) input[type="radio"]:checked + label {
    background-color: #3e8e41; border-color: #2d6a30; color: white;
    font-weight: 600; box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.4);
}
.options-container:not(#past-attempts-options):not(.pain-scale-options) input[type="radio"]:checked + label::after {
    color: white; transform: translateX(0);
}

/* --- CHECKBOX STYLING (PAST ATTEMPTS - Matching Screenshot) --- */
/* Hide the actual checkbox input */
#past-attempts-options input[type="checkbox"] {
    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 labels like the green radio buttons */
#past-attempts-options label {
    display: flex; align-items: center; justify-content: space-between;
    background-color: #4caf4fc1; border: 1px solid #409143; color: white;
    border-radius: 8px; padding: 14px 20px; /* Slightly adjusted padding */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    text-align: left; font-size: 1.05em; font-weight: 500;
    width: 100%; box-sizing: border-box; position: relative;
    word-wrap: break-word; overflow-wrap: break-word; line-height: 1.4;
    margin-bottom: 0; /* Rely on container gap */
}

/* Default indicator (empty circle) for checkbox labels */
#past-attempts-options label::after {
    content: ''; /* No content needed for empty circle */
    display: inline-block;
    flex-shrink: 0; /* Prevent shrinking */
    width: 24px; /* Fixed size for the circle */
    height: 24px; /* Fixed size for the circle */
    border-radius: 50%; /* Make it a circle */
    border: 2px solid rgba(255, 255, 255, 0.8); /* White border */
    background-color: transparent; /* Empty inside */
    margin-left: 15px; /* Space from text */
    transition: background-color 0.2s ease, border-color 0.2s ease, content 0s; /* Faster content transition */
    box-sizing: border-box; /* Include border in size */
}

/* Hover state for checkbox labels */
#past-attempts-options label:hover {
    background-color: #45a049; border-color: #367c39;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#past-attempts-options label:hover::after {
    border-color: white; /* Solid white border on hover */
}

/* Checked state for checkbox labels (using JS class) */
#past-attempts-options label.is-selected {
    background-color: #3e8e41; /* Darker green */
    border-color: #2d6a30;
    color: white;
    font-weight: 600; /* Bolder text */
    box-shadow: none;
}

/* Change indicator to a checkmark inside white circle when checked (using JS class) */
#past-attempts-options label.is-selected::after {
    content: '✓'; /* Checkmark symbol */
    font-family: sans-serif; /* Ensure checkmark glyph is available */
    font-size: 18px; /* Size of the checkmark */
    font-weight: bold;
    line-height: 22px; /* Vertically center checkmark (adjust as needed) */
    text-align: center;
    color: #3e8e41; /* Dark green checkmark (matches selected background) */
    background-color: white; /* White background for the circle */
    border-color: white; /* White border (effectively disappears) */
}

/* --- Specific styling for the NEXT button in Step 5 --- */
.quiz-step[data-step="5"] .next-button {
    margin-top: 25px; /* Add more space above the button */
    /* You can add other distinct styles here if needed, e.g.: */
    /* background-color: #5cb85c; */ /* Slightly different green */
    /* border-color: #4cae4c; */
}
/* Ensure the arrow is visible if general styles were overridden */
.quiz-step[data-step="5"] .next-button::after {
    content: '→';
    /* Inherit font-size, color etc from general .next-button::after */
}

/* --- PAIN SCALE STYLES (Horizontal Number Buttons) --- */
.pain-scale-options {
    display: flex; flex-direction: row; flex-wrap: wrap;
    justify-content: center; gap: 8px; margin-bottom: 20px;
}
.pain-scale-options label {
    display: inline-block; border: 1px solid #ccc; padding: 10px 0;
    border-radius: 4px; background-color: #fff; min-width: 45px;
    text-align: center; font-size: 1.1em; font-weight: bold; color: #333;
    cursor: pointer; transition: all 0.2s ease; line-height: 1.2;
}
.pain-scale-options label::after { content: none; } /* No arrow */
.pain-scale-options label:hover { background-color: #f0f0f0; border-color: #bbb; }
.pain-scale-options input[type="radio"]:checked + label {
    background-color: #007bff; color: #fff; border-color: #0056b3;
    box-shadow: none; font-weight: bold;
}

/* --- AGE INPUT (Step 2) --- */
#quiz-container input[type="number"]#age {
    padding: 12px 15px; border: 1px solid #ccc; border-radius: 6px;
    margin-bottom: 20px; /* Increased bottom margin */
    width: 100%; max-width: 200px; /* Control width */
    display: block; /* Ensure block display */
    margin-left: auto; /* Center */
    margin-right: auto; /* Center */
    font-size: 1.1em; font-family: 'Source Sans Pro', sans-serif; 
    text-align: center; /* Center text inside */
    box-sizing: border-box; /* Include padding in width */
    transition: border-color 0.2s ease;
}
#quiz-container input[type="number"]#age:focus {
    outline: none; border-color: #007bff;
}

/* Center the 'Weiter' button in the age step */
.quiz-step[data-step="2"] .next-button {
    display: block; /* Make it a block element */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    margin-top: 0; /* Reset top margin if needed */
    width: fit-content; /* Adjust width to content */
    min-width: 150px; /* Optional: ensure minimum width */
    text-align: center; /* Ensure text inside is centered */
    justify-content: center; /* Center flex items (text + arrow) */
}


/* --- OTHER INPUT FIELDS --- */
.input-container {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-bottom: 5px;
}
.input-container input[type="number"] { /* General number input style */
    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: 'Source Sans Pro', 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;
}
/* Validation Error Style (Applied via JS) */
.validation-error {
    border: 1px solid #dc3545 !important; /* Red border for inputs */
    /* Add shake animation or other visual cue if desired */
}
.options-container.validation-error label:first-of-type {
     /* Example: Highlight the container's first label */
     border: 1px solid #dc3545 !important;
     box-shadow: 0 0 5px rgba(220, 53, 69, 0.5); /* Optional glow */
}


/* --- BUTTONS (General Next & CTA) --- */
/* Next Buttons (General Style) */
.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: all 0.2s ease; margin-top: 15px; /* Consistent top margin */
    background-color: #4CAF50; font-family: 'Source Sans Pro', sans-serif; 
    text-decoration: none; line-height: 1.3;
}
.next-button::after { /* Arrow */
    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);
}
.next-button:hover:not(:disabled)::after { color: white; transform: translateX(3px); }
.next-button:disabled {
    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) */
.cta-button {
    padding: 16px 35px;
    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;
    margin: 25px auto 15px auto; /* Centering and spacing */
    display: block; /* Ensure block for auto margins */
    width: fit-content; /* Size to content */
    max-width: 90%; /* Prevent overflow on small screens */
    text-transform: uppercase; letter-spacing: 0.5px;
    font-family: 'Source Sans Pro', sans-serif;  text-decoration: none;
    text-align: center; box-sizing: border-box; /* Include padding in width */
}
.cta-button:hover { background: linear-gradient(180deg, #55b718, #3fa707); }


/* --- 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: 8px solid #f0f0f0; border-top: 8px solid #007bff;
    border-radius: 50%; width: 80px; height: 80px;
    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 STYLES --- */
#results-page { text-align: center; }
#results-page h2 {
    color: #0056b3; margin-bottom: 20px; font-weight: 700; font-size: 1.5em;
}
#results-page h3 {
    color: #333; margin-top: 25px; margin-bottom: 15px;
    font-weight: 600; font-size: 1.3em;
}
#results-page p { /* Default paragraph style */
    margin-bottom: 15px; text-align: left; line-height: 1.55;
    color: #333; padding: 0 5px;
}
#results-page p.assessment-text, /* Specific classes/styles for centering */
#results-page .suitability-section p,
#results-page .social-proof p,
#results-page .final-cta p,
#results-page p[style*="text-align: center"] {
     text-align: center; padding: 0;
}
/* Explanation Section List */
.explanation-section ul {
    text-align: left; padding-left: 25px; margin-top: 10px; margin-bottom: 15px;
    list-style: disc;
}
.explanation-section li { margin-bottom: 8px; line-height: 1.5; }
.explanation-section strong { font-weight: 600; } /* Make strong tags stand out more */

/* Verified Purchase Styling */
.verified { font-size: 0.85em; color: #28a745; margin-left: 8px; font-weight: 500; white-space: nowrap; }

/* Testimonial Blockquote Styling */
.testimonial blockquote {
    margin: 5px 0 0 0; /* Adjusted margin */
    padding-left: 0; /* No extra padding */
    border-left: none; /* No extra border */
    font-size: 0.98em; /* Slightly larger quote text */
    color: #555;
    line-height: 1.65; /* Slightly increased line height */
    font-style: italic;
    font-weight: 400; /* Ensure not bold */
    text-align: left !important;
}

/* Pack Note Styling */
.pack-note {
    font-size: 0.9em !important; color: #555 !important;
    margin: 15px auto 25px auto !important; /* Center and add space */
    max-width: 450px; line-height: 1.5 !important;
    background-color: #e9f5ff !important; /* Light blue */
    padding: 12px !important; border-radius: 4px !important;
    border: 1px solid #bde0ff !important;
    text-align: center !important;
}

/* Guarantee Text Styling */
.guarantee-text { font-weight: 600; color: #333; font-size: 1.0em; text-align: center !important; }

/* --- TESTIMONIALS STYLE (Updated to Match Reference Snippet/Implied Look) --- */
.testimonials {
    font-family: 'Source Sans Pro', sans-serif;  /* Ensure font is inherited/set */
    color: #333; /* Ensure base color */
    margin-top: 30px;       /* As per reference */
    margin-bottom: 35px;    /* As per reference */
    border: 1px solid #eee; /* As per reference */
    border-radius: 8px;     /* As per reference */
    background-color: #fdfdff; /* As per reference */
    text-align: left;       /* As per reference */
    padding: 15px;          /* Adjusted padding for better spacing than 15px */
    box-sizing: border-box; /* Good practice */
}
.testimonials h3 { /* Headline inside testimonials */
    margin-top: 0;
    margin-bottom: 20px; /* Standard spacing */
    text-align: center;
    font-size: 1.3em;
    font-weight: 600;
    color: #444;
}
.testimonial {
    background-color: #fff; /* White background */
    border: 1px solid #eaeaea; /* Simple, subtle border around each */
    /* border-left: none; */ /* Explicitly remove left accent border if needed */
    border-radius: 6px; /* Slightly rounded corners for the box */
    padding: 15px 15px; /* Padding inside each testimonial box */
    margin-bottom: 25px; /* Space between testimonials */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Lighter shadow */
}
/* Remove last testimonial's bottom margin */
.testimonial:last-child {
    margin-bottom: 0;
}

.testimonial p:first-child { /* Name/Verified Line */
    margin: 0 0 8px 0; /* Space below name/verified */
    font-size: 1em;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333; /* Ensure text color */
}
.testimonial .verified { /* Verified text */
    font-size: 0.85em;
    color: #28a745; /* Keep green */
    font-weight: 500; /* Normal weight */
    white-space: nowrap;
    margin-left: 8px;
}
.testimonial p:first-child strong { color: inherit; font-weight: 600; }

/* Blockquote style - Simple, non-indented */
.testimonial blockquote {
    margin: 8px 0 0 0; /* Top margin for space from name, no left margin */
    padding: 0; /* No padding */
    border: none; /* No border */
    font-style: italic; /* Keep italic */
    color: #555; /* Standard quote color */
    font-size: 0.98em; /* Font size */
    line-height: 1.6; /* Line spacing */
    font-weight: 400; /* Regular weight */
}

/* --- UNUSED/CLEANED STYLES --- */
/* Commented out styles from the original Akusoli CSS that are not used here */
/*
#chartContainer { display: none; }
.comparison-section { display: none; }
.column { display: none; }
.weight-display { display: none; }
.body-fat { display: none; }
.brand-logo { display: none; }
.benefit-list { display: none; }
.benefit-quote { display: none; }
.stock-level-indicator { display: none; } // Assuming not used in Wellnee
*/

/* --- RESPONSIVE STYLES --- */
@media (max-width: 700px) {
    .question-text { font-size: 1.3em; }
    .cta-button { font-size: 1.2em; padding: 15px 30px; }
    .next-button { font-size: 1.05em; padding: 12px 18px; }
    .pain-scale-options label { min-width: 40px; padding: 8px 0; }
    #results-page h2 { font-size: 1.4em; }
    #results-page h3 { font-size: 1.2em; }
    /* Ensure age input and button stack nicely */
     #quiz-container input[type="number"]#age { max-width: 180px; }
     .quiz-step[data-step="2"] .next-button { min-width: 140px; }
}
@media (max-width: 500px) {
     #quiz-container { padding: 25px 20px 40px 20px; }
     /* Radio button labels */
     .options-container:not(#past-attempts-options):not(.pain-scale-options) label {
         padding: 14px 18px; font-size: 1em;
     }
      .options-container:not(#past-attempts-options):not(.pain-scale-options) label::after {
          font-size: 1.3em; margin-left: 10px;
      }
     /* Checkbox labels */
     #past-attempts-options label {
         padding: 14px 18px; font-size: 1em;
     }
     #past-attempts-options label::after {
         margin-left: 10px; /* Adjust indicator spacing */
     }
     /* Age input */
     #quiz-container input[type="number"]#age { max-width: 160px; padding: 11px 12px; font-size: 1em; }
     /* Testimonials */
     .testimonials { padding: 15px 15px; }
     /* Progress bar text */
     #progress-text, #progress-container::before { font-size: 0.8em; }
     .question-text { font-size: 1.25em; }
     /* Buttons full width */
     .cta-button, .next-button {
        width: 100%; max-width: 100%; padding-left: 15px; padding-right: 15px;
        justify-content: center; /* Center content on full-width buttons */
        box-sizing: border-box; /* Include padding in width */
     }
     .next-button::after { margin-left: 8px; /* Adjust arrow spacing */ }
     /* Ensure full-width buttons work for age step too */
     .quiz-step[data-step="2"] .next-button { width: 100%; max-width: 100%; }

     .pain-scale-options label { min-width: 38px; padding: 7px 0; font-size: 1em;}
}
@media (max-width: 400px) {
   .product-section .product-image { max-width: 220px; }
    /* Radio button labels */
   .options-container:not(#past-attempts-options):not(.pain-scale-options) label {
       padding: 12px 15px; font-size: 0.95em;
   }
    .options-container:not(#past-attempts-options):not(.pain-scale-options) label::after {
        font-size: 1.2em; margin-left: 8px;
    }
    /* Checkbox labels */
   #past-attempts-options label {
       padding: 12px 15px; font-size: 0.95em;
   }
   #past-attempts-options label::after {
       margin-left: 8px; /* Adjust indicator spacing */
   }
   /* Pain Scale */
   .pain-scale-options label { min-width: 35px; padding: 6px 0;}
   #results-page h2 { font-size: 1.3em; }
   #results-page h3 { font-size: 1.15em; }
}

/* --- CanvasJS Chart Container Styling --- */
#chartContainerWrapper {
    margin-top: 35px;    /* Space above chart */
    margin-bottom: 35px; /* Space below chart */
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;   /* Max width for larger screens */
    width: 95%;         /* Responsive width */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Optional subtle shadow */
    border-radius: 8px; /* Optional rounded corners */
    padding: 10px;      /* Optional padding around chart */
    background-color: #fff; /* Optional white background */
}

#chartContainer {
    height: 370px;
    width: 100%;
}