/* Professional Tool Icons with CSS and SVG */

.tool-icon-svg {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    display: block;
    border-radius: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.tool-icon-svg:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* Weather Icon */
.weather-icon {
    background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
}

.weather-icon svg {
    width: 100%;
    height: 100%;
}

/* Currency Icon */
.currency-icon {
    background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
}

/* Stock Icon */
.stock-icon {
    background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
}

/* Flight Icon */
.flight-icon {
    background: linear-gradient(135deg, #6c5ce7 0%, #5f3dc4 100%);
}

/* IP Location Icon */
.ip-location-icon {
    background: linear-gradient(135deg, #00cec9 0%, #00b894 100%);
}

/* Dictionary Icon */
.dictionary-icon {
    background: linear-gradient(135deg, #e84393 0%, #d63031 100%);
}

/* NASA Icon */
.nasa-icon {
    background: linear-gradient(135deg, #6f42c1 0%, #495057 100%);
}

/* Quotes Icon */
.quotes-icon {
    background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
}

/* Holidays Icon */
.holidays-icon {
    background: linear-gradient(135deg, #0984e3 0%, #74b9ff 100%);
}

/* SVG Icons Styling */
.tool-icon-svg svg {
    fill: white;
    stroke: white;
    stroke-width: 1.5;
}

/* Blog Category Icons */
.category-card .tool-icon-svg {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    padding: 15px;
}

.featured-image .tool-icon-svg {
    border-radius: 1rem 1rem 0 0;
    margin: 0;
}

/* Blog Post Card AI Images */
.post-ai-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 1rem 1rem 0 0;
    transition: transform 0.3s ease;
}

.post-ai-image:hover {
    transform: scale(1.05);
}

.post-icon-fallback {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 1rem 1rem 0 0;
    color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tool-icon-svg {
        width: 60px;
        height: 60px;
        padding: 15px;
    }

    .category-card .tool-icon-svg {
        width: 50px;
        height: 50px;
        padding: 12px;
    }
}

/* Generic AI icon image */
.ai-icon {
    width: 24px;
    height: 24px;
    object-fit: cover;
    vertical-align: middle;
    border-radius: 6px;
}

/* Larger icon variants */
.ai-icon.lg { width: 40px; height: 40px; border-radius: 10px; }
.ai-icon.xl { width: 48px; height: 48px; border-radius: 12px; }