/* ==========================================
   PAY RAISE CALCULATOR - NON-CRITICAL CSS
   ========================================== */

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

/* === TOGGLE SWITCH ENHANCEMENTS === */
.toggle-option { transition: all 0.2s ease; }
.toggle-option:hover:not(.active) { background: #e2e8f0; }

/* === CALCULATE BUTTON ENHANCEMENTS === */
.calculate-btn { transition: all 0.2s ease; }
.calculate-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); }

/* === TABLE ENHANCEMENTS === */
.breakdown-table { transition: opacity 0.2s ease; }

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

/* === 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; }
    .toggle-option { font-size: 0.8125rem; padding: 8px 12px; }
}