/**
 * Basket Goal — barre de progression verticale au-dessus du bouton flottant.
 *
 * Structure :
 *   .gjf-basket-goal-wrap        position fixed (placé par JS sur .xoo-wsc-basket)
 *     .gjf-basket-goal           pill gris (le wrapper rond)
 *       .gjf-bg-progress         contexte de positionnement (track + points)
 *         .gjf-bg-track          pill blanc, overflow hidden -> clip le fill
 *           .gjf-bg-fill         pill rouge, height = filled %
 *         .gjf-bg-points         icônes en absolu par-dessus le track
 *
 * Variables personnalisables (override dans style.css) :
 *   --gjf-bg-wrap-bg         couleur du wrapper gris
 *   --gjf-bg-wrap-padding-x  padding horizontal du wrapper
 *   --gjf-bg-wrap-padding-y  padding vertical du wrapper (icon_radius + extra)
 *   --gjf-bg-track-bg        couleur du track (zone non remplie)
 *   --gjf-bg-track-width     largeur du track
 *   --gjf-bg-track-height    hauteur du track
 *   --gjf-bg-filled-color    couleur du fill (progression)
 *   --gjf-bg-icon-size       diamètre des cercles d'icônes
 */

:root {
  --gjf-bg-wrap-bg: #e5e5e5;
  --gjf-bg-wrap-padding-x: 8px;
  --gjf-bg-track-bg: #ffffff;
  --gjf-bg-track-width: 14px;
  --gjf-bg-track-height: 200px;
  --gjf-bg-filled-color: #e63946;
  --gjf-bg-icon-size: 26px;
  --gjf-bg-icon-bg: #fbe1e4;
  --gjf-bg-icon-color: #d65a6b;
  --gjf-bg-icon-bg-on: #e63946;
  --gjf-bg-icon-color-on: #ffffff;
  --gjf-bg-icon-glyph-ratio: 0.5;
  --gjf-bg-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  --gjf-bg-wrap-padding-y: calc(var(--gjf-bg-icon-size) / 2 + 8px);
}

.gjf-basket-goal-wrap {
  position: fixed;
  right: 25px;
  bottom: 110px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.gjf-basket-goal-wrap.is-aligned {
  right: auto;
  bottom: auto;
}

.gjf-basket-goal {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--gjf-bg-wrap-bg);
  border-radius: 9999px;
  /* Haut : rayon d'icône + gap (la dernière icône déborde du track).
	   Bas : juste le gap, le track s'arrête là (pas d'icône). */
  padding: var(--gjf-bg-wrap-padding-y) var(--gjf-bg-wrap-padding-x) var(--gjf-bg-wrap-padding-x);
  box-sizing: border-box;
  pointer-events: auto;
  /* Largeur calée sur la taille des icônes pour qu'elles ne dépassent jamais */
  width: calc(var(--gjf-bg-icon-size) + 2 * var(--gjf-bg-wrap-padding-x));
}

.gjf-basket-goal--empty {
  display: none;
}

.gjf-bg-progress {
  position: relative;
  width: var(--gjf-bg-track-width);
  height: var(--gjf-bg-track-height);
}

.gjf-bg-track {
  position: absolute;
  inset: 0;
  background: var(--gjf-bg-track-bg);
  border-radius: 9999px;
  overflow: hidden;
}

.gjf-bg-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: var(--gjf-bg-filled-color);
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.gjf-bg-points {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  z-index: 2;
}

.gjf-bg-point {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  pointer-events: auto;
}

.gjf-bg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gjf-bg-icon-size);
  height: var(--gjf-bg-icon-size);
  background: var(--gjf-bg-icon-bg);
  color: var(--gjf-bg-icon-color);
  border-radius: 50%;
  box-shadow: var(--gjf-bg-shadow);
  font-size: calc(var(--gjf-bg-icon-size) * var(--gjf-bg-icon-glyph-ratio));
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.gjf-bg-point.gjf-bg-reached .gjf-bg-icon {
  background: var(--gjf-bg-icon-bg-on);
  color: var(--gjf-bg-icon-color-on);
}

.gjf-bg-point.gjf-bg-pulse .gjf-bg-icon {
  animation: gjf-bg-pulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes gjf-bg-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.35);
    box-shadow: 0 0 0 6px rgba(230, 57, 70, 0.25);
  }
  100% {
    transform: scale(1);
    box-shadow: var(--gjf-bg-shadow);
  }
}

.gjf-bg-tip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 11px;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.gjf-bg-point:hover .gjf-bg-tip {
  opacity: 1;
}

@media (max-width: 600px) {
  :root {
    --gjf-bg-track-height: 160px;
    --gjf-bg-icon-size: 22px;
    --gjf-bg-track-width: 12px;
  }
}

/* =========================================================================
 * Override de la barre HORIZONTALE de XooTix dans le side cart
 * Réutilise les mêmes variables / couleurs que la version verticale.
 * Variables locales :
 *   --gjf-bgh-track-height    hauteur du track horizontal
 *   --gjf-bgh-icon-size       diamètre des icônes circulaires
 *   --gjf-bgh-padding-x       padding horizontal du pill (= rayon icône)
 * ========================================================================= */

:root {
  --gjf-bgh-track-height: 14px;
  --gjf-bgh-icon-size: 26px;
  /* Gap uniforme entre le contenu et le bord du pill */
  --gjf-bgh-edge: 8px;
  /* Droite : rayon d'icône + gap (la dernière icône déborde du track) */
  --gjf-bgh-padding-right: calc(var(--gjf-bgh-icon-size) / 2 + var(--gjf-bgh-edge));
  --gjf-bgh-padding-y: calc((var(--gjf-bgh-icon-size) - var(--gjf-bgh-track-height)) / 2 + var(--gjf-bgh-edge));
}

/* Conteneur global de la barre */
.xoo-wsc-bar-cont {
  margin: 12px 16px !important;
}

/* On masque les amounts/titles XooTix (les icônes parlent d'elles-mêmes,
   et la phrase "remaining" reste au-dessus). */
.xoo-wsc-bar-cont .xoo-wsc-bar-poamt,
.xoo-wsc-bar-cont .xoo-wsc-bar-potitle {
  display: none !important;
}

/* Texte "you're X away from..." centré au-dessus du pill */
.xoo-wsc-bar-cont .xoo-wsc-bar-remtext {
  text-align: center;
  font-size: 13px;
  margin-bottom: 8px !important;
}

/* === Wrapper PILL GRIS === */
.xoo-wsc-bar-cont .xoo-wsc-bar-in {
  background: var(--gjf-bg-wrap-bg) !important;
  border-radius: 9999px;
  /* Gauche : juste le gap (le track démarre là).
	   Droite : rayon d'icône + gap (la dernière icône déborde du track). */
  padding: var(--gjf-bgh-padding-y) var(--gjf-bgh-padding-right) var(--gjf-bgh-padding-y) var(--gjf-bgh-edge);
  height: auto !important;
  margin-top: 0 !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* === Track BLANC === */
.xoo-wsc-bar-cont .xoo-wsc-bar-in .xoo-wsc-bar {
  background-color: var(--gjf-bg-track-bg) !important;
  border-radius: 9999px;
  height: var(--gjf-bgh-track-height) !important;
  overflow: hidden;
  flex: 1 1 auto;
  width: 100%;
}

/* === Fill ROUGE === */
.xoo-wsc-bar-cont .xoo-wsc-bar-in span.xoo-wsc-bar-filled {
  background-color: var(--gjf-bg-filled-color) !important;
  border-radius: 9999px;
  height: 100% !important;
  display: block;
}

/* === Rangée d'icônes : overlay parfait sur le track === */
.xoo-wsc-bar-cont .xoo-wsc-bar-icons {
  position: absolute !important;
  left: var(--gjf-bgh-edge) !important;
  right: var(--gjf-bgh-padding-right) !important;
  top: 50% !important;
  bottom: auto !important;
  height: var(--gjf-bgh-icon-size) !important;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Chaque icône est centrée sur la FIN de son segment : c'est là que le fill
   atteint le checkpoint, et le dernier tombe exactement en bout de barre. */
.xoo-wsc-bar-cont .xoo-wsc-bar-icons > span {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: auto;
}

/* === Cercle d'icône (état non atteint) === */
.xoo-wsc-bar-cont .xoo-wsc-bar-icons i {
  position: relative !important;
  /* Décale l'icône d'un demi-diamètre pour la centrer sur la frontière
	   du segment (la dernière arrive pile en bout de track). */
  right: calc(var(--gjf-bgh-icon-size) / -2) !important;
  width: var(--gjf-bgh-icon-size) !important;
  height: var(--gjf-bgh-icon-size) !important;
  background-color: #ffffff !important;
  color: var(--gjf-bg-icon-color) !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: var(--gjf-bg-shadow);
  font-size: calc(var(--gjf-bgh-icon-size) * var(--gjf-bg-icon-glyph-ratio)) !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

/* === Cercle d'icône (état atteint) === */
.xoo-wsc-bar-cont .xoo-wsc-bar-icons .xoo-wsc-pt-reached i {
  background-color: var(--gjf-bg-icon-bg-on) !important;
  color: var(--gjf-bg-icon-color-on) !important;
  border: none !important;
}

/* Animation de la largeur du fill, comme le plugin */
.xoo-wsc-bar-cont .xoo-wsc-bar-filled {
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Tooltip sur les icônes (injecté par basket-goal.js) === */
.xoo-wsc-bar-cont .xoo-wsc-bar-icons > span {
  position: relative;
}

.gjf-bgh-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  /* Centré sur la frontière droite du segment, là où se trouve l'icône */
  left: auto;
  right: 0;
  transform: translateX(50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 11px;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 5;
}

/* Petite flèche sous le tooltip */
.gjf-bgh-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.85);
}

.xoo-wsc-bar-cont .xoo-wsc-bar-icons > span:hover .gjf-bgh-tip {
  opacity: 1;
}

.xoo-wsc-cart-active .gjf-basket-goal-wrap {
  display: none;
}