/* === ICON SYSTEM === */

.icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;
}

/* Icon Size Variants */
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

/* Icon Animation Classes */
.icon-spin {
    animation: spin 1s linear infinite;
}

.icon-pulse {
    animation: pulse 2s infinite;
}

.icon-bounce {
    animation: bounce 1s infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
    40%, 43% { transform: translateY(-30px); }
    70% { transform: translateY(-15px); }
    90% { transform: translateY(-4px); }
}

/* Contextual Icon Colors */
.icon-primary { color: var(--c-accent); }
.icon-secondary { color: var(--c-text-muted); }
.icon-success { color: #10b981; }
.icon-warning { color: #f59e0b; }
.icon-danger { color: #ef4444; }
.icon-info { color: #3b82f6; }
.icon-whatsapp { color: var(--c-wa); }
.icon-gold { color: var(--c-highlight); }

/* Icon Background Circles */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0.5rem;
}

.icon-circle-sm {
    padding: 0.375rem;
}

.icon-circle-lg {
    padding: 0.75rem;
}

.icon-circle-primary {
    background: var(--c-accent);
    color: #fff;
}

.icon-circle-secondary {
    background: var(--c-surface);
    color: var(--c-text-muted);
}

.icon-circle-success {
    background: #10b981;
    color: #fff;
}

.icon-circle-whatsapp {
    background: var(--c-wa);
    color: #fff;
}

.icon-circle-gold {
    background: var(--c-highlight);
    color: #fff;
}

/* Icon States */
.icon-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.icon-interactive {
    cursor: pointer;
    transition: all 0.2s ease;
}

.icon-interactive:hover {
    transform: scale(1.1);
}

/* Icon in Button States */
.btn .icon-svg {
    transition: transform 0.3s ease;
}

.btn:hover .icon-svg {
    transform: translateX(2px);
}

/* Specific Icon Adjustments */
.icon-arrow-right,
.icon-chevron-right {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.icon-menu {
    transition: transform 0.3s ease;
}

.icon-close {
    transition: transform 0.3s ease;
}

.mobile-toggle .icon-svg {
    transform: scale(1);
    transition: transform 0.3s ease;
}

.mobile-toggle:hover .icon-svg {
    transform: scale(1.1);
}

/* Loading Spinner */
.icon-loading {
    animation: spin 1s linear infinite;
}

/* Social Media Icons */
.icon-social {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
}

.icon-social:hover {
    transform: translateY(-2px);
}

/* Utility Classes */
.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-text-reverse {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-direction: row-reverse;
}