/* Spinner Animation - NERO per bottoni gialli - PIÙ GRANDE */
.cart-btn-spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: #000;
    border-radius: 50%;
    animation: cart-spin 0.6s linear infinite;
    vertical-align: middle;
}

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

/* Checkmark - NERO con BORDI - SENZA ANIMAZIONE */
.cart-btn-check {
    display: inline-block;
    width: 28px;
    height: 28px;
    position: relative;
    vertical-align: middle;
    transform: rotate(45deg);
}

.cart-btn-check::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 3px;
    width: 9px;
    height: 18px;
    border: solid #000;
    border-width: 0 5px 5px 0;
}

/* Button States - SENZA CAMBIO COLORE */
button[data-button-action="add-to-cart"] {
    position: relative;
    transition: opacity 0.3s ease;
}

/* Rendi invisibile testo e SVG durante loading e success */
button[data-button-action="add-to-cart"].loading span:not(.cart-btn-icon-wrapper):not(.cart-btn-spinner),
button[data-button-action="add-to-cart"].success span:not(.cart-btn-icon-wrapper):not(.cart-btn-check) {
    opacity: 0;
    transition: opacity 0.3s ease;
}

button[data-button-action="add-to-cart"].loading svg,
button[data-button-action="add-to-cart"].success svg {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Mantieni visibili spinner e check */
button[data-button-action="add-to-cart"].loading .cart-btn-spinner,
button[data-button-action="add-to-cart"].success .cart-btn-check {
    opacity: 1;
}

/* Ripristina opacità normale quando non è in loading/success */
button[data-button-action="add-to-cart"]:not(.loading):not(.success) span:not(.cart-btn-icon-wrapper),
button[data-button-action="add-to-cart"]:not(.loading):not(.success) svg {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* IMPORTANTE: Assicura che il wrapper sia visibile anche su bottoni mobile solo-SVG */
button[data-button-action="add-to-cart"].loading .cart-btn-icon-wrapper,
button[data-button-action="add-to-cart"].success .cart-btn-icon-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 10;
}

/* Disabilita click durante animazione */
button[data-button-action="add-to-cart"].loading,
button[data-button-action="add-to-cart"].success {
    pointer-events: none;
}

/* NO cambio colore - mantieni il giallo originale */
/* Il bottone mantiene il colore originale durante success */

/* Contenitore per spinner e check */
.cart-btn-icon-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

button[data-button-action="add-to-cart"].loading .cart-btn-icon-wrapper,
button[data-button-action="add-to-cart"].success .cart-btn-icon-wrapper {
    display: block;
}

/* Centra meglio il check (leggermente più in alto) */
button[data-button-action="add-to-cart"].success .cart-btn-icon-wrapper {
    transform: translate(-50%, -52%);
}

/* Regole specifiche per bottoni mobile piccoli (solo SVG) */
button[data-button-action="add-to-cart"].cartb {
    min-width: 40px;
    min-height: 40px;
}

/* Assicura visibilità su bottoni .cartb (ora con testo nello span e flexbox) */
button[data-button-action="add-to-cart"].cartb {
    position: relative;
}

button[data-button-action="add-to-cart"].cartb .cart-btn-icon-wrapper {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10;
}

/* Centra meglio il check sui bottoni .cartb - sovrascrive la regola sopra */
/* Il check deve essere centrato come lo spinner, non con offset -52% */
button[data-button-action="add-to-cart"].cartb.success .cart-btn-icon-wrapper {
    transform: translate(-50%, -50%) !important;
}

/* Centra lo spinner durante loading sui bottoni .cartb */
button[data-button-action="add-to-cart"].cartb.loading .cart-btn-icon-wrapper {
    transform: translate(-50%, -50%) !important;
}

/* Aumenta dimensioni del check sui bottoni .cartb (lista categoria) per renderlo uguale alla scheda prodotto */
/* Forza dimensioni esatte per evitare che altre regole CSS le modifichino */
button[data-button-action="add-to-cart"].cartb.success .cart-btn-check {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    display: inline-block !important;
    box-sizing: border-box !important;
}

button[data-button-action="add-to-cart"].cartb.success .cart-btn-check::after {
    left: 9px !important;
    top: 3px !important;
    width: 9px !important;
    height: 18px !important;
    border-width: 0 5px 5px 0 !important;
}

/* Dimensioni spinner per bottoni .cartb (uguali a quelli del sito) */
/* Forza dimensioni esatte per evitare che altre regole CSS le modifichino */
button[data-button-action="add-to-cart"].cartb.loading .cart-btn-spinner {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: inline-block !important;
    box-sizing: border-box !important;
}

/* Media query per mobile - aggiusta posizionamento check */
@media (max-width: 768px) {
    /* Su mobile, il check è troppo in alto, lo spostiamo più in basso per centrarlo come lo spinner */
    button[data-button-action="add-to-cart"].success .cart-btn-icon-wrapper {
        transform: translate(-50%, -50%) !important;
    }
    
    /* Per bottoni .cartb su mobile - spostiamo più in basso (riduciamo l'offset negativo) */
    button[data-button-action="add-to-cart"].cartb.success .cart-btn-icon-wrapper {
        transform: translate(-50%, -55%) !important;
    }
}