/* core_chatbot_app/static/core_chatbot_app/css/style.css */


/* --- START: Home Office Qualification Flow Styles --- */
/* Main container for the entire qualification flow. Applied to your existing #qualification-flow-area */
/* The ID #qualification-flow-area itself already exists in your HTML. */
/* We'll style its children based on the new structure */
#qualification-flow-area {
    
    background-color: #ffffff; /* White card background */
    border-radius: 8px;      /* Rounded corners like your main container */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    padding: 30px 35px;      /* Comfortable padding inside the card */
    margin-top: 20px;        /* Space from chat messages if it appears below */
    margin-bottom: 20px;     /* Space below it */
    border-top: 1px solid #e0e0e0; /* You can add this back if you specifically want a top border */
    max-width: 700px; /* You can set a max-width if you don't want it to stretch to container width */
    width: 100%; /* This is often default for block elements but good to be explicit */
    box-sizing: border-box; /* Ensures padding and border are included in width/height */
    margin-left: auto;
    margin-right: auto; 
  }

/* Header within the qualification flow */
#qualification-flow-area .qualification-header { /* Scoped to qualification flow */
    display: flex;
    align-items: center; /* Vertically aligns items in the middle */
    justify-content: space-between; /* This will now work with three items */
    margin-bottom: 25px; 
}

#qualification-flow-area .qualification-header h1 {
    font-size: 24px;
    font-weight: 600;
    color: #1d2d35; /* Dark blueish-grey from screenshot */
    margin-top: 0;
    margin-bottom: 8px;
}

#qualification-flow-area .qualification-header .header-left,
#qualification-flow-area .qualification-header .header-right {
    flex: 1; /* Distribute space, but the content will determine effective usage */
    /* To make left and right take up minimal space for content:
       flex-basis: auto; 
       flex-grow: 0;
       flex-shrink: 0;
    */
}
#qualification-flow-area .qualification-header .header-left{
    display: flex; /* To align button content */
    justify-content: flex-start;
}

#qualification-flow-area .qualification-header .header-right{
    /* Empty, but needs to exist to balance. 
       If you want perfect centering, ensure this takes up roughly same space as back button.
       Alternatively, set its width explicitly or make header-left and header-right have same flex-basis.
       For example, give it a width or min-width if the back button's width is variable.
    */
     min-width: 80px; /* Example: roughly the width of your back button, adjust as needed */

}

#qualification-flow-area .qualification-header .header-center {
    flex-grow: 2; /* Allows title to take available space but be centered by its own text-align */
    text-align: center;
}

#qualification-flow-area .qualification-header .header-center h1 {
    font-size: 28px; /* Tailwind's text-3xl is typically 30px, adjust as needed */
    font-weight: 700; /* Tailwind's font-bold */
    color: #1f2937; /* Tailwind's text-gray-800 like in designer modal */
    margin: 0; /* Remove default h1 margins */
    display: inline-block; /* Helps with centering if text-align on parent isn't enough */
}

#qualification-flow-area #qualification-back-button {
    background-color: transparent;
    border: none;
    color: #4b5563; /* Tailwind's text-gray-600 */
    cursor: pointer;
    display: inline-flex; /* Align icon and text nicely */
    align-items: center;
    padding: 8px 0; /* Adjust padding: top/bottom 8px, left/right 0 if icon provides spacing */
    font-size: 14px; /* Tailwind's text-sm */
    font-weight: 500; /* Tailwind's font-medium */
    transition: color 0.15s ease-in-out;
}

#qualification-flow-area #qualification-back-button:hover {
    color: #1f2937; /* Tailwind's hover:text-gray-800 */
}

#qualification-flow-area #qualification-back-button .material-icons.button-icon {
    font-size: 24px; /* Tailwind's text-2xl */
    /* Icon already has its own color, inherited or can be set */
}

#qualification-flow-area #qualification-back-button .button-text {
    margin-left: 4px; /* Tailwind's ml-1 */
}

#qualification-flow-area .progress-info-line {
    display: flex; /* Arrange children (label and text) in a row */
    justify-content: space-between; /* Puts space between label and text */
    align-items: center; /* Vertically aligns them if they have different heights */
    margin-bottom: 6px; /* Space below this line, before the progress bar */
}

#qualification-flow-area .qualification-header p {
    font-size: 15px;
    color: #5a6b73; /* Softer grey */
    margin-bottom: 0;
    line-height: 1.5;
}

/* Progress Section Styles */
#qualification-flow-area .progress-section {
    margin-bottom: 30px;
}

#qualification-flow-area .progress-label {
    font-size: 13px;
    font-weight: 500;
    color: #4b5563
}

#qualification-flow-area .progress-bar-container {
    width: 100%;
    background-color: #e5e7eb; /* Tailwind's bg-gray-200 */
    border-radius: 9999px; /* Tailwind's rounded-full */
    height: 10px; /* Tailwind's h-2.5 */
    overflow: hidden;
    /* margin-bottom: 6px; /* This was for spacing to indicator text, not needed if indicator text is above */
}

#qualification-flow-area .progress-bar-container {
    width: 100%;
    background-color: #e5e7eb; /* Lighter blue for the track */
    border-radius: 9999px;
    height: 10px;
    overflow: hidden;
}

#qualification-flow-area #progress-bar-filled {
    height: 100%;
    background-color: #3b82f6; /* Tailwind's bg-blue-600 */
    border-radius: 9999px; /* Tailwind's rounded-full */
    transition: width 0.4s ease-in-out;
}


#qualification-flow-area #progress-indicator-text {
    font-size: 13px;
    color: #3b82f6;
    font-weight: 500;
}



/* Question Card Styling */
#qualification-flow-area .question-card { /* Class for the main question card */
    border: 1px solid #e0e4e8; /* Light grey border */
    border-radius: 8px;
    padding: 25px;
    background-color: #fff; /* Ensure white background if not inheriting */
}

#qualification-flow-area .question-content {
    margin-bottom: 25px;
}

#qualification-flow-area .question-title-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

/* Styling your existing h3 for the question text, now within .question-title-line */
#qualification-flow-area #qualification-question-text {
    font-size: 18px;
    font-weight: 600;
    color: #1d2d35;
    line-height: 1.4;
    margin: 0 10px 0 0; /* Reset margin, add right margin */
    flex-grow: 1;
}

/* Info button specifically for the question title line (simple icon) */
#qualification-flow-area .question-title-line .info-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #6c757d; /* Grey for info icon */
    margin-left: 10px; /* Space from the text */
    flex-shrink: 0; /* Prevent button from shrinking */
    /* Resetting styles from your global .info-button if they conflict */
    width: auto;
    height: auto;
    border-radius: 0;
    line-height: normal;
    text-align: left;
}

#qualification-flow-area .question-title-line .info-button svg {
    width: 20px;
    height: 20px;
    display: block; /* Helps with alignment */
}

#qualification-flow-area .question-title-line .info-button:hover svg {
    color: #007bff; /* Change color on hover */
}


#qualification-flow-area .question-description {
    font-size: 14px;
    color: #5a6b73;
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Answer Options Container - Replaces/Enhances your #qualification-options-container styling */
#qualification-flow-area #qualification-options-container {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 12px; /* Space between buttons */
    justify-content: flex-start; /* Align to start */
    flex-wrap: nowrap; /* Prevent wrapping if not desired, let buttons take full width */
}

/* New general button style for qualification answers (replaces .qual-button for this specific context) */
#qualification-flow-area .answer-button {
    font-family: 'Roboto', sans-serif; /* Inherit from body or be explicit */
    font-size: 15px;
    font-weight: 500;
    padding: 12px 20px; /* Adjusted padding */
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    border: 1px solid #ced4da; /* Default border (for No button style) */
    background-color: #f8f9fa; /* Default background (for No button style) */
    color: #495057; /* Default text color (for No button style) */
    text-align: center;
    width: 100%; /* Make buttons take full width */
    box-sizing: border-box;
}

#qualification-flow-area .answer-button:hover {
    border-color: #adb5bd;
    background-color: #e9ecef;
}

/* Specific style for "Yes" button to match screenshot accent */
#qualification-flow-area .answer-button.yes-button {
    background-color: #e6f2ff; /* Very light blue background */
    color: #007bff; /* Blue text */
    border: 1px solid #b3d7ff; /* Light blue border */
}

#qualification-flow-area .answer-button.yes-button:hover {
    background-color: #d0e7ff;
    border-color: #80bfff;
}

/* Styling for when a button is selected (add 'active' class via JS) */
#qualification-flow-area .answer-button.active {
    background-color: #007bff; /* Primary blue */
    color: #ffffff;
    border-color: #0056b3; /* Darker blue border */
}
#qualification-flow-area .answer-button.yes-button.active { /* Ensure active Yes is also prominent */
    background-color: #007bff;
    color: #ffffff;
    border-color: #0056b3;
}


/* Styling for Multiple Choice Radio Options (if you use them) */
#qualification-flow-area .radio-option {
    display: block;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    cursor: pointer;
    background-color: #f8f9fa;
    font-size: 15px;
    color: #495057;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
#qualification-flow-area .radio-option:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}
#qualification-flow-area .radio-option input[type="radio"] {
    margin-right: 10px;
    vertical-align: middle;
}
#qualification-flow-area .radio-option.active {
    background-color: #e6f2ff; /* Light blue for active radio */
    border-color: #007bff;
    color: #0056b3; /* Darker blue text for active radio */
}


/* Feedback and Outcome Message Styling within qualification flow */
#qualification-flow-area .feedback-message { /* General class for feedback areas */
    border-radius: 6px;
    font-size: 15px;
    margin-top: 20px;
    line-height: 1.5;
}

#qualification-flow-area .feedback-error {
    padding: 16px;
}


#qualification-flow-area .feedback-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Your existing #qualification-feedback p can inherit from .feedback-message if you add the class */
/* Or you can style it directly if it's always for a specific type of message */
#qualification-feedback { /* Use this as a container and apply .feedback-message classes dynamically */
    /* For example, if it always shows error/fail messages: */
    /* background-color: #f8d7da; */
    /* color: #721c24; */
    /* border: 1px solid #f5c6cb; */
    /* padding: 15px; */
    /* border-radius: 6px; */
    /* font-size: 15px; */
    /* line-height: 1.5; */
}
#qualification-feedback p { /* Specific p styling if needed, but prefer class-based */
    margin-top: 0; /* Reset if parent has padding */
    margin-bottom: 0; /* Reset if parent has padding */
    font-style: normal; /* Overriding your italic if the feedback classes handle tone */
}
/* --- END: Home Office Qualification Flow Styles --- */


/* Your existing general styles below this point */
/* ... (system-message, calculation-input-area, etc.) ... */

.system-message { /* Style for system messages like "Switched mode" */
    background-color: #f0f0f0; /* A neutral background */
    color: #555;
    align-self: center;
    font-style: italic;
    padding: 8px 12px;
    border-radius: 10px;
    max-width: 90%;
    text-align: center;
    margin-bottom: 10px;
}


.calculation-form-container {
    
    margin-left: auto;
    margin-right: auto;

    max-width: 42rem; /* 672px */

    border-radius: 0.75rem; /* 12px */

    border: 1px solid #e5e7eb;

    background-color: #ffffff;

    padding: 1.5rem; /* 24px */

    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Responsive padding for main container */
@media (min-width: 768px) { /* md: */
    .calculation-form-container {
        padding: 2rem; /* md:p-8 (32px) */
    }
    /* Outer <main> padding */
    .calculation-main-padding {
        padding-left: 4rem; /* md:px-16 */
        padding-right: 4rem;
    }
}
@media (min-width: 1024px) { /* lg: */
    .calculation-form-container {
        padding: 2.5rem; /* lg:p-10 (40px) */
    }
    /* Outer <main> padding */
    .calculation-main-padding {
        padding-left: 6rem; /* lg:px-24 */
        padding-right: 6rem;
    }
}

.calculation-form {
    /* space-y-8: margin between direct children */
}
.calculation-form > * + * { /* Applies to all direct children except the first */
    margin-top: 2rem; /* 32px for space-y-8 */
}

/* Section styles */
.form-section h2 {
    /* mb-6 */
    margin-bottom: 1.5rem; /* 24px */
    /* border-b border-gray-200 */
    border-bottom: 1px solid #e5e7eb;
    /* pb-3 */
    padding-bottom: 0.75rem; /* 12px */
    /* text-xl */
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; /* 28px */
    /* font-semibold */
    font-weight: 600;
    /* text-gray-700 */
    color: #374151;
}

/* Spacing for content within sections (like area details or other direct deductions) */
.form-section-content-spacing {
    /* space-y-6 */
}
.form-section-content-spacing > * + * {
    margin-top: 1.5rem; /* 24px for space-y-6 */
}


/* Grid layout for inputs */
.form-grid {
    /* grid */
    display: grid;
    /* gap-x-6 */
    column-gap: 1.5rem; /* 24px */
}
.form-grid-area-details { /* grid-cols-1 gap-y-2 sm:grid-cols-6 */
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
    row-gap: 0.5rem; /* gap-y-2 (8px) */
}
.form-grid-premise-costs { /* grid-cols-1 gap-y-6 sm:grid-cols-2 */
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
    row-gap: 1.5rem; /* gap-y-6 (24px) */
}


@media (min-width: 640px) { /* sm: */
    .form-grid-area-details {
        /* sm:grid-cols-6 */
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .form-grid-area-details .sm-col-span-3 {
        /* sm:col-span-3 */
        grid-column: span 3 / span 3;
    }
    .form-grid-premise-costs {
        /* sm:grid-cols-2 */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
     .form-grid-premise-costs .sm-col-span-2 { /* For security costs field */
        grid-column: span 2 / span 2;
    }
}

.form-grid > div > label + .form-input-wrapper, /* Space between label and input-wrapper if error is not present */
.form-grid > div > .form-input-wrapper + .error-text, /* Space between input-wrapper and error-text */
.form-grid > div > label + .error-text /* Space between label and error-text if input-wrapper is somehow skipped (unlikely here) */
 {
    margin-top: 0.25rem; /* 4px - adjust as needed, Tailwind's space-y-1 or space-y-2 equivalent */
    margin-right: 20px;
}

.form-section-content-spacing > div > label + .form-input-wrapper,
.form-section-content-spacing > div > .form-input-wrapper + small, /* small for your helper text */
.form-section-content-spacing > div > small + .error-text /* if helper text is followed by error text */
{
    margin-top: 0.25rem; /* Or 0.5rem for more space */
}
.form-section-content-spacing > div > .form-input-wrapper + small.error-text /* If error is the only small after input */
{
    margin-top: 0.25rem;
}

.calculation-main-padding {
    /* flex-1 (assuming it's a flex child, ensures it grows) */
    flex: 1 1 0%;
    /* px-8 py-10 */
    padding: 2.5rem 2rem; /* py-10 px-8 */
}

#calculation-input-area h3, #calculation-input-area h4 {
    color: #333;
    margin-top: 20px;
    margin-bottom: 10px;

}

#calculation-input-area{
    overflow-y: auto;
}

#calculation-input-area h4 {
    font-size: 1.1em;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

/* Title section */
.form-title-section {
    /* mb-8 */
    margin-bottom: 2rem; /* 32px */
    /* text-center */
    text-align: center;
}
.form-title-section h1 {
    /* text-3xl */
    font-size: 1.875rem; /* 30px */
    line-height: 2.25rem; /* 36px */
    /* font-bold */
    font-weight: 700;
    /* tracking-tight */
    letter-spacing: -0.025em;
    /* text-gray-800 */
    color: #1f2937;
}
.form-title-section p {
    /* mt-2 */
    margin-top: 0.5rem; /* 8px */
    /* text-sm */
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    /* text-gray-600 */
    color: #4b5563;
}

.form-group {
    margin-bottom: 15px;
}

.form-label {
    /* flex items-center (for label text and info icon) */
    display: flex;
    align-items: center;
    /* text-sm */
    font-size: 0.875rem; /* 14px */
    /* font-medium */
    font-weight: 500;
    /* leading-6 */
    line-height: 1.5rem; /* 24px */
    /* text-gray-900 */
    color: #111827;
}

/* Info icon button inside label */
.form-label-info-button {
    /* ml-2 */
    margin-left: 0.5rem; /* 8px */
    /* text-gray-400 */
    color: #9ca3af;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.form-label-info-button:hover {
    /* hover:text-[#1993e5] */
    color: #1993e5;
}
.form-label-info-button .material-icons {
    /* text-base */
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* Ensure vertical alignment if needed */
    vertical-align: middle; /* Helps align icon with text */
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 0.95em;
}

.form-group input[type="number"], .form-group select {
    width: calc(100% - 22px); /* Full width minus padding and border */
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}
.form-group input[type="number"]:focus, .form-group select:focus {
    border-color: #007bff;
    outline: none;
}

.form-group small {
    display: block;
    font-size: 0.85em;
    color: #666;
    margin-top: 3px;
}
.error-text {
    display: block;
    font-size: 0.75rem; /* 12px */
    color: #dc2626; /* red-600 approx */
    margin-top: 0.25rem; /* 4px */
}

.form-input-wrapper {
    /* mt-2 */
    margin-top: 0.5rem; /* 8px */
}

/* Input field styles */
.form-input {
    /* block */
    display: block;
    /* w-full */
    width: 100%;
    /* rounded-md */
    border-radius: 0.375rem; /* 6px */
    /* border-0 - Tailwind often uses rings instead of borders for focus */
    border: 0; /* This will be overridden by the ring below effectively */
    /* py-2.5 */
    padding-top: 0.625rem; /* 10px */
    padding-bottom: 0.625rem;
    padding-left: 0.75rem; /* Tailwind inputs usually have some horizontal padding */
    padding-right: 0.75rem;
    /* text-gray-900 */
    color: #111827;
    /* shadow-sm */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    /* ring-1 ring-inset ring-gray-300 */
    /* This creates a border-like effect */
    outline: 1px solid #d1d5db; /* Simplified ring effect */
    outline-offset: -1px; /* Makes it look more like an inset border */

    /* Additional default styling for inputs */
    background-color: #fff;
    transition: outline-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.form-input::placeholder {
    /* placeholder:text-gray-400 */
    color: #9ca3af;
}
.form-input:focus {
    /* focus:ring-2 focus:ring-inset focus:ring-[#1993e5] */
    outline: 2px solid #1993e5; /* ring-2 and ring-color */
    outline-offset: -1px; /* to keep the inset feel with a thicker ring */
    /* The shadow-sm might be overridden by some browsers on focus, or you might want a focus shadow */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 0 0 2px rgba(25, 147, 229, 0.3); /* optional focus shadow */
}

@media (min-width: 640px) { /* sm: */
    .form-input {
        /* sm:text-sm */
        font-size: 0.875rem; /* 14px */
        /* sm:leading-6 */
        line-height: 1.5rem; /* 24px */
    }
}

/* Select specific styling (if any, your current form has one) */
.form-select {
    /* Inherit .form-input styles and add specific select styles */
    /* appearance: none; for custom arrow, if desired */
}


/* Submit button area */
.form-submit-area {
    /* mt-10 */
    margin-top: 2.5rem; /* 40px - this overrides the form > * + * margin */
    /* flex justify-end */
    display: flex;
    justify-content: flex-end;
    /* border-t border-gray-200 */
    border-top: 1px solid #e5e7eb;
    /* pt-6 */
    padding-top: 1.5rem; /* 24px */
}
.form-submit-button {
    /* rounded-lg */
    border-radius: 0.5rem; /* 8px */
    /* bg-[#1993e5] */
    background-color: #1993e5;
    /* px-6 py-3 */
    padding: 0.75rem 1.5rem; /* 12px 24px */
    /* text-sm */
    font-size: 0.875rem; /* 14px */
    /* font-semibold */
    font-weight: 600;
    /* text-white */
    color: #ffffff;
    /* shadow-sm */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}
.form-submit-button:hover {
    /* hover:bg-[#137abd] */
    background-color: #137abd;
}
.form-submit-button:focus-visible {
    /* focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1993e5] */
    outline: 2px solid #1993e5;
    outline-offset: 2px;
}


#calculation-results-area {
    max-width: 900px; /* As per designer */
    margin: 2rem auto; /* As per designer */
    padding: 2rem; /* As per designer */
    background-color: white; /* As per designer */
    border-radius: 0.5rem; /* As per designer */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* As per designer */
    font-family: 'Inter', sans-serif; /* Designer's font preference */
    /* display: none; /* JS will control this - already in your HTML inline style */
}

.calc-main-title { /* Was: h4 class="text-2xl font-semibold text-gray-800 mb-6" */
    font-size: 1.5rem; /* approx text-2xl */
    line-height: 2rem;
    font-weight: 600; /* semibold */
    color: #1f2937; /* gray-800 */
    margin-bottom: 1.5rem; /* mb-6 */
}

.calc-results-display-container { /* Was: div class="mb-6 space-y-3" */
    margin-bottom: 1.5rem; /* mb-6 */
}

.calc-results-display-container > .result-item + .result-item { /* Simulates space-y-3 */
    margin-top: 0.75rem; /* space between items */
}

.result-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
}

.result-item:last-child {
    border-bottom: none;
}

.result-label {
    color: #4b5563; /* gray-600 */
    font-weight: 500; /* medium */
}

.result-value {
    color: #1f2937; /* gray-800 */
    font-weight: 600; /* semibold */
}

.total-deduction-container { /* Was: div class="pt-4 mt-4 border-t-2 border-gray-300" */
    padding-top: 1rem; /* pt-4 */
    margin-top: 1rem; /* mt-4 */
    border-top: 2px solid #d1d5db; /* gray-300 */
}

.total-deduction-content { /* Was: div class="flex justify-between items-center" */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-deduction-label { /* Was: span class="text-xl font-semibold text-gray-700" */
    font-size: 1.25rem; /* text-xl */
    line-height: 1.75rem;
    font-weight: 600; /* semibold */
    color: #374151; /* gray-700 */
}

.total-deduction-value { /* Was: span class="total-deduction" */
    font-size: 1.25rem; /* text-xl */
    line-height: 1.75rem;
    font-weight: 700; /* bold */
    color: #10b981; /* emerald-500 (green) */
}

.summary-text { /* Was: p class="text-sm text-gray-600 mb-6" */
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
    color: #4b5563; /* gray-600 */
    margin-bottom: 1.5rem; /* mb-6 */
}

.summary-text .summary-value { /* Was: span class="font-semibold" */
    font-weight: 600; /* semibold */
}

.section-divider { /* Was: hr class="my-8 border-gray-300" */
    margin-top: 2rem; /* my-8 */
    margin-bottom: 2rem; /* my-8 */
    border-color: #d1d5db; /* gray-300 */
    border-top-width: 1px; /* Standard hr behavior */
}

.instructions-panel { /* Was: div class="bg-blue-50 p-6 rounded-lg shadow" */
    background-color: #eff6ff; /* blue-50 */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); /* shadow */
}

.instructions-title { /* Was: h4 class="text-xl font-semibold text-blue-700 mb-4" */
    font-size: 1.25rem; /* text-xl */
    line-height: 1.75rem;
    font-weight: 600; /* semibold */
    color: #1d4ed8; /* blue-700 */
    margin-bottom: 1rem; /* mb-4 */
}

.instructions-intro-text { /* Was: p class="text-gray-700 mb-4" */
    color: #374151; /* gray-700 */
    margin-bottom: 1rem; /* mb-4 */
}

.instructions-list { /* Was: ol class="list-none space-y-3 text-gray-700" */
    list-style-type: none;
    padding-left: 0; /* Reset browser default for ol */
    color: #374151; /* gray-700 */
}

.instructions-list > .instruction-step + .instruction-step { /* Simulates space-y-3 */
    margin-top: 0.75rem; /* space between items */
}

.instruction-step {
    margin-bottom: 0.75rem; /* Default from designer if not using space-y */
    padding-left: 1.75rem; /* To make space for the number */
    position: relative; /* For positioning the ::before pseudo-element */
}

.instruction-step::before {
    content: attr(data-step) "."; /* Gets number from data-step attribute */
    position: absolute;
    left: 0;
    font-weight: 600; /* semibold */
    color: #3b82f6; /* blue-500 */
}

.instruction-step strong { /* Styling for bold text within steps */
    font-weight: 600; /* Or 700 if you prefer bolder */
}

.important-note-box { /* Was: div class="important-note mt-6 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 rounded-md" */
    margin-top: 1.5rem; /* mt-6 */
    padding: 1rem; /* p-4 */
    background-color: #fefce8; /* yellow-100 */
    border-left: 4px solid #f59e0b; /* yellow-500 */
    color: #b45309; /* yellow-700 */
    border-radius: 0.375rem; /* rounded-md */
}

.important-note-box .important-note-title { /* Was: p class="font-medium" */
    font-weight: 500; /* medium */
}
.important-note-box .important-note-text { /* Was: span class="font-normal" */
    font-weight: 400; /* normal */
}


.disclaimer-text { /* Was: p class="text-xs text-gray-500 mt-8 text-center" */
    font-size: 0.75rem; /* text-xs */
    line-height: 1rem;
    color: #6b7280; /* gray-500 */
    margin-top: 2rem; /* mt-8 */
    text-align: center;
}

.disclaimer-text em { /* Style for the "Disclaimer:" part if you want it distinct */
    font-weight: 600; /* Example: make "Disclaimer:" bold */
}


.input-with-info {
    display: flex;
    align-items: center;
}

.input-with-info input[type="number"] {
    flex-grow: 1; /* Input takes most space */
    margin-right: 5px; /* Space before info button */
}

/* This is your existing global .info-button style. */
/* The qualification flow uses a more specific, simpler one in .question-title-line .info-button */
/* .info-button {
    flex-shrink: 0; 
    background-color: #6c757d; 
    color: white;
    border: none;
    border-radius: 50%; 
    width: 24px;
    height: 24px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    line-height: 24px; 
    text-align: center;
}

.info-button:hover {
    background-color: #5a6268;
} */

/* Modal for displaying "More Info" */

.info-modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(241, 245, 249, 0.8); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: 16px;
}



.info-modal-content {
    background-color: #ffffff; /* Tailwind's bg-white */
    padding: 0; /* sections below will have their own */
    width: 100%; /* Take available width */
    max-width: 672px; /* Tailwind's max-w-2xl is 42rem = 672px */
    border-radius: 12px; /* Tailwind's rounded-xl is 0.75rem = 12px */
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); /* Tailwind's shadow-2xl */
    position: relative;
    overflow: hidden; /* useful if content has sharp corners before border-radius */
    display: flex; /* Make content a flex column */
    flex-direction: column; /* Stack sections vertically */
    max-height: 90vh; /* Prevent modal from being too tall */
}

.info-modal-scrollable-content {
    padding: 24px 32px; /* Tailwind's p-6 md:p-8 - adjust as preferred for main content */
    overflow-y: auto; /* Enable scrolling for this part only */
    flex-grow: 1; /* Allow this section to take available vertical space */
}

.info-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Aligns items to the top of the flex line */
    margin-bottom: 24px; /* Tailwind's mb-6 */
}

/* Your #info-modal-title is now h2 and gets this class */
.modal-title-text { 
    font-size: 20px; /* Tailwind's text-xl */
    font-weight: 600; /* Tailwind's font-semibold */
    color: #1e293b; /* Tailwind's text-slate-800 */
    margin: 0; /* Remove default h2 margin */
    line-height: 1.3; /* Adjust for better spacing if title wraps */
}
/* Optional: Responsive font size like designer's md:text-2xl */
@media (min-width: 768px) { /* Tailwind's md breakpoint */
    .modal-title-text {
        font-size: 24px; /* Tailwind's text-2xl */
    }
}

/* Your #info-modal-close-button is now a button and gets this class */
.modal-close-button {
    background: none;
    border: none;
    padding: 0; /* Remove default button padding */
    cursor: pointer;
    color: #64748b; /* Tailwind's text-slate-500 */
    transition: color 0.15s ease-in-out; /* Tailwind's transition-colors */
    line-height: 1; /* Prevent extra space from button line-height */
}
.modal-close-button:hover {
    color: #334155; /* Tailwind's hover:text-slate-700 */
}
.modal-close-button .material-icons {
    font-size: 24px; /* Ensure icon size is appropriate */
    display: block; /* Fixes potential alignment issues */
}



.info-modal .quick-info { 
    background-color: #f0f9ff; /* Tailwind's bg-sky-50 */
    border-left: 4px solid #0ea5e9; /* Tailwind's border-sky-500 */
    padding: 16px; /* Tailwind's p-4 */
    margin-bottom: 24px; /* Tailwind's mb-6 */
    border-radius: 6px; /* Tailwind's rounded-md (0.375rem) */
    font-size: 14px; /* Tailwind's text-sm */
    color: #0369a1; /* Tailwind's text-sky-700 */
    font-style: italic; /* As per design */
    line-height: 1.5;
}

/* For the bold part within quick-info (JS would need to add <strong> tags) */
.info-modal .quick-info strong {
    font-weight: 600; /* Tailwind's font-semibold */
}

.info-modal .qna-section {
    margin-bottom: 32px; /* Tailwind's mb-8, creates space before next potential section */
}

.info-modal .qna-prompt-text { /* New class for the prompt */
    color: #334155; /* Tailwind's text-slate-700 */
    font-weight: 500; /* Tailwind's font-medium */
    margin-bottom: 8px; /* Tailwind's mb-2 */
    font-size: 16px; /* Or 14px (text-sm) if preferred */
}

.info-modal .qna-input-group { /* New class for the input+button wrapper */
    display: flex;
    gap: 12px; /* Tailwind's space-x-3 (0.75rem) */
    align-items: center; /* Vertically align input and button */
}

.info-modal .qna-text-input { /* Replaces old #info-modal-qna-input styling */
    flex-grow: 1; /* Take available space */
    padding: 12px; /* Tailwind's p-3 */
    border: 1px solid #cbd5e1; /* Tailwind's border-slate-300 */
    border-radius: 8px; /* Tailwind's rounded-lg */
    font-size: 14px; /* Tailwind's text-sm */
    outline: none;
    transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out; /* Tailwind's transition-shadow */
}
.info-modal .qna-text-input:focus {
    border-color: #0ea5e9; /* Tailwind's focus:border-sky-500 */
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.4); /* Approximates focus:ring-2 focus:ring-sky-500 */
}
.info-modal .qna-text-input::placeholder {
    color: #94a3b8; /* Tailwind's placeholder:text-slate-400 (approx) */
}


.info-modal .qna-submit-button { /* Replaces old #info-modal-qna-submit styling */
    background-color: #0ea5e9; /* Tailwind's bg-sky-600 (using sky-500 for closer match to border-sky-500 on input focus) */
                                /* Designer's button is bg-sky-600, input focus is sky-500. Let's use 0ea5e9 (sky-500) */
    background-color: #0ea5e9; /* Sky 500: #0ea5e9, Sky 600: #0284c7. Designer uses sky-600 button, sky-500 focus ring. */
    background-color: #0284c7; /* Let's use sky-600 for button */

    color: white;
    font-weight: 600; /* Tailwind's font-semibold */
    padding: 12px 24px; /* Tailwind's px-6 py-3 */
    border-radius: 8px; /* Tailwind's rounded-lg */
    border: none;
    cursor: pointer;
    display: inline-flex; /* To align text and icon */
    align-items: center;
    gap: 8px; /* Tailwind's space-x-2 (0.5rem) */
    font-size: 14px; /* Tailwind's text-sm */
    transition: background-color 0.15s ease-in-out;
}
.info-modal .qna-submit-button:hover {
    background-color: #0369a1; /* Tailwind's hover:bg-sky-700 */
}
.info-modal .qna-submit-button .material-icons {
    font-size: 16px; /* Tailwind's text-base */
}


/* Q&A Loading - style the existing #info-modal-qna-loading */
#info-modal-qna-loading {
    margin-top: 12px; /* Increased from 8px */
    font-style: italic;
    color: #4b5563; /* text-slate-600 approx */
    font-size: 14px;
}

/* Q&A Response Box */
.info-modal .qna-response-box { /* Replaces old #info-modal-qna-response styling */
    margin-top: 24px; /* More space before response */
    padding: 24px; /* Tailwind's p-6 */
    background-color: #f8fafc; /* Tailwind's bg-slate-50 */
    border-radius: 8px; /* Tailwind's rounded-lg */
    font-size: 14px; /* Tailwind's text-sm */
    line-height: 1.6; /* Tailwind's leading-relaxed */
    color: #334155; /* Tailwind's text-slate-700 */
    min-height: 50px;
    white-space: pre-wrap; 
}
/* Styling for content within the response box, if generated by marked.js */
.info-modal .qna-response-box p { margin-bottom: 1em; }
.info-modal .qna-response-box strong { font-weight: 600; } /* Tailwind's font-semibold */
.info-modal .qna-response-box ul {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 20px; /* Tailwind's pl-5 */
    display: flex;
    flex-direction: column;
    gap: 8px; /* Tailwind's space-y-2 */
    margin-top: 8px; /* For space if ul follows a p */
}
.info-modal .qna-response-box ul li::marker {
    color: #334155; /* Match text color */
}


.claim-instructions-panel {
    background-color: #e9f5ff; /* Lighter, softer blue */
    border: 1px solid #b3d7ff; /* Complementary border */
    border-radius: 6px;
    padding: 15px 20px; /* More padding */
    margin-top: 20px;
    line-height: 1.7; /* Improved readability */
    font-size: 0.95em; /* Slightly larger text if needed */
    color: #333; /* Darker text for better contrast */
}

.claim-instructions-panel h4 {
    color: #0056b3; /* Darker blue for the heading */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em; /* Slightly larger heading */
    border-bottom: 1px solid #cce0ff;
    padding-bottom: 8px;
}

.claim-instructions-panel .instruction-step {
    display: flex; /* For aligning number and text */
    align-items: flex-start; /* Align to the top */
    margin-bottom: 12px; /* Space between steps */
}

.claim-instructions-panel .step-number {
    font-weight: bold;
    color: #0056b3; /* Match heading color */
    margin-right: 8px; /* Space after the number */
    min-width: 20px; /* Ensure numbers align well if they go to double digits */
}

.claim-instructions-panel .instruction-step p {
    margin-top: 0; /* Remove default p margin if step-number handles spacing */
    margin-bottom: 0; /* Remove default p margin */
    flex-grow: 1; /* Text takes remaining space */
}

.claim-instructions-panel strong { /* Make all strong tags consistent */
    color: #2c3e50; /* A slightly different dark color for emphasis */
}

.claim-instructions-panel .important-note {
    margin-top: 20px;
    padding: 10px;
    background-color: #fff3cd; /* Light yellow for warning/important */
    border-left: 4px solid #ffeeba; /* Yellow accent border */
    border-radius: 4px;
    font-size: 0.9em;
}

.claim-instructions-panel .important-note strong {
    color: #856404; /* Darker yellow for the "Important:" text */
}



:root {
    --qm-color-white: #ffffff;
    --qm-color-green-500: #22c55e;
    --qm-color-slate-50: #f8fafc;
    --qm-color-slate-200: #e2e8f0; /* For borders */
    --qm-color-slate-600: #475569;
    --qm-color-slate-700: #334155;
    --qm-color-slate-800: #1e293b;
    --qm-color-slate-900: #0f172a;
    --qm-color-blue-50: #eff6ff;
    --qm-color-blue-500: #3b82f6;
    --qm-color-blue-600: #2563eb;
    --qm-color-blue-700: #1d4ed8;
    --qm-color-blue-800: #1e40af;
}

.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  display: inline-block; /* Ensures proper vertical alignment and spacing */
  vertical-align: middle; /* Adjust if needed */
  line-height: 1; /* Prevents extra space from line height */
}

.qualify-modal {
    background-color: var(--qm-color-white);
    border-radius: 0.75rem; /* 12px */
    margin-left: auto;
    margin-right: auto;
    max-width: 42rem; /* 672px */
    font-family: "Public Sans", "Noto Sans", sans-serif;
    max-height: 85vh; /* Sets maximum height to 85% of the viewport height */
    overflow-y: auto;
}
@media (min-width: 768px) { /* md breakpoint */
    .qualify-modal {
        padding: 1rem; /* 48px */
    }
}

.qm-header-section {
    text-align: center;
    margin-bottom: 2.5rem; /* 40px */
}

.qm-header-icon {
    font-size: 3.75rem; /* 60px - text-6xl */
    line-height: 1;
    color: var(--qm-color-green-500);
    margin-bottom: 1rem; /* 16px */
    display: inline-block; /* Allows margin-bottom and centering via text-align on parent */
}

.qm-title {
    font-size: 1.875rem; /* 30px - text-3xl */
    line-height: 2.25rem;
    font-weight: 700; /* font-bold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: var(--qm-color-slate-900);
}
@media (min-width: 640px) { /* sm breakpoint */
    .qm-title {
        font-size: 2.25rem; /* 36px - sm:text-4xl */
        line-height: 2.5rem;
    }
}

.qm-subtitle {
    margin-top: 0.75rem; /* 12px */
    font-size: 1.125rem; /* 18px - text-lg */
    line-height: 1.75rem; /* 28px - leading-7 */
    color: var(--qm-color-slate-600);
}

.qm-criteria-summary {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem; /* 40px */
}
/* space-y-6 equivalent */
.qm-criteria-summary > * + * {
    margin-top: 1.5rem; /* 24px */
}

.qm-criteria-heading {
    font-size: 1.125rem; /* 18px - text-lg */
    font-weight: 600; /* font-semibold */
    color: var(--qm-color-slate-800);
    border-bottom: 1px solid var(--qm-color-slate-200);
    padding-bottom: 0.5rem; /* 8px */
    margin-bottom: 1rem; /* 16px */
}

.qm-criteria-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem; /* 16px */
    background-color: var(--qm-color-slate-50);
    border-radius: 0.5rem; /* 8px */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
}

.qm-criteria-text {
    color: var(--qm-color-slate-700);
    font-size: 1rem; /* 16px - text-base */
    line-height: 1.5rem;
    font-weight: 500; /* font-medium */
}

.qm-criteria-icon {
    color: var(--qm-color-green-500);
    font-size: 1.5rem; /* 24px - text-2xl */
    line-height: 2rem; /* from text-2xl line height */
}

.qm-next-steps {
    background-color: var(--qm-color-blue-50);
    border-left: 4px solid var(--qm-color-blue-500);
    padding: 1.5rem; /* 24px */
    border-radius: 0.375rem; /* 6px - rounded-md */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
}

.qm-next-steps-heading {
    font-size: 1.25rem; /* 20px - text-xl */
    line-height: 1.75rem;
    font-weight: 600; /* font-semibold */
    color: var(--qm-color-blue-800);
    margin-bottom: 0.5rem; /* 8px */
}

.qm-next-steps-text {
    color: var(--qm-color-blue-700);
    font-size: 1rem; /* 16px - text-base */
    line-height: 1.625; /* leading-relaxed */
}

.qm-button-container {
    margin-top: 1.5rem; /* 24px */
    text-align: center;
}

.qm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem; /* 8px - rounded-lg */
    background-color: var(--qm-color-blue-600);
    padding: 0.75rem 1.5rem; /* py-3 px-6 (12px top/bottom, 24px left/right) */
    font-size: 1rem; /* 16px - text-base */
    font-weight: 600; /* font-semibold */
    color: var(--qm-color-white);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
    border: none; /* Remove default button border */
    cursor: pointer;
    text-decoration: none; /* If it's an <a> styled as a button */
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.qm-button:hover {
    background-color: var(--qm-color-blue-700);
}

.qm-button:focus {
    outline: none;
    /* Replicating Tailwind's focus ring (2px ring with 2px offset) */
    box-shadow: 0 0 0 2px var(--qm-color-white), 0 0 0 4px var(--qm-color-blue-500);
}

.qm-button-icon {
    margin-right: 0.5rem; /* 8px */
    /* Match common icon size or adjust as needed. Default Material Symbol opsz is 24.
       If you want it to scale with button text, use 'em'. 1.25em ~ 20px if text is 16px */
    font-size: 1.25rem; /* 20px */
}


.message-banner {
    padding: 1.5rem; /* Tailwind p-6 */
    border-radius: 0.375rem; /* Tailwind rounded-md */
    margin-bottom: 2rem; /* Tailwind mb-8 */
    border-left-width: 4px; /* Tailwind border-l-4 */
}

.error-banner {
    background-color: #fff5f5; /* Tailwind bg-red-50 */
    border-color: #f56565; /* Tailwind border-red-400 */
}

.banner-text {
    color: #c53030; /* Tailwind text-red-700 */
    font-size: 1.125rem; /* Tailwind text-lg */
    line-height: 1.75rem;
    font-weight: 500; /* Tailwind font-medium */
    margin-bottom: 1rem; /* Tailwind mb-4 - or remove if only one p */
}

/* --- AI Query Section --- */
.ai-query-section {
    margin-bottom: 2rem; /* Tailwind mb-8 */
    padding: 1.5rem; /* Tailwind p-6 */
    background-color: #f7fafc; /* Tailwind bg-gray-50 */
    border-radius: 0.5rem; /* Tailwind rounded-lg */
}

.section-description {
    color: #4a5568; /* Tailwind text-gray-700 */
    margin-bottom: 0.75rem; /* Tailwind mb-3 */
    font-size: 1rem; /* Tailwind text-base */
    line-height: 1.5rem;
}
.section-description-small {
    color: #718096; /* Tailwind text-gray-600 */
    margin-bottom: 1rem; /* Tailwind mb-4 */
    font-size: 0.875rem; /* Tailwind text-sm */
    line-height: 1.25rem;
}


.input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Tailwind space-x-3 */
    margin-bottom: 1rem; /* Tailwind mb-4 */
}

.text-input {
    flex-grow: 1;
    padding: 0.75rem; /* Tailwind p-3 approx */
    border: 1px solid #cbd5e0; /* Tailwind border-gray-300 */
    border-radius: 0.375rem; /* Tailwind rounded-md */
    outline: none;
    transition: box-shadow 0.2s ease;
}
.text-input:focus {
    border-color: transparent; /* Tailwind focus:border-transparent */
    box-shadow: 0 0 0 2px #4299e1; /* Tailwind focus:ring-2 focus:ring-blue-500 */
}

.loading-text {
    color: #718096; /* Tailwind text-gray-600 */
    font-style: italic;
    /* display: none; */ /* Controlled by JS */
}
.loading-text .spin-icon { /* For the material icon to spin */
    animation: spin 1s linear infinite;
    margin-right: 0.5rem; /* Tailwind mr-2 */
    vertical-align: middle; /* Tailwind align-middle */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ai-response-box {
    margin-top: 1rem; /* Tailwind mt-4 */
    padding: 1rem; /* Tailwind p-4 */
    background-color: #ebf8ff; /* Tailwind bg-blue-50 */
    border: 1px solid #bee3f8; /* Tailwind border-blue-200 */
    border-radius: 0.375rem; /* Tailwind rounded-md */
    /* display: none; */ /* Controlled by JS */
}
.ai-response-box p {
    color: #2b6cb0; /* Tailwind text-blue-700 */
    margin: 0;
    white-space: pre-wrap; /* To respect newlines from AI */
}

/* --- Divider --- */
.divider {
    margin-top: 2rem; /* Tailwind my-8 */
    margin-bottom: 2rem;
    border-color: #e2e8f0; /* Tailwind border-gray-200 */
    border-top-width: 1px;
    border-style: solid;
}

/* --- Navigation Options --- */
.navigation-options {
    /* No specific container styles from Tailwind snippet */
}

.button-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Tailwind space-y-3 */
}

/* --- General Button Styles (Reusable) --- */
.button {
    font-weight: 500; /* Tailwind font-medium */
    padding-top: 0.75rem; /* Tailwind py-3 */
    padding-bottom: 0.75rem;
    padding-left: 1.5rem; /* Tailwind px-6 (more than py for aesthetics) */
    padding-right: 1.5rem;
    border-radius: 0.375rem; /* Tailwind rounded-md */
    transition: background-color 0.2s ease; /* Tailwind transition-colors */
    display: flex;
    align-items: center;
    justify-content: center; /* For full-width buttons */
    border: none;
    cursor: pointer;
    text-decoration: none; /* For button-like links */
}
.button-primary {
    background-color: #4299e1; /* Tailwind bg-blue-500 */
    color: #ffffff; /* Tailwind text-white */
}
.button-primary:hover {
    background-color: #2b6cb0; /* Tailwind hover:bg-blue-600 */
}

.button-secondary {
    background-color: #e2e8f0; /* Tailwind bg-gray-200 */
    color: #4a5568; /* Tailwind text-gray-700 */
}
.button-secondary:hover {
    background-color: #cbd5e0; /* Tailwind hover:bg-gray-300 */
}

.button-full-width {
    width: 100%; /* Tailwind w-full */
}

.button-with-icon .button-icon {
    margin-right: 0.5rem; /* Tailwind mr-2 */
}

#failed-qual-ai-response-area strong, #failed-qual-ai-response-area b {
    font-weight: 600;
}

#failed-qual-ai-response-area ul, #failed-qual-ai-response-area ol {
    padding-left: 20px;
    margin-top: 8px;
    margin-bottom: 8px;
}

#failed-qual-ai-response-area li {
    margin-bottom: 4px;
    line-height: 1.5;
}

#failed-qual-ai-response-area p {
    margin-top: 0;
    margin-bottom: 8px; /* Or consistent with your design */
}
#failed-qual-ai-response-area p:last-child {
    margin-bottom: 0;
}

/* General Body Styling (assuming it's set globally, but added for context) */

.start-screen-main-content {
    flex-grow: 1; /* Takes available space if body is flex */
    padding-top: 2.5rem; /* py-10 */
    padding-bottom: 2.5rem; /* py-10 */
    width: 100%;
}

.start-screen-container {
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 42rem; /* max-w-2xl */
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff; /* bg-white */
    border: 1px solid #e2e8f0; /* border-slate-200 */
    border-radius: 0.75rem; /* rounded-xl */
    padding: 2rem; /* p-8 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.start-screen-intro-text {
    margin-bottom: 1rem; /* mb-8 */
    text-align: center;
}

.start-screen-main-title {
    color: #0f172a; /* text-slate-900 */
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    line-height: 1.2; /* leading-tight (approx) */
    letter-spacing: -0.025em; /* tracking-tight */
    margin: 0;
}

.start-screen-sub-title {
    margin-top: 0.5rem; /* mt-2 */
    color: #475569; /* text-slate-600 */
    font-size: 1.125rem; /* text-lg */
}

.start-screen-how-it-works-section {
    width: 100%;
    margin-bottom: 1.5rem; /* space-y-6 between this and button (approx) */
}

.start-screen-section-title {
    color: #1e293b; /* text-slate-800 */
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    line-height: 1.2; /* leading-tight (approx) */
    letter-spacing: -0.025em; /* tracking-tight */
    margin-top: 0;
    margin-bottom: 1.5rem; /* space-y-6 leading to steps */
}

.start-screen-steps-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 for items inside */
}

.start-screen-step-card {
    display: flex;
    align-items: flex-start; /* items-start */
    gap: 1rem; /* gap-4 */
    border: 1px solid #e2e8f0; /* border-slate-200 */
    background-color: #f8fafc; /* bg-slate-50 */
    padding: 1rem; /* p-4 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: box-shadow 0.2s ease-in-out;
}

.start-screen-step-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* hover:shadow-md */
}

.start-screen-step-icon-container {
    flex-shrink: 0; /* shrink-0 */
    width: 2.5rem; /* size-10 */
    height: 2.5rem; /* size-10 */
    border-radius: 9999px; /* rounded-full */
    background-color: #dbeafe; /* bg-blue-100 */
    color: #2563eb; /* text-blue-600 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.start-screen-step-icon {
    /* SVG size is set in its attributes (width/height 24px) */
}

.start-screen-step-text-content {
    /* Flex grow is default, text will take remaining space */
}

.start-screen-step-title {
    color: #1e293b; /* text-slate-800 */
    font-size: 1rem; /* text-base */
    font-weight: 500; /* font-medium */
    margin-top: 0;
    margin-bottom: 0.125rem; /* Small space between title and description */
}

.start-screen-step-description {
    color: #475569; /* text-slate-600 */
    font-size: 0.875rem; /* text-sm */
    margin: 0;
}

.start-screen-cta-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.start-screen-cta-button {
    /* flex-1 on button made it take full width, min/max width also applied */
    /* For a more standard button, set a width or use padding to define size */
    min-width: 84px; /* min-w-[84px] */
    max-width: 480px; /* max-w-[480px] */
    flex-grow: 1; /* flex-1, makes button take up available space within its max-width */

    background-color: #2563eb; /* bg-blue-600 */
    color: #ffffff; /* text-white */
    font-size: 1rem; /* text-base */
    font-weight: 700; /* font-bold */
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    border: none;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    cursor: pointer;
    text-align: center;
    overflow: hidden; /* For the truncate effect */
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex; /* For centering text if needed, and for item alignment */
    align-items: center;
    justify-content: center;
}

.start-screen-cta-button:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
}

.start-screen-cta-button:focus {
    outline: 2px solid transparent; /* focus:outline-none */
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6, 0 1px 2px 0 rgba(0,0,0,0.05); /* Simplified focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 */
}


.start-screen-cta-button-text {
    /* text-truncate is handled by parent's overflow:hidden and button's fixed/max width */
    white-space: nowrap; /* Helps with controlling text overflow */
}


.optimizer-main-content {
    background-color: #f8fafc; /* slate-50 */
    padding: 3rem 1rem; /* py-12 px-4 */
}

@media (min-width: 640px) {
    .optimizer-main-content {
        padding-left: 1.5rem; /* sm:px-6 */
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .optimizer-main-content {
        padding-left: 2rem; /* lg:px-8 */
        padding-right: 2rem;
    }
}

.optimizer-content-container {
    max-width: 56rem; /* max-w-5xl */
    margin-left: auto;
    margin-right: auto;
}

.optimizer-page-header {
    text-align: center;
    margin-bottom: 2.5rem; /* mb-10 */
}

.optimizer-main-title {
    color: #0f172a; /* text-slate-900 */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    letter-spacing: -0.025em; /* tracking-tight */
    margin: 0;
}

@media (min-width: 640px) {
    .optimizer-main-title {
        font-size: 2.25rem; /* sm:text-4xl */
    }
}

.optimizer-sub-title {
    color: #475569; /* text-slate-600 */
    font-size: 1.125rem; /* md:text-lg */
    margin-top: 0.5rem;
}

/* Grid for the cards */
.optimizer-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* grid-cols-1 */
    gap: 1.5rem; /* gap-6 */
}

@media (min-width: 768px) {
    .optimizer-grid {
        grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
    }
}
@media (min-width: 1024px) {
    .optimizer-grid {
        /* grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 - optional if you want 3 columns */
    }
}

/* Individual Card Styling */
.optimizer-card {
    display: flex;
    flex-direction: column; /* flex flex-col */
    background-color: #ffffff; /* bg-white */
    border: 1px solid #e2e8f0; /* border-slate-200 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    overflow: hidden; /* overflow-hidden */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.optimizer-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
    transform: translateY(-5px);
}

.optimizer-card-header {
    display: flex;
    align-items: center;
    gap: 1rem; /* gap-4 */
    padding: 1.25rem; /* p-5 */
    background-color: #f8fafc; /* bg-slate-50 */
    border-bottom: 1px solid #e2e8f0; /* border-slate-200 */
}

.card-icon {
    font-size: 2rem; /* text-3xl approx */
    color: #0c7ff2; /* var(--brand-primary) */
}

.optimizer-card-title {
    color: #1e293b; /* text-slate-800 */
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    margin: 0;
}

.optimizer-card-body {
    padding: 1.25rem; /* p-5 */
    flex-grow: 1; /* flex-grow */
}

.optimizer-card-description {
    font-size: 0.875rem; /* text-sm */
    color: #475569; /* text-slate-600 */
    line-height: 1.5;
}

.optimizer-card-footer {
    padding: 1.25rem; /* p-5 */
    border-top: 1px solid #e2e8f0; /* border-slate-200 */
    background-color: #f8fafc; /* bg-slate-50 */
    margin-top: auto; /* Pushes footer to the bottom */
}

/* Stat Block Styling (for highlighting key numbers) */
.stat-block {
    text-align: center;
    padding: 0.75rem; /* p-3 */
    border-radius: 0.375rem; /* rounded-md */
    margin-bottom: 1rem; /* mb-4 approx */
}
.stat-block-label {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    margin: 0;
}
.stat-block-value {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin: 0.25rem 0 0 0;
}

/* Colored Stat Blocks */
.stat-block-highlight { background-color: #eef2ff; color: #4338ca; } /* bg-indigo-50, text-indigo-600/700 */
.stat-block-highlight .stat-block-value { color: #4f46e5; }

/* Optional other colors from designs if needed */
/* .stat-block-green { background-color: #f0fdf4; color: #15803d; } */
/* .stat-block-amber { background-color: #fffbeb; color: #b45309; } */

/* Slider Styling */
.interactive-card .slider-label {
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #334155; /* text-slate-700 */
    margin-bottom: 0.25rem; /* mb-1 */
}
.optimizer-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.5rem; /* h-2 */
    background: #e2e8f0; /* bg-slate-200 */
    border-radius: 0.5rem; /* rounded-lg */
    outline: none;
    cursor: pointer;
}
.optimizer-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    background: #0c7ff2; /* var(--brand-primary) */
    border-radius: 50%;
    cursor: pointer;
}
.optimizer-slider::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    background: #0c7ff2;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}
.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem; /* text-xs */
    color: #64748b; /* text-slate-500 */
    margin-top: 0.25rem; /* mt-1 */
    padding: 0 2px;
}

/* Button Styling (Assuming you have global .button styles) */
.button { /* Basic button reset */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.button-primary-fullwidth {
    width: 100%;
    border-radius: 0.375rem; /* rounded-md */
    background-color: #0c7ff2; /* var(--brand-primary) */
    padding: 0.625rem 1rem; /* px-4 py-2.5 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #ffffff; /* text-white */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}
.button-primary-fullwidth:hover {
    background-color: #0b70d3; /* Darker blue */
}
.button-icon-right {
    margin-left: 0.5rem; /* ml-2 */
    font-size: 1.125rem; /* text-lg */
}

/* Disclaimer Section */
.optimizer-disclaimer {
    margin-top: 3rem; /* mt-12 */
    display: flex;
    padding: 1rem; /* p-4 */
    background-color: #fefce8; /* bg-yellow-50 */
    border-left: 4px solid #facc15; /* border-l-4 border-yellow-400 */
    border-radius: 0.375rem; /* For consistency */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
}
.disclaimer-icon-wrapper {
    flex-shrink: 0;
}
.disclaimer-icon-wrapper .material-icons {
    color: #ca8a04; /* text-yellow-500 */
}
.disclaimer-text-wrapper {
    margin-left: 0.75rem; /* ml-3 */
}
.disclaimer-text-wrapper p {
    margin: 0;
    font-size: 0.875rem; /* text-sm */
    color: #854d0e; /* text-yellow-700 */
    line-height: 1.5;
}

/* Final Action Button */
.optimizer-final-cta {
    margin-top: 3rem; /* mt-12 */
    display: flex;
    justify-content: flex-end; /* Pushes button to the right */
}
.optimizer-final-cta .button-primary {
    border-radius: 0.375rem; /* rounded-md */
    background-color: #0c7ff2; /* var(--brand-primary) */
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    font-size: 1rem; /* text-base */
    font-weight: 600; /* font-semibold */
    color: #ffffff; /* text-white */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}
.optimizer-final-cta .button-primary:hover {
    background-color: #0b70d3; /* Darker blue */
}