:root {
--primary-orange: #f7941d; --dark-orange: #e67e22; --text-color: #333;
--light-gray: #f4f4f4; --border-color: #ddd; --slider-track-bg: #e0e0e0;
--active-section-bg: #fef5e8;
}
.mcp-simulator-pro-body { font-family: 'Poppins', sans-serif; }
.mcp-simulator-title { font-family: 'Montserrat', sans-serif; text-align: center; margin-bottom: 0.25rem; font-weight: 700; color: #555; }
.mcp-simulator-brand { font-family: 'Poppins', sans-serif; text-align: center; margin-top: 0; margin-bottom: 1rem; font-size: 0.8em; color: #777; font-weight: bold; }
.mcp-simulator-subtitle { text-align: center; margin-top: -0.5rem; margin-bottom: 2rem; font-style: italic; color: #777; }
.borrower-choice-container {
display: flex; gap: 0; margin: 0 auto 1.5rem auto; max-width: 400px;
border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden;
}
.borrower-choice-container label {
flex-grow: 1; padding: 10px; background-color: #f8f8f8;
text-align: center; cursor: pointer; transition: all 0.2s ease; font-weight: 600; font-size: 0.9em;
color: #555;
}
.borrower-choice-container label:first-of-type { border-right: 1px solid var(--border-color); }
.borrower-choice-container input[type="radio"] { display: none; }
.borrower-choice-container input[type="radio"]:checked+label { background-color: var(--primary-orange); color: white; }
.simulator-container { display: flex; flex-wrap: wrap; gap: 1.5rem; width: 100%; max-width: 900px; margin: 0 auto; background: #fff; padding: 1.5rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
.input-panel, .result-panel-container { flex: 1; min-width: 300px; }
.accordion { border: 1px solid var(--border-color); border-radius: 8px; }
.accordion-item { border-bottom: none; }
.accordion-item + .accordion-item { margin-top: -3px; } 
.accordion-header {
font-weight: 700;
padding: 0.8rem 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
transition: all 0.2s ease;
user-select: none;
background-color: var(--primary-orange);
color: white;
border: 3px solid white; 
position: relative;
z-index: 2;
}
.accordion-header:hover { background-color: var(--dark-orange); }
.accordion-header::before {
content: '▶';
font-size: 0.7em;
margin-right: 1rem;
transition: transform 0.3s ease;
color: white;
}
.accordion-item.active > .accordion-header::before { 
transform: rotate(90deg);
}
.accordion-body {
max-height: 0; 
overflow: hidden; 
transition: max-height 0.3s ease-out;
padding: 0 1.2rem; 
border-top: 0px solid var(--border-color);
position: relative;
z-index: 1;
}
.accordion-item.active > .accordion-body { 
max-height: 1000px; 
padding: 1rem 1.2rem; 
border-top: 1px solid var(--border-color);
background-color: var(--active-section-bg);
}
.helper-text-section { font-size: 0.75rem; font-style: italic; color: #777; margin: -0.5rem 0 0.8rem 0; text-align: center; }
.input-group { margin-bottom: 0.8rem; }
.input-group:last-child { margin-bottom: 0; }
.input-line { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; gap: 1rem; }
.input-line label { position: relative; flex-grow: 1; font-weight: 600; font-size: 0.85rem; line-height: 1.3; white-space: nowrap; }
.suggestion { font-weight: 400; font-style: italic; color: #777; margin-left: 5px; font-size: 0.75em; }
.info-bubble { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background-color: #aaa; color: white; text-align: center; font-size: 12px; line-height: 16px; cursor: help; margin-left: 8px; position: static; } .info-bubble .tooltip-text { 
visibility: hidden; 
background-color: #555; 
color: #fff; 
border-radius: 6px; 
padding: 8px 12px; position: absolute; 
z-index: 99;
top: 25px;
left: 10px;
opacity: 0; 
transition: opacity 0.3s; 
font-style: normal; 
font-weight: 400; 
font-size: 0.8rem;
text-align: left; white-space: nowrap; }
.info-bubble:hover .tooltip-text { visibility: visible; opacity: 1; }
.input-with-unit { position: relative; display: flex; align-items: center; border: 1px solid var(--border-color); border-radius: 6px; background-color: white; max-width: 130px; flex-shrink: 0; }
.input-with-unit .value-display { padding: 6px 8px; font-size: 0.9rem; font-weight: 600; min-width: 50px; text-align: right; width: 100%; border: none; background: transparent; color: var(--text-color); }
.input-with-unit .unit { 
color: #777; 
font-size: 0.85rem; 
padding-right: 10px; 
white-space: nowrap; 
}
.borrower-separator { border: none; border-top: 1px dashed var(--border-color); margin: 1.2rem 0; }
.insurance-separator { margin: 1.5rem 0 !important; }
input[type="range"] {
-webkit-appearance: none; width: 100%; height: 6px;
background: var(--slider-track-bg); border-radius: 3px; outline: none; 
cursor: pointer; transition: background 0.2s ease; 
margin-top: 0.4rem;
}
input[type="range"]:hover { background: #d0d0d0; }
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 18px; height: 18px;
background: var(--primary-orange); border-radius: 50%; border: 2px solid white; 
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); cursor: grab;
}
input[type="range"]::-moz-range-thumb {
width: 18px; height: 18px; background: var(--primary-orange); border-radius: 50%; 
border: 2px solid white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); cursor: grab;
}
.result-panel { background-color: var(--light-gray); padding: 2rem; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; position: sticky; top: 20px; }
.main-result { text-align: center; }
.main-result .result-label { font-size: 1.2rem; color: #555; font-weight: bold; }
.main-result .result-value { font-size: 2.5rem; font-weight: 700; color: var(--primary-orange); line-height: 1.2; display: block; }
.secondary-result { text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
.secondary-result .result-label { font-size: 0.95rem; margin-bottom: 0.5rem; display: block; }
.secondary-result .result-value { font-size: 1.7rem; font-weight: 700; color: var(--text-color); }
#manual-monthly-container { margin-top: 0.75rem; }
.result-details-list { display: flex; flex-direction: column; gap: 0.8rem; width: 100%; margin-top: 1.5rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem; }
.result-details-list .result-item { display: flex; justify-content: space-between; align-items: center; text-align: left; }
.result-details-list .result-label { font-size: 0.9rem; }
.result-details-list .result-value { font-size: 1rem; font-weight: 600; }
.result-footnotes { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border-color); }
.result-footnotes p { font-size: 0.75rem; font-style: italic; color: #777; margin: 0.25rem 0; padding: 0; }
.disclaimer { font-size: 0.8rem; color: #777; margin-top: 2rem; text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; }
.fee-group .result-item { background-color: rgba(0, 0, 0, 0.02); padding: 5px 10px; border-radius: 5px; margin: 2px -10px; }
@media (max-width: 768px) {
.simulator-container { flex-direction: column; padding: 1rem; }
.result-panel { position: static; }
.input-line { 
flex-direction: row; 
align-items: center;
gap: 0.5rem; 
}
.input-with-unit { 
max-width: 130px; 
flex-shrink: 0; 
}
}