/* =============================================
   PRODUCT IMAGES & STOCK BADGES CSS
   Add this to your style.css file
   ============================================= */

/* Product Image Container */
.product-img-container {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.product-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-img-container img {
    transform: scale(1.05);
}

/* Stock Badges */
.out-of-stock-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(229, 62, 62, 0.95);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 2;
}

.low-stock-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(237, 137, 54, 0.95);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 2;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Product Brand */
.product-brand {
    color: var(--accent-color);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.3rem 0;
}

/* Disabled Add to Cart Button */
.add-to-cart:disabled {
    background: #CBD5E0 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.add-to-cart:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Notification Animations */
@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* Product Table Image Thumbnail */
#productsTableBody img {
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .product-img-container {
        height: 180px;
    }
    
    .out-of-stock-badge,
    .low-stock-badge {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
}