/* Unified Manufacturer Logo Styles */
/* Use these classes for consistent logo display across your application */

/* Base logo container */
.manufacturer-logo {
    display: inline-block;
    background: white;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    transition: all 0.2s ease;
}

.manufacturer-logo:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.manufacturer-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Size variants */
.manufacturer-logo--small {
    width: 64px;
    height: 64px;
    padding: 8px;
}

.manufacturer-logo--standard {
    width: 128px;
    height: 128px;
    padding: 15px;
}

.manufacturer-logo--large {
    width: 256px;
    height: 256px;
    padding: 30px;
}

/* Background variants */
.manufacturer-logo--transparent {
    background: transparent;
    border: none;
}

.manufacturer-logo--dark {
    background: #2c3e50;
    border-color: #34495e;
}

.manufacturer-logo--light-gray {
    background: #f8f9fa;
    border-color: #dee2e6;
}

/* Grid layouts for multiple logos */
.manufacturer-grid {
    display: grid;
    gap: 20px;
    justify-items: center;
}

.manufacturer-grid--small {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 15px;
}

.manufacturer-grid--standard {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

.manufacturer-grid--large {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .manufacturer-grid--standard {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 15px;
    }
    
    .manufacturer-grid--large {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .manufacturer-grid--small {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        gap: 10px;
    }
    
    .manufacturer-grid--standard {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 12px;
    }
    
    .manufacturer-grid--large {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
}

/* Utility classes */
.manufacturer-logo--rounded {
    border-radius: 50%;
}

.manufacturer-logo--circular {
    border-radius: 50%;
    padding: 20px;
}

.manufacturer-logo--no-border {
    border: none;
}

.manufacturer-logo--shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.manufacturer-logo--shadow-hover:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Animation variants */
.manufacturer-logo--fade-hover {
    transition: opacity 0.2s ease;
}

.manufacturer-logo--fade-hover:hover {
    opacity: 0.8;
}

.manufacturer-logo--scale-hover {
    transition: transform 0.2s ease;
}

.manufacturer-logo--scale-hover:hover {
    transform: scale(1.05);
}