.camp-card {
border: 1px solid #e0e0e0;
border-radius: 8px !important;
padding: 15px;
margin-bottom: 15px;
background: #fff;
transition: all 0.3s ease;
}

.camp-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-color: #4a90e2;
}

.camp-number {
display: inline-block;
background: #f5f5f5;
color: #666;
padding: 2px 8px;
border-radius: 4px !important;
font-size: 11px;
font-weight: bold;
margin-bottom: 8px;
}

.camp-title {
font-size: 15px;
font-weight: 500;
color: #333;
margin-bottom: 12px;
line-height: 1.4;
}

.camp-title a {
color: #333;
text-decoration: none;
}

.camp-title a:hover {
color: #4a90e2;
}

.camp-info {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.camp-badge {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 20px !important;
font-size: 12px;
font-weight: 500;
}

.camp-duration {
background: #e3f2fd;
color: #1976d2;
}

.camp-age {
background: #f3e5f5;
color: #7b1fa2;
}

.camp-location {
background: #fff3e0;
color: #e65100;
}

.camp-icon {
margin-right: 4px;
font-size: 13px;
}

@media (max-width: 767px) {
.camp-card {
    padding: 12px;
}

.camp-title {
    font-size: 14px;
}

.camp-info {
    gap: 8px;
}

.camp-badge {
    font-size: 11px;
    padding: 5px 10px;
}
}

.camp-list-header {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 6px !important;
padding: 12px 15px;
margin-bottom: 15px;
font-weight: 600;
color: #495057;
}