/* TyLearn Badges Listing Styles */

/* Badge Cards */
.badge-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    border-radius: 12px;
}

.badge-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

.badge-card .card-header {
    border-radius: 12px 12px 0 0;
    border-bottom-width: 3px;
    border-bottom-style: solid;
}

.badge-card .card-footer {
    border-radius: 0 0 12px 12px;
    border-top: none;
}

/* Badge Icon Large */
.badge-icon-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Level Badges */
.badge.bg-info {
    background-color: #3498db !important;
}

.badge.bg-warning {
    background-color: #f39c12 !important;
}

.badge.bg-success {
    background-color: #27ae60 !important;
}

/* Filter Selects */
#categoryFilter,
#levelFilter {
    border-radius: 8px;
    padding: 10px 15px;
    border: 2px solid #e9ecef;
    transition: border-color 0.2s ease;
}

#categoryFilter:focus,
#levelFilter:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

/* My Badges Page */
.my-badges-card {
    border-left: 4px solid;
}

.my-badges-card.passed {
    border-left-color: #27ae60;
}

.my-badges-card.testing {
    border-left-color: #f39c12;
}

.my-badges-card.failed {
    border-left-color: #e74c3c;
}

/* Responsive */
@media (max-width: 768px) {
    .badge-card {
        margin-bottom: 1rem;
    }
    
    .badge-icon-lg {
        padding: 1rem !important;
    }
    
    .badge-icon-lg i {
        font-size: 2rem !important;
    }
}