/* ===== MOTORCYCLE BRAND STYLES - TEMPLATE FOLDER (PNG/JPG OPTIMIZED) ===== */

/* Brand card: full card look with border + hover elevation */
.brand-card {
    background: #fff;
    border: 1px solid #e5e7eb;           /* card border */
    border-radius: 14px;                  /* card radius */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 200ms ease, box-shadow 220ms ease, border-color 200ms ease;
}

.brand-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    border-color: rgba(0, 123, 255, 0.25); /* subtle accent on hover */
}

/* Base Brand Logo Styling - preserve original colors */
.brand-logo {
    max-height: 60px;
    max-width: 120px;
    height: auto;
    width: auto;
    object-fit: contain;
    transition: transform 200ms ease-out;
    border-radius: 6px;
    background-color: transparent;
}

/* Only size change on hover for the logo itself */
.brand-card:hover .brand-logo { transform: scale(1.05); }

/* Brand logo container inside card */
.brand-logo-container {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: transparent;              /* no gray panel */
    border: 0;                            /* no inner border */
    border-radius: 10px;
    padding: 12px;                        /* comfortable spacing */
    box-shadow: none;                     /* no inner shadow */
}

/* High DPI rendering hints (does not affect colors) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .brand-logo { image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; }
}

/* Responsive sizes for different contexts */
.product-card .brand-logo { max-height: 40px; max-width: 80px; }
.brand-showcase .brand-logo { max-height: 80px; max-width: 160px; }
.navbar .brand-logo { max-height: 30px; max-width: 60px; }
.footer .brand-logo { max-height: 35px; max-width: 70px; }

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .brand-logo { max-height: 45px; max-width: 90px; }
    .brand-showcase .brand-logo { max-height: 60px; max-width: 120px; }
}
@media (max-width: 480px) { .brand-logo { max-height: 35px; max-width: 70px; } }

/* Loading animation for logos (does not change colors) */
.brand-logo.loading { opacity: 0.7; background: linear-gradient(90deg, #f0f0f0 25%, transparent 37%, #f0f0f0 63%); background-size: 400% 100%; animation: shimmer 1.5s ease-in-out infinite; }

/* KEYFRAME ANIMATIONS - Safe from Razor parser */
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes bounce { 0%, 100% { transform: translateY(-10px) scale(1.02); } 50% { transform: translateY(-15px) scale(1.03); } }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } }

/* Apply loading shimmer only */
.brand-logo.loading { animation: shimmer 1.5s ease-in-out infinite; }

/* Fallback text styling when logo fails to load */
.brand-logo-fallback { font-family: 'Racing Sans One', cursive; font-weight: bold; font-size: 12px; color: #333; text-transform: uppercase; letter-spacing: 1px; padding: 8px 12px; border: 2px solid #ddd; border-radius: 6px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); display: inline-block; min-width: 60px; text-align: center; transition: transform 200ms ease-out; }
.brand-logo-fallback:hover { transform: translateY(-1px); }

/* Brand grid layout */
.brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; padding: 20px 0; }
.brand-item { display: flex; align-items: center; justify-content: center; padding: 15px; background: white; border-radius: 12px; transition: transform 200ms ease-out; }
.brand-item:hover { transform: translateY(-2px); }