/* General Styles */
.uk-taxcalc-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem; /* Add padding to container */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8f9fa; /* Light grey background for the whole area */
    border: 1px solid #dee2e6; /* Add border like image */
    border-radius: 8px; /* Slight rounding */
    font-size: 1rem; /* Set base font size */
}

/* Form Styles */
.uk-taxcalc-form {
    background-color: #ffffff; /* White background for form */
    padding: 1.5rem;
    border-radius: 8px; /* Match container rounding */
    margin-bottom: 2rem;
    border: 1px solid #dee2e6; /* Border for the form section */
}

/* Attempt to style form groups side-by-side if the structure exists */
.form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}
.form-group-salary {
    flex: 2; /* Salary input takes more space */
}
.form-group-year {
    flex: 1; /* Tax year takes less space */
}
/* Fallback if form-row structure isn't present */
.form-group {
    margin-bottom: 1rem;
}
.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem; /* Reduced margin */
    font-weight: 600;
    color: #495057; /* Slightly muted label color */
    font-size: 1rem; /* Updated label font size */
}

.form-group input[type="number"],
.form-group select {
    width: 100%;
    padding: 0.75rem; /* Slightly smaller padding */
    border: 1px solid #ced4da; /* Standard border */
    border-radius: 4px; /* Less rounded corners */
    font-size: 1rem;
    background-color: #ffffff; /* White background for inputs */
    color: #495057;
    box-sizing: border-box; /* Include padding and border in element's total width/height */
}

.form-group input[type="number"]:focus,
.form-group select:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.uk-taxcalc-form h2 {
    color: #343a40; /* Darker heading */
    margin: 0 0 1.5rem;
    font-size: 1.5rem; /* Slightly smaller */
    font-weight: 600; /* Less bold */
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6; /* Separator line */
    line-height: 1.3; /* Better spacing for wrapped text */
}

.uk-taxcalc-description { /* Style the description paragraph */
    font-size: 1rem; /* Updated description font size */
    color: #6c757d;
    margin-top: -0.5rem; /* Pull closer to inputs */
    margin-bottom: 1.5rem;
}

/* Results Section Styles */
.uk-taxcalc-result {
    background-color: #ffffff; /* White background */
    padding: 0; /* Remove padding, handle with inner elements */
    border-radius: 8px;
    border: 1px solid #dee2e6; /* Add border */
    overflow: hidden; /* Ensure borders contain children */
}

.uk-taxcalc-result h2 { /* "Results" heading */
    color: #343a40;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 1.5rem 1.5rem 1rem; /* Adjust padding */
    border-bottom: 1px solid #dee2e6;
    /* background-color: #f8f9fa; */ /* Removed background */
    line-height: 1.3; /* Better spacing for wrapped text */
}

/* Mimic Table Structure with existing p/h3 tags */
.result-section {
    line-height: 1.6;
    padding: 0 1.5rem 1.5rem; /* Padding for content */
}

.result-section h3 { /* Treat these like table headers/separators */
    color: #343a40;
    margin: 1.5rem 0 1rem;
    font-size: 1.2rem; /* Consistent H3 size */
    font-weight: 600;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
    line-height: 1.3; /* Better spacing for wrapped text */
}

.result-section p {
    margin: 0.5rem 0; /* Tighter spacing */
    color: #495057;
    font-size: 1rem; /* Updated result paragraph font size */
    padding: 0.5rem 0; /* Add padding for spacing */
    border-bottom: 1px solid #e9ecef; /* Light border between "rows" */
}
.result-section p:last-child {
    border-bottom: none; /* No border on last item in a group */
}

/* Style the first H3 (Tax Breakdown) */
.uk-taxcalc-result > h2 + .result-section > h3:nth-of-type(1) {
    /* background-color: #f8f9fa; */ /* Removed background */
    /* padding: 1rem 1.5rem; */ /* Removed padding */
    /* margin: 2rem -1.5rem 1rem; */ /* Removed negative margin */
    /* border-top: 1px solid #dee2e6; */ /* Use default H3 border */
    /* border-bottom: 1px solid #dee2e6; */ /* Removed bottom border */
    font-size: 1.2rem; /* Consistent H3 size */
    margin-top: 1.5rem; /* Ensure consistent margin */
    padding-top: 1rem; /* Ensure consistent padding */
    border-top: 1px solid #dee2e6; /* Ensure consistent border */
}

/* General H3 styling within results */
.result-section h3 {
    color: #343a40;
    margin: 1.5rem 0 1rem;
    font-size: 1.2rem; /* Consistent H3 size */
    font-weight: 600;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6; /* Standard top border for separation */
}

/* Style paragraphs following any H3 */
.result-section h3 ~ p {
    border-bottom: none; /* Remove bottom borders in breakdown */
    padding: 0.25rem 0; /* Adjust vertical padding */
    font-size: 1rem;
    color: #343a40;
}

/* Style subsequent H3s (NI, Summary) within the breakdown section */
/* No special styling needed now, handled by general .result-section h3 */


@media (max-width: 768px) {
    .uk-taxcalc-container {
        margin: 1rem;
        padding: 1rem; /* Adjust padding */
    }
    
    .uk-taxcalc-form,
    .uk-taxcalc-result {
        padding: 1rem; /* Adjust padding */
    }
    .uk-taxcalc-result h2 {
        padding: 0.75rem 1rem;
    }
     .result-section {
        padding: 0 1rem 1rem;
    }
    /* Adjust breakdown styles for mobile */
    .uk-taxcalc-result > h2 + .result-section > h3:nth-of-type(1) {
       /* No special mobile margin/padding needed now */
    }
     .result-section h3 ~ p {
        /* No special mobile padding needed now */
    }

    /* Stack form elements on mobile */
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    .form-group {
        margin-bottom: 1rem; /* Ensure spacing when stacked */
    }
}