/**
 * 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: 5px;
	--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 + 5px);
}

.gjf-basket-goal-wrap {
	position: fixed;
	right: 25px;
	bottom: 110px;
	z-index: 9999998;
	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;
	padding: var(--gjf-bg-wrap-padding-y) 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;
	}
}