/* =============================================
   BSS Image Stack Group Widget
   ============================================= */

.bss-isg {
	display: flex;
}

.bss-isg__list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- Item ---- */
.bss-isg__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0s, margin 0.35s ease;
	z-index: 1;
}

.bss-isg__item:hover {
	z-index: 10;
}

/* Spread on group hover — uses margin so stacking offset stays intact */
.bss-isg--hover-spread .bss-isg__list {
	transition: gap 0.35s ease;
}

.bss-isg--hover-spread:hover .bss-isg__item {
	margin-left: 4px !important;
	margin-right: 4px !important;
	margin-top: 0 !important;
}

.bss-isg--hover-spread .bss-isg__item {
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0s, margin 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Link wrapper ---- */
.bss-isg__link {
	display: block;
	position: relative;
	line-height: 0;
	text-decoration: none;
}

/* ---- Image ---- */
.bss-isg__img {
	display: block;
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, opacity 0.25s ease;
}

/* ---- Count badge ---- */
.bss-isg__count {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #e5e7eb;
	color: #374151;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	border: 3px solid #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ---- Tooltip ---- */
.bss-isg__tooltip {
	position: absolute;
	z-index: 100;
	white-space: nowrap;
	background-color: #1f2937;
	color: #ffffff;
	font-size: 12px;
	font-weight: 500;
	padding: 5px 10px;
	border-radius: 4px;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

/* Arrow shared */
.bss-isg__tooltip::after {
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 6px;
}

/* --- Top --- */
.bss-isg__tooltip--top {
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
}
.bss-isg__tooltip--top::after {
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-color: #1f2937 transparent transparent transparent;
}

/* --- Bottom --- */
.bss-isg__tooltip--bottom {
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
}
.bss-isg__tooltip--bottom::after {
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-color: transparent transparent #1f2937 transparent;
}

/* --- Left --- */
.bss-isg__tooltip--left {
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%) translateX(4px);
}
.bss-isg__tooltip--left::after {
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border-color: transparent transparent transparent #1f2937;
}

/* --- Right --- */
.bss-isg__tooltip--right {
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%) translateX(-4px);
}
.bss-isg__tooltip--right::after {
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	border-color: transparent #1f2937 transparent transparent;
}

/* Visible state (JS adds .bss-isg__tooltip--visible) */
.bss-isg__tooltip--visible {
	opacity: 1;
	visibility: visible;
}
.bss-isg__tooltip--top.bss-isg__tooltip--visible    { transform: translateX(-50%) translateY(0); }
.bss-isg__tooltip--bottom.bss-isg__tooltip--visible { transform: translateX(-50%) translateY(0); }
.bss-isg__tooltip--left.bss-isg__tooltip--visible   { transform: translateY(-50%) translateX(0); }
.bss-isg__tooltip--right.bss-isg__tooltip--visible  { transform: translateY(-50%) translateX(0); }

/* Arrow color inherits tooltip background via JS data attribute fallback */