/* ==========================================
   CERTIFICATE OF DEPOSIT CALCULATOR - NON-CRITICAL CSS
   ========================================== */

/* === INTERACTIVE STATES === */
.input-field:focus-within, .term-unit-select:focus-within { border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15); }

/* === TAB ENHANCEMENTS === */
.tab-btn { transition: all 0.2s ease; }
.tab-btn:focus { outline: 2px solid #8b5cf6; outline-offset: 2px; }

/* === RESULT CARD TRANSITIONS === */
.result-card { transition: all 0.3s ease; }
.result-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }

/* === FORMULA DISPLAY === */
.formula-display { transition: opacity 0.2s ease; }
.formula-display .katex-display { margin: 0.5em 0; }
.formula-display .katex { font-size: 1rem; }

/* === COMPARISON ENHANCEMENTS === */
.comparison-option { transition: all 0.2s ease; }
.comparison-option:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }

/* === DESKTOP ENHANCEMENTS === */
@media (min-width: 769px) {
    .formula-section:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }
}

/* === MOBILE ADJUSTMENTS === */
@media (max-width: 768px) {
    .result-value { font-size: 1.125rem; }
    .formula-display .katex { font-size: 0.9rem; }
}