/* Make button turn black on click/load */
form.cart button[type="submit"].angie-is-loading,
form.cart button[type="submit"]:active {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

form.cart button[type="submit"] {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

form.cart button[type="submit"] .angie-btn-text {
    transition: opacity 0.2s ease;
}

form.cart button[type="submit"].angie-is-loading .angie-btn-text {
    opacity: 0;
}

form.cart button[type="submit"] .angie-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

form.cart button[type="submit"].angie-is-loading .angie-loader {
    opacity: 1;
    visibility: visible;
    animation: angie-spin 0.8s linear infinite;
}

@keyframes angie-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

form.cart button[type="submit"] .angie-ripple {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: scale(0);
    pointer-events: none;
}

form.cart button[type="submit"] .angie-ripple.angie-animate {
    animation: angie-ripple-anim 0.6s linear;
}

@keyframes angie-ripple-anim {
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Hide WooCommerce default added checkmark content */
form.cart button[type="submit"].added::after,
.woocommerce form.cart button[type="submit"].added::after {
    display: none !important;
    content: '' !important;
}