/**
 * Product Add to Cart Button Styles
 * 
 * These styles provide visual feedback during the add-to-cart process.
 * Include this CSS in your frontend alongside product-add-to-cart.js
 */

/* Loading Spinner */
.product-cart-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: product-cart-spin 0.75s linear infinite;
    vertical-align: middle;
}

@keyframes product-cart-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Loading State */
.product-add-to-cart.product-cart-loading {
    cursor: wait;
    opacity: 0.8;
    pointer-events: none;
}

.product-cart-loading-text {
    vertical-align: middle;
}

/* Success State */
.product-add-to-cart.product-cart-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Error State */
.product-add-to-cart.product-cart-error {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Disabled State (when loading) */
.product-add-to-cart:disabled,
.product-add-to-cart[disabled] {
    cursor: not-allowed;
    opacity: 0.65;
}

/* Optional: Hover effects that respect state classes */
.product-add-to-cart:not(.product-cart-loading):not(.product-cart-success):not(.product-cart-error):hover {
    opacity: 0.9;
}