/* Eco Icons CSS - Custom SVG Icons for Environmental Context */

/* Recycling Icons */
.eco-recycle-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300A86B"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.eco-leaf-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CAF50"><path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75S6 14 8 14s5 1 5 1l-3.5 3.5c0 0 1.5-1.5 2.5-1.5s2.5 1.5 2.5 1.5L17 8z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.eco-earth-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300BCD4"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.eco-tree-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300A86B"><path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75S6 14 8 14s5 1 5 1l-3.5 3.5c0 0 1.5-1.5 2.5-1.5s2.5 1.5 2.5 1.5L17 8z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Material-specific icons */
.eco-paper-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238D6E63"><path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.eco-glass-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234FC3F7"><path d="M8,2H16V4H14V6H10V4H8V2M10,8H14V20H10V8Z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.eco-metal-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2390A4AE"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.eco-plastic-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CAF50"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Animated eco elements */
.eco-pulse {
    animation: ecoPulse 2s ease-in-out infinite;
}

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

.eco-float {
    animation: ecoFloat 3s ease-in-out infinite;
}

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

/* Eco-themed backgrounds */
.eco-bg-pattern {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="eco-dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="2" fill="%2300A86B" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23eco-dots)"/></svg>');
}

.eco-bg-leaves {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="eco-leaves" width="30" height="30" patternUnits="userSpaceOnUse"><path d="M15,5 Q20,15 15,25 Q10,15 15,5" fill="%234CAF50" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23eco-leaves)"/></svg>');
}

/* Eco-themed gradients */
.eco-gradient-primary {
    background: linear-gradient(135deg, #00A86B 0%, #00D084 50%, #4ECDC4 100%);
}

.eco-gradient-secondary {
    background: linear-gradient(135deg, #4ECDC4 0%, #00BCD4 100%);
}

.eco-gradient-accent {
    background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
}

.eco-gradient-nature {
    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 50%, #CDDC39 100%);
}

/* Eco-themed shadows */
.eco-shadow {
    box-shadow: 0 4px 20px rgba(0, 168, 107, 0.2);
}

.eco-shadow-lg {
    box-shadow: 0 8px 30px rgba(0, 168, 107, 0.3);
}

.eco-shadow-xl {
    box-shadow: 0 12px 40px rgba(0, 168, 107, 0.4);
}

/* Eco-themed borders */
.eco-border {
    border: 2px solid var(--primary-green);
}

.eco-border-dashed {
    border: 2px dashed var(--primary-green);
}

.eco-border-gradient {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                var(--gradient-primary) border-box;
}