/* Base Styles */
html{scroll-behavior:smooth}body,html{margin:0;padding:0;font-family:'Roboto',sans-serif;background-color:#f4f4f4;color:#333;font-weight:300}strong,b{font-weight:500}

/* Hero Section */
.hero-section{height:50vh;min-height:400px;background-image:image-set(url(../../img/Home_MC.webp) type("image/webp"),url(../../img/Home_MC.jpg) type("image/jpeg"));background-image:url(../../img/Home_MC.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;box-sizing:border-box;padding:20px 0;position:relative;overflow:hidden}
.hero-nav{width:100%;text-align:center;display:flex;justify-content:center;gap:40px;z-index:10}.hero-nav a{color:#cacaca;text-decoration:none;font-size:1rem;font-weight:300;transition:color .3s ease}.hero-nav a:hover{color:#fff}.hero-content-wrapper{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;position:relative;z-index:2;margin-top:30px}.hero-content-wrapper img{width:130px;height:130px;aspect-ratio:1/1;margin-bottom:20px}.hero-section h1{color:#fff;font-size:4rem;font-weight:100;text-align:center;text-shadow:2px 2px 8px rgba(0,0,0,.7);margin:0;min-height:71px}.mobile-support-link{display:none;color:#555;text-decoration:none;font-size:.9rem;font-weight:400;transition:color .3s ease;flex-shrink:0}.mobile-support-link:hover{color:#000}/* .mobile-header-placeholder{display:none} */
.hero-tagline{height:1.2em;position:relative;z-index:2;margin-top:10px}
.hero-tagline p{margin:0;color:#e0e0e0;font-size:1.1rem;font-weight:100;text-shadow:1px 1px 4px rgba(0,0,0,.7);text-align:center;opacity:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0)}.mobile-nav{display:none;position:absolute;top:40px;left:50%;transform:translateX(-50%);z-index:10;gap:40px}.mobile-nav-link{color:#cacaca;text-decoration:none;font-size:1rem;font-weight:300;transition:color .3s ease}.mobile-nav-link:hover{color:#fff}

/* Main Content Layout */
.content-section{padding:80px 20px 50px;box-sizing:border-box}.calculator-wrapper{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:baseline;position:relative}.breadcrumb{position:absolute;top:-30px;left:-4px;color:#777;font-size:.9rem;font-weight:300}.breadcrumb a{color:inherit;text-decoration:none;transition:color .2s ease}.breadcrumb a:hover{color:#000}.breadcrumb span{color:#333;font-weight:400}.intro-section{grid-column:1 / -1;margin-bottom:0;margin-top:20px}.intro-section h2{font-size:4rem;font-weight:100;color:#333;margin-top:0;margin-bottom:20px;margin-left:-4px;line-height:1.1;min-height:71px}.intro-section p{font-size:1.1rem;line-height:1.7;color:#555;max-width:900px}.mobile-intro{display:none}.desktop-intro{display:block}.calculator-container h2,.results-container h2{font-size:4rem;font-weight:100;color:#333;margin-top:0;margin-bottom:40px;line-height:1.1;margin-left:-4px;min-height:71px}

/* Input Fields */
.input-section-header{margin-top:40px;margin-bottom:30px}.input-section-header:first-of-type{margin-top:0}.input-section-header h3{font-size:1.8rem;font-weight:300;margin:0}.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 80px}.input-group{position:relative;margin-bottom:20px}.input-group label{display:block;color:#666;font-size:.95rem;margin-bottom:5px;pointer-events:none}.input-group input[type=text],.input-group input[type=number],.input-group select{width:100%;padding:8px 0;border:none;border-bottom:1px solid #ccc;font-size:1.1rem;color:#333;background-color:transparent;outline:none;font-weight:300;transition:border-bottom-color .3s ease;appearance:none;font-family:'Roboto',sans-serif}
/* ### REMOVED: Old Select specific styling ### */
.input-group input[type=text]:focus,.input-group input[type=number]:focus,.input-group select:focus{border-bottom-color:#666}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}
.input-disclaimer{grid-column:1 / -1;margin-top:-10px}.input-disclaimer p{font-size:.85rem;color:#777;font-style:italic;line-height:1.5;margin:0}

/* ### NEW: Custom Select Dropdown ### */
.input-group .custom-select-wrapper {
    position: relative;
    width: 100%;
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid #ccc;
    font-size: 1.1rem;
    color: #333;
    background-color: transparent;
    outline: none;
    font-weight: 300;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3E%3Cpath d='M8 11.207l-4.604-4.604.707-.707L8 9.793l3.9-3.9.707.707z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 16px;
    padding-right: 20px;
    transition: border-bottom-color .3s ease;
    user-select: none;
    box-sizing: border-box; 
}
.input-group .custom-select-wrapper:focus-within,
.input-group .custom-select-wrapper.open {
     border-bottom-color: #666;
}
.custom-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 10;
    overflow: hidden;
    margin-top: 4px;
}
.custom-select-wrapper.open .custom-select-options {
    display: block;
}
.custom-option {
    padding: 12px 15px;
    font-size: 1rem;
    font-weight: 300;
    transition: background-color 0.2s ease;
}
.custom-option:hover {
    background-color: #f5f5f5;
}
/* ### End of Custom Select ### */


/* Results & Breakdown */
.results-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:20px;margin-bottom:0;text-align:left}.summary-item span{display:block}.summary-item .label{font-size:.9rem;color:#666;margin-bottom:5px}.summary-item .value{font-size:1.5rem;font-weight:300;color:#333;overflow-wrap:break-word;word-break:break-word}.summary-text{margin-top:60px}.summary-text h3{font-size:1.8rem;font-weight:300;border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:20px;margin-top:0}.summary-text p{font-size:1rem;line-height:1.6;color:#555;margin-bottom:0}.summary-highlight{font-weight:300}.summary-header-flex{display:block}.mobile-support-button{display:none}.breakdown-container-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:60px}.breakdown-section h3{font-size:1.8rem;font-weight:300;border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:20px;margin-top:0}.result-item{display:flex;justify-content:space-between;align-items:flex-start;font-size:1rem;padding:12px 0;gap:20px}.result-item .label{color:#666;text-align:left;word-break:break-word;white-space:normal}.result-item .value{font-weight:300;text-align:right;white-space:nowrap}
.savings-item .value{font-weight:400;color:#006400}
.result-item.savings-highlight .value {
    color: #006400; 
    font-weight: 500;
}

/* Charts & Legends */
.charts-container{max-width:1400px;margin:80px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-top:40px}.chart-wrapper{width:100%;text-align:center}.chart-wrapper canvas{width:100%!important;height:auto!important;aspect-ratio:2 / 1}.chart-wrapper h2{font-size:2.5rem;font-weight:100;color:#333;margin-top:0;margin-bottom:30px;min-height:48px}
p.chart-description{font-size:1rem;line-height:1.6;color:#555;max-width:650px;margin:-20px auto 30px;padding:0 10px}
.custom-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin-top:20px;font-size:.85rem}.legend-item{display:flex;align-items:center}.legend-color-box{width:12px;height:12px;margin-right:8px;border-radius:2px}

/* Custom Tooltip */
.chart-tooltip{position:absolute;background-color:#fff;border-radius:8px;padding:10px 15px;pointer-events:none;opacity:0;transition:opacity .15s ease;box-shadow:0 4px 12px rgba(0,0,0,.1);font-weight:300;font-size:.9rem;z-index:10;text-align:left;min-width:220px;max-width:350px;box-sizing:border-box}.tooltip-title{font-weight:300;margin-bottom:8px;text-align:center}.tooltip-body-item{display:flex;justify-content:space-between;align-items:flex-start;margin-top:6px;gap:15px}.tooltip-body-item>span{text-align:right;white-space:nowrap}.tooltip-color-box{width:10px;height:10px;margin-right:10px;border-radius:2px}

/* SEO & FAQ Content */
.seo-content-section{max-width:1400px;margin:100px auto 50px;padding:0;text-align:left}.seo-content-section h2{font-size:2.5rem;font-weight:100;color:#333;margin-top:60px;margin-bottom:20px;min-height:48px}.seo-content-section p,.seo-content-section li,.seo-content-section ul{font-size:1.1rem;line-height:1.7;color:#555;padding-left:0;list-style-position:inside}.seo-content-section ol{list-style:none;padding-left:0;counter-reset:guide-counter}.seo-content-section ol li{counter-increment:guide-counter;margin-bottom:25px;position:relative;padding-left:40px}.seo-content-section ol li::before{content:counter(guide-counter);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background-color:#e9e9e9;border:1px solid #ddd;box-sizing:border-box;color:#555;font-weight:300;text-align:center;line-height:26px;font-size:.9rem}.seo-content-section ul li{margin-bottom:20px}.faq-section details{border-bottom:1px solid #e0e0e0;padding:20px 0}.faq-section summary{font-size:1.2rem;font-weight:300;color:#333;cursor:pointer;list-style:none;position:relative;padding-right:30px}.faq-section summary::-webkit-details-marker{display:none}.faq-section summary::after{content:'+';position:absolute;right:5px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:300;color:#888;transition:transform .2s ease}.faq-section details[open] summary::after{transform:translateY(-50%) rotate(45deg)}.faq-section .faq-answer{padding:15px 5px 0;color:#555;line-height:1.7;font-size:1.1rem}

/* Footer & More Tools */
footer{padding:100px 20px 40px;background:linear-gradient(to top,#eae5df 20%,transparent);display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap}footer a{color:#777;text-decoration:none;font-size:.9rem;font-weight:300;transition:color .3s ease}footer a:hover{color:#000}.more-tools-section{max-width:1400px;margin:100px auto 50px}.more-tools-section h2{font-size:2.5rem;font-weight:100;color:#333;margin-bottom:30px;min-height:48px}.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}.tools-grid h3{font-size:1.2rem;font-weight:400;color:#333;margin-top:0;margin-bottom:20px}.links-container a,.links-container span{display:block;text-decoration:none;color:#555;font-size:1rem;font-weight:300;margin-bottom:12px;transition:color .2s ease}.links-container a:hover{color:#000}.links-container .disabled-tool-link{color:#999;cursor:default}

/* Base Responsive */
@media (max-width: 992px){.hero-section{height:auto;min-height:250px;padding:40px 0;justify-content:center}.hero-nav{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:auto;margin-bottom:0}.hero-content-wrapper{margin-top:0}.hero-content-wrapper img{width:100px;height:100px;margin-bottom:15px;margin-top:15px;position:relative;top:10px}.hero-section h1{font-size:3rem;min-height:53px}.hero-tagline{margin-top:10px}.hero-tagline p{font-size:1rem}.calculator-wrapper{grid-template-columns:1fr;gap:60px;align-items:flex-start}.intro-section{margin-bottom:0;margin-top:0}.charts-container{grid-template-columns:1fr;gap:60px}.tools-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 768px){.hero-nav{display:none}.mobile-nav{display:none}.hero-section{height:auto;min-height:60px;padding:10px 15px;flex-direction:row;justify-content:space-between;background-image:none;background-color:#f4f4f4;border-bottom:1px solid #e5e5e5;position:fixed;top:0;left:0;width:100%;z-index:100;padding-bottom:10px;align-items:center;}.hero-background,.hero-tagline{display:none}.hero-content-wrapper{flex-direction:row;justify-content:space-between;align-items:center;width:100%;margin-bottom:0;color:#333}.hero-content-wrapper img{width:32px;height:32px;aspect-ratio:1/1;margin-bottom:0;margin-top:0;position:static;top:auto}
/* --- ### MODIFICATION IS HERE ### --- */
.hero-section h1{font-size:1.5rem;font-weight:300;color:#333;text-shadow:none;flex-grow:1;flex-shrink:1;min-width:0;text-align:center;margin:0 15px;min-height:29px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* --- ### END OF MODIFICATION ### --- */
.mobile-support-link{display:none}.content-section{padding:70px 15px 50px}.breadcrumb{position:static;margin-top:15px;margin-bottom:-6px;left:auto;margin-left:0}.intro-section h2,.calculator-container h2,.results-container h2,.chart-wrapper h2,.seo-content-section h2,.more-tools-section h2{font-size:2.5rem;margin-bottom:30px;line-height:1.2;margin-left:0;margin-top:-10px;min-height:48px}
p.chart-description{margin-top:-15px;margin-bottom:25px;font-size:1rem}
.intro-section{margin-top:0}.mobile-intro{display:block}.desktop-intro{display:none}.intro-section p,.seo-content-section p,.seo-content-section li,.faq-section .faq-answer,.seo-content-section ul{font-size:1rem}.input-grid{grid-template-columns:1fr;gap:0}.input-group{margin-bottom:30px}.summary-text,.breakdown-container-grid{margin-top:40px}.summary-text h3{border-bottom:none;padding-bottom:0;margin-bottom:0}.summary-header-flex{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:20px}.mobile-support-button{display:inline-block;text-decoration:none;color:#333;background-color:#fff;padding:6px 16px;border-radius:999px;font-size:.9rem;font-weight:400;box-shadow:0 2px 5px rgba(0,0,0,.15);border:none;flex-shrink:0}.breakdown-container-grid{grid-template-columns:1fr;gap:40px}.charts-container{margin-top:60px;grid-template-columns:1fr}.seo-content-section,.more-tools-section{margin-top:60px;padding:0}.tools-grid{grid-template-columns:1fr}.faq-section summary{font-size:1.1rem}}

/* Tagline Animation */
@keyframes fadeInOut{0%{opacity:0}15%{opacity:1}85%{opacity:1}100%{opacity:0}}.hero-tagline p.fade-in-out{animation:fadeInOut 5.5s forwards}


/* --- ### NEW STYLES FOR MORTGAGE CALCULATOR (MODIFIED) ### --- */

/* 1. Linked Down Payment Inputs */
.input-group-linked {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.input-grid .input-group-linked {
    margin-bottom: 20px;
}

/* 2. Doughnut Chart Wrapper */
.doughnut-chart-wrapper {
    max-width: 1400px;
    margin: 80px auto 0;
    text-align: center;
}
.doughnut-chart-wrapper h2 {
    font-size: 2.5rem;
    font-weight: 100;
    color: #333;
    margin-top: 0;
    margin-bottom: 30px;
    min-height: 48px;
}
.doughnut-chart-inner {
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
}
.doughnut-chart-inner canvas {
    width: 100% !important;
    height: auto !important;
}

/* 3. ### MODIFIED: "More Details" Button ### */
.more-details-button {
    background-color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 24px;
    font-size: 1rem;
    font-weight: 300;
    color: #333;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
    margin-top: 25px;
}
.more-details-button:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

/* 4. ### MODIFIED: Modal Overlay & Content ### */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 0 10vw 5vw rgba(0,0,0,0.1);
    z-index: 1000;
}
.details-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 1001;
    width: 90%;
    max-width: 500px;
    overflow: hidden;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}
.modal-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 300;
    text-align: center;
    flex-grow: 1;
    padding-left: 24px;
}
.modal-close-button {
    background: none;
    border: none;
    font-size: 2rem;
    font-weight: 300;
    color: #888;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 24px;
    flex-shrink: 0;
}
.modal-content {
    padding: 5px 20px 20px;
}
.modal-table {
    width: 100%;
    border-collapse: collapse;
}
.modal-table th,
.modal-table td {
    padding: 12px 5px;
    text-align: left;
    font-weight: 300;
    border-bottom: 1px solid #f5f5f5;
}
.modal-table th {
    font-weight: 400;
    color: #555;
}
.modal-table th:last-child,
.modal-table td:last-child {
    text-align: right;
}
.modal-table td:last-child {
    font-weight: 400;
}
.modal-table tr:last-child td {
    border-bottom: none;
}
.modal-table .total-row td {
    font-weight: 500;
    color: #000;
    border-top: 1px solid #e9e9e9;
    padding-top: 12px;
}

/* --- ### NEW STYLES for Mode Toggle ### --- */
.mode-toggle-switch {
    display: flex;
    position: relative;
    border-radius: 999px;
    padding: 4px;
    z-index: 2;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
}
.mode-toggle-switch .toggle-option {
    flex: 1;
    text-align: center;
    padding: 5px 10px;
    font-size: 0.85rem;
    font-weight: 400;
    cursor: pointer;
    z-index: 2;
    transition: color 0.3s ease;
}
.mode-toggle-switch .toggle-option.active {
    color: #333;
}
.mode-toggle-switch .toggle-switch-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    border-radius: 999px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.mode-toggle-switch.advanced .toggle-switch-slider {
    transform: translateX(100%);
}

/* Desktop Toggle Specifics */
.desktop-toggle {
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 180px; 
    margin: 20px auto 0;
}
.desktop-toggle .toggle-option {
    color: #fff;
}
.desktop-toggle .toggle-option.active {
    color: #333;
}
.desktop-toggle .toggle-switch-slider {
    background-color: #fff;
}

/* New Mobile Toggle (replaces B/A slider) */
.mobile-toggle-wrapper {
    display: none;
}
.mobile-mode-toggle {
    display: none;
    background-color: #e0e0e0;
    border: none;
    border-radius: 999px;
    width: 32px;
    height: 20px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}
.mobile-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.mobile-mode-toggle.advanced {
    background-color: #8c5a3c;
}
.mobile-mode-toggle.advanced .mobile-toggle-knob {
    transform: translateX(12px);
}
.mobile-toggle-label {
    display: none;
}


/* 5. Amortization Table Section */
.schedule-section {
    max-width: 1400px;
    margin: 100px auto 50px;
}
.schedule-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}
.schedule-header .chart-description{margin-top:-10px;margin-bottom:0;gap:0}
.schedule-section h2 {
    font-size: 2.5rem;
    font-weight: 100;
    color: #333;
    margin: 0;
    min-height: 48px;
    text-align: center;
}

/* Toggle Switch */
.toggle-switch {
    display: flex;
    position: relative;
    background-color: #f0f0f0;
    border-radius: 999px;
    padding: 5px;
    width: 200px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
.toggle-option {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    font-size: 0.9rem;
    font-weight: 400;
    color: #555;
    cursor: pointer;
    z-index: 2;
    transition: color 0.3s ease;
}
.toggle-option.active {
    color: #fff;
}
.toggle-switch-slider {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(50% - 5px);
    height: calc(100% - 10px);
    background-color: #8c5a3c;
    border-radius: 999px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.toggle-switch.monthly .toggle-switch-slider {
    transform: translateX(100%);
}


/* Table Wrapper (Outer) */
.table-wrapper {
    width: 100%;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden; /* This clips the inner content */
}

/* Table Scroller (New Inner) */
.table-scroller {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: auto;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px; 
}
.schedule-table th,
.schedule-table td {
    padding: 15px 20px;
    text-align: right;
    font-weight: 300;
    font-size: 1rem;
    border-bottom: 1px solid #e0e0e0;
    white-space: nowrap;
}
.schedule-table th {
    font-weight: 400;
    font-size: 0.9rem;
    text-align: right;
    background-color: #f9f9f9;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 5;
}
.schedule-table thead th:first-child,
.schedule-table tbody td:first-child {
    text-align: left;
    font-weight: 400;
}
.schedule-table tbody tr:last-child td {
    border-bottom: none;
}
.schedule-table tbody tr:nth-child(even) {
    background-color: #fcfcfc;
}
.schedule-table tbody tr:hover {
    background-color: #f5f5f5;
}

/* 6. Responsive adjustments for new elements */
@media (max-width: 992px) {
    .breakdown-container-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .input-group-linked {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .input-grid .input-group-linked {
        margin-bottom: 30px;
    }
    .doughnut-chart-wrapper {
        margin-top: 60px;
    }
    .doughnut-chart-wrapper h2,
    .schedule-section h2 {
        font-size: 2.5rem;
        margin-bottom: 30px;
        line-height: 1.2;
        margin-left: 0;
        margin-top: -10px;
        min-height: 48px;
    }
    .schedule-header .chart-description{margin-top:-15px;margin-bottom:10px}
    .schedule-section {
        margin-top: 60px;
    }
    .schedule-header {
        flex-direction: column;
        gap: 20px;
    }
    .details-modal {
        width: 95%;
    }
    .modal-header h3 {
        text-align: left;
        padding-left: 0;
    }
    
    .result-item .value {
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* --- ### NEW STYLES for Mode Toggle (Mobile) ### --- */
    .desktop-toggle {
        display: none;
    }
    .mobile-toggle-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 32px;
        flex-shrink: 0;
    }
    .mobile-mode-toggle {
        display: block;
    }
    .mobile-toggle-label {
        display: block;
        font-size: 0.6rem;
        color: #777;
        margin-top: 2px;
        font-weight: 400;
        letter-spacing: 0.2px;
    }
}

/* --- ### NEW: Advanced Mode Visibility Rules ### --- */
.advanced-field,
.advanced-section {
    display: none;
}
.input-section-header.advanced-section {
    display: none;
}
.input-disclaimer.advanced-field {
    display: none;
}


body.is-advanced .advanced-field {
    display: block;
} 

/* This rule is more specific and overrides the 'display: block' 
   rule above, ensuring the .result-item keeps its flex layout. */
body.is-advanced .result-item.advanced-field {
    display: flex;
}


body.is-advanced .advanced-section.breakdown-container-grid,
body.is-advanced .advanced-section.charts-container,
body.is-advanced .advanced-section.input-grid {
    display: grid;
}

body.is-advanced .advanced-section.doughnut-chart-wrapper,
body.is-advanced .advanced-section.schedule-section,
body.is-advanced .input-section-header.advanced-section,
body.is-advanced .input-disclaimer.advanced-field {
    display: block;
}