/* calculator-card.css */
.calculator-card {
    transition: all 0.3s ease;
    border-left: 4px solid;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: white;
}

.calculator-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.calculator-card:active {
    transform: translateY(-1px) scale(0.99);
}

/* Distinct gradients for each category */
.financial-card { 
    border-top: 3px solid #7c3aed;
    background: linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 50%, #c4b5fd 100%);
    position: relative;
    overflow: hidden;
}

.health-card { 
    border-top: 3px solid #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%);
    position: relative;
    overflow: hidden;
}

.math-card { 
    border-top: 3px solid #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
    position: relative;
    overflow: hidden;
}

.business-card { 
    border-top: 3px solid #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
    position: relative;
    overflow: hidden;
}

.crypto-card { 
    border-top: 3px solid #6366f1;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #a5b4fc 100%);
    position: relative;
    overflow: hidden;
}

/* Shimmer effect for all cards */
.calculator-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
    transform: rotate(30deg);
    pointer-events: none;
}

/* Dark mode adjustments */
.dark .financial-card {
    background: linear-gradient(135deg, #2e1065 0%, #4c1d95 50%, #5b21b6 100%);
    border-color: #8b5cf6;
}

.dark .health-card {
    background: linear-gradient(135deg, #064e3b 0%, #047857 50%, #059669 100%);
    border-color: #10b981;
}

.dark .math-card {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #3b82f6 100%);
    border-color: #60a5fa;
}

.dark .business-card {
    background: linear-gradient(135deg, #78350f 0%, #92400e 50%, #b45309 100%);
    border-color: #f59e0b;
}

.dark .crypto-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #0c1424 100%);
    border-color: #818cf8;
}

/* Shimmer effect for dark mode */
.dark .calculator-card::before {
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
}

/* Crypto-specific shimmer */
.dark .crypto-card::before {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0) 70%);
}