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

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    /* Add top padding = initial header height + some space */
    /* Adjust the 90px based on your final header height if needed */
    padding: 90px 20px 20px 20px; /* This might be overridden if you use the sticky header JS */
    background-color: #f8f9fa; /* Light grey background */
    color: #343a40;
    font-size: 16px;
    line-height: 1.6;
}

/* === Styles for Sticky Header === */
#sticky-logo-header {
    position: fixed; /* Keep it fixed at the top */
    top: 0;
    left: 0;
    width: 100%;
    text-align: center; /* Center the image inside */
    background-color: rgba(248, 249, 250, 0.95); /* Use body background color, slightly transparent */
    padding: 15px 0; /* Initial padding */
    z-index: 1000; /* Ensure it's above other content */
    border-bottom: 1px solid #dee2e6; /* Subtle separator */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    transition: padding 0.3s ease; /* Smooth transition for padding */
}

#sticky-logo {
    max-height: 60px; /* Initial maximum height */
    width: auto; /* Maintain aspect ratio */
    transition: max-height 0.3s ease; /* Smooth transition for size */
    vertical-align: middle;
}

/* Scrolled state for header */
#sticky-logo-header.scrolled {
    padding: 5px 0; /* Reduced padding */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08); /* Slightly stronger shadow */
}

#sticky-logo-header.scrolled #sticky-logo {
    max-height: 40px; /* Reduced maximum height */
}
/* === End Sticky Header Styles === */


/* --- Layout & Card --- */
.form-container {
    max-width: 800px;
    margin: 30px auto; /* Margin applies below sticky header */
    /* If using sticky header, ensure this margin is sufficient */
}

.card {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e9ecef;
    background-color: #ffffff;
    border-top: 4px solid #2563eb; /* Primary blue accent */
}

.card-header h2 {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem; /* Adjusted */
    color: #212529;
}
/* Sub-heading under H2 */
.card-header .sub-heading {
    font-size: 0.95rem;
    color: #6c757d;
    text-align: center;
    margin-top: -0.5rem;
    margin-bottom: 1.25rem;
    font-style: italic;
}

.card-header p { /* Intro paragraphs */
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    text-align: center;
}

.card-content {
    padding: 2rem;
}

/* --- Typography & Spacing Utilities --- */
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.block { display: block; }
.text-sm { font-size: 0.875rem; }

.space-y-2 > *:not(:last-child) { margin-bottom: 0.5rem; }
.space-y-4 > *:not(:last-child) { margin-bottom: 1rem; }


/* --- Grid Layout --- */
.grid { display: grid; gap: 1.5rem; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* --- Form Elements Styling --- */
label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: #495057;
}

.input-field {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1rem;
    background-color: #fff;
    color: #495057;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-field:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    outline: none;
}

textarea.input-field { min-height: 100px; resize: vertical; }

select.input-field {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%236c757d"%3E%3Cpath fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 1em;
    padding-right: 2.8rem;
}

input[type="radio"], input[type="checkbox"] {
    margin-right: 0.6rem;
    vertical-align: middle;
    height: 1.1em; width: 1.1em;
    position: relative; top: -1px;
    accent-color: #2563eb;
}

.radio-group label, .checkbox-group label {
    font-weight: 400;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

/* --- Section & Fieldset Styling --- */
fieldset {
    border: none;
    padding: 1.5rem;
    margin: 0 0 2rem 0;
    border-radius: 8px;
    background-color: #ffffff; /* Default white */
    border: 1px solid #e9ecef; /* Subtle border */
}

legend {
    font-weight: 600;
    padding: 0 0 0.75rem 0;
    font-size: 1.2rem;
    color: #343a40;
    margin-bottom: 1rem;
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
}

.explanation-text {
    font-size: 0.85rem;
    color: #6c757d;
    margin: -0.75rem 0 1rem 0;
    padding: 0.5rem 0;
    font-style: italic;
}
.explanation-text em { font-style: normal; font-weight: 500; }

/* Colored Section Styles */
.section-grey   { background-color: #f8f9fa; border-color: #dee2e6; }
.section-yellow { background-color: #fffbeb; border-color: #fde68a; }
.section-red    { background-color: #fff1f2; border-color: #fecdd3; }
.section-green  { background-color: #f0fdf4; border-color: #a7f3d0; }
.section-blue   { background-color: #eff6ff; border-color: #bfdbfe; }

/* --- Button Styling --- */
/* General submit button for the form page */
.submit-button {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 2.5em auto 0.5em auto;
    padding: 0.9rem 1.5rem;
    background-color: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 2px 4px rgba(0,0,0, 0.1);
}
.submit-button:hover { background-color: #1d4ed8; }
.submit-button:active { transform: scale(0.98); box-shadow: none; }


/* ======================================================== */
/* --- Recommendations Page Specific Styles --- START ----- */
/* ======================================================== */

.recommendation-section {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.recommendation-section h3 {
    color: #212529;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1.25rem; /* Base size, can be overridden */
    margin-top: 0;
}

.recommendation-title {
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
    text-align: center;
    margin-bottom: 2rem;
}

/* --- Primary Package Section --- */
#recommendation-primary-package {
    background-color: #e7f5ff; /* Keep existing style */
    border-color: #a5d8ff;  /* Keep existing style */
    /* overflow: hidden; */    /* Optional: remove if causing clipping */
}

#recommendation-primary-package h3 { /* Package Title (e.g., "Recommended System Package:") */
     color: #1864ab;
     border-color: #d0ebff;
     font-size: 1.35rem;
     margin-bottom: 0.75rem;
}

/* Justification text defaults are fine */

/* Key Benefits Area */
#recommendation-primary-package #package-features {
    margin-top: 1.25rem;
}

/* Style the "Key Benefits for You:" Heading specifically */
/* Assumes it's a direct child (>) strong tag. Adjust if structure differs */
#recommendation-primary-package #package-features > strong {
    display: block;
    margin-bottom: 0.75rem; /* Adjusted margin */
    font-weight: 600;
    font-size: 1.1rem;     /* Style as desired */
    color: #0c4a6e;
}

/* Style the Benefits List (UL) - #package-features-list */
#recommendation-primary-package #package-features ul { /* Selector targets the UL */
    margin-left: 0;
    padding-left: 25px;          /* <<< ADDED/CORRECTED padding */
    list-style-position: outside;/* <<< CORRECTED */
    list-style-type: disc;       /* Ensure bullets are disc */
}

/* Each Benefit Item (LI) */
#recommendation-primary-package #package-features ul li { /* More specific selector */
    margin-bottom: 1rem;    /* <<< CORRECTED spacing */
    font-size: 0.95rem;     /* <<< CORRECTED size */
    line-height: 1.5;       /* Optional: Adjust line height if needed */
}

#recommendation-primary-package #package-features ul li::marker {
    font-size: 0.9em;     /* Make marker slightly smaller than text, or use 1em to match */
    color: #475569;       /* Match description color, or choose another */
    /* You might need to adjust vertical alignment slightly based on font/line-height */
    /* Usually adjusting li line-height is more effective than marker vertical-align */
}

/* Bold Title within each LI */
#recommendation-primary-package #package-features ul li strong {
     font-weight: 600;           /* Ensure it's bold */
     color: #1e293b;           /* Adjust color if needed */
     /* display: block; */      /* Keep default (inline) or uncomment if needed */
}

/* Description Span within each LI */
#recommendation-primary-package #package-features ul li .feature-description { /* Added rule */
    display: block;             /* Forces onto new line */
    font-size: 0.95em;          /* Font size relative to parent LI */
    color: #475569;           /* Softer description color */
    margin-top: 0.25rem;        /* Space below bold title */
}
/* --- End Key Benefits Area --- */


/* --- Savings Section --- */
#recommendation-savings {
    background-color: #e6fcf5;
    border-color: #99f6e4;
}
#recommendation-savings h3 {
    color: #0f766e;
    border-color: #ccfbf1;
    font-size: 1.35rem;
}
#recommendation-savings strong { /* Bolding text within savings */
    color: #115e59;
}
#savings-monthly, #savings-annual {
    color: #0f766e;
    font-weight: 700;
    font-size: 1.1em; /* Make numbers slightly larger */
}
#recommendation-savings .disclaimer {
    font-size: 0.8rem;
    font-style: italic;
    color: #134e4a;
    margin-top: 1rem;
    line-height: 1.4;
}

/* Add to the styles section */
#recommendation-benefits-chart {
    background-color: #f0f7ff;
    border-color: #bfdbfe;
}
#recommendation-benefits-chart h3 {
    color: #1e40af;
    border-color: #e0e7ff;
    font-size: 1.35rem;
}
.benefits-chart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}
.benefit-connection {
    display: flex;
    align-items: center;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.need-item {
    flex-basis: 40%;
    padding-right: 1rem;
    position: relative;
}
.need-item::after {
    content: "→";
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #6366f1;
}
.benefit-item {
    flex-basis: 60%;
    padding-left: 1.5rem;
    color: #1e40af;
    font-weight: 500;
}
.benefit-connection .need-icon, .benefit-connection .benefit-icon {
    display: inline-block;
    margin-right: 8px;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
    .benefit-connection {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .need-item {
        width: 100%;
        padding-right: 0;
        padding-bottom: 0.5rem;
    }
    .need-item::after {
        content: "↓";
        position: static;
        display: block;
        text-align: center;
        transform: none;
    }
    .benefit-item {
        width: 100%;
        padding-left: 0;
        padding-top: 0.5rem;
    }
}

/* --- Quick Fixes Section --- */
#recommendation-quick-fixes {
    background-color: #fffbeb;
    border-color: #fde68a;
}
#recommendation-quick-fixes h3 {
    color: #92400e;
    border-color: #fef08a;
    font-size: 1.35rem;
}
/* Default ul/li styling is likely fine here */

/* --- Next Steps Section --- */
#recommendation-next-steps {
    background-color: #f8f9fa; /* Same as body or slightly different */
    border-color: #e9ecef;
}
#recommendation-next-steps h3 {
    color: #495057;
    border-color: #e9ecef;
    font-size: 1.35rem;
}
/* --- Testimonial Styles --- */

#recommendation-testimonial {
    background-color: #ffffff;
    border-left: 5px solid #2563eb;
    border-top: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;

    /* TEMPORARY TEST: Force display: block */

    /* Ensure original flex rules are still commented out or deleted */
    /* display: flex; */
    /* align-items: flex-start; */
    /* gap: 1.5rem; */
}

/* Style the H3 heading */
#recommendation-testimonial h3 {
     margin-top: 0;
     margin-bottom: 1.25rem; /* Space below heading */
     font-size: 1.25rem;
     color: #1e293b;
     border-bottom: 1px solid #e9ecef; /* Add border below heading */
     padding-bottom: 0.75rem; /* Add padding below heading */
}

/* Rule for the inner flex container holding photo+content */
.testimonial-body { /* Add this rule back */
    display: flex;
    align-items: flex-start; /* Align photo top with text top */
    gap: 1.5rem; /* Space between photo and text content */
}

/* Styles for the photo */
.testimonial-photo {
    width: 70px; /* Adjust size if needed */
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 0.25rem; /* Align top slightly below stars if needed */
}

/* Styles for the right-side content block */
.testimonial-content {
    flex: 1;
}

/* Styles for rating, quote, attribution (ensure contrast on white) */
#recommendation-testimonial .testimonial-rating {
    margin-bottom: 0.75rem;
}
 #recommendation-testimonial .testimonial-quote {
    color: #374151;
    font-style: italic;
    margin-top: 0;
    margin-bottom: 0.75rem;
    padding: 0;
    border: none;
}
 #recommendation-testimonial .testimonial-attribution {
    color: #4b5563;
    text-align: right;
    font-size: 0.9em;
    margin-top: 0.5rem;
}
/* Default p styling is likely fine here */

/* Note: Testimonial and Comparison styles should be moved here from HTML if desired */
/* Example: */
/* #recommendation-testimonial { ... } */
/* .testimonial-photo { ... } */
/* .testimonial-quote { ... } */
/* .testimonial-attribution { ... } */
/* .comparison-grid { ... } */
/* .comparison-column { ... } */

/* ======================================================== */
/* --- Recommendations Page Specific Styles --- END ------- */
/* ======================================================== */

/* Comparison Package enhancements */
/* Add these rules to style.css */

/* Container for the whole comparison section */
#comparison-section {
    background-color: #f8f9fa; /* Light grey background for the section */
    border: 1px solid #dee2e6; /* Subtle border for the section */
    padding: 2rem; /* Add more padding around the grid */
    border-radius: 8px;
}

/* Title above the comparison grid */
#comparison-section h3 {
    text-align: center;
    margin-bottom: 2rem; /* More space below title */
    color: #1e293b;
    border-bottom: none; /* Remove border from this heading */
    font-size: 1.5rem; /* Make it larger */
}

/* Grid container */
#comparison-content { /* This is the .comparison-grid */
    display: grid;
    gap: 1.5rem; /* Space between columns */
    /* grid-template-columns is set by JS */
}

/* Styling for each package column */
.comparison-column {
    background-color: #ffffff; /* White background for each card */
    border: 1px solid #dbeafe; /* Default light blue border */
    border-radius: 10px; /* Slightly more rounded corners */
    padding: 1.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06); /* Subtle shadow */
    display: flex; /* Use flexbox for vertical layout */
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Add hover effect */
}

.comparison-column:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

/* Highlight the recommended column */
.comparison-column.recommended {
    border: 2px solid #2563eb; /* Thicker, primary blue border */
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.15); /* Slightly stronger shadow */
    position: relative; /* Needed for potential badge */
    transform: scale(1.02); /* Slightly enlarge recommended */
}

/* Optional: "Recommended" Badge for the highlighted column */
.comparison-column.recommended::before {
    content: "Recommended";
    position: absolute;
    top: -1px; /* Adjust position */
    left: 50%;
    transform: translateX(-50%) translateY(-50%); /* Center horizontally, move up */
    background-color: #2563eb;
    color: white;
    padding: 0.2rem 0.8rem;
    border-radius: 12px; /* Pill shape */
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 1; /* Ensure it's above the border */
    white-space: nowrap;
}


/* Package Title inside column */
.comparison-column h4 {
    margin-top: 0;
    margin-bottom: 1.5rem; /* More space below title */
    font-size: 1.15rem; /* Slightly larger */
    font-weight: 600;
    color: #1e293b;
    text-align: center;
}

/* Container for feature details */
.comparison-details {
    font-size: 0.9em;
    flex-grow: 1; /* Allow details to fill space */
}

/* Each feature row (Label + Value) */
.comparison-feature-item {
    margin-bottom: 0.8rem; /* Space between features */
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #f3f4f6; /* Lighter separator */
    line-height: 1.5; /* Improve readability */
}
.comparison-feature-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Feature Label (e.g., "Energy Savings Level:") */
.feature-label {
    display: block;
    font-weight: 500; /* Medium weight */
    color: #6b7280; /* Muted gray */
    margin-bottom: 0.2rem; /* Space between label and value */
    font-size: 0.9em; /* Smaller label */
}

/* Feature Value (e.g., "Peak Efficiency...") */
.feature-value {
    display: block;
    color: #374151; /* Darker text for value */
    font-weight: 500; /* Make values slightly bolder */
}

/* Highlight important differences within the value */
.feature-value strong {
    color: #1d4ed8; /* Use a strong blue for emphasis */
    /* Or use green: color: #059669; */
    font-weight: 600; /* Ensure it stands out */
}

/* Comparison Package enhancements end */

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    body {
        /* Adjusted top padding for sticky header */
        padding: 75px 10px 10px 10px; /* Adjust if needed based on mobile sticky header */
        font-size: 15px;
    }
    /* Mobile sticky header styles */
     #sticky-logo-header { padding: 10px 0; }
     #sticky-logo { max-height: 50px; }
     #sticky-logo-header.scrolled { padding: 5px 0; }
     #sticky-logo-header.scrolled #sticky-logo { max-height: 35px; }

    .form-container { margin: 10px auto; }
    .card-header {
        padding: 1.25rem 1rem;
        border-top-width: 3px;
        text-align: left;
    }
    .card-header h2 {
        font-size: 1.4rem;
        text-align: left;
        margin-bottom: 0.5rem;
    }
     .card-header .sub-heading { /* Mobile style for sub-heading */
        text-align: left;
        font-size: 0.9rem;
        margin-top: -0.25rem;
        margin-bottom: 1rem;
    }
    .card-header p { /* Mobile style for intro paragraphs */
        font-size: 0.9rem;
        text-align: left;
        margin-bottom: 0.5rem;
    }
    .card-content { padding: 1.5rem 1rem; }
    .grid-cols-2, .grid-cols-3 { grid-template-columns: 1fr; gap: 1rem; }
    fieldset { margin-bottom: 1.5rem; padding: 1rem; }
    legend { font-size: 1.1rem; margin-bottom: 0.75rem; }
    .explanation-text { margin-bottom: 0.75rem; }

    /* Recommendation Page Specific Mobile */
    .recommendation-title { font-size: 1.6rem; margin-bottom: 1.5rem;}
    .recommendation-section { padding: 1rem; }
    .recommendation-section h3 { font-size: 1.2rem; } /* Slightly smaller headings */

    /* Example if #package-image needs specific mobile styles */
    /* #package-image { */
        /* float: none; */
        /* display: block; */
        /* margin: 0 auto 1rem auto; */
        /* max-width: 150px; */
    /* } */

    /* Stack comparison columns */
    .comparison-grid {
         grid-template-columns: 1fr !important; /* Override inline style if necessary */
    }

     .submit-button { /* General form submit button mobile */
        max-width: 100%;
        padding: 0.8rem 1rem;
        font-size: 1rem;
     }

     /* Ensure recommendation page buttons (.save-btn, specific .submit-button) look good */
     .save-btn, #compare-options-btn { /* Target specific buttons on recommendations page */
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
     }
}