.category-card {
    transition: all 0.3s ease;
    border: 2px solid #e9ecef;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
}

    .category-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    /* Add subtle gradient background on hover matching icon color */
    .category-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 4px;
        z-index: 0;
    }

    .category-card:hover::before {
        opacity: 0.08;
    }

    .category-card .card-body {
        position: relative;
        z-index: 1;
    }

    /* Icon glow effect on hover */
    .category-card:hover .bi {
        transform: scale(1.15);
        filter: brightness(1.15) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
        transition: all 0.3s ease;
    }

    .category-card .bi {
        transition: all 0.3s ease;
    }

    .category-card .card-title {
        font-weight: 600;
    }

    .category-card:hover .card-title {
        font-weight: 700;
    }

.subcategory-badge {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
}

    .subcategory-badge:hover {
        background-color: #e9ecef !important;
        cursor: pointer;
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

.card.category-card .badge.bg-primary {
    color: white;
}

/* Individual category hover gradient effects matching quick categories */
/* Automobili - Red/Purple blend */
.category-card:nth-child(1):hover::before {
    background: linear-gradient(135deg, #dc3545 0%, #764ba2 100%);
}

/* Nekretnine - Purple gradient */
.category-card:nth-child(2):hover::before {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Tehnika - Purple */
.category-card:nth-child(3):hover::before {
    background: linear-gradient(135deg, #8b5cf6 0%, #667eea 100%);
}

/* Moda - Purple/Pink blend */
.category-card:nth-child(4):hover::before {
    background: linear-gradient(135deg, #d63384 0%, #8b5cf6 100%);
}

/* Dom i vrt - Orange/Purple blend */
.category-card:nth-child(5):hover::before {
    background: linear-gradient(135deg, #fd7e14 0%, #f093fb 100%);
}

/* Sport - Purple/Gray */
.category-card:nth-child(6):hover::before {
    background: linear-gradient(135deg, #8b5cf6 0%, #6c757d 100%);
}

/* Usluge - Pink/Purple */
.category-card:nth-child(7):hover::before {
    background: linear-gradient(135deg, #f093fb 0%, #8b5cf6 100%);
}

/* Namirnice - Yellow/Purple blend */
.category-card:nth-child(8):hover::before {
    background: linear-gradient(135deg, #ffc107 0%, #8b5cf6 100%);
}

/* Ostalo - Green/Purple blend */
.category-card:nth-child(9):hover::before {
    background: linear-gradient(135deg, #198754 0%, #667eea 100%);
}

/* Icon glow animation matching quick categories */
@keyframes iconGlow {
    0%, 100% {
        filter: brightness(1.15) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
    }
    50% {
        filter: brightness(1.25) drop-shadow(0 0 10px currentColor);
    }
}

.category-card:hover .bi {
    animation: iconGlow 2s ease-in-out infinite;
}