/* ==========================================
   PERCENTAGE INCREASE CALCULATOR - NON-CRITICAL CSS
   ========================================== */

/* === INTERACTIVE STATES === */
.mode-label:hover { background: #f8fafc; }
.mode-option input[type="radio"]:checked + .mode-label .radio-circle { box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.1); }
.mode-option input[type="radio"]:checked + .mode-label .radio-circle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background: white; border-radius: 50%; }

/* === 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: 1.05rem; }

/* === DESKTOP ENHANCEMENTS === */
@media (min-width: 769px) {
    .result-card { transition: all 0.3s ease; }
    .formula-section { transition: all 0.3s ease; }
    .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.25rem; }
    .formula-display .katex { font-size: 0.9rem; }
}