/**
 * calculator.css — styles for the TrueCost mortgage calculator.
 * Every selector is scoped under #truecost-app so nothing here can leak into,
 * or be overridden by, the rest of the trueclose theme.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
#truecost-app { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

#truecost-app input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 9999px;
    background: #e2e8f0;
    outline: none;
    transition: background 0.2s;
}
#truecost-app input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4f46e5;
    cursor: pointer;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.4);
    transition: transform 0.1s, background-color 0.2s;
}
#truecost-app input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
#truecost-app input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4f46e5;
    cursor: pointer;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.4);
}

#truecost-app .progress-fill { transition: width 0.5s ease, background-color 0.3s ease; }

@keyframes tcFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tcSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
#truecost-app .modal-overlay { animation: tcFadeIn 0.2s ease; }
#truecost-app .modal-content { animation: tcSlideUp 0.3s ease; }

#truecost-app .print-only { display: none; }

#truecost-app .tour-element-highlight {
    position: relative;
    z-index: 20 !important;
    box-shadow: 0 0 0 4px #f59e0b, 0 10px 25px -5px rgba(245, 158, 11, 0.4) !important;
    border-color: #f59e0b !important;
    transition: all 0.3s ease;
}

@keyframes tcButtonPulseBreathe {
    0%, 100% {
        background-color: #0f172a;
        color: #fcd34d;
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
        background-color: #d97706;
        color: #ffffff;
        box-shadow: 0 0 14px 4px rgba(245, 158, 11, 0.75);
        transform: scale(1.03);
    }
}
#truecost-app .guide-next-animate {
    animation: tcButtonPulseBreathe 2.2s ease-in-out infinite;
}

/* Print: isolate #truecost-app content as the only thing on the printed page. */
@media print {
    body * { visibility: hidden !important; }
    #truecost-app, #truecost-app * { visibility: visible !important; }
    #truecost-app {
        position: absolute;
        left: 0;
        top: 0;
        width: 100% !important;
        background: #ffffff !important;
        color: #000000 !important;
    }
    #truecost-app .no-print { display: none !important; }
    #truecost-app .print-only { display: block !important; }
    #truecost-app #results-panel { width: 100% !important; max-width: 100% !important; box-shadow: none !important; }
    #truecost-app .print-card { break-inside: avoid; box-shadow: none !important; border: 1px solid #cbd5e1 !important; margin-bottom: 1rem !important; }
    @page { margin: 1.2cm; }
}