.missing-attention {
    animation: attention-pulse 1.2s ease-in-out 2;
    outline: 2px dashed #dc3545;
    outline-offset: 4px;
    border-radius: .5rem;
}

@keyframes attention-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, .4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.missing-attention {
    animation: attention-pulse 1.2s ease-in-out 2;
    outline: 2px dashed #dc3545;
    outline-offset: 4px;
    border-radius: .5rem;
}

@keyframes attention-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, .4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* Migrated from product view: selection border for price options */
#ecommerceProduct .price-option.active {
    border-color: var(--bs-success) !important;
    border-width: 2px;
}

/* Product carousel fixed height controlled by CSS var, computed via JS */
#ecommerceProduct .product-image-container {
    /* default fallback height before JS computes; will be overwritten */
    --carousel-height: 400px;
}

#productCarousel .carousel-inner,
#productCarousel .carousel-item {
    height: var(--carousel-height);
}

#productCarousel .carousel-item > img,
#productCarousel .carousel-item > div.d-block {
    /* Ensure direct content fills the fixed height area */
    height: 100%;
}

/* Make images scale within area without cropping */
#productCarousel img.product-carousel-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hover/transition effects for buttons (replaces inline handlers) */
.btn-raise-success {
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.btn-raise-success:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(25, 135, 84, 0.3);
}

.btn-raise-secondary {
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.btn-raise-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.2);
}
