/**
 * Spawn Arts | Ball cards, popups, controls, search
 */

.controls-sticky {
    position: sticky !important;
    top: 56px;
    z-index: 1020;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    border-bottom: 2px solid #8e44ad !important;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(142, 68, 173, 0.2);
    transition: all 0.3s ease;
}

.control-group:hover {
    background: rgba(142, 68, 173, 0.1);
    border-color: rgba(142, 68, 173, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(142, 68, 173, 0.2);
}

.control-select {
    min-width: 120px !important;
    border-radius: 8px !important;
    border: 1px solid #555 !important;
    background-color: #2a2a2a !important;
    transition: all 0.3s ease !important;
}

.control-select:focus { border-color: #8e44ad !important; box-shadow: 0 0 0 0.2rem rgba(142, 68, 173, 0.25) !important; background-color: #333 !important; }
.control-select:hover { border-color: #777 !important; background-color: #333 !important; }

.ball-card {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.ball-card:hover { transform: translateY(-8px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important; border-color: #8e44ad !important; }

.ball-card img { width: 100%; height: 180px; object-fit: contain; transition: transform 0.3s ease; padding: 8px; }
.ball-card:hover img { transform: scale(1.05); }
.ball-card .card-title { color: #ffffff !important; font-size: 1.1rem; font-weight: 500; margin-bottom: 0.5rem; }
.ball-card .card-text { color: #b0b0b0 !important; font-size: 0.85rem; }

.wave-indicator {
    position: absolute;
    top: 8px;
    left: 8px;
    color: #000 !important;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 4px;
    z-index: 10;
    transition: transform 0.2s ease;
}

.wave-indicator:hover { transform: scale(1.1); }

.id-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #d3d3d3 !important;
    color: #000 !important;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 4px;
    z-index: 10;
    transition: transform 0.2s ease;
}

.id-indicator:hover { transform: scale(1.1); }

.rarity-value { color: #ffc107 !important; font-weight: 500; }
.artist-value { color: #0dcaf0 !important; font-weight: 500; }
.rarity-container, .artist-container { color: #e0e0e0 !important; }
.rarity-container .text-muted, .artist-container .text-muted { color: #b0b0b0 !important; }

.popup-art-container {
    background-color: #2a2a2a !important;
    border: 1px solid #444 !important;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.popup-art-container:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important; border-color: #8e44ad !important; }
.popup-art-container img { width: 100%; border-radius: 8px 8px 0 0; transition: transform 0.2s ease; height: 220px; object-fit: contain; padding: 8px; }
.popup-art-container:hover img { transform: scale(1.02); }

.popup-enlarged-art-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px !important;
    min-height: 500px;
}

.popup-enlarged-art-container img {
    max-width: 100% !important;
    max-height: 80vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
}

.popup-enlarged-art-container img:hover { transform: scale(1.02); }

#search-bar {
    background-color: #1e1e1e !important;
    border: 1px solid #444 !important;
    color: #ffffff !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#search-bar:focus { border-color: #8e44ad !important; box-shadow: 0 0 0 0.2rem rgba(142, 68, 173, 0.25) !important; }
#search-bar::placeholder { color: #b0b0b0 !important; }