/* public/css/calculators/mortgage-calculator.css */

:root {
    --calculator-color: #6366f1; /* overridden inline per-category via CSS var below */
}

.calc-wide-container {
    max-width: 1600px;
    padding-left: 2rem;
    padding-right: 2rem;
}
@media (max-width: 992px) {
    .calc-wide-container { padding-left: 1rem; padding-right: 1rem; }
}

.breadcrumb-dark .breadcrumb-item a { color: rgba(255,255,255,0.7); text-decoration: none; }
.breadcrumb-dark .breadcrumb-item a:hover { color: white; }
.text-white-75 { color: rgba(255,255,255,0.75) !important; }

.calculator-container {
    background: white;
    border-radius: var(--border-radius-xl, 1rem);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.08));
    padding: 2rem;
    position: relative;
}
.calculator-header { border-bottom: 2px solid var(--gray-200, #e5e7eb); padding-bottom: 1rem; }
.result-card { box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.08)); }
.stat-item { padding: .5rem 0; border-bottom: 1px solid var(--gray-200, #e5e7eb); }
.stat-item:last-child { border-bottom: none; }
.formula-box { font-family: 'Courier New', monospace; text-align: center; font-size: 1.1rem; }
.list-group-item { border: none; border-bottom: 1px solid var(--gray-200, #e5e7eb); }
.list-group-item:last-child { border-bottom: none; }
.badge-sm { font-size: .6875rem; padding: .25rem .5rem; }

/* Left/right split gets its own visual separation on large screens */
@media (min-width: 992px) {
    #mortgageForm { border-right: 1px solid var(--gray-200, #e5e7eb); padding-right: 1.5rem; }
}

@keyframes slideInUp { from { opacity: 0; transform: translateY(30px);} to { opacity: 1; transform: translateY(0);} }
.results-section { animation: slideInUp 0.5s ease; }

.form-control-lg, .form-select-lg {
    padding: .6rem .9rem; font-size: .95rem;
    border: 2px solid var(--gray-200, #e5e7eb); transition: all .3s ease;
}
.form-control-lg:focus, .form-select-lg:focus {
    border-color: var(--calculator-color);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--calculator-color) 25%, transparent);
}

@media (max-width: 768px) {
    .calculator-container { padding: 1.5rem; }
    .display-5 { font-size: 1.75rem; }
}

/* ---- Input panel: tinted zone to visually separate inputs from results ---- */
.input-panel {
    background: #f8f9fc;
    border-radius: .75rem;
    padding: 1.25rem 1.25rem 1.5rem;
}
@media (min-width: 992px) {
    #mortgageForm { border-right: none; padding-right: 0; } /* superseded by .input-panel bg */
}

/* Compact $/% segmented toggle attached to the Down Payment label */
.down-type-toggle .btn {
    padding: .1rem .5rem;
    font-size: .75rem;
    line-height: 1.4;
}

/* Payoff acceleration highlight */
.acceleration-box {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
    border-radius: .5rem;
    padding: .6rem .8rem;
    font-size: .85rem;
    font-weight: 500;
}

/* Quick tips filling the leftover vertical space next to the taller results column */
.quick-tips-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.quick-tips-list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: .75rem;
    font-size: .85rem;
    color: #4b5563;
    line-height: 1.4;
}
.quick-tips-list li:last-child { margin-bottom: 0; }
.quick-tips-list li::before {
    content: "\f058"; /* fa-circle-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--calculator-color);
    position: absolute;
    left: 0;
    top: 0;
}

/* Amortization table: stop the scrollbar from overlapping the last column */
#tab-schedule .table-responsive {
    padding-right: 4px;
}
#tab-schedule .table-responsive::-webkit-scrollbar {
    width: 8px;
}
#tab-schedule .table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
#amortizationTable th:last-child,
#amortizationTable td:last-child {
    padding-right: 12px;
}

/* Related Calculators: plain list, no card/border/shadow */
.related-calc-link {
    text-decoration: none;
    color: inherit;
    padding: .5rem 0;
}
.related-calc-link:hover .fw-medium {
    color: var(--calculator-color);
}

/* One-time purchase tax (SDLT / Grunderwerbsteuer / notary fees / ITP-IVA) */
.one-time-tax-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    border-radius: .5rem;
    padding: .7rem .9rem;
    font-size: .9rem;
}

/* Remaining balance at end of DE fixed-rate period (needs refinancing) */
.remaining-balance-box {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: .5rem;
    padding: .7rem .9rem;
    font-size: .9rem;
}

#countrySelector {
    min-width: 160px;
}

/* ---- Payoff Acceleration: its own bigger, distinct card ---- */
.accel-slider-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1.1rem 1.25rem 1.25rem;
}
.extra-payment-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--calculator-color);
    background: color-mix(in srgb, var(--calculator-color) 12%, white);
    padding: .2rem .6rem;
    border-radius: .4rem;
}

/*
 * Explicit cross-browser <input type="range"> rebuild.
 * Some sites apply a global reset (appearance:none) to all inputs without
 * rebuilding range-specific styles, which makes the slider invisible.
 * These rules are self-contained and don't depend on any other CSS.
 */
.accel-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 6px;
    background: #e2e8f0;
    outline: none;
    cursor: pointer;
    margin: .5rem 0;
}
.accel-range::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 6px;
    background: #e2e8f0;
}
.accel-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--calculator-color);
    border: 3px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    margin-top: -8px;
    cursor: pointer;
}
.accel-range::-moz-range-track {
    height: 10px;
    border-radius: 6px;
    background: #e2e8f0;
}
.accel-range::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--calculator-color);
    border: 3px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    cursor: pointer;
}
.accel-range::-moz-range-progress {
    height: 10px;
    border-radius: 6px;
    background: var(--calculator-color);
}