/* =================================
   LOGO BACKGROUND & BUTTON SIZE FIXES
   Add this CSS file to your project
   ================================= */

/* White background for selected logos */
.search-card[data-category-id="contax"] .card-icon,
.search-card[data-category-id="voigtlander"] .card-icon,
.search-card[data-category-id="rollei"] .card-icon,
.search-card[data-category-id="objektive"] .card-icon,
.search-card[data-category-id="zeiss"] .card-icon,
.search-card[data-category-id="agfa"] .card-icon,
.search-card[data-category-id="leica"] .card-icon {
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.5),
        0 0 30px rgba(255, 255, 255, 0.3) !important;
}

/* Ensure good contrast on hover */
.search-card[data-category-id="contax"]:hover .card-icon,
.search-card[data-category-id="voigtlander"]:hover .card-icon,
.search-card[data-category-id="rollei"]:hover .card-icon,
.search-card[data-category-id="objektive"]:hover .card-icon,
.search-card[data-category-id="zeiss"]:hover .card-icon,
.search-card[data-category-id="agfa"]:hover .card-icon,
.search-card[data-category-id="leica"]:hover .card-icon {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 
        inset 0 0 30px rgba(255, 255, 255, 0.7),
        0 0 40px rgba(255, 255, 255, 0.5) !important;
}

/* Adjust logo appearance on white background */
.search-card[data-category-id="contax"] .card-icon img,
.search-card[data-category-id="voigtlander"] .card-icon img,
.search-card[data-category-id="rollei"] .card-icon img,
.search-card[data-category-id="objektive"] .card-icon img,
.search-card[data-category-id="zeiss"] .card-icon img,
.search-card[data-category-id="agfa"] .card-icon img,
.search-card[data-category-id="leica"] .card-icon img {
    filter: brightness(0.8) contrast(1.5);
    opacity: 0.9;
}

/* Scale down logos that are too wide */
.search-card[data-category-id="voigtlander"] .card-icon img {
    transform: scale(0.8);
}

.search-card[data-category-id="rollei"] .card-icon img {
    transform: scale(0.7);
}

.search-card[data-category-id="contax"] .card-icon img {
    transform: scale(0.7);
}

.search-card[data-category-id="agfa"] .card-icon img {
    transform: scale(0.85);
}

.search-card[data-category-id="contax"]:hover .card-icon img,
.search-card[data-category-id="voigtlander"]:hover .card-icon img,
.search-card[data-category-id="rollei"]:hover .card-icon img,
.search-card[data-category-id="objektive"]:hover .card-icon img,
.search-card[data-category-id="zeiss"]:hover .card-icon img,
.search-card[data-category-id="agfa"]:hover .card-icon img,
.search-card[data-category-id="leica"]:hover .card-icon img {
    filter: brightness(0.7) contrast(1.6);
    opacity: 1;
}

/* Maintain scale on hover */
.search-card[data-category-id="voigtlander"]:hover .card-icon img {
    transform: scale(0.88);
}

.search-card[data-category-id="rollei"]:hover .card-icon img {
    transform: scale(0.78);
}

.search-card[data-category-id="contax"]:hover .card-icon img {
    transform: scale(0.78);
}

.search-card[data-category-id="agfa"]:hover .card-icon img {
    transform: scale(0.93);
}

/* =================================
   BUTTON SIZE REDUCTION (40% smaller)
   ================================= */

/* Reduce card size by 40% - was minmax(280px, 1fr), now minmax(220px, 1fr) */
.search-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 20px !important;
}

/* Make ALL cards the same size - override manufacturer special sizing */
.search-card,
.search-card.manufacturer,
.search-card.specialty,
.search-card.geographic {
    padding: 20px 15px !important;
    min-height: 140px !important;
}

/* Reduce icon size by 40% */
.search-card .card-icon,
.search-card.manufacturer .card-icon,
.search-card.specialty .card-icon,
.search-card.geographic .card-icon {
    width: 72px !important;  /* Reduced from 120px */
    height: 72px !important; /* Reduced from 120px */
    margin: 0 auto 15px !important; /* Reduced margin */
    padding: 3px !important; /* Reduced from 5px */
    border-radius: 14px; /* Proportionally smaller */
}

/* Reduce logo size inside icons */
.search-card .card-icon img {
    /* Already set to 100% of container, will scale automatically */
}

/* Reduce emoji size for non-manufacturer cards */
.search-card:not(.manufacturer) .card-icon.emoji {
    font-size: 36px !important; /* Reduced from 60px */
}

/* Reduce text sizes - same for ALL cards */
.search-card .card-title,
.search-card.manufacturer .card-title,
.search-card.specialty .card-title,
.search-card.geographic .card-title {
    font-size: 15px !important; /* Reduced from 18-19px */
    margin-bottom: 6px !important;
    font-weight: 500 !important; /* Consistent weight */
}

.search-card .card-count,
.search-card.manufacturer .card-count,
.search-card.specialty .card-count,
.search-card.geographic .card-count {
    font-size: 12px !important; /* Reduced from 14-15px */
    font-weight: 400 !important; /* Consistent weight */
}

/* Adjust hover lift for smaller cards */
.search-card:not(.dematerializing):hover {
    transform: translateY(-6px) rotateX(3deg) rotateY(-3deg) translateZ(20px);
}

/* Mobile responsiveness with proportional reduction */
@media (max-width: 768px) {
    .search-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        gap: 15px !important;
    }
    
    .search-card,
    .search-card.manufacturer,
    .search-card.specialty,
    .search-card.geographic {
        min-height: 120px !important;
        padding: 15px 12px !important;
    }
    
    .search-card .card-icon,
    .search-card.manufacturer .card-icon,
    .search-card.specialty .card-icon,
    .search-card.geographic .card-icon {
        width: 60px !important;
        height: 60px !important;
        padding: 2px !important;
    }
    
    .search-card:not(.manufacturer) .card-icon.emoji {
        font-size: 30px !important;
    }
    
    .search-card .card-title,
    .search-card.manufacturer .card-title,
    .search-card.specialty .card-title,
    .search-card.geographic .card-title {
        font-size: 14px !important;
    }
    
    .search-card .card-count,
    .search-card.manufacturer .card-count,
    .search-card.specialty .card-count,
    .search-card.geographic .card-count {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .search-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 12px !important;
    }
    
    .search-card .card-icon,
    .search-card.manufacturer .card-icon,
    .search-card.specialty .card-icon,
    .search-card.geographic .card-icon {
        width: 54px !important;
        height: 54px !important;
    }
    
    .search-card .card-icon img {
        max-width: 50px !important;
        max-height: 50px !important;
    }
}

/* Ensure animations still work smoothly with smaller sizes */
@keyframes dematerialize3D {
    /* Animation remains the same, just operating on smaller elements */
    0% {
        transform: perspective(1000px) rotateY(0deg) scale(1);
        opacity: 1;
        filter: blur(0);
    }
    15% {
        transform: perspective(1000px) rotateY(90deg) scale(1.05);
        opacity: 1;
    }
    30% {
        transform: perspective(1000px) rotateY(180deg) scale(1.1);
        opacity: 1;
    }
    45% {
        transform: perspective(1000px) rotateY(270deg) scale(1.1);
        opacity: 1;
    }
    60% {
        transform: perspective(1000px) rotateY(360deg) scale(1.05);
        opacity: 0.9;
    }
    75% {
        transform: perspective(1000px) rotateY(540deg) scale(0.8) translateZ(30px);
        opacity: 0.6;
    }
    90% {
        transform: perspective(1000px) rotateY(720deg) scale(0.4) translateZ(100px);
        opacity: 0.3;
    }
    100% {
        transform: perspective(1000px) rotateY(720deg) scale(0) translateZ(200px);
        opacity: 0;
    }
}

/* Adjust particle explosion for smaller cards */
.search-card.dematerializing .particle-bit {
    width: 4px !important;
    height: 4px !important;
}

/* Priority card float animation adjusted for smaller size */
@keyframes cinematicFloat {
    0%, 100% { transform: translateY(0) rotateX(0); }
    50% { transform: translateY(-6px) rotateX(-1.5deg); }
}

/* Smooth entrance animation for smaller cards */
body.first-load .search-card {
    animation: cinematic3DEntrance 1.5s ease-out forwards;
}