/* ———————————————— */
/*  CONTROLLI QUANTITÀ E BOTTONE   */
/* ———————————————— */

/* 1) Wrapper */
.pbp-quantity-area {
  position:     relative !important;
  margin-top:    5px !important;
  margin-right:  0      !important;
  margin-bottom: 8px !important;
  margin-left:   0      !important;
  text-align:   center !important;
  overflow:     visible !important;
  margin-bottom: 0px !important;
}

/* 2) Rimuove lo spinner dall’input number */
.pbp-quantity-area .pbp-qty-input {
  -moz-appearance: textfield !important;
}
.pbp-quantity-area .pbp-qty-input::-webkit-outer-spin-button,
.pbp-quantity-area .pbp-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* 3) Reset di base per i bottoni */
.pbp-quantity-area .pbp-qty-button,
.pbp-quantity-area .pbp-add-to-cart-btn {
  all: unset !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* 4) Inline –, input, + */
.pbp-quantity-area .pbp-qty-minus,
.pbp-quantity-area .pbp-qty-input,
.pbp-quantity-area .pbp-qty-plus {
  display:        inline-block !important;
  vertical-align: middle !important;
  margin-right:   0.5rem !important;
}
.pbp-quantity-area .pbp-qty-plus {
  margin-right:   0 !important;
}

/* 5) – e + style */
.pbp-quantity-area .pbp-qty-button {
  position:       relative !important;
  z-index:        0        !important;  /* crea il contesto di stacking */
  width:          30px     !important;
  height:         30px     !important;
  border-radius:  4px      !important;
  display:        inline-flex !important;
  align-items:    center   !important;
  justify-content:center   !important;
  font-family:    "Open Sans",sans-serif !important;
  font-weight:    700      !important;
  color:          #10293f !important;
  font-size:      1.2em    !important;

  /* gradiente base sempre visibile */
  background:     linear-gradient(to top, #b6c9df, #ebeef2) !important;

  /* solo il click fa il transform, veloce per dare feedback */
  transition:     transform 0.2s ease !important;
}

.pbp-quantity-area .pbp-qty-button::after {
  content:        "" ;
  position:       absolute;
  inset:          0;
  border-radius:  inherit;
  pointer-events: none;               /* non blocca hover/active */
  z-index:        -1    !important;   /* sotto il testo ma sopra il background */

  /* gradiente di hover, parte da opacità 0 */
  background:     linear-gradient(to top, #a1b8d5, #eaedf0) !important;
  opacity:        0               !important;

  /* fade in e fade out in 0.5s */
  transition:     opacity 0.5s ease-in-out !important;
}

.pbp-quantity-area .pbp-qty-button:hover::after {
  opacity: 1 !important;
}

.pbp-quantity-area .pbp-qty-button:active {
  transform: translateY(-6px) !important;
}


/* 6) Stile input quantità */
.pbp-quantity-area .pbp-qty-input {
  width:           4rem !important;
  height:          30px !important;
  line-height:     30px !important;
  text-align:      center !important;
  vertical-align:  middle !important;
  font-family:     "Open Sans",sans-serif !important;
  font-weight:     600 !important;
  color:           #333333 !important;
  border-radius:   8px !important;
}

/* 7) Bottone aggiungi al carrello */
.pbp-quantity-area .pbp-add-to-cart-btn {
  position:        relative !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           100% !important;
  margin-top:      10px !important;
  margin-bottom: -8px !important;
  padding:         0.6em 1em !important;
  overflow:        hidden !important;
  z-index:         0    !important;   /* contesto stacking per ::after */
  font-family:     "Open Sans",sans-serif !important;
  font-weight:     700  !important;
  color:           #fff !important;
  text-transform:  uppercase !important;
  font-size:       0.9rem !important;
  background:      linear-gradient(to top, #1e76bd, #65a8f4) !important; /* base */
  border-radius:   4px  !important;

  /* solo il click fa transform, rapido per feedback */
  transition:      transform 0.2s ease !important;
}

.pbp-quantity-area .pbp-add-to-cart-btn::after {
  content:         "" ;
  position:        absolute;
  inset:           0;
  border-radius:   inherit;
  pointer-events:  none; /* non blocca hover/active */
  z-index:         -1    !important; /* sotto il testo, sopra il base */

  /* gradiente hover, parte da opacità 0 */
  background:      linear-gradient(to top, #1654ab, #478ff2) !important;
  opacity:         0               !important;

  /* fade in e fade out 0.5s */
  transition:      opacity 0.5s ease-in-out !important;
}

.pbp-quantity-area .pbp-add-to-cart-btn:hover::after {
  opacity: 1 !important;
}

.pbp-quantity-area .pbp-add-to-cart-btn:active {
  transform: translateY(-6px) !important;
}


/* 8) Bottone disabilitato (sbiadito) */
.pbp-quantity-area .pbp-add-to-cart-btn:disabled {
  opacity: 0.5 !important;
  cursor:  not-allowed !important;
}

/* 9) Messaggio interno ed esaurito */
.pbp-quantity-area .pbp-qty-feedback,
.pbp-quantity-area .pbp-out-of-stock {
  display:    block !important;
  margin:     0.5rem auto 0 auto !important;
  font-size:  1rem !important;
}
.pbp-quantity-area .pbp-qty-feedback.success { color: green !important; }
.pbp-quantity-area .pbp-qty-feedback.error   { color: red   !important; }

/* 10) Stile “Esaurito” e “Tutti gli articoli disponibili sono già nel tuo carrello” */
.pbp-quantity-area .pbp-out-of-stock {
  color:       red !important;
  font-weight: bold !important;
}

/* ———————————————— */
/*  GLOBAL FEEDBACK   */
/* ———————————————— */
.pbp-global-feedback {
  pointer-events: none;
  position:       absolute;
  background:     #28a745;
  color:          #fff;
  font-family:    "Open Sans",sans-serif;
  font-weight:    600;
  font-size:      0.9rem;
  padding:        6px 12px;
  border-radius:  4px;
  opacity:        0;
  animation:      pbp-global-feedback 1.5s ease-out forwards;
  white-space:    nowrap;
  z-index:        9999;
}
@keyframes pbp-global-feedback {
  0%   { opacity: 0; transform: translate(-50%, 0)      }
 10%   { opacity: 1; transform: translate(-50%, 0)      }
 90%   { opacity: 1; transform: translate(-50%, -50px)  }
100%   { opacity: 0; transform: translate(-50%, -50px)  }
}

/* ============================= */
/*   Icona “carrello” sul bottone  */
/* ============================= */
.pbp-quantity-area .pbp-add-to-cart-btn {
  position: relative;  /* serve al ::before */
}
.pbp-quantity-area .pbp-add-to-cart-btn::before {
  content: "" !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 30px !important;
  height:30px !important;
  margin-right:8px !important;
  background-image: url("https://sleevemyseal.com/wp-content/uploads/Assets/Body/CarrelloAggiungiAlCarrello.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}





/* ———————————————— */
/*  SELEZIONA VARIANTI  */
/* ———————————————— */
.pbp-quantity-area.pbp-select-variant {
  all: unset !important;
  box-sizing: border-box !important;
  cursor: default !important;
  pointer-events: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 0.2em 1em !important;
  margin-bottom: -1px !important;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  color: #fff !important;

  background: linear-gradient(to top, #949da8, #bdd5f2) !important;
  border-radius: 4px !important;

  transition: background 0.5s ease !important;
}

.pbp-quantity-area.pbp-select-variant::before {
  content: "" !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 40px !important;
  height: 40px !important;
  margin-right: 8px !important;
  background-image: url("https://sleevemyseal.com/wp-content/uploads/Assets/Body/SELEZIONAVARIANTI.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ———————————————— */
/*  ESaurito  */
/* ———————————————— */
.pbp-quantity-area .pbp-out-of-stock {
  all: unset !important;
  box-sizing: border-box !important;
  cursor: default !important;
  pointer-events: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 0.6em 1em !important;

  font-family: "Open Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  color: #fff !important;

  background: linear-gradient(to top, #d02d2e, #ff776c) !important;
  border-radius: 4px !important;

  transition: background 0.5s ease !important;
}

.pbp-quantity-area .pbp-out-of-stock::before {
  content: "" !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 28px !important;
  height: 24px !important;
  margin-right: 8px !important;
  background-image: url("https://sleevemyseal.com/wp-content/uploads/Assets/Body/Esaurito.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ———————————————— */
/*  TUTTI IN CARRELLO  */
/* ———————————————— */
.pbp-quantity-area .pbp-all-in-cart {
  all: unset !important;
  box-sizing: border-box !important;
  cursor: default !important;
  pointer-events: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 0.1em 1em !important;
  margin-bottom: 0px !important;

  font-family: "Open Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  color: #fff !important;

  background: linear-gradient(to top, #d0762d, #feba6c) !important;
  border-radius: 4px !important;

  transition: background 0.5s ease !important;
}

.pbp-quantity-area .pbp-all-in-cart::before {
  content: "" !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 55px !important;
  height: 55px !important;
  margin-right: 8px !important;
  background-image: url("https://sleevemyseal.com/wp-content/uploads/Assets/Body/TuttiNelCarrello.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}