/* Installation Warning Styles */

/* Shelf container warning effect */
.shelf-container.needs-installation {
    position: relative;
    border: .5px solid #ff0707 !important;
    box-shadow: 0 0 10px rgba(255, 36, 7, 0.5) !important;
    animation: pulse-warning 2s infinite;
}

/* Pulsing animation for warning effect */
@keyframes pulse-warning {
    0% {
        box-shadow: 0 0 10px rgba(255, 36, 7, 0.5);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 7, 7, 0.8);
    }
    100% {
        box-shadow: 0 0 10px rgba(255, 36, 7, 0.5);
    }
}

/* Installation badge in shelf header */
.installation-badge {
    display: inline-flex;
    align-items: center;
    background-color: #ffc107;
    color: #212529;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.installation-badge i {
    margin-right: 0.25rem;
}

/* Installation warning icon in gondola cards */
.shelf-item.needs-installation {
    background-color: rgba(255, 193, 7, 0.1);
    border-left: 3px solid #ffc107;
}

.installation-icon {
    margin-left: 0.5rem;
    animation: blink-warning 1.5s infinite;
}

@keyframes blink-warning {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.installation-warning {
    color: #ff0707;
    font-size: 1.5rem;
    cursor: pointer;
}




/* Installation badge for mobile view */
@media (max-width: 768px) {
    .installation-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
}