/* TuttoCapsule "in cart" indicator badge.
 * Extracted from "Code Snippets" snippet #15.
 *
 * The PHP side adds the .prodotto-presente-carrello class on the product
 * post container.
 *
 * Two activation paths supported:
 *   1) Theme/Elementor templates that already include #prodotto-nel-carrello
 *      or .spunta-prodotto-carrello as an absolute-positioned overlay over
 *      the cart icon — this CSS reveals them when the class is set
 *      (matches the original snippet behavior).
 *   2) Templates that don't have such an overlay element — the JS swaps
 *      the add-to-cart button itself into a .tc-cart-check element, which
 *      this CSS styles as a centered green checkmark.
 */

#prodotto-nel-carrello,
.spunta-prodotto-carrello {
    display: none !important;
    transition: all 0.3s ease;
}

/* Show the template's checkmark element either when the post_class
 * "sticky" flag is set (server-side render of products already in cart)
 * OR when the JS flash flag is active (just-added feedback). */
.prodotto-presente-carrello #prodotto-nel-carrello,
.prodotto-presente-carrello .spunta-prodotto-carrello,
.tc-cart-flash #prodotto-nel-carrello,
.tc-cart-flash .spunta-prodotto-carrello {
    display: flex !important;
    animation: popIn 0.3s ease-in-out;
}

/* JS-driven swap: when a product enters the cart, the JS marks the
 * original add-to-cart button with data-tc-original-button="1". This CSS
 * hides those buttons so the template's existing .spunta-prodotto-carrello
 * (or #prodotto-nel-carrello) element — already living in the same flex
 * container in the Elementor loop layout — naturally takes its place. */
[data-tc-original-button] {
    display: none !important;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    80% {
        transform: scale(1.15);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}