/* Delete countdown styles for artist profile modal */

/* Song item in delete countdown mode - full banner overlay */
.library-song-item.delete-countdown-banner {
    position: relative !important;
    background-color: #000 !important;
    border: 2px solid #dc2626 !important;
    min-height: 40px;
}

/* Hide all child elements except our overlay */
.library-song-item.delete-countdown-banner > *:not(.delete-countdown-overlay) {
    visibility: hidden !important;
    display: none !important;
}

/* The overlay - must be visible! */
.delete-countdown-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background-color: #000 !important;
    z-index: 10000 !important;
    cursor: pointer !important;
    padding: 8px !important;
}

.delete-countdown-overlay .delete-countdown-icon {
    color: #ef4444 !important;
    font-size: 1.2rem !important;
    animation: trash-shake 0.5s ease-in-out infinite !important;
}

.delete-countdown-overlay .delete-countdown-text {
    color: #ef4444 !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    white-space: nowrap !important;
}

/* Flash animation for countdown updates */
.delete-countdown-overlay.flash {
    animation: countdown-flash 0.3s ease-in-out !important;
}

@keyframes countdown-flash {
    0%, 100% {
        background-color: #000;
    }
    50% {
        background-color: rgba(220, 38, 38, 0.4);
    }
}

@keyframes trash-shake {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

/* Delete countdown message in Jukebot */
.delete-countdown-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(220, 38, 38, 0.2);
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.85rem;
}

.delete-countdown-icon {
    color: #ef4444;
    animation: trash-shake 0.5s ease-in-out infinite;
}

.delete-countdown-text {
    flex: 1;
}

/* Flash animation for countdown updates */
.delete-countdown-message.flash {
    animation: countdown-flash 0.3s ease-in-out;
}

@keyframes countdown-flash {
    0%, 100% {
        background: rgba(220, 38, 38, 0.2);
    }
    50% {
        background: rgba(220, 38, 38, 0.5);
    }
}

@keyframes delete-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0);
    }
}

@keyframes trash-shake {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

/* Delete complete message */
.delete-complete-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 8px;
    color: #86efac;
    font-size: 0.85rem;
    animation: complete-fade-in 0.3s ease-out;
}

.delete-complete-icon {
    color: #22c55e;
}

@keyframes complete-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}