/************************************************************
  CCX — WISHLIST
  - Coeur overlay global
  - Toast feedback
  - Badge compteur header
************************************************************/

/* ========== Coeur overlay sur toutes les listes produits ========== */

.woocommerce ul.products li.product {
  position: relative !important;
  overflow: visible !important;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product {
  position: relative !important;
}

/* Wrapper en haut-droite */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link > .ccx-wl-wrap,
.woocommerce ul.products li.product > .ccx-wl-wrap {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 50 !important;
  pointer-events: none !important;
}

/* Bouton coeur — état par défaut (NON coché) */
.ccx-wl-wrap .ccx-wl-btn {
  pointer-events: auto !important;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2px solid #ff7a00;                 /* bordure orange */
  background: rgba(255, 255, 255, .55);      /* blanc translucide */
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .25);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease;
}

/* Icône coeur : contour orange par défaut */
.ccx-wl-wrap .ccx-wl-ico {
  width: 18px;
  height: 18px;
  fill: transparent;
  stroke: #ff7a00;
  stroke-width: 2.1px;
  transition: fill .16s ease, stroke .16s ease, transform .16s ease;
}

/* Hover quand ce n'est PAS coché */
.ccx-wl-wrap .ccx-wl-btn:hover:not(.is-active) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .35);
  background: rgba(255, 255, 255, .85);     /* effet “rempli” + verre */
}

/* Au survol le coeur se remplit orange */
.ccx-wl-wrap .ccx-wl-btn:hover:not(.is-active) .ccx-wl-ico {
  fill: #ff7a00;
  stroke: #ff7a00;
}

/* ========= ÉTAT COCHÉ (en favoris) ========= */

/* État COCHÉ : même style “glass” mais version verte */
.ccx-wl-wrap .ccx-wl-btn.is-active {
  border-color: #22c55e;                     /* vert un peu plus doux */
  background: rgba(255, 255, 255, .65);      /* verre clair */
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 4px 14px rgba(34, 197, 94, .35);
}


/* coeur vert comme avant */
.ccx-wl-wrap .ccx-wl-btn.is-active .ccx-wl-ico {
  fill: #00ff6a;
  stroke: #00ff6a;
  transform: scale(1.05);
}

/* petite anim à l’ajout (inchangée) */
.ccx-wl-wrap .ccx-wl-btn.ccx-wl-anim-added .ccx-wl-ico {
  animation: ccxHeartPop .26s ease-out;
}
@keyframes ccxHeartPop {
  0%   { transform: scale(.8);   opacity:.5; }
  60%  { transform: scale(1.3); opacity:1; }
  100% { transform: scale(1);   opacity:1; }
}


/* ========== Toast haut-droite ========== */

.ccx-toast-container {
  position: fixed;
  top: 72px;
  right: 16px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ccx-toast {
  min-width: 210px;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  background: rgba(15,23,42,.94);
  color: #e5e7eb;
  box-shadow: 0 10px 30px rgba(15,23,42,.5);
  animation: ccxToastIn .16s ease-out forwards;
}

.ccx-toast--removed {
  background: rgba(15,23,42,.94);
}

.ccx-toast-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #00ff6a;
  flex-shrink: 0;
}

.ccx-toast--removed .ccx-toast-dot {
  background: #fb7185;
}

.ccx-toast-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
}

@keyframes ccxToastIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes ccxToastOut {
  from { opacity:1; transform:translateY(0); }
  to   { opacity:0; transform:translateY(-4px); }
}

/* ========== Badge compteur header ========== */

.ccx-wl-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  margin-left:4px;
  background:#00ff6a;
  color:#0b0c0d;
  padding:0 5px;
}

.ccx-wl-badge.is-empty {
  opacity:.5;
}

.ccx-wl-count {
  line-height:1;
}


/* Wishlist – on neutralise tout fond/bande sur le header pour ne garder que la pastille */
.ccx-wlp-header{
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Pastille de catégorie – même orange que la page jeux vidéo */
.ccx-wlp-title{
  background: #ff7a00 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 22px !important;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.08em;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}