/* ==========================================
   OVERTIME CALCULATOR - NON-CRITICAL CSS
   ========================================== */

/* Hover States */
.input-row input:hover, .input-row select:hover, .currency-compact-select:hover { border-color: #cbd5e1; }
.tab-btn:hover:not(.active) { background: #f1f5f9; color: #334155; }

/* Transitions */
.input-row input, .input-row select, .currency-compact-select, .tab-btn { transition: all 0.2s ease; }

/* Result Display Animation */
.result-display { transition: all 0.3s ease; }
.result-value { animation: fadeIn 0.3s ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Steps Box Animation */
.steps-box { animation: slideIn 0.3s ease; }

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Example Block Styling */
.article-content .example-block { background: #faf5ff; border-left: 4px solid #8b5cf6; border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 20px 0; }
.article-content .example-block h4 { font-size: 0.9375rem; font-weight: 700; color: #5b21b6; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.article-content .example-block ol { padding-left: 20px; margin-bottom: 0; }
.article-content .example-block li { margin-bottom: 6px; }