:root {
    --primary: #1a365d;
    --primary-light: #2c5282;
    --primary-dark: #0f2442;
    --brand-blue: #4c6ef5;
    --brand-blue-dark: #3b5bdb;
    --accent: #ff6b35;
    --accent-hover: #e85d2a;
    --accent-light: #fff5f0;
    --success: #059669;
    --warning: #f59e0b;
    --danger: #dc2626;
    --background: #ffffff;
    --background-alt: #fafafa;
    --background-hover: #f5f5f5;
    --border: #e2e8f0;
    --border-light: #f0f0f0;
    --border-focus: #ff6b35;
    --text-primary: #212121;
    --text-secondary: #616161;
    --text-muted: #9e9e9e;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 2px 4px 0 rgb(0 0 0 / 0.06);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --input-background: #f1f5f9;
    --input-border: #dee2e6;
    --input-focus-background: #ffffff;
    --section-background: #f8fafb;
    --section-border: #e9ecef;
    --radius: 4px;
    --radius-md: 8px;
    --radius-lg: 4px;
    --transition: 0.15s ease;
}

/* ========================================
   PRINT STYLES
======================================== */

@media print {
    /* Page setup */
    @page {
        margin-top: 0.3in;
        margin-bottom: 0.4in;
        margin-left: 0.2in;
        margin-right: 0.2in;
        size: letter; /* US Letter with extra space for printer margins */

        @top-center {
            content: "LocalCalc.com";
            font-size: 12px;
            color: #666;
            margin-top: 10px;
        }

        @top-right {
            content: "Page " counter(page) "/" counter(pages);
            font-size: 12px;
            color: #666;
            margin-top: 10px;
        }
    }

    /* Force clean white background everywhere */
    * {
        background: white !important;
        background-color: white !important;
        background-image: none !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Hide page header and description completely */
    h1,
    .page-description,
    .subtitle,
    .intro-text,
    .hero-section,
    .breadcrumbs,
    .results-container .amort-btn,
    .faq-section,
    .help-toggle-btn,
    .related-calculators,
    footer,
    .legal-disclaimer,
    .regional-data-summary,
    .add-scenario-motivation,
    .share-section,
    .save-export-section,
    #add-scenario,
    #delete-scenario,
    .comparison-help-panel,
    .markdown,
    header,
    nav,
    aside {
        display: none !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Print styles for frequency comparison table - disable scroll and show full width */
    .frequency-table-scroll {
        overflow: visible !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    .frequency-comparison-table {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        font-size: 8px !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        border: 1px solid #333 !important;
    }
    
    .frequency-comparison-table th,
    .frequency-comparison-table td {
        padding: 2px 1px !important;
        font-size: 7px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: auto !important;
        border: 1px solid #333 !important;
    }
    
    /* Ensure parent containers don't constrain the table */
    .payment-frequency-comparison,
    .frequency-comparison-wrapper,
    .frequency-tables-container {
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
    }

    /* Force desktop layout for scenario 1 in print - inputs left, results right */
    #scenario-1.mortgage-calculator {
        display: grid !important;
        grid-template-columns: minmax(0, 40%) minmax(0, 60%) !important;
        gap: 8px !important;
        align-items: start !important;
        border: 2px solid #000 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: white !important;
        page-break-before: auto !important;
        page-break-after: always !important;
        page-break-inside: avoid !important;
    }

    #scenario-1.mortgage-calculator h3 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        margin-bottom: 4px !important;
    }

    #scenario-1.mortgage-calculator .inputs-wrapper {
        grid-column: 1 !important;
        grid-row: 2 / span 20 !important;
    }

    #scenario-1.mortgage-calculator .results-container {
        grid-column: 2 !important;
        grid-row: 2 / span 20 !important;
        position: static !important;
        margin-top: -4px !important;
    }

    /* Force both scenarios to always be visible in print - override inline display:none and mobile-active rules */
    #scenarios-container #scenario-1.mortgage-calculator,
    #scenarios-container #scenario-2.scenario-active.mortgage-calculator {
        display: grid !important;
    }

    /* Hide scenario 2 only if it doesn't have the scenario-active class */
    #scenario-2:not(.scenario-active) {
        display: none !important;
    }

    /* Force desktop layout for scenario 2 in print - same as scenario 1 */
    #scenario-2.scenario-active.mortgage-calculator {
        display: grid !important;
        grid-template-columns: minmax(0, 40%) minmax(0, 60%) !important;
        gap: 8px !important;
        align-items: start !important;
        border: 2px solid #000 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: white !important;
        page-break-before: always !important;
        page-break-after: auto !important;
        page-break-inside: avoid !important;
    }

    #scenario-2.scenario-active h3 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        margin-bottom: 4px !important;
    }

    #scenario-2.scenario-active .inputs-wrapper {
        grid-column: 1 !important;
        grid-row: 2 / span 20 !important;
    }

    #scenario-2.scenario-active .results-container {
        grid-column: 2 !important;
        grid-row: 2 / span 20 !important;
        position: static !important;
        margin-top: -4px !important;
    }

    .scenario-tabs {
        display: none !important;
    }

    /* Force desktop layout for results section - hide mobile tabs, show desktop grid */
    .mobile-only,
    .tab-buttons,
    .mobile-tabs,
    .tab-content {
        display: none !important;
    }

    .details-grid.desktop-only {
        display: grid !important;
    }

    /* Compact layout for inputs and results */
    .mortgage-calculator {
        font-size: 11px !important;
        padding: 8px !important;
    }

    .mortgage-calculator label {
        font-size: 10px !important;
        margin-bottom: 2px !important;
    }

    .mortgage-calculator input[type="text"],
    .mortgage-calculator input[type="number"],
    .mortgage-calculator input[type="month"],
    .mortgage-calculator select,
    .paper-input-value,
    .paper-input-row .paper-input-value,
    #scenario-1 .paper-input-value,
    #scenario-2 .paper-input-value {
        font-size: 8px !important;
        padding: 2px 4px !important;
        min-height: 16px !important;
        height: 16px !important;
        line-height: 12px !important;
        border-radius: 0 !important;
        border: 1px solid var(--border) !important;
        transform: none !important;
        font-size-adjust: none !important;
        width: auto !important;
        letter-spacing: normal !important;
    }

    .inputs-section-group {
        padding: 6px !important;
        margin-bottom: 6px !important;
        margin-top: 3px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    .inputs-section-group-title {
        font-size: 9px !important;
        margin-bottom: 4px !important;
    }

    .calculator-header h3 {
        font-size: 13px !important;
        margin-bottom: 3px !important;
        padding-bottom: 3px !important;
        border-bottom: 2px solid #000 !important;
        color: #000 !important;
        font-weight: 700 !important;
    }

    .monthly-payment {
        font-size: 18px !important;
        margin-bottom: 6px !important;
        padding-bottom: 6px !important;
        margin-top: 6px !important;
        border-bottom: 1px solid #000 !important;
        font-weight: 700 !important;
        color: #000 !important;
    }

    .per-month {
        font-size: 10px !important;
    }

    .detail {
        font-size: 9px !important;
        padding: 1px 0 !important;
        border-bottom: 1px solid #ddd !important;
    }

    #true-cost-header, #true-cost-header-2 {
    border-color: var(--border);
    border-radius: 6px;
    padding: 2px 6px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    }

    .paper-input-row {
        margin-bottom: 3px !important;
        padding: 1px 0 !important;
        min-height: 16px !important;
        border-bottom: 1px solid #eee !important;
    }

    .paper-input-label {
        font-size: 8px !important;
    }

    .paper-input-value {
        font-size: 9px !important;
    }

    .toggle-label {
        padding: 4px 8px !important;
        font-size: 9px !important;
        margin-bottom: 1px !important;
        border-radius: 0 !important;
        border: 1px solid #333 !important;
        background: white !important;
    }

    .collapsible-section.active {
        padding: 6px !important;
        margin-bottom: 6px !important;
        background: white !important;
        border: 1px solid #ccc !important;
        border-radius: 0 !important;
    }

    #results,
    #results-2 {
        padding: 6px !important;
        background: white !important;
        border: 1px solid #333 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .details-grid {
        column-gap: 12px !important;
        row-gap: 2px !important;
    }

    .detail-header {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    .down-payment-row,
    .loan-date-row,
    .input-grid {
        gap: 6px !important;
    }

    p {
        margin: 4px 0 !important;
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    /* Banking-style design for additional sections */
    .mortgage-timeline-section {
        background: white !important;
        border: 2px solid #000 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 10px !important;
        margin-top: 0px !important;
        margin-bottom: 15px !important;
        page-break-inside: avoid !important;
        page-break-after: avoid !important;
    }

    .mortgage-timeline-section h3 {
        color: #000 !important;
        border-bottom: 2px solid #000 !important;
        font-weight: 700 !important;
        padding-bottom: 3px !important;
        font-size: 13px !important;
        margin-bottom: 8px !important;
        page-break-after: avoid !important;
    }

    .payment-frequency-comparison {
        background: white !important;
        border: 2px solid #000 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 10px !important;
        margin-top: 15px !important;
        page-break-before: always !important;
    }

    .payment-frequency-comparison h3 {
        color: #000 !important;
        border-bottom: 2px solid #000 !important;
        font-weight: 700 !important;
        padding-bottom: 3px !important;
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    #comparison {
        background: white !important;
        border: 2px solid #000 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 10px !important;
        margin-top: 15px !important;
    }

    #comparison h3 {
        color: #000 !important;
        border-bottom: 2px solid #000 !important;
        font-weight: 700 !important;
        padding-bottom: 3px !important;
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    /* Professional table styling for comparison */
    .comparison-table {
        border: 1px solid #333 !important;
        border-collapse: collapse !important;
    }

    .comparison-table th,
    .comparison-table td {
        border: 1px solid #333 !important;
        padding: 1px 3px !important;
        line-height: 1.1 !important;
        font-size: 9px !important;
    }

    .comparison-table th {
        background: #f5f5f5 !important;
        font-weight: 700 !important;
        height: 26px !important;
        padding: 3px 5px !important;
        font-size: 10px !important;
    }

    .comparison-table tr {
        height: 24px !important;
    }

    .comparison-table td {
        height: 24px !important;
        vertical-align: middle !important;
        padding: 3px 5px !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        font-size: 10px !important;
    }

    .comparison-table {
        border-spacing: 0 !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    /* Timeline charts styling */
    .timeline-chart-wrapper {
        background: white !important;
        border: 1px solid #333 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        padding: 8px !important;
    }

    .insight-card {
        background: white !important;
        border: 1px solid #333 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .timeline-insights {
        page-break-inside: avoid !important;
        page-break-before: avoid !important;
        background: white !important;
        border: 1px solid #333 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Prevent subtitle from breaking away from content */
    .mortgage-timeline-section .subtitle {
        page-break-after: avoid !important;
        margin-bottom: 8px !important;
    }

    /* Force timeline charts to display side by side when two scenarios are active */
    #timeline-charts {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0px !important;
        margin-bottom: 0px;
        page-break-inside: avoid !important;
        page-break-before: avoid !important;
    }

    .timeline-charts-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        page-break-inside: avoid !important;
        page-break-before: avoid !important;
    }

    /* Single scenario timeline chart full width when only one scenario is active */
    #timeline-charts:has(.timeline-chart-wrapper:only-child) {
        grid-template-columns: 1fr !important;
    }

    .timeline-charts-container:has(.timeline-chart-wrapper:only-child) {
        grid-template-columns: 1fr !important;
    }

    /* Alternative selector for better browser support */
    .timeline-chart-wrapper:only-child {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    /* Banking style for additional components */
    .comparison-summary {
        background: white !important;
        border: 1px solid #333 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 8px !important;
        margin-top: 10px !important;
        font-size: 10px !important;
    }

    .milestone-badge {
        background: white !important;
        border: 1px solid #333 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 6px !important;
        margin: 5px 0 !important;
    }

    .milestone-badge-title {
        font-size: 9px !important;
        font-weight: 700 !important;
        color: #000 !important;
    }

    .milestone-badge-detail {
        font-size: 8px !important;
        color: #333 !important;
    }

    .frequency-insight-box {
        background: white !important;
        border: 1px solid #333 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 6px !important;
        margin-bottom: 6px !important;
        font-size: 9px !important;
    }

    .frequency-insight-box .highlight {
        font-weight: 700 !important;
        color: #000 !important;
    }

    .closing-costs-section {
        background: white !important;
        border: 1px solid #333 !important;
        border-radius: 0 !important;
        padding: 6px 8px !important;
        margin: 6px 0 !important;
        box-shadow: none !important;
        transform: none !important;
        page-break-inside: avoid;
    }

    .closing-costs-section h4 {
        color: black !important;
        font-size: 11px !important;
        margin: 0 0 4px 0 !important;
        font-weight: 600 !important;
    }

    .closing-costs-section p {
        color: black !important;
        font-size: 9px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    .closing-costs-section #closing-costs-range,
    .closing-costs-section #closing-costs-range-2 {
        background: none !important;
        color: black !important;
        font-weight: bold !important;
        padding: 0 !important;
    }

    /* Banking style for comparison summary grid generated by JavaScript */
    .comparison-summary [style*="grid-template-columns"],
    .comparison-summary div[style*="background: rgba(37, 99, 235"],
    .comparison-summary div[style*="border-radius"] {
        background: white !important;
        border: 1px solid #333 !important;
        border-radius: 0 !important;
        padding: 8px !important;
        margin: 8px 0 !important;
        max-width: 100% !important;
    }

    .extra-payment-type {
    margin-bottom: 0px !important;;
    }

        .extra-inputs.inputs-section-group {
    margin-top: 0px !important;
    }

    /* Chart canvas styles to prevent stretching in print - exclude timeline charts */
    canvas[id^="chart"]:not(.timeline-chart-canvas) {
        width: 100% !important;
        max-height: 100px !important;
        object-fit: contain !important;
        display: block !important;
        margin-bottom: 0px !important;
        /* Ensure charts are fully rendered before print */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Override inline height on chart container divs - exclude timeline charts */
    div[style*="height"] canvas[id^="chart"]:not(.timeline-chart-canvas) {
        height: 150px !important;
    }

    div[style*="height"]:has(canvas[id^="chart"]:not(.timeline-chart-canvas)) {
        height: 100px !important;
        margin-top: 5px !important;
        margin-bottom: 0px !important;
    }

    /* Timeline charts keep their original dimensions in print */
    canvas.timeline-chart-canvas {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Add delay for scenario 2 to ensure proper rendering */
    #scenario-2.scenario-active {
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }

    /* Ensure chart containers have proper dimensions - only for scenario charts */
    #scenario-1 .timeline-chart-wrapper,
    #scenario-2 .timeline-chart-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-height: 150px !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Keep payment analysis chart containers as block layout */
    .mortgage-timeline-section .timeline-chart-wrapper {
        display: block !important;
    }

    /* Fix timeline chart container height to prevent empty space */
    .timeline-chart-wrapper div[style*="height"] {
        height: 150px !important;
        margin: 0 !important;
    }

    .timeline-chart-wrapper canvas.timeline-chart-canvas {
        max-height: 150px !important;
        width: 100% !important;
        display: block !important;
    }

    /* Compact mobile details styling */
    .compact-details {
        gap: 0px !important;
        padding-top: 2px !important;
    }

    .compact-row {
        padding: 3px 6px !important;
        font-size: 10px !important;
        border-bottom: 1px solid #ddd !important;
        line-height: 1.2 !important;
    }

    .compact-row span,
    .compact-row strong {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    /* Reduce spacing around summary sections */
    .summary-section {
        padding: 4px !important;
        margin: 2px 0 !important;
    }

    .extra-payments-summary {
        padding: 10px !important;
        margin-top: 6px !important;
    }

    .disclaimer-text {
        font-size: 8px !important;
    }

    /* Ensure calculator-disclaimer is the final element in PDF with no additional pages */
    .calculator-disclaimer {
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
        margin-bottom: 0 !important;
        padding-bottom: 10px !important;
    }

    /* Hide legal-disclaimer and everything after calculator-disclaimer in print */
    .legal-disclaimer,
    .calculator-disclaimer ~ * {
        display: none !important;
    }

    /* Ensure no content appears after the calculator disclaimer */
    .calculator-disclaimer::after {
        content: "" !important;
        display: block !important;
        page-break-after: avoid !important;
        height: 0 !important;
    }

    .affordability-content {
        font-size: 8px !important;
    }

    .affordability-indicator {
        margin-bottom: 0px !important;
        border: none !important;
        padding: 0px !important;
    }

    .detail-subline {
        font-size: 8px !important;
    }

    .milestone-badges-container {
    margin-top: 0px !important;
    gap: 0px !important;
    }

    .milestone-badges-container {
    padding: 1px !important;
    }

    .insight-card {
    padding: 1px !important;
    }

    .insight-value {
    font-size: 10px !important;
    }

    .insight-label {
    font-size: 10px !important;
    }

    .timeline-insights {
    padding-top: 1px !important;
    }

    .timeline-insights h4{
    margin-top: 1px !important;
    }

    .inputs-section-group-title {
    display: none !important;
    }

    .additional-costs-divider {
    display: none !important;
    }

}

/* ============================================================= */
   BASE STYLES
*,
*:before,
*:after {
    box-sizing: border-box;
}
#scenarios-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
    overflow-y: visible;
}
@media (max-width: 640px) {
    #scenarios-container {
        padding: 0 0.1rem;
    }
}
.mortgage-calculator {
    font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.mortgage-calculator:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(48% - 14px);
    background: var(--input-background);
    border-radius: 0;
    box-shadow: inset 0 1px #ffffff80;
    z-index: 0;
}
.mortgage-calculator > * {
    position: relative;
    z-index: 1;
}
.mortgage-calculator * {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.mortgage-calculator > h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    padding-bottom: 6px;
    grid-column: 1 / -1;
}
.calculator-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--brand-blue-dark);
    border-bottom: 2px solid var(--brand-blue-dark);
    padding-bottom: 6px;
    flex: 1;
    grid-column: unset;
}
.calculator-header {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    width: 100%;
    position: relative;
    z-index: 10;
}
.calculator-header h3 {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.mortgage-calculator {
    background: var(--background);
    border: 1px solid var(--border-light);
    border-radius: 0;
    padding: 20px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: minmax(0, 45%) minmax(0, 55%);
    gap: 20px;
    max-width: 100%;
    align-items: start;
    position: relative;
    box-shadow: var(--shadow-sm);
}
.mortgage-calculator:before {
    display: none;
}
.mortgage-calculator .inputs-column {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.mortgage-calculator .results-container {
    grid-column: 2;
    grid-row: 1 / span 20;
    position: sticky;
    top: 40px;
    height: fit-content;
    align-self: start;
}
.inputs-section-group {
    background: #fff;
    border: 1px solid rgba(26, 54, 93, 0.08);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    position: relative;
    box-shadow: 0 1px 3px #1a365d0a, 0 4px 12px #1a365d05;
    transition: all 0.2s ease;
}
.inputs-section-group-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.mortgage-calculator > * {
    margin-bottom: 0;
}
.mortgage-calculator > label {
    grid-column: 1;
}
.mortgage-calculator .down-payment-row {
    grid-column: 1;
}
.mortgage-calculator > *:not(.results-container):not(h3):not(.calculator-header) {
    grid-column: 1;
    min-width: 0;
    overflow-wrap: break-word;
}
.mortgage-calculator .results-container {
    grid-column: 2;
    grid-row: 2 / span 20;
    position: sticky;
    top: 40px;
    height: fit-content;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}
.mortgage-calculator label[for*="monthly-income"] {
    grid-column: 1;
}
#comparison h3,
.mortgage-timeline-section h3,
.payment-frequency-comparison h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    padding-bottom: 6px;
}
#scenario-2.scenario-active {
    display: grid;
    grid-template-columns: minmax(0, 45%) minmax(0, 55%);
    align-items: start;
    border-left: 4px solid var(--accent);
    padding-left: 20px;
    margin-left: -4px;
    border-radius: var(--radius);
}
#scenario-2 h3 {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
#scenario-2.scenario-active > h3 {
    grid-column: 1 / -1;
    grid-row: 1;
}
#scenario-2.scenario-active .inputs-wrapper {
    grid-column: 1;
}
#scenario-2.scenario-active .results-container {
    grid-column: 2;
    grid-row: 2 / span 20;
    position: sticky;
    top: 40px;
    height: fit-content;
    align-self: start;
}
#scenario-1 {
    border-left: 4px solid var(--brand-blue-dark);
    padding-left: 20px;
    margin-left: -4px;
    border-radius: var(--radius);
}
#results,
#results-2 {
    background: linear-gradient(135deg, #f8fafc, rgba(76, 110, 245, 0.02));
    border: 1px solid var(--section-border);
    border-radius: var(--radius-md);
    padding: 14px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.results-container .amort-btn {
    width: 100%;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
    margin-top: 0;
}
.results-container .amort-btn:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.mortgage-calculator label {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
    overflow-wrap: break-word;
}
.paper-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    margin-bottom: 10px;
    align-items: center;
    min-height: auto;
    border-bottom: none;
}

/* Linked field group - for positioning the link icon */
.linked-field-group {
    position: relative;
}

/* PMI input wrapper with icon */
.pmi-input-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

/* PMI link icon styling - position it between two fields */
.linked-field-group .pmi-link-icon {
    position: absolute;
    right: 10px;
    bottom: -6.5px;
    font-size: 14px;
    color: var(--text-muted);
    opacity: 0.6;
    cursor: default;
    user-select: none;
    z-index: 1;
    pointer-events: none;
    transform: translateY(50%);
}

/* Adjust icon position on mobile to be more centered */
@media (max-width: 768px) {
    .linked-field-group .pmi-link-icon {
        bottom: -13px;
    }
}

/* Make sure input takes remaining space */
.pmi-input-wrapper .paper-input-value {
    flex: 1;
}
.paper-input-row:hover {
    background: transparent;
}
.paper-input-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
}
.paper-input-value {
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1; /* Fallback for older browsers */
}
.mortgage-calculator input[type="text"],
.mortgage-calculator input[type="number"],
.mortgage-calculator input[type="month"],
.mortgage-calculator select {
    width: 100%;
    padding: 7px 12px;
    font-size: 14px;
    font-weight: 400;
    border: none;
    border-radius: 6px;
    background: var(--input-background);
    color: var(--text-primary);
    transition: all var(--transition);
    text-align: left;
    outline: none;
    min-height: 30px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1; /* Fallback for older browsers */
}
.mortgage-calculator input:hover,
.mortgage-calculator select:hover {
    border-color: var(--border-focus);
    background: var(--input-background);
}
.mortgage-calculator input:focus,
.mortgage-calculator select:focus {
    border-color: var(--border-focus);
    background: var(--input-focus-background);
    box-shadow: 0 0 0 3px #ff6b351a;
}
.monthly-income-input::placeholder,
#recurring-extra-end::placeholder,
#recurring-extra-end-2::placeholder {
    font-size: 13px;
    opacity: 0.6;
    font-weight: 500;
}
.monthly-income-input::-webkit-input-placeholder,
#recurring-extra-end::-webkit-input-placeholder,
#recurring-extra-end-2::-webkit-input-placeholder {
    font-size: 13px;
    opacity: 0.6;
    font-weight: 500;
}
.monthly-income-input::-moz-placeholder,
#recurring-extra-end::-moz-placeholder,
#recurring-extra-end-2::-moz-placeholder {
    font-size: 13px;
    opacity: 0.6;
    font-weight: 500;
}
.monthly-income-input:-ms-input-placeholder,
#recurring-extra-end:-ms-input-placeholder,
#recurring-extra-end-2:-ms-input-placeholder {
    font-size: 13px;
    opacity: 0.6;
    font-weight: 500;
}
.mortgage-calculator select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23616161' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}
.down-payment-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: end;
}
.down-payment-row label {
    display: flex;
    flex-direction: column;
    font-size: 13.5px;
    margin-bottom: 0;
}
.down-payment-row input {
    margin-top: 4px;
    width: 100%;
    min-height: 40px;
}
.loan-date-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    grid-auto-flow: row dense;
    gap: 10px;
    align-items: end;
    grid-column: 1;
}
.loan-date-row label {
    display: flex;
    flex-direction: column;
    font-size: 13.5px;
    margin-bottom: 0;
}
.loan-date-row input,
.loan-date-row select {
    margin-top: 4px;
    width: 100%;
    min-height: 40px;
}
.loan-date-row label[for*="term"]:not([for*="custom"]) {
    grid-column: 1;
    grid-row: 1;
}
.loan-date-row label[for*="start"] {
    grid-column: 2;
    grid-row: 1;
}
.loan-date-row label[for="custom-term"],
.loan-date-row label[for*="custom"],
.loan-date-row #custom-term {
    grid-column: 1;
    grid-row: 2;
}

.calculation-options {
    margin: 16px 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}
.option-toggles {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.toggle-option {
    position: relative;
    cursor: pointer;
    border-bottom: none;
}
.toggle-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}
.toggle-label {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--input-background);
    border: 1px solid var(--section-border);
    border-radius: 8px;
    font-size: 13px;
    transition: all var(--transition);
    cursor: pointer;
    margin-bottom: 4px;
}
.toggle-option.active .toggle-label,
.toggle-option input:checked + .toggle-label {
    background: var(--background-hover);
    color: #fff;
    border-color: var(--primary);
}
.toggle-option:hover .toggle-label {
    background: var(--input-focus-background);
    border-color: var(--border-focus);
}
.toggle-option.active .toggle-label,
.toggle-option input:checked + .toggle-label {
    background: var(--input-focus-background);
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px #1e40af1a;
}
.toggle-label:after {
    content: "\25bc";
    font-size: 10px;
    color: var(--text-muted);
    transition: transform var(--transition);
}
.toggle-option.active .toggle-label:after,
.toggle-option input:checked + .toggle-label:after {
    transform: rotate(-180deg);
}
.toggle-icon {
    font-size: 16px;
}


/* ARM Disclaimer Styles */
.arm-disclaimer {
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: #fffbeb;
  border-left: 4px solid var(--warning);
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1.4;
}

.disclaimer-content {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.disclaimer-icon {
  font-size: 1rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.disclaimer-text {
  color: #2c3e50;
}

.disclaimer-text strong {
  color: #1a365d;
}

/* ARM Details Styles */
.arm-details-toggle {
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
}

.arm-details {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e7f0;
}

.arm-details h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: #2c3e50;
  font-size: 1rem;
}

.arm-assumptions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.assumption-item {
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}

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

.assumption-group {
  padding: 0.5rem 0;
}

.cap-item {
  margin: 0.25rem 0;
  padding-left: 1rem;
  font-size: 0.9em;
}

.collapsible-section {
    margin: 0;
    padding: 0;
    background: transparent;
    border-bottom: none;
}
.collapsible-section.active {
    background: var(--section-background);
    border: 1px solid var(--section-border);
    border-radius: 8px;
    padding: 16px;
    margin-top: -8px;
    margin-bottom: 16px;
}
.section-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.collapsible-section .paper-input-row {
    padding: 0;
    margin-bottom: 12px;
}
.input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: end;
}
.input-grid label {
    display: flex;
    flex-direction: column;
    font-size: 13.5px;
    margin-bottom: 0;
}
.input-grid label input {
    margin-top: 4px;
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    font-size: 15px;
}
.input-grid.loan-date-row,
.loan-date-row.input-grid,
.loan-date-row {
    align-items: start !important;
}
.extra-payment-type {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.extra-inputs.inputs-section-group {
    margin-top: 12px;
    margin-bottom: 0;
    padding: 16px;
}
#extra-payments-section .section-content {
    gap: 12px;
}
.extra-inputs {
    padding: 0;
}
.extra-inputs:not(.inputs-section-group) {
    padding: 8px;
}
.extra-payment-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    background: var(--background);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    transition: all var(--transition);
}
.extra-payment-option:hover {
    background: var(--background-hover);
}
.extra-payment-option.active {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}
.extra-payment-option input[type="checkbox"] {
    width: auto;
    margin: 0;
}
.extra-inputs {
    padding: 8px;
}
.scenario-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
#results-2 .scenario-label {
    color: var(--accent);
    opacity: 0.8;
}
.monthly-payment {
    font-size: 32px;
    font-weight: 700;
    color: var(--brand-blue-dark);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 0px;
}
#results-2 .monthly-payment {
    color: var(--accent);
}
.per-month {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
}
.detail {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-size: 13px;
    color: var(--text-secondary);
    border-bottom: 1px solid #f0f0f0;
}
.detail:last-child {
    border-bottom: none;
}
.detail strong {
    font-weight: 600;
    color: var(--text-primary);
}
.detail span {
    font-weight: 600;
    color: var(--text-primary);
}
.divider {
    height: 1px;
    background: var(--border);
    margin: 10px 0;
    border: none;
}
.success-text {
    color: var(--success) !important;
}
.affordability-indicator {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 10px;
    margin-bottom: 10px;
}
.affordability-content {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}
.affordability-icon {
    font-size: 16px;
}
.affordability-text small {
    font-weight: 400;
    opacity: 0.8;
}
.pmi-warning {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: var(--radius);
    padding: 6px 10px;
    margin: -6px 0 10px;
    font-size: 12px;
    color: #92400e;
    grid-column: 1;
}
.custom-term-error {
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    padding: 5px 8px;
    margin-top: 4px;
    font-size: 12px;
    color: #991b1b;
    display: flex;
    align-items: center;
    gap: 4px;
    grid-column: 1 / -1;
}
.error-icon {
    font-size: 14px;
}
.mortgage-timeline-section {
    margin-top: 32px;
    padding: 20px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow-x: auto;
}
.mortgage-timeline-section h3 {
    margin-bottom: 8px;
}
.subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}
.timeline-charts-container {
    display: grid;
    gap: 24px;
    margin-bottom: 24px;
    min-width: 0;
}
.timeline-chart-wrapper {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    min-width: 0;
    overflow-x: auto;
}
.chart-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}
#timeline-charts {
    display: grid;
    gap: 24px;
    margin-bottom: 24px;
    min-width: 0;
}
#timeline-charts canvas {
    max-width: 100%;
    height: auto;
    display: block;
}
@media (min-width: 769px) {
    #timeline-charts {
        grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    }
}
@media (max-width: 768px) {
    #timeline-charts {
        grid-template-columns: 1fr;
    }
}
.timeline-insights {
    background: var(--background-alt);
    border-radius: var(--radius);
    padding: 16px;
}
.timeline-insights h4 {
    margin-bottom: 16px;
}
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.insights-grid.two-scenarios {
    grid-template-columns: repeat(3, 1fr);
}
.insight-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    text-align: center;
    transition: all var(--transition);
}
.insight-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.insight-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}
.insight-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.insight-detail {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.scenario-1-card {
    border-left: 3px solid var(--primary);
}
.scenario-2-card {
    border-left: 3px solid var(--accent);
}
.milestone-badges-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.milestone-badge {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid rgba(5, 150, 105, 0.2);
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.milestone-badge .icon {
    font-size: 24px;
}
.milestone-badge-content {
    flex: 1;
}
.milestone-badge-title {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.milestone-badge-detail {
    font-size: 12px;
    color: var(--text-secondary);
}
.data-sources {
    margin-top: 0.1rem;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    text-align: left;
}
.data-sources summary {
    cursor: pointer;
    font-weight: 600;
    color: #495057;
    padding: 0.5rem;
}
.sources-list {
    margin-top: 0.75rem;
    padding-left: O;
    list-style: none;
}
.sources-list li {
    margin-bottom: 0.5rem;
    color: #6c757d;
}
.sources-list a:hover {
    text-decoration: underline;
}
.source-date {
    color: #999;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}
.data-sources-section {
    margin: 3rem 0 2rem;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 12px;
}
.data-sources-section h2 {
    margin-bottom: 1rem;
    color: #212529;
}
.sources-grid {
    display: grid;
    gap: 1rem;
    margin: 1rem 0;
    padding-left: 0;
    list-style: none;
}
@media (min-width: 768px) {
    .sources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.payment-frequency-comparison {
    margin-top: 32px;
    padding: 20px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.frequency-tables-container {
    margin-bottom: 20px;
}
.frequency-comparison-wrapper {
    margin-bottom: 24px;
}
.frequency-comparison-wrapper h4 {
    margin-bottom: 12px;
    color: var(--primary);
}
.frequency-table-scroll {
    overflow-x: scroll; /* Zmena z auto na scroll - vždy zobrazí scrollbar */
    position: relative;
    /* Lepší scroll na všetkých zariadeniach */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto; /* Zmena z thin na auto pre lepšiu viditeľnosť */
    padding-bottom: 10px; /* Optimalizované pre tenší scrollbar */
}

/* Custom scrollbar pre webkit browsers - FORCED VISIBLE aj na macOS */
.frequency-table-scroll::-webkit-scrollbar {
    height: 8px; /* Tenší ale stále viditeľný na macOS */
    background: rgba(0,0,0,0.06); /* Jemnejšie pozadie */
    -webkit-appearance: none; /* Zruší natívny macOS styling */
    display: block !important; /* Force display na macOS */
}
.frequency-table-scroll::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.08);
    border-radius: 4px;
    margin: 0 4px; /* Malé odsadenie od okrajov */
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.15); /* Jemnejší shadow */
}
.frequency-table-scroll::-webkit-scrollbar-thumb {
    border-radius: 4px;
    min-width: 20px; /* Menšia minimálna šírka */
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.25); /* Jemnejší shadow */
    border: 0.5px solid rgba(255,255,255,0.15); /* Tenší border */
}
.frequency-table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.3); /* Menší shadow pri hover */
}

/* Dodatočné CSS hack pre macOS - vynutí zobrazenie scrollbaru */
.frequency-table-scroll::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: transparent;
    pointer-events: none;
}

/* Scroll indikátor pre desktop */
@media (min-width: 769px) {
    .frequency-table-scroll::before {
        content: "Scroll horizontally to see all columns →";
        position: absolute;
        top: -20px;
        right: 0;
        font-size: 11px;
        color: var(--text-muted);
        opacity: 0.7;
        pointer-events: none;
        transition: opacity 0.3s;
    }
    
    .frequency-table-scroll.scrolled::before {
        opacity: 0;
    }
}

.frequency-comparison-table {
    width: 100%;
    min-width: 900px; /* Zabezpečí horizontálny scroll */
    border-collapse: collapse;
    font-size: 12px;
}
.frequency-comparison-table thead {
    background: var(--background-alt);
}
.frequency-comparison-table th {
    padding: 8px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.frequency-comparison-table td {
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
}

/* Apply monospace font to numerical values in Alternative Payment Options tables */
.frequency-comparison-table td:not(:first-child) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1; /* Fallback for older browsers */
}
.frequency-comparison-table .current-option {
    background: var(--accent-light);
}
.frequency-comparison-table .savings {
    color: var(--success);
    font-weight: 600;
}
.frequency-calc-note {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 8px;
}
.frequency-insight-box {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid rgba(5, 150, 105, 0.2);
    border-radius: var(--radius);
    padding: 12px;
    font-size: 13px;
    margin-bottom: 12px;
}
.frequency-insight-box .highlight {
    font-weight: 600;
    color: var(--success);
}
#comparison {
    margin-top: 32px;
    padding: 20px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
#comparison h3 {
    margin-bottom: 20px;
}
.comparison-table-wrapper {
    overflow-x: auto;
    position: relative;
}
.comparison-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 20px;
}
.comparison-table thead {
    height: 60px;
}
.comparison-table th {
    padding: 8px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.comparison-table th:nth-child(2) {
    color: var(--primary);
    border-bottom-color: var(--border-light);
}
.comparison-table th:nth-child(3) {
    color: var(--accent);
    border-bottom-color: var(--border-light);
}
.comparison-table td {
    padding: 8px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
    color: var(--text-primary);
    height: 60px;
}

/* Back to monospace for clear comparison */
.comparison-table td:nth-child(2),
.comparison-table td:nth-child(3),
.comparison-table td:nth-child(4) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1; /* Fallback for older browsers */
}
.comparison-table tr:hover {
    cursor: default;
}
.comparison-table .better-value {
    position: relative;
    font-weight: 600;
    color: var(--success);
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}
.comparison-table .better-value:after {
    content: " \2713";
    color: var(--success);
    font-size: 11px;
    opacity: 0.7;
    margin-left: 4px;
}
.section-divider td {
    padding: 2px !important;
    background: transparent;
    border: none !important;
    height: 8px;
}
button:not(.help-toggle-btn):not(.amort-btn):not(.nav-toggle):not(.tab-btn) {
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
}
button:not(.help-toggle-btn):not(.amort-btn):not(.nav-toggle):not(.tab-btn):not(.tab-btn.active):hover {
    background: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.tab-buttons {
    display: flex;
    border-bottom: 1px solid var(--border);
}
.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--accent);
    border-radius: 0;
}
.tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    margin-top: 0 !important;
}
#add-scenario {
    background: var(--accent);
    margin: 16px auto;
    display: block;
}
#add-scenario:hover {
    background: var(--accent-hover);
}
#delete-scenario {
    background: var(--danger);
    margin: 16px auto;
    display: block;
}
#delete-scenario:hover {
    background: #b91c1c;
}
.share-section,
.save-export-section {
    margin-top: 32px;
    padding: 20px;
    background: var(--background-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
}
.share-description,
.section-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}
#share-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--brand-blue-dark);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}
#share-button:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
#share-button svg {
    width: 18px;
    height: 18px;
}
.save-export-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.action-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}
.action-button:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.button-icon {
    font-size: 16px;
}
.help-section {
    margin-bottom: 8px;
}
.help-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    margin-top: 0;
    margin-bottom: 8px;
}
.mortgage-calculator .help-toggle-btn {
    grid-column: 1;
    justify-self: start;
    width: auto;
}
.help-panel {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    grid-column: 1 / -1;
}
.help-section-group {
    margin-bottom: 12px;
}
.help-section-group:last-child {
    margin-bottom: 0;
}
.mortgage-calculator h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--primary);
}
.help-toggle-btn:hover {
    background: var(--background-hover);
    border-color: var(--primary-light);
    color: #fff;
}
.help-toggle-btn:hover .help-text {
    color: #fff;
}
.help-toggle-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.help-panel {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 12px;
}
.help-panel-content {
    font-size: 13px;
    line-height: 1.6;
}
.help-panel h4 {
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--primary);
}
.help-panel h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 10px 0 6px;
    color: var(--text-primary);
}
.help-definitions dt {
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 6px;
}
.help-definitions dd {
    margin: 3px 0 6px 14px;
    color: var(--text-secondary);
}
.comparison-help-panel {
    background: linear-gradient(135deg, #f6f8fb, #f0f4f8);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: all var(--transition);
}
.comparison-help-panel.active {
    background: linear-gradient(135deg, #fff5f0, #ffede5);
    border-color: var(--accent);
}
.comparison-help-icon {
    font-size: 24px;
    transition: transform var(--transition);
}
.comparison-help-panel.updating .comparison-help-icon {
    transform: scale(0.8);
    opacity: 0.5;
}
.help-content {
    flex: 1;
}
.help-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 3px;
}
.help-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.help-toggle-btn.active .help-text {
    color: #fff;
}
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: #00000080;
    z-index: 999;
    backdrop-filter: blur(2px);
}
#amort-modal,
#share-modal,
#saved-modal,
.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--background);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 25px -5px #0000001a;
    z-index: 1000;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}
#amort-modal {
    width: 1000px;
    padding: 24px;
}
#share-modal,
#saved-modal {
    width: 500px;
    padding: 24px;
}
.modal-content {
    padding: 0;
}
#amort-modal h3,
#share-modal h3,
.modal h3 {
    margin-bottom: 20px;
    font-size: 18px;
    color: var(--primary);
}
#amort-modal button,
.modal button {
    margin-right: 8px;
    margin-bottom: 16px;
}
#close-modal,
#close-share-modal,
#close-saved-modal {
    float: right;
    background: var(--danger);
    margin-right: 0;
}
#amort-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
#amort-table thead {
    background: var(--background-alt);
    top: 0;
    z-index: 10;
}
#amort-table th {
    padding: 10px 8px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#amort-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
}
#amort-table tbody tr:hover {
    background: var(--background-hover);
}
#amort-table td {
    padding: 8px;
}
.year-row {
    background: var(--background-alt);
    font-weight: 600;
}
.year-row:hover {
    background: #e8ecf1 !important;
}
.year-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}
.expand-icon {
    font-size: 10px;
    transition: transform var(--transition);
}
.year-row.expanded .expand-icon {
    transform: rotate(90deg);
}
.month-row {
    font-size: 12px;
    background: #fafbfc;
}
.month-cell {
    padding-left: 24px !important;
    color: var(--text-secondary);
}
.share-url-container {
    margin-bottom: 20px;
}
#share-url {
    width: 100%;
    padding: 10px;
    font-family: Courier New, monospace;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background-alt);
    resize: none;
    height: 50px !important;
}
.share-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}
#copy-link {
    background: var(--brand-blue);
}
#copy-link:hover {
    background: var(--brand-blue-dark);
}
#copy-link.copied {
    background: var(--success);
}
.saved-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--background-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
}
.saved-item:hover {
    background: var(--background-hover);
}
.saved-item-info {
    flex: 1;
    text-align: left;
}
.saved-item-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}
.saved-item-date {
    font-size: 12px;
    color: var(--text-secondary);
}
.saved-item-actions {
    display: flex;
    gap: 8px;
}
.load-calc {
    padding: 4px 12px;
    font-size: 12px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}
.delete-calc {
    padding: 4px 12px;
    font-size: 12px;
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}
.loaded-from-share {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    color: #1e293b;
    padding: 12px 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(76, 110, 245, 0.1);
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 100;
    animation: slideDown 0.3s ease;
}

.loaded-from-share.show {
    display: flex;
}
.loaded-from-share button {
    padding: 4px 8px;
    background: #fff;
    color: var(--primary);
    border: none;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.loaded-from-share .close-banner-btn {
    position: absolute;
    right: 12px;
    padding: 2px 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    transition: all 0.2s ease;
}
.loaded-from-share .close-banner-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
    transform: scale(1.1);
}
.share-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--success);
    color: #fff;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: none;
    align-items: center;
    gap: 8px;
    z-index: 100;
    animation: slideUp 0.3s ease;
}
.share-notification.show {
    display: flex;
}
.section-divider td {
    padding: 2px !important;
    background: linear-gradient(90deg, var(--border-light) 0%, transparent 100%);
    border: none !important;
    height: 1px;
}
.add-scenario-motivation {
    margin: 16px 0;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7, #fed7aa);
    border: 1px solid #fbbf24;
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    transition: all var(--transition);
}
.add-scenario-motivation.hidden {
    display: none !important;
}
.add-scenario-motivation .emoji {
    font-size: 18px;
    margin: 0 4px;
}
.add-scenario-motivation .highlight {
    font-weight: 600;
    color: var(--primary);
}
.comparison-summary {
    margin-top: 20px;
    padding: 16px;
    background: var(--background-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    text-align: left;
    font-size: 13px;
    color: var(--text-secondary);
}
@keyframes slideIn {
    0% {
        transform: translate(100%);
        opacity: 0;
    }
    to {
        transform: translate(0);
        opacity: 1;
    }
}
@keyframes slideUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Calculator disclaimer styling */
.calculator-disclaimer {
    margin-top: 1rem;
}

.calculator-disclaimer h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

@keyframes pulse {
    0%,
    to {
        transform: translateY(-50%) scale(1);
    }
    50% {
        transform: translateY(-50%) scale(1.1);
    }
}
.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 5px;
    align-items: start;
}
.detail-column {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.detail-header {
    font-size: 16px;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 8px;
    text-transform: none;
    letter-spacing: normal;
}
.detail-column .detail {
    margin: 3px 0;
    font-size: 13px;
}
.detail-column .detail strong {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1; /* Fallback for older browsers */
}
.detail-column .detail span {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1; /* Fallback for older browsers */
}
.summary-section {
    padding-top: 10px;
    margin: 8px 0;
}
.total-row {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 5px 0;
}
/* CLEAN RESULTS LAYOUT - SERIOUS FINTECH DESIGN */

/* All sections - uniform spacing */
.summary-section,
.pmi-section,
.extra-payments-section,
.basic-breakdown,
.lifetime-summary,
.financial-picture-section {
    margin: 6px 0;
}

/* All section headers - clean, minimal */
.summary-section .detail-header,
.pmi-section .detail-header,
.extra-payments-section .detail-header,
.basic-breakdown .detail-header,
.lifetime-summary .detail-header,
.financial-picture-section .detail-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    padding: 0;
    text-transform: none;
}

/* All content containers - minimal, no effects */
.summary-section .loan-summary-content,
.pmi-section .pmi-content,
.extra-payments-summary,
.basic-breakdown .breakdown-content,
.lifetime-summary,
.financial-picture-section,
.summary-card {
    background: #fdfdfe;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 8px;
    margin: 0;
}

/* CLEAN DETAIL ROWS - NO EFFECTS, MINIMAL STYLING */
.summary-section .detail,
.pmi-section .detail,
.basic-breakdown .detail,
.lifetime-summary .detail,
.extra-payments-section .detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 12px;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
}

.summary-section .detail:last-child,
.pmi-section .detail:last-child,
.basic-breakdown .detail:last-child,
.lifetime-summary .detail:last-child,
.extra-payments-section .detail:last-child {
    border-bottom: none;
}

/* Text styling - minimal, clean */
.summary-section .detail span,
.pmi-section .detail span,
.basic-breakdown .detail span,
.lifetime-summary .detail span,
.extra-payments-section .detail span {
    color: #666;
    font-weight: 400;
}

.summary-section .detail strong,
.pmi-section .detail strong,
.basic-breakdown .detail strong,
.lifetime-summary .detail strong,
.extra-payments-section .detail strong {
    font-weight: 600;
    color: #333;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1; /* Fallback for older browsers */
    font-size: 12px;
}

/* Larger styling specifically for Total Paid amounts */
.detail.total-row strong,
.total-row strong,
.total-paid-amount {
    font-size: 16px !important;
    color: var(--brand-blue-dark) !important;
}
.details-grid.desktop-only {
    
    display: grid;
}
.mobile-only {
    display: none;
}
@media (max-width: 768px) {
    .details-grid.desktop-only {
        display: none;
    }
    .mobile-only {
        display: block !important;
    }
}
.mobile-tabs {
    margin: 15px 0;
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}
.compact-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 5px;
}
.compact-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    border-bottom: 1px solid var(--border-light);
}
.compact-row span {
    color: var(--text-secondary);
}
.compact-row strong {
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1; /* Fallback for older browsers */
}
.compact-row.success-text strong {
    color: var(--secondary);
}
.summary-section {
    margin-top: 10px;
    padding-top: 10px;
}
.summary-section .detail:first-of-type {
    padding-top: 10px;
}
.summary-section .detail {
    margin: 6px 0;
}

.custom-term-error {
    margin-top: 10px;
}
.input-differences-panel {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 10px 12px;
    margin: 12px 0;
}
.differences-header {
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.differences-icon {
    display: none;
}
.differences-inline {
    font-size: 0.82rem;
    line-height: 1.6;
    color: #333;
}
.diff-item {
    display: inline;
}
.diff-label {
    color: #666;
    font-weight: 400;
    margin-right: 3px;
}
.diff-value {
    font-weight: 500;
    color: #000;
}
.diff-value.s1,
.diff-value.s2 {
    background: none;
    color: #000;
    padding: 0;
}
.diff-vs {
    color: #999;
    font-size: 0.75rem;
    margin: 0 4px;
    font-weight: 400;
}
.diff-divider {
    color: #d0d0d0;
    margin: 0 10px;
    font-weight: 300;
}

/* ARM SPECIFIC STYLES */
.rate-type-switch-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.rate-type-switch {
    position: relative;
    display: inline-block;
    background: var(--input-background);
    border-radius: 6px;
    padding: 0;
    transition: all var(--transition);
    width: 100%;
    max-width: none;
    height: 30.5px;
    box-sizing: border-box;
    overflow: hidden;
}

.rate-type-switch:hover {
    border-color: var(--border-focus);
}

.rate-type-switch input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-slider {
    display: flex;
    position: relative;
    background: transparent;
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
    align-items: stretch;
}

.switch-option {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    background: var(--background);
    border-radius: O;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    user-select: none;
    z-index: 2;
    border: 1px solid var(--section-border);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1; /* Fallback for older browsers */
}

.switch-option:first-child.active {
    border-radius: 5px 0 0 5px;
}

.switch-option:last-child.active {
    border-radius: 0 5px 5px 0;
}

.switch-option.active {
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--border);
    transform: none;
}

.switch-option:hover:not(.active) {
    color: var(--text-secondary);
    background: rgba(0,0,0,0.05);
}

.arm-only-field {
    transition: opacity 0.3s ease, max-height 0.3s ease;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
}

.arm-only-field[style*="none"] {
    display: none !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* ARM Type select field width constraints */
#arm-type-row select,
#arm-type-row-2 select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-self: end;
    text-align: left;
}

/* Ensure ARM Type row follows grid structure */
#arm-type-row,
#arm-type-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    margin-bottom: 10px;
    padding: 0;
}

/* ARM field should not add extra margin when hidden */
.arm-only-field[style*="none"] {
    margin-bottom: 0 !important;
}

/* CLOSING COSTS SECTION STYLES */
.closing-costs-section {
    margin-top: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.02), rgba(255, 107, 53, 0.05));
    border: 1px solid rgba(255, 107, 53, 0.15);
    border-radius: var(--radius-md);
    transition: all var(--transition);
}

.closing-costs-section h4 {
    margin: 0 0 12px 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.closing-costs-section p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.closing-costs-section #closing-costs-range,
.closing-costs-section #closing-costs-range-2 {
    font-weight: 600;
    color: var(--accent);
    background: rgba(255, 107, 53, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* TRUE COST OF HOMEOWNERSHIP - ENHANCED HEADER STYLING */
/* Target the collapsible True Cost header specifically */
#true-cost-header,
#true-cost-header-2 {
    background: linear-gradient(135deg, rgba(76, 110, 245, 0.05), rgba(76, 110, 245, 0.12));
    border: 1px solid rgba(76, 110, 245, 0.18);
    border-radius: 6px;
    padding: 12px 16px;
    margin: 20px 0 16px 0;
    transition: all 0.2s ease;
    position: relative;
}

#true-cost-header .detail-header,
#true-cost-header-2 .detail-header {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    margin: 0 !important;
}

#true-cost-header p,
#true-cost-header-2 p {
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    margin: 6px 0 0 20px !important;
    font-weight: 500 !important;
}

#true-cost-arrow,
#true-cost-arrow-2 {
    color: var(--primary) !important;
    font-weight: bold !important;
}

/* OLD STYLES REMOVED FOR CLEAN REDESIGN */

/* SIMPLE MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .summary-section,
    .pmi-section,
    .extra-payments-section,
    .basic-breakdown,
    .lifetime-summary,
    .financial-picture-section {
        margin: 4px 0;
    }

    .summary-section .detail-header,
    .pmi-section .detail-header,
    .extra-payments-section .detail-header,
    .basic-breakdown .detail-header,
    .lifetime-summary .detail-header,
    .financial-picture-section .detail-header {
        font-size: 12px;
        margin-bottom: 2px;
    }

    .summary-section .loan-summary-content,
    .pmi-section .pmi-content,
    .extra-payments-summary,
    .basic-breakdown .breakdown-content,
    .lifetime-summary,
    .financial-picture-section,
    .summary-card {
        padding: 6px;
    }
}

@media (max-width: 768px) {
    .content-wrapper {
        padding: 0px 1rem;
    }

    #scenarios-container {
        margin-left: -0.7rem;
        margin-right: -0.7rem;
        padding: 0 0.3rem;
        width: calc(100% + 1.6rem);
        box-sizing: border-box;
    }

    .mortgage-calculator {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 0;
        border: none;
        box-shadow: none;
    }

    .paper-input-row {
        grid-template-columns: 1fr !important;
        padding: 6px 0;
        min-height: 24px;
        font-size: 12px;
        margin-bottom: 1px;
    }

    /* FIX: Force full width + prevent zoom + compact font */
    .paper-input-value,
    .mortgage-calculator input[type="text"],
    .mortgage-calculator input[type="number"],
    .mortgage-calculator input[type="month"],
    .mortgage-calculator select,
    .rate-type-switch {
        width: 100% !important;
        transform: none !important;
        font-size: 1rem !important;
        font-size-adjust: 0.48 !important;
        font-weight: 400 !important;
        letter-spacing: -0.02em !important;
    }

    .paper-input-label {
        font-size: 12px;
        color: var(--text-secondary);
        padding-right: 0;
    }
    #custom-term-row,
    #custom-term-row-2 {
        overflow: visible;
    }
    .inputs-wrapper {
        grid-column: 1;
        gap: 0;
    }
    .monthly-income-input::placeholder,
    #recurring-extra-end::placeholder,
    #recurring-extra-end-2::placeholder {
        font-size: 12px;
        opacity: 0.6;
        font-weight: 500;
    }
    .calculator-header {
        margin-bottom: 8px;
        gap: 8px;
    }
    .calculator-header h3 {
        font-size: 16px;
        padding-bottom: 4px;
        margin-bottom: 0;
    }

    .calculation-options {
        margin: 12px 0 0;
        padding: 0;
    }
    .option-toggles {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .toggle-label {
        padding: 8px 10px;
        font-size: 12px;
        grid-template-columns: 20px 1fr auto;
        gap: 6px;
    }
    .toggle-icon {
        font-size: 14px;
    }
    .toggle-label:after {
        font-size: 9px;
    }
    .collapsible-section {
        margin: 0;
        padding: 4px 0 8px 1px;
    }
    .collapsible-section .paper-input-row {
        padding: 5px 0;
        min-height: 22px;
        margin-bottom: 1px;
    }
    .extra-payment-type {
        flex-direction: row;
        gap: 4px;
        margin-bottom: 8px;
    }
    .extra-payment-option {
        padding: 4px 6px;
        font-size: 12px;
    }
    .extra-inputs {
        padding: 4px;
    }
    .pmi-warning {
        font-size: 12px;
        padding: 4px 6px;
        margin: 4px 16px 0 0;
    }
    #scenario-1 {
        padding: 12px;
        margin: 0;
    }
    #scenario-2.scenario-active {
        grid-template-columns: 1fr !important;
        padding: 12px;
        margin-top: 0;
        margin-left: 0;
    }
    #scenario-2.scenario-active .inputs-wrapper {
        grid-column: 1;
    }
    .mortgage-calculator .results-container,
    #scenario-2.scenario-active .results-container {
        grid-column: 1;
        grid-row: auto;
        position: static;
        margin-top: 12px;
        gap: 8px;
    }
    #custom-term-row .paper-input-label,
    #custom-term-row-2 .paper-input-label {
        font-size: 12px;
    }
    #custom-term-row.paper-input-row,
    #custom-term-row-2.paper-input-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    #custom-term-row .paper-input-label,
    #custom-term-row-2 .paper-input-label {
        text-align: left;
    }
    #results,
    #results-2 {
        padding: 10px;
    }
    .scenario-label {
        font-size: 10px;
    }
    .monthly-payment {
        font-size: 28px;
    }
    .per-month {
        font-size: 12px;
    }
    .detail {
        font-size: 12px;
        padding: 4px 0;
    }
    .help-toggle-btn {
        font-size: 12px;
        padding: 4px 6px;
        margin-bottom: 6px;
    }
    .help-panel {
        padding: 8px;
        margin-bottom: 8px;
    }
    .help-panel-content {
        font-size: 12px;
        line-height: 1.5;
    }
    .help-panel h4 {
        font-size: 13px;
        margin-bottom: 8px;
    }
    .help-panel h5 {
        font-size: 12px;
        margin: 8px 0 4px;
    }
    .help-definitions dt {
        font-size: 12px;
        margin-top: 4px;
    }
    .help-definitions dd {
        font-size: 12px;
        margin: 2px 0 4px 12px;
    }
    .amort-btn {
        padding: 6px 10px;
        font-size: 12px;
        margin-top: 8px;
    }
    #add-scenario,
    #delete-scenario {
        margin: 12px auto;
        padding: 8px 14px;
        font-size: 13px;
    }
    #comparison {
        padding: 12px;
        margin-top: 20px;
    }
    #comparison h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .comparison-table {
        font-size: 12px;
    }
    .comparison-table th,
    .comparison-table td {
        padding: 10px;
        font-size: 12px;
    }

    /* Mobile tabular numbers for numerical values */
    .comparison-table td:nth-child(2),
    .comparison-table td:nth-child(3),
    .comparison-table td:nth-child(4) {
        font-variant-numeric: tabular-nums;
    }
    .mortgage-timeline-section {
        padding: 12px;
        margin-top: 20px;
    }
    .mortgage-timeline-section h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }
    .subtitle {
        font-size: 12px;
        margin-bottom: 12px;
    }
    .timeline-insights h4 {
        font-size: 14px;
        margin-bottom: 12px;
    }
    .insights-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .insights-grid.two-scenarios {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .insights-grid.two-scenarios .scenario-1-card:nth-child(1) {
        order: 1;
    }
    .insights-grid.two-scenarios .scenario-2-card:nth-child(4) {
        order: 2;
    }
    .insights-grid.two-scenarios .scenario-1-card:nth-child(2) {
        order: 3;
    }
    .insights-grid.two-scenarios .scenario-2-card:nth-child(5) {
        order: 4;
    }
    .insights-grid.two-scenarios .scenario-1-card:nth-child(3) {
        order: 5;
    }
    .insights-grid.two-scenarios .scenario-2-card:nth-child(6) {
        order: 6;
    }
    .insights-grid.two-scenarios .insight-card {
        padding: 8px;
    }
    .insights-grid.two-scenarios .insight-value {
        font-size: 16px;
    }
    .insights-grid.two-scenarios .insight-label {
        font-size: 10px;
    }
    .insights-grid.two-scenarios .insight-detail {
        font-size: 9px;
        line-height: 1.3;
    }
    .insight-card {
        padding: 8px;
    }
    .insight-value {
        font-size: 18px;
    }
    .insight-label,
    .insight-detail {
        font-size: 10px;
    }
    .payment-frequency-comparison {
        padding: 8px; /* Menší padding na mobile */
        margin-top: 16px;
        overflow: hidden; /* Zabráni pretekaniu */
    }
    
    .frequency-comparison-wrapper {
        margin-bottom: 16px;
        overflow: hidden; /* Extra safety proti pretekaniu */
    }
    .payment-frequency-comparison h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }
    .frequency-comparison-table {
        font-size: 10px; /* Ešte menší text na mobile */
        min-width: 750px; /* Optimalizované pre mobile viewport */
        table-layout: auto; /* Lepšie rozloženie na mobile */
    }
    .frequency-comparison-table th,
    .frequency-comparison-table td {
        padding: 5px 3px; /* Kompaktnejší padding na mobile */
        font-size: 10px; /* Konzistentný s table font-size */
        white-space: nowrap; /* Zabráni zlomeniu textu */
    }
    
    /* FIXED: Safe scroll na mobile bez pretekania */
    .frequency-table-scroll {
        margin: 0; /* Odstránený negative margin ktorý spôsoboval pretekanie */
        padding: 0 0 10px 0; /* Bezpečný padding */
        border-radius: 4px; /* Jemné zaoblenie na mobile */
        background: var(--background);
    }
    
    /* Mobile scrollbar styling */
    .frequency-table-scroll::-webkit-scrollbar {
        height: 6px; /* Ešte tenší na mobile */
    }
    
    .frequency-table-scroll::-webkit-scrollbar-thumb {
        min-width: 15px; /* Menšia minimálna šírka na mobile */
    }
    .frequency-calc-note {
        font-size: 10px;
        margin-top: 6px;
    }
    .share-section,
    .save-export-section {
        padding: 12px;
        margin-top: 20px;
    }
    .share-description,
    .section-description {
        font-size: 12px;
        margin-bottom: 12px;
    }
    .save-export-buttons {
        flex-direction: column;
        gap: 8px;
    }
    .action-button {
        width: 100%;
        justify-content: center;
        padding: 6px 10px;
        font-size: 12px;
    }
    #share-button {
        padding: 8px 14px;
        font-size: 13px;
    }
    #amort-modal {
        width: 95%;
        padding: 12px;
    }
    #amort-modal h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    #amort-table {
        font-size: 10px;
    }
    #amort-table th,
    #amort-table td {
        padding: 4px;
        font-size: 10px;
    }
    #share-modal,
    #saved-modal {
        width: 90%;
        padding: 12px;
    }
    #share-modal h3,
    #saved-modal h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    #share-url {
        font-size: 12px;
        height: 40px !important;
    }
    .add-scenario-motivation {
        padding: 10px;
        font-size: 12px;
        line-height: 1.5;
    }
    .add-scenario-motivation .emoji {
        font-size: 14px;
    }
    .comparison-summary {
        padding: 12px;
        font-size: 12px;
    }
    .comparison-table-wrapper:after,
    .frequency-table-scroll:after {
        content: "\2192";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background: var(--accent);
        color: #fff;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        animation: pulse 2s infinite;
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.3s;
    }
    .comparison-table-wrapper.scrolled:after,
    .frequency-table-scroll.scrolled:after {
        opacity: 0;
    }
    .loaded-from-share {
        font-size: 12px;
        padding: 8px 12px;
    }
    .loaded-from-share button {
        padding: 3px 6px;
        font-size: 10px;
    }
    .share-notification {
        font-size: 12px;
        padding: 8px 12px;
        bottom: 10px;
        right: 10px;
    }
    .custom-term-error {
        grid-column: 1 / -1;
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 22px;
    }

    .rate-type-switch-container {
        justify-content: flex-end;
        width: auto;
    }
    
    /* Ensure ARM field takes no space on mobile when hidden */
    .arm-only-field[style*="none"] {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    
    .switch-option {
        font-size: 16px;
        transform: none;
        padding: 0.5rem 0.5rem;
    }

    .closing-costs-section {
        margin-top: 16px;
        padding: 12px;
        border-radius: var(--radius);
        border: 1px solid rgba(255, 107, 53, 0.2);
        background: rgba(255, 107, 53, 0.03);
    }


    .closing-costs-section h4 {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .closing-costs-section p {
        font-size: 13px;
    }

    /* True Cost header mobile styling */
    #true-cost-header,
    #true-cost-header-2 {
        padding: 10px 12px;
        margin: 16px 0 12px 0;
    }

    #true-cost-header .detail-header,
    #true-cost-header-2 .detail-header {
        font-size: 13px !important;
    }

    #true-cost-header p,
    #true-cost-header-2 p {
        font-size: 12px !important;
        margin: 5px 0 0 18px !important;
    }

    .input-differences-panel {
        padding: 8px 10px;
    }
    .differences-header {
        font-size: 0.7rem;
        margin-bottom: 6px;
    }
    .differences-inline {
        font-size: 0.8rem;
    }
    .diff-item {
        display: block;
        padding: 4px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .diff-item:last-child {
        border-bottom: none;
    }
    .diff-divider {
        display: none;
    }

    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
    .monthly-payment .per-month {
        font-size: 0.9rem;
        opacity: 0.7;
    }
    hr.divider {
        margin: 10px 0;
    }

    #arm-type-row,
    #arm-type-row-2 {
    grid-template-columns: 1fr !important;
    }

    .inputs-section-group {
    padding: 10px;
    }

    .switch-option.active {
    font-weight: 400;
    }
}


@media (max-width: 400px) {
    .closing-costs-section {
        padding: 10px;
        margin-top: 12px;
    }

    .closing-costs-section h4 {
        font-size: 13px;
    }

    .closing-costs-section p {
        font-size: 12px;
    }

    /* True Cost header extra small mobile styling */
    #true-cost-header,
    #true-cost-header-2 {
        padding: 8px 10px;
        margin: 12px 0 10px 0;
    }

    #true-cost-header .detail-header,
    #true-cost-header-2 .detail-header {
        font-size: 13px !important;
    }

    #true-cost-header p,
    #true-cost-header-2 p {
        font-size: 11px !important;
        margin: 4px 0 0 16px !important;
    }

    .compact-row {
        padding: 6px 8px;
        font-size: 0.82rem;
    }
    .tab-btn {
        padding: 8px;
        font-size: 0.85rem;
    }
}

/* ========================================
   REFINED FINANCIAL PICTURE SECTION
======================================== */

/* REMOVED - NOW HANDLED BY UNIFIED STYLES */

.financial-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin-bottom: 6px;
}

.summary-card-title {
    font-size: 11px;
    font-weight: 500;
    color: #666;
    margin-bottom: 4px;
}

.summary-card-amount {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1; /* Fallback for older browsers */
}

.summary-card-details {
    font-size: 10px;
    color: #888;
    margin-top: 2px;
}

.summary-breakdown {
    background: #f8f8f8;
    border-radius: 3px;
    padding: 0;
    margin-top: 4px;
    border: 1px solid #eee;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    font-size: 11px;
    border-bottom: 1px solid #f0f0f0;
}

.breakdown-item:last-child {
    border-bottom: none;
    font-weight: 600;
    color: #333;
    border-top: 1px solid #ddd;
}

.breakdown-item .label {
    color: #666;
    font-weight: 400;
}

.breakdown-item .amount {
    font-weight: 500;
    color: #333;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1; /* Fallback for older browsers */
    font-size: 11px;
}

.financial-insight {
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    padding: 6px 8px;
    font-size: 10px;
    color: #666;
    margin-top: 4px;
}

/* REMOVED - HANDLED BY UNIFIED MOBILE STYLES */

/* === Mobile Scenario Switcher === */
.mobile-scenario-switcher {
    display: none; /* Hidden by default */
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    padding: 12px 16px;
    border-bottom: 2px solid var(--border-color);
    margin: 0 -16px 16px -16px; /* Negative margin to extend to edges */
}

/* Force hide on desktop - this overrides any JavaScript inline styles */
@media (min-width: 769px) {
    .mobile-scenario-switcher {
        display: none !important;
    }
}

.scenario-tabs {
    display: flex;
    gap: 8px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 8px;
}

.scenario-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.mobile-payment-amount {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.scenario-tab:hover {
    background: rgba(var(--primary-rgb), 0.05);
}

.scenario-tab.active {
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Scenario 1 tab - brand blue dark */
#mobile-tab-1.active {
    background: var(--brand-blue-dark);
}

/* Scenario 2 tab - accent orange */
#mobile-tab-2.active {
    background: var(--accent);
}

.scenario-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile: Show switcher and hide inactive scenarios */
@media (max-width: 768px) {
    .mobile-scenario-switcher {
        display: block; /* Show on mobile when scenario 2 is active */
        opacity: 0;
        transform: translateY(-100%);
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none;
    }

    .mobile-scenario-switcher.visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Hide scenarios by default on mobile */
    #scenarios-container .mortgage-calculator {
        display: none !important;
    }

    /* Show only active scenario on mobile */
    #scenarios-container .mortgage-calculator.mobile-active {
        display: grid !important;
    }

    /* Adjust comparison section on mobile */
    #comparison {
        margin-top: 24px;
    }
}

/* ========================================
   RISK WARNING BOXES
======================================== */

#risk-warnings-section {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.warning-box {
    padding: 10px 14px;
    border-radius: var(--radius);
    border-left: 3px solid var(--warning);
    background: var(--background);
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    font-size: 13px;
    line-height: 1.4;
}

.warning-box > strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.warning-box p {
    margin: 4px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.warning-box p strong {
    display: inline;
    font-weight: 600;
    color: var(--text-primary);
}

.warning-box p:last-child {
    margin-bottom: 0;
}

.warning-box small {
    font-size: 11px;
    color: var(--text-muted);
}

.warning-box a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition);
}

.warning-box a:hover {
    border-bottom-color: var(--primary);
}

/* Mobile responsive */
@media (max-width: 768px) {
    #risk-warnings-section {
        margin: 16px 0;
        gap: 8px;
    }

    .warning-box {
        padding: 8px 12px;
        font-size: 12px;
    }

    .warning-box strong {
        font-size: 12px;
    }

    .warning-box p {
        font-size: 11px;
    }
}

/* Print styles - hide warnings */
@media print {
    #risk-warnings-section {
        display: none !important;
    }
}

/* ========================================
   ADDITIONAL COSTS DIVIDER
======================================== */

.additional-costs-divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
    opacity: 0.5;
}