/* ========================================
   ICON STYLES - Lucide Icons Enhancement
   ======================================== */

/* Ensure Lucide icons display properly */
.lucide {
    display: inline-block;
    vertical-align: middle;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Icon sizes */
.icon-sm {
    width: 16px;
    height: 16px;
}

.icon-md {
    width: 24px;
    height: 24px;
}

.icon-lg {
    width: 32px;
    height: 32px;
}

.icon-xl {
    width: 48px;
    height: 48px;
}

/* Fallback for when icons don't load */
.lucide::before {
    display: inline-block;
}

/* Icon button wrapper */
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    transition: all var(--transition-base);
}

.icon-button:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

/* SVG fallback styling */
svg.fallback-icon {
    display: inline-block;
    vertical-align: middle;
}