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

.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 --- */
.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 --- */
.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; margin-top: 0; }
.recommendation-title { font-size: 2rem; font-weight: 700; color: #212529; text-align: center; margin-bottom: 2rem; }

/* === UPDATED: Primary Package Styling (Float Method) === */
#recommendation-primary-package {
    background-color: #e7f5ff;
    border-color: #a5d8ff;
    /* ADD overflow to contain float */
    overflow: auto; /* Or overflow: hidden; */
    position: relative; /* Optional: If needed for absolute positioning inside later */
}

/* Float the link containing the image */
#package-image-link {
    float: right;
    /* Add desired margins */
    margin: 0 0 10px 15px; /* Top, Right, Bottom, Left */
}

/* Base styles for the image */
#package-image {
    display: block;
    max-width: 120px; /* Adjust size as desired */
    max-height: 120px;
    height: auto;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* Add margin to text elements to prevent overlap with floated image */
#recommendation-primary-package h3,
#recommendation-primary-package #package-justification,
#recommendation-primary-package #package-features {
    /* ADD right margin: image width (120px) + left margin (15px) + buffer (e.g., 10px) = ~145px */
    margin-right: 150px; /* Adjust this value as needed */
}

#recommendation-primary-package h3 {
    width: auto; /* Allow natural width */
    color: #1864ab;
    border-color: #d0ebff; /* Match package background theme */
    border-bottom: 1px solid #d0ebff; /* Match package background theme */
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
    /* Ensure heading is also pushed away from float */
    /* margin-right: 150px; /* Included in rule above */
}

#recommendation-primary-package #package-features { margin-top: 1.25rem; }
#recommendation-primary-package #package-features strong { display: block; margin-bottom: 0.5rem; color: #0c4a6e; }
#recommendation-primary-package #package-features ul { margin-left: 0; padding-left: 25px; list-style: disc outside;}
#recommendation-primary-package #package-features li { margin-bottom: 0.3rem; font-size: 0.9rem; }

/* === END UPDATED: Primary Package Styling (Float Method) === */

/* Other standard recommendation section styles */
#recommendation-savings { background-color: #e6fcf5; border-color: #99f6e4; }
#recommendation-savings h3 { color: #0f766e; border-color: #ccfbf1; font-size: 1.35rem; }
#recommendation-savings strong { color: #115e59; }
#savings-monthly, #savings-annual { color: #0f766e; font-weight: 700; font-size: 1.1em; }
#recommendation-savings .disclaimer { font-size: 0.8rem; font-style: italic; color: #134e4a; margin-top: 1rem; line-height: 1.4; }
#recommendation-quick-fixes { background-color: #fffbeb; border-color: #fde68a; }
#recommendation-quick-fixes h3 { color: #92400e; border-color: #fef08a; font-size: 1.35rem; }
#recommendation-next-steps { background-color: #f8f9fa; border-color: #e9ecef; }
#recommendation-next-steps h3 { color: #495057; border-color: #e9ecef; font-size: 1.35rem; }


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    body {
        /* Adjusted top padding for sticky header */
        padding: 75px 10px 10px 10px;
        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; }

    /* === UPDATED: Mobile Primary Package Layout (Float Reset) === */
     #recommendation-primary-package {
        /* Optional: Remove overflow containment if it causes layout issues on mobile */
        /* overflow: visible; */
     }

     #package-image-link {
        float: none; /* Turn off float */
        display: block; /* Make the link a block for centering */
        margin: 0 auto 1rem auto; /* Center link/image, add bottom margin */
        width: fit-content; /* Size link to image */
     }

    /* Styles for the image itself on mobile */
    #package-image {
         /* display: block; already set in base styles */
         /* margin: 0 auto; Centering handled by link now */
         max-width: 100px; /* Mobile size */
         max-height: 100px;
         /* Inherits border/radius from base style */
     }

     /* Reset right margin on text elements for mobile */
     #recommendation-primary-package h3,
     #recommendation-primary-package #package-justification,
     #recommendation-primary-package #package-features {
        margin-right: 0; /* Remove the margin added for desktop float */
        text-align: center; /* Optional: center text */
     }
     #recommendation-primary-package h3 {
         width: 100%; /* Ensure heading takes full width */
         text-align: center; /* Center heading */
     }
    /* === END UPDATED: Mobile Primary Package Layout (Float Reset) === */

     .submit-button {
         max-width: 100%;
         padding: 0.8rem 1rem;
         font-size: 1rem;
     }
}