/* ==========================================================================
   Identities Gallery — the CWS Add to cart widget (cws_suite_woocommerce_add_to_cart),
   e.g. on the single product template (Elementor 5235), in the look of the
   quick view's cart button (identities-gallery-addons iga.css, .iga-cartbtn):
   dark #23252b, 60px, Archivo 16/600, square, the bag icon, a small lift and
   a light sweep on hover.

   The widget has no theme-template surface and prints a text-only <button>
   (its JS swaps that text for the "select an option" notice and appends the
   spinner), so the bag is drawn in CSS: a ::before masked with the icon, in
   the text colour. Loaded by identities-gallery-addons
   (includes/class-iga-product.php) after cws-suite-woocommerce.css.

   Specificity: everything is scoped to the widget wrapper. The colours are
   written with the same :not([disabled]):not([cws-disabled="1"]) guard as the
   widget's own Style-tab controls, so the plugin's grey disabled state
   (variable product with nothing picked, out of stock) still shows, and a
   colour set in the Style tab ties these and wins by load order.
   ========================================================================== */

.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart .cws-add-to-cart-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    min-width: 220px;
    height: 60px;
    margin: 0;
    padding: 0 30px;
    border: 0;
    border-radius: 0;
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    overflow: hidden;
    cursor: pointer;
    transition: background-color .25s, transform .25s cubic-bezier(.2, .75, .2, 1), box-shadow .25s;
}

.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button:not([disabled]):not([cws-disabled="1"]) {
    background: #23252b;
    background-color: #23252b;
    color: #fff;
}

.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button:not([disabled]):not([cws-disabled="1"]):hover {
    background: #000;
    background-color: #000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button:not([disabled]):not([cws-disabled="1"]):active {
    transform: translateY(0) scale(.98);
    box-shadow: none;
}

.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button:focus-visible {
    outline: 2px solid #23252b;
    outline-offset: 3px;
}

/* The bag */
.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button::before {
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button:not([disabled]):not([cws-disabled="1"]):hover::before {
    transform: translateY(-2px) rotate(-8deg);
}

/* A light sweep across the button on hover */
.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .14), transparent);
    transform: skewX(-18deg);
    transition: left .6s cubic-bezier(.2, .75, .2, 1);
    pointer-events: none;
}

.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button:not([disabled]):not([cws-disabled="1"]):hover::after { left: 120%; }

/* Disabled (out of stock / no variation picked): the plugin's grey, our shape. */
.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart .cws-add-to-cart-button[disabled],
.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart .cws-add-to-cart-button[cws-disabled="1"] {
    color: #6b6b69;
    cursor: not-allowed;
}

/* Adding: the CWS spinner takes the bag's place in the row (its wrap is
   absolute + padded for a full-size overlay by default). */
.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button.loading { pointer-events: none; opacity: .85; }
.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button.loading::before { display: none; }

.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button .cws-suite-loading-animation-wrap {
    position: static;
    order: -1;
    display: inline-flex;
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    background-color: transparent;
}

.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button .cws-suite-loading-animation-wrap svg { width: 20px; height: 20px; }
.elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button svg.cws-suite-loading-animation { fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
    .elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button,
    .elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button::before,
    .elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button::after { transition: none; }
    .elementor-widget-cws_suite_woocommerce_add_to_cart .cws-add-to-cart-button:hover { transform: none; }
}
