/**
 * Studioone Dynamic Product Info Styles
 * 
 * This CSS file is intentionally minimal to preserve your existing theme styling.
 * Stock status styling is handled by your theme's CSS:
 * - .stock.available (green with icon \e908)
 * - .stock.unavailable (red with icon \e909)
 * - .stock:not(:has(.action.alert)) - Special styling when no alert button
 * 
 * This file only adds subtle enhancements and ensures Product Alert displays correctly.
 */

/* Smooth transition animation when stock status changes */
@keyframes stockStatusChange {
    0% { 
        opacity: 0.7;
        transform: scale(0.98); 
    }
    50% { 
        opacity: 1;
        transform: scale(1.02); 
    }
    100% { 
        opacity: 1;
        transform: scale(1); 
    }
}

/* Apply animation when stock status is updated */
.stock.stock-changed {
    animation: stockStatusChange 0.3s ease-in-out;
}

/* Optional: Add smooth transition for all stock changes */
.stock {
    transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* Product Alert "Notify Me" styling */
.product.alert.stock {
    margin-top: 24px;
    margin-bottom: 24px;
}

/* Ensure no stock status classes are applied to alert wrapper */
.product.alert.stock.available,
.product.alert.stock.unavailable {
    /* Remove stock status styling from alert wrapper */
    color: inherit !important;
    background: none !important;
}

.product.alert.stock.available::before,
.product.alert.stock.unavailable::before {
    /* Remove stock icons from alert wrapper */
    content: none !important;
    display: none !important;
}

/* Hide when explicitly hidden */
.product.alert.stock[style*="display: none"] {
    display: none !important;
}