/* ==========================================
   BOARD FOOT CALCULATOR - NON-CRITICAL CSS
   ========================================== */

.method-label:hover { background: #f8fafc; }
.left-panel, .right-panel { transition: box-shadow 0.3s ease; }
.input-field { transition: all 0.2s ease; }
.input-field:focus-within { border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15); }
.input-field input:focus { outline: none; }

/* Result field styling */
.input-field input.result-primary { background: #f5f3ff; font-weight: 700; color: #5b21b6; font-size: 1.125rem; }
.input-field input.result-cost { background: #ecfdf5; font-weight: 700; color: #059669; font-size: 1.125rem; }

/* Quantity input */
.quantity-input { 
    text-align: center; 
    padding-right: 2rem !important;
}

/* Dropdown styling */
.custom-select-trigger::after { content: '▼'; font-size: 0.6rem; color: #94a3b8; margin-left: 4px; }
.custom-options { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); max-width: 280px; }
.custom-option { transition: background 0.2s; overflow: hidden; text-overflow: ellipsis; }
.custom-option:hover { background: #f5f3ff; color: #5b21b6; }
.custom-option.selected { background: #ede9fe; font-weight: 600; color: #5b21b6; }

/* Error styling */
.calc-error::before { content: '⚠️'; font-size: 0.9rem; margin-right: 6px; }

/* Mobile */
@media (max-width: 768px) {
    .bf-calc-wrapper { padding: 0 8px; }
    .left-panel, .right-panel { padding: 20px; min-height: auto; }
}

/* Related Calculators */
.related-calculators-grid a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: white; border: 1px solid #f1f5f9; border-radius: 10px; text-decoration: none; color: #1e293b; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.related-calculators-grid a:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }