.resource-card { transition: all 0.3s ease; border: 1px solid #dee2e6; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.resource-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-2px); }
.resource-card.selected-arena { border-color: #28a745; box-shadow: 0 0 0 2px rgba(40,167,69,0.2); }
.resource-card .card-img-top { height: 200px; object-fit: cover; }
.resource-card .card-img-placeholder { height: 200px; background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); display: flex; align-items: center; justify-content: center; }
.resource-card .card-img-placeholder i { font-size: 3rem; color: #6c757d; }
.resource-card .card-body { padding: 1.25rem; display: flex; flex-direction: column; }
.resource-badge { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,0.95); padding: 6px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; color: #0d6efd; }
.resource-status { position: absolute; top: 12px; left: 12px; background: rgba(40,167,69,0.9); color: white; padding: 4px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 600; }
.price-highlight { background: linear-gradient(45deg, #007bff, #0056b3); color: white; padding: 8px 12px; border-radius: 8px; font-weight: bold; }
.sport-tag { background: #f8f9fa; border: 1px solid #e9ecef; color: #495057; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; margin: 2px; display: inline-block; transition: all 0.2s ease; }
.sport-tag:hover { background: #0d6efd; color: white; border-color: #0d6efd; }
.sport-tag.selected { background: #198754; color: white; border-color: #198754; }
.card-body-custom { padding: 0.75rem 1.25rem; }
.resource-booking-section { scroll-margin-top: 90px; }
/* Sport selection highlight when user tries to book without selecting a sport */
.sport-selection { position: relative; transition: all 0.3s ease; }
.sport-selection.highlight-required {
    animation: highlightPulse 2s ease-in-out;
    border: 2px solid #dc3545;
    border-radius: 8px;
    padding: 8px;
    background-color: rgba(220, 53, 69, 0.1);
}
.sport-selection.highlight-required::before {
    content: "⚠️ @Localizer["SelectASport"]";
    position: absolute;
    top: -25px;
    left: 0;
    background: #dc3545;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 10;
    animation: fadeInOut 2s ease-in-out;
}
@keyframes highlightPulse {
    0% { border-color: #dc3545; background-color: rgba(220, 53, 69, 0.1); transform: scale(1); }
    50% { border-color: #ff6b7a; background-color: rgba(220, 53, 69, 0.2); transform: scale(1.02); }
    100% { border-color: #dc3545; background-color: rgba(220, 53, 69, 0.1); transform: scale(1); }
}
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(-10px); }
    20% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}