/**
 * Product Stock Indicator Styles
 * 
 * CSS for displaying the "Op voorraad" (In Stock) indicator
 * on product cards across the site.
 */

/* Stock Status Indicator - Base Styles */
.stock-status {
    display: flex;
    align-items: center;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
}

/* In Stock Status */
.stock-status.in-stock {
    color: #2ecc71; /* Green color */
}

/* On Backorder Status */
.stock-status.on-backorder {
    color: #e67e22; /* Orange color */
}

/* Out of Stock Status */
.stock-status.out-of-stock {
    color: #e74c3c; /* Red color */
}

/* Dashicon Styling */
.stock-status .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    margin-right: 5px;
}

/* Specific icon styling for better visibility */
.stock-status.in-stock .dashicons {
    color: #2ecc71;
}

.stock-status.on-backorder .dashicons {
    color: #e67e22;
}

.stock-status.out-of-stock .dashicons {
    color: #e74c3c;
}

.stock-status .stock-text {
    line-height: 1;
}

/* Adjustments for product card layout */
.product-card .price-container,
.products-container .product .price-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .stock-status {
        font-size: 12px;
    }
    
    .stock-status .dashicons {
        font-size: 16px;
        width: 16px;
        height: 16px;
    }
}