/* Custom SVG Icons as CSS */

/* Base icon styles */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
}

.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }
.icon-2xl { width: 64px; height: 64px; }

/* Icon in circle background */
.icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.icon-circle-sm { width: 40px; height: 40px; }
.icon-circle-md { width: 60px; height: 60px; }
.icon-circle-lg { width: 80px; height: 80px; }
.icon-circle-xl { width: 100px; height: 100px; }

/* Animated icons */
.icon-pulse {
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.icon-float {
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}