/* Inline SVG Icon Styles */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: middle;
}

.icon-sm {
    width: 0.875em;
    height: 0.875em;
}

.icon-lg {
    width: 1.25em;
    height: 1.25em;
}

.icon-xl {
    width: 1.5em;
    height: 1.5em;
}

.icon-2xl {
    width: 2em;
    height: 2em;
}

.icon-3xl {
    width: 3em;
    height: 3em;
}

.icon-4xl {
    width: 4em;
    height: 4em;
}

.icon-5xl {
    width: 5em;
    height: 5em;
}

/* Specific icon colors */
.icon-green {
    color: #10b981;
}

.icon-blue {
    color: #3b82f6;
}

.icon-yellow {
    color: #f59e0b;
}

.icon-red {
    color: #ef4444;
}

.icon-white {
    color: #ffffff;
}

.icon-gray {
    color: #6b7280;
}

/* Hover effects */
.icon-hover:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}